/* Carbon-inspired tokens (simplified) */
:root {
  --bx-font: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Applied Intelligence Group brand tokens */
  --aig-black: #0b0b0c;
  --aig-white: #ffffff;
  --aig-gray-100: #f4f4f4;
  --aig-gray-900: #161616;
  --aig-blue-600: #0f62fe;
  --aig-blue-700: #0043ce;
  --aig-blue-800: #002d9c;

  /* Core UI tokens */
  --bx-header-bg: var(--aig-black);
  --bx-header-text: var(--aig-gray-100);
  --bx-link: var(--aig-blue-600);
  --bx-link-hover: var(--aig-blue-700);

  /* Core IBM / Carbon palette */
  --bx-background: #ffffff;
  --bx-text-primary: #161616;
  --bx-text-secondary: #525252;
  --bx-border-subtle: #e0e0e0;
  --bx-layer-01: #f4f4f4;
  --bx-layer-02: #ffffff;

  /* Primary action (Blue 60) */
  --bx-interactive-01: #0f62fe;

  /* Grays often used for secondary actions */
  --bx-interactive-02: #393939;

  /* Focus */
  --bx-focus: #0f62fe;

  /* Spacing (2/4/8 rhythm) */
  --s-02: 0.125rem; /* 2px */
  --s-04: 0.25rem;  /* 4px */
  --s-08: 0.5rem;   /* 8px */
  --s-12: 0.75rem;  /* 12px */
  --s-16: 1rem;     /* 16px */
  --s-24: 1.5rem;   /* 24px */
  --s-32: 2rem;     /* 32px */
  --s-40: 2.5rem;   /* 40px */
  --s-48: 3rem;     /* 48px */

  --radius: 0.25rem; /* Carbon tends to be subtle */
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--bx-font);
  background: var(--bx-background);
  color: var(--bx-text-primary);
  letter-spacing: 0;
}

/* Header (Carbon UI Shell-inspired) */
.bx-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bx-text-primary);
  color: #fff;
  border-bottom: 1px solid #262626;
}

.bx-header__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--s-24);
  height: 3rem; /* compact header */
  display: flex;
  align-items: center;
  gap: var(--s-24);
}

.bx-header__brand {
  text-decoration: none;
  color: #fff;
  display: inline-flex;
  align-items: center;
}

.aig-brand {
  gap: var(--s-12);
}

.aig-wordmark {
  height: 26px;
  width: auto;
  display: block;
}

/*
  Header logo sizing
  - Force the logo to visually fit within the fixed header height.
  - Keep aspect ratio (no stretching).
*/
.aig-header__logo {
  height: 44px;
  max-height: 44px;
  width: auto;
  max-width: 260px;
  display: block;
}

.aig-context-tag {
  margin-left: var(--s-12);
  padding: 2px 8px;
  border: 1px solid #393939;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.2;
  color: #c6c6c6;
}

.bx-header__brand-name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
}

.bx-header__nav {
  display: flex;
  gap: var(--s-16);
  flex: 1;
  align-items: center;
  min-width: 0;
}

.bx-header__nav-item {
  color: #c6c6c6;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--s-08) var(--s-08);
  border-radius: var(--radius);
}

.bx-header__nav-item:hover {
  color: #fff;
  background: #262626;
}

.bx-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-12);
}

/* Main content container */
.bx-content {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--s-40) var(--s-24);
}

/* Typography scale (simple Carbon-like hierarchy) */
h1 {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--s-16) 0;
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  margin: var(--s-32) 0 var(--s-12) 0;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: var(--s-24) 0 var(--s-08) 0;
}

p, li {
  color: var(--bx-text-primary);
  font-size: 1rem;
  line-height: 1.6;
}

.small {
  color: var(--bx-text-secondary);
  font-size: 0.875rem;
}

/* Sections / cards */
section {
  margin-bottom: var(--s-32);
}

.hero {
  padding: var(--s-32);
  background: var(--bx-layer-01);
  border: 1px solid var(--bx-border-subtle);
  border-radius: var(--radius);
}

.ctaBlock {
  padding: var(--s-24);
  background: var(--bx-layer-01);
  border: 1px solid var(--bx-border-subtle);
  border-radius: var(--radius);
}

/* Buttons (Carbon-like, but minimal) */
.bx-btn,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 var(--s-16);
  border-radius: 0; /* Carbon buttons are typically squared */
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}

.bx-btn--primary,
.button.primary {
  background: var(--bx-interactive-01);
  color: #fff;
}

.bx-btn--primary:hover,
.button.primary:hover {
  filter: brightness(0.95);
}

.button {
  border: 1px solid var(--bx-interactive-02);
  color: var(--bx-text-primary);
  background: transparent;
}

.button:hover {
  background: var(--bx-layer-01);
}

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-12);
  margin-top: var(--s-16);
}

/* Forms */
input, textarea, select {
  width: 100%;
  max-width: 44rem;
  font-family: var(--bx-font);
  font-size: 1rem;
  padding: var(--s-12) var(--s-12);
  border: 1px solid var(--bx-border-subtle);
  border-radius: 0;
  background: var(--bx-layer-02);
  color: var(--bx-text-primary);
  outline: none;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--bx-focus);
  box-shadow: 0 0 0 2px rgba(15, 98, 254, 0.25);
}

label {
  display: block;
  margin-bottom: var(--s-08);
  font-weight: 500;
}

/* Tables (CRM) */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border-bottom: 1px solid var(--bx-border-subtle);
  padding: var(--s-12) var(--s-12);
  text-align: left;
  font-size: 0.95rem;
}

th {
  color: var(--bx-text-secondary);
  font-weight: 600;
}

/* Footer */
.bx-footer {
  border-top: 1px solid var(--bx-border-subtle);
  background: #fff;
}

.bx-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--s-24);
  color: var(--bx-text-secondary);
  font-size: 0.875rem;
}

/* Footer layout */
.bx-footer__layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
}

.bx-footer__right {
  font-size: 0.875rem;
  color: var(--bx-text-secondary);
  white-space: nowrap;
}

/* Mobile: stack footer content */
@media (max-width: 860px) {
  .bx-footer__layout {
    flex-direction: column;
    align-items: flex-start;
  }

  .bx-footer__right {
    margin-top: var(--s-08);
  }
}

/* Responsive */
@media (max-width: 860px) {
  .bx-header__nav {
    display: none; /* keep it simple for now */
  }
  .bx-content {
    padding: var(--s-32) var(--s-16);
  }
  .hero {
    padding: var(--s-24);
  }

  .assessment__overview {
    grid-template-columns: 1fr;
  }
}
/* Breadcrumb (Carbon-inspired) */
.bx-breadcrumb { margin: 0 0 var(--s-16) 0; }
.bx-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--s-08);
  flex-wrap: wrap;
  align-items: center;
}
.bx-breadcrumb__item { color: var(--bx-text-secondary); font-size: 0.875rem; }
.bx-breadcrumb__item::after { content: "/"; margin-left: var(--s-08); color: #c6c6c6; }
.bx-breadcrumb__item:last-child::after { content: ""; }
.bx-breadcrumb__link {
  color: var(--bx-text-secondary);
  text-decoration: none;
}
.bx-breadcrumb__link:hover { text-decoration: underline; color: var(--bx-text-primary); }
.bx-breadcrumb__current { color: var(--bx-text-primary); font-weight: 600; }

/* Grid */
.bx-grid {
  display: grid;
  gap: var(--s-16);
}
.bx-grid--2 { grid-template-columns: 1fr 1fr; }
.bx-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 860px) {
  .bx-grid--2, .bx-grid--3 { grid-template-columns: 1fr; }
}

/* Tile (Carbon-like: squared, subtle border) */
.bx-tile {
  background: #fff;
  border: 1px solid var(--bx-border-subtle);
  border-radius: 0;
  padding: var(--s-16);
}
.bx-tile--layer { background: var(--bx-layer-01); }
.bx-tile__title { font-weight: 600; margin: 0 0 var(--s-08) 0; }
.bx-tile__body { margin: 0; color: var(--bx-text-secondary); }

/* Media frame for simple inline illustrations */
.bx-media {
  border: 1px solid var(--bx-border-subtle);
  background: #fff;
  padding: var(--s-08);
}
.bx-media img, .bx-media svg {
  width: 100%;
  height: auto;
  display: block;
}
/* Grid item that spans all columns */
.bx-grid__span-all {
  grid-column: 1 / -1;
}

/* Assessment overview (report image + “for / not for” lists) */
.assessment__overview {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-16);
  margin-top: var(--s-16);
}

.assessment__overview-media {
  padding: var(--s-08);
}

.assessment__overview-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

.assessment__overview-media img {
  width: 100%;
  height: auto;
  display: block;
}

.assessment__overview-aside {
  display: grid;
  gap: var(--s-16);
}

.assessment__list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--bx-text-secondary);
}

@media (max-width: 860px) {
  .assessment__overview {
    grid-template-columns: 1fr;
  }
}
/* Mobile hamburger */
.bx-header__menu-btn {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
}

/* Mobile menu panel */
.bx-mobile-menu {
  display: none;
  background: #161616;
  border-top: 1px solid #262626;
  padding: var(--s-16);
}

.bx-mobile-menu a {
  display: block;
  color: #c6c6c6;
  text-decoration: none;
  padding: var(--s-12) 0;
  font-size: 1rem;
}

.bx-mobile-menu a.primary {
  color: #fff;
  font-weight: 600;
}

.bx-mobile-menu a:hover {
  color: #fff;
}

/* Responsive behavior */
@media (max-width: 860px) {
  .bx-header__nav {
    display: none;
  }

  .bx-header__menu-btn {
    display: inline-flex;
  }

  .bx-header__actions {
    display: none;
  }

  .bx-mobile-menu.open {
    display: block;
  }
}

/* -----------------------------
   CRM shell (legacy header)
   ----------------------------- */

body.crm {
  background: var(--bg);
  color: var(--text);
}

body.crm header.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

body.crm header.top .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

body.crm header.top .brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 600;
}

body.crm header.top .brand .logo {
  font-size: 16px;
  letter-spacing: 0.2px;
}

body.crm header.top .brand .sub {
  font-size: 12px;
  opacity: 0.7;
}

body.crm header.top nav {
  display: flex;
  gap: 12px;
  flex: 1;
}

body.crm header.top nav a {
  color: var(--text);
  opacity: 0.85;
  padding: 6px 10px;
  border-radius: 10px;
  text-decoration: none;
}

body.crm header.top nav a:hover {
  background: rgba(21, 21, 21, 0.06);
  opacity: 1;
}

body.crm header.top .user {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.crm header.top .user .pill {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
}

body.crm main.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px;
}


/* Results: summary table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--bx-border-subtle);
  background: #fff;
}

.bx-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px; /* allows horizontal scroll on small screens */
}

.bx-table th,
.bx-table td {
  padding: var(--s-12) var(--s-12);
  border-bottom: 1px solid var(--bx-border-subtle);
  text-align: left;
  vertical-align: top;
  font-size: 0.95rem;
  line-height: 1.45;
}

.bx-table thead th {
  background: var(--bx-layer-01);
  font-weight: 600;
  color: var(--bx-text-primary);
}

.summary-table a {
  color: var(--bx-link);
  text-decoration: none;
  font-weight: 600;
}

.summary-table a:hover {
  text-decoration: underline;
  color: var(--bx-link-hover);
}

/* Results: project briefs */
.project-brief {
  scroll-margin-top: 5rem; /* anchor offset for sticky header */
}

.brief-card {
  border: 1px solid var(--bx-border-subtle);
  background: #fff;
  padding: var(--s-16);
}

.brief-grid {
  align-items: start;
}

.brief-media {
  padding: var(--s-08);
  background: #fff;
}

.brief-media img {
  border-radius: 14px;
}

.brief-content {
  display: grid;
  gap: var(--s-16);
}

.callout {
  border: 1px solid var(--bx-border-subtle);
  background: #fff;
  padding: var(--s-16);
}

.callout__title {
  margin: 0 0 var(--s-08) 0;
  font-size: 1rem;
}

.callout__list {
  margin: 0;
  padding-left: 1.2rem;
}

.callout__list li {
  color: var(--bx-text-secondary);
}

.callout--problem {
  background: var(--bx-layer-01);
}

.callout--solution {
  background: #fff;
}

.callout--results {
  background: #defbe6; /* Carbon-like green 10 */
  border-color: #a7f0ba;
}

.callout--results .callout__list li {
  color: #0e6027;
}

@media (max-width: 860px) {
  .bx-table { min-width: 720px; }
  .brief-card { padding: var(--s-12); }
  .bx-project-core { grid-template-columns: 1fr; }
}

/* =========================
   Results – Project Layout
   ========================= */

/* Project wrapper */
.bx-project {
  margin: 4rem 0;
}

/* Full-width architecture image */
.bx-project-image {
  margin-bottom: 2rem;
}

/* High-contrast media frame for architecture diagrams */
.bx-project-image {
  background: #161616; /* Carbon near-black */
  padding: var(--s-16);
  border-radius: var(--radius);
  border: 1px solid #262626;
}

/* Slight lift for light diagrams */
.bx-project-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Problem / Solution two-column layout */
.bx-project-core {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Results callout */
.bx-project-results {
  background-color: #e7f4ea; /* soft green */
  padding: 1.75rem 2rem;
  border-radius: 6px;
}

.bx-project-results h3 {
  margin-top: 0;
}

/* Back to summary link */
.bx-backlink {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.brief-core {
  margin-top: var(--s-16);
  margin-bottom: var(--s-16);
}
/* Leadership bios */
.bioList {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
}

.bioCard {
  display: flex;
  align-items: flex-start;
  gap: var(--s-24);
}

.bioPhoto {
  width: 160px;
  height: auto;
  flex-shrink: 0;
  border-radius: 4px;
}

.bioBody {
  flex: 1;
}

.bioBody > h3 {
  margin-top: 0;
}

@media (max-width: 860px) {
  .bioCard {
    flex-direction: column;
  }

  .bioPhoto {
    width: 100%;
    max-width: 220px;
  }
}