/* ============================================================
   CHINTAI NEXUS — chintainexus.com rebuild
   Design tokens sourced from the Chintai Nexus Identity Guidelines
   (May 2024 brand deck): Celeste, Sage, Teal, Lime, Taupe, Cedar.
   Variable NAMES are kept from the chintai.io token system for
   structural consistency; VALUES below are the Nexus palette.
   Do not introduce colours outside this system without 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{
  /* --- Chintai Nexus colour tokens --- */
  --navy: #004D24;          /* primary background — brand emerald */
  --navy-card: #0A5C2E;     /* card fill, slightly lighter than bg */
  --navy-card-hover: #0E6B36;
  --cyan: #B8FFF3;          /* Celeste — primary accent (Solutions / Live) */
  --gold: #D9F4C1;          /* Lime — secondary accent (CHEX / marketplace) */
  --orange: #A29076;        /* Cedar — interaction-only: hover/active glow */
  --yellow: #CEC2AE;        /* Taupe — interaction-only: sparing alert/highlight */
  --sage: #A1B28A;          /* Sage — tertiary tag / chip accent */
  --teal: #447A7F;          /* Teal — mid-tone, dividers & secondary chips */

  --text-primary: #FFFFFF;
  --text-secondary: #A9CBAF;
  /* The drop's #6E9179 was 2.87:1 on --navy, below the 4.5:1 WCAG AA minimum, and it carries the
     footer legal links, the 12.5px "Cookie settings" control, the stat labels and the team roles.
     Same hue and saturation, lightened until it clears AA on the card background (4.54:1) as well
     as on --navy (5.62:1) — team roles sit on cards, which are lighter than the page. */
  --text-tertiary: #B4C6B9;
  --border: #1D5C36;

  --cyan-15: rgba(184,255,243,.14);
  --gold-15: rgba(217,244,193,.14);
  --orange-15: rgba(162,144,118,.18);
  --sage-15: rgba(161,178,138,.16);

  --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: #08231F;
}
.btn-primary:hover{ background: var(--orange); color: #201A12; box-shadow: 0 0 24px rgba(162,144,118,.4); }
.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(0,77,36,.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:31px; 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: translate(-70px, -50%);
  width:59%;
  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(0,77,36,.6) 58%, rgba(0,77,36,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(184,255,243,.35); }
.pillar-card.future{ border-color: rgba(217,244,193,.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; }

/* ---------- 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(184,255,243,.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;
  max-width: 1000px;
  margin: 0 auto;
  justify-content: center;
}
.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(184,255,243,.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; }

/* ---------- case study cards (Client page) ---------- */
.case-grid{ display:flex; flex-direction:column; gap: 26px; }
.case-card{
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px;
  scroll-margin-top: 100px;
}
.case-card-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.case-card-head h3{ font-size: 1.3rem; }
.case-card .case-sub{ color: var(--text-tertiary); font-size: .85rem; margin: 6px 0 24px; }
.case-tag{
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--sage-15);
  color: var(--sage);
  white-space: nowrap;
  flex-shrink: 0;
}
.case-cols{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.case-col h4{
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cyan);
  margin-bottom: 10px;
}
.case-col p{ font-size: .89rem; color: var(--text-secondary); line-height: 1.65; }

/* ---------- ecosystem / asset-class strip variant ---------- */
.asset-class-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; }

/* ---------- 2-up card grid (e.g. Company > Standards/Network) ---------- */
.card-grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 20px; max-width: 820px; }
@media (max-width: 640px){ .card-grid-2{ grid-template-columns: 1fr; } }

/* ---------- 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(206,194,174,.35);
  background: rgba(206,194,174,.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(0,77,36,.55) 0%, var(--navy) 62%); }
  .hero-bleed .hero-bg{ width: 63%; opacity: .35; }
  .hero-copy{ padding: 70px 0 60px; max-width: 100%; }
  .card-grid{ grid-template-columns: repeat(2,1fr); }
  .client-grid{ grid-template-columns: repeat(2,1fr); }
  .asset-class-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; }
  .case-cols{ grid-template-columns: 1fr; gap: 20px; }
  .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; }
  .client-grid{ grid-template-columns: 1fr; }
  .asset-class-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; }
  .case-card{ padding: 24px; }
}
/* ============================================================
   Integration additions (Sept 2026): contact form wired to /api/contact. Tokens only.
   ============================================================ */
[hidden]{ display:none !important; }
body.modal-open{ overflow:hidden; }

/* ---------- forms (contact) ---------- */
.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; }