/* ============================================================
   CHINTAI — chintai.io rebuild
   Design tokens per dev handover §3. Do not introduce colours
   outside this system without a design sign-off.
   ============================================================ */

/* Poppins (SIL Open Font License 1.1, see fonts/OFL.txt) — self-hosted so the site makes no
   third-party request for fonts. Generated from the Google Fonts css2 API, latin + latin-ext. */
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('fonts/poppins-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('fonts/poppins-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('fonts/poppins-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('fonts/poppins-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* --- colour tokens (approved, Apr 2026 swatch) --- */
  --navy: #0A253A;          /* primary background */
  --navy-card: #0F2E44;     /* card fill, slightly lighter than bg */
  --navy-card-hover: #123651;
  --cyan: #00C8FF;          /* primary accent — Live */
  --gold: #DAA520;          /* secondary accent — Future */
  --orange: #FF8C00;        /* interaction-only: hover/active/glow */
  --yellow: #FFDC00;        /* interaction-only: sparing alert/highlight */

  --text-primary: #FFFFFF;
  --text-secondary: #8FA3B8;
  --text-tertiary: #6E8299;
  --border: #1C3A52;

  --cyan-15: rgba(0,200,255,.15);
  --gold-15: rgba(218,165,32,.15);
  --orange-15: rgba(255,140,0,.15);

  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1200px;
  --radius: 14px;
  --radius-sm: 8px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  /* Reserve scrollbar space on every page regardless of content length,
     so the visible content width doesn't shift between a short page
     (e.g. clients-track-record.html, ~1000px tall) and a long one
     (e.g. index.html, ~3400px tall). Without this, a page that needs
     to scroll renders slightly narrower than one that doesn't, on any
     browser/OS where the scrollbar takes up layout space. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body{
  margin: 0;
  background: var(--navy);
  color: var(--text-primary);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font-family: inherit; cursor: pointer; }
:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; }

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

h1,h2,h3,h4{
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 800; }
h2{ font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
h3{ font-size: 1.15rem; }
p{ margin: 0; }
.eyebrow{
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--cyan);
}
.muted{ color: var(--text-secondary); }
.section{ padding: 88px 0; }
.section-tight{ padding: 56px 0; }
.section-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.divider{
  height:1px;
  background: var(--border);
  border:0;
  margin: 0;
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .92rem;
  border: 1px solid transparent;
  transition: all .18s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--cyan);
  color: #04141F;
}
.btn-primary:hover{ background: var(--orange); color: #1a0f00; box-shadow: 0 0 24px rgba(255,140,0,.35); }
.btn-secondary{
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}
.btn-secondary:hover{ background: var(--gold-15); }
.btn-ghost{
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}
.btn-ghost:hover{ border-color: var(--cyan); color: var(--cyan); }
.btn-sm{ padding: 11px 18px; font-size: .82rem; }

/* ---------- status tags (Live / Future) ---------- */
.tag{
  display: inline-flex;
  align-items:center;
  gap:6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.tag::before{
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background: currentColor;
}
.tag-live{ color: var(--cyan); background: var(--cyan-15); }
.tag-future{ color: var(--gold); background: var(--gold-15); }

/* ---------- header ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  background: rgba(10,37,58,.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 16px 32px;
  max-width: var(--container);
  margin: 0 auto;
  gap: 24px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .06em;
  flex-shrink: 0;
  padding: 9px 0;
}
.logo svg{ width: 30px; height:30px; }
.logo-lockup img{ display:block; height:26px; width:auto; }
.footer-brand .logo-lockup img{ height:22px; }
.main-nav{
  display:flex;
  align-items:center;
  gap: 30px;
  flex-wrap: wrap;
}
.main-nav > ul{ display:flex; gap: 28px; align-items:center; }
.main-nav a.nav-link{
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.main-nav a.nav-link:hover,
.main-nav a.nav-link.active{
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}
.utility-cluster{
  display:flex;
  align-items:center;
  gap: 16px;
}
.utility-cluster a.util-link{
  font-size: .85rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.utility-cluster a.util-link:hover{ color: var(--cyan); }
.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--border);
  border-radius:8px;
  width:44px; height:44px;
  align-items:center;
  justify-content:center;
  color: var(--text-primary);
}

/* ---------- breadcrumb ---------- */
.breadcrumb{
  padding: 22px 0 0;
  font-size: .82rem;
  color: var(--text-tertiary);
}
.breadcrumb a{ color: var(--text-secondary); }
.breadcrumb a:hover{ color: var(--cyan); }

/* ---------- hero (homepage) ---------- */
.hero{
  position: relative;
  overflow: hidden;
  padding: 90px 0 70px;
  border-bottom: 1px solid var(--border);
}
.hero.hero-bleed{ padding: 0; }
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items:center;
}
.hero-bleed{
  padding: 0;
  min-height: 560px;
  display:flex;
  align-items:center;
}
.hero-bleed .hero-bg{
  position:absolute;
  top:50%;
  right:0;
  transform: translateY(-50%);
  width:70%;
  height:auto;
  object-fit: contain;
  object-position: center right;
  z-index:0;
}
.hero-bleed .hero-scrim{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 40%, rgba(10,37,58,.6) 58%, rgba(10,37,58,0) 76%);
  z-index:1;
}
.hero-bleed .wrap{ position:relative; z-index:2; width:100%; }
.hero-copy{ max-width: 640px; padding: 100px 0 80px; }
.hero h1{ margin-bottom: 20px; }
.hero .credibility{
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 46ch;
  margin-bottom: 34px;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 30px;}
.compliance-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: .78rem;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px 8px 10px;
}
.compliance-badge .dot{ width:8px;height:8px;border-radius:50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.hero-visual{ position: relative; }

/* ---------- generic page header (Template A/B) ---------- */
.page-header{
  padding: 34px 0 56px;
  border-bottom: 1px solid var(--border);
}
.page-header h1{ margin: 14px 0 14px; }
.page-header .desc{ font-size: 1.05rem; color: var(--text-secondary); max-width: 62ch; margin-bottom: 18px; }

/* ---------- stat strip ---------- */
.stat-strip{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat-cell{
  background: var(--navy-card);
  padding: 26px 20px;
  text-align:center;
}
.stat-num{
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--cyan);
  display:block;
  margin-bottom: 4px;
}
.stat-label{ font-size: .76rem; color: var(--text-tertiary); }

/* ---------- card grid (Template A) ---------- */
.card-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pillar-card{
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  text-align:left;
  width:100%;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
  display:flex;
  flex-direction:column;
  gap: 14px;
  color: var(--text-primary);
}
.pillar-card:hover{ transform: translateY(-3px); background: var(--navy-card-hover); }
.pillar-card.live{ border-color: rgba(0,200,255,.35); }
.pillar-card.future{ border-color: rgba(218,165,32,.35); }
.pillar-card.selected.live{ border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }
.pillar-card.selected.future{ border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.pillar-card .card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.pillar-card .card-icon{
  width: 40px; height:40px;
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: var(--cyan-15);
  color: var(--cyan);
  flex-shrink:0;
}
.pillar-card.future .card-icon{ background: var(--gold-15); color: var(--gold); }
.pillar-card h3{ margin: 0; }
.pillar-card p{ color: var(--text-secondary); font-size: .9rem; }

/* ---------- asset class grid (What to tokenise detail) ---------- */
.asset-class-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.asset-class-card{
  background: var(--navy);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px;
}
.asset-class-card .card-icon{
  width: 34px; height:34px;
  border-radius: 9px;
  display:flex; align-items:center; justify-content:center;
  background: var(--cyan-15);
  color: var(--cyan);
  margin-bottom: 12px;
}
.asset-class-card h4{ margin:0 0 6px; font-size: .96rem; }
.asset-class-card p{ margin:0; color: var(--text-secondary); font-size: .84rem; line-height:1.5; }

/* ---------- detail panel ---------- */
.detail-panel{
  margin-top: 36px;
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
}
.detail-panel .tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 20px; }
.detail-panel .proof-tag{
  font-size: .76rem;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
}
.detail-panel .side{
  border-left: 1px solid var(--border);
  padding-left: 32px;
}
.detail-panel .side dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color: var(--text-tertiary); margin-top:16px; }
.detail-panel .side dt:first-child{ margin-top:0; }
.detail-panel .side dd{ margin:4px 0 0; color: var(--text-secondary); font-size:.9rem; }

/* ---------- CTA banner ---------- */
.cta-banner{
  background: linear-gradient(120deg, var(--navy-card), var(--navy));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-banner h3{ font-size: 1.3rem; }

/* ---------- client chooser (homepage) ---------- */
.client-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
/* 3-column variant (e.g. Investor Relations CTA cards) — self-contained
   responsive rules so it never depends on inline style overrides, which
   would otherwise block the mobile breakpoints below. */
.cta-grid-3{ grid-template-columns: repeat(3,1fr) !important; }
@media (max-width: 980px){ .cta-grid-3{ grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 640px){ .cta-grid-3{ grid-template-columns: 1fr !important; } }
.client-card{
  background: var(--navy-card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition: border-color .15s ease, transform .15s;
}
.client-card:hover{ border-color: var(--cyan); transform: translateY(-3px); }
.client-card .arrow{ color: var(--cyan); font-size:.85rem; margin-top:auto; }

/* ---------- compliance strip ---------- */
.compliance-strip{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content:center;
}
.compliance-chip{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius:999px;
  padding: 10px 18px;
  font-size: .84rem;
  color: var(--text-secondary);
}
.compliance-chip:hover{ border-color: var(--gold); color: var(--gold); }

/* ---------- article / insight cards (Template B) ---------- */
.tab-row{ display:flex; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; }
.tab-item{
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: .84rem;
  color: var(--text-secondary);
  box-sizing: border-box;
}
.tab-item.active{ border-color: var(--cyan); color: var(--cyan); background: var(--cyan-15); }

.featured-card{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  margin-bottom: 40px;
}
.featured-card .fc-media{
  background:
    repeating-linear-gradient(135deg, rgba(0,200,255,.06) 0 2px, transparent 2px 14px),
    var(--navy);
  border-right: 1px dashed var(--border);
  min-height: 260px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--text-tertiary);
  font-size: .78rem;
  text-align:center;
  padding: 20px;
  overflow: hidden;
}
.featured-card .fc-media:has(img){ border-right: 1px solid var(--border); padding: 0; }
.featured-card .fc-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-card .fc-body{ padding: 34px 34px 34px 0; display:flex; flex-direction:column; gap:14px; }
.featured-card .fc-meta{ font-size: .76rem; color: var(--text-tertiary); }

/* ---------- text-only link list (Resources sections — no imagery) ---------- */
.link-list{ display:flex; flex-direction:column; }
.link-row{
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.link-row:first-child{ padding-top:0; }
.link-row:last-child{ border-bottom:0; }
.link-row h3{ font-size: 1.05rem; }
.link-row h3 a{ color: var(--text-primary); }
.link-row h3 a:hover{ color: var(--cyan); }
.link-row .link-meta{ font-size:.78rem; color: var(--text-tertiary); }
.link-row .link-meta a{ color: var(--cyan); font-weight:600; }
.featured-link{ padding-bottom: 30px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.featured-link h2{ font-size: 1.4rem; margin: 10px 0 12px; }
.featured-link h2 a{ color: var(--text-primary); }
.featured-link h2 a:hover{ color: var(--cyan); }

.article-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.article-card{
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.article-card .ac-media{
  height: 130px;
  background: repeating-linear-gradient(135deg, rgba(0,200,255,.06) 0 2px, transparent 2px 14px), var(--navy);
  border-bottom: 1px dashed var(--border);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-tertiary); font-size:.72rem;
  overflow: hidden;
}
.article-card .ac-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-card .ac-media:has(img){ border-bottom: 1px solid var(--border); }
.article-card .ac-body{ padding: 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.article-card .ac-meta{ font-size:.72rem; color: var(--text-tertiary); margin-top:auto; }

.pagination{ display:flex; gap:8px; justify-content:center; margin-top: 40px; }
.pagination button{
  width:44px; height:44px;
  border-radius:8px;
  border:1px solid var(--border);
  background:transparent;
  color: var(--text-secondary);
}
.pagination button.active{ border-color: var(--cyan); color: var(--cyan); }

/* ---------- team cards ---------- */
.team-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.team-card{
  background: var(--navy-card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align:center;
}
.avatar{
  width: 74px; height:74px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--cyan-15), var(--gold-15));
  border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color: var(--cyan);
  overflow:hidden;
}
.avatar img{ width:100%; height:100%; object-fit:cover; object-position:center top; border-radius:50%; }
.team-card .role{ font-size:.8rem; color: var(--text-tertiary); margin-top:4px; }

/* ---------- placeholder image slot ---------- */
.asset-slot{
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-tertiary);
  font-size: .74rem;
  text-align:center;
  padding: 20px;
  background: rgba(255,255,255,.02);
}

/* ---------- footer ---------- */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 64px 0 30px;
  margin-top: 40px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: 28px;
  margin-bottom: 50px;
}
.footer-col h4{
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size: .87rem; color: var(--text-secondary); }
.footer-col a:hover{ color: var(--cyan); }
.footer-brand p{ color: var(--text-tertiary); font-size:.82rem; max-width: 32ch; margin-top:12px;}
.footer-legal{
  display:flex;
  justify-content: space-between;
  align-items:center;
  flex-wrap:wrap;
  gap: 14px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: .78rem;
  color: var(--text-tertiary);
}
.footer-legal .legal-links{ display:flex; gap: 20px; flex-wrap:wrap; }
.footer-legal a:hover{ color: var(--cyan); }

/* ---------- misc ---------- */
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:center; }
.confirm-flag{
  display:inline-block;
  font-size: .68rem;
  color: var(--yellow);
  border: 1px solid rgba(255,220,0,.35);
  background: rgba(255,220,0,.08);
  border-radius: 6px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  /* The toggle reveals .main-nav as a column, but its two rows are flex containers of their own
     and stay horizontal, so the link list ends up wider than the phone and the whole page scrolls
     sideways. They have to stack too. */
  .main-nav > ul{ flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
  .main-nav .utility-cluster{ flex-wrap: wrap; row-gap: 12px; width: 100%; }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-bleed .hero-scrim{ background: linear-gradient(180deg, rgba(10,37,58,.55) 0%, var(--navy) 62%); }
  .hero-bleed .hero-bg{ width: 90%; opacity: .35; }
  .hero-copy{ padding: 70px 0 60px; max-width: 100%; }
  .card-grid{ grid-template-columns: repeat(2,1fr); }
  .asset-class-grid{ grid-template-columns: repeat(2,1fr); }
  .client-grid{ grid-template-columns: repeat(2,1fr); }
  .team-grid{ grid-template-columns: repeat(2,1fr); }
  .article-grid{ grid-template-columns: repeat(2,1fr); }
  .stat-strip{ grid-template-columns: repeat(2,1fr); }
  .stat-cell:nth-child(5){ grid-column: span 2; }
  .detail-panel{ grid-template-columns: 1fr; padding: 26px; }
  .detail-panel .side{ border-left:0; border-top:1px solid var(--border); padding-left:0; padding-top:24px; }
  .footer-grid{ grid-template-columns: repeat(3,1fr); }
  .featured-card{ grid-template-columns: 1fr; }
  .featured-card .fc-media{ border-right:0; border-bottom:1px dashed var(--border); }
  .featured-card .fc-media:has(img){ border-bottom:1px solid var(--border); }
  .featured-card .fc-body{ padding: 26px; }
}
@media (max-width: 640px){
  .wrap{ padding: 0 20px; }
  .header-row{ padding: 14px 20px; }
  .card-grid{ grid-template-columns: 1fr; }
  .asset-class-grid{ grid-template-columns: 1fr; }
  .client-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: repeat(2,1fr); }
  .article-grid{ grid-template-columns: 1fr; }
  .stat-strip{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
  .two-col{ grid-template-columns: 1fr; }
  .cta-banner{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   Integration additions (Sept 2026): forms wired to /api/contact
   and the shareholder-only investor relations flow. Tokens only.
   ============================================================ */
[hidden]{ display:none !important; }
body.modal-open{ overflow:hidden; }

/* ---------- forms (contact + investor relations) ---------- */
.form-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  background: var(--navy-card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.form-field label{ font-size:.8rem; color: var(--text-secondary); display:block; margin-bottom:6px; }
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  background: var(--navy);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: .92rem;
}
.form-field select option{ color: var(--text-primary); background: var(--navy); }
.form-field textarea{ resize:vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{ outline:none; border-color: var(--cyan); }
.form-status{ font-size:.86rem; color: var(--cyan); }
.form-status.is-error{ color: var(--yellow); }
.btn:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none; }
.link-button{
  background:none;
  border:0;
  padding:0;
  color: var(--cyan);
  font: inherit;
  font-weight:600;
  cursor:pointer;
}
.link-button:hover{ color: var(--orange); }

/* ---------- investor relations list ---------- */
.ir-year{ margin-bottom: 40px; }
.ir-year:last-child{ margin-bottom: 0; }
.ir-year-title{
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.ir-actions{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:100;
  background: rgba(4,20,31,.78);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.modal{
  position:relative;
  width:100%;
  max-width:460px;
  background: var(--navy-card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.modal h3{ font-size:1.2rem; }
.modal form{ display:flex; flex-direction:column; gap:16px; }
.modal-close{
  position:absolute;
  top:12px;
  right:14px;
  background:none;
  border:0;
  color: var(--text-secondary);
  font-size:1.5rem;
  line-height:1;
}
.modal-close:hover{ color: var(--text-primary); }
.modal-footnote{ font-size:.86rem; }

/* ---------- webcast player ---------- */
.video-frame{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  background: var(--navy-card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }