/* ==========================================================================
   GEMs3.0 — Institutional Allocation Infrastructure
   Shared stylesheet
   ========================================================================== */

:root{
  /* --- palette --- */
  --bg-dark:      #04120f;
  --bg-dark-2:    #0d1f16;
  --bg-light:     #f5f4f0;
  --panel-light:  #ffffff;

  --ink:          #11140f;
  --ink-soft:     #4c5346;
  --ink-faint:    #7a8072;

  --paper:        #f4f5f1;
  --paper-soft:   rgba(245,244,240,.72);

  --line-dark:    rgba(255,255,255,.10);
  --line-dark-2:  rgba(255,255,255,.16);
  --line-light:   rgba(17,20,15,.14);

  --green:        #8fe23f;
  --green-deep:   #5da621;
  --green-on-light: #356711;
  --green-dim:    #6f9b46;
  --green-glow:   rgba(143,226,63,.38);
  --green-wash:   rgba(143,226,63,.08);

  --white:        #f7f8f4;

  /* --- type --- */
  --font-display: 'Jost', 'Avenir Next', 'Avenir', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Jost', 'Avenir Next', 'Avenir', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Jost', 'Avenir Next', 'Avenir', 'Helvetica Neue', Arial, sans-serif;

  /* --- layout --- */
  --wrap: 1600px;
  --edge: clamp(24px, 4.5vw, 96px);
  --radius: 8px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; height:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg-light);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body > main{ flex:1 0 auto; }
body > .site-footer{ flex:none; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:800; letter-spacing:-.01em; color:inherit; }
p{ margin:0; }
button{ font:inherit; }

:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:2px; }
.section--light :focus-visible,
.section--panel :focus-visible{ outline-color:var(--green-on-light); }

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--edge);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------- */
/* Eyebrow labels                                                        */
/* --------------------------------------------------------------------- */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--green-on-light);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:28px; height:2px;
  background:var(--green-on-light);
  flex:none;
}
.eyebrow.on-dark{ color:var(--green); }
.eyebrow.on-dark::before{ background:var(--green); }

/* --------------------------------------------------------------------- */
/* Buttons                                                                */
/* --------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.86rem 1.5rem;
  border:1.5px solid var(--green);
  border-radius:var(--radius);
  color:var(--green);
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  background:transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; transition:transform .18s ease; flex:none; }
.btn:hover{ background:var(--green); color:#0a0d06; transform:translateY(-1px); }
.btn:hover svg{ transform:translateX(3px); }

/* Outline buttons on light backgrounds need the darker green, or the
   border/label are nearly invisible at rest (bright green on off-white
   measures ~1.5:1 contrast — far below the 4.5:1 minimum for text). */
.section--light .btn:not(.btn--solid),
.section--panel .btn:not(.btn--solid){
  color:var(--green-on-light);
  border-color:var(--green-on-light);
}
.section--light .btn:not(.btn--solid):hover,
.section--panel .btn:not(.btn--solid):hover{
  background:var(--green-on-light);
  color:var(--white);
}

.btn--solid{ background:var(--green); color:#0a0d06; }
.btn--solid:hover{ background:var(--green-deep); border-color:var(--green-deep); color:#08130a; }

.btn--ghost-dark{ border-color:var(--line-light); color:var(--ink); }
.btn--ghost-dark:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); }

/* --------------------------------------------------------------------- */
/* Header                                                                 */
/* --------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,13,10,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  color:var(--white);
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.18rem;
  letter-spacing:-.01em;
}
.brand .logo-mark{ width:36px; height:36px; object-fit:contain; flex:none; }

.nav-primary{ display:flex; align-items:center; gap:40px; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  color:#c7cbc1;
  font-size:.94rem;
  font-weight:500;
  position:relative;
  padding:6px 0;
  transition:color .15s ease;
}
.nav-links a:hover{ color:var(--white); }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--green); transition:right .22s ease;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{ right:0; }
.nav-links a[aria-current="page"]{ color:var(--white); }

.nav-divider{ width:1px; height:20px; background:var(--line-dark-2); flex:none; }
.nav-cta{
  color:var(--green);
  font-size:.95rem;
  font-weight:600;
  white-space:nowrap;
  transition:opacity .18s ease;
}
.nav-cta:hover{ opacity:.75; }

.nav-toggle{
  display:none; background:none; border:0; color:var(--white); padding:8px; cursor:pointer;
}
.nav-toggle svg{ width:24px; height:24px; }

@media (max-width:860px){
  .nav-toggle{ display:inline-flex; }
  .nav-primary{
    position:fixed; inset:76px 0 0 0; height:calc(100vh - 76px);
    background:var(--bg-dark); flex-direction:column; align-items:flex-start;
    padding:32px var(--edge); gap:28px;
    transform:translateX(100%); transition:transform .25s ease;
  }
  .nav-primary.open{ transform:translateX(0); }
  .nav-links{ flex-direction:column; align-items:flex-start; gap:22px; }
  .nav-links a{ font-size:1.1rem; }
  .nav-divider{ display:none; }
  .nav-cta{ font-size:1.1rem; }
}

/* --------------------------------------------------------------------- */
/* Section scaffolding                                                   */
/* --------------------------------------------------------------------- */
.section{ padding-block:clamp(56px, 9vw, 108px); }
.section--compact{ padding-block:clamp(45px, 7.2vw, 86px); }
.section--dark{ background:var(--bg-dark); color:var(--white); }
.section--dark-alt{ background:var(--bg-dark-2); color:var(--white); }
.section--light{ background:var(--bg-light); color:var(--ink); }
.section--panel{ background:var(--panel-light); color:var(--ink); }

.divider{ border:0; border-top:1px solid var(--line-dark); margin:0; }
.divider--light{ border-top:1px solid var(--line-light); }

/* --------------------------------------------------------------------- */
/* Hero (home)                                                           */
/* --------------------------------------------------------------------- */
.hero{
  position:relative;
  background:var(--bg-dark);
  color:var(--white);
  overflow:hidden;
  padding-block:clamp(64px,11vw,132px);
}
.hero__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
.hero__wordmark{
  font-size:clamp(3rem, 7.2vw, 5.2rem);
  line-height:.98;
  color:var(--white);
}
.hero__tag{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.3rem, 2.4vw, 1.85rem);
  color:var(--green);
  margin-top:14px;
}
.hero__lede{
  margin-top:26px;
  max-width:46ch;
  font-size:1.06rem;
  color:#cdd2c6;
}
.hero__lede + .hero__lede{ margin-top:14px; }
.hero__actions{ margin-top:34px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.hero__foot{
  margin-top:40px;
  font-size:.84rem;
  color:var(--ink-faint);
  max-width:40ch;
  line-height:1.6;
}
.hero__stage{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:340px;
}

.dotfield{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(143,226,63,.16) 1px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 72% 40%, #000 0%, transparent 72%);
  mask-image:radial-gradient(ellipse 70% 60% at 72% 40%, #000 0%, transparent 72%);
  pointer-events:none;
}
/* Home hero gets a brighter, slowly drifting dot field directly behind the
   cube — more presence than the subtle texture used on inner-page heroes. */
.hero .dotfield{
  background-image:radial-gradient(rgba(159,236,90,.4) 1.4px, transparent 1.9px);
  background-size:24px 24px;
  animation:dotDrift 44s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 84% 78% at 74% 46%, #000 0%, transparent 78%);
  mask-image:radial-gradient(ellipse 84% 78% at 74% 46%, #000 0%, transparent 78%);
}
/* Inner-page heroes get the same slow drift, a little more subdued, so the
   whole site feels consistently alive rather than just the homepage. */
.page-hero .dotfield{
  animation:dotDrift 60s linear infinite;
}
@keyframes dotDrift{
  from{ background-position:0 0; }
  to{ background-position:-48px -48px; }
}
@media (prefers-reduced-motion: reduce){
  .hero .dotfield, .page-hero .dotfield{ animation:none; }
}

/* --------------------------------------------------------------------- */
/* Glass cube (signature element) — real 3D geometry, not a flat image   */
/* --------------------------------------------------------------------- */
.cube-stage{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  perspective:1400px;
}
.cube-glow{
  position:absolute; width:92%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(159,236,90,.62) 0%, rgba(143,226,63,.18) 42%, transparent 72%);
  filter:blur(8px);
  z-index:0;
  animation:glowPulse 5s ease-in-out infinite;
}
.cube-floor{
  position:absolute; bottom:2%; width:64%; height:26px; left:50%; translate:-50% 0;
  background:radial-gradient(ellipse, rgba(143,226,63,.36) 0%, transparent 72%);
  filter:blur(2px);
  z-index:0;
}

.cube{
  --s: 269px;
  position:relative; z-index:1;
  width:var(--s); height:var(--s);
  transform-style:preserve-3d;
  animation:cubeSpin 18s ease-in-out infinite;
  /* NOTE: no filter/opacity/mask on this element — any of those force the
     browser to flatten transform-style:preserve-3d, which turns the real
     3D cube into a flat 2D square. Glow/shadow lives on siblings instead. */
}
.cube--lg{ --s: 260px; }
.cube__face{
  position:absolute; inset:0;
  overflow:hidden;
  border:1.5px solid rgba(190,255,140,1);
  background:linear-gradient(155deg, rgba(190,255,140,.10), rgba(190,255,140,.01) 55%, rgba(190,255,140,.06));
  box-shadow:
    inset 0 0 50px rgba(159,236,90,.22),
    0 0 46px rgba(159,236,90,.24);
}
.cube__face--front{ transform:translateZ(calc(var(--s) / 2)); }
.cube__face--back{  transform:rotateY(180deg) translateZ(calc(var(--s) / 2)); filter:brightness(.8); }
.cube__face--right{ transform:rotateY(90deg) translateZ(calc(var(--s) / 2)); filter:brightness(.9); }
.cube__face--left{  transform:rotateY(-90deg) translateZ(calc(var(--s) / 2)); filter:brightness(.9); }
.cube__face--top{   transform:rotateX(90deg) translateZ(calc(var(--s) / 2)); filter:brightness(1.35); }
.cube__face--bottom{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2)); filter:brightness(.65); }
.cube__face::after{
  content:"";
  position:absolute; inset:-40%;
  background:linear-gradient(120deg, transparent 38%, rgba(255,255,255,.4) 49%, transparent 60%);
  background-size:220% 220%;
  animation:glintSweep 6s ease-in-out infinite;
  mix-blend-mode:screen;
  pointer-events:none;
}
.cube__face--back::after,
.cube__face--left::after,
.cube__face--bottom::after{ animation-delay:-2.8s; }

@keyframes cubeSpin{
  0%{   transform:rotateX(-22deg) rotateY(0deg); }
  25%{  transform:rotateX(16deg)  rotateY(90deg); }
  50%{  transform:rotateX(24deg)  rotateY(180deg); }
  75%{  transform:rotateX(-14deg) rotateY(270deg); }
  100%{ transform:rotateX(-22deg) rotateY(360deg); }
}
@keyframes glintSweep{
  0%{   background-position:-30% -30%; }
  50%{  background-position:130% 130%; }
  100%{ background-position:-30% -30%; }
}
@keyframes glowPulse{
  0%, 100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.06); }
}
@media (prefers-reduced-motion: reduce){
  .cube{ animation:none; transform:rotateX(-18deg) rotateY(-26deg); }
  .cube-glow{ animation:none; }
  .cube__face::after{ animation:none; opacity:.25; }
}
@media (min-width:1400px){
  .cube{ --s:329px; }
  .cube--lg{ --s: 320px; }
}
@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__stage{ min-height:260px; order:-1; }
  .cube{ --s:224px; }
}

/* --------------------------------------------------------------------- */
/* Quote break — dark statement section with dotted world map            */
/* --------------------------------------------------------------------- */
.quote-break{
  position:relative;
  background:rgb(4, 18, 15);
  border-top:1px solid rgba(255,255,255,.05);
  color:var(--white);
  overflow:hidden;
  padding-block:clamp(51px, 7.2vw, 90px);
}
.quote-break .wrap{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.quote-mark{
  font-family:var(--font-display); font-size:3.4rem; line-height:1;
  color:var(--green); opacity:.9; margin-bottom:4px;
}
.quote-lines p{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.15rem, 2vw, 1.5rem); line-height:1.5;
  color:#d3d8c9;
}
.quote-lines p.accent{ color:var(--green); margin-top:16px; }
.quote-map{
  width:100%; height:auto; opacity:.9; justify-self:end;
}
@media (max-width:860px){
  .quote-break .wrap{ grid-template-columns:1fr; }
  .quote-map{ max-width:340px; margin:0 auto; justify-self:center; }
}

/* --------------------------------------------------------------------- */
/* Duo grid heading treatment matching the reference layout              */
/* --------------------------------------------------------------------- */
.duo-col .col-head{ position:relative; padding-bottom:18px; margin-bottom:24px; }
.duo-col .col-head h3{ font-size:clamp(1.3rem, 2.2vw, 1.65rem); }
.duo-col .col-head::after{
  content:""; position:absolute; left:0; bottom:0; width:32px; height:2px; background:var(--green);
}
.duo-col .col-intro{ color:#cdd2c6; font-size:.98rem; margin:0 0 22px; max-width:44ch; }

/* --------------------------------------------------------------------- */
/* Two-column text split (Who We Are)                                    */
/* --------------------------------------------------------------------- */
.split{
  display:grid; grid-template-columns:.85fr 1fr; gap:64px;
}
.split__lead h2{
  font-size:clamp(1.7rem, 3vw, 2.35rem);
  line-height:1.18;
}
.split__body{
  border-left:1px solid var(--line-light);
  padding-left:56px;
  display:flex; flex-direction:column; gap:20px;
  font-size:1.08rem;
  color:var(--ink-soft);
  max-width:56ch;
}
.section--dark .split__body{ border-left-color:var(--line-dark); color:#cdd2c6; }

@media (max-width:860px){
  .split{ grid-template-columns:1fr; gap:32px; }
  .split__body{ border-left:0; padding-left:0; border-top:1px solid var(--line-light); padding-top:26px; }
  .section--dark .split__body{ border-top-color:var(--line-dark); }
}

/* --------------------------------------------------------------------- */
/* Page hero — compact dark intro used on every inner page, each with    */
/* its own animated motif that reflects that page's subject.             */
/* --------------------------------------------------------------------- */
.page-hero{
  position:relative;
  background:var(--bg-dark);
  color:var(--white);
  overflow:hidden;
  padding-block:clamp(52px, 8vw, 92px);
  border-bottom:1px solid var(--line-dark-2);
  box-shadow:0 24px 40px -32px rgba(0,0,0,.6);
}
.page-hero .wrap{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;
}
.page-hero h1{
  font-size:clamp(1.8rem, 3.4vw, 2.55rem);
  line-height:1.16;
  margin-top:14px;
}
.page-hero__intro{
  margin-top:18px; color:#cdd2c6; max-width:48ch; font-size:1.02rem; line-height:1.6;
}
.page-hero--compact .wrap{ grid-template-columns:1fr; }
.page-hero--compact .page-hero__stage{ display:none; }
.page-hero--split-tight{ padding-block:clamp(36px, 5vw, 56px); }

.page-hero__stage{
  position:relative;
  min-height:200px;
  display:flex; align-items:center; justify-content:center;
}
.motif{ width:min(78%, 300px); height:auto; overflow:visible; }

/* Shared motif primitives ---------------------------------------------- */
.motif__node{ fill:var(--green); }
.motif__node--core{ fill:#eaffd6; filter:drop-shadow(0 0 10px rgba(159,236,90,.8)); }
.motif__line{ stroke:rgba(159,236,90,.45); stroke-width:1.25; fill:none; }
.motif__ring{ stroke:rgba(159,236,90,.55); stroke-width:1.25; fill:none; }
.motif__panel{ fill:rgba(159,236,90,.14); stroke:rgba(190,255,140,.7); stroke-width:1; }
.motif__bar{ fill:rgba(159,236,90,.22); stroke:rgba(190,255,140,.85); stroke-width:1.25; }

@keyframes motifPulse{ 0%, 100%{ opacity:.55; } 50%{ opacity:1; } }
@keyframes motifFloat{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes motifRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes motifRotateRev{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } }
@keyframes ringExpand{
  0%{ transform:scale(.35); opacity:.85; }
  100%{ transform:scale(1.7); opacity:0; }
}
@keyframes pulseTravel{
  0%{ transform:translateX(0); opacity:0; }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ transform:translateX(var(--travel, 160px)); opacity:0; }
}
@keyframes barGrow{
  0%, 100%{ transform:scaleY(1); }
  50%{ transform:scaleY(1.12); }
}

/* Who We Are — converging network ("intersection of investment, markets,
   data and technology") */
.motif--converge .motif__node{ animation:motifPulse 3.2s ease-in-out infinite; }
.motif--converge .motif__node:nth-of-type(2){ animation-delay:.3s; }
.motif--converge .motif__node:nth-of-type(3){ animation-delay:.6s; }
.motif--converge .motif__node:nth-of-type(4){ animation-delay:.9s; }
.motif--converge .motif__node:nth-of-type(5){ animation-delay:1.2s; }
.motif--converge .motif__node--core{ animation:motifPulse 2.4s ease-in-out infinite; transform-origin:150px 150px; }

/* Our Focus — four pillars */
.motif--pillars .motif__bar{ transform-origin:bottom; animation:barGrow 3.6s ease-in-out infinite; }
.motif--pillars .motif__bar:nth-of-type(2){ animation-delay:.4s; }
.motif--pillars .motif__bar:nth-of-type(3){ animation-delay:.8s; }
.motif--pillars .motif__bar:nth-of-type(4){ animation-delay:1.2s; }

/* Institutional Markets — orbiting ecosystem */
.motif--orbit .motif__orbit-a{ transform-origin:150px 150px; animation:motifRotate 26s linear infinite; }
.motif--orbit .motif__orbit-b{ transform-origin:150px 150px; animation:motifRotateRev 40s linear infinite; }
.motif--orbit .motif__node--core{ animation:motifPulse 2.6s ease-in-out infinite; }

/* News — broadcast signal */
.motif--signal .motif__ring--ping{
  transform-origin:150px 150px;
  animation:ringExpand 3.2s ease-out infinite;
}
.motif--signal .motif__ring--delay1{ animation-delay:1.07s; }
.motif--signal .motif__ring--delay2{ animation-delay:2.13s; }
.motif--signal .motif__node--core{ animation:motifPulse 2s ease-in-out infinite; }

/* Research — layered reports */
.motif--layers .motif__panel{ animation:motifFloat 4.5s ease-in-out infinite; }
.motif--layers .motif__panel--1{ animation-delay:0s; opacity:.55; }
.motif--layers .motif__panel--2{ animation-delay:.5s; opacity:.78; }
.motif--layers .motif__panel--3{ animation-delay:1s; opacity:1; }

/* Institutional Engagement — connecting nodes */
.motif--connect .motif__node{ animation:motifPulse 3s ease-in-out infinite; }
.motif--connect .motif__pulse{ fill:#eaffd6; animation:pulseTravel 2.8s ease-in-out infinite; }
.motif--connect .motif__pulse--b{ animation-delay:1.4s; }

/* Contact — single ping */
.motif--ping-solo .motif__ring--ping{ transform-origin:100px 100px; animation:ringExpand 3.2s ease-out infinite; }
.motif--ping-solo .motif__ring--delay1{ animation-delay:1.6s; }
.motif--ping-solo .motif__node--core{ animation:motifPulse 2.2s ease-in-out infinite; }

@media (max-width:860px){
  .page-hero .wrap{ grid-template-columns:1fr; }
  .page-hero__stage{ min-height:170px; order:-1; }
  .motif{ width:min(58%, 220px); }
}

/* --------------------------------------------------------------------- */
/* Plain list (Our Focus / Institutional Markets)                        */
/* --------------------------------------------------------------------- */
.page-head{ max-width:64ch; margin-bottom:56px; }
.page-head h1{
  font-size:clamp(1.9rem, 3.6vw, 2.7rem);
  line-height:1.16;
}

.plain-list{ border-top:1px solid var(--line-dark); }
.section--light .plain-list,
.section--panel .plain-list{ border-top-color:var(--line-light); }

.plain-list li{
  border-bottom:1px solid var(--line-dark);
  transition:border-color .25s ease;
}
.section--light .plain-list li,
.section--panel .plain-list li{ border-bottom-color:var(--line-light); }
.plain-list li:hover{ border-bottom-color:var(--green); }

.plain-list a, .plain-list span.item{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.05rem, 1.8vw, 1.45rem);
  transition:color .2s ease;
}
.plain-list a{ cursor:default; }
.plain-list .num{
  font-family:var(--font-mono); font-weight:400; font-size:.85rem;
  color:var(--green); margin-right:22px; flex:none;
  transition:color .25s ease, transform .25s ease;
}
.plain-list li{ display:flex; }
.plain-list .row{
  position:relative;
  display:flex; align-items:baseline; width:100%;
  padding:26px 8px 26px 2px;
  cursor:default;
  border-radius:6px;
  transition:padding-left .28s cubic-bezier(.22,1,.36,1), background-color .28s ease;
}
.plain-list .row::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(143,226,63,.10), rgba(143,226,63,0) 75%);
  opacity:0;
  border-radius:6px;
  transition:opacity .28s ease;
  pointer-events:none;
}
.plain-list li:hover .row{ padding-left:16px; }
.plain-list li:hover .row::before{ opacity:1; }
.plain-list li:hover .num{ color:var(--white); transform:scale(1.18); }
.section--light .plain-list li:hover .num,
.section--panel .plain-list li:hover .num{ color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  .plain-list .row, .plain-list .row::before, .plain-list .num{ transition:none; }
}

.list-two-col{
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
}
@media (max-width:860px){
  .list-two-col{ grid-template-columns:1fr; gap:8px; }
}

/* --------------------------------------------------------------------- */
/* Duo grid — two labelled columns side by side (home page sections)     */
/* --------------------------------------------------------------------- */
.duo-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
}
.duo-grid .duo-col + .duo-col{
  border-left:1px solid var(--line-dark);
  padding-left:56px;
}
.duo-col h3{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.2rem, 2vw, 1.55rem);
  margin-bottom:22px;
}
.duo-col .plain-list{ margin-top:0; }
.duo-col p.teaser-copy{
  color:var(--ink-soft); max-width:46ch; margin:16px 0 26px; font-size:1.02rem;
}
.section--dark .duo-col p.teaser-copy{ color:#cdd2c6; }
@media (max-width:860px){
  .duo-grid{ grid-template-columns:1fr; gap:44px; }
  .duo-grid .duo-col + .duo-col{ border-left:0; padding-left:0; border-top:1px solid var(--line-dark); padding-top:36px; }
}

/* --------------------------------------------------------------------- */
/* Teaser duo — Research / Institutional Engagement (home page)          */
/* --------------------------------------------------------------------- */
.teaser-duo{
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
}
.teaser-duo > div + div{
  border-left:1px solid var(--line-light);
  padding-left:56px;
}
.teaser-duo h3{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.25rem, 2.1vw, 1.6rem);
  margin-bottom:4px;
}
@media (max-width:860px){
  .teaser-duo{ grid-template-columns:1fr; gap:40px; }
  .teaser-duo > div + div{ border-left:0; padding-left:0; border-top:1px solid var(--line-light); padding-top:32px; }
}

/* --------------------------------------------------------------------- */
/* Principle / dark break                                                */
/* --------------------------------------------------------------------- */
.principle{
  position:relative;
  background:var(--bg-dark);
  color:var(--white);
  overflow:hidden;
  padding-block:clamp(80px, 12vw, 148px);
  min-height:78vh;
  display:flex; align-items:center;
}
.principle__stage{
  position:absolute; right:-6%; top:50%; translate:0 -50%;
  width:min(52vw, 620px); aspect-ratio:1;
  z-index:0; opacity:.92;
}
.principle .wrap{ position:relative; z-index:2; }
.principle__body{ max-width:30ch; }
.principle__body p{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.6rem, 3.4vw, 2.6rem);
  line-height:1.24;
  letter-spacing:-.01em;
}
.principle__body p.dim{ color:#aab2a1; }
.principle__body p.accent{ color:var(--green); }
.principle__closing{
  margin-top:30px;
  font-family:var(--font-mono);
  font-size:1rem;
  color:#e7ebe0;
  border-top:1px solid var(--line-dark);
  padding-top:26px;
  max-width:42ch;
}
@media (max-width:940px){
  .principle__stage{ position:relative; right:auto; top:auto; translate:none; width:min(70vw,320px); margin:0 auto 40px; }
  .principle{ flex-direction:column; padding-top:56px; }
  .principle__body{ max-width:none; }
}

/* --------------------------------------------------------------------- */
/* Engagement                                                            */
/* --------------------------------------------------------------------- */
.engage{
  display:grid; grid-template-columns:.9fr 1fr; gap:64px; align-items:start;
}
.engage__copy p{ color:var(--ink-soft); font-size:1.08rem; max-width:52ch; }
.engage__actions{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.engage__actions .btn{ width:100%; justify-content:space-between; padding:1.05rem 1.5rem; font-size:1.02rem; }
@media (max-width:860px){
  .engage{ grid-template-columns:1fr; gap:36px; }
}

/* --------------------------------------------------------------------- */
/* Contact                                                               */
/* --------------------------------------------------------------------- */
.contact-block{
  min-height:58vh;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
}
.contact-block .eyebrow{ margin-bottom:22px; }
.contact-block__email{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem, 6vw, 3.6rem);
  color:var(--ink);
  letter-spacing:-.01em;
  border-bottom:2px solid transparent;
  transition:border-color .18s ease, color .18s ease;
}
.contact-block__email:hover{ color:var(--green-on-light); border-color:var(--green-on-light); }
.contact-block__note{
  margin-top:22px; color:var(--ink-soft); max-width:44ch; font-size:1rem;
}

/* --------------------------------------------------------------------- */
/* Footer                                                                 */
/* --------------------------------------------------------------------- */
.site-footer{ background:var(--bg-dark); color:#cfd4c8; }
.site-footer .wrap{
  padding-block:52px;
  display:grid; grid-template-columns:1.3fr 1fr; gap:40px;
}
.footer__brand{ display:flex; align-items:flex-start; gap:14px; }
.footer__brand .logo-mark{ width:34px; height:34px; object-fit:contain; flex:none; margin-top:2px; }
.footer__brand-name{
  font-family:var(--font-display); font-weight:800; font-size:1.12rem; color:var(--white);
}
.footer__brand-tag{ font-size:.9rem; color:var(--green); margin-top:2px; }
.footer__brand-desc{ font-size:.86rem; color:#9aa094; margin-top:10px; max-width:42ch; line-height:1.6; }
.footer__brand-copy{ font-size:.8rem; color:#767c6d; margin-top:16px; }

.footer__right{ display:flex; flex-direction:column; align-items:flex-end; gap:18px; text-align:right; }
.footer__links{ display:flex; gap:26px; flex-wrap:wrap; justify-content:flex-end; }
.footer__links a{ font-size:.9rem; color:#c7cbc1; transition:color .15s ease; }
.footer__links a:hover{ color:var(--green); }
.footer__legal{ font-size:.78rem; color:#868d7c; max-width:40ch; line-height:1.6; }

@media (max-width:760px){
  .site-footer .wrap{ grid-template-columns:1fr; gap:32px; }
  .footer__right{ align-items:flex-start; text-align:left; }
  .footer__links{ justify-content:flex-start; }
}

/* --------------------------------------------------------------------- */
/* News (live RSS syndication from africainvestor.com)                   */
/* --------------------------------------------------------------------- */
.news-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:44px;
}
.news-head p.source-note{
  font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft);
}
.section--dark .news-head p.source-note{ color:#8a9080; }

.news-state{
  padding:48px 0; color:var(--ink-soft); font-size:1rem;
}
.section--dark .news-state{ color:#b9bfae; }
.news-state.is-error{ color:#b5502f; }

.news-filters{
  display:flex; flex-direction:column; gap:16px;
  margin-bottom:32px; padding-bottom:28px;
  border-bottom:1px solid var(--line-light);
}
.section--dark .news-filters{ border-bottom-color:var(--line-dark); }
.news-filters__search input{
  width:100%; max-width:420px;
  font-family:var(--font-body); font-size:.98rem;
  padding:.75rem 1rem;
  border:1.5px solid var(--line-light);
  border-radius:var(--radius);
  background:var(--panel-light);
  color:var(--ink);
  transition:border-color .18s ease;
}
.section--dark .news-filters__search input{
  background:var(--bg-dark-2); border-color:var(--line-dark); color:var(--white);
}
.news-filters__search input:focus-visible{ border-color:var(--green-on-light); }
.section--dark .news-filters__search input:focus-visible{ border-color:var(--green); }
.news-filters__pills{ display:flex; flex-wrap:wrap; gap:8px; }
.news-filter__pill{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.02em;
  padding:.42em 1em;
  border:1px solid var(--line-light);
  border-radius:999px;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.section--dark .news-filter__pill{ border-color:var(--line-dark); color:#b9bfae; }
.news-filter__pill:hover{ border-color:var(--green-on-light); color:var(--green-on-light); }
.section--dark .news-filter__pill:hover{ border-color:var(--green); color:var(--green); }
.news-filter__pill.is-active{ background:var(--green-on-light); border-color:var(--green-on-light); color:#fff; }
.section--dark .news-filter__pill.is-active{ background:var(--green); border-color:var(--green); color:#08130a; }

.news-count{
  font-family:var(--font-mono); font-size:.8rem; color:var(--ink-faint);
  margin-bottom:24px;
}
.section--dark .news-count{ color:#8a9080; }

.news-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
}
@media (min-width:1400px){ .news-grid{ grid-template-columns:repeat(4, 1fr); } }
@media (max-width:980px){ .news-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .news-grid{ grid-template-columns:1fr; } }

.news-card{
  display:flex; flex-direction:column;
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel-light);
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease;
}
.section--dark .news-card{ background:var(--bg-dark-2); border-color:var(--line-dark); }
.news-card:hover{ transform:translateY(-5px); box-shadow:0 22px 40px rgba(10,13,10,.14); border-color:var(--green-on-light); }
.section--dark .news-card:hover{ border-color:var(--green); }

.news-card__figure{
  position:relative;
  aspect-ratio:16/10; background:#e7e6e0; overflow:hidden;
}
.section--dark .news-card__figure{ background:#12160f; }
.news-card__figure::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.35) 42%, transparent 64%);
  background-size:200% 100%; background-position:150% 0;
  opacity:1; pointer-events:none;
  transition:opacity .4s ease;
}
.news-card__figure:has(img.is-loaded)::before{ opacity:0; }
.news-card__figure img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transform:scale(1.04);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.news-card__figure img.is-loaded{ opacity:1; transform:scale(1); }
.news-card:hover .news-card__figure img.is-loaded{ transform:scale(1.06); }
.news-card__figure.is-empty{
  display:flex; align-items:center; justify-content:center;
}
.news-card__figure.is-empty img{ width:44px; height:44px; opacity:.4; object-fit:contain; transform:none; }

.news-card__body{ padding:22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.news-card__meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.news-card__tag{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--green-on-light);
  background:rgba(53,103,17,.09);
  border-radius:999px; padding:.28em .7em;
}
.section--dark .news-card__tag{ color:var(--green); background:rgba(143,226,63,.12); }
.news-card__date{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint);
}
.section--dark .news-card__date{ color:#8a9080; }
.news-card__title{
  font-family:var(--font-display); font-weight:700; font-size:1.12rem; line-height:1.32;
}
.news-card__excerpt{
  font-size:.92rem; color:var(--ink-soft); line-height:1.55; flex:1;
}
.section--dark .news-card__excerpt{ color:#b9bfae; }
.news-card__link{
  margin-top:6px; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.03em;
  color:var(--green-on-light); display:inline-flex; align-items:center; gap:6px;
  transition:gap .2s ease;
}
.news-card:hover .news-card__link{ gap:10px; }
.section--dark .news-card__link{ color:var(--green); }

.news-pager{ display:flex; justify-content:center; margin-top:48px; }

/* Article detail — full-bleed split panel: light content column that
   scrolls normally, dark aside pinned in view (via position:sticky) with
   a circular close control and a preview of the next article. */
.article-panel{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 380px;
}
.article-panel__content{
  background:var(--bg-light);
  padding:56px var(--edge) 96px;
  min-width:0;
}
.article-panel__aside{
  position:sticky; top:76px;
  height:calc(100vh - 76px);
  background:var(--bg-dark);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.article-panel__close{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:var(--white);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.article-panel__close:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32); transform:scale(1.06); }
.article-panel__close svg{ width:18px; height:18px; }

.article-panel__next{
  position:absolute; left:28px; right:28px; bottom:28px;
}
.article-panel__next-label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:#8a9080; margin-bottom:10px;
}
.article-next-card{
  display:flex; gap:14px; align-items:center;
  padding:14px; border-radius:var(--radius);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.article-next-card:hover{ background:rgba(255,255,255,.08); border-color:var(--green); transform:translateY(-2px); }
.article-next-card__figure{
  width:56px; height:56px; flex:none; border-radius:6px; overflow:hidden; background:#12160f;
}
.article-next-card__figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-next-card__body{ min-width:0; flex:1; }
.article-next-card__title{
  font-family:var(--font-display); font-weight:600; font-size:.86rem; line-height:1.3;
  color:var(--white);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.article-next-card__arrow{ color:var(--green); flex:none; transition:transform .2s ease; }
.article-next-card:hover .article-next-card__arrow{ transform:translateX(3px); }

@media (max-width:900px){
  .article-panel{ grid-template-columns:1fr; }
  .article-panel__aside{
    position:static; height:auto; padding:22px var(--edge);
    flex-direction:row; justify-content:space-between; align-items:center;
  }
  .article-panel__next{ position:static; left:auto; right:auto; bottom:auto; flex:1; margin-left:20px; }
  .article-panel__next-label{ display:none; }
  .article-panel__content{ padding:32px var(--edge) 56px; order:2; }
}

.article-hero-figure{
  width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  background:#e7e6e0; margin-bottom:34px;
}
.article-hero-figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-head{ max-width:1100px; margin-bottom:8px; }
.article-head h1{ font-size:clamp(1.7rem, 3.6vw, 2.6rem); line-height:1.2; }
.article-meta{
  font-family:var(--font-mono); font-size:.8rem; color:var(--ink-faint);
  margin:14px 0 40px; display:flex; gap:14px; flex-wrap:wrap; align-items:center;
}
.article-meta a{ color:var(--green-on-light); }
.article-body{
  max-width:1100px; font-size:1.06rem; line-height:1.75; color:var(--ink);
}
.article-body p{ margin:0 0 22px; }
.article-body h2, .article-body h3{ font-family:var(--font-display); margin:38px 0 16px; line-height:1.3; }
.article-body img{ width:100%; height:auto; border-radius:var(--radius); margin:26px 0; }
.article-body a{ color:var(--green-on-light); text-decoration:underline; }
.article-body ul, .article-body ol{ margin:0 0 22px; padding-left:1.3em; }
.article-body blockquote{
  margin:26px 0; padding-left:20px; border-left:2px solid var(--green-on-light);
  color:var(--ink-soft); font-style:italic;
}

/* --------------------------------------------------------------------- */
/* Utility page sections                                                 */
/* --------------------------------------------------------------------- */
.legal-copy{ max-width:1280px; }
.legal-copy h1{ font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:10px; }
.legal-copy .legal-meta{ color:var(--ink-faint); font-size:.86rem; font-family:var(--font-mono); margin-bottom:36px; }
.legal-copy .legal-intro{ color:var(--ink-soft); font-size:1.08rem; max-width:90ch; margin-bottom:36px; padding-bottom:32px; border-bottom:1px solid var(--line-light); }
.legal-grid{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:72px; row-gap:0;
}
.legal-block{ padding-bottom:34px; }
.legal-copy h2{
  font-size:1.2rem; margin:0 0 14px;
}
.legal-copy p{ color:var(--ink-soft); margin-bottom:14px; font-size:1.02rem; line-height:1.7; }
.legal-copy p:last-child{ margin-bottom:0; }
.legal-copy ul{ margin:0 0 14px; padding-left:1.3em; color:var(--ink-soft); }
.legal-copy li{ list-style:disc; margin-bottom:8px; font-size:1.02rem; line-height:1.65; }
.legal-copy a{ color:var(--green-on-light); text-decoration:underline; }
.legal-copy strong{ color:var(--ink); }
@media (max-width:900px){
  .legal-grid{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------- */
/* Scroll reveal — used site-wide via script.js (window.gemsReveal)      */
/* --------------------------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* --------------------------------------------------------------------- */
/* News open/close transition — smooth cross-fade + morph between the    */
/* article grid and an open article, via the native View Transitions API */
/* (news.js wraps each route change in document.startViewTransition).    */
/* --------------------------------------------------------------------- */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.5s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}
::view-transition-old(root){ animation-name:gems-view-out; }
::view-transition-new(root){ animation-name:gems-view-in; }
@keyframes gems-view-out{
  to{ opacity:0; transform:scale(.985) translateY(6px); }
}
@keyframes gems-view-in{
  from{ opacity:0; transform:scale(1.015) translateY(-6px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}