:root{
  --navy:#082f3b;
  --navy-2:#25545f;
  --muted-strong:#5b7f88;
  --cream:#f6f3ec;
  --cream-dim:#ece7db;
  --ink:#1c2622;
  --muted:#4d5c58;
  --gold:#b8925a;
  --gold-2:#e3cfae;
  --line:#d8d2c2;
  --white:#ffffff;
}

*{box-sizing:border-box;}

.team-section{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px 120px;
  font-family:'DM Sans',Arial,sans-serif;
  color:var(--ink);
}

.page-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#082f3b 0%,#2e4a3d 55%,#5c6c40 100%);
  padding:90px 32px 110px;
  margin:0 0 64px;
}
.page-hero::before{
  content:'';
  position:absolute;
  top:-120px;right:-160px;
  width:520px;height:520px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.10);
  pointer-events:none;
}
.page-hero::after{
  content:'';
  position:absolute;
  top:-40px;right:-40px;
  width:340px;height:340px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.14);
  pointer-events:none;
}
.page-hero-inner{
  position:relative;
  z-index:1;
  max-width:min(1180px,calc(100% - 36px));
  margin:0 auto;
}
.page-hero .kicker{
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 16px;
}
.page-hero h1{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:clamp(34px,4.8vw,60px);
  line-height:1.06;
  letter-spacing:-.025em;
  margin:0 0 18px;
  color:#fff;
  max-width:820px;
  text-align:left;
  text-shadow:0 2px 24px rgba(0,0,0,0.25);
}
.page-hero-sub{
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,0.82);
  margin:0;
  max-width:680px;
  text-align:left;
  text-transform:none;
  letter-spacing:normal;
}
.page-hero-sub-2{
  margin-top:8px;
}
.page-hero-title{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}

.category{margin-bottom:64px;}

.category-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:16px;
  margin-bottom:28px;
}

.category-head h2{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:26px;
  margin:0;
  color:var(--navy);
}

.category-head span{
  font-size:13px;
  color:var(--muted);
}

/* ===== Member photo card ===== */
.people-grid,
.roster-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:center;
  gap:26px;
}

.member-card{
  position:relative;
  flex:1 1 190px;
  max-width:230px;
  aspect-ratio:3/4;
  min-height:220px;
  border-radius:20px;
  overflow:hidden;
  background:var(--cream-dim);
  box-shadow:0 1px 3px rgba(8,47,59,0.08);
}

.member-photo{
  position:absolute;
  inset:0;
}
.member-photo img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:bottom center;
  display:block;
}
.member-photo .placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;
  font-size:52px;
  color:var(--navy-2);
  background:linear-gradient(160deg,var(--cream-dim) 0%, var(--line) 140%);
}

.member-label{
  position:absolute;
  left:12px;right:12px;bottom:12px;
  background:var(--white);
  border-radius:14px;
  padding:12px 12px 12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  box-shadow:0 12px 26px rgba(8,47,59,0.16);
}

.member-name{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:15px;
  margin:0;
  color:var(--ink);
  line-height:1.25;
}

.member-role{
  font-size:11.5px;
  color:var(--muted);
  margin:2px 0 0;
  line-height:1.3;
}

.member-badge{
  width:30px;height:30px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--navy);
  color:var(--gold-2);
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;
  font-size:11px;
  text-decoration:none;
  transition:background 0.15s ease;
}
a.member-badge:hover{background:var(--navy-2);}
.member-badge svg{width:14px;height:14px;fill:currentColor;}

/* CEO — light hero-style card with a large cutout photo */
.ceo-hero{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  background:var(--cream-dim);
  border-radius:4px;
  overflow:hidden;
  position:relative;
}
.ceo-hero .ceo-info{
  flex:1 1 280px;
  padding:48px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.ceo-hero .ceo-accent{width:56px;height:3px;background:var(--gold);margin-bottom:24px;}
.ceo-hero .ceo-kicker{
  font-size:13px;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--gold);margin:0 0 14px;
}
.ceo-hero .ceo-name{
  font-family:'Playfair Display',serif;font-weight:700;font-size:34px;
  color:var(--navy);margin:0 0 10px;line-height:1.1;
}
.ceo-hero .ceo-role{font-size:15px;color:var(--muted);margin:0;}
.ceo-hero .ceo-photo{
  flex:1 1 320px;
  min-height:420px;
  position:relative;
  background:linear-gradient(160deg,var(--cream-dim) 0%, var(--line) 140%);
}
.ceo-hero .ceo-photo img{
  width:100%;height:100%;
  object-fit:contain;object-position:bottom center;
  display:block;position:absolute;inset:0;
}
.ceo-hero .ceo-photo .placeholder-initials{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:120px;color:var(--line);
}
.ceo-hero .linkedin-badge{
  position:absolute;top:24px;right:24px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:var(--navy);color:var(--gold-2);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
}
.ceo-hero .linkedin-badge svg{width:15px;height:15px;fill:currentColor;}

@media(max-width:700px){
  .ceo-hero{flex-direction:column-reverse;}
  .ceo-hero .ceo-photo{min-height:320px;}
}

/* Open / vacant seat */
.member-card.open .placeholder{
  background:var(--cream);
  color:var(--muted-strong);
  border:1.5px dashed var(--line);
}
.member-card.open .member-name{
  font-style:italic;
  font-weight:400;
  color:var(--muted);
}
.member-card.open .member-badge{
  background:transparent;
  border:1.5px dashed var(--muted-strong);
  color:var(--muted-strong);
}

/* Lead / head members — visibly bigger box than the rest of the team.
   Same size everywhere a "head" card appears: Directors (peers, all
   leads) and the pinned lead card in Finance/Digital Marketing/Sales
   (via .roster-split) both use this. */
.member-card.lead{
  flex:1.3 1 220px;
  max-width:280px;
  aspect-ratio:3/4;
  min-height:280px;
}
.member-card.lead .member-name{font-size:19px;}
.member-card.lead .member-role{font-size:13.5px;}
.member-card.lead .member-badge{width:36px;height:36px;font-size:13px;}
.member-card.lead .placeholder{font-size:68px;}
.member-card.lead .member-label{padding:16px 16px 16px 20px;}

/* Pins the lead/manager card on the left; the regular member grid next
   to it wraps independently, so extra rows never fall under the lead's
   column. */
.roster-split{
  display:flex;
  align-items:flex-start;
  gap:24px;
}

/* Sales/Finance/Digital Marketing roster — same card component, denser grid */
.roster-grid .member-card:not(.lead){flex:1 1 130px;max-width:170px;aspect-ratio:3/4;min-height:170px;}
.roster-grid .member-name{font-size:13.5px;}
.roster-grid .member-role{font-size:10.5px;}
.roster-grid .member-badge{width:24px;height:24px;font-size:9.5px;}
.roster-grid .placeholder{font-size:32px;}
.roster-grid .member-label{padding:10px 10px 10px 13px;border-radius:12px;}

/* Cap the regular-member grid to exactly 4 per row (never 5+, even on
   wide screens) so cards keep a consistent size instead of shrinking to
   fit more columns. Only applies beside a pinned lead card — Directors,
   which has no pinned lead, keeps the plain wrapping behavior above. */
.roster-split .roster-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  flex:1 1 auto;
}
.roster-split .roster-grid .member-card{
  max-width:none;
  flex:none;
  width:100%;
}
@media (max-width:640px){
  .roster-split .roster-grid{grid-template-columns:repeat(2, 1fr);}
}

/* Mobile: stack the lead card above the grid instead of squeezing them
   side by side — this is what was causing the executive grid to overflow
   and visually overlap on narrow screens. */
@media (max-width:700px){
  .roster-split{
    flex-direction:column;
    align-items:stretch;
  }
}

/* Mobile: give lead/head cards (Directors, and the pinned lead in
   Finance/Digital Marketing/Sales) the same roomy, full-width treatment
   as the CEO card, instead of the cramped grid-card size. */
@media (max-width:700px){
  .member-card.lead{
    flex:1 1 100%;
    max-width:100%;
    aspect-ratio:4/3.4;
    min-height:280px;
  }
  .member-card.lead .member-name{font-size:19px;}
  .member-card.lead .member-role{font-size:13.5px;}
  .member-card.lead .placeholder{font-size:72px;}
}

.sales-teams{display:grid;gap:36px;}
.sales-team-label{
  font-family:'Playfair Display',serif;
  font-size:19px;
  font-weight:700;
  color:var(--navy);
  margin:0 0 14px;
}

@media(max-width:640px){
  .team-section{padding:56px 20px 80px;}
}