/* ==========================================================================
   CENTRAL LINKS INTERNATIONAL — Design System
   Architecting Global Success Through Strategic Partnerships
   Palette + type system aligned with the CNOC house style.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand — gold (primary) */
  --gold:        #f0b429;
  --gold-bright: #ffd662;
  --gold-dark:   #b97e0d;
  --gold-deep:   #6d4c17;

  /* Brand — cyber (technology / data) */
  --cyber:        #22d3ee;
  --cyber-bright: #7df1ff;
  --cyber-dark:   #0891b2;
  --cyber-deep:   #075985;

  /* Brand — jade (Asia corridor / sustainability) */
  --jade:        #10e0a0;
  --jade-bright: #6ffcd0;
  --jade-dark:   #059669;

  /* Accents — used sparingly to code sectors and states */
  --violet:        #a855f7;
  --violet-bright: #d8b4fe;
  --violet-dark:   #7c3aed;
  --coral:         #fb7185;
  --coral-bright:  #fda4af;
  --coral-dark:    #e11d48;
  --amber:         #fb923c;
  --amber-bright:  #fdba74;
  --amber-dark:    #ea580c;

  /* Surfaces */
  --dark-bg:   #04060e;
  --darker-bg: #020409;
  --deep-bg:   #060a16;
  --cyber-bg:  #020b18;
  --light-bg:  #f5f4f0;
  --paper:     #ffffff;

  /* Ink */
  --ink:        #0b0f1a;
  --ink-soft:   #3c4658;
  --ink-mute:   #6b7484;
  --on-dark:            rgba(255, 255, 255, .92);
  --on-dark-soft:       rgba(255, 255, 255, .64);
  --on-dark-mute:       rgba(255, 255, 255, .42);
  --on-dark-faint:      rgba(255, 255, 255, .18);

  /* Lines */
  --hair-dark:  rgba(255, 255, 255, .09);
  --hair-light: rgba(0, 0, 0, .08);

  /* Rhythm */
  --shell:  1280px;
  --shell-wide: 1480px;
  --gut:    clamp(1.25rem, 4vw, 2.75rem);
  --sect:   clamp(4.5rem, 9vw, 8.5rem);

  /* Motion */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* Radius — the house style is near-square, deliberate */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Page-level themed aliases (overridden by [data-theme]) */
  --page-bg:     var(--dark-bg);
  --page-ink:    var(--on-dark);
  --page-soft:   var(--on-dark-soft);
  --page-mute:   var(--on-dark-mute);
  --page-hair:   var(--hair-dark);
  --page-panel:  rgba(255, 255, 255, .028);
  --page-panel-2:rgba(255, 255, 255, .05);

  color-scheme: dark;
}

/* Light theme (user toggle) — inverts page-level aliases only.
   Sections that are explicitly `.band--dark` stay dark on purpose. */
:root[data-theme="light"] {
  --page-bg:     var(--light-bg);
  --page-ink:    var(--ink);
  --page-soft:   var(--ink-soft);
  --page-mute:   var(--ink-mute);
  --page-hair:   var(--hair-light);
  --page-panel:  rgba(0, 0, 0, .022);
  --page-panel-2:rgba(0, 0, 0, .04);
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  background: var(--page-bg);
  color: var(--page-ink);
  font-family: Outfit, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.68;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

::selection { background: rgba(212, 168, 83, .3); color: #fff; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #05070f; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-dark), #2a3345);
  border-radius: 99px;
  border: 2px solid #05070f;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold), var(--gold-dark)); }
.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.display {
  font-family: Archivo, Outfit, sans-serif;
  font-stretch: 118%;
  letter-spacing: -.024em;
  line-height: .98;
  font-weight: 600;
}
.display-tight { line-height: .92; }

h1, h2, h3, h4, h5 {
  font-family: Archivo, Outfit, sans-serif;
  font-stretch: 112%;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.06;
}

.t-hero    { font-size: clamp(2.6rem, 7.2vw, 6.4rem); }
.t-mega    { font-size: clamp(3rem, 9vw, 8rem); }
.t-h1      { font-size: clamp(2.15rem, 5.2vw, 4.1rem); }
.t-h2      { font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
.t-h3      { font-size: clamp(1.22rem, 2vw, 1.55rem); }
.t-h4      { font-size: clamp(1.02rem, 1.4vw, 1.16rem); }
.t-lead    { font-size: clamp(1.02rem, 1.55vw, 1.28rem); line-height: 1.62; font-weight: 300; }
.t-body    { font-size: .975rem; line-height: 1.72; }
.t-sm      { font-size: .875rem; line-height: 1.66; }
.t-xs      { font-size: .78rem;  line-height: 1.6; }
.t-2xs     { font-size: .7rem;   line-height: 1.55; }

.w-thin   { font-weight: 200; }
.w-light  { font-weight: 300; }
.w-book   { font-weight: 400; }
.w-med    { font-weight: 500; }
.w-semi   { font-weight: 600; }
.w-bold   { font-weight: 700; }

.soft { color: var(--page-soft); }
.mute { color: var(--page-mute); }
.tabular { font-variant-numeric: tabular-nums; }
.upper { text-transform: uppercase; letter-spacing: .18em; }
.balance { text-wrap: balance; }
.pretty  { text-wrap: pretty; }

/* Section eyebrow labels */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow--cyber { color: var(--cyber); }
.eyebrow--cyber::before { background: linear-gradient(90deg, transparent, var(--cyber)); }
.eyebrow--jade { color: var(--jade); }
.eyebrow--jade::before { background: linear-gradient(90deg, transparent, var(--jade)); }
.eyebrow--bare::before { display: none; }

/* Gradient text */
.gold-text {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-bright) 45%, var(--gold) 70%, var(--gold-dark) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gold-text-anim {
  background: linear-gradient(270deg, var(--gold-dark), var(--gold-bright), var(--gold), var(--gold-dark));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: goldShimmer 4s infinite;
}
.cyber-text {
  background: linear-gradient(135deg, var(--cyber-dark) 0%, var(--cyber-bright) 50%, var(--cyber) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.jade-text {
  background: linear-gradient(135deg, var(--jade-dark), var(--jade-bright), var(--jade));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stat-number {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-bright), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  line-height: 1;
  font-family: Archivo, Outfit, sans-serif;
  font-stretch: 118%;
  font-weight: 600;
  letter-spacing: -.03em;
}
.cyber-stat {
  background: linear-gradient(135deg, var(--cyber-dark), var(--cyber-bright));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  line-height: 1;
  font-family: Archivo, Outfit, sans-serif;
  font-stretch: 118%;
  font-weight: 600;
  letter-spacing: -.03em;
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.shell-wide { max-width: var(--shell-wide); }
.shell-narrow { max-width: 940px; }

.band { position: relative; padding-block: var(--sect); }
.band--tight { padding-block: clamp(3rem, 5.5vw, 5rem); }
.band--flush { padding-block: 0; }

/* Bands re-declare the page-level aliases locally, so every component that
   reads --page-* (stat labels, ghost buttons, field labels, chips, tabs,
   captions…) inherits the correct ink for the surface it is sitting on —
   regardless of the light/dark theme toggle. */
.band--dark, .band--darker, .band--deep, .band--cyber {
  color: var(--on-dark);
  --page-ink:    var(--on-dark);
  --page-soft:   var(--on-dark-soft);
  --page-mute:   var(--on-dark-mute);
  --page-hair:   var(--hair-dark);
  --page-panel:  rgba(255, 255, 255, .028);
  --page-panel-2:rgba(255, 255, 255, .05);
}
.band--light, .band--paper {
  color: var(--ink);
  --page-ink:    var(--ink);
  --page-soft:   var(--ink-soft);
  --page-mute:   var(--ink-mute);
  --page-hair:   var(--hair-light);
  --page-panel:  rgba(0, 0, 0, .022);
  --page-panel-2:rgba(0, 0, 0, .04);
}

.band--dark   { background: var(--dark-bg);   --page-bg: var(--dark-bg); }
.band--darker { background: var(--darker-bg); --page-bg: var(--darker-bg); }
.band--deep   { background: var(--deep-bg);   --page-bg: var(--deep-bg); }
.band--cyber  { background: var(--cyber-bg);  --page-bg: var(--cyber-bg); }
.band--light  { background: var(--light-bg);  --page-bg: var(--light-bg); }
.band--paper  { background: var(--paper);     --page-bg: var(--paper); }

.band--dark .soft, .band--darker .soft, .band--deep .soft, .band--cyber .soft { color: var(--on-dark-soft); }
.band--dark .mute, .band--darker .mute, .band--deep .mute, .band--cyber .mute { color: var(--on-dark-mute); }
.band--light .soft, .band--paper .soft { color: var(--ink-soft); }
.band--light .mute, .band--paper .mute { color: var(--ink-mute); }

/* Grids */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g-split  { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.g-7-5    { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.g-5-7    { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.g-4-8    { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.g-8-4    { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }

.flex { display: flex; }
.wrap { flex-wrap: wrap; }
.col  { flex-direction: column; }
.ai-c { align-items: center; }
.ai-s { align-items: flex-start; }
.ai-e { align-items: flex-end; }
.jc-c { justify-content: center; }
.jc-b { justify-content: space-between; }
.jc-e { justify-content: flex-end; }
.gap-1 { gap: .4rem; } .gap-2 { gap: .7rem; } .gap-3 { gap: 1rem; }
.gap-4 { gap: 1.4rem; } .gap-5 { gap: 2rem; } .gap-6 { gap: 3rem; }
.grow { flex: 1 1 auto; }
.center { text-align: center; }
.ta-r { text-align: right; }
.rel { position: relative; }
.z1 { position: relative; z-index: 1; }
.z2 { position: relative; z-index: 2; }
.mxa { margin-inline: auto; }
.mta { margin-top: auto; }
.hide { display: none !important; }

/* Vertical spacing helpers */
.mt-1{margin-top:.4rem}.mt-2{margin-top:.75rem}.mt-3{margin-top:1.15rem}
.mt-4{margin-top:1.6rem}.mt-5{margin-top:2.2rem}.mt-6{margin-top:3rem}
.mt-7{margin-top:4rem}.mt-8{margin-top:5.5rem}
.mb-1{margin-bottom:.4rem}.mb-2{margin-bottom:.75rem}.mb-3{margin-bottom:1.15rem}
.mb-4{margin-bottom:1.6rem}.mb-5{margin-bottom:2.2rem}.mb-6{margin-bottom:3rem}
.mb-7{margin-bottom:4rem}

/* --------------------------------------------------------------------------
   5. TEXTURES & BACKDROPS
   -------------------------------------------------------------------------- */
.dot-grid {
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 30px 30px;
}
.cyber-grid {
  background-image:
    linear-gradient(rgba(56,189,248,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.gold-grid {
  background-image:
    linear-gradient(rgba(212,168,83,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,83,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.gold-grid-light {
  background-image:
    linear-gradient(rgba(168,120,40,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,120,40,.055) 1px, transparent 1px);
  background-size: 44px 44px;
}
.tex { position: absolute; inset: 0; pointer-events: none; }

/* Glow blobs are positioned past their section's edge (e.g. right:-10%). A band
   hosting one MUST clip, or the blob widens the document and the whole page gets
   a horizontal scrollbar. `.band--clip` is the explicit opt-in; the :has() rule
   below is a safety net so a future glow can't reintroduce the bug. */
.band--clip { overflow: hidden; }
.band:has(> .glow-gold), .band:has(> .glow-cyber), .band:has(> .glow-jade) { overflow: hidden; }

.glow-gold {
  position: absolute; pointer-events: none;
  background: radial-gradient(circle, rgba(212,168,83,.16), transparent 68%);
  filter: blur(20px);
}
.glow-cyber {
  position: absolute; pointer-events: none;
  background: radial-gradient(circle, rgba(56,189,248,.16), transparent 68%);
  filter: blur(20px);
}
.glow-jade {
  position: absolute; pointer-events: none;
  background: radial-gradient(circle, rgba(52,211,153,.14), transparent 68%);
  filter: blur(20px);
}

.gold-divider        { height: 1px; background: linear-gradient(90deg, transparent, rgba(212,168,83,.35), transparent); }
.gold-divider-strong { height: 1px; background: linear-gradient(90deg, transparent, rgba(212,168,83,.8) 30%, var(--gold-bright), rgba(212,168,83,.8) 70%, transparent); }
.cyber-divider       { height: 1px; background: linear-gradient(90deg, transparent, rgba(56,189,248,.4), transparent); }
.hair               { height: 1px; background: var(--page-hair); }
.hair-v             { width: 1px; background: var(--page-hair); }

/* Scan line for cyber panels */
.scan-line { position: relative; overflow: hidden; }
.scan-line::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,.45), transparent);
  animation: scanLine 5s linear infinite;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  padding: clamp(1.35rem, 2.2vw, 2rem);
  border-radius: var(--r-md);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}

.light-card { background: var(--paper); border: 1px solid rgba(0,0,0,.07); }
.light-card:hover {
  border-color: rgba(212,168,83,.4);
  transform: translateY(-2px);
  box-shadow: 0 16px 56px rgba(212,168,83,.12), 0 2px 8px rgba(0,0,0,.05);
}

.gold-card { background: var(--paper); border: 1px solid rgba(0,0,0,.07); border-top: 3px solid var(--gold); }
.gold-card:hover { transform: translateY(-4px); box-shadow: 0 20px 64px rgba(212,168,83,.15), 0 0 0 1px rgba(212,168,83,.2); }

.cyber-card { background: var(--paper); border: 1px solid rgba(0,0,0,.07); border-top: 3px solid var(--cyber); }
.cyber-card:hover { transform: translateY(-4px); box-shadow: 0 20px 64px rgba(56,189,248,.12), 0 0 0 1px rgba(56,189,248,.15); }

.jade-card { background: var(--paper); border: 1px solid rgba(0,0,0,.07); border-top: 3px solid var(--jade); }
.jade-card:hover { transform: translateY(-4px); box-shadow: 0 20px 64px rgba(52,211,153,.12), 0 0 0 1px rgba(52,211,153,.15); }

.glass-card {
  background: rgba(255,255,255,.038);
  border: 1px solid rgba(255,255,255,.085);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.glass-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(212,168,83,.28);
  box-shadow: 0 16px 48px rgba(212,168,83,.1);
}

.cyber-glass {
  background: rgba(56,189,248,.04);
  border: 1px solid rgba(56,189,248,.13);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.cyber-glass:hover {
  background: rgba(56,189,248,.085);
  border-color: rgba(56,189,248,.32);
  box-shadow: 0 16px 48px rgba(56,189,248,.12);
}

/* Pillar card — animated top rule on hover */
.pillar {
  position: relative; overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pillar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.pillar:hover::before { transform: scaleX(1); }
.pillar:hover { transform: translateY(-5px); box-shadow: 0 24px 72px rgba(212,168,83,.14); }
.pillar--cyber::before { background: linear-gradient(90deg, var(--cyber-dark), var(--cyber-bright)); }
.pillar--cyber:hover { box-shadow: 0 24px 72px rgba(56,189,248,.12); }
.pillar--jade::before { background: linear-gradient(90deg, var(--jade-dark), var(--jade-bright)); }
.pillar--jade:hover { box-shadow: 0 24px 72px rgba(52,211,153,.12); }

/* Dark pillar variant for dark bands */
.pillar--dark {
  background: rgba(255,255,255,.026);
  border-color: rgba(255,255,255,.075);
}
.pillar--dark:hover { background: rgba(255,255,255,.045); }

/* Mouse-tracked spotlight */
.spotlight {
  --spot-x: 50%; --spot-y: 50%; --spot-rgb: 212,168,83;
  position: relative; overflow: hidden;
}
.spotlight::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(340px circle at var(--spot-x) var(--spot-y), rgba(var(--spot-rgb), .14), transparent 65%);
  transition: opacity .4s var(--ease); pointer-events: none;
}
.spotlight:hover::after { opacity: 1; }
.spotlight--cyber { --spot-rgb: 56,189,248; }
.spotlight--jade  { --spot-rgb: 52,211,153; }

/* 3D tilt */
.tilt { transform-style: preserve-3d; transition: transform .35s var(--ease); will-change: transform; }
.tilt > * { transform: translateZ(24px); }

/* --------------------------------------------------------------------------
   7. PHOTO / DIAGRAM FRAMES
   -------------------------------------------------------------------------- */
.photo {
  position: relative; overflow: hidden; isolation: isolate;
  background: #04060e; border-radius: var(--r-md);
}
.photo > img, .photo > svg, .photo > .photo-media {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) brightness(.94);
  transition: transform .9s var(--ease-soft), filter .6s var(--ease);
}
.photo:hover > img, .photo:hover > svg, .photo:hover > .photo-media {
  transform: scale(1.055);
  filter: saturate(1.06) brightness(1);
}
.photo-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,6,14,.05) 28%, rgba(4,6,14,.8) 80%, rgba(4,6,14,.95));
  transition: opacity .5s var(--ease);
}
.photo-scrim--soft { background: linear-gradient(180deg, rgba(4,6,14,0) 40%, rgba(4,6,14,.6) 85%, rgba(4,6,14,.88)); }
.photo-scrim--side { background: linear-gradient(90deg, rgba(4,6,14,.88), rgba(4,6,14,.35) 55%, rgba(4,6,14,.05)); }
.photo-label {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(1rem, 2vw, 1.65rem);
  color: #fff;
}
.photo-tag {
  position: absolute; top: 0; left: 0; z-index: 2;
  margin: .85rem;
  padding: .3rem .7rem;
  font-size: .64rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  background: rgba(4,6,14,.66);
  border: 1px solid rgba(212,168,83,.4);
  color: var(--gold-bright);
  backdrop-filter: blur(8px);
  border-radius: var(--r-xs);
}
.photo-tag--cyber { border-color: rgba(56,189,248,.4); color: var(--cyber-bright); }
.photo-tag--jade  { border-color: rgba(52,211,153,.4); color: var(--jade-bright); }

.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-3-2  { aspect-ratio: 3 / 2; }
.ratio-1-1  { aspect-ratio: 1 / 1; }
.ratio-3-4  { aspect-ratio: 3 / 4; }
.ratio-21-9 { aspect-ratio: 21 / 9; }

/* Hero photo — Ken Burns */
.hero-photo { position: absolute; inset: 0; overflow: hidden; }
.hero-photo img, .hero-photo svg {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenBurns 26s ease-in-out infinite alternate;
}
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,6,14,.96), rgba(4,6,14,.82) 38%, rgba(4,6,14,.45) 70%, rgba(4,6,14,.65)),
    linear-gradient(180deg, rgba(4,6,14,.5), transparent 30%, transparent 58%, rgba(4,6,14,.98));
}

/* Interactive diagram shell */
.diagram {
  position: relative;
  border: 1px solid var(--page-hair);
  border-radius: var(--r-md);
  background: var(--page-panel);
  overflow: hidden;
}
.diagram svg { width: 100%; height: auto; display: block; }
.diagram-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--page-hair);
  background: rgba(255,255,255,.02);
}
.band--light .diagram-bar, .band--paper .diagram-bar { background: rgba(0,0,0,.02); }
.diagram-caption {
  padding: .8rem 1.1rem;
  border-top: 1px solid var(--page-hair);
  font-size: .78rem; color: var(--page-mute);
}

/* Hotspot markers on photo diagrams */
.hotspot {
  position: absolute; z-index: 3;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.hotspot i {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 4px rgba(212,168,83,.22), 0 0 18px rgba(240,200,100,.75);
  transition: transform .3s var(--ease);
}
.hotspot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(212,168,83,.55);
  animation: ping 2.6s var(--ease-in-out) infinite;
}
.hotspot:hover i, .hotspot[aria-expanded="true"] i { transform: scale(1.5); }
.hotspot--cyber i { background: var(--cyber-bright); box-shadow: 0 0 0 4px rgba(56,189,248,.22), 0 0 18px rgba(125,211,252,.75); }
.hotspot--cyber::before { border-color: rgba(56,189,248,.55); }
.hotspot-pop {
  position: absolute; z-index: 4;
  left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(6px);
  width: max-content; max-width: 250px;
  padding: .7rem .85rem;
  background: rgba(6,9,20,.94);
  border: 1px solid rgba(212,168,83,.32);
  border-radius: var(--r-sm);
  backdrop-filter: blur(10px);
  font-size: .78rem; line-height: 1.5;
  color: rgba(255,255,255,.9);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  text-align: left;
}
.hotspot:hover .hotspot-pop, .hotspot:focus-visible .hotspot-pop, .hotspot[aria-expanded="true"] .hotspot-pop {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.hotspot-pop b { display: block; color: var(--gold-bright); font-weight: 500; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .25rem; }

/* --------------------------------------------------------------------------
   8. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: 1rem 2.3rem;
  font-family: Outfit, sans-serif;
  font-size: .84rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: var(--r-xs);
  position: relative; overflow: hidden;
  transition: all .4s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--sm { padding: .68rem 1.4rem; font-size: .74rem; }
.btn--lg { padding: 1.15rem 2.9rem; font-size: .9rem; }
.btn--block { width: 100%; justify-content: center; }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-bright));
  background-size: 200% 100%;
  color: #04060e; font-weight: 600;
}
.btn-gold:hover { background-position: 100%; transform: translateY(-1px); box-shadow: 0 8px 32px rgba(212,168,83,.4); }

.btn-cyber {
  background: linear-gradient(135deg, var(--cyber-dark), var(--cyber));
  color: #fff;
}
.btn-cyber:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(56,189,248,.4); }

.btn-outline-gold { color: var(--gold); border: 1px solid rgba(212,168,83,.5); font-weight: 400; }
.btn-outline-gold:hover { background: var(--gold); border-color: var(--gold); color: #04060e; }

.btn-outline-white { color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.15); font-weight: 400; }
.btn-outline-white:hover { color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.35); }

.btn-outline-ink { color: var(--ink); border: 1px solid rgba(0,0,0,.18); font-weight: 400; }
.btn-outline-ink:hover { border-color: var(--gold); color: var(--gold-dark); }

.btn-ghost { color: var(--page-soft); padding-inline: .2rem; }
.btn-ghost:hover { color: var(--gold); }

/* Chips / toggles */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .58rem 1.05rem;
  font-size: .8rem; font-weight: 400;
  border: 1px solid var(--page-hair);
  border-radius: 99px;
  background: var(--page-panel);
  color: var(--page-soft);
  cursor: pointer;
  transition: all .3s var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: rgba(212,168,83,.45); color: var(--gold); }
.chip[aria-pressed="true"], .chip.is-on {
  background: rgba(212,168,83,.14);
  border-color: var(--gold);
  color: var(--gold-bright);
  font-weight: 500;
}
.band--light .chip[aria-pressed="true"], .band--paper .chip[aria-pressed="true"],
.band--light .chip.is-on, .band--paper .chip.is-on { color: var(--gold-dark); }

.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .75rem;
  font-size: .66rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid rgba(212,168,83,.35);
  border-radius: 99px;
  color: var(--gold);
  background: rgba(212,168,83,.07);
}
.pill--cyber { border-color: rgba(56,189,248,.35); color: var(--cyber); background: rgba(56,189,248,.07); }
.pill--jade  { border-color: rgba(52,211,153,.35); color: var(--jade); background: rgba(52,211,153,.07); }
.pill--live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--jade); box-shadow: 0 0 8px var(--jade);
  animation: blip 1.8s var(--ease-in-out) infinite;
}

/* --------------------------------------------------------------------------
   9. NAVIGATION
   -------------------------------------------------------------------------- */
.progress-rail {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 90;
  background: transparent; pointer-events: none;
}
.progress-rail i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright), var(--cyber));
  box-shadow: 0 0 12px rgba(212,168,83,.6);
  transition: width .12s linear;
}

.nav {
  position: sticky; top: 0; z-index: 80;
  background: rgba(4,6,14,.72);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  color: var(--on-dark);
}
.nav.is-scrolled {
  background: rgba(2,4,9,.92);
  border-bottom-color: rgba(212,168,83,.18);
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 74px;
}

.brand { display: flex; align-items: center; gap: .8rem; flex: none; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-txt { line-height: 1.05; }
.brand-name {
  font-family: Archivo, Outfit, sans-serif; font-stretch: 118%;
  font-size: .96rem; font-weight: 600; letter-spacing: -.01em;
  color: #fff; white-space: nowrap;
}
.brand-sub {
  font-size: .555rem; font-weight: 500; letter-spacing: .29em;
  text-transform: uppercase; color: var(--gold); white-space: nowrap;
}

.nav-links { display: flex; align-items: center; gap: clamp(.7rem, 1.6vw, 1.7rem); }
.nav-link {
  position: relative;
  font-size: .82rem; font-weight: 400; letter-spacing: .04em;
  color: rgba(255,255,255,.66);
  padding: .35rem 0;
  transition: color .3s var(--ease);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: .3rem;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transition: width .3s var(--ease);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: #fff; }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { width: 100%; }
.nav-link[aria-current="page"] { color: var(--gold-bright); }
/* Parent of the section you are currently inside: lit, but with a half-width
   rule so it stays distinguishable from the exact-page state. */
.nav-link.is-section { color: rgba(255,255,255,.92); }
.nav-link.is-section::after { width: 45%; opacity: .65; }
/* The matching entry inside an open panel. */
.nav-panel a[aria-current="page"] { background: rgba(212,168,83,.12); }
.nav-panel a[aria-current="page"] b { color: var(--gold-bright); }

/* Dropdown */
.nav-drop { position: relative; }
.nav-panel {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(560px, 84vw);
  padding: 1.1rem;
  background: rgba(6,9,20,.97);
  border: 1px solid rgba(255,255,255,.1);
  border-top: 2px solid var(--gold);
  border-radius: var(--r-sm);
  box-shadow: 0 30px 90px rgba(0,0,0,.7);
  backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden;
  transition: all .3s var(--ease);
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem;
}
.nav-drop:hover .nav-panel, .nav-drop:focus-within .nav-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-panel a {
  display: block; padding: .62rem .8rem; border-radius: var(--r-xs);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav-panel a:hover { background: rgba(212,168,83,.1); }
.nav-panel b { display: block; font-size: .82rem; font-weight: 500; color: rgba(255,255,255,.92); }
.nav-panel span { display: block; font-size: .705rem; color: rgba(255,255,255,.42); margin-top: .1rem; }
.nav-panel a:hover b { color: var(--gold-bright); }
/* Narrow single-column variant for panels with an odd number of entries */
.nav-panel--list { grid-template-columns: 1fr; width: min(330px, 84vw); }
/* Divider between "sections of this page" and links that leave it, so the menu
   reads as one page's contents rather than a flat list of destinations. */
.nav-sep {
  display: block; margin: .5rem .8rem .15rem; padding-top: .55rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
:root[data-theme="light"] .nav-sep { border-top-color: rgba(0,0,0,.1); color: var(--ink-mute); }

.nav-tools { display: flex; align-items: center; gap: .55rem; flex: none; }
.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-xs);
  color: rgba(255,255,255,.6);
  transition: all .3s var(--ease);
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(212,168,83,.08); }
.icon-btn svg { width: 16px; height: 16px; }

.kbd {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .16rem .42rem;
  font-size: .62rem; font-family: ui-monospace, SFMono-Regular, monospace;
  border: 1px solid rgba(255,255,255,.16); border-radius: 3px;
  color: rgba(255,255,255,.45);
}

/* Mobile drawer */
.burger { display: none; }
.drawer {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(2,4,9,.98);
  backdrop-filter: blur(20px);
  padding: 1.4rem var(--gut) 2.5rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
  color: var(--on-dark);
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer-list { margin-top: 2rem; }
.drawer-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-family: Archivo, Outfit, sans-serif; font-stretch: 112%;
  font-size: 1.3rem; font-weight: 500;
  color: rgba(255,255,255,.85);
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.drawer-list a:hover { color: var(--gold-bright); padding-left: .5rem; }
.drawer-list a span { font-size: .68rem; letter-spacing: .2em; color: rgba(255,255,255,.28); font-family: Outfit, sans-serif; }

/* Command palette */
.palette {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: start center;
  padding-top: min(16vh, 140px);
  background: rgba(2,4,9,.7);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s;
}
.palette.is-open { opacity: 1; visibility: visible; }
.palette-box {
  width: min(620px, 92vw);
  background: rgba(8,11,22,.98);
  border: 1px solid rgba(255,255,255,.12);
  border-top: 2px solid var(--gold);
  border-radius: var(--r-md);
  box-shadow: 0 40px 120px rgba(0,0,0,.8);
  overflow: hidden;
  transform: translateY(-14px) scale(.98);
  transition: transform .3s var(--ease);
  color: var(--on-dark);
}
.palette.is-open .palette-box { transform: none; }
.palette input {
  width: 100%; padding: 1.15rem 1.3rem;
  background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.09);
  font-size: 1rem; color: #fff; outline: none;
}
.palette input::placeholder { color: rgba(255,255,255,.3); }
.palette-results { max-height: 52vh; overflow-y: auto; padding: .5rem; }
.palette-item {
  display: flex; align-items: center; gap: .8rem;
  width: 100%; padding: .72rem .85rem; border-radius: var(--r-xs);
  text-align: left; transition: background .2s;
}
.palette-item.is-active, .palette-item:hover { background: rgba(212,168,83,.12); }
.palette-item b { font-size: .87rem; font-weight: 500; color: rgba(255,255,255,.9); }
.palette-item span { font-size: .72rem; color: rgba(255,255,255,.4); }
.palette-item em { margin-left: auto; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-style: normal; }

/* --------------------------------------------------------------------------
   10. INTERACTIVE MODULES
   -------------------------------------------------------------------------- */

/* Tabs */
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.tab {
  padding: .78rem 1.3rem;
  font-size: .82rem; font-weight: 400; letter-spacing: .05em;
  color: var(--page-mute);
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  transition: all .3s var(--ease);
  white-space: nowrap;
}
.tab:hover { color: var(--page-ink); }
.tab[aria-selected="true"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
  font-weight: 500;
}
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadeUp .5s var(--ease) both; }

/* Segmented control */
.seg {
  display: inline-flex; padding: 4px; gap: 2px;
  border: 1px solid var(--page-hair); border-radius: 99px;
  background: var(--page-panel);
}
.seg button {
  padding: .48rem 1.05rem; border-radius: 99px;
  font-size: .76rem; letter-spacing: .06em;
  color: var(--page-mute); transition: all .3s var(--ease);
  white-space: nowrap;
}
.seg button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #04060e; font-weight: 600;
}

/* Accordion */
.acc { border-top: 1px solid var(--page-hair); }
.acc-item { border-bottom: 1px solid var(--page-hair); }
.acc-head {
  display: flex; align-items: center; gap: 1.1rem;
  width: 100%; padding: 1.35rem .2rem;
  text-align: left;
  transition: color .3s var(--ease);
}
.acc-head:hover { color: var(--gold); }
.acc-num {
  font-family: Archivo, sans-serif; font-stretch: 118%;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  color: var(--gold); flex: none; width: 2rem;
}
.acc-title { flex: 1 1 auto; font-family: Archivo, Outfit, sans-serif; font-stretch: 112%; font-size: clamp(1rem, 1.6vw, 1.22rem); font-weight: 500; letter-spacing: -.01em; }
.acc-sign { flex: none; position: relative; width: 15px; height: 15px; }
.acc-sign::before, .acc-sign::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.acc-sign::before { inset: 7px 0 auto 0; height: 1px; }
.acc-sign::after  { inset: 0 7px auto 7px; width: 1px; height: 15px; }
.acc-item.is-open .acc-sign::after { transform: rotate(90deg); opacity: 0; }
.acc-item.is-open .acc-head { color: var(--gold); }
.acc-body {
  overflow: hidden; max-height: 0;
  transition: max-height .55s var(--ease);
}
.acc-body-inner { padding: 0 .2rem 1.7rem 3.1rem; }

/* Step rail / process */
.rail { position: relative; padding-left: 2.9rem; }
.rail::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px;
  width: 1px; background: linear-gradient(180deg, var(--gold), rgba(212,168,83,.15));
}
.rail-item { position: relative; padding-bottom: 2.4rem; }
.rail-item:last-child { padding-bottom: 0; }
.rail-dot {
  position: absolute; left: -2.9rem; top: 3px;
  width: 23px; height: 23px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--page-bg);
  border: 1px solid var(--gold);
  font-size: .64rem; font-weight: 600; color: var(--gold);
  transition: all .35s var(--ease);
}
.rail-item:hover .rail-dot, .rail-item.is-active .rail-dot {
  background: var(--gold); color: #04060e;
  box-shadow: 0 0 0 5px rgba(212,168,83,.16);
}

/* Marquee */
.marquee { overflow: hidden; position: relative; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--dark-bg), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--dark-bg), transparent); }
.marquee--light::before { background: linear-gradient(90deg, var(--light-bg), transparent); }
.marquee--light::after  { background: linear-gradient(270deg, var(--light-bg), transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee--rev .marquee-track { animation-direction: reverse; }
.marquee-item {
  display: flex; align-items: center; gap: .8rem;
  padding-inline: clamp(1.4rem, 3vw, 2.7rem);
  font-family: Archivo, Outfit, sans-serif; font-stretch: 112%;
  font-size: clamp(.9rem, 1.5vw, 1.12rem); font-weight: 500;
  color: var(--page-mute); white-space: nowrap;
  transition: color .3s var(--ease);
}
.marquee-item:hover { color: var(--gold); }
.marquee-item i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; opacity: .55;
}

/* Ticker */
.ticker {
  display: flex; align-items: center; gap: 1rem;
  border-block: 1px solid var(--page-hair);
  background: var(--page-panel);
  overflow: hidden;
  font-size: .76rem;
}
.ticker-tag {
  flex: none; padding: .62rem 1rem;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #04060e; font-weight: 600;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
}
.ticker-track { display: flex; width: max-content; animation: marquee 44s linear infinite; gap: 0; }
.ticker-item { padding-inline: 1.6rem; white-space: nowrap; color: var(--page-soft); display: flex; align-items: center; gap: .55rem; }
.ticker-item b { color: var(--gold-bright); font-weight: 500; font-variant-numeric: tabular-nums; }
.ticker-item .up { color: var(--jade); }
.ticker-item .dn { color: #f87171; }

/* Stat blocks */
.stat { position: relative; }
.stat-value {
  font-family: Archivo, Outfit, sans-serif; font-stretch: 118%;
  font-size: clamp(2.4rem, 5vw, 4.1rem); font-weight: 600;
  letter-spacing: -.035em; line-height: .95;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: .55rem;
  font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--page-mute);
}
.stat-note { margin-top: .5rem; font-size: .8rem; color: var(--page-soft); line-height: 1.55; }

/* Data table */
.dtable { font-size: .875rem; min-width: 640px; }
.dtable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dtable thead th {
  text-align: left; padding: .95rem 1.05rem;
  font-size: .655rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(212,168,83,.3);
  white-space: nowrap;
}
.dtable tbody td { padding: 1.05rem; border-bottom: 1px solid var(--page-hair); vertical-align: top; line-height: 1.6; }
.dtable tbody tr { transition: background .3s var(--ease); cursor: pointer; }
.dtable tbody tr:hover { background: rgba(212,168,83,.055); }
.dtable tbody tr.is-open { background: rgba(212,168,83,.075); }
.dtable .row-detail td { padding: 0; border-bottom: 1px solid var(--page-hair); }
.dtable .row-detail-inner { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.dtable .row-detail.is-open .row-detail-inner { max-height: 460px; }
.dtable .row-detail-pad { padding: 0 1.05rem 1.4rem; }
.dtable td b { font-weight: 500; color: var(--page-ink); }

/* Range slider */
.range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold) var(--fill, 40%), rgba(255,255,255,.12) var(--fill, 40%));
  outline: none; cursor: pointer;
}
.band--light .range, .band--paper .range {
  background: linear-gradient(90deg, var(--gold) var(--fill, 40%), rgba(0,0,0,.12) var(--fill, 40%));
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 19px; height: 19px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dark));
  border: 2px solid var(--page-bg);
  box-shadow: 0 0 0 3px rgba(212,168,83,.22), 0 3px 12px rgba(0,0,0,.4);
  cursor: grab;
}
.range::-moz-range-thumb {
  width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--page-bg);
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dark));
  box-shadow: 0 0 0 3px rgba(212,168,83,.22);
  cursor: grab;
}

/* Form fields */
.field { display: block; }
.field-label {
  display: block; margin-bottom: .5rem;
  font-size: .655rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--page-mute);
}
.field-input, .field-area, .field-select {
  width: 100%; padding: .85rem 1rem;
  background: var(--page-panel);
  border: 1px solid var(--page-hair);
  border-radius: var(--r-xs);
  font-size: .92rem;
  transition: all .3s var(--ease);
  outline: none;
}
.field-input:focus, .field-area:focus, .field-select:focus {
  border-color: var(--gold);
  background: rgba(212,168,83,.05);
  box-shadow: 0 0 0 3px rgba(212,168,83,.09);
}
.field-input::placeholder, .field-area::placeholder { color: var(--page-mute); opacity: .7; }
.field-area { min-height: 120px; resize: vertical; line-height: 1.6; font-family: inherit; }
.field-select { appearance: none; cursor: pointer; }

/* Wizard */
.wiz-rail { display: flex; align-items: center; gap: 0; }
.wiz-step { display: flex; align-items: center; gap: .6rem; flex: none; }
.wiz-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--page-hair);
  font-size: .68rem; font-weight: 600;
  color: var(--page-mute);
  transition: all .4s var(--ease); flex: none;
}
.wiz-step.is-active .wiz-num { border-color: var(--gold); color: #04060e; background: var(--gold); box-shadow: 0 0 0 4px rgba(212,168,83,.16); }
.wiz-step.is-done .wiz-num { border-color: var(--jade); color: var(--jade); background: rgba(52,211,153,.12); }
.wiz-step span { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--page-mute); }
.wiz-step.is-active span { color: var(--gold); }
.wiz-line { flex: 1 1 auto; height: 1px; min-width: 18px; background: var(--page-hair); margin-inline: .7rem; position: relative; overflow: hidden; }
.wiz-line i { position: absolute; inset: 0; width: 0; background: var(--gold); transition: width .5s var(--ease); }
.wiz-pane { display: none; }
.wiz-pane.is-active { display: block; animation: fadeUp .45s var(--ease) both; }

/* Toast */
.toast-dock { position: fixed; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 130; display: grid; gap: .6rem; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: .7rem;
  padding: .82rem 1.15rem;
  background: rgba(8,11,22,.97);
  border: 1px solid rgba(212,168,83,.32);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  font-size: .85rem; color: rgba(255,255,255,.92);
  animation: toastIn .45s var(--ease) both;
  backdrop-filter: blur(12px);
}
.toast svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.toast.is-out { animation: toastOut .35s var(--ease) both; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 140;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(2,4,9,.94);
  backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-stage { width: min(1180px, 100%); }
.lightbox-stage > * { width: 100%; border-radius: var(--r-md); }
.lightbox-cap { margin-top: 1rem; color: rgba(255,255,255,.6); font-size: .85rem; text-align: center; }
.lightbox-x { position: absolute; top: 1.3rem; right: 1.3rem; }

/* Back to top */
.to-top {
  position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 70;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(8,11,22,.9);
  border: 1px solid rgba(212,168,83,.35);
  color: var(--gold);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all .4s var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold); color: #04060e; }
.to-top svg { width: 17px; height: 17px; }

/* Cursor orb */
.orb {
  position: fixed; top: 0; left: 0; z-index: 5;
  width: 380px; height: 380px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(212,168,83,.075), transparent 62%);
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .6s var(--ease);
  will-change: transform;
  mix-blend-mode: screen;
}
.orb.is-on { opacity: 1; }

/* Reveal animation */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="blur"]  { filter: blur(9px); transform: none; }
[data-reveal="blur"].is-in { filter: blur(0); }
[data-reveal].is-in { transform: none; }

/* Counter-up hidden state */
[data-count] { font-variant-numeric: tabular-nums; }

/* Globe */
.globe-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 620px; margin-inline: auto; }
.globe-wrap canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.globe-wrap canvas:active { cursor: grabbing; }
.globe-ring {
  position: absolute; inset: 6%; border-radius: 50%;
  border: 1px solid rgba(212,168,83,.1);
  pointer-events: none;
}
.globe-ring::before {
  content: ""; position: absolute; inset: -7%; border-radius: 50%;
  border: 1px dashed rgba(56,189,248,.09);
  animation: spin 90s linear infinite;
}
.corridor-list { display: grid; gap: 1px; background: var(--page-hair); border: 1px solid var(--page-hair); border-radius: var(--r-sm); overflow: hidden; }
.corridor {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem;
  padding: .85rem 1rem;
  background: var(--dark-bg);
  text-align: left;
  transition: background .3s var(--ease), padding-left .3s var(--ease);
}
.corridor:hover, .corridor.is-active { background: rgba(212,168,83,.1); padding-left: 1.35rem; }
.corridor i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); flex: none; }
.corridor.is-active i { background: var(--cyber-bright); box-shadow: 0 0 10px var(--cyber); }
.corridor b { font-size: .855rem; font-weight: 400; color: rgba(255,255,255,.88); display: block; }
.corridor span { font-size: .69rem; color: rgba(255,255,255,.38); letter-spacing: .1em; text-transform: uppercase; }
.corridor em { font-style: normal; font-size: .7rem; color: var(--gold); letter-spacing: .12em; }

/* Comparison toggle diagram */
.compare { display: grid; gap: 1px; background: var(--page-hair); border: 1px solid var(--page-hair); border-radius: var(--r-md); overflow: hidden; }
.compare-side { padding: clamp(1.3rem, 2.4vw, 2.1rem); background: var(--page-bg); transition: background .45s var(--ease); }
.compare-side.is-dim { opacity: .38; filter: saturate(.4); }
.compare-side--bad { border-top: 2px solid #ef4444; }
.compare-side--good { border-top: 2px solid var(--jade); }

/* Node map (SVG interactive) */
.nodemap-node { cursor: pointer; }
.nodemap-node circle, .nodemap-node rect { transition: all .35s var(--ease); }
.nodemap-node:hover circle, .nodemap-node.is-active circle { filter: drop-shadow(0 0 10px rgba(212,168,83,.75)); }
.nodemap-link { transition: stroke .35s var(--ease), stroke-width .35s var(--ease), opacity .35s var(--ease); }
.nodemap.has-active .nodemap-link { opacity: .16; }
.nodemap.has-active .nodemap-link.is-lit { opacity: 1; stroke-width: 2.4; }
.nodemap.has-active .nodemap-node { opacity: .32; }
.nodemap.has-active .nodemap-node.is-active, .nodemap.has-active .nodemap-node.is-near { opacity: 1; }

/* Gauge */
.gauge { position: relative; display: grid; place-items: center; }
.gauge svg { transform: rotate(-90deg); }
.gauge-arc { stroke-dasharray: var(--circ); stroke-dashoffset: var(--circ); transition: stroke-dashoffset 1.6s var(--ease); }
.gauge.is-in .gauge-arc { stroke-dashoffset: var(--off); }
.gauge-mid { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }

/* Bar chart */
.barchart { display: flex; align-items: flex-end; gap: clamp(.35rem, 1.1vw, .9rem); height: 210px; }
.barchart-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .5rem; height: 100%; }
.barchart-bar {
  width: 100%; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dark));
  height: 0; transition: height 1.2s var(--ease);
  position: relative;
}
.barchart.is-in .barchart-bar { height: var(--h); }
.barchart-col:hover .barchart-bar { background: linear-gradient(180deg, var(--cyber-bright), var(--cyber-dark)); }
.barchart-cap { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--page-mute); text-align: center; }
.barchart-val { font-size: .72rem; font-weight: 500; color: var(--gold); font-variant-numeric: tabular-nums; }

/* Matrix (2x2 positioning) */
.matrix { position: relative; aspect-ratio: 1 / .78; border: 1px solid var(--page-hair); border-radius: var(--r-md); overflow: hidden; }
.matrix-quad {
  position: absolute; width: 50%; height: 50%;
  padding: clamp(.85rem, 1.7vw, 1.4rem);
  transition: background .4s var(--ease);
  cursor: default;
}
.matrix-quad:hover { background: rgba(212,168,83,.075); }
.matrix-axis { position: absolute; background: var(--page-hair); }
.matrix-label {
  position: absolute; font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--page-mute);
}

/* Tag list */
.taglist { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag {
  padding: .28rem .62rem; font-size: .68rem;
  border: 1px solid var(--page-hair); border-radius: var(--r-xs);
  color: var(--page-soft);
  transition: all .3s var(--ease);
}
.tag:hover { border-color: rgba(212,168,83,.5); color: var(--gold); }

/* Icon frame */
.iconframe {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(212,168,83,.28);
  border-radius: var(--r-sm);
  background: rgba(212,168,83,.07);
  color: var(--gold);
  transition: all .4s var(--ease);
}
.iconframe svg { width: 21px; height: 21px; }
.pillar:hover .iconframe, .card:hover .iconframe, .glass-card:hover .iconframe {
  background: var(--gold); color: #04060e; border-color: var(--gold);
  transform: rotate(-6deg) scale(1.06);
}
.iconframe--cyber { border-color: rgba(56,189,248,.28); background: rgba(56,189,248,.07); color: var(--cyber); }
.pillar--cyber:hover .iconframe--cyber, .cyber-glass:hover .iconframe--cyber { background: var(--cyber); color: #04060e; border-color: var(--cyber); }
.iconframe--jade { border-color: rgba(52,211,153,.28); background: rgba(52,211,153,.07); color: var(--jade); }
.iconframe--lg { width: 58px; height: 58px; }
.iconframe--lg svg { width: 26px; height: 26px; }

/* Quote */
.quote {
  position: relative;
  padding-left: clamp(2.2rem, 4vw, 3.4rem);
  font-family: Archivo, Outfit, sans-serif; font-stretch: 105%;
  font-size: clamp(1.15rem, 2.3vw, 1.85rem);
  font-weight: 300; line-height: 1.4; letter-spacing: -.015em;
}
.quote::before {
  content: "\201C";
  position: absolute; left: 0; top: -.2em;
  font-size: clamp(3.4rem, 7vw, 5.6rem);
  line-height: 1; color: var(--gold); opacity: .32;
  font-family: Georgia, serif;
}

/* Numbered plate */
.plate-num {
  font-family: Archivo, Outfit, sans-serif; font-stretch: 118%;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 700;
  line-height: 1; letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212,168,83,.42);
}
.pillar:hover .plate-num, .glass-card:hover .plate-num { -webkit-text-stroke-color: var(--gold); }

/* Footer */
.foot { background: var(--darker-bg); color: var(--on-dark); position: relative; }
.foot a { color: rgba(255,255,255,.55); transition: color .3s var(--ease), padding-left .3s var(--ease); font-size: .855rem; }
.foot a:hover { color: var(--gold-bright); }
.foot-h {
  font-size: .655rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.15rem;
}
.foot-list { display: grid; gap: .62rem; }

/* --------------------------------------------------------------------------
   11. KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes goldShimmer { 0% { background-position: 0%; } 50% { background-position: 100%; } 100% { background-position: 0%; } }
@keyframes kenBurns { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.13) translate(-1.6%, 1.6%); } }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes scanLine { 0% { opacity: 0; top: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; top: 100%; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes floatSlow { 0%, 100% { transform: translateY(0) translateX(0); } 33% { transform: translateY(-14px) translateX(6px); } 66% { transform: translateY(6px) translateX(-8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping { 0% { transform: scale(.55); opacity: .95; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes glowGold { 0%, 100% { box-shadow: 0 0 0 rgba(212,168,83,0); } 50% { box-shadow: 0 0 22px 4px rgba(212,168,83,.22); } }
@keyframes glowCyber { 0%, 100% { box-shadow: 0 0 0 rgba(56,189,248,0); } 50% { box-shadow: 0 0 22px 4px rgba(56,189,248,.26); } }
@keyframes dashFlow { to { stroke-dashoffset: -220; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(34px) scale(.97); } to { opacity: 1; transform: none; } }

.glow-pulse  { animation: glowGold 3s ease-in-out infinite; }
.cyber-pulse { animation: glowCyber 3s ease-in-out infinite; }
.floaty      { animation: float 6s ease-in-out infinite; }
.floaty-slow { animation: floatSlow 14s ease-in-out infinite; }
.flow-dash   { stroke-dasharray: 6 8; animation: dashFlow 9s linear infinite; }
.flow-dash--fast { animation-duration: 4s; }
.spin-slow   { animation: spin 40s linear infinite; }

/* --------------------------------------------------------------------------
   12. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-links { display: none; }
  .burger { display: grid; }
}
@media (max-width: 980px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-split, .g-7-5, .g-5-7, .g-4-8, .g-8-4 { grid-template-columns: minmax(0, 1fr); }
  .lg-order-1 { order: -1; }
}
@media (max-width: 480px) {
  /* "Central Links International" is a long nowrap brand name — shrink it so the
     brand + tool buttons still fit a 360–390px phone without clipping. */
  .brand-name { font-size: .82rem; }
  .brand-mark { width: 28px; height: 28px; }
  .nav-tools  { gap: .35rem; }
  .icon-btn   { width: 33px; height: 33px; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 78px; }
  .g2, .g3, .g4, .g5, .g6 { grid-template-columns: minmax(0, 1fr); }
  .sm-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-inner { height: 62px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-sub { display: none; }
  .btn { padding: .9rem 1.7rem; font-size: .78rem; }
  .acc-body-inner { padding-left: 0; }
  .rail { padding-left: 2.2rem; }
  .rail-dot { left: -2.2rem; width: 20px; height: 20px; font-size: .58rem; }
  .orb { display: none; }
  .quote { padding-left: 0; padding-top: 2.2rem; }
  .quote::before { top: -.35em; }
  .sm-hide { display: none !important; }
}

/* Print */
@media print {
  .nav, .drawer, .palette, .to-top, .orb, .progress-rail, .toast-dock { display: none !important; }
  body { background: #fff; color: #000; }
  .band { padding-block: 1.5rem; break-inside: avoid; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero-photo img, .hero-photo svg { animation: none; }
}

/* ==========================================================================
   13. VIBRANT SURFACES, ILLUSTRATION FRAMES & NEW INTERACTIONS
   Added in the "more colour / more interaction" pass.
   ========================================================================== */

/* --- Accent variants for existing components ----------------------------- */
.eyebrow--violet { color: var(--violet); }
.eyebrow--violet::before { background: linear-gradient(90deg, transparent, var(--violet)); }
.eyebrow--amber { color: var(--amber); }
.eyebrow--amber::before { background: linear-gradient(90deg, transparent, var(--amber)); }

.pill--violet { border-color: rgba(168,85,247,.4); color: var(--violet-bright); background: rgba(168,85,247,.1); }
.pill--amber  { border-color: rgba(251,146,60,.4); color: var(--amber-bright);  background: rgba(251,146,60,.1); }
.pill--coral  { border-color: rgba(251,113,133,.4); color: var(--coral-bright); background: rgba(251,113,133,.1); }
.band--light .pill--violet, .band--paper .pill--violet { color: var(--violet-dark); }
.band--light .pill--amber,  .band--paper .pill--amber  { color: var(--amber-dark); }
.band--light .pill--coral,  .band--paper .pill--coral  { color: var(--coral-dark); }

.iconframe--violet { border-color: rgba(168,85,247,.3); background: rgba(168,85,247,.09); color: var(--violet); }
.iconframe--amber  { border-color: rgba(251,146,60,.3); background: rgba(251,146,60,.09); color: var(--amber); }
.iconframe--coral  { border-color: rgba(251,113,133,.3); background: rgba(251,113,133,.09); color: var(--coral); }

.violet-text { background: linear-gradient(135deg, var(--violet-dark), var(--violet-bright), var(--violet));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.amber-text { background: linear-gradient(135deg, var(--amber-dark), var(--amber-bright), var(--amber));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

.pillar--violet::before { background: linear-gradient(90deg, var(--violet-dark), var(--violet-bright)); }
.pillar--violet:hover   { box-shadow: 0 24px 72px rgba(168,85,247,.16); }
.pillar--amber::before  { background: linear-gradient(90deg, var(--amber-dark), var(--amber-bright)); }
.pillar--amber:hover    { box-shadow: 0 24px 72px rgba(251,146,60,.16); }
.violet-card { background: var(--paper); border: 1px solid rgba(0,0,0,.07); border-top: 3px solid var(--violet); }
.amber-card  { background: var(--paper); border: 1px solid rgba(0,0,0,.07); border-top: 3px solid var(--amber); }
.spotlight--violet { --spot-rgb: 168,85,247; }
.spotlight--amber  { --spot-rgb: 251,146,60; }

/* --- Aurora: animated colour field for dark bands ------------------------ */
.aurora { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.aurora::before, .aurora::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .55;
}
.aurora::before {
  width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
  top: -22%; left: -12%;
  background: radial-gradient(circle, var(--gold) 0%, rgba(240,180,41,.25) 42%, transparent 70%);
  animation: auroraA 22s var(--ease-in-out) infinite alternate;
}
.aurora::after {
  width: 56vw; height: 56vw; max-width: 820px; max-height: 820px;
  bottom: -26%; right: -10%;
  background: radial-gradient(circle, var(--cyber) 0%, rgba(34,211,238,.22) 45%, transparent 70%);
  animation: auroraB 26s var(--ease-in-out) infinite alternate;
}
.aurora--jade::after { background: radial-gradient(circle, var(--jade) 0%, rgba(16,224,160,.22) 45%, transparent 70%); }
.aurora--violet::before { background: radial-gradient(circle, var(--violet) 0%, rgba(168,85,247,.25) 42%, transparent 70%); }
.aurora--soft::before, .aurora--soft::after { opacity: .3; }
@keyframes auroraA { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(9%, 12%) scale(1.16); } }
@keyframes auroraB { 0% { transform: translate(0,0) scale(1.1); } 100% { transform: translate(-11%, -9%) scale(1); } }

/* Vivid conic ring used behind key numbers */
.halo { position: relative; }
.halo::before {
  content: ""; position: absolute; inset: -28%;
  background: conic-gradient(from 0deg, var(--gold), var(--cyber), var(--jade), var(--violet), var(--gold));
  filter: blur(28px); opacity: .3; border-radius: 50%;
  animation: spin 18s linear infinite; z-index: -1;
}

/* --- Brand wordmark (no logo mark) --------------------------------------- */
.brand-rule {
  width: 3px; align-self: stretch; min-height: 30px; flex: none;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dark));
  box-shadow: 0 0 14px rgba(240,180,41,.5);
}
.brand-name em { font-style: normal; color: var(--gold); }

/* --- Gradient-border cards ----------------------------------------------
   Two backgrounds — an opaque surface clipped to padding-box and the gradient
   clipped to border-box — so the ring shows only in the 1px border. The older
   z-index:-1 pseudo-element painted OVER the surface because .gcard creates a
   stacking context, which washed every card out in light theme. */
.gcard {
  --gcard-surface: #0b101d;
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--gcard-surface), var(--gcard-surface)) padding-box,
    linear-gradient(140deg, rgba(240,180,41,.55), rgba(34,211,238,.34) 45%,
                    rgba(16,224,160,.3) 75%, rgba(240,180,41,.5)) border-box;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.gcard:hover { transform: translateY(-5px); box-shadow: 0 26px 70px rgba(0,0,0,.4); }
.band--light .gcard, .band--paper .gcard { --gcard-surface: var(--paper); }
:root[data-theme="light"] .gcard { --gcard-surface: #ffffff; }
:root[data-theme="light"] .gcard:hover { box-shadow: 0 22px 56px rgba(120,100,40,.18); }

/* --- Group member cards --------------------------------------------------
   The logo tile carries a wordmark placeholder until the client supplies real
   files; swapping the <span> for an <img> needs no other change. */
.logo-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr)); }
.logo-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.2rem, 1.9vw, 1.6rem);
}
.logo-tile {
  width: 100%; height: 80px;
  display: grid; place-items: center;
  padding: .5rem .7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--page-hair);
  background: linear-gradient(150deg, rgba(240,180,41,.11), rgba(56,189,248,.05));
}
.logo-tile img { max-width: 78%; max-height: 56px; object-fit: contain; }
.logo-tile span {
  font-family: Archivo, Outfit, sans-serif;
  font-stretch: 118%; font-weight: 600;
  font-size: clamp(1rem, 2.3vw, 1.45rem);
  letter-spacing: .05em; text-align: center; line-height: 1.1;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-bright), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.logo-card .x-more { margin-top: auto; }
.logo-card .pill { margin-top: 1rem; }
/* Members whose profile the client has still to supply */
.logo-card--pending .logo-tile { border-style: dashed; }

/* --- Illustration frames ------------------------------------------------- */
.scene {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-md);
  border: 1px solid var(--page-hair);
  background: linear-gradient(165deg, rgba(240,180,41,.07), rgba(4,6,14,.02));
}
.band--light .scene, .band--paper .scene { background: linear-gradient(165deg, #fffaf0, #eef4fa); }
.scene > img, .scene > svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.scene-cap {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(.9rem, 2vw, 1.4rem);
  background: linear-gradient(180deg, transparent, rgba(4,6,14,.62) 28%, rgba(4,6,14,.94) 62%, rgba(4,6,14,.99));
  padding-top: clamp(2.4rem, 6vw, 4rem);
  color: #fff;
}
.scene-tag {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  padding: .28rem .66rem; border-radius: var(--r-xs);
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  background: rgba(4,6,14,.7); border: 1px solid rgba(240,180,41,.45); color: var(--gold-bright);
  backdrop-filter: blur(8px);
}

/* --- Compare slider (resizable split) ------------------------------------
   Each side carries its own copy, so this resizes the two panes rather than
   wiping one image over another — clipping would hide the second side's text. */
.cmpslider {
  position: relative; display: flex; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--page-hair);
  touch-action: pan-y; user-select: none;
}
.cmpslider-a, .cmpslider-b {
  padding: clamp(1.2rem, 2.6vw, 2rem);
  min-width: 0; overflow: hidden;
  transition: flex-basis .12s linear;
}
.cmpslider-a { flex: 0 0 var(--split, 50%); background: linear-gradient(150deg, #1d1206, #0a0d16); color: var(--on-dark); }
.cmpslider-b { flex: 1 1 auto; background: linear-gradient(150deg, #04241f, #061523); color: var(--on-dark); }
.cmpslider-handle {
  position: absolute; top: 0; bottom: 0; left: var(--split, 50%);
  width: 2px; background: linear-gradient(180deg, var(--gold-bright), var(--jade));
  cursor: ew-resize; z-index: 3; transform: translateX(-1px);
}
.cmpslider-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 42px; height: 42px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(6,9,20,.94);
  border: 1px solid var(--gold); box-shadow: 0 0 22px rgba(240,180,41,.5);
}
.cmpslider-handle::before {
  content: "\2039 \203A"; position: absolute; top: 50%; left: 50%; z-index: 1;
  transform: translate(-50%, -50%); color: var(--gold-bright);
  font-size: .95rem; letter-spacing: .08em;
}
.cmpslider-handle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --- Timeline scrubber ---------------------------------------------------- */
.tl { position: relative; }
.tl-track {
  position: relative; height: 2px; margin: 2.6rem 0 1.6rem;
  background: var(--page-hair); border-radius: 2px;
}
.tl-fill {
  position: absolute; inset: 0 auto 0 0; width: var(--tl, 0%);
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright), var(--cyber));
  border-radius: 2px; transition: width .5s var(--ease);
}
.tl-node {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--page-bg); border: 2px solid var(--page-hair);
  cursor: pointer; transition: all .35s var(--ease); z-index: 2;
}
.tl-node:hover { border-color: var(--gold); transform: translate(-50%, -50%) scale(1.25); }
.tl-node.is-on { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 6px rgba(240,180,41,.18); }
.tl-node.is-past { border-color: var(--gold-dark); background: var(--gold-dark); }
.tl-label {
  position: absolute; top: -2.1rem; left: 50%; transform: translateX(-50%);
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--page-mute); white-space: nowrap; transition: color .3s var(--ease);
}
.tl-node.is-on .tl-label { color: var(--gold); font-weight: 500; }
/* The end labels are centred on nodes that sit at the very ends of the track, so
   half the label hangs outside it. Anchor them to the node edge instead — at any
   width, not just on phones, or the last label pushes the page sideways. */
.tl-node:first-of-type .tl-label { left: 0; transform: none; }
.tl-node:last-of-type  .tl-label { left: auto; right: 0; transform: none; }
.tl-pane { display: none; }
.tl-pane.is-on { display: block; animation: fadeUp .5s var(--ease) both; }

/* --- Magnetic buttons ----------------------------------------------------- */
.magnet { transition: transform .32s var(--ease); will-change: transform; }

/* --- Flip stat tiles ------------------------------------------------------ */
.flip { perspective: 1100px; }
.flip-in {
  position: relative; transform-style: preserve-3d;
  transition: transform .75s var(--ease-soft); min-height: 190px;
}
.flip:hover .flip-in, .flip:focus-within .flip-in { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  border-radius: var(--r-md);
}
.flip-back { transform: rotateY(180deg); }

/* --- Draw-on-scroll SVG paths -------------------------------------------- */
.draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.is-in .draw, .draw.is-in { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--ease); }

/* --- Bento grid ----------------------------------------------------------- */
.bento { display: grid; gap: clamp(.8rem, 1.5vw, 1.2rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bento > .b-2 { grid-column: span 2; }
.bento > .b-3 { grid-column: span 3; }
.bento > .b-4 { grid-column: span 4; }
.bento > .r-2 { grid-row: span 2; }

/* --- Sector swatch rail --------------------------------------------------- */
.swatch {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; padding: .85rem 1rem; text-align: left;
  border-left: 3px solid transparent;
  transition: all .35s var(--ease);
  color: var(--page-soft);
}
.swatch:hover { background: var(--page-panel); color: var(--page-ink); }
.swatch.is-on { border-left-color: var(--gold); background: var(--page-panel-2); color: var(--page-ink); }
.swatch i { width: 9px; height: 9px; border-radius: 2px; flex: none; background: var(--gold); }

/* --- Vivid marquee -------------------------------------------------------- */
.marquee--vivid .marquee-item { color: var(--page-soft); }
.marquee--vivid .marquee-item:nth-child(3n)   { color: var(--gold); }
.marquee--vivid .marquee-item:nth-child(3n+1) { color: var(--cyber); }
.marquee--vivid .marquee-item:nth-child(3n+2) { color: var(--jade); }

/* --- Responsive additions -------------------------------------------------- */
@media (max-width: 1024px) {           /* tablet landscape */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* half-width tiles become one column each, so the grid stays 2-up */
  .bento > .b-2 { grid-column: span 1; }
  .bento > .b-3, .bento > .b-4 { grid-column: span 2; }
  .bento > .r-2 { grid-row: span 1; }
}
@media (max-width: 860px) {            /* tablet portrait */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > .b-2, .bento > .b-3, .bento > .b-4 { grid-column: span 2; }
  .bento > .r-2 { grid-row: span 1; }
  .cmpslider { flex-direction: column; }
  .cmpslider-a { flex: 1 1 auto; }
  .cmpslider-handle { display: none; }
  .flip-in { min-height: 0; }
  .flip-face { position: static; backface-visibility: visible; }
  .flip-back { display: none; }
  .flip:hover .flip-in, .flip:focus-within .flip-in { transform: none; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento > * { grid-column: span 1 !important; }
  .tl-label { font-size: .58rem; letter-spacing: .1em; }
}

/* ==========================================================================
   14. LIGHT THEME — a real inversion
   Previously the toggle only swapped body background, and every section sits
   inside a .band--* with its own hardcoded surface, so nothing visibly changed.
   The fix: re-declare the SURFACE and ON-DARK INK tokens themselves, so every
   rule that already reads them (.band--dark, .foot, .corridor, .marquee fades,
   .rail-dot …) inverts automatically.
   ========================================================================== */
:root[data-theme="light"] {
  /* surfaces that are dark by default become light paper */
  --dark-bg:   #f7f5ef;
  --darker-bg: #edeae1;
  --deep-bg:   #f2efe7;
  --cyber-bg:  #e8f3fa;
  --light-bg:  #fbfaf7;
  --paper:     #ffffff;

  /* ink that sat ON those dark surfaces flips to ink on light */
  --on-dark:       rgba(11, 15, 26, .93);
  --on-dark-soft:  rgba(58, 68, 86, .95);
  --on-dark-mute:  rgba(104, 113, 129, 1);
  --on-dark-faint: rgba(11, 15, 26, .16);
  --hair-dark:     rgba(0, 0, 0, .1);

  /* golds need to darken to hold contrast on paper */
  --gold:        #a9720a;
  --gold-bright: #c88c12;
  --gold-dark:   #8a5c05;
  --cyber:       #0b7c96;
  --cyber-bright:#0891b2;
  --jade:        #068a63;
  --jade-bright: #05996d;
  --violet:      #7c3aed;
  --coral:       #d6415c;
  --amber:       #c2570a;

  /* chrome + overlays */
  --chrome:        rgba(251, 250, 247, .82);
  --chrome-strong: rgba(251, 250, 247, .96);
  --overlay:       rgba(240, 238, 232, .72);
  --panel:         rgba(255, 255, 255, .98);
  --panel-line:    rgba(0, 0, 0, .1);
  --glass:         rgba(0, 0, 0, .035);
  --glass-hover:   rgba(0, 0, 0, .06);
  color-scheme: light;
}

/* Chrome tokens for the default (dark) theme */
:root {
  --chrome:        rgba(4, 6, 14, .72);
  --chrome-strong: rgba(2, 4, 9, .92);
  --overlay:       rgba(2, 4, 9, .7);
  --panel:         rgba(8, 11, 22, .98);
  --panel-line:    rgba(255, 255, 255, .12);
  --glass:         rgba(255, 255, 255, .038);
  --glass-hover:   rgba(255, 255, 255, .07);
}

/* --- surfaces that were hardcoded now read the tokens ------------------- */
.nav            { background: var(--chrome); color: var(--page-ink); }
.nav.is-scrolled{ background: var(--chrome-strong); }
.drawer         { background: var(--chrome-strong); color: var(--page-ink); }
.palette        { background: var(--overlay); }
.palette-box    { background: var(--panel); border-color: var(--panel-line); color: var(--page-ink); }
.toast          { background: var(--panel); color: var(--page-ink); }
.to-top         { background: var(--panel); }
.lightbox       { background: var(--overlay); }
.glass-card     { background: var(--glass); border-color: var(--panel-line); }
.glass-card:hover { background: var(--glass-hover); }

:root[data-theme="light"] .brand-name          { color: var(--ink); }
:root[data-theme="light"] .nav-link            { color: rgba(11,15,26,.68); }
:root[data-theme="light"] .nav-link:hover,
:root[data-theme="light"] .nav-link[aria-current="page"] { color: var(--ink); }
:root[data-theme="light"] .nav-link[aria-current="page"] { color: var(--gold); }
:root[data-theme="light"] .nav-link.is-section { color: var(--ink); }
:root[data-theme="light"] .icon-btn            { color: rgba(11,15,26,.6); border-color: rgba(0,0,0,.14); }
:root[data-theme="light"] .kbd                 { color: rgba(11,15,26,.5); border-color: rgba(0,0,0,.18); }
:root[data-theme="light"] .nav-panel           { background: var(--panel); }
:root[data-theme="light"] .nav-panel b         { color: var(--ink); }
:root[data-theme="light"] .nav-panel span      { color: var(--ink-mute); }
:root[data-theme="light"] .drawer-list a       { color: var(--ink); border-bottom-color: rgba(0,0,0,.09); }
:root[data-theme="light"] .drawer-list a span  { color: var(--ink-mute); }
:root[data-theme="light"] .palette input       { color: var(--ink); border-bottom-color: rgba(0,0,0,.1); }
:root[data-theme="light"] .palette input::placeholder { color: var(--ink-mute); }
:root[data-theme="light"] .palette-item b      { color: var(--ink); }
:root[data-theme="light"] .palette-item span   { color: var(--ink-mute); }
:root[data-theme="light"] .toast               { color: var(--ink); }
:root[data-theme="light"] .foot a              { color: var(--ink-soft); }
:root[data-theme="light"] .foot a:hover        { color: var(--gold); }
:root[data-theme="light"] ::selection          { background: rgba(169,114,10,.22); color: var(--ink); }
:root[data-theme="light"] ::-webkit-scrollbar-track { background: #eae7df; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), #b9b3a4); border-color: #eae7df; }

/* buttons meant for dark surfaces */
:root[data-theme="light"] .btn-outline-white   { color: var(--ink); border-color: rgba(0,0,0,.28); }
:root[data-theme="light"] .btn-outline-white:hover { color: var(--ink); border-color: var(--gold); }
:root[data-theme="light"] .btn-gold            { color: #fffdf7; }
:root[data-theme="light"] .seg button[aria-pressed="true"],
:root[data-theme="light"] .ticker-tag          { color: #fffdf7; }

/* components with baked-in dark gradients */
:root[data-theme="light"] .cmpslider-a { background: linear-gradient(150deg, #fdf3e6, #f6f1e6); }
:root[data-theme="light"] .cmpslider-b { background: linear-gradient(150deg, #e6f7f1, #eaf4f6); }
:root[data-theme="light"] .aurora::before,
:root[data-theme="light"] .aurora::after { opacity: .2; }
:root[data-theme="light"] .dot-grid {
  background-image: radial-gradient(rgba(0,0,0,.07) 1px, transparent 1px); }
:root[data-theme="light"] .cyber-grid {
  background-image: linear-gradient(rgba(8,145,178,.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(8,145,178,.08) 1px, transparent 1px); }
:root[data-theme="light"] .gold-grid {
  background-image: linear-gradient(rgba(169,114,10,.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(169,114,10,.08) 1px, transparent 1px); }
/* gcard is a gradient-border card: its own background must be opaque in light
   theme or the rainbow ::before washes straight through the panel. */
:root[data-theme="light"] .glass-card    { background: rgba(255,255,255,.7); }
:root[data-theme="light"] .cyber-glass   { background: rgba(8,145,178,.06); border-color: rgba(8,145,178,.22); }
:root[data-theme="light"] .aurora::before,
:root[data-theme="light"] .aurora::after { opacity: .13; }
:root[data-theme="light"] .hero-vignette { display: none; }
:root[data-theme="light"] .hero-photo    { opacity: .28; }
:root[data-theme="light"] .orb           { display: none; }
:root[data-theme="light"] .scan-line::after { opacity: .4; }

/* dark-only surfaces that stay dark on purpose (media, captions over art) */
.photo, .photo-scrim, .photo-label, .photo-tag, .scene-cap, .scene-tag, .hotspot-pop { color-scheme: dark; }

/* ==========================================================================
   15. READ-MORE, STEPPER & STRUCTURAL DIAGRAMS
   ========================================================================== */

/* --- Read-more ----------------------------------------------------------- */
.more { --more-h: 7.6em; position: relative; }
.more-body {
  max-height: var(--more-h);
  overflow: hidden;
  transition: max-height .55s var(--ease);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.more.is-open .more-body,
.more.is-short .more-body {
  max-height: 220em;
  -webkit-mask-image: none; mask-image: none;
}
.more-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .9rem; padding: .5rem .95rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(240,180,41,.4); border-radius: 99px;
  background: rgba(240,180,41,.07);
  transition: all .3s var(--ease);
}
.more-btn:hover { background: var(--gold); color: #04060e; border-color: var(--gold); }
.more-btn svg { width: 13px; height: 13px; transition: transform .35s var(--ease); }
.more.is-open .more-btn svg { transform: rotate(180deg); }
.band--light .more-btn, .band--paper .more-btn { color: var(--gold-dark); }
.band--light .more-btn:hover, .band--paper .more-btn:hover { color: #fff; }

/* --- Stepper (clickable process nodes) ----------------------------------- */
.stepper {
  display: flex; gap: .3rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--page-hair); padding-bottom: .2rem;
}
.stepper-node {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem; border-radius: var(--r-sm);
  border-bottom: 2px solid transparent;
  color: var(--page-mute); text-align: left;
  transition: all .3s var(--ease); white-space: nowrap;
}
.stepper-node:hover { color: var(--page-ink); background: var(--page-panel); }
.stepper-node.is-on { color: var(--gold); border-bottom-color: var(--gold); background: var(--page-panel-2); }
.stepper-node b {
  font-family: Archivo, Outfit, sans-serif; font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; opacity: .8;
}
.stepper-node span { font-size: .82rem; font-weight: 400; }
/* Drive visibility from the [hidden] attribute the JS sets, so a pane that is
   itself a .grid keeps its own display mode instead of being forced to block. */
/* a display-setting class (.grid, .flex) beats the UA [hidden] rule */
[data-step-pane][hidden],
[data-seg-pane][hidden] { display: none !important; }
[data-step-pane]:not([hidden]) { animation: fadeUp .45s var(--ease) both; }

/* --- Structural diagram system ------------------------------------------- */
.dg { width: 100%; height: auto; display: block; overflow: visible; }
.dg-lbl        { fill: var(--page-soft); text-transform: uppercase; }
.dg-lbl--tight { letter-spacing: .6px; }
.dg-cap        { fill: var(--page-mute); text-transform: none; letter-spacing: .04em; }
.dg-kicker     { fill: var(--gold); text-transform: uppercase; letter-spacing: .24em; }
.dg-num        { fill: var(--gold); letter-spacing: .04em; }
.dg-box        { fill: none; stroke: var(--page-hair); stroke-width: 1.4; }
.dg-band       { fill: rgba(240,180,41,.06); stroke: rgba(240,180,41,.4); stroke-width: 1.4; }
.dg-rail       { stroke: var(--page-hair); stroke-width: 1.6; fill: none; }
.dg-flow       { stroke: var(--gold); stroke-opacity: .75; stroke-dasharray: 5 7; animation: dgflow 2.4s linear infinite; }
@keyframes dgflow { to { stroke-dashoffset: -24 } }
.dg-dot        { fill: rgba(240,180,41,.14); stroke: var(--gold); stroke-width: 1.4; }
.dg-dot--sm    { fill: var(--gold); stroke: none; }
.dg-tick       { fill: none; stroke: var(--gold-bright); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dg-cargo      { fill: var(--gold-bright); }
.dg-step       { fill: rgba(240,180,41,calc(.07 + var(--i) * .05)); stroke: rgba(240,180,41,.5); stroke-width: 1.2; }
.dg-layer      { fill: rgba(34,211,238,calc(.08 + var(--i) * .06)); stroke: rgba(34,211,238,.45); stroke-width: 1.2; }
.dg-hub        { fill: rgba(240,180,41,.1); stroke: var(--gold); stroke-width: 1.6; }
.dg-hub--sm    { fill: var(--page-bg); }
.dg-tag        { fill: none; stroke: rgba(16,224,160,.5); stroke-width: 1.3; }
.dg-ring       { fill: none; stroke: var(--page-hair); stroke-width: 1; }
.dg-spoke      { stroke: var(--page-hair); stroke-width: 1; }
.dg-poly       { fill: rgba(240,180,41,.12); stroke: var(--gold); stroke-width: 1.6; }
.dg-arc        { stroke: var(--cyber); stroke-width: 2; stroke-opacity: .8; }
:root[data-theme="light"] .dg-layer { fill: rgba(8,145,178,calc(.07 + var(--i) * .05)); }

/* Diagrams need room to breathe on small screens */
@media (max-width: 640px) {
  .dg { min-width: 420px; }
  .dg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dg-scroll::after {
    content: "Scroll to see the full diagram →";
    display: block; padding: .5rem .2rem 0;
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--page-mute);
  }
}

/* --- Skip link ----------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: .8rem 1.2rem; background: var(--gold); color: #04060e;
  font-size: .82rem; font-weight: 600; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* --- Hero identity block ------------------------------------------------- */
.hero-name {
  font-size: clamp(2.3rem, 6.2vw, 5.1rem);
  line-height: .96; letter-spacing: -.028em;
}
.hero-def { max-width: 64ch; color: var(--page-soft); }

/* --- Service line cards (home) ------------------------------------------- */
.linegrid { display: grid; gap: 1px; background: var(--page-hair);
  border: 1px solid var(--page-hair); border-radius: var(--r-md); overflow: hidden; }
.linecard {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(.9rem, 2vw, 1.6rem);
  padding: clamp(1.05rem, 2.2vw, 1.5rem) clamp(1rem, 2.2vw, 1.6rem);
  background: var(--page-bg);
  transition: background .3s var(--ease), padding-left .3s var(--ease);
}
.linecard:hover { background: var(--page-panel-2); padding-left: calc(clamp(1rem, 2.2vw, 1.6rem) + .5rem); }
.linecard-num {
  font-family: Archivo, Outfit, sans-serif; font-stretch: 118%;
  font-size: 1.1rem; font-weight: 700; color: transparent;
  -webkit-text-stroke: 1px var(--gold); flex: none;
}
.linecard:hover .linecard-num { color: var(--gold); }
.linecard-title { display: block; font-family: Archivo, Outfit, sans-serif; font-stretch: 112%;
  font-size: clamp(1rem, 1.7vw, 1.2rem); font-weight: 500; letter-spacing: -.01em; color: var(--page-ink); }
.linecard-desc { display: block; margin-top: .3rem; font-size: .86rem; line-height: 1.6; color: var(--page-mute); }
.linecard-go { color: var(--gold); opacity: 0; transform: translateX(-6px);
  transition: all .3s var(--ease); flex: none; }
.linecard-go svg { width: 18px; height: 18px; }
.linecard:hover .linecard-go, .linecard:focus-visible .linecard-go { opacity: 1; transform: none; }

/* --- Partner chips (home strip) ------------------------------------------ */
.partner-chip {
  display: block; padding: 1.1rem 1.2rem;
  border: 1px solid var(--page-hair); border-radius: var(--r-md);
  background: var(--page-panel);
  transition: all .35s var(--ease);
}
.partner-chip:hover { border-color: rgba(240,180,41,.5); transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(240,180,41,.12); }
.partner-chip b { display: block; font-family: Archivo, Outfit, sans-serif; font-stretch: 112%;
  font-size: .98rem; font-weight: 500; color: var(--page-ink); }
.partner-chip span { display: block; margin-top: .25rem; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--page-mute); }

@media (max-width: 720px) {
  .linecard { grid-template-columns: auto 1fr; }
  .linecard-go { display: none; }
}

/* --- Sector plates (replaces the pictorial scene cards) ------------------ */
.plate {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  border: 1px solid var(--page-hair); border-radius: var(--r-md);
  background: var(--page-bg);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.plate::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--c, var(--gold)), transparent);
}
.plate::after {
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--crgb, 240,180,41), .16), transparent 68%);
  opacity: 0; transition: opacity .45s var(--ease); pointer-events: none;
}
.plate:hover { transform: translateY(-4px); border-color: rgba(var(--crgb, 240,180,41), .5);
  box-shadow: 0 22px 60px rgba(var(--crgb, 240,180,41), .13); }
.plate:hover::after { opacity: 1; }
.plate-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.plate-idx {
  font-family: Archivo, Outfit, sans-serif; font-stretch: 118%;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--crgb, 240,180,41), .55);
  transition: color .4s var(--ease);
}
.plate:hover .plate-idx { color: rgba(var(--crgb, 240,180,41), .16); }
.plate-facts { display: grid; gap: .5rem; margin-top: auto; padding-top: 1.1rem; }
.plate-facts li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: .8rem; line-height: 1.5; color: var(--page-soft);
}
.plate-facts li::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: .5rem;
  border-radius: 1px; background: var(--c, var(--gold));
}


/* ==========================================================================
   16. RESPONSIVE HARDENING (deep-audit pass)
   ========================================================================== */

/* Nav must be able to shrink: let the wordmark truncate rather than push the
   burger off-screen below ~360px. */
.nav-inner { min-width: 0; }
.brand     { min-width: 0; }
.brand-txt { min-width: 0; overflow: hidden; }
.brand-name {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-tools { flex: none; }

/* Touch targets: nothing interactive below 44px on coarse pointers. */
@media (pointer: coarse) {
  .icon-btn      { width: 44px; height: 44px; }
  .chip          { min-height: 44px; }
  .corridor      { min-height: 52px; }
  .stepper-node  { min-height: 44px; }
  .tab           { min-height: 44px; }
  .seg button    { min-height: 40px; }
  .tl-node       { width: 26px; height: 26px; }
  .more-btn      { min-height: 44px; }
  .swatch        { min-height: 48px; }
  .btn--sm       { padding-block: .85rem; }

  /* The inline "read more" arrows are only ~19px tall — too small to hit
     reliably. Grow the box, not the type. */
  .x-more        { min-height: 44px; }

  /* The nav dropdowns open on :hover, which a touch device has no way to
     trigger — tapping the parent just navigates. Above 1180px (a large tablet
     in landscape) that left The Firm and Capabilities menus unreachable. Any
     touch device now gets the drawer, which lists every page. */
  .nav-links { display: none; }
  .burger    { display: grid; }
  /* A 26px dot still misses the 44px target, so extend the hit area with a
     transparent pseudo-element rather than making the dot look clumsy. */
  .tl-node::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
}

/* --- Reading measure -----------------------------------------------------
   The shell is 1280px, so an uncapped paragraph runs ~150 characters per line
   on a large screen — roughly double a comfortable measure. max-width only
   binds where a line would otherwise be too long, so paragraphs already in
   narrow columns are untouched. */
p.t-lead, p.t-body, .x-inner p, .acc-body-inner p { max-width: 74ch; }
.quote, blockquote { max-width: 62ch; }

/* Wide diagrams and tables scroll inside their own container instead of being
   clipped by .diagram{overflow:hidden}. */
.diagram { overflow: visible; }
.diagram > .dtable-scroll,
.diagram > .dg-scroll,
.diagram > .chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diagram > svg { border-radius: 0 0 var(--r-md) var(--r-md); }

@media (max-width: 860px) {
  /* 2x2 positioning matrix cannot hold four quadrants of prose on a phone */
  .matrix { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; }
  .matrix-quad { position: static; width: auto; height: auto; border: 0; }
  .matrix-axis, .matrix-label { display: none; }
  .matrix-quad + .matrix-quad { border-top: 1px solid var(--page-hair); }
}
@media (max-width: 560px) {
  .matrix { grid-template-columns: 1fr; }

  /* bar chart: let it scroll rather than crush five columns */
  .chart-scroll .barchart { min-width: 430px; }

  /* first and last timeline labels were clipped by the shell gutter
     (edge anchoring itself now lives in the base .tl-label rules) */
  .tl-track { margin-inline: 12px; }

  .nodemap-wrap { overflow-x: auto; }
  .nodemap-wrap svg { min-width: 620px; }
}

.palette-head { display: flex; align-items: center; gap: .5rem; padding-right: .7rem;
  border-bottom: 1px solid var(--panel-line); }
.palette-head input { border-bottom: 0; flex: 1 1 auto; }
.palette-head .icon-btn { flex: none; }

@media (max-width: 560px) {
  /* two .btn--lg CTAs side by side exceed a phone's width and get clipped */
  .btn--lg { width: 100%; justify-content: center; padding: 1.05rem 1.4rem; font-size: .82rem; }
  .flex.wrap.gap-3 > .btn--lg { flex: 1 1 100%; }
}

/* ==========================================================================
   17. EXPANDABLE DETAIL — the site-wide "know more" primitive
   One JS module ([data-xpand]) drives three skins: stat tiles, rows and cards.
   ========================================================================== */
.x { position: relative; }
.x-head {
  display: flex; align-items: center; gap: .9rem;
  width: 100%; text-align: left; cursor: pointer;
  transition: color .3s var(--ease);
}
.x-head:hover { color: var(--gold); }
.x-grow { flex: 1 1 auto; min-width: 0; }
.x-sign {
  flex: none; position: relative; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--page-hair); display: grid; place-items: center;
  transition: all .35s var(--ease);
}
.x-sign::before, .x-sign::after {
  content: ""; position: absolute; background: currentColor; border-radius: 1px;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.x-sign::before { width: 11px; height: 1.5px; }
.x-sign::after  { width: 1.5px; height: 11px; }
.x-head:hover .x-sign { border-color: var(--gold); background: rgba(240,180,41,.1); }
.x.is-open .x-sign { border-color: var(--gold); color: var(--gold); background: rgba(240,180,41,.14); }
.x.is-open .x-sign::after { transform: rotate(90deg); opacity: 0; }
.x-body { overflow: hidden; max-height: 0; transition: max-height .5s var(--ease); }
.x-inner { padding-top: .9rem; padding-bottom: .2rem; }
.x-hint {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--page-mute); transition: color .3s var(--ease);
}
.x-head:hover .x-hint, .x.is-open .x-hint { color: var(--gold); }

/* --- skin: stat tile ------------------------------------------------------ */
.xstat { padding: clamp(1.1rem,2vw,1.5rem); align-self: start; }
.xstat .x-head { align-items: flex-start; }
.xstat .x-inner { border-top: 1px solid var(--page-hair); margin-top: .9rem; }
.xstat .stat-label { margin-top: .35rem; }

/* --- skin: row (list of expandable lines) --------------------------------- */
.xrow { border-bottom: 1px solid var(--page-hair); }
.xrow:last-child { border-bottom: 0; }
.xrow .x-head { padding: clamp(1rem,2vw,1.35rem) clamp(.6rem,1.4vw,1rem); }
.xrow .x-inner { padding: 0 clamp(.6rem,1.4vw,1rem) clamp(1.1rem,2vw,1.5rem); }
.xrow-num {
  font-family: Archivo, Outfit, sans-serif; font-stretch: 118%;
  font-size: 1rem; font-weight: 700; flex: none; width: 2rem;
  color: transparent; -webkit-text-stroke: 1px var(--gold);
}
.xrow.is-open .xrow-num, .xrow .x-head:hover .xrow-num { color: var(--gold); }
.xrow-title {
  display: block; font-family: Archivo, Outfit, sans-serif; font-stretch: 112%;
  font-size: clamp(.98rem,1.6vw,1.16rem); font-weight: 500; letter-spacing: -.01em;
  color: var(--page-ink);
}
.xrow-sub { display: block; margin-top: .25rem; font-size: .82rem; color: var(--page-mute); }

/* --- skin: card ----------------------------------------------------------- */
.xcard { padding: clamp(1.2rem,2.2vw,1.7rem); align-self: start; }
.xcard .x-head { align-items: flex-start; }
.xcard .x-inner { border-top: 1px solid var(--page-hair); margin-top: .9rem; }

/* the little "more" affordance inside an expanded body */
.x-more {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem;
  font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}
.x-more svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.x-more:hover svg { transform: translateX(3px); }

/* --- home sub-nav --------------------------------------------------------- */
.subnav {
  display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none;
  border-block: 1px solid var(--page-hair);
  background: var(--page-panel);
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none; padding: .85rem 1.05rem;
  font-size: .78rem; letter-spacing: .04em; color: var(--page-soft);
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: all .3s var(--ease);
}
.subnav a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* brand is plain text on the page it would link to */
span.brand { cursor: default; }

/* wizard step rail: each step explains itself */
.wiz-step span { display: flex; flex-direction: column; gap: .15rem; }
.wiz-note {
  font-style: normal; font-size: .68rem; letter-spacing: .02em; text-transform: none;
  color: var(--page-mute); max-width: 20ch; line-height: 1.4;
}
.wiz-step.is-active .wiz-note { color: var(--page-soft); }
@media (max-width: 720px) { .wiz-note { display: none; } }
/* On a phone the four brief steps overflow their rail, which is a silent
   horizontal scroller — you cannot tell steps 3 and 4 exist. Drop the connecting
   lines and let the steps wrap so the whole sequence is visible. The !important
   overrides the inline overflow-x:auto that makes it a scroller on wider screens. */
@media (max-width: 560px) {
  .wiz-rail { flex-wrap: wrap; row-gap: .55rem; column-gap: .9rem; overflow-x: visible !important; }
  .wiz-line { display: none; }
  .wiz-step { flex: 0 0 auto; }
}