/* Local layout helpers for the website kit. Pulls tokens from ../../colors_and_type.css. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--fg-secondary);
  font-family: var(--font-sans);
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ── Top nav ───────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg-canvas) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.nav-actions {
  display: flex; align-items: center; gap: 16px;
}

/* ── Theme toggle (sun/moon) ───────────────────────────── */
.theme-toggle {
  position: relative;
  width: 44px; height: 36px;
  border: 1px solid var(--border-default);
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-secondary);
  transition: border-color 200ms, color 200ms, background 200ms;
  padding: 0;
}
.theme-toggle:hover {
  color: var(--umber-600);
  border-color: var(--umber-600);
}
.theme-toggle-icon {
  position: absolute; inset: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(.5,0,.2,1);
}
.theme-toggle-icon svg { width: 16px; height: 16px; }
/* Light mode: show moon (click to go dark) */
.theme-toggle-icon.sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.theme-toggle-icon.moon { opacity: 1; transform: rotate(0deg) scale(1); }
/* Dark mode: show sun (click to go light) */
:root[data-theme="dark"] .theme-toggle-icon.sun,
.dark .theme-toggle-icon.sun { opacity: 1; transform: rotate(0deg) scale(1); }
:root[data-theme="dark"] .theme-toggle-icon.moon,
.dark .theme-toggle-icon.moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
.nav-links {
  display: flex; gap: 36px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--fg-secondary);
}
.nav-links a {
  border: none; color: inherit; padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, color 200ms;
}
.nav-links a:hover { border-bottom-color: var(--gold-600); color: var(--fg-primary); }
.nav-links a.active { border-bottom-color: var(--navy-800); color: var(--fg-primary); }

/* ── Logo lockup ───────────────────────────────────────── */
.logo {
  display: flex; align-items: center; gap: 14px;
  user-select: none;
  border: none;
}
.logo-mark-img {
  height: 48px;
  width: auto;
  display: block;
  /* The mark is intrinsically two-toned (copper + charcoal); same image renders light & dark */
}
.logo-text { display: flex; flex-direction: column; }
.logo-name { font-family: var(--font-wordmark); font-size: 28px; font-weight: 400; letter-spacing: 0.2em; color: var(--navy-800); line-height: 1; }

.logo.dark .logo-name { color: var(--dm-fg-primary, #E8E2D6); font-weight: 500; }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
  padding: 13px 24px; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}
.btn-primary { background: var(--navy-800); color: #fff; }
.btn-primary:hover { background: var(--navy-900); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-gold { background: var(--gold-600); color: #fff; }
.btn-gold:hover { background: var(--gold-700); box-shadow: var(--shadow-accent); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--navy-800); border-color: var(--border-default); }
.btn-secondary:hover { border-color: var(--navy-800); }
.btn-secondary.dark { color: #fff; border-color: rgba(255,255,255,0.2); }
.btn-secondary.dark:hover { border-color: #fff; }
.btn svg { width: 14px; height: 14px; }

/* ── Eyebrow ────────────────────────────────────────────── */
.eyebrow {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.42em; color: var(--fg-quaternary);
  margin: 0;
}
.eyebrow.gold { color: var(--gold-700); }
.eyebrow.on-dark { color: var(--navy-300); }

.eyebrow-row { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.eyebrow-row .eyebrow { margin: 0; }
.eyebrow-row .eyebrow-rule { flex: 0 0 40px; height: 1px; background: rgba(28,45,64,0.3); }
.eyebrow-row.on-dark .eyebrow-rule { background: rgba(255,255,255,0.3); }

/* ── Sections ──────────────────────────────────────────── */
section { padding: 120px 0; }
section.tight { padding: 88px 0; }
/* Alternating tone section — warm stone gray in light mode, medium stone gray in dark mode.
   Text colors auto-switch via semantic tokens, no per-element override needed. */
section.tone { background: var(--bone-200); }
section.dark p { color: var(--navy-300); }

/* ── Hero ──────────────────────────────────────────────── */
.hero h1 {
  font-family: var(--font-serif);
  font-weight: 450;
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--fg-primary);
  max-width: 14ch;
  margin: 0 0 32px;
  text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--gold-700); font-weight: 450; }
.hero .lead {
  font-size: 19px;
  font-weight: 450;
  line-height: 1.65;
  max-width: 56ch;
  color: var(--fg-secondary);
  margin: 0 0 40px;
}
.hero-actions { display: flex; gap: 14px; align-items: center; }
.hero-meta {
  margin-top: 88px; display: flex; gap: 56px;
  border-top: 1px solid var(--border-subtle); padding-top: 28px;
}
.hero-meta-item { display: flex; flex-direction: column; gap: 8px; }
.hero-meta-item .num {
  font-family: var(--font-serif); font-size: 36px; font-weight: 500;
  color: var(--fg-primary); line-height: 1;
}
.hero-meta-item .lbl {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-quaternary); font-weight: 500;
}

/* ── Capability grid ───────────────────────────────────── */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-subtle); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.cap {
  background: var(--bg-canvas);
  padding: 40px 36px 44px;
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer;
  transition: background 200ms;
  position: relative;
}
.cap:hover { background: #fff; }
.cap-icon { width: 28px; height: 28px; color: var(--navy-800); stroke-width: 1.5; }
.cap-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 32px;            /* enforce baseline so h3 below it lands at consistent y across all cards */
}
.cap-head .more { margin-top: 0; line-height: 1; }
.cap-head .more svg { width: 14px; height: 14px; }   /* constrain arrow so .more never exceeds icon height */
.cap-head .cap-status { line-height: 1; }
.cap h3 { margin: 0; font-size: 22px; font-weight: 600; color: var(--fg-primary); }
.cap p { margin: 0; font-size: 14.5px; font-weight: 450; line-height: 1.65; color: var(--fg-secondary); }
.cap .more {
  margin-top: 14px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-primary); font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  opacity: 0; transition: opacity 200ms;
}
.cap .more.interest {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit;
}
.cap:hover .more { opacity: 1; }
/* Copper bar: hover-revealed on every card (no per-card persistent treatment). */
.cap::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--umber-600);
  opacity: 0; transition: opacity 200ms;
}
.cap:hover::before { opacity: 1; }

/* Coming soon — visually quieter, with a small pill */
.cap.coming-soon { background: var(--bg-canvas); }
.cap.coming-soon .cap-icon,
.cap.coming-soon h3,
.cap.coming-soon p { opacity: 0.62; }
.cap.coming-soon:hover .cap-icon,
.cap.coming-soon:hover h3,
.cap.coming-soon:hover p { opacity: 0.88; }
.cap.coming-soon .more { color: var(--gold-700, var(--gold-600)); }
.cap-status {
  /* Inline in cap-head row, same vertical alignment as the icon. Label only — card itself is the click target. */
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--umber-700, var(--umber-600));
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  line-height: 1;
  background: transparent;
}

/* ── Offering detail modal — wider, content-focused, no form ─── */
.modal-detail { max-width: 640px; }
.modal-detail h3 { margin: 8px 0 32px; font-size: 28px; font-weight: 500; color: var(--fg-primary); }
.detail-section { margin-bottom: 24px; }
.detail-section h4 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--umber-700, var(--umber-600));
  margin: 0 0 8px;
}
.detail-section p { margin: 0; color: var(--fg-secondary); font-size: 15px; line-height: 1.65; }
.modal-detail .modal-actions { margin-top: 32px; }

/* Card click affordance — pointer cursor on the entire card now that the whole thing is the trigger */
.cap[role="button"]:focus-visible {
  outline: 2px solid var(--umber-600);
  outline-offset: -2px;
}
.dark .cap.coming-soon .more,
:root[data-theme="dark"] .cap.coming-soon .more,
.dark .cap-status,
:root[data-theme="dark"] .cap-status { color: var(--gold-500, var(--gold-600)); }

/* ── Section header pattern ────────────────────────────── */
.section-head {
  margin-bottom: 64px;
  max-width: 76ch;            /* widened from 64ch — gives the h2 + eyebrow more breathing room */
  border-left: 2px solid var(--umber-600);
  padding-left: 32px;
}
.section-head .lead { max-width: 64ch; }   /* keep lead text at readable line length even as container widens */
.section-head h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  margin: 0 0 24px;
  text-wrap: balance;
}
.section-head .lead {
  font-size: 19px; font-weight: 450; line-height: 1.65; color: var(--fg-secondary);
  margin: 0; max-width: 56ch;
}

/* ── AI philosophy section ─────────────────────────────── */
.philosophy {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.25;
  color: var(--fg-primary);
  border-left: 2px solid var(--umber-600);
  padding-left: 32px;
  margin: 0;
  text-wrap: balance;
  display: block;
}
.pull-quote-attr {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-secondary); padding-left: 32px;
  line-height: 1.4;
  margin-top: 56px;
}

.principles { display: flex; flex-direction: column; gap: 0; }
.principle {
  display: flex; gap: 24px; padding: 24px 0;
  border-top: 1px solid var(--border-subtle);
}
.principle:last-child { border-bottom: 1px solid var(--border-subtle); }
.principle .num {
  font-family: var(--font-mono); font-size: 12px; color: var(--umber-600);
  letter-spacing: 0.04em; flex-shrink: 0; padding-top: 4px;
}
.principle h4 { color: var(--fg-primary); font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.principle p { color: var(--fg-secondary); font-size: 14.5px; font-weight: 450; line-height: 1.6; margin: 0; }

/* ── Advisor card ──────────────────────────────────────── */
.advisor {
  display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: center;
  padding: 48px; background: #fff; border: 1px solid var(--border-subtle);
  border-radius: 4px; box-shadow: var(--shadow-sm);
}
.advisor-photo {
  width: 280px; height: 340px;
  background: linear-gradient(135deg, var(--bone-200), var(--bone-300));
  border-radius: 4px; position: relative; overflow: hidden;
}
.advisor-photo::after {
  content: "EL"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 88px; color: rgba(28,45,64,0.18);
  font-weight: 300; letter-spacing: -0.02em;
}
.advisor-name { font-family: var(--font-serif); font-weight: 600; font-size: 32px; color: var(--fg-primary); margin: 0 0 6px; line-height: 1.1; }
.advisor-role { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-quaternary); font-weight: 500; margin: 0 0 24px; }
.advisor-bio { font-size: 16px; font-weight: 450; line-height: 1.7; color: var(--fg-secondary); margin: 0 0 24px; max-width: 56ch; }
.advisor-creds { display: flex; flex-wrap: wrap; gap: 8px; }
.cred {
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  padding: 5px 10px; border-radius: 2px;
  border: 1px solid var(--border-default); color: var(--fg-secondary);
}

/* ── Big CTA ───────────────────────────────────────────── */
.big-cta {
  text-align: center;
  padding: 140px 0;
  background: var(--bg-canvas);
  border-top: 1px solid var(--border-subtle);
}
.big-cta h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(40px, 4.8vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 16px 0 32px;
  max-width: 18ch; margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
.big-cta .lead { max-width: 52ch; margin: 0 auto 40px; font-size: 18px; font-weight: 450; line-height: 1.65; }

/* ── Footer ────────────────────────────────────────────── */
.footer { background: var(--navy-900); color: var(--navy-300); padding: 80px 0 48px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-blurb { font-size: 14px; line-height: 1.7; max-width: 36ch; color: var(--navy-300); margin: 24px 0 0; }
.footer-col h5 { color: #fff; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; margin: 0 0 20px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: var(--navy-300); font-size: 14px; font-weight: 500; border: none; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  padding-top: 28px; display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; letter-spacing: 0.04em; color: var(--navy-400);
}

/* ── Modal ─────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(14, 24, 34, 0.6); backdrop-filter: blur(4px);
  z-index: 100; display: flex; align-items: center; justify-content: center; padding: 32px;
  animation: fade 200ms ease-out;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #fff; border-radius: 4px; padding: 48px;
  width: 100%; max-width: 560px;
  box-shadow: var(--shadow-xl);
  animation: lift 280ms cubic-bezier(0.25,0.1,0.25,1);
}
@keyframes lift { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.modal h3 { font-family: var(--font-serif); font-weight: 500; font-size: 32px; letter-spacing: -0.01em; margin: 12px 0 12px; line-height: 1.15; }
.modal p { font-size: 15px; line-height: 1.6; color: var(--fg-secondary); margin: 0 0 28px; }
.modal-form { display: grid; gap: 16px; }
.modal-form label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-quaternary); font-weight: 600; display: block; margin-bottom: 6px;
}
.modal-form input, .modal-form textarea, .modal-form select {
  width: 100%; font-family: var(--font-sans); font-size: 15px;
  background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 2px;
  padding: 11px 14px; outline: none; color: var(--fg-primary);
}
.modal-form input:focus, .modal-form textarea:focus, .modal-form select:focus {
  border-color: var(--navy-800); background: #fff;
}
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }
.modal-close {
  background: none; border: none; color: var(--fg-tertiary); font-size: 14px;
  cursor: pointer; padding: 8px;
}
.modal-close:hover { color: var(--fg-primary); }

/* Sent state */
.sent { text-align: center; padding: 24px 0; }
.sent svg { width: 36px; height: 36px; color: var(--gold-600); }

/* Toast for "submitted" confirmation outside modal */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--navy-800); color: #fff; padding: 12px 22px; border-radius: 2px;
  font-size: 14px; box-shadow: var(--shadow-lg); z-index: 200;
  display: flex; align-items: center; gap: 10px;
  animation: toast 320ms cubic-bezier(0.25,0.1,0.25,1);
}
.toast svg { width: 16px; height: 16px; color: var(--gold-500); }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 8px);} to { opacity: 1; transform: translate(-50%, 0);} }

/* Insight section */
.insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.insight {
  display: flex; flex-direction: column; gap: 16px;
  padding: 0;
  cursor: pointer;
}
.insight-thumb {
  width: 100%; aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--bone-200), var(--bone-300));
  border-radius: 4px; position: relative; overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.insight-thumb.navy { background: linear-gradient(135deg, var(--navy-800), var(--navy-700)); }
.insight-thumb.gold { background: linear-gradient(135deg, var(--gold-600), var(--gold-700)); }
.insight-thumb-mark {
  position: absolute; bottom: 20px; left: 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.insight-thumb-mark .s { height: 6px; width: 28px; border-radius: 1px; }
.insight-thumb.bone .insight-thumb-mark .s { background: rgba(28,45,64,0.4); }
.insight-thumb.bone .insight-thumb-mark .s:nth-child(2) { background: var(--gold-600); }
.insight-thumb.navy .insight-thumb-mark .s { background: rgba(255,255,255,0.7); }
.insight-thumb.navy .insight-thumb-mark .s:nth-child(2) { background: var(--gold-500); }
.insight-thumb.gold .insight-thumb-mark .s { background: rgba(255,255,255,0.85); }
.insight-thumb.gold .insight-thumb-mark .s:nth-child(2) { background: var(--navy-800); }
.insight-thumb-mark .s:nth-child(1) { margin-left: 12px; }
.insight-thumb-mark .s:nth-child(2) { margin-left: 6px; }
.insight-thumb-mark .s:nth-child(3) { margin-left: 0; }
.insight-meta {
  display: flex; gap: 12px; align-items: center;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-quaternary); font-weight: 500;
}
.insight-meta .div { width: 0.5px; height: 10px; background: rgba(28,45,64,0.3); }
.insight h4 {
  font-family: var(--font-sans); font-weight: 600; font-size: 19px;
  color: var(--fg-primary); margin: 0; line-height: 1.3;
  transition: color 200ms;
}
.insight:hover h4 { color: var(--gold-700); }


/* ── Dark mode overrides ───────────────────────────────── */
:root[data-theme="dark"], .dark {
  /* Cap cards: lift to surface, hover to raised */
  --cap-bg: var(--dm-bg-surface);
  --cap-bg-hover: #243348;
  --advisor-bg: var(--dm-bg-surface);
  --modal-bg: var(--dm-bg-surface);
  --input-bg: var(--dm-bg-canvas);
}

:root[data-theme="dark"] .cap,
.dark .cap {
  background: var(--cap-bg);
  border-color: var(--dm-border-subtle);
}
:root[data-theme="dark"] .cap:hover,
.dark .cap:hover { background: var(--cap-bg-hover); }
:root[data-theme="dark"] .cap-icon,
.dark .cap-icon { color: var(--dm-fg-primary); }

:root[data-theme="dark"] .advisor,
.dark .advisor {
  background: var(--advisor-bg);
  border-color: var(--dm-border-subtle);
}

/* Dark mode: tone sections use a medium stone gray (warm undertone) instead of navy.
   Default sections stay on --dm-bg-canvas (dark navy). Creates navy → stone alternation. */
:root[data-theme="dark"] section.tone,
.dark section.tone { background: #2A2B2D; }

/* Eyebrow rule — default uses navy at 30% (invisible on dark mode). Flip to warm-bone at 30% in dark mode. */
:root[data-theme="dark"] .eyebrow-row .eyebrow-rule,
.dark .eyebrow-row .eyebrow-rule { background: rgba(232, 226, 214, 0.3); }

:root[data-theme="dark"] .modal,
.dark .modal { background: var(--modal-bg); color: var(--dm-fg-primary); }
:root[data-theme="dark"] .modal-form input,
:root[data-theme="dark"] .modal-form textarea,
:root[data-theme="dark"] .modal-form select,
.dark .modal-form input,
.dark .modal-form textarea,
.dark .modal-form select {
  background: var(--input-bg);
  border-color: var(--dm-border-default);
  color: var(--dm-fg-primary);
}
:root[data-theme="dark"] .modal-form input:focus,
:root[data-theme="dark"] .modal-form textarea:focus,
:root[data-theme="dark"] .modal-form select:focus,
.dark .modal-form input:focus,
.dark .modal-form textarea:focus,
.dark .modal-form select:focus {
  border-color: var(--umber-500);
  background: var(--input-bg);
}

/* Logo: in dark mode, lift the wordmark color for legibility (mark is image-based, no recolor needed) */
:root[data-theme="dark"] .logo:not(.dark) .logo-name,
.dark .logo:not(.dark) .logo-name { color: var(--dm-fg-primary); }

/* Buttons: keep navy primary, but soften pure white to bone */
:root[data-theme="dark"] .btn-primary,
.dark .btn-primary { color: var(--bone-100); }
:root[data-theme="dark"] .btn-secondary,
.dark .btn-secondary { color: var(--dm-fg-primary); border-color: var(--dm-border-default); }
:root[data-theme="dark"] .btn-secondary:hover,
.dark .btn-secondary:hover { border-color: var(--dm-fg-primary); }

/* Sticky nav: token-aware (already uses color-mix on --bg-canvas) */

/* Insight thumbnails — bone variant gets the dm surface */
:root[data-theme="dark"] .insight-thumb,
.dark .insight-thumb {
  background: linear-gradient(135deg, var(--dm-bg-surface), #2A3A4D);
  border-color: var(--dm-border-subtle);
}

/* ── Brief (Insights single-piece layout) ───────────────── */
.brief {
  max-width: 68ch;
  margin-left: auto; margin-right: auto;   /* center the narrow column */
  padding: 48px;
  background: var(--bg-canvas);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid var(--umber-600);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
}
.brief-header { margin-bottom: 28px; }
.brief-meta {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-secondary); font-weight: 600;
  margin-bottom: 16px;
}
.brief-meta .div { width: 1px; height: 12px; background: var(--border-default); }
.brief-header h3 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  color: var(--fg-primary);
  text-wrap: balance;
}
.brief-body p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-secondary);
}
.brief-body p:last-child { margin-bottom: 0; }
.brief-body em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--fg-primary);
  font-weight: 500;
}
.brief-close {
  padding-top: 18px;
  margin-top: 8px !important;
  border-top: 1px solid var(--border-subtle);
  color: var(--fg-primary) !important;
  font-weight: 500;
}

/* Brief responsive */
@media (max-width: 767px) {
  .brief { padding: 32px 24px; }
  .brief-header { margin-bottom: 24px; }
}

/* ═════════════════════════════════════════════════════════════
   RESPONSIVE — three breakpoints
   ≤1023px: tablet landscape (iPad horizontal, smaller laptops)
   ≤767px:  tablet portrait (iPad vertical)
   ≤479px:  defensive phone support
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  .container { padding: 0 32px; }

  /* Capabilities: 3 → 2 cols (cards stay readable) */
  .cap-grid { grid-template-columns: repeat(2, 1fr); }

  /* Advisor: photo above bio */
  .advisor { grid-template-columns: 1fr; gap: 32px; padding: 36px; }
  .advisor-photo { width: 100%; max-width: 320px; height: 380px; }

  /* Section spacing tightens slightly */
  section { padding: 96px 0; }
  section.tight { padding: 72px 0; }

  /* Hero stats: allow wrap so they don't overflow */
  .hero-meta { flex-wrap: wrap; gap: 36px 48px; }
}

@media (max-width: 767px) {
  .container { padding: 0 24px; }

  /* Capabilities: 2 → 1 col */
  .cap-grid { grid-template-columns: 1fr; }
  .cap { padding: 32px 28px 36px; }

  /* Philosophy: pull-quote on top, principles below */
  .philosophy { grid-template-columns: 1fr; gap: 48px; }
  .pull-quote { font-size: 30px; }
  .pull-quote-attr { margin-top: 32px; }

  /* Hero scales down */
  .hero h1 { font-size: clamp(36px, 7vw, 56px); }
  .hero-meta { gap: 28px 40px; margin-top: 56px; padding-top: 24px; }
  .hero-meta-item .num { font-size: 36px; }

  /* Section heads */
  .section-head { margin-bottom: 48px; padding-left: 20px; }
  .section-head h2 { font-size: clamp(26px, 4.5vw, 36px); }

  /* Footer: 4 cols → 2 */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }

  /* Modals: respect viewport edges */
  .modal { padding: 32px 28px; }
  .modal-detail { max-width: calc(100vw - 32px); }
  .modal h3 { font-size: 26px; }
  .modal-detail h3 { font-size: 24px; }

  /* Advisor */
  .advisor { padding: 28px; }
  .advisor-photo { height: 320px; max-width: 280px; }

  /* Sections tighten more */
  section { padding: 72px 0; }
  section.tight { padding: 56px 0; }
}

@media (max-width: 479px) {
  .container { padding: 0 16px; }

  /* Nav: hide secondary links; keep logo + theme + primary CTA */
  .nav-links { display: none; }
  .nav-actions { gap: 8px; }

  /* Hero stats stack */
  .hero-meta { flex-direction: column; gap: 20px; }

  /* Footer: stack to single column */
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }

  /* Section heads */
  .section-head { padding-left: 16px; }

  /* Modals */
  .modal { padding: 24px 20px; border-radius: 0; min-height: 100vh; max-width: 100vw; }
  .modal-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .modal-actions .btn { width: 100%; justify-content: center; }
  .modal-close { width: 100%; }

  /* Sections */
  section { padding: 56px 0; }
  section.tight { padding: 40px 0; }
  .hero h1 { font-size: clamp(32px, 9vw, 44px); }
}