/* ============================================================
   BCG Design Language — drop-in tokens + base styles
   Measured from bcg.com (October 2026). BCG's own system is
   namespaced --green-*, --accent-*, --neutral-*, --space-*;
   the semantic names below map onto those measured values.

   Fonts: Henderson BCG Sans/Serif are proprietary. The stacks
   below fall back to BCG's own declared fallbacks; for a closer
   free match load Newsreader 300 + Hanken Grotesk 300/400/700:
   <link href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300;6..72,700&family=Hanken+Grotesk:wght@300;400;700&display=swap" rel="stylesheet">
   Values are the 1024px breakpoint; 768 / 1440 overrides below.
   ============================================================ */

:root {
  /* ---- Colors ---- */
  --bcg-signal-lime: #96F878;
  --bcg-midnight-green: #0C2B15;
  --bcg-forest-focus: #197A56;
  --bcg-mint-band: #E3FDDB;
  --bcg-mint-tint: #D8F4EF;
  --bcg-mint-mid: #A8F0B8;
  --bcg-growth-green: #21BF61;
  --bcg-ink: #212427;
  --bcg-ink-charcoal: #232326;
  --bcg-ink-soft: #323232;
  --bcg-ink-muted: #696969;
  --bcg-ink-disabled: #898888;
  --bcg-canvas: #ffffff;
  --bcg-canvas-frosted: rgba(255,255,255,0.7);
  --bcg-parchment: #F1EEEA;
  --bcg-parchment-deep: #DCD5CE;
  --bcg-stone-300: #DFD7CD;
  --bcg-stone-400: #C4B5A4;
  --bcg-stone-500: #AB947E;
  --bcg-stone-700: #856E57;
  --bcg-gray-200: #F2F2F2;
  --bcg-gray-300: #D4D4D4;
  --bcg-gray-400: #B1B1B1;
  --bcg-hairline-rule: #CCCCCC;
  --bcg-alert-red: #D82216;
  --bcg-alert-red-tint: #FCE1DC;
  --bcg-warning-yellow: #FFCF24;
  --bcg-warning-yellow-tint: #FFFBE8;
  --bcg-logo-green: #144622;
  --bcg-on-dark: #ffffff;

  /* ---- Fonts ---- */
  --bcg-font-serif: "Newsreader", henderson-bcg-serif, "Palatino Linotype", Palatino, Garamond, Georgia, serif;
  --bcg-font-sans: "Hanken Grotesk", henderson-bcg-sans, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- Type scale (1024) — size / line-height ---- */
  --bcg-h1-size: 68px;        --bcg-h1-lh: 1.0;
  --bcg-h2-size: 48px;        --bcg-h2-lh: 1.0;
  --bcg-h3-size: 40px;        --bcg-h3-lh: 1.0;
  --bcg-h4-size: 32px;        --bcg-h4-lh: 1.2;
  --bcg-stat-size: 68px;      --bcg-stat-lh: 1.4;
  --bcg-lead-size: 24px;      --bcg-lead-lh: 1.2;
  --bcg-card-title-size: 22px; --bcg-card-title-lh: 1.2;
  --bcg-nav-size: 20px;       --bcg-nav-lh: 1.3;
  --bcg-body-lg-size: 18px;   --bcg-body-lg-lh: 1.3;
  --bcg-body-md-size: 15px;   --bcg-body-md-lh: 1.4;
  --bcg-body-sm-size: 13px;   --bcg-body-sm-lh: 1.4;
  --bcg-label-md-size: 13px;
  --bcg-label-sm-size: 11px;
  --bcg-caption-size: 12px;
  --bcg-button-size: 16px;
  --bcg-text-link-size: 13px;

  /* ---- Weights: 300 carries hierarchy, 700 is for uppercase only ---- */
  --bcg-weight-light: 300;
  --bcg-weight-regular: 400;
  --bcg-weight-bold: 700;

  /* ---- Radius grammar: press < contain < feature < media ---- */
  --bcg-radius-xs: 4px;
  --bcg-radius-sm: 5px;
  --bcg-radius-chip: 10px;
  --bcg-radius-action: 15px;
  --bcg-radius-container: 20px;
  --bcg-radius-tile: 25px;
  --bcg-radius-media: 30px;
  --bcg-radius-full: 50%;

  /* ---- Spacing (1024) ---- */
  --bcg-space-a: 4px;  --bcg-space-b: 8px;  --bcg-space-c: 12px; --bcg-space-d: 16px;
  --bcg-space-e: 20px; --bcg-space-f: 24px; --bcg-space-g: 32px; --bcg-space-h: 40px;
  --bcg-space-i: 48px; --bcg-space-j: 56px; --bcg-space-k: 64px; --bcg-space-l: 72px;
  --bcg-section-pad: 56px;
  --bcg-page-margin: 40px;
  --bcg-grid-gap: 16px;
  --bcg-header-height: 64px;
  --bcg-nav-inset: 40px;
  --bcg-max-width: 1920px;
  --bcg-measure: 708px;

  /* ---- The one shadow ---- */
  --bcg-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);

  /* ---- Motion ---- */
  --bcg-ease-spring: cubic-bezier(.64, 2, .67, 1.53);
  --bcg-duration: 0.25s;
}

@media (max-width: 1023px) {
  :root {
    --bcg-h1-size: 60px; --bcg-h2-size: 44px; --bcg-h3-size: 38px; --bcg-h4-size: 28px;
    --bcg-body-lg-size: 17px; --bcg-button-size: 14px;
    --bcg-space-j: 40px; --bcg-nav-inset: 32px;
  }
}
@media (max-width: 767px) {
  :root {
    --bcg-h1-size: 48px; --bcg-h2-size: 40px; --bcg-h3-size: 32px;
    --bcg-body-lg-size: 16px; --bcg-body-md-size: 14px; --bcg-label-md-size: 12px;
    --bcg-page-margin: 16px; --bcg-header-height: 56px; --bcg-nav-inset: 16px;
    --bcg-space-g: 24px; --bcg-space-j: 32px;
  }
}
@media (min-width: 1440px) {
  :root {
    --bcg-h1-size: 86px; --bcg-h1-lh: 1.1; --bcg-h2-size: 52px; --bcg-h3-size: 44px;
    --bcg-lead-size: 28px; --bcg-body-lg-size: 20px; --bcg-body-md-size: 16px;
    --bcg-body-sm-size: 14px; --bcg-label-md-size: 14px; --bcg-label-sm-size: 12px;
    --bcg-text-link-size: 14px;
    --bcg-page-margin: 80px; --bcg-header-height: 72px; --bcg-nav-inset: 80px;
  }
}
@media (min-width: 1920px) {
  :root {
    --bcg-h1-size: 96px; --bcg-h2-size: 60px; --bcg-h3-size: 52px; --bcg-h4-size: 44px;
    --bcg-lead-size: 32px; --bcg-body-lg-size: 24px; --bcg-body-md-size: 18px;
    --bcg-body-sm-size: 16px; --bcg-label-md-size: 16px; --bcg-label-sm-size: 14px;
    --bcg-button-size: 18px; --bcg-text-link-size: 16px;
    --bcg-space-g: 40px; --bcg-space-j: 72px;
  }
}

/* ============================================================
   Base
   ============================================================ */
.bcg {
  margin: 0;
  background: var(--bcg-canvas);
  color: var(--bcg-ink);
  font-family: var(--bcg-font-sans);
  font-size: 16px;
  font-weight: var(--bcg-weight-regular);
  line-height: 1.3;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
.bcg *, .bcg *::before, .bcg *::after { box-sizing: border-box; }
.bcg :where(a) { color: inherit; text-decoration: none; }
.bcg img { display: block; max-width: 100%; }
.bcg h1, .bcg h2, .bcg h3, .bcg h4, .bcg p { margin: 0; }

/* ---- Typography roles ---- */
.bcg-h1, .bcg-h2 {
  font-family: var(--bcg-font-serif);
  font-weight: var(--bcg-weight-light);
  color: var(--bcg-midnight-green);
  letter-spacing: 0;
  font-variation-settings: "opsz" 72;
}
.bcg-h1 { font-size: var(--bcg-h1-size); line-height: var(--bcg-h1-lh); }
.bcg-h2 { font-size: var(--bcg-h2-size); line-height: var(--bcg-h2-lh); }
.bcg-h3 { font-family: var(--bcg-font-sans); font-weight: var(--bcg-weight-light); font-size: var(--bcg-h3-size); line-height: var(--bcg-h3-lh); color: var(--bcg-ink); }
.bcg-h4 { font-family: var(--bcg-font-sans); font-weight: var(--bcg-weight-light); font-size: var(--bcg-h4-size); line-height: var(--bcg-h4-lh); }
.bcg-stat { font-weight: var(--bcg-weight-light); font-size: var(--bcg-stat-size); line-height: var(--bcg-stat-lh); }
.bcg-lead { font-weight: var(--bcg-weight-light); font-size: var(--bcg-lead-size); line-height: var(--bcg-lead-lh); }
.bcg-card-title { font-weight: var(--bcg-weight-light); font-size: var(--bcg-card-title-size); line-height: var(--bcg-card-title-lh); }
.bcg-nav-link { font-size: var(--bcg-nav-size); line-height: var(--bcg-nav-lh); }
.bcg-body-lg { font-weight: var(--bcg-weight-light); font-size: var(--bcg-body-lg-size); line-height: var(--bcg-body-lg-lh); }
.bcg-body-lg-regular { font-weight: var(--bcg-weight-regular); font-size: var(--bcg-body-lg-size); line-height: var(--bcg-body-lg-lh); }
.bcg-body-md { font-size: var(--bcg-body-md-size); line-height: var(--bcg-body-md-lh); }
.bcg-body-sm { font-size: var(--bcg-body-sm-size); line-height: var(--bcg-body-sm-lh); }
.bcg-label-md { font-size: var(--bcg-label-md-size); font-weight: var(--bcg-weight-bold); line-height: 1; text-transform: uppercase; }
.bcg-label-sm { font-size: var(--bcg-label-sm-size); font-weight: var(--bcg-weight-bold); line-height: 1; text-transform: uppercase; }
.bcg-label-sm-regular { font-size: var(--bcg-label-sm-size); font-weight: var(--bcg-weight-regular); line-height: 1; text-transform: uppercase; }
.bcg-caption { font-size: var(--bcg-caption-size); line-height: 1.4; }
.bcg-on-dark { color: var(--bcg-on-dark); }

/* ---- Text links: 1px hard-stop gradient underline, never coloured ---- */
.bcg-link, .bcg-text-link {
  color: inherit;
  padding-bottom: 2px;
  background-image: linear-gradient(90deg, currentColor, currentColor 47%, transparent 0, transparent 53%, currentColor 0, currentColor);
  background-repeat: no-repeat;
  background-position: 101% bottom;
  background-size: 210% 1px;
}
.bcg-text-link { font-size: var(--bcg-text-link-size); font-weight: var(--bcg-weight-bold); line-height: 1; text-transform: uppercase; }

/* ---- Layout ---- */
.bcg-container { max-width: var(--bcg-max-width); margin: 0 auto; padding: 0 var(--bcg-page-margin); }
.bcg-section { padding-top: var(--bcg-section-pad); padding-bottom: var(--bcg-section-pad); }
.bcg-band-mint { background: var(--bcg-mint-band); }
.bcg-band-parchment { background: var(--bcg-parchment); }
.bcg-band-midnight { background: var(--bcg-midnight-green); color: var(--bcg-on-dark); }
.bcg-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bcg-grid-gap); }
.bcg-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bcg-grid-gap); }
.bcg-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bcg-space-h); }
@media (max-width: 767px) { .bcg-grid-4, .bcg-grid-3, .bcg-grid-2 { grid-template-columns: 1fr 1fr; } }

/* ---- Header: floating frosted pills, the only shadow in the system ---- */
.bcg-header { position: fixed; inset: 0 0 auto 0; height: var(--bcg-header-height); display: flex; justify-content: space-between; align-items: center; padding: 0 var(--bcg-nav-inset); z-index: 10; pointer-events: none; }
.bcg-header-pill { pointer-events: auto; display: flex; align-items: center; gap: var(--bcg-space-d); height: var(--bcg-header-height); padding: 0 var(--bcg-space-f); background: var(--bcg-canvas-frosted); border-radius: var(--bcg-radius-container); box-shadow: var(--bcg-shadow); }
.bcg-subnav-chip { font-size: var(--bcg-label-md-size); line-height: 1; text-transform: uppercase; padding: 12px 8px; border-radius: var(--bcg-radius-action); }
.bcg-subnav-chip[aria-current] { background: var(--bcg-mint-band); }
.bcg-login { color: var(--bcg-ink-muted); font-size: 13px; text-transform: uppercase; text-decoration: underline; font-weight: var(--bcg-weight-bold); }

/* ---- Buttons ---- */
.bcg-btn {
  display: inline-flex; align-items: center; gap: var(--bcg-space-c);
  font-family: var(--bcg-font-sans); font-size: var(--bcg-button-size); font-weight: var(--bcg-weight-bold);
  line-height: 1; text-transform: uppercase; letter-spacing: 0;
  padding: 13px 24px; min-height: 48px; border: 3px solid transparent; border-radius: var(--bcg-radius-action);
  cursor: pointer; transition: background var(--bcg-duration) var(--bcg-ease-spring), padding var(--bcg-duration) ease-in;
}
.bcg-btn-primary { background: var(--bcg-signal-lime); color: var(--bcg-ink); }
.bcg-btn-primary.has-arrow { padding-right: 55px; position: relative; }
.bcg-btn-primary.has-arrow::after, .bcg-btn-secondary.has-arrow::after { content: "→"; position: absolute; right: 22px; font-weight: 400; }
.bcg-btn-primary:active { background: var(--bcg-midnight-green); color: var(--bcg-on-dark); }
.bcg-btn-primary:focus-visible { outline: none; background: var(--bcg-midnight-green); color: var(--bcg-on-dark); border-color: var(--bcg-on-dark); box-shadow: 0 0 0 2px var(--bcg-midnight-green); }
.bcg-btn-primary:disabled { background: var(--bcg-parchment-deep); color: var(--bcg-ink-disabled); cursor: default; }
.bcg-btn-secondary { background: var(--bcg-canvas); color: var(--bcg-ink); border-color: var(--bcg-ink); }
.bcg-btn-secondary.has-arrow { padding-right: 55px; position: relative; }
.bcg-btn-secondary:active { background: var(--bcg-gray-200); }
.bcg-btn-secondary:focus-visible { outline: none; background: var(--bcg-ink-soft); color: var(--bcg-on-dark); border-color: var(--bcg-on-dark); box-shadow: 0 0 0 2px var(--bcg-ink-soft); }
.bcg-carousel-control { width: 36px; height: 36px; border: 0; border-radius: var(--bcg-radius-sm); background: var(--bcg-gray-200); color: var(--bcg-ink); font-size: 14px; cursor: pointer; }

/* ---- Chips ---- */
.bcg-chip { display: inline-block; padding: 12px 24px; border: 1px solid var(--bcg-ink); border-radius: var(--bcg-radius-chip); font-size: var(--bcg-label-sm-size); line-height: 1; text-transform: uppercase; }
.bcg-chip-tag { padding: 8px 12px; font-size: 14px; }

/* ---- Tiles & cards ---- */
.bcg-tile-dark { background: var(--bcg-midnight-green); color: var(--bcg-on-dark); border-radius: var(--bcg-radius-tile); padding: var(--bcg-space-g); }
.bcg-tile-dark .bcg-h2 { color: var(--bcg-on-dark); }
.bcg-tile-frosted { background: var(--bcg-canvas-frosted); border-radius: var(--bcg-radius-container); padding: var(--bcg-space-g); }
.bcg-tile-outline { background: var(--bcg-canvas); border: 2px solid var(--bcg-parchment); border-radius: var(--bcg-radius-tile); padding: var(--bcg-space-f); }
.bcg-card { display: flex; flex-direction: column; gap: var(--bcg-space-d); }
.bcg-card-img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; border-radius: 0; background: var(--bcg-gray-300); }
.bcg-media { border-radius: var(--bcg-radius-media); overflow: hidden; }
.bcg-avatar { width: 114px; height: 114px; border-radius: var(--bcg-radius-media); object-fit: cover; }
.bcg-card-date { color: var(--bcg-ink-charcoal); }

/* ---- Forms ---- */
.bcg-input { height: 48px; padding: 10px; border: 0; border-radius: var(--bcg-radius-action); background: var(--bcg-canvas); color: var(--bcg-ink); font-family: inherit; font-size: var(--bcg-body-md-size); }
.bcg-input::placeholder { color: var(--bcg-ink-muted); }
.bcg-checkbox { width: 24px; height: 24px; margin: 0; appearance: none; border: 1px solid var(--bcg-ink-soft); border-radius: var(--bcg-radius-xs); background: var(--bcg-canvas-frosted); }
.bcg-rule { border: 0; border-top: 1px solid var(--bcg-hairline-rule); margin: 18px 0; }

/* ---- Footer ---- */
.bcg-footer { background: var(--bcg-parchment); padding: var(--bcg-section-pad) 0; }
.bcg-footer-link { display: block; font-weight: var(--bcg-weight-light); font-size: var(--bcg-card-title-size); line-height: var(--bcg-card-title-lh); padding-bottom: 2px; margin-bottom: var(--bcg-space-f); }
.bcg-footer-legal a { font-size: var(--bcg-label-sm-size); font-weight: var(--bcg-weight-bold); text-transform: uppercase; text-decoration: underline; margin-right: var(--bcg-space-f); }