/* =====================================================================
   THE TEAM — standalone page, styled after the "Keynote Speakers /
   Session Leaders" layout, recolored onto the GOAT Agency palette.
   Fonts: Kola (display, via Fontshare) + Geist / Geist Mono (via Google Fonts)
   — the same fonts the reference template uses.
   ===================================================================== */

body.team-page{
  background:var(--paper);
}

.site-header .desktop-nav a.is-current{ color:var(--pink); }

/* ---- Hero ---- */
.team-hero{
  padding:calc(7rem + 2vh) 6vw 3rem;
  max-width:1180px;
  margin:0 auto;
  text-align:center;
}

.team-eyebrow{
  font-family:"Geist Mono", monospace;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--pink);
  margin:0 0 1.2rem;
}

.team-hero-heading{
  font-family:"Kola", sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-.02em;
  font-size:clamp(2.1rem, 7.6vw, 5.6rem);
  line-height:.98;
  text-wrap:balance;
  color:var(--ink);
  margin:0 0 1.4rem;
}

.team-hero-copy{
  font-family:"Geist", "Geist Placeholder", sans-serif;
  font-size:1.05rem;
  line-height:1.6;
  color:#455366;
  max-width:640px;
  margin:0 auto;
}

/* ---- Section shell (white panel on paper background, like the reference) ---- */
.team-section{
  padding:1rem 6vw 5rem;
}

.team-panel{
  max-width:1200px;
  margin:0 auto;
  background:#ffffff;
  border-radius:32px;
  padding:clamp(2rem, 5vw, 4rem);
  box-shadow:0 30px 70px rgba(5,5,5,.06);
}

.team-group-photo{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/7;
  margin:0 0 clamp(3.5rem, 7vw, 6rem);
  border-radius:24px;
  background:#e9e9e6;
}
.team-group-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 47%;
}
.team-group-photo::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:42%;
  background:linear-gradient(transparent, rgba(5,5,5,.72));
  pointer-events:none;
}
.team-group-photo figcaption{
  position:absolute;
  z-index:1;
  left:clamp(1.2rem, 3vw, 2.3rem);
  bottom:clamp(1rem, 2.5vw, 2rem);
  color:#fff;
  font-family:"Geist", sans-serif;
  font-size:clamp(1rem, 2vw, 1.45rem);
  font-weight:600;
  letter-spacing:-.02em;
}
.team-group-photo--crew{ margin-bottom:0; }

.team-section-title{
  font-family:"Kola", sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:clamp(2rem, 4.5vw, 3rem);
  color:var(--ink);
  text-align:center;
  margin:0 0 3rem;
}
.team-section-title--crew{
  margin-top:5rem;
}

/* ---- Grids ---- */
.team-grid{
  display:grid;
  gap:2.5rem 2rem;
}
.team-grid--featured{
  grid-template-columns:repeat(3, 1fr);
  max-width:1260px;
  margin:0 auto;
}
@media (max-width:900px){
  .team-grid--featured{ grid-template-columns:repeat(2, 1fr); max-width:900px; }
}
@media (max-width:640px){
  .team-grid--featured{ grid-template-columns:1fr; max-width:420px; }
}
.team-panel--leadership{
  max-width:1320px;
}
.team-grid--crew{
  grid-template-columns:repeat(6, 1fr);
}

.team-card{ text-align:center; }

/* ---- Octagon-clipped photo (matches the reference card shape) ---- */
.team-photo{
  aspect-ratio:1/1;
  border-radius:20px;
  clip-path:polygon(18% 0%, 82% 0%, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0% 82%, 0% 18%);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 1.4rem;
  overflow:hidden;
  background:#e8e8e5;
}
.team-photo svg{ width:34%; height:34%; opacity:.9; }
.team-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.75,.25,1);
}
.team-card:hover .team-portrait{ transform:scale(1.035); }
.team-portrait--one{ object-position:center 22%; }
.team-portrait--two{ object-position:center 20%; }
.team-portrait--three{ object-position:center 18%; }

.team-photo--group-crop img{
  object-position:center 25%;
}

.team-card--sm .team-photo{ margin-bottom:1.1rem; }

.team-photo--web{ background:linear-gradient(160deg,#202020,#000000); }
.team-photo--seo{ background:linear-gradient(160deg,#fb0155,#c30244); }
.team-photo--design{ background:linear-gradient(160deg,#6b43ff,#4429cc); }
.team-photo--ai{ background:linear-gradient(160deg,#3a3a3a,#000000); }
.team-photo--gray{ background:linear-gradient(160deg,#d8d8d5,#c7c7c5); }
.team-photo--pink-soft{ background:linear-gradient(160deg,#fb4b82,#fb0155); }

.team-name{
  font-family:"Kola", sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:1.7rem;
  color:var(--ink);
  margin:0 0 .5rem;
}
.team-name--sm{ font-size:1.25rem; }

.team-role{
  font-family:"Geist Mono", monospace;
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--pink);
  margin:0 0 .9rem;
}

.team-bio{
  font-family:"Geist", "Geist Placeholder", sans-serif;
  font-size:.95rem;
  line-height:1.55;
  color:#455366;
  max-width:34ch;
  margin:0 auto;
}

/* ---- Closing CTA ---- */
.team-cta{
  text-align:center;
  padding:2rem 6vw 6rem;
}
.team-cta h2{
  font-family:"Kola", sans-serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  color:var(--ink);
  margin:0 0 1.6rem;
}
.team-cta-button{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:var(--ink);
  color:#fff;
  font-family:"Geist", sans-serif;
  font-weight:600;
  font-size:.95rem;
  padding:.9rem 1.6rem;
  border-radius:999px;
  text-decoration:none;
  transition:background .2s ease;
}
.team-cta-button:hover{ background:var(--pink); }

.team-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2rem 6vw 3rem;
  max-width:1200px;
  margin:0 auto;
  font-family:"Geist Mono", monospace;
  font-size:.8rem;
  color:#8a8a88;
}
.team-footer a{ color:#8a8a88; text-decoration:none; }
.team-footer a:hover{ color:var(--pink); }

/* ---- Responsive ---- */
@media (max-width:900px){
  .team-grid--featured{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; }
  .team-grid--crew{ grid-template-columns:repeat(2, 1fr); }
  .team-panel{ border-radius:24px; }
}

@media (max-width:520px){
  .team-group-photo{ aspect-ratio:4/3; border-radius:18px; }
  .team-footer{ flex-direction:column; gap:.6rem; text-align:center; }
}

/* =====================================================================
   TEAM PEOPLE + VALUES — dark panel inserted between Leadership and
   The Crew. Reuses the site's Kola display font, Geist body/mono
   fonts, --pink accent and the --paper/--ink tokens are intentionally
   NOT used here: this block is a deliberate dark inversion, styled
   after the reference screenshot, matching the rounded-panel language
   of .team-panel above it.
   ===================================================================== */

.team-people-section{
  max-width:1500px;
  margin:0 auto clamp(3rem, 6vw, 5rem);
  padding:0 4vw;
}

.team-people-inner{
  background:#000000;
  border:1px solid rgba(255,255,255,.06);
  border-radius:32px;
  padding:clamp(3.2rem, 7vw, 5.5rem) clamp(1.6rem, 5vw, 4rem) clamp(3.8rem, 7vw, 6rem);
  text-align:center;
}

.team-people-pill{
  display:inline-block;
  margin:0 0 1.6rem;
  padding:.45rem 1.1rem;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  font-family:"Geist Mono", monospace;
  font-size:.75rem;
  letter-spacing:.08em;
  color:#f5f5f5;
}

.team-people-heading{
  font-family:"Kola", sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-.02em;
  font-size:clamp(2.3rem, 6vw, 4.1rem);
  line-height:1.02;
  color:#f5f5f5;
  margin:0 0 1rem;
}

.team-people-subtitle{
  font-family:"Geist", "Geist Placeholder", sans-serif;
  font-size:clamp(1rem, 1.6vw, 1.25rem);
  color:#9a9a97;
  margin:0 0 clamp(3.2rem, 6.5vw, 4.6rem);
}

/* ---- 10 team portraits: interlocking circles, 5x2 desktop / 3x3 mobile ---- */
.team-people-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  row-gap:clamp(2.6rem, 4.5vw, 3.8rem);
  column-gap:0;
  max-width:1380px;
  margin:0 auto;
}

.team-person{
  position:relative;
  text-align:center;
}

.team-person-photo{
  width:100%;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  border:3px solid #000000;
  background:#151515;
  margin:0 0 1.1rem;
  position:relative;
  box-sizing:border-box;
}
.team-person-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* pull every item left into its row-neighbor, except row starters */
.team-person:not(:nth-child(5n+1)) .team-person-photo{
  margin-left:clamp(-2.4rem, -3.2vw, -1.4rem);
}

/* left-to-right stacking within each row of 5 */
.team-person:nth-child(1){ z-index:5; }
.team-person:nth-child(2){ z-index:4; }
.team-person:nth-child(3){ z-index:3; }
.team-person:nth-child(4){ z-index:2; }
.team-person:nth-child(5){ z-index:1; }
.team-person:nth-child(6){ z-index:5; }
.team-person:nth-child(7){ z-index:4; }
.team-person:nth-child(8){ z-index:3; }
.team-person:nth-child(9){ z-index:2; }
.team-person:nth-child(10){ z-index:1; }

.team-person-name{
  font-family:"Geist", sans-serif;
  font-weight:700;
  font-size:clamp(.95rem, 1.3vw, 1.15rem);
  color:#f5f5f5;
  margin:0 0 .3rem;
  white-space:nowrap;
}

.team-person-role{
  font-family:"Geist", sans-serif;
  font-size:clamp(.74rem, .95vw, .88rem);
  color:#8f8f8c;
  margin:0;
}

/* ---- Mobile: 1-column people, strict 3x3 values grid ---- */
@media (max-width:767px){
  .team-people-inner{
    padding:2.4rem 1.2rem 3rem;
    border-radius:24px;
  }

  .team-people-grid{
    grid-template-columns:repeat(3, 1fr);
    row-gap:1.6rem;
    max-width:420px;
    margin-bottom:2.8rem;
  }

  .team-person-photo{
    border-width:2px;
    margin:0 0 .7rem;
  }

  /* cancel desktop overlap, apply mobile overlap within rows of 3 */
  .team-person:not(:nth-child(5n+1)) .team-person-photo{
    margin-left:0;
  }
  .team-person:not(:nth-child(3n+1)) .team-person-photo{
    margin-left:clamp(-1.1rem, -4vw, -.6rem);
  }

  .team-person:nth-child(1){ z-index:3; }
  .team-person:nth-child(2){ z-index:2; }
  .team-person:nth-child(3){ z-index:1; }
  .team-person:nth-child(4){ z-index:3; }
  .team-person:nth-child(5){ z-index:2; }
  .team-person:nth-child(6){ z-index:1; }
  .team-person:nth-child(7){ z-index:3; }
  .team-person:nth-child(8){ z-index:2; }
  .team-person:nth-child(9){ z-index:1; }

  .team-person-name{
    font-size:.72rem;
  }
  .team-person-role{
    font-size:.6rem;
  }

  .team-person--extra{
    display:none;
  }

}

/* =====================================================================
   CREDENTIALS — dark panel, above The Crew. Reuses the site's Kola
   display font, Geist body/mono fonts, --pink accent, matching the
   dark inversion language of .team-people-inner above it.
   Placeholder content — swap in real certifications/images.
   ===================================================================== */

.team-credentials-section{
  max-width:1500px;
  margin:0 auto clamp(3rem, 6vw, 5rem);
  padding:0 4vw;
}

.team-credentials-inner{
  background:#000000;
  border:1px solid rgba(255,255,255,.06);
  border-radius:32px;
  padding:clamp(2.6rem, 6vw, 4.5rem) clamp(1.6rem, 5vw, 3.5rem) clamp(3rem, 6vw, 5rem);
  text-align:center;
}

.team-credentials-pill{
  display:inline-block;
  margin:0 0 1.6rem;
  padding:.45rem 1.1rem;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  font-family:"Geist Mono", monospace;
  font-size:.75rem;
  letter-spacing:.08em;
  color:#f5f5f5;
}

.team-credentials-heading{
  font-family:"Kola", sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-.02em;
  font-size:clamp(2.1rem, 5vw, 3.4rem);
  line-height:1.02;
  color:#f5f5f5;
  margin:0 0 1.4rem;
}
.team-credentials-heading-accent{
  color:var(--pink);
}

.team-credentials-badge{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin:0 0 clamp(2.8rem, 6vw, 4rem);
  padding:.6rem 1.2rem;
  border:1px solid rgba(251,2,86,.35);
  background:rgba(251,2,86,.08);
  border-radius:999px;
  font-family:"Geist", sans-serif;
  font-size:.85rem;
  color:#f5f5f5;
}
.team-credentials-badge svg{
  width:16px;
  height:16px;
  color:var(--pink);
  flex-shrink:0;
}

.team-credentials-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.2rem, 2.4vw, 1.8rem);
  max-width:1200px;
  margin:0 auto;
}

.team-credential-card{
  background:#000000;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:1.4rem 1.4rem 1.6rem;
  text-align:left;
}

.team-credential-thumb{
  aspect-ratio:16/10;
  border-radius:14px;
  margin:0 0 1.2rem;
  background:linear-gradient(160deg,#151515,#000000);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}
.team-credential-thumb svg{
  width:26%;
  height:26%;
  color:rgba(251,2,86,.55);
}

.team-credential-source{
  font-family:"Geist Mono", monospace;
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pink);
  margin:0 0 .5rem;
}

.team-credential-title{
  font-family:"Geist", sans-serif;
  font-weight:700;
  font-size:1rem;
  line-height:1.3;
  color:#f5f5f5;
  margin:0 0 .4rem;
}

.team-credential-date{
  font-family:"Geist", sans-serif;
  font-size:.82rem;
  color:#8f8f8c;
  margin:0 0 1rem;
}

.team-credential-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:"Geist", sans-serif;
  font-weight:600;
  font-size:.85rem;
  color:#f5f5f5;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:.15rem;
  transition:color .2s ease, border-color .2s ease;
}
.team-credential-link svg{
  width:14px;
  height:14px;
  flex-shrink:0;
}
.team-credential-link:hover{
  color:var(--pink);
  border-color:var(--pink);
}

@media (max-width:767px){
  .team-credentials-inner{
    padding:2.4rem 1.2rem 3rem;
    border-radius:24px;
  }

  /* phones: the three diplomas in one row you swipe sideways (the next card
     peeks in from the right), running edge to edge inside the black panel,
     with the shared pink progress bar underneath (goat-bar.css / goat-bar.js) */
  .team-credentials-grid{
    display:flex;
    gap:1rem;
    max-width:none;
    margin:0 -1.2rem;
    padding:2px 1.2rem 8px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scroll-padding-left:1.2rem;
    scrollbar-width:none;
  }
  .team-credentials-grid::-webkit-scrollbar{ display:none; }
  .team-credential-card{ flex:0 0 min(78vw, 340px); scroll-snap-align:start; }
  .swipe-progress.team-credentials-progress{ display:block; margin:16px 0 0; }   /* two classes: outranks goat-bar.css's display:none whatever the load order */
}

/* =====================================================================
   TEAM + CREDENTIALS — responsive layout only.
   Below 1024px .team-duo is an ordinary block, so both sections keep
   exactly the styling and stacking they already had (team first,
   credentials underneath). From 1024px up they sit side by side,
   70 / 30, top-aligned. No colours, fonts or content are touched here.
   ===================================================================== */
@media (min-width:1024px){
  .team-duo{
    display:grid;
    grid-template-columns:64fr 36fr;
    align-items:stretch;
    gap:clamp(1rem, 1.6vw, 1.5rem);
    max-width:1500px;
    margin:0 auto clamp(3rem, 6vw, 5rem);
    padding:0 4vw;
  }

  /* the wrapper now provides the page framing the two sections used to
     provide for themselves */
  .team-duo > .team-people-section,
  .team-duo > .team-credentials-section{
    max-width:none;
    margin:0;
    padding:0;
    min-width:0;
  }

  /* both panels run to the same height */
  .team-duo > .team-people-section,
  .team-duo > .team-credentials-section{ display:flex }
  .team-duo .team-people-inner,
  .team-duo .team-credentials-inner{ flex:1 }

  /* the narrower column needs slightly smaller labels so the names,
     which never wrap, stop touching each other */
  .team-duo .team-person-name{ font-size:clamp(.74rem, .92vw, .95rem) }
  .team-duo .team-person-role{ font-size:clamp(.64rem, .78vw, .8rem) }

  /* the team panel sits tighter top and bottom */
  .team-duo .team-people-inner{
    padding-top:clamp(2.4rem, 4vw, 3.4rem);
    padding-bottom:clamp(2.6rem, 4.4vw, 3.8rem);
  }

  /* credentials: header, then three cards spread over the remaining height */
  .team-duo .team-credentials-inner{
    display:flex;
    flex-direction:column;
    padding-top:clamp(2.4rem, 4vw, 3.4rem);
    padding-bottom:clamp(2.6rem, 4.4vw, 3.8rem);
  }
  .team-duo .team-credentials-pill{ margin-bottom:1rem }
  .team-duo .team-credentials-heading{ margin-bottom:.9rem }
  .team-duo .team-credentials-badge{ margin-bottom:clamp(1.4rem, 2.2vw, 2rem) }

  .team-duo .team-credentials-grid{
    grid-template-columns:1fr;
    max-width:none;
    flex:1;
    align-content:space-between;
    gap:clamp(.9rem, 1.4vw, 1.4rem);
  }

  /* each card goes horizontal so all three fit without shrinking the panel */
  .team-duo .team-credential-card{
    display:flex;
    align-items:center;
    gap:clamp(.9rem, 1.2vw, 1.3rem);
    padding:1.1rem 1.2rem;
  }
  .team-duo .team-credential-thumb{
    flex:0 0 clamp(96px, 9vw, 132px);
    margin:0;
    aspect-ratio:4 / 3;
  }
  .team-duo .team-credential-body{ min-width:0 }
  .team-duo .team-credential-title{ font-size:.95rem; margin-bottom:.3rem }
  .team-duo .team-credential-date{ margin-bottom:.6rem }
}

/* ---- real certificate thumbnails ---- */
.team-credential-thumb--img{
  display:block;
  padding:0;
  overflow:hidden;
  background:#ffffff;
  border-color:rgba(255,255,255,.14);
}
.team-credential-thumb--img img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#ffffff;
}

/* ---- wider, airier duo on desktop ---- */
@media (min-width:1024px){
  .team-duo{
    max-width:1720px;
    padding:0 3vw;
    gap:clamp(1.2rem, 1.8vw, 2.2rem);
  }
  .team-duo .team-people-inner{
    padding-left:clamp(2rem, 4vw, 4.5rem);
    padding-right:clamp(2rem, 4vw, 4.5rem);
  }
  .team-duo .team-people-grid{
    row-gap:clamp(3rem, 5vw, 4.6rem);
  }
  .team-duo .team-credentials-inner{
    padding-left:clamp(1.6rem, 2.4vw, 2.6rem);
    padding-right:clamp(1.6rem, 2.4vw, 2.6rem);
  }
}

/* =====================================================================
   DESKTOP DUO — interlocking portraits.
   The old rule gave every photo the same negative margin, so only the
   first pair in a row actually overlapped: each following circle just
   touched its neighbour. The shift has to accumulate along the row, and
   it belongs on the grid item so the name travels with its portrait.
   ===================================================================== */
@media (min-width:1024px){
  .team-duo .team-people-grid{
    --ov:clamp(1.2rem, 2.6vw, 2.2rem);
    transform:translateX(calc(2 * var(--ov)));   /* re-centre the shortened row */
    row-gap:clamp(2.4rem, 4vw, 3.4rem);
  }
  /* a negative margin on a grid item otherwise widens it — pin the width so
     the shift only moves the item, it doesn't stretch the circle */
  .team-duo .team-person{ width:100% }
  .team-duo .team-person:not(:nth-child(5n+1)) .team-person-photo{ margin-left:0 }
  .team-duo .team-person:nth-child(5n+2){ margin-left:calc(-1 * var(--ov)) }
  .team-duo .team-person:nth-child(5n+3){ margin-left:calc(-2 * var(--ov)) }
  .team-duo .team-person:nth-child(5n+4){ margin-left:calc(-3 * var(--ov)) }
  .team-duo .team-person:nth-child(5n+5){ margin-left:calc(-4 * var(--ov)) }

  /* bigger portraits: give the grid back the room the panel padding took */
  .team-duo .team-people-inner{
    padding-left:clamp(1.1rem, 2vw, 2.2rem);
    padding-right:clamp(1.1rem, 2vw, 2.2rem);
  }

  /* ~5% tighter overall, with smaller labels under the larger portraits */
  .team-duo .team-people-heading{ font-size:clamp(1.9rem, 3.5vw, 3.2rem) }
  .team-duo .team-people-subtitle{ font-size:.92rem }
  .team-duo .team-person-name{ font-size:clamp(.68rem, .82vw, .86rem); margin-bottom:.22rem }
  .team-duo .team-person-role{ font-size:clamp(.6rem, .7vw, .73rem) }
  .team-duo .team-person-photo{ margin-bottom:.8rem }
}

/* ---- leadership: the person's name under the role ---- */
.team-lead-name{
  font-family:"Geist", "Geist Placeholder", sans-serif;
  font-weight:600;
  font-size:1.02rem;
  line-height:1.3;
  color:var(--ink);
  margin:0 0 .45rem;
}

/* ---- certificate thumbnails: twice the size so the diploma is readable ---- */
@media (min-width:1024px){
  .team-duo .team-credential-thumb{
    flex:0 0 clamp(192px, 18vw, 264px);
  }
  .team-duo .team-credential-card{
    gap:clamp(1.1rem, 1.6vw, 1.6rem);
    padding:1.3rem 1.4rem;
  }
}

/* =====================================================================
   LEADERSHIP ON PHONES
   Founder & CEO keeps the first row on its own, at ~1.5x smaller than the
   full-width card; Creative Director and Head of Growth share the second
   row, so each lands at ~2x smaller. Photos and type scale with them.
   ===================================================================== */
@media (max-width:640px){
  .team-grid--featured{
    grid-template-columns:1fr 1fr;
    max-width:none;
    gap:1.6rem 1rem;
  }
  .team-grid--featured .team-card:first-child{
    grid-column:1 / -1;
  }

  /* row 1 — 1.5x smaller */
  .team-grid--featured .team-card:first-child .team-photo{
    width:64%;
    margin-left:auto;
    margin-right:auto;
  }
  .team-grid--featured .team-card:first-child .team-name{ font-size:1.15rem }
  .team-grid--featured .team-card:first-child .team-lead-name{ font-size:.78rem }
  .team-grid--featured .team-card:first-child .team-role{ font-size:.62rem; margin-bottom:.6rem }
  .team-grid--featured .team-card:first-child .team-bio{ font-size:.72rem; max-width:40ch }

  /* row 2 — 2x smaller */
  .team-grid--featured .team-card:nth-child(n+2) .team-name{ font-size:.78rem; margin-bottom:.3rem }
  .team-grid--featured .team-card:nth-child(n+2) .team-lead-name{ font-size:.62rem; margin-bottom:.25rem }
  .team-grid--featured .team-card:nth-child(n+2) .team-role{ font-size:.5rem; margin-bottom:.45rem }
  .team-grid--featured .team-card:nth-child(n+2) .team-bio{ font-size:.58rem; line-height:1.45 }
  .team-grid--featured .team-card:nth-child(n+2) .team-photo{ margin-bottom:.7rem }
}