/* =========================================================
   People photography: outcomes, team teaser, office gallery,
   service-page photos. Mobile-first sizing.
   ========================================================= */

/* ---------- outcomes bento ---------- */
.outcomes{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:300px 300px;gap:18px}
.oc{position:relative;margin:0;border-radius:26px;overflow:hidden;background:#1a1f4a;box-shadow:0 30px 60px -30px rgba(35,45,140,.5);isolation:isolate}
.oc0{grid-row:span 2}
.oc3{grid-column:span 2}
.oc img{position:absolute;inset:-12% 0 auto;width:100%;height:124%;object-fit:cover;transition:transform 1.1s var(--ease)}
.oc:hover img{transform:scale(1.05)}
.oc::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(10,14,44,0) 35%,rgba(10,14,44,.85))}
.oc figcaption{position:absolute;left:22px;right:22px;bottom:20px;z-index:1;color:#fff;display:grid;gap:6px}
.oc-tag{justify-self:start;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);padding:5px 10px;border-radius:99px}
.oc b{font-size:clamp(20px,2vw,28px);letter-spacing:-.03em;line-height:1.1}
.oc-p{font-size:14px;color:#D6DAF5;max-width:420px}

/* ---------- team teaser collage ---------- */
.tt-collage{position:relative;height:520px}
.tt{position:absolute;margin:0;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(35,45,140,.45);background:#1a1f4a}
.tt img{width:100%;height:100%;object-fit:cover}
.tt-a{left:0;top:0;width:78%;height:66%}
.tt-b{right:0;bottom:0;width:56%;height:46%;border:6px solid var(--bg)}
.tt-c{left:6%;bottom:0;width:38%;height:38%;border:6px solid var(--bg)}
.tt-chip{position:absolute;right:4%;top:8%;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 20px 40px -16px rgba(10,14,44,.5);z-index:2}
.tt-chip b{display:block;font-size:16px}
.tt-chip span{font-size:12px;color:var(--muted)}

/* ---------- office gallery (masonry-style grid) ---------- */
.office{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:14px}
.of{position:relative;margin:0;border-radius:20px;overflow:hidden;background:#1a1f4a}
.of0{grid-column:span 2;grid-row:span 2}
.of3{grid-row:span 2}
.of img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.of:hover img{transform:scale(1.06)}
.of::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(10,14,44,.7))}
.of figcaption{position:absolute;left:14px;bottom:12px;z-index:1;color:#fff;font-size:13px;font-weight:700}

/* ---------- service page: photo beside the problem list ---------- */
.pain-photo{margin:26px 0 0;border-radius:24px;overflow:hidden;height:340px;background:#1a1f4a;box-shadow:0 30px 60px -28px rgba(35,45,140,.45)}
.pain-photo img{width:100%;height:124%;object-fit:cover}

/* ---------- large screens: use the extra room ---------- */
@media (min-width:1600px){
  .wrap{width:min(1320px,100% - 64px)}
  .hs{--pad:max(32px,calc((100vw - 1320px) / 2))}
  .outcomes{grid-template-rows:340px 340px}
  .office{grid-auto-rows:240px}
}
@media (min-width:2200px){
  html{font-size:112%}
  .wrap{width:min(1480px,100% - 80px)}
  .hs{--pad:max(40px,calc((100vw - 1480px) / 2))}
}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .outcomes{grid-template-columns:1fr 1fr;grid-template-rows:280px 280px 280px}
  .oc0{grid-row:span 1;grid-column:span 2}
  .oc3{grid-column:span 2}
  .tt-collage{height:460px;max-width:620px;width:100%;margin:0 auto}
  .office{grid-template-columns:repeat(3,1fr);grid-auto-rows:190px}
  .of3{grid-row:span 1}
  .pain-photo{height:300px}
}

/* ---------- phones ---------- */
@media (max-width:680px){
  .outcomes{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:300px}
  .oc0,.oc3{grid-column:auto;grid-row:auto}
  .oc figcaption{left:18px;right:18px;bottom:16px}
  .tt-collage{height:360px}
  .tt-b,.tt-c{border-width:4px}
  .tt-chip{padding:9px 12px}
  .office{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px}
  .of0{grid-column:span 2;grid-row:span 2}
  .of figcaption{font-size:12px;left:10px;bottom:8px}
  .pain-photo{height:240px;margin-top:20px}
}
@media (max-width:360px){
  .office{grid-template-columns:1fr;grid-auto-rows:200px}
  .of0{grid-column:auto;grid-row:auto}
}

/* ---------- success badges on photos ("why they're smiling") ---------- */
.win{position:absolute;z-index:3;top:18px;right:18px;display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:16px;padding:10px 14px 10px 10px;box-shadow:0 18px 40px -14px rgba(10,14,44,.55);font-style:normal}
.win i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-size:12px;color:#fff;background:linear-gradient(135deg,#12B76A,#32D583);flex:none}
.win small{display:block;font-size:11px;font-weight:700;color:var(--muted);line-height:1.2}
.win b{display:block;font-size:18px;letter-spacing:-.03em;line-height:1.15;white-space:nowrap}
.ib-win{top:auto;bottom:clamp(36px,5vw,64px);right:max(16px,calc((100vw - 1200px) / 2));transform:scale(1.08);transform-origin:right bottom}
.pain-photo{position:relative}

/* ---------- leader ---------- */
.leader{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}
.leader-photo{position:relative;margin:0;border-radius:28px;overflow:hidden;aspect-ratio:4/5;background:#E9EAF0;box-shadow:0 40px 80px -30px rgba(35,45,140,.5)}
.leader-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.leader-photo figcaption{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:16px;padding:12px 16px}
.leader-photo figcaption b{display:block;font-size:18px;letter-spacing:-.02em}
.leader-photo figcaption span{font-size:13px;color:var(--muted)}
.leader h2{margin:18px 0 18px;font-size:clamp(30px,3.8vw,48px)}
.leader-quote{font-family:"Instrument Serif",serif;font-style:italic;font-size:clamp(22px,2.2vw,30px);line-height:1.3;color:var(--ink-2);border-left:3px solid var(--indigo);padding-left:18px;margin-bottom:18px}
.leader-mini{display:flex!important;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.leader-mini img{width:44px;height:44px;border-radius:12px;object-fit:cover}
.leader-mini b{display:block;font-size:14px}
.leader-mini span span{font-size:11px;color:var(--muted)}

@media (max-width:1100px){
  .leader{grid-template-columns:1fr;gap:34px}
  .leader-photo{max-width:420px;width:100%;margin:0 auto}
}
@media (max-width:680px){
  .win{top:12px;right:12px;padding:8px 11px 8px 8px;gap:8px;border-radius:13px}
  .win i{width:24px;height:24px;border-radius:8px;font-size:10px}
  .win small{font-size:10px}
  .win b{font-size:15px}
  .ib-win{top:16px;bottom:auto;transform:none}
  .leader-photo{max-width:320px}
}
@media (max-width:680px){
  .of .win{top:8px;right:8px;padding:6px 9px 6px 6px;gap:6px;border-radius:10px}
  .of .win small{display:none}
  .of .win i{width:20px;height:20px;border-radius:6px;font-size:9px}
  .of .win b{font-size:13px}
  .of0 .win small{display:block}
}