/* Team member profile template — measured proportionally from the Marianne
   Withers mock-up on the locked template scene. Accent uses the design-system
   pink token (this mock family renders the accent red; palette is locked). */

.profile-body{background:#ded0c2}
.profile{
  position:relative;overflow:hidden;
  background:
    linear-gradient(to bottom,rgba(222,208,194,0) 0,rgba(222,208,194,0) 50vw,#ded0c2 57vw),
    url('../assets/img/room-plain.webp') center top / 100% auto no-repeat,
    #ded0c2;
}
.profile__inner{max-width:1440px;margin:0 auto;padding:136px 150px 8px;position:relative}
.pink{color:var(--accent)}

.profile__eyebrow{
  margin:0;
  font:var(--text-eyebrow);font-size:13px;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--accent);
}
.profile__eyebrow-rule{display:block;width:44px;height:2px;margin-top:10px;background:var(--accent)}

/* Top: circular portrait + bio -------------------------------- */
.profile__top{display:flex;gap:60px;align-items:flex-start;margin-top:34px}
.profile__photo{
  flex:0 0 auto;
  width:352px;height:352px;border-radius:50%;
  padding:11px;background:linear-gradient(180deg,#fdf8f1,#f1e7da);
  box-shadow:0 22px 44px -20px rgba(56,44,32,.35),inset 0 1px 1px rgba(255,255,255,.9),0 0 0 1px rgba(38,38,38,.06);
}
.profile__photo-placeholder{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;border-radius:50%;
  background:#efe5d8;
  box-shadow:inset 0 2px 10px rgba(38,38,38,.07);
  font-size:17px;color:var(--text-heading);
}
/* Partner logos sit on whichever ground their mark is designed for */
.profile__photo--logo{background:linear-gradient(180deg,#1c242c,#141b22);padding:0}
.profile__photo--logo-light{background:#fff}
.profile__logo{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;border-radius:50%;overflow:hidden;
  box-sizing:border-box;
}

.profile__photo img{
  display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;
}
/* a wide wordmark must fit the circle's chord, not its full width
   (declared after the portrait rule so it wins) */
.profile__photo--logo .profile__logo img{
  width:74%;height:auto;object-fit:contain;border-radius:0;
}
.profile__photo--logo-light .profile__logo img{width:80%}

/* Partner call-to-action link (e.g. CENARA's free assessment) */
.profile__assess{
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:22px;padding:12px 20px;
  /* sits on a card-surface panel so it reads against the plaster background */
  background:linear-gradient(180deg,#fbf5ec,#f5ede2);
  border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 6px 16px -10px rgba(38,38,38,.3),0 0 0 1px rgba(243,131,145,.28);
  font-size:14px;font-weight:var(--fw-semibold);letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);
  transition:box-shadow var(--dur-fast) var(--ease-brand);
}
.profile__assess:hover{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 8px 20px -10px rgba(38,38,38,.35),0 0 0 1px rgba(243,131,145,.55);
}
.profile__assess-url{
  font-weight:var(--fw-regular);letter-spacing:0;text-transform:none;
  color:var(--accent);
}
.profile__assess:hover{color:var(--accent-pressed)}
.profile__assess:hover .profile__assess-url{color:var(--accent-pressed)}
.profile__bio{flex:1;min-width:0}
.profile__name{
  margin:0;font-size:52px;line-height:1.1;letter-spacing:-.01em;
  font-weight:var(--fw-bold);color:var(--text-heading);
}
.profile__meta{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--text-heading)}
.profile__linkedin{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:18px;height:40px;padding:0 20px;
  background:var(--wj-charcoal);color:var(--wj-warm-white);
  border-radius:20px;
  font-size:13.5px;font-weight:var(--fw-semibold);line-height:1;
  box-shadow:0 8px 18px -8px rgba(38,38,38,.45);
  transition:background-color var(--dur-fast) var(--ease-brand);
}
.profile__linkedin:hover{background:var(--accent);color:#fff}
.profile__linkedin:active{background:var(--accent-pressed)}

.profile__motto{
  margin:30px 0 0;font-size:22.5px;line-height:1.3;letter-spacing:-.005em;
  font-weight:var(--fw-bold);color:var(--text-heading);
}
.profile__strap{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--text-heading)}
.profile__rule{display:block;width:44px;height:2px;margin-top:16px;background:var(--accent)}
.profile__about{margin:24px 0 0;font-size:15.5px;line-height:1.75;color:var(--text-body)}
.profile__divider{display:block;height:1px;margin-top:24px;background:rgba(38,38,38,.18)}
.profile__tags{margin:20px 0 0;font-size:13.5px;line-height:2;color:var(--text-heading)}

/* Three insight cards ----------------------------------------- */
.profile__cards{display:flex;gap:22px;margin-top:44px}
.pcard{
  flex:1 1 0;
  display:flex;align-items:flex-start;gap:18px;
  padding:30px 26px 28px;
  background:linear-gradient(180deg,#f9f3ea,#f4ece1);
  border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 10px 24px -14px rgba(38,38,38,.26),0 0 0 1px rgba(38,38,38,.04);
}
.pcard__badge{
  flex:0 0 auto;width:64px;height:64px;border-radius:50%;
  background:#fdf8f1;
  box-shadow:0 8px 18px -10px rgba(38,38,38,.3),inset 0 0 0 1px rgba(255,255,255,.8);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-heading);
  --icon-occlusion:#fdf8f1;
}
.pcard__heading{
  margin:6px 0 0;
  font-size:13px;font-weight:var(--fw-semibold);letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);
}
.pcard__rule{display:block;width:34px;height:2px;margin-top:10px;background:var(--accent)}
.pcard__list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.pcard__list li{
  position:relative;padding-left:18px;
  font-size:13.5px;line-height:1.5;color:var(--text-heading);
}
.pcard__list li::before{
  content:"\2022";position:absolute;left:0;top:0;
  color:var(--accent);font-weight:var(--fw-bold);
}

/* Back link ---------------------------------------------------- */
.profile__back{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:40px;
  font-size:14px;font-weight:var(--fw-semibold);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-heading);
}
.profile__back svg{color:var(--accent)}
.profile__back:hover{color:var(--accent-pressed)}

/* ---------- Responsive ---------- */
@media (max-width:1360px){
  .profile__inner{padding:132px 44px 8px}
  .profile__top{gap:52px}
}
@media (max-width:1080px){
  .profile__top{flex-direction:column;align-items:center;gap:40px}
  .profile__bio{text-align:left}
  .profile__cards{flex-direction:column}
}
@media (max-width:760px){
  .profile__inner{padding:120px 24px 8px}
  .profile__photo{width:260px;height:260px}
  .profile__name{font-size:40px}
  .profile__motto{font-size:22px}
  .profile__tags br{display:none}
  .pcard{flex-direction:column;gap:16px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none}
}

/* MOBILE SCENE: the 1672px render is 3-4x wider than a phone needs; serve the
   900px variant below the tablet breakpoint. Position/size/repeat carry over
   from the shorthand above — only the image layers are swapped. */
@media (max-width:820px){
  .profile{background-image:
    linear-gradient(to bottom,rgba(222,208,194,0) 0,rgba(222,208,194,0) 50vw,#ded0c2 57vw),
    url('../assets/img/room-plain-mobile.webp');}
}