/* ── tim ──────────────────────────────────────────────────── */
/* Empat kartu tim inti: potret + nama di kepala kartu, satu paragraf ringkas,
   satu baris chip, lalu biografi lengkap di balik <details> ("Selengkapnya" di
   draf klien). <details> dipakai apa adanya: bisa dibuka tanpa JavaScript,
   dan pembaca layar sudah tahu ia bisa dibuka-tutup. */
.team{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:820px){ .team{ grid-template-columns:minmax(0,1fr); } }
.team article,.pop-lead article{ background:var(--surface); padding:clamp(22px,2.6vw,34px); display:flex; flex-direction:column; gap:16px; }
.lead-head{ display:grid; grid-template-columns:clamp(84px,9vw,112px) minmax(0,1fr); gap:clamp(14px,1.6vw,20px); align-items:end; }
.lead-head img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; border:1px solid var(--line-2); }
/* Potret dua nada, dengan versi berwarna (-warna, potongan yang sama) tepat di
   atasnya: tersembunyi, lalu muncul saat kartu, potret di grid, atau potret di
   profil yang dibuka disorot. Keduanya dibuat assets/source/team-portraits.py. */
.ph{ position:relative; display:block; }
.ph .ph-c{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .35s ease; }
.team article:hover .ph-c,
.team article:has(.lead-open:focus-visible) .ph-c,
.crew-grid li:hover .ph-c,
.ph:hover .ph-c{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .ph .ph-c{ transition:none; } }
.lead-head > div{ display:flex; flex-direction:column; gap:7px; }
:is(.team,.pop-lead) .role{ font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--orange-br); }
:is(.team,.pop-lead) h3{ font-size:clamp(19px,1.8vw,24px); font-variation-settings:"wdth" 108,"wght" 700; line-height:1.2; }
.lead-title{ font-size:13.5px; color:var(--dim); }
.lead-intro{ color:var(--txt-2); font-size:15px; line-height:1.6; }
:is(.team,.pop-lead) .field{ padding-top:16px; border-top:1px solid var(--line); }
:is(.team,.pop-lead) h4{ font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-variation-settings:normal; font-weight:500; margin-bottom:11px; }
:is(.team,.pop-lead) .field ul,:is(.team,.pop-lead) .chips{ display:flex; flex-wrap:wrap; gap:7px; }
:is(.team,.pop-lead) .field li,:is(.team,.pop-lead) .chips li{ font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.05em; border:1px solid var(--line-2); padding:5px 9px; color:var(--txt-2); }
/* "Lihat profil lengkap" membuka profil di panel detail bersama (css/pop.css),
   seperti kartu layanan: panel tumbuh dari kartu yang diklik, dengan bilah
   kontrol (hitungan, sebelumnya/berikutnya, tutup) di atasnya. Tanpa JS
   (.team tanpa .is-js) tombol tidak berguna, jadi biografi lengkap tampil
   langsung di bawah ringkasan. */
.lead-open{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; width:100%;
  padding:14px 0 0; background:none; border:0; border-top:1px solid var(--line); cursor:pointer; text-align:left;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-br); }
.lead-open::after{ content:"\2192"; font-size:15px; letter-spacing:0; transition:transform .15s; }
.lead-open:hover{ color:var(--txt); }
.lead-open:hover::after{ transform:translateX(3px); }
.lead-open:focus-visible{ outline:2px solid var(--orange-br); outline-offset:4px; }
.team:not(.is-js) .lead-open{ display:none; }
/* Kartu utuh adalah tombolnya, seperti kartu layanan: lapisan ::before tombol
   direntangkan menutupi kartu, jadi Enter/Spasi dan nama tombol tetap milik
   tombol aslinya. Hover memakai gerak yang sama dengan layanan: tanda sudut
   menyala lalu mendorong ke tepi, dan kartu terangkat dari grid. */
.team.is-js article{ position:relative; transition:background-color .4s ease, box-shadow .35s ease; }
.team.is-js .lead-open::before{ content:""; position:absolute; inset:0; z-index:1; }
.team.is-js .lead-open:focus-visible{ outline:none; }
.team.is-js .lead-open:focus-visible::before{ outline:2px solid var(--orange-br); outline-offset:-3px; }
.team.is-js article::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  transition:opacity .16s ease, background-size .5s cubic-bezier(.22,.68,.24,1) .06s;
  background:var(--brk-tl) left top / 22px 22px no-repeat, var(--brk-br) right bottom / 22px 22px no-repeat;
}
.team.is-js article:has(.lead-open:hover)::after,
.team.is-js article:has(.lead-open:focus-visible)::after{
  opacity:1; background-size:48px 48px;
  animation:svc-brk 2.6s ease-in-out .56s infinite;
}
.team.is-js article:has(.lead-open:hover),
.team.is-js article:has(.lead-open:focus-visible){
  z-index:1; background-color:rgba(38,48,55,.96);
  box-shadow:0 24px 48px -28px rgba(0,0,0,.92);
}
.team.is-js article:has(.lead-open:hover) .lead-open{ color:var(--txt); }
.team.is-js article:has(.lead-open:hover) .lead-open::after{ transform:translateX(3px); }
@media (prefers-reduced-motion: reduce){
  .team.is-js article,.team.is-js article::after{ transition:none; }
  .team.is-js article:has(.lead-open:hover)::after,
  .team.is-js article:has(.lead-open:focus-visible)::after{ animation:none; background-size:40px 40px; }
}
.team.is-js .lead-full{ display:none; }
.team .team-ctl{ display:none; }

/* ── profil, dibuka ── potret di kolom sendiri di kiri, di luar area gulir,
   jadi ia diam di tempat sepanjang profil dibaca. Di HP kolom itu hilang dan
   potret di dalam teks yang tampil, di atas, ikut tergulir bersama profil. */
.pop-lead{ width:min(1080px, calc(100vw - 2 * var(--shell))); }
.pop-lead .team-ctl{ display:flex; justify-content:space-between; align-items:center; gap:14px;
  position:relative; z-index:5; flex:none;
  background:var(--surface-2); border-bottom:1px solid var(--line); padding:12px clamp(16px,2.2vw,28px); }
.pop-lead .team-ctl .svc-count{ text-align:left; }
.pop-lead .pop-side{ width:calc(clamp(200px,22vw,300px) + clamp(24px,3vw,44px)); padding:clamp(24px,3vw,44px) 0 clamp(24px,3vw,44px) clamp(24px,3vw,44px); }
.pop-lead .pop-side img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; border:1px solid var(--line-2); }
.pop-lead article{ padding:clamp(24px,3vw,44px) clamp(24px,3vw,44px) clamp(24px,3vw,44px) clamp(24px,3.4vw,52px); }
.pop-lead article > *{ max-width:76ch; }
.pop-lead .lead-head{ display:block; }
.pop-lead .lead-head .ph{ display:none; }
.pop-lead .lead-head > div{ gap:9px; }
.pop-lead h3{ font-size:clamp(24px,2.6vw,34px); }
.pop-lead .lead-full{ display:flex; padding-top:4px; border-top:1px solid var(--line); }
@media (max-width:720px){
  .pop-lead{ width:100vw; }
  .pop-lead .pop-side{ display:none; }
  .pop-lead article{ padding:clamp(24px,3vw,44px); }
  .pop-lead .lead-head .ph{ display:block; width:min(60%,220px); margin-bottom:16px; }
}
.lead-full{ display:flex; flex-direction:column; gap:12px; padding-top:16px; }
.lead-full p{ color:var(--txt-2); font-size:14.5px; line-height:1.65; }
.lead-full h4{ margin:8px 0 0; }
.lead-full dl{ margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 16px; font-size:14px; }
.lead-full dt{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--dim); padding-top:3px; }
.lead-full dd{ margin:0; color:var(--txt-2); line-height:1.55; }
.lead-list{ display:flex; flex-direction:column; gap:9px; }
.lead-list li{ position:relative; padding-left:16px; color:var(--txt-2); font-size:14px; line-height:1.6; }
.lead-list li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; background:var(--orange); }
.lead-list b{ color:var(--txt); font-weight:600; }
@media (max-width:520px){ .lead-full dl{ grid-template-columns:minmax(0,1fr); gap:2px; } .lead-full dd{ margin-bottom:8px; } }

/* Tim Kami: seluruh personel termasuk finance dan logistik. Potret sudah
   dipotong dan diberi warna dua nada oleh assets/source/team-portraits.py
   supaya latar putih, merah, dan lapangan terbaca sebagai satu set. */
.crew{ margin-top:clamp(44px,5vw,72px); }
.crew-head{ display:grid; gap:10px; margin-bottom:clamp(20px,2.4vw,32px); }
.crew-head h3{ font-size:clamp(22px,2.4vw,30px); font-variation-settings:"wdth" 110,"wght" 800; }
.crew-head h3 em{ font-style:normal; color:var(--orange-br); }
.crew-head p{ color:var(--txt-2); max-width:62ch; }
.crew-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px) clamp(12px,1.4vw,18px); }
@media (max-width:1080px){ .crew-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:720px){ .crew-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:460px){ .crew-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.crew-grid li{ display:flex; flex-direction:column; gap:4px; }
.crew-grid img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; border:1px solid var(--line); }
.crew-grid .ph{ margin-bottom:8px; }
.crew-grid b{ font-size:14px; font-weight:600; line-height:1.3; }
.crew-grid span{ font-size:12.5px; color:var(--dim); line-height:1.4; }
.crew-groups{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(28px,3.4vw,44px); }
@media (max-width:820px){ .crew-groups{ grid-template-columns:minmax(0,1fr); } }
.crew-groups figure{ margin:0; background:var(--surface); display:flex; flex-direction:column; }
.crew-groups img{ width:100%; height:clamp(220px,26vw,380px); object-fit:cover; display:block; }
.crew-groups figure:last-child img{ object-position:50% 70%; }
.crew-groups figcaption{ padding:16px clamp(16px,1.8vw,24px) 20px; display:flex; flex-direction:column; gap:8px; }
.crew-groups h4{ font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-br); font-weight:500; font-variation-settings:normal; }
.crew-groups p{ font-size:13.5px; color:var(--txt-2); line-height:1.65; }