/* ===== tokens.css ===== */
/* AXION Design Tokens v1.1 - extracted from design.md + pages&spacing.md + AGENTS.md */
:root {
  /* Palette - Command Navy system */
  --navy-deep: #041225;
  --navy-command: #07182E;
  --navy-panel: #0B213A;
  --navy-overlay: rgba(4, 18, 37, 0.72);
  --gold: #C99A2E;
  --gold-highlight: #E0B44C;
  --gold-muted: rgba(201, 154, 46, 0.75);
  --champagne: #F0D9A0;
  --white: #F4F5F3;
  --silver: #AEB7C4;
  --silver-dim: #8A95A8;
  --border-gold: rgba(201,154,46,0.70);
  --line-gold: rgba(201,154,46,0.45);

  /* Typography - Times New Roman system */
  --font-heading: "Times New Roman", Times, Georgia, serif;
  --font-body: "Times New Roman", Times, Georgia, serif;
  --tracking-label: 0.14em;
  --tracking-cover: 0.03em;

  /* Scale - fluid — audit 2026-08-25: h1 tightened to 60-78px spec (Times 900 -0.015em) */
  --text-label: clamp(0.75rem, 0.7rem + 0.25vw, 0.9rem);
  --text-body: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
  --text-card: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  --text-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --h1: clamp(3.75rem, 2rem + 3vw, 4.875rem); /* 60px → 78px per Track D audit */
  --h2: clamp(1.9rem, 1.4rem + 2vw, 3.2rem);
  --h2-thesis: clamp(2.6rem, 1.8rem + 2.8vw, 4.2rem);
  --h3: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  --metric: clamp(2.2rem, 1.6rem + 2vw, 3.6rem);

  /* Spacing - 8px base */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px;

  /* Layout */
  --max-w: 1536px;
  --safe-x: 64px;
  --gutter: 24px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --nav-h: 84px;
}

/* Reset + base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--s-2)}
body{
  margin:0;background:var(--navy-deep);color:var(--white);
  font-family:var(--font-body);font-size:var(--text-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none;margin:0;padding:0}

/* Gold utilities */
.gold{color:var(--gold)}
.gold-h{color:var(--gold-highlight)}
.rule{height:2px;background:var(--gold);width:72px;margin:var(--s-2) 0 var(--s-3)}
.rule.center{margin-inline:auto}

/* Section label */
.eyebrow{
  font-size:var(--text-label);font-weight:600;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--gold);margin:0 0 var(--s-1);
}
.lede{color:var(--silver);font-size:var(--text-lead);line-height:1.45;max-width:62ch}
.fine{color:var(--silver-dim);font-size:0.92rem}
.quote{font-family:var(--font-heading);font-style:italic;font-size:1.35rem;line-height:1.35;color:var(--white)}
.quote::before{content:'\201C';color:var(--gold);font-size:2.2rem;line-height:0;vertical-align:-0.35em;margin-right:6px}

/* Navbar — moved to css/burger.css as single source (Track B). Keep brand base only. */
.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:0.08em}
.brand img{height:28px;width:auto;filter:brightness(1.1)}

/* Hero / sections */
.section{padding:var(--s-8) var(--safe-x) var(--s-10);max-width:var(--max-w);margin:0 auto}
.section.dark{background:var(--navy-command)}
.section.deep{background:var(--navy-deep)}
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.col-6{grid-column:span 6} .col-7{grid-column:span 7} .col-5{grid-column:span 5} .col-12{grid-column:span 12}

/* Mobile-fix 2026-08-25: grid items must not inherit min-width:auto —
   otherwise intrinsic image widths (srcset 600-1536px) inflate the collapsed
   single-column track on small screens and force horizontal overflow. */
.grid-12>*,.cover-split>*,.four-cards>*,.hub-grid>*,.office-grid>*,.leadership-grid>*,.sustain-cards>*{min-width:0}
.card[style*="grid-template-columns"]>*{min-width:0}
.hero-media,.card{max-width:100%}

/* Cards */
.card{
  background:var(--navy-panel);border:1.5px solid var(--border-gold);border-radius:var(--radius);
  padding:var(--s-3);position:relative;overflow:hidden;
}
.card.ghost{background:rgba(11,33,58,0.55)}
.stat{display:flex;align-items:baseline;gap:10px}
.stat b{font-family:var(--font-heading);font-size:var(--metric);color:var(--white);line-height:1}
.stat span{font-size:0.85rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold)}

/* Image treatment */
.hero-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1.5px solid var(--border-gold)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.angular-mask{clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}
@media(max-width:620px){.angular-mask{clip-path:none !important}}
@media(min-width:900px){.angular-mask{clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}}
.navy-overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(4,18,37,0.82) 0%, rgba(4,18,37,0.22) 55%, transparent 100%)}

/* 4-col cards */
.four-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
@media(max-width:1100px){.four-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.four-cards{grid-template-columns:1fr}}

/* Division pillars */
.pillars{display:flex;flex-wrap:wrap;gap:10px}
.pillar{border:1px solid var(--border-gold);color:var(--gold);padding:8px 14px;border-radius:999px;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;background:rgba(201,154,46,0.08)}

/* Timeline / roadmap */
.timeline{border-left:2px solid var(--line-gold);padding-left:var(--s-3);display:grid;gap:var(--s-4)}
.timeline article{position:relative}
.timeline article::before{content:'';position:absolute;left:calc(-1*var(--s-3) - 7px);top:6px;width:12px;height:12px;background:var(--gold);border-radius:50%;box-shadow:0 0 0 4px rgba(201,154,46,0.18)}
.year{color:var(--gold);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;font-size:0.85rem}

/* Chart bars */
.chart{display:flex;align-items:end;gap:14px;height:220px;padding:var(--s-3);background:var(--navy-panel);border:1.5px solid var(--border-gold);border-radius:var(--radius)}
.bar{flex:1;background:linear-gradient(180deg,var(--gold-highlight),var(--gold));border-radius:8px 8px 0 0;position:relative;min-height:40px}
.bar.b1{height:38%} .bar.b2{height:62%} .bar.b3{height:92%}
.bar::after{content:attr(data-value);position:absolute;top:-26px;left:50%;transform:translateX(-50%);font-size:0.8rem;font-weight:700;white-space:nowrap;color:var(--white)}
.bar span{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:0.72rem;letter-spacing:0.08em;color:var(--silver)}

/* Footer */
.footer{border-top:1px solid var(--line-gold);padding:var(--s-4) var(--safe-x);display:flex;justify-content:space-between;gap:var(--s-3);color:var(--silver);font-size:0.85rem;flex-wrap:wrap}
.footer a{color:var(--silver)} .footer a:hover{color:var(--gold)}

/* Responsive - dynamic view any screen size */
@media(max-width:900px){
  :root{--safe-x:16px}
  html{scroll-padding-top:18px}
  .grid-12{grid-template-columns:1fr}
  .col-6,.col-7,.col-5{grid-column:span 1}
  .section{padding:var(--s-4) var(--safe-x) var(--s-6) !important}
  .cover-split{grid-template-columns:1fr !important;min-height:auto !important}
  .cover-left{padding:20px var(--safe-x) !important}
  .cover-right{height:360px !important;min-height:360px !important}
  .four-cards{grid-template-columns:1fr 1fr !important;gap:12px !important}
  .hub-grid{grid-template-columns:1fr 1fr !important}
  .office-grid{grid-template-columns:1fr !important}
  .leadership-grid{grid-template-columns:1fr !important}
  .leader{grid-column:auto !important}
  .sustain-cards{grid-template-columns:1fr 1fr !important}
  #roadmap3d{height:380px !important}
  .hero-media{height:280px !important}
}
@media(max-width:620px){
  .four-cards{grid-template-columns:1fr !important}
  .hub-grid{grid-template-columns:1fr !important}
  .sustain-cards{grid-template-columns:1fr !important}
  /* nav pill sizing handled in burger.css */
  .navbar .brand img{height:36px !important}
  #roadmap3d{height:320px !important}
}
@media(max-width:380px){
  .section{padding-left:12px !important;padding-right:12px !important}
}
/* RTL overrides - Track A4 */
[dir="rtl"] .cover-split{ direction:rtl; }
[dir="rtl"] .cover-left{ text-align:right; }
[dir="rtl"] .angular-mask{ clip-path:polygon(0 0,88% 0,100% 100%,0 100%); }
@media(min-width:900px){ [dir="rtl"] .angular-mask{ clip-path:polygon(0 0,86% 0,100% 100%,0 100%); } }
[dir="rtl"] .timeline{ border-left:none; border-right:2px solid var(--line-gold); padding-left:0; padding-right:var(--s-3); }
[dir="rtl"] .timeline article::before{ left:auto; right:calc(-1*var(--s-3) - 7px); }
[dir="rtl"] .navbar{ direction:rtl; }
[dir="rtl"] .nav-links{ direction:rtl; }
[dir="rtl"] .eyebrow, [dir="rtl"] .lede, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] p{ text-align:right; }
[dir="rtl"] .rule{ margin-left:auto; margin-right:0; }


/* ===== site.css ===== */
/* Site specifics - extends tokens.css */
.page-wrap{overflow-x:hidden}
.contact-strip a{max-width:100%;overflow-wrap:anywhere}
.hero-title{font-family:var(--font-heading);font-size:var(--h1);line-height:0.96;letter-spacing:-0.02em;margin:6px 0 var(--s-2);word-break:normal;overflow-wrap:normal}
.hero-title small{display:block;font-family:var(--font-body);font-size:0.42em;font-weight:600;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.section h2{font-family:var(--font-heading);font-size:var(--h2);line-height:1.02;margin:0}
.section h2.thesis{font-size:var(--h2-thesis)}
.cards-row .card img{height:170px;width:100%;object-fit:cover;border-radius:10px;margin-bottom:var(--s-2)}
.lead-icon{width:64px;height:64px;border:1.5px solid var(--border-gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);background:rgba(201,154,46,0.08);font-size:1.4rem}
.hub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
@media(max-width:1000px){.hub-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hub-grid{grid-template-columns:1fr}}
.hub-card img{height:150px;width:100%;object-fit:cover;border-radius:10px}
.office-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
@media(max-width:1000px){.office-grid{grid-template-columns:1fr}}
.office-card{padding:var(--s-4)}
.leadership-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter)}
@media(max-width:900px){.leadership-grid{grid-template-columns:1fr}}
.leader{display:flex;gap:16px;align-items:flex-start}
.leader img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid var(--border-gold);flex-shrink:0}
.leader h4{margin:0;font-size:1rem}
.leader .role{color:var(--gold);font-size:0.82rem;letter-spacing:0.08em;text-transform:uppercase;margin:2px 0 6px}
.leader p{margin:0;color:var(--silver);font-size:0.92rem;line-height:1.45}
.sustain-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
@media(max-width:1000px){.sustain-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sustain-cards{grid-template-columns:1fr}}
.contact-strip{display:flex;gap:14px;flex-wrap:wrap;font-size:0.9rem}
.contact-strip a{border:1px solid var(--border-gold);padding:8px 14px;border-radius:999px;color:var(--gold);background:rgba(201,154,46,0.08)}
.cover-split{display:grid;grid-template-columns:44% 56%;min-height:72vh}
@media(max-width:900px){.cover-split{grid-template-columns:1fr}}
.cover-left{padding:var(--s-8) var(--safe-x);display:flex;flex-direction:column;justify-content:center;gap:var(--s-2)}
.cover-hubs{display:flex;flex-wrap:wrap;gap:14px}
.cover-right{position:relative;overflow:hidden}
.cover-right img{width:100%;height:100%;object-fit:cover}
.disclaimer{margin-top:var(--s-3);padding:10px 14px;border-left:2px solid var(--gold);color:var(--silver-dim);font-size:0.85rem;background:rgba(255,255,255,0.03);border-radius:0 8px 8px 0}
.btn-gold{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--navy-deep);padding:12px 18px;border-radius:999px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;font-size:0.82rem;border:none;cursor:pointer}
.btn-ghost{border:1px solid var(--border-gold);color:var(--gold);background:transparent;padding:11px 18px;border-radius:999px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;font-size:0.82rem}

/* Mobile hero typography — scale fluidly, never clip across viewport edge */
@media(max-width:620px){
  .hero-title{
    font-size:clamp(2.35rem,11vw,3.15rem);
    line-height:0.98
  }
}

/* Mobile: stack grid cards vertically where they have inline grid-template-columns */
@media(max-width:620px){
  .card.glass-card[style*="grid-template-columns"]{
    grid-template-columns:1fr !important
  }
}


/* ===== liquid-glass.css ===== */
/* AXION Liquid Glass System - Apple Liquid Glass 2025 adapted for navy/gold institutional */
:root {
  --glass-blur: blur(22px) saturate(1.45);
  --glass-blur-strong: blur(28px) saturate(1.6);
  --glass-bg: rgba(11, 33, 58, 0.34);
  --glass-bg-strong: rgba(11, 33, 58, 0.52);
  --glass-bg-nav: rgba(4, 18, 37, 0.42);
  --glass-border: rgba(255,255,255,0.10);
  --glass-border-gold: rgba(201,154,46,0.38);
  --glass-highlight: rgba(255,255,255,0.14);
  --glass-inner: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(201,154,46,0.14);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.06) inset;
  --glass-shadow-lg: 0 16px 48px rgba(0,0,0,0.52), 0 1px 0 rgba(255,255,255,0.08) inset;
}

/* Liquid glass chrome base */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inner);
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.04) 18%, transparent 52%);
  pointer-events: none;
}
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(135deg, rgba(201,154,46,0.32), transparent 36%, transparent 64%, rgba(255,255,255,0.08)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.9;
}

/* Override institutional cards -> liquid glass */
.card.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-gold);
  box-shadow: var(--glass-shadow), var(--glass-inner);
  border-radius: 18px;
}
.card.glass-card.ghost {
  background: rgba(11,33,58,0.22);
  backdrop-filter: var(--glass-blur-strong);
}
.card.glass-card::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.05) 22%, transparent 58%);
}

/* Navbar liquid */
.navbar.glass-nav {
  background: var(--glass-bg-nav);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.10);
}
.navbar.glass-nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,154,46,0.45) 30%, rgba(201,154,46,0.45) 70%, transparent);
}

/* Hero liquid refraction */
.hero-media.glass-hero {
  background: rgba(11,33,58,0.28);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--glass-shadow-lg);
  border-radius: 20px;
}
.hero-media.glass-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,0.10), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,0.08), transparent 40%);
  pointer-events: none;
  z-index: 1;
}
.hero-media.glass-hero img { filter: saturate(1.05) contrast(1.02); }

/* Pills and stats liquid */
.pillar.glass-pill {
  background: rgba(11,33,58,0.36);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(201,154,46,0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 12px rgba(0,0,0,0.22);
}
.stat.glass-stat {
  background: rgba(11,33,58,0.32);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px 14px;
  border-radius: 14px;
}

/* Chart liquid */
.chart.glass-chart {
  background: rgba(11,33,58,0.30);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--glass-shadow);
}
.bar {
  box-shadow: 0 4px 16px rgba(201,154,46,0.28), inset 0 1px 0 rgba(255,255,255,0.32);
  backdrop-filter: blur(6px);
}
.bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 45%);
}

/* Office and hub liquid */
.hub-card.glass-card img, .office-card.glass-card { filter: saturate(1.03); }

/* Liquid highlight orbs (decorative refraction hints) */
.liquid-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), rgba(201,154,46,0.14) 28%, transparent 68%);
  filter: blur(0.5px);
  pointer-events: none;
  opacity: 0.55;
}

/* Motion: liquid glass subtle flow */
@media (prefers-reduced-motion: no-preference) {
  .glass-card, .glass-hero { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease, border-color 0.4s ease; }
  .glass-card:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.16); border-color: rgba(201,154,46,0.52); }
}

/* Ensure legibility on glass */
.glass-card .fine, .glass-card p { text-shadow: 0 1px 8px rgba(0,0,0,0.32); }

/* Footer glass */
.footer.glass-footer {
  background: rgba(4,18,37,0.48);
  backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255,255,255,0.07);
}


/* ===== glass-dynamic.css ===== */
/* AXION Dynamic Clear Glass + 3D Overrides */
:root {
  --glass-clear: rgba(255,255,255,0.06);
  --glass-clear-strong: rgba(255,255,255,0.09);
  --glass-nav-clear: rgba(4,18,37,0.18);
}

/* Sharpen whole text — audit 2026-08-25 Track D: verified Times New Roman 900 tracking -0.015em at 60-78px (tokens --h1 clamp 3.75rem→4.875rem); grid 12-col 64px/24px verified */
html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: "Times New Roman", Times, Georgia, serif !important; font-weight: 400; letter-spacing: -0.01em; }
h1,h2,h3,h4 { font-family: "Times New Roman", Times, Georgia, serif !important; letter-spacing: -0.015em; font-weight: 900 !important; text-rendering: optimizeLegibility; }
h1.hero-title, h2, .hero-title { font-weight: 900 !important; }
.lede { font-family: "Times New Roman", Times, serif !important; letter-spacing: -0.01em; font-weight: 400; }
.fine { font-family: "Times New Roman", Times, serif !important; letter-spacing: 0.02em; }

/* Logo bigger + visualized - dynamic - non-overlapping */
.navbar .brand { gap: 14px; transition: gap 0.4s ease; flex-shrink: 0; min-width: 0; }
.navbar .brand img {
  height: 48px !important;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: brightness(1.18) contrast(1.12) drop-shadow(0 2px 8px rgba(201,154,46,0.28)) drop-shadow(0 1px 0 rgba(255,255,255,0.22));
  image-rendering: -webkit-optimize-contrast;
  transition: height 0.45s cubic-bezier(0.16,1,0.3,1), filter 0.4s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1) !important;
}
.navbar.glass-nav.scrolled .brand img { height: 42px !important; transform: translateY(0); }
.navbar.glass-nav.at-top .brand img { height: 52px !important; filter: brightness(1.22) contrast(1.14) drop-shadow(0 4px 12px rgba(201,154,46,0.32)) !important; }
.cover-left .brand img { height: 92px !important; width:auto; max-width:260px; object-fit:contain; filter: brightness(1.22) contrast(1.16) drop-shadow(0 6px 20px rgba(201,154,46,0.36)) drop-shadow(0 1px 0 rgba(255,255,255,0.18)); transition: transform 0.5s ease; display:block; }
.cover-left .brand { transition: transform 0.5s ease; display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:20px !important; padding:14px 18px; background:rgba(255,255,255,0.04); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.08); border-radius:14px; width:fit-content; }
.brand span { font-family: "Times New Roman", Times, serif !important; font-size: 1.15rem; font-weight: 900; letter-spacing: 0.10em; white-space: nowrap; text-shadow: 0 1px 0 rgba(255,255,255,0.14), 0 8px 24px rgba(0,0,0,0.42); transition: font-size 0.45s ease; }
.navbar.glass-nav.scrolled .brand span { font-size: 1.02rem; }

/* Nav bar dynamic clear glass - centered pill, separate layer, not overlapping content */
.navbar.glass-nav {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: fit-content !important;
  max-width: calc(100% - 32px) !important;
  height: auto !important;
  min-height: 56px !important;
  margin: 18px auto 0 auto !important;
  padding: 8px 10px 8px 14px !important;
  background: rgba(4,18,37,0.34) !important;
  backdrop-filter: blur(32px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.8) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.14) !important;
  transition: background 0.4s ease, box-shadow 0.3s ease;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  overflow: visible !important;
  z-index: 100 !important;
}
.page-wrap { padding-top: 0 !important; }
#cover { margin-top: 0 !important; scroll-margin-top: 88px; }
.nav-links { flex-shrink: 1; justify-content: center; gap: 6px !important; flex-wrap: wrap; }
.navbar.glass-nav.scrolled {
  background: rgba(4,18,37,0.42) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.14) !important;
}
.navbar.glass-nav.at-top {
  background: rgba(4,18,37,0.28) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.nav-links a {
  position: relative;
  padding: 6px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  line-height: 1;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-links a:hover, .nav-links a.active {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(12px);
  color: var(--white) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 16px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}
.nav-links a.active {
  background: rgba(201,154,46,0.14) !important;
  border-color: rgba(201,154,46,0.32) !important;
  color: var(--gold-highlight) !important;
}

/* P1-03: glass scoped to chrome controls only - .btn-gold keeps metallic intent, generic buttons un-glassed */
.menu-toggle, .contact-strip a, #langBar button {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--white) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 4px 16px rgba(0,0,0,0.18) !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
button{
  position: relative;
  overflow: hidden;
  color: var(--white);
  transition: all 0.3s ease;
}
.menu-toggle::before, .contact-strip a::before, #langBar button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.menu-toggle:hover, .contact-strip a:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(201,154,46,0.42) !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 24px rgba(0,0,0,0.28), 0 0 0 1px rgba(201,154,46,0.18) !important;
}
button:hover::before, .btn-gold:hover::before { opacity: 1; }
button:active, .btn-gold:active { transform: translateY(0) scale(0.98); }

/* Primary gold button keeps gold but as glass */
.btn-gold {
  background: linear-gradient(180deg, rgba(201,154,46,0.92), rgba(201,154,46,0.78)) !important;
  color: var(--navy-deep) !important;
  border-color: rgba(201,154,46,0.55) !important;
  box-shadow: 0 4px 16px rgba(201,154,46,0.32), inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

/* Menu toggle clear glass */
.menu-toggle {
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Trim executive picture borders - best as possible */
.leader img {
  width: 96px !important;
  height: 96px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  outline: 1px solid rgba(201,154,46,0.18);
  outline-offset: 2px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.14) !important;
  filter: contrast(1.06) saturate(1.08) brightness(1.02) !important;
  image-rendering: -webkit-optimize-contrast;
}
.leader {
  backdrop-filter: blur(0px);
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.leader:hover { transform: translateY(-3px) rotateX(2deg); }

/* Sharpen and eye-friendly contrast for all visuals */
img {
  image-rendering: -webkit-optimize-contrast;
  filter: contrast(1.05) saturate(1.04) brightness(1.01);
}
.hero-media img {
  filter: contrast(1.08) saturate(1.06) brightness(1.03) !important;
}
.hero-media.glass-hero {
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
/* Add subtle inner vignette for eye-friendly */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 50% 40%, transparent 60%, rgba(4,18,37,0.22) 100%);
  pointer-events: none;
  z-index: 1;
}

/* 3D visuals as static data - perspective system */
.section {
  perspective: 1200px;
  transform-style: preserve-3d;
}
.glass-card {
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), box-shadow 0.6s ease !important;
}
@media (prefers-reduced-motion: no-preference) {
  .glass-card:hover {
    transform: translateY(-4px) rotateX(2deg) rotateY(-1deg) translateZ(8px) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.52), 0 1px 0 rgba(255,255,255,0.16) inset !important;
  }
  .hub-card.glass-card:nth-child(1):hover { transform: translateY(-4px) rotateY(-3deg) translateZ(10px) !important; }
  .hub-card.glass-card:nth-child(4):hover { transform: translateY(-4px) rotateY(3deg) translateZ(10px) !important; }
}

/* 3D static data visuals - roadmap bars extruded */
.chart.glass-chart {
  perspective: 800px;
  transform-style: preserve-3d;
}
.bar {
  transform-style: preserve-3d;
  position: relative;
  box-shadow: 0 6px 20px rgba(201,154,46,0.28), inset 0 1px 0 rgba(255,255,255,0.32), 4px 0 0 rgba(201,154,46,0.52) !important;
  transform: translateZ(0);
  transition: transform 0.4s ease !important;
}
.bar::after {
  content: attr(data-value);
  transform: translateZ(12px);
}
.bar:hover { transform: translateZ(12px) scaleY(1.02); }
.bar.b1 { transform: translateZ(4px); }
.bar.b2 { transform: translateZ(8px); }
.bar.b3 { transform: translateZ(14px); box-shadow: 0 8px 28px rgba(201,154,46,0.42), inset 0 1px 0 rgba(255,255,255,0.32), 6px 0 0 rgba(201,154,46,0.62) !important; }

/* 3D hub cards depth */
.hub-grid { perspective: 1000px; }
.hub-card.glass-card { transform: translateZ(0); }

/* Text sharpen overlay grain removal + subtle clarity - no overlap */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.015), transparent 65%);
  pointer-events: none;
  z-index: -1;
}

/* Contrast: eye-friendly - soften harsh blacks, lift shadows */
.section.dark { background: radial-gradient(120% 100% at 50% 0%, rgba(201,154,46,0.04), transparent 60%), var(--navy-command) !important; }
.section.deep { background: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.02), transparent 60%), var(--navy-deep) !important; }
.card.glass-card .fine { color: #CBD5E1 !important; }
.lede { color: #CBD5E1 !important; }

/* Ensure images are eye-friendly warmer */
.hero-media img, .hub-card img { filter: contrast(1.06) saturate(1.03) brightness(1.02) sepia(0.04) !important; }
/* RTL overrides - Track A4 */
[dir="rtl"] .cover-split{ direction:rtl; }
[dir="rtl"] .cover-left{ text-align:right; }
[dir="rtl"] .angular-mask{ clip-path:polygon(0 0,88% 0,100% 100%,0 100%) !important; }
@media(min-width:900px){ [dir="rtl"] .angular-mask{ clip-path:polygon(0 0,86% 0,100% 100%,0 100%) !important; } }
[dir="rtl"] .timeline{ border-left:none !important; border-right:2px solid var(--line-gold) !important; padding-left:0 !important; padding-right:var(--s-3) !important; }
[dir="rtl"] .timeline article::before{ left:auto !important; right:calc(-1*var(--s-3) - 7px) !important; }
[dir="rtl"] .navbar.glass-nav{ direction:rtl; }
[dir="rtl"] .nav-links{ direction:rtl; }
[dir="rtl"] .navy-overlay{ background:linear-gradient(270deg, rgba(4,18,37,0.82) 0%, rgba(4,18,37,0.22) 55%, transparent 100%) !important; }
[dir="rtl"] .eyebrow, [dir="rtl"] .lede, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] p{ text-align:right; }


/* ===== nav-responsive.css ===== */
/* nav-responsive.css — DEPRECATED Track B: nav rules consolidated into css/burger.css
   This file is intentionally minimal. burger.css is the single source for:
   .navbar.glass-nav, .nav-links, .menu-toggle/.burger and all @media(max-width:900px) drawer rules.
   Do NOT re-add display:none/position:absolute nav overrides here; they conflict with burger drawer.
   Kept for legacy import order — will be removed in v1.2.
*/

/* No nav overrides — see burger.css */


/* ===== burger.css ===== */
/* burger.css — SINGLE SOURCE for nav: .navbar.glass-nav, .nav-links, .menu-toggle/burger
   Base (desktop) + mobile <900px drawer. All other files must NOT override these rules.
   Bubble precise: 5px 10px, inline-flex align-center. 320-1536px responsive.
*/

/* ===== Base — centered pill navbar (position:relative, margin 18px auto) ===== */
.navbar.glass-nav{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: fit-content !important;
  max-width: calc(100% - 32px) !important;
  height: auto !important;
  min-height: 56px !important;
  margin: 18px auto 0 auto !important;
  padding: 8px 10px 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  overflow: visible !important;
  z-index: 100 !important;
  background: rgba(4,18,37,0.34) !important;
  backdrop-filter: blur(32px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.8) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

.navbar.glass-nav.scrolled{
  background: rgba(4,18,37,0.42) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
}
.navbar.glass-nav.at-top{
  background: rgba(4,18,37,0.28) !important;
}

/* Brand inside pill */
.navbar .brand{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.navbar .brand img{
  height: 42px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

/* ===== Nav links — desktop row ===== */
.nav-links{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px !important;
  flex-wrap: wrap;
  flex-shrink: 1;
  position: static !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Precise bubble: 5px 10px inline-flex align-center */
.nav-links a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  opacity: 0.78;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
}
.nav-links a:hover,
.nav-links a.active{
  opacity: 1;
}
.nav-links a:hover{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--white) !important;
}
.nav-links a.active{
  background: rgba(201,154,46,0.14) !important;
  border-color: rgba(201,154,46,0.32) !important;
  color: var(--gold-highlight, #E0B44C) !important;
}
.nav-links a:focus-visible{
  outline: 2px solid var(--gold, #C99A2E);
  outline-offset: 2px;
}

/* ===== Burger toggle — hidden on desktop ===== */
.menu-toggle{
  display: none !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}
.menu-toggle:focus-visible{
  outline: 2px solid var(--gold, #C99A2E);
  outline-offset: 2px;
}
.menu-toggle .burger{
  width: 16px;
  height: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}
.menu-toggle .burger span{
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 999px;
  transition: all 0.3s ease;
  width: 100%;
}
.menu-toggle[aria-expanded="true"] .burger span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger span:nth-child(2){ opacity: 0; transform: scaleX(0); }
.menu-toggle[aria-expanded="true"] .burger span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* ===== Mobile/Tablet <1200px — drawer ===== */
@media(max-width:1199px){
  .menu-toggle{
    display: inline-flex !important;
  }
  .navbar.glass-nav{
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    gap: 10px !important;
    max-width: calc(100% - 16px) !important;
  }
  /* Mobile-fix 2026-08-25: brand + menu + language bar + theme toggle cannot fit
     one 374px row — tools drop to a centered second row inside the pill so the
     theme toggle no longer overflows past the viewport edge (409px ghost scroll). */
  .navbar.glass-nav{
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }
  .navbar .nav-tools{
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: center !important;
  }
  /* keep brand + toggle on one row; drawer drops below */
  .nav-links{
    display: none !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(4,18,37,0.96) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 18px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px !important;
    gap: 6px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.42) !important;
    z-index: 101 !important;
    /* P1-02: scroll containment on small viewports */
    max-height: min(72vh, 560px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin;
  }
  .nav-links.open{
    display: flex !important;
  }
  .nav-links a{
    width: 100%;
    text-align: center;
    justify-content: center;
    /* keep precise bubble padding, but expand hit area on mobile */
    padding: 10px 12px !important;
    font-size: 0.78rem !important;
  }
}

/* ===== Narrow <380px — tighten pill ===== */
@media(max-width:380px){
  .navbar.glass-nav{
    max-width: calc(100% - 12px) !important;
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  .menu-toggle{
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
  }
}


/* ===== light-theme.css ===== */
/* Light theme — full coverage (Track C complete)
   Overrides dark navy/gold glass system for data-theme="light"
   Contrast-audit: gold darkened for AA on white; glass switched to light */
:root {
  --light-bg: #F8F7F3;
  --light-surface: #FFFFFF;
  --light-ink: #0F1A2E;
  --light-muted: #5A6B84;
  --light-border: rgba(15,26,46,0.10);
  --light-border-strong: rgba(15,26,46,0.16);
  --light-gold-contrast: #8C6A14; /* 4.62:1 on #FFFFFF — AA pass; replaces #C99A2E on light */
  --light-gold: #9A7A16;
}

/* Core token remap */
html[data-theme="light"]{
  --navy-deep: #F8F7F3;
  --navy-command: #FFFFFF;
  --navy-panel: #FFFFFF;
  --navy-overlay: rgba(248,247,243,0.72);
  --white: #0F1A2E;
  --silver: #3E4F6A;
  --silver-dim: #6B7A90;
  --border-gold: rgba(15,26,46,0.10);
  --line-gold: rgba(15,26,46,0.10);
  --gold-muted: rgba(140,106,20,0.18);
  /* glass variables — light */
  --glass-bg: rgba(255,255,255,0.72);
  --glass-bg-strong: rgba(255,255,255,0.86);
  --glass-bg-nav: rgba(255,255,255,0.72);
  --glass-border: rgba(15,26,46,0.08);
  --glass-border-gold: rgba(15,26,46,0.10);
  --glass-highlight: rgba(255,255,255,0.92);
  --glass-inner: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(15,26,46,0.06);
  --glass-shadow: 0 8px 32px rgba(15,26,46,0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
  --glass-shadow-lg: 0 16px 48px rgba(15,26,46,0.12), 0 1px 0 rgba(255,255,255,0.92) inset;
  --glass-blur: blur(22px) saturate(1.25);
  --glass-blur-strong: blur(28px) saturate(1.35);
  --glass-nav-clear: rgba(255,255,255,0.64);
  --glass-clear: rgba(255,255,255,0.72);
  --glass-clear-strong: rgba(255,255,255,0.86);
}

/* Page base */
html[data-theme="light"] body{
  background: var(--light-bg) !important;
  color: var(--light-ink) !important;
}
html[data-theme="light"] .page-wrap{ background: var(--light-bg); }

/* Gold contrast fix — AA on white */
html[data-theme="light"] .gold{ color: var(--light-gold-contrast) !important; }
html[data-theme="light"] .gold-h{ color: var(--light-gold) !important; }
html[data-theme="light"] .eyebrow{ color: var(--light-gold-contrast) !important; }
html[data-theme="light"] .pillar{ color: var(--light-gold-contrast) !important; border-color: rgba(140,106,20,0.22) !important; background: rgba(140,106,20,0.08) !important; }
html[data-theme="light"] .year{ color: var(--light-gold-contrast) !important; }
html[data-theme="light"] .rule{ background: var(--light-gold-contrast) !important; }

/* Sections */
html[data-theme="light"] .section.dark,
html[data-theme="light"] .section.deep{
  background: var(--light-surface) !important;
  border-bottom: 1px solid var(--light-border);
}
html[data-theme="light"] .section.dark{
  background: radial-gradient(120% 100% at 50% 0%, rgba(140,106,20,0.04), transparent 60%), #FFFFFF !important;
}
html[data-theme="light"] .section.deep{
  background: radial-gradient(120% 100% at 50% 0%, rgba(15,26,46,0.02), transparent 60%), #F8F7F3 !important;
}

/* Cards — glass on light */
html[data-theme="light"] .card.glass-card{
  background: rgba(255,255,255,0.86) !important;
  border-color: rgba(15,26,46,0.08) !important;
  box-shadow: 0 8px 32px rgba(15,26,46,0.08), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
html[data-theme="light"] .card.glass-card.ghost{
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
  border: 1px solid var(--light-border) !important;
}
html[data-theme="light"] .card.glass-card .fine{ color: var(--light-muted) !important; text-shadow: none !important; }
html[data-theme="light"] .card.glass-card p{ text-shadow: none !important; }
html[data-theme="light"] .lede{ color: #334155 !important; }
html[data-theme="light"] .fine{ color: #64748B !important; }
html[data-theme="light"] .quote{ color: var(--light-ink) !important; }
html[data-theme="light"] .quote::before{ color: var(--light-gold-contrast) !important; }
html[data-theme="light"] .disclaimer{
  background: rgba(15,26,46,0.04) !important;
  border-left-color: var(--light-gold-contrast) !important;
  color: var(--light-muted) !important;
}

/* Navbar — pill glass on light */
html[data-theme="light"] .navbar.glass-nav{
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(15,26,46,0.08) !important;
  box-shadow: 0 8px 32px rgba(15,26,46,0.10), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
}
html[data-theme="light"] .navbar.glass-nav::after{
  background: linear-gradient(90deg, transparent, rgba(140,106,20,0.22) 30%, rgba(140,106,20,0.22) 70%, transparent) !important;
}
html[data-theme="light"] .navbar.glass-nav.scrolled{
  background: rgba(255,255,255,0.84) !important;
}
html[data-theme="light"] .navbar.glass-nav.at-top{
  background: rgba(255,255,255,0.62) !important;
}
html[data-theme="light"] .nav-links a{
  color: var(--light-ink) !important;
  border-color: transparent !important;
}
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active{
  background: rgba(15,26,46,0.06) !important;
  border-color: rgba(15,26,46,0.10) !important;
  color: var(--light-ink) !important;
}
html[data-theme="light"] .nav-links a.active{
  background: rgba(140,106,20,0.10) !important;
  border-color: rgba(140,106,20,0.20) !important;
  color: var(--light-gold-contrast) !important;
}
html[data-theme="light"] .brand span{ color: var(--light-ink) !important; text-shadow: none !important; }
html[data-theme="light"] .navbar .brand img{
  filter: brightness(0.98) contrast(1.06) drop-shadow(0 1px 6px rgba(15,26,46,0.08)) !important;
}

/* Hero */
html[data-theme="light"] .hero-media.glass-hero{
  background: rgba(255,255,255,0.64) !important;
  border-color: rgba(15,26,46,0.06) !important;
  box-shadow: 0 12px 40px rgba(15,26,46,0.10), inset 0 1px 0 rgba(255,255,255,0.92) !important;
}
html[data-theme="light"] .hero-media::after{
  background: radial-gradient(80% 60% at 50% 40%, transparent 60%, rgba(248,247,243,0.22) 100%) !important;
}
html[data-theme="light"] .navy-overlay{
  background: linear-gradient(90deg, rgba(248,247,243,0.72) 0%, rgba(248,247,243,0.22) 55%, transparent 100%) !important;
}
html[data-theme="light"] .cover-left{ background: var(--light-bg) !important; }
html[data-theme="light"] .cover-left .brand{
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(15,26,46,0.08) !important;
  backdrop-filter: blur(12px) !important;
}

/* Buttons — light glass */
html[data-theme="light"] button,
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .contact-strip a,
html[data-theme="light"] .menu-toggle{
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(15,26,46,0.10) !important;
  color: var(--light-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 16px rgba(15,26,46,0.08) !important;
}
html[data-theme="light"] button:hover,
html[data-theme="light"] .btn-ghost:hover,
html[data-theme="light"] .contact-strip a:hover{
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(140,106,20,0.22) !important;
}
html[data-theme="light"] .btn-gold{
  background: linear-gradient(180deg, #C99A2E, #B4871F) !important;
  color: #FFFFFF !important;
  border-color: rgba(140,106,20,0.32) !important;
  box-shadow: 0 4px 16px rgba(140,106,20,0.24), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}
html[data-theme="light"] #langBar{
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(15,26,46,0.08) !important;
}
html[data-theme="light"] #langBar button[aria-pressed="true"]{
  background: rgba(140,106,20,0.14) !important;
  border-color: rgba(140,106,20,0.22) !important;
  color: var(--light-gold-contrast) !important;
}
html[data-theme="light"] #themeToggle{
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(15,26,46,0.08) !important;
  color: var(--light-ink) !important;
}

/* Roadmap / chart */
html[data-theme="light"] #roadmap3d{
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(15,26,46,0.08) !important;
  box-shadow: 0 8px 32px rgba(15,26,46,0.08) !important;
}
html[data-theme="light"] .chart.glass-chart{
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(15,26,46,0.08) !important;
}
html[data-theme="light"] .bar{
  box-shadow: 0 4px 16px rgba(140,106,20,0.18), inset 0 1px 0 rgba(255,255,255,0.62) !important;
}

/* Timeline */
html[data-theme="light"] .timeline{ border-left-color: rgba(15,26,46,0.10) !important; }
html[data-theme="light"] .timeline article::before{
  background: var(--light-gold-contrast) !important;
  box-shadow: 0 0 0 4px rgba(140,106,20,0.14) !important;
}

/* Hub / leadership / footer */
html[data-theme="light"] .hub-card.glass-card img{ filter: saturate(1.02) contrast(1.02) !important; }
html[data-theme="light"] .leader img{
  border-color: rgba(15,26,46,0.08) !important;
  outline-color: rgba(140,106,20,0.14) !important;
}
html[data-theme="light"] .footer.glass-footer{
  background: rgba(255,255,255,0.84) !important;
  border-top: 1px solid var(--light-border) !important;
  color: var(--light-muted) !important;
  backdrop-filter: blur(18px) !important;
}
html[data-theme="light"] .footer a{ color: var(--light-muted) !important; }
html[data-theme="light"] .footer a:hover{ color: var(--light-gold-contrast) !important; }

/* Image treatment on light — remove dark warming */
html[data-theme="light"] img{ filter: contrast(1.02) saturate(1.02) brightness(1.01) !important; }
html[data-theme="light"] .hero-media img,
html[data-theme="light"] .hub-card img{
  filter: contrast(1.03) saturate(1.02) brightness(1.02) !important;
}

/* Stats */
html[data-theme="light"] .stat.glass-stat{
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(15,26,46,0.08) !important;
}
html[data-theme="light"] .stat b{ color: var(--light-ink) !important; }
html[data-theme="light"] .stat span{ color: var(--light-gold-contrast) !important; }

/* Cover split imagery overlay lighten */
html[data-theme="light"] #divisions > div:first-of-type + div{ background: rgba(248,247,243,0.62) !important; }

/* ===== David review fixes (2026-08-25) ===== */
/* P1-02: light-theme focus ring passes 3:1 UI contrast (#8C6A14 on #FFFFFF = 5.02:1, computed 5.016:1) */
html[data-theme="light"] .nav-links a:focus-visible,
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] .menu-toggle:focus-visible,
html[data-theme="light"] #langBar button:focus-visible{
  outline: 2px solid var(--light-gold-contrast, #8C6A14) !important;
  outline-offset: 2px;
}

/* P2-01: browser UI syncs with theme */
html{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }

/* Skip-link (P1-02 / WCAG 2.4.1) - visually hidden until focused */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold, #C99A2E);
  color: #041225;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 0 0 12px 0;
}
html[dir="rtl"] .skip-link{ left: auto; right: -9999px; border-radius: 0 0 0 12px; }
html[dir="rtl"] .skip-link:focus{ left: auto; right: 0; }
html[data-theme="light"] .skip-link{ background: var(--light-gold-contrast, #8C6A14); color: #FFFFFF; }
.skip-link:focus{ left: 0; }

/* P2-02: forced-colors (Windows High Contrast) supplement */
@media (forced-colors: active){
  .rule, .navbar, .card.glass-card, .glass-hero{ border: 1px solid CanvasText; }
  .skip-link:focus{ forced-color-adjust: none; }
  .nav-links a.active{ forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* Cover brand box: dynamic sizing + wrap safety (any language, any width) */
.cover-left .brand{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 100%;
}
.cover-left .brand span{
  white-space: normal !important;
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  letter-spacing: 0.14em;
}
/* Hero title stays fluid inside its column - never forces column wider */
.hero-title{
  max-width: 100%;
  overflow-wrap: break-word;
  font-size: clamp(2.2rem, 4.8vw, var(--h1, 4.5rem));
}
@media (max-width:620px){
  .hero-title{
    font-size:clamp(2.35rem,11vw,3.15rem);
    line-height:0.98
  }
}
/* Cover columns: keep hero from squeezing below readable width */
@media (max-width:1100px){
  .cover-split{ grid-template-columns: minmax(0, 48%) minmax(0, 52%); }
}


/* ===== v2 static architecture hardening ===== */
html { scroll-behavior:smooth; }
html[lang="ar"] body { direction:rtl; }
html[lang="ar"] .hero-title,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 { letter-spacing:0; line-height:1.18; }
html[lang="zh"] .hero-title,
html[lang="zh"] h1,
html[lang="zh"] h2 { letter-spacing:.02em; line-height:1.14; }
.lang-link { display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:.72rem;letter-spacing:.06em;text-decoration:none;color:inherit;border:1px solid transparent;white-space:nowrap; }
.lang-link[aria-current="page"] { background:rgba(201,154,46,.22);border-color:rgba(201,154,46,.32);color:var(--gold); }
#langBar { display:flex;gap:4px;background:rgba(255,255,255,.06);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:3px; }
.roadmap-static { min-height:420px; }
.roadmap-static img { width:100%;height:100%;object-fit:cover; }
[data-theme="light"] #langBar { background:rgba(4,18,37,.04);border-color:rgba(4,18,37,.10); }
@media(max-width:1199px){ .nav-tools{gap:6px!important} #langBar{max-width:min(100%,290px);overflow-x:auto;scrollbar-width:none} #langBar::-webkit-scrollbar{display:none} }
@media(max-width:620px){ .cover-hubs{display:flex;flex-wrap:wrap;gap:8px 12px!important}.cover-hubs .sep{display:none}.hero-title{word-break:normal;overflow-wrap:normal} }
@media (min-width:901px) and (max-width:1500px){
  html[lang="en"] .cover-split{ grid-template-columns:48% 52% }
  html[lang="en"] .hero-title{ font-size:clamp(2.7rem, 1.2rem + 1.8vw, 3.6rem) }
}