/* ── hero ─────────────────────────────────────────────────── */
.hero{
  position:relative;
  display:flex; flex-direction:column;
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 48%; }
@media (max-width:700px){
  .hero-media img{ object-position:72% 50%; }
}
/* Dua scrim dipisah supaya masing-masing bisa dimasker sendiri. Yang mendatar
   menjaga keterbacaan h1 + lede di kolom kiri, lalu memudar sebelum mencapai
   .hero-foot — kalau tidak, separuh kiri band KPI menutup foto pada .9-.96 dan
   rig-nya hilang sama sekali. Yang menegak hanya mengunci tepi bawah. */
.hero-media::before,
.hero-media::after{ content:""; position:absolute; inset:0; }
.hero-media::after{
  background:linear-gradient(96deg, rgba(35,43,51,.96) 0%, rgba(35,43,51,.9) 34%, rgba(35,43,51,.42) 66%, rgba(35,43,51,.72) 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 54%, rgba(0,0,0,.18) 86%, rgba(0,0,0,.06) 100%);
  mask-image:linear-gradient(to bottom, #000 54%, rgba(0,0,0,.18) 86%, rgba(0,0,0,.06) 100%);
}
.hero-media::before{
  background:linear-gradient(to top, rgba(35,43,51,.52), rgba(35,43,51,0) 40%);
}
.hero-topo{ position:absolute; inset:0; background-image:var(--topo), var(--grid); background-size:1400px 900px, 56px 56px; background-position:-260px -120px, 0 0; opacity:.09; pointer-events:none; }
.hero-in{
  position:relative; width:100%; max-width:1380px; margin:0 auto;
  padding:clamp(44px,6vw,96px) var(--shell) clamp(36px,4.5vw,68px);
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
}
.hero h1{
  font-size:clamp(31px,4.5vw,62px); font-variation-settings:"wdth" 112,"wght" 800;
  letter-spacing:-.028em; line-height:1.04; max-width:30ch;
}
.hero h1 em{ font-style:normal; color:var(--orange-br); }
.hero-lede{ margin-top:24px; max-width:60ch; font-size:clamp(15.5px,1.25vw,18.5px); color:var(--txt-2); line-height:1.65; }
.hero-acts{ margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; }
/* ── column band: both hero-foot tiers share one 4-col grid ── */
.band{
  --gut:clamp(16px,2vw,28px);
  max-width:1380px; margin:0 auto; padding-inline:var(--shell);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
}
.band > *{ padding-inline:var(--gut); border-left:1px solid var(--line); }
.band > *:nth-child(4n+1){ padding-left:0; border-left:0; }
.band > *:nth-child(4n){ padding-right:0; }
@media (max-width:900px){
  .band{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .band > *:nth-child(odd){ padding-left:0; border-left:0; }
  .band > *:nth-child(even){ padding-right:0; }
  .band > *:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:560px){
  .band{ grid-template-columns:minmax(0,1fr); }
  .band > *{ padding-inline:0; border-left:0; }
  .band > *:nth-child(n+2){ border-top:1px solid var(--line); }
}

/* ── hero foot: rekam jejak di atas, konteks lokasi di bawah ── */
.hero-foot{
  position:relative; flex:0 0 auto;
  border-top:1px solid rgba(255,255,255,.14);
  background:linear-gradient(to top, rgba(35,43,51,.72), rgba(35,43,51,.4));
  backdrop-filter:blur(4px) saturate(1.1);
}
.hero-stats{ --gut:clamp(16px,2.2vw,30px); }
.hero-stats li{ padding-block:clamp(18px,2.2vw,28px); }
.hero-stats .v{
  display:block; font-family:Archivo,sans-serif;
  font-variation-settings:"wdth" 112,"wght" 800;
  font-size:clamp(30px,3.4vw,46px); line-height:.92;
  color:var(--orange-br); letter-spacing:-.035em;
}
.hero-stats .t{ display:block; margin-top:10px; font-size:14px; font-weight:600; line-height:1.35; }
.hero-stats .s{ display:block; margin-top:5px; font-size:12.5px; color:var(--txt-2); line-height:1.5; }

.hero-facts{ --gut:clamp(14px,1.6vw,22px); border-top:1px solid rgba(255,255,255,.1); }
.hero-facts li{ padding-block:13px; display:flex; flex-direction:column; gap:5px; }
.hero-facts i{ font-style:normal; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.hero-facts b{ font-size:13.5px; font-weight:600; color:var(--txt); }

/* Empat angka ini harus terbaca sebagai satu baris. Di bawah 1080px baris
   gloss yang pertama dilepas; grid tetap 2×2 dan tidak runtuh jadi tumpukan
   empat baris yang akan mendorong salinan hero keluar layar. */
@media (max-width:1080px){ .hero-stats .s{ display:none; } }
@media (max-width:560px){
  .hero-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-stats > li{ padding-inline:var(--gut); border-left:1px solid var(--line); }
  .hero-stats > li:nth-child(odd){ padding-left:0; border-left:0; }
  .hero-stats > li:nth-child(even){ padding-right:0; }
  .hero-stats > li:nth-child(n+3){ border-top:1px solid var(--line); }
  .hero-stats .v{ font-size:34px; }
  .hero-stats .t{ font-size:12.5px; }
}