/* Team in the People style (14 Oct 2026): photo-led and warm, on paper. Faces are the lead: each person is a large
   portrait beside their own words, set large, with the name and role as the caption, the side swapping down the page.
   The 2022 wall is a bigger grid of portraits on paper with the name filter beside its title. No trays or boxes around
   people; Keep exploring stays as it was. Scoped to main.pg-team; overrides the tm-* rules in company.css. Copy unchanged. */

main.pg-team{--pp-photo-r:28px}

/* hero: the words beside REKA's real Kuala Lumpur studio */
main.pg-team .tm-hero{padding:184px 0 0}
main.pg-team .tm-hero .container{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:56px;align-items:center}
main.pg-team .tm-hero h1{font:600 84px/1 var(--sans);letter-spacing:-.045em;max-width:1000px;text-wrap:balance}
main.pg-team .tm-hero p{max-width:760px;margin-top:28px;font-size:21px;line-height:1.55;color:var(--ink)}
main.pg-team .tm-hero-photo{overflow:hidden;border-radius:28px;background:var(--oat);aspect-ratio:4/3}
main.pg-team .tm-hero-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 48%}

/* chapter titles: left, as an editorial page; the lead sits beside the title */
main.pg-team .blk.chap.pp-sec{padding-top:112px}
main.pg-team .pp-head{max-width:none;margin:0 0 48px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px;text-align:left}
main.pg-team .tm-h2{font:600 56px/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-align:left;text-wrap:balance}
main.pg-team .tm-lead{margin:0;max-width:44ch;font-size:18px;line-height:27px;color:var(--muted);text-align:left}

/* In their own words: one row per person, a large portrait beside the quote; the whole row is the link */
main.pg-team .pp-people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:96px}
main.pg-team .tm-person{display:block;transition:none}
main.pg-team .tm-person:hover{transform:none}
main.pg-team .tm-person .card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:1fr auto auto auto auto 1fr;column-gap:72px;padding:0;background:none;box-shadow:none;border-radius:var(--pp-photo-r)}
main.pg-team .tm-person .card:hover,main.pg-team .tm-person .card:focus-visible{background:none;transform:none;box-shadow:none}
main.pg-team .tm-person .frame{grid-column:1;grid-row:1/-1;margin:0;border-radius:var(--pp-photo-r);background:var(--oat);transition:box-shadow .3s var(--ease)}
main.pg-team .tm-person img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 25%;border-radius:0;transition:transform .6s var(--ease);box-shadow:none}
main.pg-team .tm-person .card:hover .frame{background:var(--oat);box-shadow:0 0 0 3px var(--t)}
main.pg-team .tm-person .card:hover img{transform:scale(1.02);box-shadow:none}
main.pg-team .tm-person blockquote,main.pg-team .tm-person .card>p{grid-column:2;grid-row:2;margin:0;max-width:none}
main.pg-team .tm-person blockquote{font:500 clamp(28px,2.9vw,42px)/1.22 var(--sans);letter-spacing:-.025em;color:var(--ink);text-indent:-.42em;text-wrap:pretty}
main.pg-team .tm-person blockquote::first-letter{color:var(--t-ink)}
main.pg-team .tm-person .card>p{font:400 clamp(22px,2.1vw,30px)/1.3 var(--sans);letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
main.pg-team .tm-person .tt{grid-column:2;grid-row:3;margin-top:32px;font:600 22px/1.25 var(--sans);letter-spacing:-.3px;color:var(--ink)}
main.pg-team .tm-person .tm-role{grid-column:2;grid-row:4;margin:4px 0 0;font-size:15px;line-height:22px;font-weight:500;color:var(--t-ink)}
main.pg-team .tm-person .card-foot{grid-column:2;grid-row:5;margin:0;padding-top:24px;justify-content:flex-start;gap:14px}
main.pg-team .tm-person .card-foot .code{order:2}
/* the side swaps down the page */
main.pg-team .tm-person:nth-child(even) .card{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
main.pg-team .tm-person:nth-child(even) .frame{grid-column:2}
main.pg-team .tm-person:nth-child(even) .card>:not(.frame){grid-column:1}

/* The team in 2022: bigger portraits on paper, the name under each face, the filter beside the title */
main.pg-team .tm-wall-hd{align-items:flex-end}
main.pg-team .tm-find input{width:300px;height:48px;background:#fff}
main.pg-team .tm-wall{margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:36px 20px}
main.pg-team .tm-wall li{background:none;padding:0;border-radius:0;box-shadow:none;transition:none}
main.pg-team .tm-wall li:hover{transform:none;box-shadow:none}
main.pg-team .tm-wall img{aspect-ratio:3/4;border-radius:20px;transition:box-shadow .3s var(--ease)}
main.pg-team .tm-wall li:hover img{box-shadow:0 0 0 3px var(--brand)}
main.pg-team .tm-wall span{margin-top:12px;font:500 15px/20px var(--sans);color:var(--ink)}
main.pg-team .tm-wall li:hover span{color:var(--brand-text)}
main.pg-team .tm-wnote{margin-top:24px;font-size:15px}

@media (max-width:1100px){
  main.pg-team .tm-person .card{column-gap:40px}
  main.pg-team .tm-wall{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  main.pg-team .tm-hero{padding:136px 0 0}
  main.pg-team .tm-hero .container{grid-template-columns:minmax(0,1fr);gap:28px}
  main.pg-team .tm-hero h1{font-size:46px;line-height:1.02;letter-spacing:-1.6px}
  main.pg-team .tm-hero p{font-size:17px;line-height:1.55;margin-top:20px}
  main.pg-team .tm-hero-photo{border-radius:20px}
  main.pg-team .blk.chap.pp-sec{padding-top:72px}
  main.pg-team .pp-head{margin-bottom:32px;flex-direction:column;align-items:stretch}
  main.pg-team .tm-h2{font-size:38px;line-height:1.08}
  main.pg-team .tm-lead{font-size:16px;line-height:24px}
  main.pg-team .tm-find,main.pg-team .tm-find input{width:100%}
  main.pg-team .pp-people{gap:56px}
  /* phones: the portrait first, then the words under it, one person to a screen */
  main.pg-team .tm-person .card,main.pg-team .tm-person:nth-child(even) .card{display:flex;flex-direction:column;gap:0;border-radius:20px}
  main.pg-team .tm-person .frame{border-radius:20px;margin-bottom:22px}
  main.pg-team .tm-person img{aspect-ratio:4/5}
  main.pg-team .tm-person blockquote{font-size:26px;line-height:1.25}
  main.pg-team .tm-person .card>p{font-size:22px}
  main.pg-team .tm-person blockquote,main.pg-team .tm-person .card>p{order:1}
  main.pg-team .tm-person .tt{order:2;margin-top:18px;font-size:19px}
  main.pg-team .tm-person .tm-role{order:3}
  main.pg-team .tm-person .card-foot{order:4}
  main.pg-team .tm-person .tm-role{font-size:14px;line-height:20px}
  main.pg-team .tm-person .card-foot{padding-top:16px}
  main.pg-team .tm-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px}
}
@media (max-width:600px){
  main.pg-team .tm-person img{aspect-ratio:1}
  main.pg-team .tm-wall{gap:20px 10px}
  main.pg-team .tm-wall img{border-radius:14px}
  main.pg-team .tm-wall span{margin-top:8px;font-size:12.5px;line-height:16px}
}
@media (prefers-reduced-motion:reduce){
  main.pg-team .tm-person img,main.pg-team .tm-person .frame,main.pg-team .tm-wall img{transition:none}
  main.pg-team .tm-person .card:hover img{transform:none}
}