/* Our Team page — measured proportionally from the client mock-up
   (landscape → 1440 design canvas). Accent uses the design-system pink token
   (the mock render's accent drifts red; palette is locked to client spec).
   Photo/logo slots are placeholders awaiting supplied imagery. */

.team-body{background:#ded0c2}
.team{
  position:relative;overflow:hidden;
  /* aligned to the locked solution-detail template: same scene render
     (oval patched out for this page) and the same fade tones, no overlay */
  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;
}
.team__inner{max-width:1440px;margin:0 auto;padding:132px 150px 30px;position:relative}
.pink{color:var(--accent)}

/* Top: intro left, how-it-works right ------------------------- */
.team__top{display:flex;gap:44px;align-items:flex-start}
.team__intro{flex:0 0 auto;max-width:575px}
.team__eyebrow,.how__eyebrow{
  margin:0;
  font:var(--text-eyebrow);font-size:13px;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--accent);
}
.team__eyebrow-rule,.how__eyebrow-rule{display:block;width:52px;height:2px;margin-top:10px;background:var(--accent)}
.team__title{
  margin:26px 0 0;font-size:36px;line-height:1.35;letter-spacing:-.01em;
  font-weight:var(--fw-bold);color:var(--text-heading);
}
.team__lede{margin:18px 0 0;font-size:15.5px;line-height:1.6;color:var(--text-heading)}
.team__clarity{font-weight:var(--fw-semibold)}

.how{flex:1;padding-top:4px;text-align:center}
.how__eyebrow{display:inline-block}
.how__eyebrow-rule{width:100%;margin-top:10px}
.how__cols{display:flex;margin-top:28px;align-items:flex-start}
.how__col{flex:1 1 0;display:flex;flex-direction:column;align-items:center;padding:0 14px}
.how__divider{width:1.5px;align-self:stretch;background:var(--accent);opacity:.75}
.how__icon{color:var(--text-heading)}
.how__title{
  margin:18px 0 0;
  font-size:12.5px;font-weight:var(--fw-semibold);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap;
}
.how__body{margin:12px 0 0;max-width:264px;font-size:13.5px;line-height:1.55;color:var(--text-body)}

/* Card grid ---------------------------------------------------- */
.tgrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px 18px;
  margin-top:34px;
}
.tcard{
  display:flex;flex-direction:column;
  padding:9px 9px 12px;
  background:linear-gradient(180deg,#f9f3ea,#f4ece1);
  border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 10px 22px -14px rgba(38,38,38,.28),0 0 0 1px rgba(38,38,38,.04);
}
.tcard__photo{
  display:flex;align-items:center;justify-content:center;
  height:140px;border-radius:8px;
  background:#efe5d8;
  box-shadow:inset 0 2px 8px rgba(38,38,38,.06),inset 0 0 0 1px rgba(38,38,38,.05);
}
.tcard__photo span{font-size:15px;color:var(--text-heading)}
.tcard__photo img{
  width:100%;height:100%;display:block;border-radius:8px;
  object-fit:cover;   /* images are pre-cropped to the slot ratio, face-centred */
}
.tcard__name{margin:12px 4px 0;font-size:16.5px;line-height:1.3;font-weight:var(--fw-semibold);color:var(--accent)}
.tcard__cta{
  display:inline-flex;align-items:center;gap:10px;
  margin:8px 4px 0;font-size:12.5px;font-weight:var(--fw-semibold);
  color:var(--text-heading);
}
.tcard__arr{display:inline-flex;color:var(--accent)}
.tcard__cta:hover{color:var(--accent-pressed)}
.tcard__cta--soon{font-weight:var(--fw-regular);color:var(--text-body)}

/* Footer ------------------------------------------------------- */
.team__footer{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:26px;
}
.team__footer-brand{color:var(--text-heading);font-size:13px}
.team__tagline{
  position:relative;margin:0;
  font-size:18px;line-height:1.2;font-weight:var(--fw-semibold);color:var(--text-heading);
  white-space:nowrap;
}
.team__tagline .tagline__human{position:relative;display:inline-block}
.team__tagline .tagline__human::after{
  content:"";position:absolute;left:0;bottom:-9px;
  width:calc(100% - 24px);height:2px;background:var(--accent);
}
.team__tagline .tagline__ai{color:var(--accent)}

/* ---------- Responsive ---------- */
@media (max-width:1360px){
  .team__inner{padding:128px 44px 28px}
}
@media (max-width:1180px){
  .team__top{flex-direction:column;gap:44px}
  .team__intro{max-width:640px}
  .how{width:100%;max-width:640px}
  .tgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .tgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .team__inner{padding:120px 24px 40px}
  /* comfortable tap target for the profile links */
  .tcard__cta{padding:8px 0;font-size:13.5px}
  .team__lede br,.how__body br{display:none}
  .team__title{font-size:clamp(30px,7vw,42px)}
  .how__cols{flex-direction:column;gap:32px}
  .how__divider{display:none}
  .team__footer{flex-direction:column;gap:26px;align-items:flex-start}
}
@media (max-width:560px){
  .tgrid{grid-template-columns:1fr}
}
@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){
  .team{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');}
}