/* ── Compact hero: solid text band + a separate, unobstructed photo strip.
   Nothing is ever overlaid on top of the photo — no gradient, no card, no
   text — so every face in the team photo stays fully visible on every
   screen size. This page intentionally does not reuse the generic
   text-over-photo .page-hero pattern for that reason. */
.lead-hero{background:var(--navy);}
.lead-hero-text{padding:104px 5% 40px;text-align:center;}
.lead-hero-text .page-hero-label{margin-bottom:18px;}
.lead-hero-text h1{font-family:var(--ff-head);font-size:clamp(28px,4vw,44px);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:#fff;margin:0 0 14px;}
.lead-hero-text p{font-size:15px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.7);max-width:480px;margin:0 auto;}
.lead-hero-photo{width:100%;aspect-ratio:21/8;overflow:hidden;}
.lead-hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%;}
/* ── Philosophy strip ───────────────────────────────────────── */
.lead-phil-strip{display:flex;justify-content:center;align-items:center;gap:48px;padding:22px 5%;background:var(--navy2);flex-wrap:wrap;}
.lead-phil-item{display:flex;align-items:baseline;gap:8px;}
.lead-phil-item-title{font-family:var(--ff-head);font-size:14px;font-weight:700;color:var(--blue3);}
.lead-phil-item-sub{font-size:12.5px;color:rgba(255,255,255,.5);}
.lead-phil-divider{width:1px;height:16px;background:rgba(255,255,255,.12);}
/* ── Intro (dark) ───────────────────────────────────────────── */
.lead-intro-section{padding:30px 5%;background:var(--navy2);}
.lead-intro{max-width:760px;margin:0 auto;}
.lead-intro p{font-size:15px;font-weight:300;line-height:1.8;color:rgba(255,255,255,.68);margin:0 0 20px;}
/* Opening statement — centred, italic Syne, matches the italic treatment
   already used on .lead-closing-note further down this page, so the page
   opens and closes on the same emphasis device. */
.lead-intro-statement{font-family:var(--ff-head);font-style:italic;font-weight:700;font-size:clamp(22px,3vw,28px);line-height:1.35;color:#fff;text-align:center;max-width:640px;margin:0 auto 34px;position:relative;padding-bottom:26px;}
.lead-intro-statement::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:56px;height:2px;background:var(--blue3);}
.lead-intro p:last-child{margin-bottom:0;}
/* ── Team section ───────────────────────────────────────────── */
.lead-team-section{padding:64px 5% 88px;background:var(--white);}
.lead-team-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:36px;}
.lead-team-head .section-title{margin:0;}
/* Tab filter UI hidden per request — grid still defaults to showing all
   14 members (the "All" filter was already the default state, so hiding
   the tabs doesn't change what's shown, just removes the control). Markup
   and page-leadership.js are left in place in case this needs to come back. */
.lead-tabs{display:none;}
.lead-tab{border:none;background:none;padding:8px 16px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;font-family:inherit;}
.lead-tab.is-active{background:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.08);font-weight:600;color:var(--text);}
/* 4-col portrait cards, matched to the V2 mockup: 3:4 photo with a
   group-label chip overlaid top-left, name/role in a padded body below.
   Flexbox + fixed basis (not CSS grid) so an incomplete last row centers
   itself instead of hugging the left edge with empty grid cells trailing. */
.lead-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;}
.lead-card{flex:0 0 calc((100% - 44px)/3);border:1px solid rgba(0,0,0,0.07);border-radius:14px;overflow:hidden;background:var(--white);box-shadow:0 1px 2px rgba(20,30,60,.04);text-align:center;}
.lead-card-photo{position:relative;width:100%;aspect-ratio:3/4;background:var(--navy2);overflow:hidden;}
.lead-card-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block;}
.lead-card-pending{width:100%;height:100%;background:repeating-linear-gradient(45deg,#132038,#132038 8px,#0F1A2E 8px,#0F1A2E 16px);display:flex;align-items:center;justify-content:center;}
.lead-card-pending span{font-size:9px;font-family:ui-monospace,monospace;color:rgba(255,255,255,.35);letter-spacing:.04em;}
.lead-card-body{padding:14px 14px 16px;}
.lead-name{font-family:var(--ff-head);font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:3px;}
.lead-role{font-size:11px;font-weight:300;color:var(--muted);line-height:1.4;}
.lead-linkedin{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--off);color:var(--blue2);margin-top:10px;}
.lead-linkedin:hover{background:var(--blue2);color:#fff;}
/* ── Managing Partner split band ───────────────────────────── */
.lead-ceo-band{background:var(--navy);display:grid;grid-template-columns:0.6fr 1.4fr;align-items:start;}
.lead-ceo-photo{position:sticky;top:32px;aspect-ratio:3/5;max-height:calc(100vh - 64px);align-self:start;}
.lead-ceo-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;display:block;}
.lead-ceo-content{padding:30px 5%;}
.lead-ceo-heading{margin-bottom:22px; font-size: 32px}
.lead-letter{max-width:820px;}
.lead-letter p{font-size:14.5px;font-weight:300;line-height:1.8;color:rgba(255,255,255,.68);margin:0 0 12px;text-align:left;}
.lead-letter p:last-of-type{margin-bottom:0;}
.lead-letter-sig{display:flex;align-items:center;gap:14px;margin-top:32px;padding-top:28px;border-top:1px solid rgba(255,255,255,0.12);}
.lead-letter-sig-name{font-family:var(--ff-head);font-size:15px;font-weight:700;color:#fff;}
.lead-letter-sig-role{font-size:12.5px;color:var(--muted);margin-top:2px;}
/* ── CTA band — split layout: message left, full (uncropped) photo right.
   No overlay/scrim needed since text no longer sits on top of the image;
   the photo is object-fit:contain so nothing gets cropped out. */
.lead-cta-band{background:var(--navy3);display:grid;grid-template-columns:1.1fr 0.9fr;align-items:center;}
.lead-cta-content{padding:64px 5%;text-align:center;display:flex;flex-direction:column;align-items:center;}
.lead-cta-content h2{font-family:var(--ff-head);font-size:clamp(24px,3.2vw,32px);font-weight:800;color:#fff;letter-spacing:-.03em;margin:0 0 18px;}
.lead-cta-content h2 em{font-style:normal;color:var(--blue3);}
.lead-cta-content p{max-width:520px;margin:0 auto 10px;font-size:14px;font-weight:300;line-height:1.7;color:rgba(255,255,255,.75);}
.lead-cta-content .cta-actions{margin-top:22px;}
.lead-cta-photo{height:100%;min-height:420px;display:flex;align-items:center;justify-content:center;padding:32px;}
.lead-cta-photo img{width:100%;height:100%;max-height:520px;object-fit:contain;display:block;}
/* ── Closing note ───────────────────────────────────────────── */
.lead-closing-note{max-width:640px;margin:0 auto;text-align:center;font-family:var(--ff-head);font-style:italic;font-size:15px;font-weight:600;color:var(--textm);line-height:1.6;}
/* ── Filter states (JS toggles this class) ─────────────────── */
.lead-card.is-hidden{display:none;}
/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:1024px){
  .lead-ceo-band{grid-template-columns:1fr;}
  .lead-ceo-photo{position:static;aspect-ratio:16/9;max-height:none;}
  .lead-hero-photo{aspect-ratio:16/7;}
  .lead-cta-band{grid-template-columns:1fr;}
  .lead-cta-content{padding:48px 6% 0;}
  .lead-cta-photo{min-height:300px;padding:24px;}
}
@media(max-width:768px){
  .lead-phil-strip{gap:20px;}
  .lead-phil-divider{display:none;}
  .lead-hero-text{padding:92px 6% 32px;}
  .lead-hero-photo{aspect-ratio:16/8;}
}
@media(max-width:600px){
  .lead-card{flex-basis:calc((100% - 22px)/2);}
  .lead-team-head{flex-direction:column;align-items:flex-start;}
  .lead-hero-text{padding:84px 6% 28px;}
  .lead-hero-text h1{font-size:24px;}
  /* Squarer aspect on narrow screens shows the full photo (whole group,
     all faces) rather than a thin cropped sliver — there's no text on top
     of it to protect a "safe zone" for, so this is purely a framing choice. */
  .lead-hero-photo{aspect-ratio:4/3;}
  .lead-cta-content{padding:40px 6% 0;}
  .lead-cta-content p{font-size:13px;}
  .lead-cta-photo{min-height:260px;padding:16px;}
}
@media(max-width:400px){
  .lead-card{flex-basis:100%;}
}