/* Bolt Advisory — Brand Tokens */
:root {
  --ba-ink: #2A323D;
  --ba-ink-2: #1A1F26;
  --ba-ink-soft: #4A5564;
  --ba-gold: #B8842B;
  --ba-gold-deep: #8E641F;
  --ba-cream: #F5F2EC;
  --ba-cream-2: #EDE7DA;
  --ba-line: #D8D1BF;
  --ba-line-soft: #E5DFD3;
  --ba-white: #FBF9F4;

  --ba-serif: 'Newsreader', 'Source Serif 4', Georgia, serif;
  --ba-sans: 'Geist', 'Söhne', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --ba-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --ba-hand: 'Caveat', 'Kalam', cursive;
}

/* Reset within artboards */
.ba-root, .ba-root * { box-sizing: border-box; }
.ba-root { font-family: var(--ba-sans); color: var(--ba-ink); background: var(--ba-cream); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.ba-root p { margin: 0; }
.ba-root h1, .ba-root h2, .ba-root h3, .ba-root h4 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }
.ba-root a { color: inherit; text-decoration: none; }
.ba-root button { font-family: inherit; cursor: pointer; }

/* Logo glyph — clipboard with bolt, rendered with CSS */
.ba-logo { display: inline-flex; align-items: center; gap: 10px; }
.ba-logo-mark { width: 28px; height: 34px; flex: 0 0 auto; }
.ba-logo-text { font-family: var(--ba-sans); font-weight: 600; letter-spacing: 0.12em; font-size: 13px; line-height: 1; text-transform: uppercase; }
.ba-logo-text small { display: block; font-size: 10px; letter-spacing: 0.18em; font-weight: 500; opacity: 0.75; margin-top: 4px; }

/* Striped placeholder for imagery */
.ba-stripes {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 11px,
    rgba(42, 50, 61, 0.06) 11px 12px
  );
}
.ba-stripes-gold {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 11px,
    rgba(184, 132, 43, 0.18) 11px 12px
  );
}
.ba-placeholder-label {
  font-family: var(--ba-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ba-ink-soft);
  opacity: 0.65;
}

/* ─── Interaction states ─────────────────────────────────────────── */
/* Pill CTAs and underlined text links get a subtle hover. */
.ba-btn { transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease; }
.ba-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.ba-link { transition: opacity 0.15s ease, color 0.15s ease; }
.ba-link:hover { opacity: 0.65; }
.ba-nav-links a { transition: color 0.15s ease, opacity 0.15s ease; }
.ba-nav-links a:hover { color: var(--ba-gold-deep); }
.ba-contact-link { transition: color 0.15s ease; }
.ba-contact-link:hover { color: var(--ba-gold); }

/* ─── Layout grids (kept here so media queries can override them) ── */
.ba-hero-grid { display: grid; grid-template-columns: 1fr 280px; gap: 72px; align-items: start; }
.ba-hero-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.ba-approach-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 96px; align-items: start; }
.ba-caps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ba-line); }
.ba-record-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 48px; }
.ba-record-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ba-record-table { min-width: 720px; background: var(--ba-cream); border: 1px solid var(--ba-line); }
.ba-principal-grid { display: grid; grid-template-columns: 320px 1fr; gap: 72px; align-items: start; }
.ba-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: end; }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ba-container { padding-left: 40px !important; padding-right: 40px !important; }
  .ba-approach-grid { grid-template-columns: 1fr; gap: 28px; }
  .ba-cta-grid { grid-template-columns: 1fr; gap: 48px; align-items: start; }
  .ba-principal-grid { grid-template-columns: 1fr; gap: 48px; }
  .ba-caps-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .ba-container { padding-left: 22px !important; padding-right: 22px !important; }
  .ba-nav-links { display: none !important; }
  .ba-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .ba-hero-metrics { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .ba-caps-grid { grid-template-columns: 1fr; }
  .ba-record-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* Portraits are fixed-width on desktop; let them shrink on phones. */
  .ba-portrait { width: 100% !important; max-width: 320px; height: auto !important; aspect-ratio: 1 / 1; }
  .ba-cred-row { grid-template-columns: 1fr !important; gap: 4px !important; }
  .ba-career-row { grid-template-columns: 1fr !important; gap: 2px !important; }
}