/* ============================================
   PEM Studio — team.css
   Styles the sections added to about.html:
   page-banner, bio-text-col, team, human,
   split/cta-row, contact-cta-block.
   Colors matched from the official flyer.
   ============================================ */

:root{
  --pem-navy:#181736;
  --pem-navy-soft:#3A3768;
  --pem-purple:#7B3FE4;
  --pem-purple-deep:#5B27B8;
  --pem-lavender:#EDE6FB;
  --pem-paper:#F6F4F0;
  --pem-line:#E4E0EA;
}


/* ---- Story / bio block ---- */
.bio-text-col{
  padding:50px 6vw;
}
.special-content-box{
  max-width:760px;
  margin:0 auto;
}
  max-width:760px;
}
.special-content-box h2{
  font-family:'Playfair Display', serif;
  color:var(--pem-navy);
  font-size:1.8rem;
  margin-bottom:.5em;
}
.special-content-box p{
  color:var(--pem-navy-soft);
  line-height:1.7;
  margin-bottom:1em;
}
.special-content-box .lede{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-weight:700;
  color:var(--pem-purple);
  font-size:1.4rem;
  margin:1em 0;
}
.special-content-box h3{
  font-family:'Playfair Display', serif;
  color:var(--pem-navy);
  font-size:1.3rem;
  font-weight:700;
  margin-bottom:1em;
}
.cta-button-primary{
  display:inline-block;
  background:var(--pem-purple);
  color:#fff;
  padding:13px 28px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
}
.cta-button-primary:hover{background:var(--pem-purple-deep);}

/* ---- Meet the team ---- */
.team{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:36px;
  margin-top:32px;
  padding:0 6vw 50px;
}
.team article{text-align:left;}

/* Photo frame — used by the <div class="member-photo"> added to each team member */
.member-photo{
  width:100px;
  height:100px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid var(--pem-purple);
  background:var(--pem-lavender);
  margin-bottom:16px;
}
.member-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.team h3{
  font-family:'Playfair Display', serif;
  color:var(--pem-navy);
  font-size:1.2rem;
  margin-bottom:.15em;
}
.team .role{
  color:var(--pem-purple);
  font-weight:600;
  font-size:.88rem;
  display:block;
  margin-bottom:.6em;
}
.team p{
  margin:0;
  color:var(--pem-navy-soft);
  font-size:.95rem;
  line-height:1.6;
}

/* ---- Why the human touch still matters ---- */
.human{
  background:var(--pem-navy);
  color:#EDEBF7;
  padding:56px 6vw;
}
.human .narrow{max-width:700px;margin:0 auto;}
.human h2{
  font-family:'Playfair Display', serif;
  color:#fff;
  font-size:1.8rem;
  margin-bottom:.5em;
}
.human p{
  color:#C9C6E0;
  line-height:1.7;
  margin-bottom:1em;
}

/* ---- Open for partnership / services ---- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  padding:50px 6vw 0;
}
@media(max-width:760px){.split{grid-template-columns:1fr;}}
.split h2{
  font-family:'Playfair Display', serif;
  color:var(--pem-navy);
  font-size:1.5rem;
  margin-bottom:.4em;
}
.split p{color:var(--pem-navy-soft);line-height:1.7;}

.cta-row{
  margin-top:28px;
  padding:0 6vw 50px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.cta-row .btn{
  display:inline-block;
  padding:13px 28px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  font-size:.92rem;
}
.cta-row .btn.primary{background:var(--pem-purple);color:#fff;}
.cta-row .btn.primary:hover{background:var(--pem-purple-deep);}
.cta-row .btn.ghost{border:2px solid var(--pem-navy);color:var(--pem-navy);}
.cta-row .btn.ghost:hover{background:var(--pem-navy);color:#fff;}