/* =========================================================================
   SUSTAINABLE INTELLIGENCE — sust.in
   Design system: monochrome technical surface + one signal colour.
   Typography: geometric display + neo-grotesque body + monospace data.
   ========================================================================= */

:root{
  --bg:            #08090b;
  --bg-1:          #0d0e11;
  --bg-2:          #121319;
  --line:          rgba(255,255,255,0.09);
  --line-strong:   rgba(255,255,255,0.18);
  --line-signal:   rgba(76,116,255,0.35);

  --text:          #f2f3f0;
  --text-dim:      #a3a6ae;
  --text-faint:    #858891; /* raised for at least 4.5:1 on --bg, --bg-1 and --bg-2 */

  --signal:        #4c74ff;
  --signal-2:      #86a3ff;
  --signal-soft:   rgba(76,116,255,0.12);
  --signal-glow:   rgba(76,116,255,0.55);

  --amber:         #d9a441; /* used only for disclaimers / caution markers, not decorative */

  --radius:        2px;
  --radius-lg:     4px;

  --font-display:  'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body:     'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --maxw:          1240px;
  --gutter:        clamp(20px, 5vw, 64px);

  --ease:          cubic-bezier(.16,.84,.32,1);
  --dur:           .6s;

  color-scheme: dark;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--bg); }
html,body{ min-height:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }
input,textarea{ font-family:inherit; }
svg{ display:block; }

::selection{ background:var(--signal); color:#fff; }

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; scroll-behavior:auto !important; }
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#26272e; border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:#34363f; }

/* =========================================================================
   Layout helpers
   ========================================================================= */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.grid{ display:grid; }

.noise-layer{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.grid-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:.35;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,0,0,.9), transparent 75%);
}

/* =========================================================================
   Typography
   ========================================================================= */

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.08;
}
h1{ font-size:clamp(2.4rem, 6vw, 4.6rem); }
h2{ font-size:clamp(1.9rem, 4.2vw, 3.1rem); }
h3{ font-size:clamp(1.25rem, 2.4vw, 1.7rem); }
h4,.minor-heading{ font-size:1.05rem; }

p{ color:var(--text-dim); }
p.lead{ font-size:clamp(1.05rem,1.6vw,1.28rem); color:var(--text); max-width:44em; }

.mono{ font-family:var(--font-mono); }
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--signal-2);
  display:inline-flex;
  align-items:center;
  gap:.55em;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  background:var(--signal);
  box-shadow:0 0 10px var(--signal-glow);
  display:inline-block;
  border-radius:1px;
}
.eyebrow.dim{ color:var(--text-faint); }
.eyebrow.dim::before{ background:var(--text-faint); box-shadow:none; }

.tag-index{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--text-faint);
  letter-spacing:.08em;
}

.text-dim{ color:var(--text-dim); }
.text-faint{ color:var(--text-faint); }
.text-signal{ color:var(--signal-2); }
.center{ text-align:center; }

/* =========================================================================
   Buttons / CTAs
   ========================================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:.95em 1.5em;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  white-space:nowrap;
  transition:border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  position:relative;
}
.btn:hover{ transform:translateY(-1px); }
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(3px); }

.btn-primary{
  background:var(--signal);
  border-color:var(--signal);
  color:#06070a;
  font-weight:600;
}
.btn-primary:hover{ background:var(--signal-2); border-color:var(--signal-2); box-shadow:0 0 24px var(--signal-glow); }

.btn-outline{ color:var(--text); }
.btn-outline:hover{ border-color:var(--signal); color:var(--signal-2); background:var(--signal-soft); }

.btn-ghost{
  color:var(--text-dim);
  border-color:transparent;
  padding:.95em .25em;
}
.btn-ghost:hover{ color:var(--signal-2); }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* =========================================================================
   Header
   ========================================================================= */

.site-header{
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid var(--line);
  background:rgba(8,9,11,.72);
  backdrop-filter:blur(14px) saturate(140%);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
  gap:24px;
}
.brand{
  display:flex; align-items:center;
  flex-shrink:0;
}
.brand img.brand-logo{ height:48px; width:auto; display:block; }

.primary-nav{ display:none; }
.primary-nav > ul{ display:flex; align-items:center; gap:2px; }
.nav-item{ position:relative; }
.nav-item > a, .nav-item > button{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:10px 14px;
  color:var(--text-dim);
  border-radius:var(--radius);
  transition:color .2s, background-color .2s;
}
.nav-item > a:hover, .nav-item > button:hover, .nav-item.active > a{
  color:var(--text);
  background:rgba(255,255,255,.045);
}
.nav-item.active > a{ color:var(--signal-2); }
.caret{ width:8px; height:8px; opacity:.6; transition:transform .2s; }
.nav-item:hover .caret, .nav-item.open .caret{ transform:rotate(180deg); }

/* Mega dropdown is anchored flush to the nav item (top:100%, no gap) so the
   hover area is continuous from trigger to panel. The 10px visual gap the
   design calls for is recreated as padding-top *inside* the (invisible until
   opened) box, not as an external margin/offset — that padding is still part
   of the element's hoverable box even while opacity/visibility are 0, so the
   mouse never crosses dead space between the nav link and the panel. */
.mega{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%);
  min-width:300px;
  padding-top:10px; /* bridges the visual gap without breaking :hover continuity */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
  z-index:70;
}
.mega-panel{
  background:var(--bg-1);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:10px;
  box-shadow:0 24px 48px -12px rgba(0,0,0,.6);
  transform:translateY(6px);
  transition:transform .18s var(--ease);
}
.nav-item:hover .mega,
.nav-item.open .mega,
.nav-item:focus-within .mega{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%);
}
.nav-item:hover .mega .mega-panel,
.nav-item.open .mega .mega-panel,
.nav-item:focus-within .mega .mega-panel{
  transform:translateY(0);
}
/* Escape must force-close the panel even though focus is returned to the
   trigger link (which is still inside .nav-item, so :focus-within would
   otherwise re-open it immediately). JS toggles this class off again on the
   next mouseenter/focusin so normal re-opening is unaffected. */
.nav-item.escaped .mega{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}
.mega a{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px;
  border-radius:var(--radius);
}
.mega a:hover, .mega a:focus-visible{ background:rgba(255,255,255,.05); }
.mega a .mega-label{ font-family:var(--font-mono); font-size:.8rem; color:var(--text); }
.mega a .mega-desc{ font-size:.72rem; color:var(--text-faint); }
.mega a:hover .mega-label, .mega a:focus-visible .mega-label{ color:var(--signal-2); }
.nav-item > a:focus-visible, .nav-item > button:focus-visible{
  outline:2px solid var(--signal); outline-offset:2px;
}
.mega a:focus-visible{
  outline:2px solid var(--signal); outline-offset:-2px;
}

.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.btn-ai{
  font-family:var(--font-mono); font-size:.75rem;
  display:inline-flex; align-items:center; gap:8px;
  padding:.6em 1em;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  color:var(--text-dim);
}
.btn-ai:hover{ color:var(--signal-2); border-color:var(--signal); }
.btn-ai .dot{ width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 8px var(--signal-glow); animation:pulse 2s infinite; }

.nav-toggle{
  display:flex; flex-direction:column; gap:5px;
  width:34px; height:24px; justify-content:center;
}
.nav-toggle span{ height:1px; background:var(--text); transition:transform .25s var(--ease), opacity .25s var(--ease); }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* Mobile menu */
.mobile-menu{
  position:fixed; top:76px; right:0; bottom:0; left:0; z-index:55;
  background:var(--bg);
  border-top:1px solid var(--line);
  transform:translateY(-8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
  overflow-y:auto;
  height:calc(100vh - 76px);
}
@media (max-width:640px){
  .mobile-menu{ top:68px; height:calc(100vh - 68px); }
}
.mobile-menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.mobile-menu .wrap{ padding-top:24px; padding-bottom:40px; }
.mobile-menu .wrap{ display:block; }
.mobile-menu ul{ display:flex; flex-direction:column; width:100%; }
.mobile-actions{ width:100%; }
.mobile-nav-item{ border-bottom:1px solid var(--line); width:100%; }
.mobile-nav-item > .row{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  padding:18px 0;
  font-family:var(--font-display); font-size:1.3rem;
}
.mobile-nav-item > .row > a{ flex:1 1 auto; }
.mobile-sub-toggle{ flex:0 0 auto; padding:8px; }
.mobile-sub{
  max-height:0; overflow:hidden; visibility:hidden; transition:max-height .3s var(--ease);
}
.mobile-nav-item.open .mobile-sub{ max-height:600px; visibility:visible; }
.mobile-sub a{
  display:block; padding:10px 0 10px 14px; border-left:1px solid var(--line);
  font-family:var(--font-mono); font-size:.85rem; color:var(--text-dim);
}
.mobile-actions{ margin-top:28px; display:flex; flex-direction:column; gap:12px; }

/* =========================================================================
   Hero
   ========================================================================= */

.hero{
  position:relative;
  padding:96px 0 88px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-inner{ position:relative; z-index:2; }
@keyframes blink{ 50%{opacity:0;} }

/* -------------------------------------------------------------------------
   Page-level orbit accent — minimal, abstract "tilted galactic disk" motif
   (5 concentric, co-centred, identically-tilted elliptical rings + 2 small
   travelling dots). Purely decorative background flourish, independent of
   the Hero section.

   Positioning: .hero-orbit is position:fixed to the viewport (not absolute
   inside any section), so its screen position is identical at any scroll
   offset — it never moves as the user scrolls the page. z-index:0 keeps it
   below body content (which is position:relative with z-index:2, see
   `section{ position:relative; z-index:2; }`) but above the plain body
   background, so it reads as a fixed background layer behind every section.

   Sizing: .hero-orbit is a full-viewport fixed clipping box (inset:0,
   overflow:hidden). Inside it, .hero-orbit-inner is a square box sized
   112vw x 112vw (capped at 2130px) whose right edge is pinned to the
   viewport's right edge (right:0) and then shifted right by exactly half
   of its OWN rendered width via transform:translate(50%,-50%) — a
   percentage transform resolves against the element's own box, not the
   viewport, so the box's centre always lands precisely on the browser's
   right edge even once max-width caps its rendered size on very wide
   viewports. The net effect: exactly the left half of the system's own
   width is ever inside the viewport (i.e. the visible portion spans 50%
   of the window's width), while the other half extends past the right
   edge and is clipped by .hero-orbit's overflow:hidden — "half on screen,
   half off the browser window" independent of viewport size.

   Shape & nesting: all 5 ellipses share one centre (50,50) and are drawn
   tall/narrow (rx well below ry) BEFORE rotation, i.e. their un-rotated
   major axis is vertical. The shared <g> is then rotated +60deg, which
   swings that axis to a shallow tilt of (90-60)=30deg off the horizontal —
   closer to a flat, planar disk than to a vertical orientation — landing
   on the bottom-left-to-top-right diagonal. rx grows only slightly between
   consecutive rings (tight spacing along the ellipses' short/narrow axis)
   while ry grows more between rings (wider spacing along the long,
   bottom-left/top-right-extending axis), so the "waist" of the disk stays
   compact while its two elongated tips fan out further with each ring.

   Colour: fully monochrome — every ring and both travelling dots share the
   same neutral gray at low opacity; no colour accent, no glow, no stars.
   ------------------------------------------------------------------------- */
.hero-orbit{
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}
.hero-orbit-inner{
  /* right:0 anchors the box's right edge to the browser's right edge;
     translate(50%, -50%) then shifts it right by exactly half of its OWN
     rendered width (a percentage transform is relative to the element's
     own box, not the viewport), so the box's centre always lands precisely
     on the browser's right edge — including once width is capped by
     max-width on very wide viewports, unlike a fixed vw-based offset. */
  position:absolute;
  top:50%; right:0;
  width:112vw; height:112vw;
  max-width:2130px; max-height:2130px;
  transform:translate(50%, -50%);
  overflow:visible;
  opacity:.4;
}
.hero-orbit .orbit-ring{ fill:none; stroke:var(--line-strong); stroke-width:.16; }
.hero-orbit .orbit-dot-1,
.hero-orbit .orbit-dot-2{ fill:var(--text-dim); }
@media (prefers-reduced-motion:reduce){
  .hero-orbit animateMotion{ display:none; }
}
@media (max-width:900px){
  .hero-orbit{ display:none; }
}

.hero h1{
  max-width:16ch;
}
.hero h1 .type-cursor{
  display:inline-block; width:.5ch; background:var(--signal); margin-left:.05em;
  animation:blink 1s steps(2) infinite;
  height:.8em; transform:translateY(.05em);
  /* Zero net width, so a full headline line never pushes the cursor onto a line of its own (mobile). */
  margin-right:-.6ch;
}
.hero .lead{ margin-top:26px; }
.hero .btn-row{ margin-top:40px; }

/* Hero metadata rail — thin architectural data strip, replaces heavy cards */
.hero-rail{
  margin-top:60px;
  border-top:1px solid var(--line);
  padding-top:0;
}
.hero-rail ul{
  display:flex;
  width:100%;
}
.hero-rail li{
  flex:1 1 0;
  padding:20px 40px 0 0;
  min-width:0;
}
.hero-rail li:first-child{ padding-left:0; }
.hero-rail li:last-child{ padding-right:0; }
.hero-rail .rail-label{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-faint); display:block; margin-bottom:10px;
}
.hero-rail .rail-label::before{ content:"— "; color:var(--line-strong); }
.hero-rail .rail-value{
  font-family:var(--font-mono); font-size:.82rem; color:var(--text-dim); letter-spacing:.01em; line-height:1.5;
  display:block;
}

/* =========================================================================
   Sections
   ========================================================================= */

section{ position:relative; z-index:2; }
.section{ padding:96px 0; border-bottom:1px solid var(--line); }
.section.no-border{ border-bottom:none; }
.section.tight{ padding:64px 0; }
.section-head{ max-width:52em; margin-bottom:56px; }
.section-head h2{ margin-top:16px; }
.section-head p{ margin-top:18px; }
.section-foot{ margin-top:56px; }

.section.bg-1{ background:var(--bg-1); }

/* Numbered index list used for page overviews / step systems */
.idx-row{
  display:flex; align-items:baseline; gap:16px;
  padding:22px 0;
  border-top:1px solid var(--line);
}
.idx-row:last-child{ border-bottom:1px solid var(--line); }
.idx-row .n{ font-family:var(--font-mono); color:var(--text-faint); font-size:.85rem; }

/* =========================================================================
   Cards
   ========================================================================= */

.card-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.card-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.card-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.card-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.card-grid.cols-6{ grid-template-columns:repeat(6,1fr); }

.card{
  background:var(--bg);
  padding:30px 28px;
  position:relative;
  transition:background-color .3s var(--ease);
  display:flex; flex-direction:column; gap:12px;
}
a.card:hover, .card.hoverable:hover{ background:var(--bg-1); }
.card .card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card h3, .card h4{ margin:0; }
.card p{ margin:0; font-size:.94rem; }
.card .card-link{
  margin-top:auto;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-faint); display:flex; align-items:center; gap:6px;
  transition:color .2s, gap .2s;
}
a.card:hover .card-link, .card.hoverable:hover .card-link{ color:var(--signal-2); gap:10px; }

/* Status pills */
.pill{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.3em .65em; border:1px solid var(--line-strong); border-radius:20px; color:var(--text-faint);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.pill .dot{ width:5px; height:5px; border-radius:50%; background:var(--text-faint); }
.pill.active{ color:var(--signal-2); border-color:var(--line-signal); }
.pill.active .dot{ background:var(--signal); box-shadow:0 0 6px var(--signal-glow); }
.pill.dev{ color:#d9a441; border-color:rgba(217,164,65,.35); }
.pill.dev .dot{ background:#d9a441; }

/* Entity badges (ASBL / CIC) */
.entity-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.4em .8em; border-radius:20px;
}
.entity-badge.asbl{ color:#a3b8ff; background:rgba(76,116,255,.1); border:1px solid rgba(76,116,255,.28); }
.entity-badge.cic{ color:#d7d9de; background:rgba(255,255,255,.05); border:1px solid var(--line-strong); }
.entity-badge.joint{ color:var(--text-dim); background:rgba(255,255,255,.03); border:1px dashed var(--line-strong); }

/* =========================================================================
   Ecosystem flow (sequence diagram)
   ========================================================================= */

.flow{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border:1px solid var(--line);
}
.flow.flow-6{ grid-template-columns:repeat(6,1fr); }
.flow .node{
  padding:26px 20px; border-right:1px solid var(--line);
  position:relative;
  transition:background-color .3s;
}
.flow .node:last-child{ border-right:none; }
.flow .node:hover{ background:var(--bg-1); }
.flow .node .num{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-faint); }
.flow .node :is(h4,.minor-heading){ margin-top:10px; }
.flow .node p{ margin-top:8px; font-size:.82rem; }
.flow .node::after{
  content:"→";
  position:absolute; right:-11px; top:50%; transform:translateY(-50%);
  color:var(--text-faint); font-family:var(--font-mono); font-size:.9rem;
  background:var(--bg); width:20px; text-align:center; z-index:2;
}
.flow .node:last-child::after{ content:""; }

/* =========================================================================
   Process steps
   ========================================================================= */

.process{ counter-reset:step; }
.process .step{
  counter-increment:step;
  display:grid; grid-template-columns:64px 1fr; gap:20px;
  padding:24px 0; border-top:1px solid var(--line);
}
.process .step:last-child{ border-bottom:1px solid var(--line); }
.process .step::before{
  content:counter(step, decimal-leading-zero);
  font-family:var(--font-mono); color:var(--signal-2); font-size:.95rem; padding-top:2px;
}
.process .step :is(h4,.minor-heading){ margin-bottom:6px; }
.process .step p{ font-size:.92rem; margin:0; }

/* =========================================================================
   Disclaimer / callout box
   ========================================================================= */

.callout{
  border:1px solid var(--line-strong);
  border-left:2px solid var(--amber);
  background:var(--bg-1);
  padding:20px 24px;
  border-radius:var(--radius);
  display:flex; gap:14px;
}
.callout .mark{ font-family:var(--font-mono); color:var(--amber); font-size:.8rem; padding-top:2px; }
.callout p{ font-size:.86rem; margin:0; color:var(--text-dim); }
.callout p + p{ margin-top:10px; }
.callout.signal{ border-left-color:var(--signal); }
.callout.signal .mark{ color:var(--signal-2); }

/* =========================================================================
   Credentials
   ========================================================================= */

.credential-row{
  display:flex; flex-wrap:wrap; gap:10px;
}
.credential{
  border:1px solid var(--line);
  padding:16px 18px;
  min-width:220px; flex:1 1 220px;
  border-radius:var(--radius);
}
.credential .credential-label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em; color:var(--text);
}
.credential .credential-note{ font-size:.78rem; color:var(--text-faint); margin-top:6px; }
.credential .credential-cat{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--signal-2); margin-bottom:8px; display:block;
}

/* Legacy .ai-prompts kept for reuse inside the new chat component's chip row. */
.ai-prompts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.ai-prompts button{
  border:1px solid var(--line-strong); border-radius:20px; padding:.5em 1em;
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-dim);
  transition:border-color .2s, color .2s;
}
.ai-prompts button:hover{ border-color:var(--signal); color:var(--signal-2); }

/* =========================================================================
   Breadcrumb / page header
   ========================================================================= */

.crumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-faint); letter-spacing:.03em;
  margin-bottom:26px;
}
.crumb a:hover{ color:var(--signal-2); }
.crumb .sep{ opacity:.5; }

.page-hero{
  padding:70px 0 64px;
  border-bottom:1px solid var(--line);
}
.page-hero h1{ max-width:20ch; }
.page-hero p.lead{ margin-top:20px; }
.page-hero .pill-row{ display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }

.about-hero{ position:relative; isolation:isolate; overflow:hidden; background:var(--bg); }
.about-hero::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url('/static/images/about-world.jpg') center/cover no-repeat; opacity:.45;
}
.about-hero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 65%,transparent),color-mix(in srgb,var(--bg) 15%,transparent)),linear-gradient(0deg,var(--bg),transparent 50%);
}
.about-hero h1{ margin-top:16px; }
.about-hero p.lead{ max-width:64ch; }
.about-hero p.lead+p.lead{ margin-top:16px; }
.about-hero .btn-row{ margin-top:32px; }

.industry50-page>.page-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg)}
.industry50-page>.page-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/static/images/industry50-future.jpg') center 55%/cover no-repeat;opacity:.4}
.industry50-page>.page-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 70%,transparent),color-mix(in srgb,var(--bg) 15%,transparent)),linear-gradient(0deg,var(--bg),transparent 50%)}

.applications-overview>.page-hero{--text-faint:var(--text-dim);position:relative;isolation:isolate;overflow:hidden;background:var(--bg)}
.applications-overview>.page-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/static/images/applications-i5-works.jpg') center/cover no-repeat;opacity:.4}
.applications-overview>.page-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 70%,transparent),color-mix(in srgb,var(--bg) 15%,transparent)),linear-gradient(0deg,var(--bg),transparent 50%)}

.partnership-page>.page-hero{--text-faint:var(--text-dim);position:relative;isolation:isolate;overflow:hidden;background:var(--bg)}
.partnership-page>.page-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/static/images/partnership-cityscape.jpg') center/cover no-repeat;opacity:.4}
.partnership-page>.page-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 70%,transparent),color-mix(in srgb,var(--bg) 15%,transparent)),linear-gradient(0deg,var(--bg),transparent 50%)}

/* =========================================================================
   Table-ish key/value list
   ========================================================================= */

.kv-list .kv-row{
  display:grid; grid-template-columns:200px 1fr;
  gap:20px;
  padding:16px 0;
  border-top:1px solid var(--line);
}
.kv-list .kv-row:last-child{ border-bottom:1px solid var(--line); }
.kv-list .kv-row dt{ font-family:var(--font-mono); font-size:.75rem; color:var(--text-faint); letter-spacing:.04em; text-transform:uppercase; }
.kv-list .kv-row dd{ color:var(--text-dim); font-size:.94rem; }

/* =========================================================================
   Footer
   ========================================================================= */

.site-footer{ background:var(--bg-1); border-top:1px solid var(--line); }
.footer-top{ padding:80px 0 56px; }
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr repeat(4,1fr);
  gap:40px;
}
.footer-brand .brand{ margin-bottom:18px; align-items:flex-start; }
.footer-brand .brand img.brand-logo{
  display:block;
  width:auto;
  height:auto;
  max-width:min(260px,100%);
  max-height:none;
  object-fit:contain;
  flex-shrink:0;
}
.footer-brand p{ font-size:.88rem; max-width:32ch; }
.footer-brand .mission{ margin-top:14px; font-family:var(--font-mono); font-size:.72rem; color:var(--signal-2); letter-spacing:.02em; }
.footer-col h5{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint);
  margin-bottom:16px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:.86rem; color:var(--text-dim); transition:color .2s; }
.footer-col a:hover{ color:var(--signal-2); }

.footer-bottom{
  border-top:1px solid var(--line);
  padding:24px 0;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.footer-bottom .entities{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-legal{
  display:flex; gap:18px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.7rem; color:var(--text-faint);
}
.footer-legal span{ opacity:.55; }
.footer-tagline{
  font-family:var(--font-display); font-size:1.1rem; color:var(--text);
}
.footer-copy{ font-family:var(--font-mono); font-size:.7rem; color:var(--text-faint); }

/* =========================================================================
   Reveal-on-scroll utility
   ========================================================================= */

[data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].in{ opacity:1; transform:translateY(0); }
[data-reveal-group] > *{ transition-delay:calc(var(--i,0) * 70ms); }

/* =========================================================================
   Misc components
   ========================================================================= */

.divider{ height:1px; background:var(--line); border:none; margin:0; }

.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.stat{ background:var(--bg); padding:26px 24px; }
.stat .num{ font-family:var(--font-mono); font-size:1.5rem; color:var(--signal-2); }
.stat .label{ font-size:.78rem; color:var(--text-faint); margin-top:6px; }

.marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; }
.marquee .track{ display:flex; gap:60px; white-space:nowrap; animation:marquee 34s linear infinite; }
.marquee .track span{ font-family:var(--font-mono); font-size:.78rem; color:var(--text-faint); letter-spacing:.06em; text-transform:uppercase; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.two-col.asym-l{ grid-template-columns:0.9fr 1.3fr; }
.two-col.asym-r{ grid-template-columns:1.3fr 0.9fr; }

.pathway-list{ display:flex; flex-direction:column; gap:0; }
.pathway-list .row{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px;
  padding:20px 0; border-top:1px solid var(--line);
}
.pathway-list .row:last-child{ border-bottom:1px solid var(--line); }

.related-links{ display:flex; flex-wrap:wrap; gap:10px; }
.related-links a{
  font-family:var(--font-mono); font-size:.74rem; color:var(--text-dim);
  border:1px solid var(--line-strong); padding:.55em 1em; border-radius:20px;
}
.related-links a:hover{ color:var(--signal-2); border-color:var(--signal); }

.symbol-mark{ filter:drop-shadow(0 0 30px rgba(76,116,255,.18)); }
.spin-slow{ animation:spin 60s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.brand-glyph-bg{
  position:absolute; z-index:0; opacity:.06; pointer-events:none;
  width:640px; height:640px;
}

/* Insights category chips */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em;
  padding:.5em 1em; border:1px solid var(--line-strong); border-radius:20px; color:var(--text-dim);
}
.chip.is-active{ color:var(--signal-2); border-color:var(--signal); background:var(--signal-soft); }

.insight-card{
  border:1px solid var(--line);
  padding:26px;
  display:flex; flex-direction:column; gap:14px;
  min-height:220px;
}
.insight-card .type{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.insight-card :is(h4,.minor-heading){ margin:0; }
.insight-card .meta{ margin-top:auto; font-family:var(--font-mono); font-size:.7rem; color:var(--text-faint); display:flex; gap:12px; }

/* =========================================================================
   Responsive
   ========================================================================= */

@media (min-width:960px){
  .primary-nav{ display:block; }
  .nav-toggle, .btn-menu-label{ display:none; }
}

@media (max-width:959px){
  .header-actions .hide-mobile{ display:none; }
}

@media (max-width:1040px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .flow, .flow.flow-6{ grid-template-columns:1fr; }
  .flow .node{ border-right:none; border-bottom:1px solid var(--line); }
  .flow .node::after{ content:"↓"; right:auto; left:20px; top:auto; bottom:-11px; transform:none; }
  .flow .node:last-child{ border-bottom:none; }
}

@media (max-width:840px){
  .two-col, .two-col.asym-l, .two-col.asym-r{ grid-template-columns:1fr; }
  .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4, .card-grid.cols-6{ grid-template-columns:1fr; }
  .kv-list .kv-row{ grid-template-columns:1fr; gap:6px; }
}

@media (max-width:640px){
  .site-header .wrap{ height:68px; }
  .btn{ max-width:100%; white-space:normal; }
  .btn .arrow{ flex-shrink:0; }
  .brand img.brand-logo{ height:36px; }
  .hero{ padding:64px 0 56px; }
  .section{ padding:64px 0; }
  .stat-row{ grid-template-columns:1fr 1fr; }
  .process .step{ grid-template-columns:40px 1fr; }
}

/* =========================================================================
   HOMEPAGE REVISION — composition-varied section system
   Pattern sequence: metadata rail → asymmetric triptych → network diagram
   → icon matrix → conversational interface → open invitation → paired profiles
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hero rail responsive behaviour (mobile: horizontal scroll rail)
   ------------------------------------------------------------------------- */
@media (max-width:760px){
  .hero-rail ul{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:0;
  }
  .hero-rail ul::-webkit-scrollbar{ display:none; }
  /* Mobile: two columns that wrap, so no strip item is cut off. */
  .hero-rail ul{ display:grid; grid-template-columns:1fr 1fr; overflow:visible; column-gap:24px; }
  .hero-rail li{
    min-width:0;
    padding:20px 0 0 0;
  }
  .hero-rail li:first-child{ padding-left:0; }
}

/* -------------------------------------------------------------------------
   Industry 5.0 — pull quote + asymmetric triptych
   ------------------------------------------------------------------------- */
.i5-quote{
  border-left:2px solid var(--signal);
  padding-left:20px;
  margin-top:24px;
  max-width:38ch;
}
.i5-quote p{
  font-family:var(--font-display);
  font-size:clamp(1rem,1.6vw,1.2rem);
  color:var(--text-dim);
  font-weight:500;
  line-height:1.45;
  font-style:normal;
}
.i5-quote p::before{ content:"“"; color:var(--signal-2); }
figure.i5-quote{ margin:24px 0 0; }
.i5-quote-source{ margin-top:10px; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }
.i5-quote-source::before{ content:"— "; }
/* Separates the quote from the Community of Practice block so it cannot read as an EC statement. */
.i5-membership{ margin-top:36px; padding-top:22px; border-top:1px solid var(--line); }
.i5-quote p::after{ content:"”"; color:var(--signal-2); }

.i5-credential{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:26px;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.03em;
  color:var(--text-faint);
}
.i5-credential .dot{ width:5px; height:5px; border-radius:50%; background:var(--signal); flex-shrink:0; box-shadow:0 0 6px var(--signal-glow); }

.triptych{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:48px;
  margin-top:64px;
}
.triptych .path{
  position:relative;
  padding:0;
}
.triptych .path-icon{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong);
  border-radius:50%;
  color:var(--signal-2);
  margin-bottom:20px;
}
.triptych .path-icon svg{ width:18px; height:18px; }
.triptych .path-index{
  font-family:var(--font-mono); font-size:.66rem; color:var(--text-faint); letter-spacing:.1em;
  display:block; margin-bottom:10px;
}
.triptych .path :is(h4,.minor-heading){ margin-bottom:12px; }
.triptych .path p{ font-size:.9rem; }
.triptych .path-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-faint);
  transition:color .2s, gap .2s;
}
.triptych .path:hover .path-link, .triptych .path:focus-within .path-link{ color:var(--signal-2); gap:10px; }
.triptych .path-link .arrow{ transition:transform .2s var(--ease); }
.triptych .path:hover .path-link .arrow{ transform:translateX(3px); }

/* connecting line motif threading the three pathways together */
.triptych::before{
  content:"";
  position:absolute;
  left:0; right:0; top:19px;
  height:1px;
  background:linear-gradient(to right, transparent, var(--line-strong) 8%, var(--line-strong) 92%, transparent);
  z-index:0;
  pointer-events:none;
}

@media (max-width:840px){
  .triptych{ grid-template-columns:1fr; gap:40px; }
  .triptych .path{ border-bottom:1px solid var(--line); padding-bottom:32px !important; }
  .triptych .path:last-child{ border-bottom:none; padding-bottom:0 !important; }
  .triptych::before{ display:none; }
}

/* -------------------------------------------------------------------------
   Ecosystem — interactive network diagram
   ------------------------------------------------------------------------- */
.network{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:56px;
  margin-top:56px;
  align-items:center;
}
.network-stage{
  position:relative;
  width:100%;
  aspect-ratio:1.5/1;
}
.network-stage svg{ width:100%; height:100%; overflow:visible; }
.net-line{
  stroke:var(--line-strong);
  stroke-width:1;
  fill:none;
  transition:stroke .3s var(--ease), stroke-width .3s var(--ease), opacity .3s var(--ease);
  opacity:.55;
}
.net-line.is-active{
  stroke:var(--signal);
  stroke-width:1.4;
  opacity:1;
}
.net-node{
  cursor:pointer;
  outline:none;
}
.net-node .net-dot{
  fill:var(--bg-1);
  stroke:var(--line-strong);
  stroke-width:1.4;
  transition:stroke .25s var(--ease), fill .25s var(--ease), r .25s var(--ease);
}
.net-node .net-label{
  font-family:var(--font-mono);
  font-size:13px;
  fill:var(--text-dim);
  text-anchor:middle;
  transition:fill .25s var(--ease);
}
.net-node:hover .net-dot, .net-node:focus .net-dot, .net-node.is-active .net-dot{
  stroke:var(--signal);
  fill:var(--signal-soft);
}
.net-node:hover .net-label, .net-node:focus .net-label, .net-node.is-active .net-label{
  fill:var(--signal-2);
}
.net-node:focus .net-dot{ stroke-width:2; }
.net-node .net-status{
  fill:var(--text-dim);
  font-family:var(--font-mono);
  font-size:10px;
  text-anchor:middle;
}

.net-panel{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px;
  background:var(--bg-1);
  min-height:220px;
  display:flex; flex-direction:column;
}
.net-panel-label{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:14px;
}
.net-panel-title{ font-family:var(--font-display); font-size:1.3rem; font-weight:600; margin-bottom:12px; }
.net-panel-text{ font-size:.92rem; color:var(--text-dim); flex:1 1 auto; }
.net-panel-link{
  margin-top:20px;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--signal-2);
  transition:gap .2s;
}
.net-panel-link:hover{ gap:12px; }

@media (max-width:900px){
  .network{ grid-template-columns:1fr; gap:32px; }
}

/* Mobile vertical connected pathway fallback */
.net-mobile-path{ display:none; }
@media (max-width:640px){
  .network-stage{ display:none; }
  .net-mobile-path{
    display:flex; flex-direction:column; gap:0;
  }
  .net-mobile-path button{
    position:relative;
    width:100%; background:transparent; color:var(--text); border:0; text-align:left; cursor:pointer; font:inherit;
    display:flex; align-items:center; gap:14px;
    padding:18px 0 18px 4px;
    border-left:1px solid var(--line-strong);
    padding-left:24px;
  }
  .net-mobile-path button::before{
    content:"";
    position:absolute; left:-5px; top:50%; transform:translateY(-50%);
    width:9px; height:9px; border-radius:50%;
    background:var(--bg); border:1.4px solid var(--line-strong);
  }
  .net-mobile-path button:hover::before, .net-mobile-path button:focus-visible::before, .net-mobile-path button.is-active::before{ border-color:var(--signal); background:var(--signal-soft); }
  .net-mobile-path button:focus-visible{ outline:1px solid var(--signal); outline-offset:4px; }
  .net-mobile-path .mp-title, .net-mobile-path .mp-desc{ display:block; }
  .net-mobile-path .mp-title{ font-family:var(--font-display); font-weight:600; }
  .net-mobile-path .mp-desc{ font-size:.8rem; color:var(--text-dim); margin-top:2px; }
}

.net-node .net-label, .net-node .net-status{ paint-order:stroke; stroke:var(--bg-1); stroke-width:4px; stroke-linejoin:round; }

/* -------------------------------------------------------------------------
   Applications — two-row icon matrix
   ------------------------------------------------------------------------- */
.icon-matrix{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:52px;
}
.icon-matrix a{
  background:var(--bg);
  padding:32px 26px;
  display:flex; flex-direction:column; gap:16px;
  transition:background-color .3s var(--ease);
}
.icon-matrix a:hover, .icon-matrix a:focus{ background:var(--bg-1); }
.icon-matrix .im-icon{
  width:34px; height:34px;
  color:var(--text-dim);
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.icon-matrix a:hover .im-icon, .icon-matrix a:focus .im-icon{ color:var(--signal-2); transform:translateX(2px); }
.icon-matrix .im-icon svg{ width:100%; height:100%; }
.icon-matrix :is(h4,.minor-heading){ margin:0; }
.icon-matrix p{ font-size:.86rem; margin:0; }
.icon-matrix .im-arrow{
  margin-top:auto;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-faint);
  display:flex; align-items:center; gap:6px;
  transition:color .2s, gap .2s;
}
.icon-matrix a:hover .im-arrow, .icon-matrix a:focus .im-arrow{ color:var(--signal-2); gap:10px; }

@media (max-width:840px){
  .icon-matrix{ grid-template-columns:1fr; }
}
@media (min-width:841px) and (max-width:1080px){
  .icon-matrix{ grid-template-columns:repeat(2,1fr); }
}

/* -------------------------------------------------------------------------
   Ask Sustin — scripted interactive demonstration (monochrome, no bubbles-as-colour)
   ------------------------------------------------------------------------- */
.ai-demo-layout{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  gap:56px;
}
.ai-demo-intro{ max-width:44ch; padding-top:6px; }
.ai-demo-intro h2{ max-width:16ch; }
.ai-demo-intro .lead{ margin-top:18px; }
.ai-demo-intro .chat-disclaimer{ margin-top:24px; }

.chat-window{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg-1);
  display:flex; flex-direction:column;
  overflow:hidden;
}
@media (max-width:900px){
  .ai-demo-layout{ grid-template-columns:1fr; gap:32px; }
  .ai-demo-intro{ max-width:none; }
  .ai-demo-intro .chat-disclaimer{ display:none; }
}
.chat-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.chat-header .chat-title-block{ display:flex; flex-direction:column; gap:3px; }
.chat-header .chat-title{
  font-family:var(--font-display); font-weight:600; font-size:.98rem; letter-spacing:.01em;
}
.chat-header .chat-status{
  font-family:var(--font-mono); font-size:.68rem; color:var(--text-faint); display:flex; align-items:center; gap:7px;
}
.chat-header .chat-status .dot{ width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 6px var(--signal-glow); }
.chat-clear{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-faint); border:1px solid var(--line-strong); border-radius:20px; padding:.4em .9em;
  transition:color .2s, border-color .2s;
}
.chat-clear:hover{ color:var(--signal-2); border-color:var(--signal); }

.chat-messages{
  flex:1 1 auto;
  min-height:260px;
  max-height:420px;
  overflow-y:auto;
  padding:20px 20px 8px;
  display:flex; flex-direction:column; gap:16px;
}
.chat-msg{ display:flex; flex-direction:column; gap:6px; max-width:88%; }
.chat-msg-user{ align-self:flex-end; align-items:flex-end; }
.chat-msg-assistant{ align-self:flex-start; align-items:flex-start; }
.chat-who{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
}
.chat-bubble{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 16px;
  background:var(--bg);
}
.chat-msg-user .chat-bubble{ background:var(--bg-2); border-color:var(--line-strong); }
.chat-text{ font-size:.9rem; color:var(--text); margin:0; line-height:1.55; white-space:pre-wrap; }
.chat-msg.is-pending .chat-text{ color:var(--text-faint); }
.chat-msg.is-error .chat-bubble{ border-left:2px solid var(--amber); }
.chat-msg.is-error .chat-text{ color:var(--text-dim); }

/* typing indicator — three pulsing dots shown before the prepared answer reveals */
.chat-typing{ display:inline-flex; align-items:center; gap:4px; padding:2px 0; }
.chat-typing span{
  width:5px; height:5px; border-radius:50%; background:var(--text-faint);
  animation:chat-typing-pulse 1.1s ease-in-out infinite;
}
.chat-typing span:nth-child(2){ animation-delay:.15s; }
.chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes chat-typing-pulse{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-2px); } }
@media (prefers-reduced-motion:reduce){
  .chat-typing span{ animation:none; opacity:.6; }
}

.chat-sources{ display:flex; flex-direction:column; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.chat-source-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--font-mono); font-size:.72rem; color:var(--signal-2);
}
.chat-source-link:hover{ text-decoration:underline; }
.chat-source-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.chat-suggested{
  padding:0 20px 20px;
  display:flex; flex-wrap:wrap; gap:8px;
  border-top:1px solid var(--line);
  margin-top:4px;
  padding-top:16px;
}
.chat-chip{
  border:1px solid var(--line-strong); border-radius:20px; padding:.5em 1em;
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-dim);
  transition:border-color .2s, color .2s, opacity .2s;
}
.chat-chip:hover, .chat-chip:focus{ border-color:var(--signal); color:var(--signal-2); }
.chat-chip:disabled{ opacity:.35; cursor:default; }

.chat-disclaimer{
  font-size:.76rem; color:var(--text-faint); margin-top:16px; max-width:60ch;
}

/* Ask Sustin extends only the existing conversational section. */
.chat-compose{padding:0 20px 20px;display:grid;gap:10px;}
.chat-compose>label{font-size:.8rem;color:var(--text-dim);}
.chat-compose textarea{width:100%;min-height:74px;resize:vertical;background:var(--bg);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px;font:inherit;}
.chat-compose textarea:focus-visible,.chat-compose button:focus-visible,.chat-clear:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
.chat-compose-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.chat-detail{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--text-dim);}
.chat-compose .btn{font-size:.8rem;padding:9px 16px;}
.chat-compose :disabled{opacity:.5;cursor:not-allowed;}
.chat-notice{font-size:.73rem;line-height:1.5;color:var(--text-dim);margin:0;}
.chat-notice a{color:var(--signal-2);text-decoration:underline;}
.chat-bubble{overflow-wrap:anywhere;min-width:0;}
.chat-source-link{overflow-wrap:anywhere;}

@media (max-width:640px){
  .chat-messages{ max-height:340px; }
  .chat-msg{ max-width:96%; }
}

/* -------------------------------------------------------------------------
   Partnership — open institutional invitation, left-aligned with the
   registered SDG Acceleration Action logo placed beside the text
   ------------------------------------------------------------------------- */
.partnership-open{
  position:relative;
  padding:88px 0;
}
.partnership-layout{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:64px;
}
.partnership-open .content{ text-align:left; max-width:52ch; }
.partnership-open .legal-note{
  margin-top:28px;
  font-size:.8rem; color:var(--text-faint);
  max-width:62ch;
}
.partnership-logo{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  padding:28px 32px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg-1);
}
.partnership-logo img{
  width:280px; height:auto;
}

@media (max-width:900px){
  .partnership-layout{ grid-template-columns:1fr; gap:40px; }
  .partnership-logo{ justify-content:flex-start; padding:24px 28px; }
  .partnership-logo img{ width:220px; }
}

/* -------------------------------------------------------------------------
   Entities — paired institutional profiles with contextual flags
   ------------------------------------------------------------------------- */
.entity-pair{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--line);
  margin-top:44px;
}
.entity-panel{
  position:relative;
  padding:40px 36px;
  overflow:hidden;
  border-right:1px solid var(--line);
}
.entity-panel:last-child{ border-right:none; }
.entity-flag-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.08;
  filter:saturate(.65) contrast(1.05);
}
.entity-panel.asbl .entity-flag-bg.flag-eu{
  object-position:60% 40%;
}
.entity-panel.cic .entity-flag-bg.flag-uk{
  object-position:30% 30%;
}
.entity-panel .entity-content{ position:relative; z-index:1; }
.entity-panel h3{ margin-top:16px; font-size:1.35rem; }
.entity-panel p{ margin-top:12px; font-size:.92rem; max-width:36ch; }
.entity-panel .entity-role{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.02em; color:var(--text-dim);
  margin-top:6px;
}
.entity-panel .entity-explore{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--signal-2);
  transition:gap .2s;
}
.entity-panel .entity-explore:hover{ gap:12px; }

/* shared mission axis connecting the two panels */
.entity-pair::after{
  content:"";
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:var(--line-strong);
  z-index:2;
  pointer-events:none;
}
.entity-pair::before{
  content:"";
  position:absolute; left:50%; top:50%; width:9px; height:9px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--bg); border:1.4px solid var(--signal);
  z-index:3;
  pointer-events:none;
}

@media (max-width:760px){
  .entity-pair{ grid-template-columns:1fr; }
  .entity-panel{ border-right:none; border-bottom:1px solid var(--line); }
  .entity-panel:last-child{ border-bottom:none; }
  .entity-pair::after{ left:0; right:0; top:50%; bottom:auto; width:auto; height:1px; }
  .entity-pair::before{ top:50%; left:50%; }
}

/* -------------------------------------------------------------------------
   Section-transition rhythm helpers (spacing/line variation, not colour)
   ------------------------------------------------------------------------- */
.section-divider-label{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal-2);
  display:flex; align-items:center; gap:14px;
}
.section-divider-label::after{
  content:""; flex:1 1 auto; height:1px; background:var(--line);
}

/* -------------------------------------------------------------------------
   In-page section navigation (used on long institutional pages, e.g. About)
   ------------------------------------------------------------------------- */
.page-subnav{
  position:sticky; top:76px; z-index:40;
  background:rgba(8,9,11,.86);
  backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:none;
}
.page-subnav::-webkit-scrollbar{ display:none; }
.page-subnav .wrap{
  display:flex; align-items:center; gap:2px;
  height:52px;
  white-space:nowrap;
}
.page-subnav a{
  flex:0 0 auto;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-faint);
  padding:8px 16px;
  border-bottom:2px solid transparent;
  transition:color .2s;
}
.page-subnav a:hover{ color:var(--text); }
.page-subnav a.is-active{ color:var(--signal-2); border-bottom-color:var(--signal); }

@media (max-width:640px){
  .page-subnav{ top:68px; }
}

/* -------------------------------------------------------------------------
   Understated arrow-link (inline text CTA), reusable across pages
   ------------------------------------------------------------------------- */
.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.02em;
  color:var(--signal-2);
  transition:gap .2s;
}
.link-arrow:hover{ gap:12px; }

/* -------------------------------------------------------------------------
   Structure panels — two-organisation layout (distinct from homepage
   .entity-pair: no flag imagery, includes bulleted responsibilities)
   ------------------------------------------------------------------------- */
.structure-pair{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--line);
  margin-top:44px;
}
.structure-panel{
  padding:40px 36px;
  border-right:1px solid var(--line);
}
.structure-panel:last-child{ border-right:none; }
.structure-panel .panel-title{ margin-top:16px; }
.structure-panel .panel-desc{ margin-top:14px; font-size:.92rem; max-width:42ch; }
.structure-panel .panel-list{ margin-top:24px; display:flex; flex-direction:column; gap:10px; }
.structure-panel .panel-list li{
  position:relative; padding-left:16px;
  font-size:.88rem; color:var(--text-dim); max-width:42ch;
}
.structure-panel .panel-list li::before{ content:"–"; position:absolute; left:0; color:var(--text-faint); }
.structure-panel .panel-close{ margin-top:24px; color:var(--text); font-weight:600; font-size:.94rem; }
.structure-panel .panel-cta{
  margin-top:22px;
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.03em; text-transform:uppercase;
}

@media (max-width:760px){
  .structure-pair{ grid-template-columns:1fr; }
  .structure-panel{ border-right:none; border-bottom:1px solid var(--line); }
  .structure-panel:last-child{ border-bottom:none; }
}

/* =========================================================================
   News list — chronological editorial accordion (/about/news)
   Uses native <details>/<summary> for full keyboard/touch a11y. No item
   numbering; metadata column carries only category + date.
   ========================================================================= */

.news-list{ display:flex; flex-direction:column; }
.news-item{ border-top:1px solid var(--line); }
.news-item:last-child{ border-bottom:1px solid var(--line); }

.news-accordion{ display:block; }

.news-summary{
  display:grid;
  grid-template-columns:180px 1fr auto;
  column-gap:28px;
  align-items:start;
  padding:28px 0;
  cursor:pointer;
  list-style:none;
}
.news-summary::-webkit-details-marker{ display:none; }
.news-summary::marker{ content:""; }
.news-summary:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:6px;
}

.news-meta{
  grid-column:1;
  grid-row:1 / span 2;
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint);
  padding-top:.2em;
}
.news-category{ color:var(--signal-2); }
.news-date{ color:var(--text-faint); }

.news-headline{
  grid-column:2;
  grid-row:1;
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.1rem,1.6vw,1.35rem);
  line-height:1.28;
  color:var(--text);
  transition:color .2s;
}
.news-item:hover .news-headline{ color:var(--signal-2); }

.news-excerpt{
  grid-column:2;
  grid-row:2;
  margin-top:10px;
  font-size:.92rem;
  color:var(--text-dim);
  max-width:64ch;
}

.news-toggle{
  grid-column:3;
  grid-row:1 / span 2;
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--text-dim);
  white-space:nowrap;
  align-self:start;
  padding-top:.15em;
  transition:color .2s;
}
.news-item:hover .news-toggle{ color:var(--signal-2); }
.news-toggle-label-open{ display:none; }
.news-accordion[open] .news-toggle-label-closed{ display:none; }
.news-accordion[open] .news-toggle-label-open{ display:inline; }

.news-toggle-icon{
  position:relative;
  width:16px; height:16px; flex:0 0 auto;
}
.news-toggle-icon::before, .news-toggle-icon::after{
  content:"";
  position:absolute; left:50%; top:50%;
  background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.news-toggle-icon::before{ width:12px; height:1.4px; }
.news-toggle-icon::after{ width:1.4px; height:12px; }
.news-accordion[open] .news-toggle-icon::after{ opacity:0; transform:translate(-50%,-50%) rotate(90deg); }

.news-body{
  grid-column:2;
  max-width:66ch;
  padding:0 0 30px;
  margin-left:calc(180px + 28px);
  display:flex; flex-direction:column; gap:14px;
}
.news-body p{ font-size:.94rem; }
.news-cta{ margin-top:4px; }

@media (prefers-reduced-motion: reduce){
  .news-toggle-icon::before, .news-toggle-icon::after{ transition:none; }
}

@media (max-width:840px){
  .news-summary{
    grid-template-columns:1fr auto;
    row-gap:10px;
  }
  .news-meta{
    grid-column:1 / span 2;
    grid-row:1;
    flex-direction:row;
    gap:12px;
  }
  .news-headline{ grid-column:1; grid-row:2; }
  .news-excerpt{ grid-column:1; grid-row:3; }
  .news-toggle{ grid-column:2; grid-row:1; align-self:start; }
  .news-body{ margin-left:0; max-width:none; }
}

@media (max-width:640px){
  .news-summary{ padding:22px 0; column-gap:16px; }
  .news-toggle-label{ display:none; }
  .news-toggle{ min-height:44px; min-width:44px; justify-content:center; }
  .news-headline{ font-size:1.05rem; }
  .news-body{ padding-bottom:24px; }
}
/* Related earlier items inside a news article (owner review 2026-11-05). */
.news-related{display:grid;gap:8px;margin:4px 0 18px}.news-item{scroll-margin-top:96px}