/* BRIM · TEAM BIO PAGES · brim-team.css · 2026-10-18
   One stylesheet for every /about/team/<person> page (Chris Passarelli, Brian Wendroff, Eric P. Whittleton).
   Each Webflow page holds a small loader embed: this file, team/pages/<person>.js (the page content) and
   team/brim-team.js (reveal on scroll, live track record and ranking). A copy or style change is a push here.
   Colour tokens live on .tb-bio, never on :root, so they cannot overwrite the site's --brim-* tokens.
   (The old embeds set --brim-navy to var(--brim-navy) on :root, a loop that made most of the text invisible.) */
.tb-bio {
  --tb-navy: #02131F;
  --tb-navy-deep: #041A29;
  --tb-cream: #FAF8F3;
  --tb-cream-mid: #F0ECE1;
  --tb-gold: #C9A84C;
  --tb-gold-dark: #8A6626;
  --tb-blue: #31547E;
  --tb-ink-2: #1a1a1a;
  --tb-innov: #C9A84C;
  --tb-growth: #5A8A3C;
  --tb-core: #5B7FB5;
  --tb-lowvol: #9B72B0;
  --tb-serif: 'Cormorant Garamond', Georgia, serif;
  --tb-sans: 'DM Sans', -apple-system, sans-serif;
}
/* ── GLOBAL SECTION FRAMEWORK ── */
.tb-bio section {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}
.tb-bio .tb-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}
.tb-bio .tb-sec-white  { background: #fff; }
.tb-bio .tb-sec-cream  { background: var(--tb-cream); }
.tb-bio .tb-sec-navy   { background: var(--tb-navy-deep); }
.tb-bio section > .tb-inner { padding-top: 72px; padding-bottom: 72px; }

/* ── TYPOGRAPHY ── */
.tb-bio .tb-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.tb-bio .tb-eyebrow::before {
  content: '';
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--tb-gold), var(--tb-gold));
  flex-shrink: 0;
}
.tb-bio .tb-eyebrow span {
  font-family: var(--tb-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--tb-gold);
}
.tb-bio .tb-sec-navy .tb-eyebrow span { color: var(--tb-gold); }

.tb-bio .tb-heading {
  font-family: var(--tb-serif);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 400;
  line-height: 1.18;
  color: var(--tb-navy);
  margin-bottom: 12px;
}
.tb-bio .tb-heading em {
  font-style: italic;
  color: var(--tb-gold);
}
.tb-bio .tb-sec-navy .tb-heading { color: #fff; }
.tb-bio .tb-sec-navy .tb-heading em { color: var(--tb-gold); }

.tb-bio .tb-hr {
  width: 80px;
  height: 2px;
  border: none;
  background: linear-gradient(90deg, var(--tb-gold), var(--tb-gold));
  margin: 20px 0 0;
}

.tb-bio .tb-text {
  font-family: var(--tb-sans);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--tb-navy);
  max-width: 720px;
}
.tb-bio .tb-sec-navy .tb-text { color: rgba(240,236,225,0.8); }
.tb-bio .tb-sec-cream .tb-text { color: #1a1a1a; }

/* ── ANIMATIONS ── */
.tb-bio.tb-anim .tb-fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.tb-bio.tb-anim .tb-fade.tb-vis {
  opacity: 1;
  transform: translateY(0);
}


/* ================================================================
   SECTION 1 — WHITE: BIO + AT A GLANCE
   ================================================================ */
.tb-bio .tb-bio-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  margin-top: 32px;
}
.tb-bio .tb-bio-text p {
  font-family: var(--tb-sans);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--tb-navy);
  margin-bottom: 18px;
}
.tb-bio .tb-bio-text p:last-child { margin-bottom: 0; }

/* At a Glance sidebar */
.tb-bio .tb-glance {
  background: var(--tb-cream);
  border-radius: 12px;
  padding: 32px;
  border: 1px solid rgba(201,168,76,0.1);
  align-self: start;
  position: sticky;
  top: 100px;
}
.tb-bio .tb-glance-title {
  font-family: var(--tb-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--tb-gold);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tb-bio .tb-glance-title::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--tb-gold);
}
.tb-bio .tb-glance-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(2,19,31,0.06);
}
.tb-bio .tb-glance-item:last-child { border-bottom: none; }
.tb-bio .tb-glance-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(201,168,76,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tb-bio .tb-glance-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--tb-gold);
  stroke-width: 1.8;
  fill: none;
}
.tb-bio .tb-glance-label {
  font-family: var(--tb-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(2,19,31,0.45);
  margin-bottom: 2px;
}
.tb-bio .tb-glance-value {
  font-family: var(--tb-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--tb-navy);
  line-height: 1.4;
}


/* ================================================================
   SECTION 2 — CREAM: CAREER TIMELINE
   ================================================================ */
.tb-bio .tb-timeline {
  position: relative;
  margin-top: 40px;
  padding-left: 40px;
}
.tb-bio .tb-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--tb-gold), var(--tb-gold), rgba(201,168,76,0.15));
}
.tb-bio .tb-tl-item {
  position: relative;
  padding-bottom: 36px;
}
.tb-bio .tb-tl-item:last-child { padding-bottom: 0; }

/* Timeline dot */
.tb-bio .tb-tl-item::before {
  content: '';
  position: absolute;
  left: -40px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tb-cream);
  border: 2.5px solid var(--tb-gold);
  z-index: 2;
}
/* Active/current dot */
.tb-bio .tb-tl-item.tb-tl-active::before {
  background: var(--tb-gold);
  box-shadow: 0 0 0 5px rgba(201,168,76,0.15);
}

.tb-bio .tb-tl-firm {
  font-family: var(--tb-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--tb-navy);
  line-height: 1.2;
  margin-bottom: 2px;
}
.tb-bio .tb-tl-role {
  font-family: var(--tb-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tb-gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}
.tb-bio .tb-tl-desc {
  font-family: var(--tb-sans);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.7;
  color: #1a1a1a;
  max-width: 640px;
}


/* ================================================================
   SECTION 3 — DARK NAVY: PERFORMANCE HIGHLIGHTS
   ================================================================ */
.tb-bio .tb-perf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.tb-bio .tb-perf-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.tb-bio .tb-perf-card:hover {
  border-color: rgba(201,168,76,0.25);
  transform: translateY(-3px);
}
/* Top accent bar */
.tb-bio .tb-perf-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tb-gold), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tb-bio .tb-perf-card:hover::before { opacity: 1; }

.tb-bio .tb-perf-year {
  font-family: var(--tb-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(240,236,225,0.4);
  margin-bottom: 10px;
}
.tb-bio .tb-perf-val {
  font-family: var(--tb-serif);
  font-size: 42px;
  font-weight: 500;
  color: var(--tb-gold);
  line-height: 1;
  margin-bottom: 8px;
}
.tb-bio .tb-perf-sub {
  font-family: var(--tb-sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(240,236,225,0.5);
  line-height: 1.4;
}

/* Ranking badge */
.tb-bio .tb-perf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
  padding: 10px 24px;
  border-radius: 8px;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.15);
}
.tb-bio .tb-perf-badge svg {
  width: 16px;
  height: 16px;
  stroke: var(--tb-gold);
  stroke-width: 2;
  fill: none;
}
.tb-bio .tb-perf-badge span {
  font-family: var(--tb-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tb-gold);
}


/* ================================================================
   SECTION 4 — WHITE: INVESTMENT PHILOSOPHY
   ================================================================ */
.tb-bio .tb-phil-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.tb-bio .tb-phil-card {
  background: var(--tb-cream);
  border-radius: 12px;
  padding: 32px 28px;
  border: 1px solid rgba(201,168,76,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tb-bio .tb-phil-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(2,19,31,0.08);
}
.tb-bio .tb-phil-num {
  font-family: var(--tb-serif);
  font-size: 38px;
  font-weight: 300;
  color: rgba(201,168,76,0.25);
  line-height: 1;
  margin-bottom: 12px;
}
.tb-bio .tb-phil-label {
  font-family: var(--tb-serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--tb-navy);
  margin-bottom: 10px;
  line-height: 1.25;
}
.tb-bio .tb-phil-desc {
  font-family: var(--tb-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(2,19,31,0.7);
}


/* ================================================================
   SECTION 5 — CREAM: STRATEGIES MANAGED
   ================================================================ */
.tb-bio .tb-strat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.tb-bio .tb-strat-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 24px;
  border: 1px solid rgba(2,19,31,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  display: block;
}
.tb-bio .tb-strat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(2,19,31,0.06);
}
.tb-bio .tb-strat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-bottom: 16px;
}
.tb-bio .tb-strat-name {
  font-family: var(--tb-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--tb-navy);
  margin-bottom: 6px;
}
.tb-bio .tb-strat-target {
  font-family: var(--tb-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(2,19,31,0.5);
  margin-bottom: 12px;
}
.tb-bio .tb-strat-desc {
  font-family: var(--tb-sans);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(2,19,31,0.65);
}
.tb-bio .tb-strat-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--tb-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--tb-gold-dark);
  text-decoration: none;
  transition: color 0.2s;
}
.tb-bio .tb-strat-link:hover { color: var(--tb-gold); }
.tb-bio .tb-strat-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}


/* ================================================================
   SECTION 6 — DARK NAVY: CTA
   ================================================================ */
.tb-bio .tb-cta-center {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.tb-bio .tb-cta-center .tb-eyebrow { justify-content: center; }
.tb-bio .tb-cta-center .tb-eyebrow::before { display: none; }
.tb-bio .tb-cta-center .tb-heading { color: #fff; }

.tb-bio .tb-cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
  flex-wrap: wrap;
}
.tb-bio .tb-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 8px;
  font-family: var(--tb-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.tb-bio .tb-cta-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.tb-bio .tb-cta-btn.cta-gold {
  background: linear-gradient(135deg, var(--tb-gold), var(--tb-gold-dark));
  color: var(--tb-navy);
}
.tb-bio .tb-cta-btn.cta-gold:hover {
  background: linear-gradient(135deg, var(--tb-gold), var(--tb-gold));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,168,76,0.25);
}
.tb-bio .tb-cta-btn.cta-outline {
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--tb-gold);
  background: transparent;
}
.tb-bio .tb-cta-btn.cta-outline:hover {
  border-color: var(--tb-gold);
  background: rgba(201,168,76,0.06);
}

.tb-bio .tb-disclosure {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--tb-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(240,236,225,0.3);
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}


/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .tb-bio .tb-bio-grid { grid-template-columns: 1fr; gap: 40px; }
  .tb-bio .tb-glance { position: static; }
  .tb-bio .tb-perf-grid { grid-template-columns: repeat(2, 1fr); }
  .tb-bio .tb-phil-grid { grid-template-columns: 1fr; }
  .tb-bio .tb-strat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tb-bio .tb-inner { padding-left: 24px; padding-right: 24px; }
  .tb-bio .tb-perf-grid { grid-template-columns: 1fr; }
  .tb-bio .tb-strat-row { grid-template-columns: 1fr; }
  .tb-bio .tb-timeline { padding-left: 32px; }
}

/* ================================================================
   V2 ADDITIONS (Oct 18 2026) — same system, new components
   ================================================================ */
/* The site renders every box square; say so here so the embed matches anywhere it is previewed. */
.tb-bio, .tb-bio *, .tb-bio *::before, .tb-bio *::after { border-radius: 0 !important; }
.tb-bio { color: var(--tb-navy); }

/* Section lede under a heading */
.tb-bio .tb-lede { margin: 4px 0 0; max-width: 640px; }

/* Key facts row (white section) */
.tb-bio .tb-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 36px;
  border-top: 1px solid rgba(2,19,31,0.12);
  border-bottom: 1px solid rgba(2,19,31,0.12);
}
.tb-bio .tb-stat {
  padding: 22px 20px 22px 24px;
  border-left: 1px solid rgba(2,19,31,0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tb-bio .tb-stat:first-child { border-left: 0; padding-left: 0; }
.tb-bio .tb-stat-val {
  font-family: var(--tb-sans);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--tb-navy);
}
.tb-bio .tb-stat-val--gold { color: var(--tb-gold-dark); }
.tb-bio .tb-stat-lbl {
  font-family: var(--tb-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(2,19,31,0.55);
}
.tb-bio .tb-bio-result {
  border-top: 1px solid rgba(2,19,31,0.08);
  padding-top: 18px;
}
.tb-bio .tb-bio-result b { font-weight: 600; }
.tb-bio .tb-bio-result a {
  color: var(--tb-gold-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--tb-gold);
  white-space: nowrap;
  margin-left: 4px;
}

/* Quantitative background cards (white cards on cream) */
.tb-bio .tb-q-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.tb-bio .tb-q-card {
  background: #fff;
  padding: 28px 26px;
  border: 1px solid rgba(2,19,31,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-width: 0;
}
.tb-bio .tb-q-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(2,19,31,0.06); }
.tb-bio .tb-q-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tb-bio .tb-q-ic {
  width: 36px; height: 36px; flex: none;
  background: rgba(201,168,76,0.1);
  display: flex; align-items: center; justify-content: center;
}
.tb-bio .tb-q-ic svg { width: 18px; height: 18px; stroke: var(--tb-gold-dark); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tb-bio .tb-q-tag {
  font-family: var(--tb-sans);
  font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--tb-gold-dark);
}
.tb-bio .tb-q-label {
  font-family: var(--tb-serif);
  font-size: 22px; font-weight: 600; line-height: 1.25;
  color: var(--tb-navy);
  margin-bottom: 10px;
}
.tb-bio .tb-q-desc {
  font-family: var(--tb-sans);
  font-size: 14px; font-weight: 400; line-height: 1.7;
  color: rgba(2,19,31,0.72);
}

/* Timeline additions */
.tb-bio .tb-sec-white .tb-tl-item::before { background: #fff; }
.tb-bio .tb-sec-white .tb-tl-item.tb-tl-active::before { background: var(--tb-gold); }
.tb-bio .tb-tl-meta {
  font-family: var(--tb-sans);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.3px;
  color: rgba(2,19,31,0.5);
  margin: -2px 0 10px;
}
.tb-bio .tb-tl-points {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-width: 640px;
}
.tb-bio .tb-tl-points li {
  position: relative;
  padding-left: 18px;
  font-family: var(--tb-sans);
  font-size: 14px; line-height: 1.6;
  color: var(--tb-ink-2);
}
.tb-bio .tb-tl-points li::before {
  content: '';
  position: absolute; left: 0; top: 0.72em;
  width: 8px; height: 1.5px;
  background: var(--tb-gold);
}
.tb-bio .tb-tl-tag {
  display: inline-block;
  vertical-align: 3px;
  margin-left: 10px;
  padding: 4px 9px;
  font-family: var(--tb-sans);
  font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--tb-gold-dark);
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.3);
}
.tb-bio .tb-tl-src {
  margin-top: 8px;
  font-family: var(--tb-sans);
  font-size: 12px; color: rgba(2,19,31,0.5);
}

/* Two badges under the track record */
.tb-bio .tb-perf-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.tb-bio .tb-perf-badges .tb-perf-badge { margin-top: 0; }

@media (max-width: 1024px) {
  .tb-bio .tb-q-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-bio .tb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-bio .tb-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .tb-bio .tb-stat:nth-child(n+3) { border-top: 1px solid rgba(2,19,31,0.12); }
}
@media (max-width: 600px) {
  .tb-bio .tb-q-grid { grid-template-columns: 1fr; }
  .tb-bio .tb-stat { padding: 18px 12px 18px 16px; }
  .tb-bio .tb-stat-val { font-size: 24px; }
  .tb-bio .tb-stat-lbl { font-size: 10px; letter-spacing: 1.1px; }
  .tb-bio .tb-tl-tag { display: table; margin: 8px 0 0; }
}


/* ================================================================
   TEAM PAGES — page hero portrait (Oct 18 2026)
   The standard people hero draws the photo at 96% of its frame, anchored to the bottom, which left a strip of
   frame background above the head now that every corner on the site is square. The photo now fills the frame.
   ================================================================ */
#brim-secondary-hero .br-portrait img { height: 100% !important; }

/* ================================================================
   TEAM PAGES — content edges match the page hero (Oct 18 2026, late)
   The hero frame is 1440px wide with a 48px gutter (28px and 22px on smaller screens). Those numbers come from the
   hero's own tokens, so every section below the hero now starts and ends on the same edges as the hero text.
   ================================================================ */
.tb-bio .tb-inner {
  max-width: var(--brim-hero-frame, 1440px);
  padding-left: var(--brim-hero-gutter, 48px);
  padding-right: var(--brim-hero-gutter, 48px);
}
/* The wider measure would stretch the bio paragraphs past 100 characters a line; cap them at 800px and give the
   At a Glance card the extra width on large screens. */
.tb-bio .tb-bio-text { max-width: 800px; }
@media (min-width: 1281px) {
  .tb-bio .tb-bio-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 96px; }
}

/* ================================================================
   TEAM PAGES — portrait framing (Oct 18 2026, late)
   The hero crops each photo to a 270 x 320 frame from the top of the image. Chris's photo is tall, so that left
   about 90px of background above his head, twice the headroom in Brian's and Eric's photos. Moving the crop down
   30% of the spare height puts the top of his head about 40px from the frame, level with theirs. Matched on the
   photo's asset id, so a new headshot starts from the default crop again.
   ================================================================ */
#brim-secondary-hero .br-portrait img[src*="66c64000872e53e60cbf001c"] { object-position: 50% 30% !important; }

/* ================================================================
   TEAM PAGES — portrait size (Oct 19 2026)
   Desktop only: the photo frame is 10% larger, 297 x 352 (was 270 x 320). Chris's and Eric's heroes keep their
   height; Brian's grows 24px, to about the same height as theirs. Tablet and phone keep the hero's own sizes.
   ================================================================ */
@media (min-width: 992px) {
  #brim-secondary-hero .br-portrait { max-width: 297px !important; height: 352px !important; }
}

/* ================================================================
   ESTATE PLANNING PAGE (/about/team/trust-attorney) — Oct 19 2026
   Same template as the bio pages. Its four cards sit two across (three across would leave one card alone on a row);
   one column on phones like every card grid.
   ================================================================ */
.tb-bio .tb-q-grid.tb-q-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) {
  .tb-bio .tb-q-grid.tb-q-grid--two { grid-template-columns: 1fr; }
}