/* Imajinar — token & dasar. Lihat DESIGN.md untuk alasan tiap pilihan. */

:root{
  /* warna inti, di-sample dari file logo lalu dinyatakan OKLCH */
  --navy:        oklch(0.34 0.062 231);
  --navy-deep:   oklch(0.26 0.048 231);
  --cyan:        oklch(0.70 0.128 216);
  --green:       oklch(0.62 0.161 154);
  --lime:        oklch(0.84 0.170 113);
  --teal-deep:   oklch(0.56 0.087 190);

  --ink:         oklch(0.26 0.040 231);
  --paper:       oklch(0.98 0.005 220);
  --paper-2:     oklch(0.95 0.012 215);
  --paper-3:     oklch(0.91 0.018 212);
  --muted:       oklch(0.475 0.035 225);
  --muted-dark:  oklch(0.81 0.040 220);
  --cyan-ink:    oklch(0.52 0.098 216);
  --accent-ink:  oklch(0.445 0.115 168);
  --line:        oklch(0.34 0.062 231 / 0.14);
  --line-dark:   oklch(0.95 0.02 220 / 0.18);

  /* tipografi fluid, rasio ~1.33 */
  --fs-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-sm:   clamp(0.84rem, 0.81rem + 0.14vw, 0.94rem);
  --fs-base: clamp(1rem,    0.96rem + 0.20vw, 1.12rem);
  --fs-md:   clamp(1.18rem, 1.08rem + 0.48vw, 1.45rem);
  --fs-lg:   clamp(1.5rem,  1.28rem + 1.05vw, 2.1rem);
  --fs-xl:   clamp(2.1rem,  1.62rem + 2.30vw, 3.4rem);
  --fs-2xl:  clamp(2.15rem, 1.55rem + 3.10vw, 4.6rem);
  --fs-3xl:  clamp(2.55rem, 1.55rem + 4.90vw, 6.5rem);
  --fs-gap:  clamp(3rem, 1.4rem + 4.6vw, 5.6rem);

  --pad:     clamp(1.5rem, 5vw, 6rem);
  --sec-y:   clamp(6.5rem, 15vh, 12rem);   /* jarak tegak tiap bab */
  --gutter:  clamp(3rem, 7vw, 8rem);
  --measure: 64ch;

  --notch:   clamp(28px, 5vw, 64px);
  --r-card:  clamp(20px, 2.4vw, 30px);
  --leaf:    50% 50% 50% 4% / 50% 50% 50% 4%;
  /* foto tidak dijadikan elips: radius besar dengan satu sudut ekor,
     mengutip logo tanpa mengorbankan gambarnya */
  --r-photo: clamp(22px, 3.4vw, 48px);
  --leaf-ph:  var(--r-photo) var(--r-photo) var(--r-photo) 8px;
  --leaf-phr: var(--r-photo) var(--r-photo) 8px var(--r-photo);
  --leaf-r:  50% 50% 4% 50% / 50% 50% 4% 50%;

  /* Peran bobot huruf. Aturannya: satu jangkar per blok.
     Judul boleh tebal, sisanya tidak — kalau semua ditebalkan,
     tidak ada yang menonjol dan matanya justru cepat lelah. */
  --w-display: 300;   /* h1, h2, angka besar — ukurannya sudah membawa bobot */
  --w-title:   500;   /* h3, judul item, nama orang: jangkar tiap blok */
  --w-label:   500;   /* eyebrow kecil bertracking, butuh bobot agar terbaca */
  --w-body:    400;   /* naskah. 300 terlalu tipis untuk paragraf Indonesia */
  --w-strong:  700;   /* sangat jarang: Coffee - Play - Joy saja */

  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur:     720ms;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  font-weight:var(--w-body); font-size:var(--fs-base); line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Tidak ada `overflow-x:hidden` di body, dan itu disengaja. Deklarasi itu
   membuat overflow-y body terhitung `auto`, artinya body berubah jadi scroll
   container — penyebab klasik `position:sticky` gagal, dan seluruh Bab 01-03
   bergantung pada sticky. Ternyata tidak dibutuhkan sama sekali: tiap elemen
   dekoratif yang meluber sudah dikurung wadahnya sendiri (.hero__bg, .quote,
   .q, .marquee semuanya overflow:hidden). Diukur di 14 lebar antara 500 dan
   1920px tanpa deklarasi ini: scrollWidth tidak pernah melebihi clientWidth.
   Kalau nanti ada elemen baru yang meluber, kurung di wadah lokalnya —
   jangan kembalikan baris ini. */
img,svg{ display:block; max-width:100% }
a{ color:inherit }
::selection{ background:var(--lime); color:var(--ink) }

h1,h2,.display{
  font-family:Outfit,system-ui,sans-serif; font-weight:var(--w-display);
  line-height:1.04; letter-spacing:-0.022em; margin:0;
  text-wrap:balance;
}
/* h3 adalah judul item, bukan display: bobotnya dinaikkan supaya
   terpisah jelas dari naskah di bawahnya */
h3{
  font-family:Outfit,system-ui,sans-serif; font-weight:var(--w-title);
  font-size:var(--fs-md); letter-spacing:-0.012em; line-height:1.25; margin:0;
}
h1{ font-size:var(--fs-3xl) }
h2{ font-size:var(--fs-2xl) }
p{ margin:0 }

/* ── aksesibilitas ────────────────────────────────────────────────── */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:14px 22px;
  border-radius:0 0 12px 0; font-family:Outfit,sans-serif; font-weight:var(--w-label);
}
.skip:focus{ left:0 }
:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--cyan); outline-offset:3px; border-radius:4px;
}
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── header ───────────────────────────────────────────────────────── */
/* bar progres digerakkan lewat scaleX, bukan width: perubahan width mengotori
   layout tiap frame dan memaksa hitung ulang untuk semua pembacaan rect
   sesudahnya; scaleX murni urusan compositor */
.bar{
  position:fixed; inset:0 auto auto 0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 0; will-change:transform;
  background:var(--lime); z-index:90;
}

header{
  position:fixed; top:clamp(0.9rem,2.2vw,1.5rem); left:50%; transform:translateX(-50%);
  z-index:80; width:min(94vw,1000px);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0.6rem 0.7rem 0.6rem 1.4rem;
  background:oklch(0.995 0.003 220 / 0.9);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid oklch(0.34 0.062 231 / 0.09); border-radius:100px;
  box-shadow:0 10px 34px -22px oklch(0.34 0.062 231 / 0.55);
}
.brand{ position:relative; display:block; height:clamp(22px,2.6vw,28px); flex:none }
.lg{ height:100%; width:auto; transition:opacity 420ms var(--ease) }
.lg--light{ position:absolute; inset:0; opacity:0 }   /* wordmark putih hanya di bidang gelap */
header.on-dark{
  background:oklch(0.245 0.048 231 / 0.92);
  border-color:oklch(0.95 0.02 220 / 0.18);
}
header.on-dark .lg--light{ opacity:1 }
header.on-dark .lg--dark{ opacity:0 }
header.on-dark nav a{ color:var(--paper); opacity:1 }

nav{
  display:flex; align-items:center; gap:clamp(0.5rem,1.8vw,1.9rem);
  font-family:Outfit,sans-serif; font-size:var(--fs-xs); font-weight:var(--w-label);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink);
}
nav a{ text-decoration:none; opacity:0.78; transition:opacity 280ms var(--ease), color 280ms var(--ease) }
nav a:hover{ opacity:1; color:var(--accent-ink) }
nav .cta{
  opacity:1; background:var(--navy); color:var(--paper);
  border-radius:100px; padding:0.68rem 1.3rem; letter-spacing:0.1em;
  transition:background-color 300ms var(--ease), transform 300ms var(--ease);
}
nav .cta:hover{ background:var(--accent-ink); color:var(--paper); transform:translateY(-1px) }
header.on-dark nav .cta{ background:var(--lime); color:var(--ink) }

/* ── kanal kontak di header ────────────────────────────────────────
   Ikon saja, tanpa label. Pil header sudah berisi logo, ID/EN, tiga
   tautan, dan CTA; tiga label lagi akan memaksanya melebar sampai
   menabrak judul bab di bawahnya. Ikon WhatsApp, amplop, dan Instagram
   sudah dikenali tanpa perlu dijelaskan, dan aria-label-nya tetap
   diterjemahkan untuk yang tidak melihatnya. */
.soc{ display:flex; align-items:center; gap:0.15rem; flex:none }
.soc__b{
  display:grid; place-items:center; width:34px; height:34px;
  border-radius:50%; opacity:0.72; color:inherit;
  transition:opacity 280ms var(--ease), color 280ms var(--ease),
             background-color 280ms var(--ease), transform 280ms var(--ease);
}
.soc__b svg{ width:18px; height:18px; display:block }
.soc__b:hover{
  opacity:1; color:var(--accent-ink);
  background:oklch(0.34 0.062 231 / 0.07); transform:translateY(-1px);
}
header.on-dark .soc__b{ color:var(--paper) }
header.on-dark .soc__b:hover{ color:var(--lime); background:oklch(0.95 0.02 220 / 0.10) }
/* Di bawah 880px tiga tautan teks disembunyikan, dan justru di situ ikonnya
   paling berguna: ia jadi satu-satunya jalan pintas ke kanal kontak. */
@media (max-width:880px){ .soc__b{ width:30px; height:30px } .soc{ gap:0 } }
@media (max-width:420px){ .soc__b{ width:28px; height:28px } .soc__b svg{ width:16px; height:16px } }

/* ── napas ─────────────────────────────────────────────────────────
   Bukan denyut yang menarik perhatian, tapi tarikan napas: 4,2 detik,
   amplitudo 2%. Perusahaan ini menutup company profile-nya dengan
   "It's okay to take a break", jadi tombol yang bernapas adalah brand
   ini bicara, bukan trik konversi.

   HANYA transform dan opacity. Versi pertama menganimasikan box-shadow
   yang mengembang, dan itu memaksa repaint tiap frame, terus-menerus,
   di dua tombol sekaligus. Cincinnya sekarang pseudo-element yang
   diskalakan lalu diredupkan: dua properti yang ditangani compositor.

   MATI TOTAL saat prefers-reduced-motion, dan cincinnya ikut dihapus
   dari render tree, bukan cuma dihentikan. Gerak berulang tanpa henti
   adalah jenis animasi yang paling mengganggu bagi yang sensitif. */
@keyframes breathe{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.02) } }
@keyframes breathe-ring{
  0%        { transform:scale(1);    opacity:0.4 }
  70%, 100% { transform:scale(1.26); opacity:0 }
}
.breathe, nav .cta{ position:relative; animation:breathe 4.2s var(--ease) infinite }
.breathe::after, nav .cta::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:2px solid currentColor; pointer-events:none;
  animation:breathe-ring 4.2s var(--ease) infinite;
}
/* Disentuh, napasnya berhenti: kursor sudah di sana, undangannya selesai. */
.breathe:hover, .breathe:hover::after,
nav .cta:hover, nav .cta:hover::after{ animation-play-state:paused }
@media (prefers-reduced-motion:reduce){
  .breathe, nav .cta{ animation:none }
  .breathe::after, nav .cta::after{ display:none }
}

/* ── pemilih bahasa ────────────────────────────────────────────────
   Segmented control, bukan dropdown: pilihannya cuma dua, jadi tidak
   ada gunanya disembunyikan di balik satu klik. Yang aktif diisi
   penuh — di header terang pakai navy, di header gelap pakai lime,
   mengikuti aturan yang sudah dipakai tombol CTA di sebelahnya. */
.lang{
  display:flex; align-items:center; gap:2px; flex:none;
  padding:3px; border-radius:100px;
  border:1px solid var(--line);
  background:oklch(0.34 0.062 231 / 0.05);
}
.lang__b{
  font:inherit; font-size:var(--fs-xs); font-weight:var(--w-label);
  letter-spacing:0.1em; line-height:1; color:var(--ink); opacity:0.6;
  background:none; border:0; border-radius:100px; cursor:pointer;
  padding:0.36rem 0.62rem;
  transition:background-color 300ms var(--ease), color 300ms var(--ease), opacity 300ms var(--ease);
}
.lang__b:hover{ opacity:1 }
.lang__b[data-on]{ background:var(--navy); color:var(--paper); opacity:1 }
header.on-dark .lang{ border-color:var(--line-dark); background:oklch(0.95 0.02 220 / 0.08) }
header.on-dark .lang__b{ color:var(--paper) }
header.on-dark .lang__b[data-on]{ background:var(--lime); color:var(--ink) }
@media (max-width:880px){ .lang__b{ padding:0.36rem 0.5rem; letter-spacing:0.06em } }
@media (max-width:880px){ nav .hide-sm{ display:none } header{ padding-left:1.1rem } }

/* ── kerangka section ─────────────────────────────────────────────── */
.sec{ position:relative; padding:var(--sec-y) var(--pad); z-index:1 }
.sec + .sec{ margin-top:calc(var(--notch) * -1); padding-top:calc(var(--sec-y) + var(--notch)) }
/* Jarak tegak desktop terbawa apa adanya ke ponsel menghasilkan pita kosong
   sekitar 250px di tiap batas bab — di layar 844px itu hampir sepertiga
   layar tanpa apa pun. Ukuran hurufnya juga lebih kecil di sini, jadi jarak
   yang sama terbaca jauh lebih longgar. Dikecilkan, bukan dihapus: konsep
   airy-nya tetap, cuma diskalakan ke layarnya. */
@media (max-width:600px){ :root{ --sec-y:clamp(4rem,9vh,5.5rem) } }

/* ── panel bertumpuk (Bab 01-03) ──────────────────────────────────
   Tiap panel punya track scroll sendiri. Panel terpaku di atas layar
   selama track-nya dilewati, lalu blok berikutnya menutupinya. */
.track{ position:relative; height:200vh }
.track--long{ height:260vh }
.panel{
  position:sticky; top:0; height:100svh; overflow:hidden;
  border-radius:44px 44px 0 0;
  box-shadow:0 -24px 60px -30px oklch(0.34 0.062 231 / 0.45);
  display:grid; align-content:center; align-content:safe center;
  padding-block:clamp(4.5rem,9vh,7rem);
  /* di layar pendek judul ikut mengecil, supaya panel tidak pernah memotong */
  --fs-2xl:clamp(2.15rem, min(1.55rem + 3.10vw, 9vh), 4.6rem);
  transform-origin:50% 100%;   /* menyusut ke tepi bawah: tanpa celah ke blok penutup */
  will-change:transform, opacity;
}
.panel > .wrap{ width:100%; max-height:100% }
.panel .chapter{ margin-bottom:clamp(1.2rem,2.4vh,2rem) }
/* di dalam panel, lead dirapatkan: ruangnya terbatas satu layar dan
   naskahnya bisa berubah panjang lewat i18n */
.panel .lead{ line-height:1.55; margin-top:0.85rem !important }
/* blok yang menutupi panel terakhir ikut memakai radius yang sama */
.sec--cap{ border-radius:44px 44px 0 0 }

/* Di layar sempit, layar pendek, dan reduced-motion mekanismenya mati
   total: track runtuh, panel jadi section biasa yang mengalir. */
@media (max-width:900px), (max-height:740px), (prefers-reduced-motion:reduce){
  .track{ height:auto }
  .panel{
    position:static; height:auto; overflow:visible;
    display:block; padding-block:clamp(6.5rem,15vh,12rem);
    --fs-2xl:clamp(2.15rem, 1.55rem + 3.10vw, 4.6rem);
    transform:none !important; opacity:1 !important; will-change:auto;
  }
}

/* takik daun berselang-seling: section saling mengunci, bukan tumpukan
   persegi identik seperti v5 */
.sec--notch-l{ border-radius:var(--notch) 0 0 0 }
.sec--notch-r{ border-radius:0 var(--notch) 0 0 }
.sec--leaf-l{ border-radius:calc(var(--notch) * 2.4) 0 0 0 }
.sec--leaf-r{ border-radius:0 calc(var(--notch) * 2.4) 0 0 }

.sec--paper{ background:var(--paper) }
.sec--paper2{ background:var(--paper-2) }
.sec--navy{ background:var(--navy); color:var(--paper) }
.sec--navy h2,.sec--navy h3{ color:var(--paper) }
.sec--lime{ background:var(--lime); color:var(--ink) }
.sec--cyan{ background:var(--teal-deep); color:var(--paper) }

.wrap{ max-width:1240px; margin-inline:auto }
.narrow{ max-width:var(--measure) }

.chapter{ /* label bab */
  font-family:Outfit,sans-serif; font-size:var(--fs-xs); font-weight:var(--w-label);
  letter-spacing:0.17em; text-transform:uppercase; color:var(--cyan-ink);
  margin:0 0 clamp(1.8rem,3.6vh,3rem); display:block;
}
.chapter b{ font-weight:var(--w-title); color:var(--ink) }
.sec--navy .chapter b{ color:var(--paper) }
.sec--lime .chapter b{ color:oklch(0.28 0.075 120) }
.chapter::before{ content:""; display:inline-block; width:26px; height:1px; background:currentColor; opacity:0.5; vertical-align:middle; margin-right:0.7rem }
.sec--navy .chapter{ /* label bab */ color:var(--cyan) }
.sec--cyan .chapter{ /* label bab */ color:var(--lime) }
.sec--lime .chapter{ /* label bab */ color:oklch(0.33 0.07 120) }

/* Di ponsel label bab sering jatuh ke baris kedua dan menyisakan satu kata
   menggantung sendiri di tepi kiri ("… KERANGKA YANG KAMI / PAKAI"). Tracking
   dikurangi dan garisnya dipendekkan supaya lebih banyak yang muat sebaris.

   text-wrap:pretty sempat dipakai di sini dan dibuang lagi. Ia memang
   menutup sisa kasusnya, tapi diukur dengan CPU dicekik 4x pada gulir kedua
   (gulir pertama dipakai memuat gambar dulu, kalau tidak waktu decode-nya
   menenggelamkan segalanya) durasi recalc style naik hampir dua kali lipat
   dengan JUMLAH recalc yang sama — tiap recalc jadi lebih mahal. Untuk
   menghindari satu kata menggantung, itu terlalu mahal. Tracking dan garis
   yang lebih pendek sudah menyelesaikan kasus yang benar-benar ada. */
@media (max-width:600px){
  .chapter{ letter-spacing:0.11em }
  .chapter::before{ width:16px; margin-right:0.5rem }
}

.lead{ font-size:var(--fs-md); font-weight:var(--w-body); line-height:1.62; max-width:52ch; color:var(--muted) }
.sec--navy .lead,.sec--cyan .lead{ color:var(--muted-dark) }
.body{ max-width:var(--measure) }
.dim{ color:var(--muted) }
.sec--navy .dim,.sec--cyan .dim{ color:var(--muted-dark) }

/* ── daun dekoratif ───────────────────────────────────────────────── */
.leaves{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0 }
.leaf{ position:absolute; border-radius:var(--leaf); mix-blend-mode:multiply }
.sec--navy .leaf,.hero .leaf{ mix-blend-mode:screen }
.leaf--r{ border-radius:var(--leaf-r) }

/* ── tombol ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:0.65rem;
  font-family:Outfit,sans-serif; font-weight:var(--w-label);
  font-size:var(--fs-sm); letter-spacing:0.01em; padding:0.95rem 1.7rem; border-radius:100px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  background:none; -webkit-appearance:none; appearance:none;   /* <button> tidak mewarisi gaya UA */
  transition:transform 320ms var(--ease), background-color 320ms var(--ease), color 320ms var(--ease);
}
.btn--lime{ background:var(--lime); color:var(--ink) }
.btn--lime:hover{ transform:translateY(-2px); background:var(--paper) }
.btn--ghost{ border-color:currentColor; opacity:0.85 }
.btn--ghost:hover{ opacity:1; transform:translateY(-2px) }
.btn svg{ transition:transform 320ms var(--ease) }
.btn:hover svg{ transform:translateX(3px) }

/* ── motion ───────────────────────────────────────────────────────
   Keadaan AKHIR adalah default. Kelas .anim dipasang JS hanya setelah
   ada jam animasi yang hidup, jadi konten tidak pernah hilang. */
[data-rise]{ transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease) }
/* satu frame tanpa transisi saat JS memasang keadaan awal reveal — tanpa ini
   keadaan awal ikut bertransisi dan reveal elemen di layar tidak pernah jalan */
.no-trans *{ transition:none !important }
.anim [data-rise]{ opacity:0; transform:translateY(24px) }
/* Keadaan akhir membaca --hv, bukan memaku transform:none. Tanpa ini,
   selektor reveal (tiga kelas) mengalahkan aturan :hover mana pun yang
   lebih pendek, dan hover kartu diam-diam tidak pernah terjadi. */
.anim [data-rise].in{ opacity:1; transform:var(--hv,none) }
/* baris layanan masuk dari kiri, bukan dari bawah */
.anim .area[data-rise]{ transform:translateX(-26px) }
.anim .area[data-rise].in{ transform:var(--hv,none) }
@media (prefers-reduced-motion:reduce){
  .anim [data-rise]{ opacity:1; transform:none; transition:none }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important }
}

/* ══ 00 HERO — terang, lapang, rata tengah ═══════════════════════
   Kelapangan di sini adalah keputusan utama, bukan sisa ruang. Tidak ada
   foto latar: hero adalah satu tarikan napas sebelum bab pertama. */
.hero{
  position:relative; min-height:100svh; background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column; text-align:center;
  padding:calc(clamp(0.9rem,2.2vw,1.5rem) + 6rem) var(--pad) clamp(1.6rem,3.5vh,2.6rem);
}
.hero__bg{ position:absolute; inset:0; overflow:hidden; z-index:0 }
/* bidang warna lembut, berbentuk daun logo — diburamkan secukupnya saja
   supaya masih terbaca sebagai bentuk, bukan gradient generik */
.hero__leaf{
  position:absolute; border-radius:var(--leaf); filter:blur(46px);
  mix-blend-mode:multiply; will-change:transform, opacity; pointer-events:none;
}
/* Versi lama: satu keyframes dipakai bertiga, amplitudo 2.5vw dalam 28 detik —
   secara teknis bergerak, secara mata diam. Sekarang tiap daun punya jalur,
   durasi, dan napasnya sendiri; durasinya sengaja tidak berkelipatan (17/23/19)
   supaya konfigurasinya baru berulang setelah beberapa menit — mengambang,
   bukan senam serempak. Napas = scale + sedikit opacity; arah geraknya
   beda-beda per daun, aturan yang sama dengan ilustrasi Bab 02. */
.hero__l1{ width:min(44vw,600px); aspect-ratio:1; top:-14%; left:-10%;  background:var(--cyan);  opacity:0.30;
  animation:leaf-a 17s ease-in-out infinite alternate }
.hero__l2{ width:min(38vw,520px); aspect-ratio:1; top:2%;   right:-8%;  background:var(--lime);  opacity:0.34; border-radius:var(--leaf-r);
  animation:leaf-b 23s ease-in-out -9s infinite alternate }
.hero__l3{ width:min(30vw,420px); aspect-ratio:1; bottom:-12%; left:26%; background:var(--green); opacity:0.20;
  animation:leaf-c 19s ease-in-out -13s infinite alternate }
@keyframes leaf-a{ /* cyan: melayang diagonal, mengembang saat mendekat */
  0%  { transform:translate(0,0) scale(1);           opacity:0.26 }
  55% { transform:translate(4vw,5vh) scale(1.15);    opacity:0.33 }
  100%{ transform:translate(6.5vw,2vh) scale(0.96);  opacity:0.28 }
}
@keyframes leaf-b{ /* lime: turun ke kiri, napas paling dalam */
  0%  { transform:translate(0,0) scale(0.9);         opacity:0.27 }
  50% { transform:translate(-4vw,6vh) scale(1.2);    opacity:0.38 }
  100%{ transform:translate(-7vw,1vh) scale(1.04);   opacity:0.32 }
}
@keyframes leaf-c{ /* green: menyamping, mengecil saat menjauh */
  0%  { transform:translate(0,0) scale(1.08) }
  50% { transform:translate(6vw,-4vh) scale(0.94) }
  100%{ transform:translate(10vw,-1vh) scale(1.12) }
}
@media (prefers-reduced-motion:reduce){ .hero__leaf{ animation:none } }

/* 1160, bukan 1000: judul versi Indonesia butuh ruang untuk tiga baris, dan
   pada layar tinggi 22ch-nya melampaui 1000px sehingga wadah yang jadi
   pembatas dan judulnya berbalik jadi empat baris. Dilebarkan sekali untuk
   semua ukuran, bukan lewat ambang media query — ambang membuat lebar garis
   kaki meloncat di satu titik, dan selalu ada celah ukuran yang terlewat.
   Judul EN dibatasi 15ch jauh di bawah angka ini, jadi tata letaknya tetap. */
.hero__in{
  position:relative; z-index:2; width:100%; max-width:1160px; margin-inline:auto;
  /* 1 0 auto: boleh tumbuh mengisi sisa ruang, TIDAK boleh menyusut di bawah
     tinggi isinya. Kalau dibiarkan menyusut, isinya meluber dan menabrak
     garis kaki di layar pendek. */
  flex:1 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.hero__mark{ width:clamp(44px,5.4vw,76px); height:auto; margin-bottom:clamp(0.9rem,2.5vh,2.2rem) }
.hero__tag{
  font-family:Outfit,sans-serif; font-weight:var(--w-label);
  font-size:var(--fs-sm); letter-spacing:0.21em;
  text-transform:uppercase; color:var(--accent-ink); margin:0 0 clamp(0.9rem,2.4vh,2rem);
}
.hero h1{
  /* ukurannya ikut lebar DAN tinggi layar, supaya hero tetap satu layar
     penuh di laptop pendek tanpa isinya perlu dipadatkan */
  font-size:clamp(2.3rem, min(6.2vw, 9.5vh), 6.4rem);
  font-weight:var(--w-display); letter-spacing:-0.035em;
  line-height:1.05; max-width:15ch; color:var(--navy);
  margin-bottom:clamp(1rem,2.6vh,2.2rem); hyphens:none;
}
.hero h1 .glow{ color:var(--accent-ink) }
/* Bahasa Indonesia butuh ukuran baris lebih lebar. Kalimatnya 64 karakter
   dengan kata-kata panjang; pada 15ch ia pecah jadi empat baris sementara
   versi Inggris tiga, dan baris keempat itu yang mendorong garis kaki keluar
   layar di laptop 768px. 22ch memberi tiga baris di seluruh ukuran yang
   diuji. Satuan ch, bukan px: ia ikut mengecil bersama font yang sudah
   diperkecil oleh tinggi layar, jadi di layar pendek judulnya tidak
   berbalik jadi dua baris yang terlalu melebar. */
:root[lang="id"] .hero h1{ max-width:22ch }
.hero__lead{ font-size:var(--fs-md); font-weight:var(--w-body); line-height:1.65; max-width:52ch; color:var(--muted) }
.hero__act{ display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:clamp(1.3rem,3.2vh,2.6rem); justify-content:center }

.hero__foot{
  position:relative; z-index:2; flex:none; max-width:1160px; margin-inline:auto; width:100%;
  /* space-between dulu masuk akal saat di sini ada dua anak: strip statistik
     di kiri, SCROLL di kanan. Stripnya sudah dikeluarkan atas permintaan klien,
     dan anak tunggal yang tersisa jadi nyangkut di kiri. Sekarang di tengah. */
  display:flex; flex-wrap:wrap; gap:0.9rem 2.5rem; align-items:center; justify-content:center;
  border-top:1px solid var(--line); padding-top:clamp(1rem,2.2vh,1.5rem);
  font-size:var(--fs-sm); color:var(--muted); text-align:center;
}
.hero__stats{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:0.4rem clamp(1.2rem,3vw,2.6rem);
}
.hero__stats li{ display:flex; align-items:baseline; gap:0.45rem }
.hero__fig{ font-family:Outfit,sans-serif; font-weight:var(--w-title); font-size:var(--fs-md); line-height:1; color:var(--ink) }

.hero__scroll{ display:flex; align-items:center; gap:0.6rem; font-family:Outfit,sans-serif; font-weight:var(--w-label); letter-spacing:0.13em; text-transform:uppercase; font-size:var(--fs-xs) }
.hero__scroll span:last-child{ animation:nudge 2.6s var(--ease) infinite }
@keyframes nudge{ 0%,100%{ transform:translateY(0); opacity:0.5 } 50%{ transform:translateY(5px); opacity:1 } }
@media (prefers-reduced-motion:reduce){ .hero__scroll span:last-child{ animation:none } }
/* layar pendek: hero dirapatkan secukupnya supaya garis kaki tetap
   di dalam satu layar, bukan dengan menumpuk isinya */
@media (max-height:700px){
  .hero__mark{ width:clamp(36px,5vw,58px); margin-bottom:0.7rem }
  .hero__tag{ margin-bottom:0.7rem }
  .hero__lead{ font-size:var(--fs-base) }
  .hero__act{ margin-top:1rem }
}
@media (max-width:720px){
  .hero{ padding-top:6.2rem }
  .hero__foot{ justify-content:center; text-align:center; flex-direction:column-reverse; gap:1rem }
  .hero__stats{ justify-content:center }
}

/* ══ 01 GAP — grid 100 gelembung ══════════════════════════════════ */
.gap__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:var(--gutter); align-items:center }
@media (max-width:900px){ .gap__grid{ grid-template-columns:1fr; gap:clamp(2.5rem,6vh,4rem) } }
.gap__viz{ max-width:min(400px,88vw); margin-inline:auto }

.dots{ display:grid; grid-template-columns:repeat(10,1fr); gap:clamp(5px,1vw,10px) }
.dot{
  aspect-ratio:1; background:var(--paper-3);
  /* gelembung logo: bulat dengan satu sudut ekor, bukan lingkaran */
  border-radius:var(--leaf);
  transform-origin:8% 92%;
  transition:background-color 420ms var(--ease), transform 480ms var(--ease);
}
.dot[data-state="mid"]{ background:var(--lime) }
.dot[data-state="hi"] { background:var(--cyan); transform:scale(1.2) }
/* Kaskade masuk: wadah gridnya tidak ikut bergeser (aturan [data-rise] umum
   dinetralkan) — yang muncul gelembungnya, satu per satu, tumbuh dari sudut
   ekornya sendiri. Jeda per gelembung (--dd) dipasang dan dicabut oleh JS.
   Keadaan awal hanya berlaku selama belum .in, supaya scale(1.2) milik
   gelembung "hi" tidak tertimpa sesudahnya. */
.anim .dots[data-rise]{ opacity:1; transform:none }
.anim .dots[data-rise] .dot{
  transition:background-color 420ms var(--ease),
    transform 480ms var(--ease) var(--dd,0ms),
    opacity 460ms var(--ease) var(--dd,0ms);
}
.anim .dots[data-rise]:not(.in) .dot{ opacity:0; transform:scale(0.3) }
@media (prefers-reduced-motion:reduce){
  .dot{ transition:none }
  .anim .dots[data-rise]:not(.in) .dot{ opacity:1; transform:none }
}

.gap__legend{ display:flex; flex-wrap:wrap; gap:0.4rem 1.2rem; margin-top:1.25rem; font-size:var(--fs-sm) }
.gap__legend span{ display:inline-flex; align-items:center; gap:0.5rem }
.gap__legend i{ width:12px; height:12px; border-radius:var(--leaf); flex:none }
.lg-hi{ background:var(--cyan) } .lg-mid{ background:var(--lime) } .lg-off{ background:var(--paper-3) }

.gap__fig{
  font-family:Outfit,sans-serif; font-weight:var(--w-display); font-size:var(--fs-gap);
  line-height:0.94; letter-spacing:-0.045em; display:block;
  font-variant-numeric:tabular-nums; margin-bottom:0.4rem;
}
.gap__stat{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1.2rem 1.6rem; margin:clamp(1.4rem,2.6vh,2.2rem) 0;
}
@media (max-width:560px){ .gap__stat{ grid-template-columns:1fr } }
.gap__stat > div{ padding-left:1.2rem; border-left:1px solid var(--line) }
/* blok kedua dan kalimat penutup menyusul, bukan tampil bersamaan */
.anim [data-gap-late]{ opacity:0; transform:translateY(26px); transition:opacity 720ms var(--ease), transform 720ms var(--ease) }
.anim [data-gap-late].in{ opacity:1; transform:none }
.gap__src{ font-size:var(--fs-sm); color:var(--muted); margin-top:1.25rem }

/* ══ 02 PASSION — coffee play joy ═════════════════════════════════
   Tiga ilustrasi, tiga gagasan, satu bergerak pada satu waktu seiring
   panel ini digulir. Keadaan akhir adalah default; keadaan awal hanya
   dipasang saat .anim aktif, jadi tanpa JS ketiganya tetap utuh. */
.passion{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.8rem); margin-top:clamp(0.9rem,2vh,2.4rem) }
@media (max-width:880px){ .passion{ grid-template-columns:1fr; gap:2.6rem } }
.pas{ position:relative }
/* tiap kartu punya offset berbeda — bukan grid identik */
.passion .pas:nth-child(2){ margin-top:clamp(0rem,1.6vw,1.4rem) }
.passion .pas:nth-child(3){ margin-top:clamp(0rem,3.2vw,2.8rem) }
@media (max-width:880px){ .passion .pas{ margin-top:0 !important } }

.pas__ill{
  position:relative; overflow:hidden; border-radius:var(--leaf-ph);
  aspect-ratio:3/2; margin-bottom:clamp(0.8rem,1.6vw,1.2rem);
  display:grid; place-items:center;
}
.passion .pas:nth-child(even) .pas__ill{ border-radius:var(--leaf-phr) }
.pas__ill svg{ width:100%; height:100% }
/* bidang warna sangat tipis: menandai kartu tanpa jadi blok berat */
.ill--coffee{ background:linear-gradient(140deg, oklch(0.70 0.128 216 / 0.10), oklch(0.98 0.005 220 / 0) 62%), var(--paper-2) }
.ill--play  { background:linear-gradient(140deg, oklch(0.62 0.161 154 / 0.10), oklch(0.98 0.005 220 / 0) 62%), var(--paper-2) }
.ill--joy   { background:linear-gradient(140deg, oklch(0.84 0.170 113 / 0.16), oklch(0.98 0.005 220 / 0) 62%), var(--paper-2) }

.pas__word{
  font-family:Outfit,sans-serif; font-weight:var(--w-strong); font-size:var(--fs-lg);
  letter-spacing:-0.025em; line-height:1.1;
  color:var(--navy); display:block; margin-bottom:0.5rem;
}
.pas__line{ font-size:var(--fs-base); font-weight:var(--w-body); color:var(--ink); max-width:32ch; line-height:1.62 }
.pas__line span{ color:var(--muted); display:block; margin-top:0.2rem }

/* ── Coffee: cangkirnya digambar, diisi, lalu beruap ────────────
   pathLength="1" bikin panjang tiap garis dinormalkan ke 1, jadi
   stroke-dashoffset bisa dipakai apa adanya tanpa mengukur path. */
.ill--coffee svg{ overflow:visible }
.ill__draw{ stroke-dasharray:1; stroke-dashoffset:0 }
.ill__brew{ transform:translateY(0) }
.ill__puff{ opacity:0.5; transform:translateY(calc(var(--i) * -9px)) scale(calc(1 - var(--i) * 0.08)) }

.anim .ill--coffee .ill__draw{
  stroke-dashoffset:1;
  transition:stroke-dashoffset 820ms var(--ease);
  transition-delay:calc(var(--i) * 320ms);
}
.anim .pas[data-on] .ill--coffee .ill__draw{ stroke-dashoffset:0 }
.anim .ill--coffee .ill__brew{ transform:translateY(58px); transition:transform 1200ms var(--ease) 1150ms }
.anim .pas[data-on] .ill--coffee .ill__brew{ transform:translateY(0) }
.anim .ill--coffee .ill__puff{ opacity:0 }
.anim .pas[data-on] .ill--coffee .ill__puff{
  animation:steam 4.6s var(--ease) infinite;
  animation-delay:calc(2200ms + var(--i) * 1.5s);
}
@keyframes steam{
  0%   { transform:translateY(10px) scale(0.5); opacity:0 }
  22%  { opacity:0.62 }
  100% { transform:translateY(-40px) scale(1.15); opacity:0 }
}

/* ── Play: jungkat-jungkit. Sumbu geraknya putaran, bukan naik-turun,
   supaya tidak kembar dengan Joy. ─────────────────────────────── */
.ill__see{ position:relative; width:min(80%,250px); aspect-ratio:2/1 }
.ill__floor{
  position:absolute; left:4%; right:4%; bottom:10%; height:2px; border-radius:2px;
  background:var(--navy); opacity:0.16;
}
.ill__pivot{
  position:absolute; left:50%; bottom:10%; width:0; height:0; transform:translateX(-50%);
  border-left:13px solid transparent; border-right:13px solid transparent;
  border-bottom:26px solid var(--navy);
}
.ill__plank{
  position:absolute; left:8%; right:8%; bottom:calc(10% + 26px); height:7px;
  border-radius:99px; background:var(--navy);
  transform-origin:50% 100%; transform:rotate(-9deg);
}
.ill__seat{
  position:absolute; bottom:7px; width:34px; aspect-ratio:1; border-radius:var(--leaf);
}
.ill__seat:nth-child(1){ left:-6px;  background:var(--cyan) }
.ill__seat:nth-child(2){ right:-6px; width:29px; background:var(--lime) }

.anim .ill--play .ill__pivot{ transform:translateX(-50%) scaleY(0); transform-origin:50% 100%; transition:transform 620ms var(--ease) }
.anim .ill--play .ill__floor{ transform:scaleX(0); transition:transform 700ms var(--ease) }
.anim .ill--play .ill__plank{ transform:rotate(0deg) scaleX(0); transition:transform 720ms var(--ease) 480ms }
.anim .ill--play .ill__seat{ transform:translateY(-52px); opacity:0; transition:transform 700ms var(--ease), opacity 500ms var(--ease) }
.anim .pas[data-on] .ill--play .ill__pivot{ transform:translateX(-50%) scaleY(1) }
.anim .pas[data-on] .ill--play .ill__floor{ transform:scaleX(1) }
.anim .pas[data-on] .ill--play .ill__plank{
  transform:rotate(0deg) scaleX(1);
  animation:tilt 4.4s var(--ease) 2100ms infinite;
}
.anim .pas[data-on] .ill--play .ill__seat{
  transform:translateY(0); opacity:1;
  transition-delay:calc(1150ms + var(--i) * 220ms);
}
@keyframes tilt{
  0%,100%{ transform:rotate(-9deg) }
  50%    { transform:rotate(9deg) }
}

/* ── Joy: gelombang yang berjalan menyamping lewat sekelompok orang ── */
.ill__row{ display:flex; align-items:center; gap:clamp(8px,1.8vw,16px) }
.ill__row span{
  width:clamp(20px,3.4vw,34px); aspect-ratio:1; border-radius:var(--leaf);
  background:var(--cyan); flex:none;
  /* tinggi badannya sengaja tidak seragam — sekelompok orang, bukan deret unit */
  transform:translateY(calc(-30px + 4.5px * (var(--i) - 2.5) * (var(--i) - 2.5)));
}
.ill__row span:nth-child(2){ width:clamp(17px,2.9vw,29px) }
.ill__row span:nth-child(4){ width:clamp(23px,3.9vw,39px) }
.ill__row span:nth-child(6){ width:clamp(18px,3.1vw,31px) }
.ill__row span:nth-child(3n+2){ background:var(--green) }
.ill__row span:nth-child(3n)  { background:var(--lime) }
/* muncul: satu per satu naik dari bawah, baru gelombangnya jalan */
.anim .ill--joy .ill__row span{
  transform:translateY(28px); opacity:0; background:var(--paper-3);
  transition:transform 700ms var(--ease), opacity 560ms var(--ease);
}
.anim .pas[data-on] .ill--joy .ill__row span{
  transform:translateY(0); opacity:1;
  transition-delay:calc(var(--i) * 130ms);
  animation:cheer 3s var(--ease) infinite;
  animation-delay:calc(1500ms + var(--i) * -0.5s);
}
@keyframes cheer{
  0%   { transform:translateY(0)     scale(1)    rotate(0deg);  background-color:var(--paper-3) }
  30%  { transform:translateY(-34px) scale(1.2)  rotate(-8deg); background-color:var(--lime) }
  60%  { transform:translateY(0)     scale(1)    rotate(0deg);  background-color:var(--cyan) }
  100% { transform:translateY(0)     scale(1)    rotate(0deg);  background-color:var(--paper-3) }
}

@media (prefers-reduced-motion:reduce){
  .anim .ill--coffee .ill__draw{ stroke-dashoffset:0; transition:none }
  .anim .ill--coffee .ill__brew{ transform:translateY(0); transition:none }
  .anim .ill--coffee .ill__puff{ opacity:0.5; animation:none }
  .anim .ill--play .ill__pivot{ transform:translateX(-50%) scaleY(1) }
  .anim .ill--play .ill__floor{ transform:scaleX(1) }
  .anim .ill--play .ill__plank{ transform:rotate(-9deg) scaleX(1); animation:none; transition:none }
  .anim .ill--play .ill__seat{ transform:translateY(0); opacity:1; transition:none }
  .anim .ill--joy .ill__row span{ transform:none; opacity:1; animation:none; transition:none }
}

/* disentuh: ilustrasinya menanggapi sedikit — cukup untuk terasa hidup,
   tidak sampai jadi pertunjukan */
@media (min-width:880px) and (prefers-reduced-motion:no-preference){
  .pas__ill{ transition:transform 700ms var(--ease) }
  .pas:hover .pas__ill{ transform:translateY(-5px) }
  .ill__steam{ transition:opacity 700ms var(--ease) }
  .pas:hover .ill__steam{ opacity:1 }
}

/* ══ 03 METHOD — siklus Kolb ══════════════════════════════════════ */
.kolb{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,5rem); align-items:center; margin-top:clamp(0.9rem,2.1vh,2.2rem) }
@media (max-width:940px){ .kolb{ grid-template-columns:1fr } }
.kolb__svg{ width:100%; max-width:min(320px,36vw,38vh); margin-inline:auto; overflow:visible }
.kolb__ring{ fill:none; stroke:oklch(0.34 0.062 231 / 0.16); stroke-width:1.5 }
.kolb__arc{ fill:none; stroke:var(--accent-ink); stroke-width:3; stroke-linecap:round }
/* saat digerakkan scroll, arc mengikuti tangan pengunjung tanpa transisi;
   transisi hanya dipakai kalau langkahnya dipilih manual */
.kolb--manual .kolb__arc{ transition:stroke-dashoffset 620ms var(--ease) }
.kolb__head{ fill:var(--lime); stroke:var(--accent-ink); stroke-width:1.5 }
.kolb__core{ transform-box:view-box; transform-origin:200px 200px }
.kolb__node{ cursor:pointer }
.kolb__node circle{ transition:r 380ms var(--ease), fill 380ms var(--ease) }

.kolb__node[data-on] circle{ fill:var(--accent-ink); r:13 }


.kolb__steps{ list-style:none; margin:0; padding:0; display:grid; gap:0.15rem }
.kolb__step{
  width:100%; text-align:left; background:none; border:0; cursor:pointer; color:inherit;
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:baseline;
  padding:0.7rem 1.1rem; border-radius:var(--r-card); font:inherit;
  transition:background-color 380ms var(--ease), color 380ms var(--ease), transform 480ms var(--ease);
}
/* Langkah non-aktif diredupkan lewat bobot warna, bukan opacity.
   Opacity 0.42 akan menjatuhkan rasio kontras teksnya di bawah 4.5:1. */
.kolb__step .kolb__t{ color:var(--muted); transition:color 380ms var(--ease) }
.kolb__step[aria-pressed="true"]{ transform:translateX(6px) }
.kolb__step[aria-pressed="true"] .kolb__t{ color:var(--ink) }
.kolb__step:hover .kolb__t, .kolb__step:focus-visible .kolb__t{ color:var(--ink) }
@media (prefers-reduced-motion:reduce){ .kolb__step{ transform:none } }
.kolb__step:hover{ background:oklch(0.34 0.062 231 / 0.045) }
.kolb__step[aria-pressed="true"]{ background:oklch(0.34 0.062 231 / 0.05) }
/* Laptop pendek: dial dan daftar langkah ikut mengecil bersama, supaya panel
   Bab 03 tidak pernah memotong isinya. Keduanya harus turun bersamaan —
   tinggi .kolb adalah yang tertinggi di antara keduanya. */
@media (max-height:820px){
  .panel .chapter{ margin-bottom:1.1rem }
  .kolb__step{ padding-block:0.45rem }
}
.kolb__n{ font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs); letter-spacing:0.12em; color:var(--accent-ink) }
/* judul langkah: Outfit medium, jadi jelas beda dari keterangannya
   yang DM Sans reguler dan lebih redup */
.kolb__t{
  font-family:Outfit,sans-serif; font-weight:var(--w-title);
  font-size:var(--fs-md); letter-spacing:-0.012em; line-height:1.25;
  display:block; margin-bottom:0.2rem;
}
.kolb__d{ font-size:var(--fs-sm); font-weight:var(--w-body); color:var(--muted); display:block; line-height:1.6 }

/* ══ 04 FRAMEWORK — kuadran EI ════════════════════════════════════ */
.quad{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(0.8rem,1.6vw,1.3rem); margin-top:clamp(2rem,5vh,3.5rem); position:relative }
@media (max-width:700px){ .quad{ grid-template-columns:1fr } }
.q{
  position:relative; overflow:hidden; padding:clamp(1.6rem,3vw,2.4rem);
  border-radius:var(--r-card); min-height:clamp(190px,23vw,250px);
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform 480ms var(--ease);
}
.q:hover{ --hv:translateY(-4px); transform:var(--hv) }
.q__leaf{ transition:transform 620ms var(--ease) }
@media (min-width:900px){ .q:hover .q__leaf{ transform:scale(1.05) } }
@media (prefers-reduced-motion:reduce){ .q__leaf{ transition:none } }
.q__leaf{ position:absolute; width:60%; aspect-ratio:1; border-radius:var(--leaf); opacity:0.9; mix-blend-mode:multiply; top:-16%; right:-12% }
.q:nth-child(1){ background:var(--paper-2) } .q:nth-child(1) .q__leaf{ background:oklch(0.70 0.128 216 / 0.5) }
.q:nth-child(2){ background:var(--paper-2) } .q:nth-child(2) .q__leaf{ background:oklch(0.62 0.161 154 / 0.42) }
.q:nth-child(3){ background:var(--paper-2) } .q:nth-child(3) .q__leaf{ background:oklch(0.84 0.170 113 / 0.55) }
.q:nth-child(4){ background:var(--paper-2) } .q:nth-child(4) .q__leaf{ background:oklch(0.56 0.087 190 / 0.42) }
.q__axis{ font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs); letter-spacing:0.15em; text-transform:uppercase; color:var(--cyan-ink); position:relative; margin-bottom:0.5rem }
.q h3{ font-size:var(--fs-lg); font-weight:var(--w-title); position:relative; margin-bottom:0.5rem }
/* aturan naskah berbasis elemen p ikut menangkap label — label dikecualikan */
.q p:not(.q__axis){ font-size:var(--fs-sm); font-weight:var(--w-body); line-height:1.6; color:var(--muted); position:relative; max-width:34ch }
/* nomor urut kartu: margin-bottom:auto mendorongnya ke atas kartu yang
   isinya rata bawah, jadi tidak pernah menimpa naskah seberapa pun panjangnya */
.q__n{
  position:relative; margin-bottom:auto; padding-bottom:1.1rem;
  font-family:Outfit,sans-serif; font-weight:var(--w-title); font-size:var(--fs-md);
  letter-spacing:0.02em; line-height:1; color:var(--accent-ink);
}
/* garis pendek di bawah nomor, warnanya mengikuti kuadrannya: penanda urutan
   yang ikut sistem warna, bukan lencana yang ditempel di atasnya */
.q__n::after{ content:""; position:absolute; left:0; bottom:0.55rem; width:1.6rem; height:2px; border-radius:2px; background:var(--qc,var(--cyan)) }
.quad--map .q:nth-child(1){ --qc:var(--cyan) }
.quad--map .q:nth-child(2){ --qc:var(--green) }
.quad--map .q:nth-child(3){ --qc:var(--lime) }
.quad--map .q:nth-child(4){ --qc:var(--teal-deep) }

/* Kuadran EI disusun seperti di deck Imajinar (permintaan klien): kolom
   Diri | Orang lain, baris Kesadaran | Tindakan, dengan sumbu yang terbaca.
   Nomornya mengikuti ALUR Goleman, bukan posisinya: 01 Self Awareness,
   02 Self Management, 03 Social Awareness, 04 Relationship Management. */
.quad4{
  --qgap:clamp(0.8rem,1.6vw,1.3rem);
  display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) minmax(0,1fr);
  gap:0.8rem var(--qgap); margin-top:clamp(2rem,5vh,3.5rem);
}
.quad4__lbl{
  margin:0; font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs);
  letter-spacing:0.18em; text-transform:uppercase; color:var(--cyan-ink); align-self:center; justify-self:center;
}
.quad4__lbl--self{ grid-area:1 / 2 }
.quad4__lbl--others{ grid-area:1 / 3 }
/* label baris dibaca dari bawah ke atas, seperti sumbu Y di deck */
.quad4__lbl--aware,.quad4__lbl--act{ writing-mode:vertical-rl; rotate:180deg }
.quad4__lbl--aware{ grid-area:2 / 1 }
.quad4__lbl--act{ grid-area:3 / 1 }

.quad--map{ grid-column:2 / span 2; grid-row:2 / span 2; margin-top:0; gap:var(--qgap); grid-auto-rows:1fr }
/* garis sumbu: hanya terlihat di celah antar kartu, persis seperti di deck */
.quad--map::before,.quad--map::after{ content:""; position:absolute; z-index:0; opacity:0.55 }
.quad--map::before{ top:-14px; bottom:-14px; left:50%; translate:-50% 0; border-left:1px dashed var(--cyan) }
.quad--map::after{ left:-14px; right:-14px; top:50%; translate:0 -50%; border-top:1px dashed var(--cyan) }
.quad--map .q{ z-index:1 }
/* sumbunya sudah ditulis di rel kiri dan atas: label per kartu jadi kembar.
   Di bawah 700px rel-nya disembunyikan, jadi label per kartu dipakai lagi. */
@media (min-width:701px){ .quad--map .q__axis{ display:none } }
/* daun digeser ke pojok supaya kolom naskahnya lega */
.quad--map .q__leaf{ width:54%; top:-20%; right:-14% }
/* Naskah kartu EI dinaikkan ke --ink. Dengan --muted, teks yang jatuh di atas
   daun berwarna hanya mencapai kontras 2,7-3,3 — daunnya sendiri sudah terlalu
   terang untuk teks seredup itu, dan tidak ada cek yang mengukurnya karena
   contrast.mjs membaca warna latar, bukan piksel di belakang huruf. */
.quad--map .q p:not(.q__axis){ color:var(--ink) }

/* panah alur: turun, menyeberang ke kuadran seberang, lalu turun lagi */
.quad__arr{
  position:absolute; translate:-50% -50%; z-index:3;
  width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center;
  background:var(--navy); color:var(--lime);
  box-shadow:0 0 0 6px var(--paper), 0 10px 22px -16px oklch(0.34 0.062 231 / 0.75);
}
.quad__arr--1{ left:25%; top:50% }
.quad__arr--2{ left:50%; top:50% }
.quad__arr--3{ left:75%; top:50% }

@media (max-width:700px){
  .quad4{ grid-template-columns:1fr; grid-template-rows:auto }
  .quad4__lbl{ display:none }                 /* sumbunya sudah ditulis di tiap kartu */
  .quad--map{ grid-column:1; grid-row:auto; grid-template-columns:1fr }
  .quad--map::before,.quad--map::after{ display:none }
  /* Satu kolom: kartunya diurutkan mengikuti alur, bukan posisi kuadran.
     Keempatnya WAJIB diberi order — yang dibiarkan default tetap di 0 dan
     naik ke depan, itu yang bikin urutannya jadi 01, 04, 02, 03. */
  .quad--map .q:nth-child(1){ order:1 }
  .quad--map .q:nth-child(3){ order:2 }
  .quad--map .q:nth-child(2){ order:3 }
  .quad--map .q:nth-child(4){ order:4 }
  .quad__arr--1{ left:50%; top:25% }
  .quad__arr--2{ left:50%; top:50%; rotate:90deg }
  .quad__arr--3{ left:50%; top:75% }
}

/* ══ 05 DISC FLOW — roda elemen ═══════════════════════════════════
   Sengaja TIDAK memakai bentuk kuadran Bab 04: dua bab berurutan dengan
   kartu 2x2 yang sama membuat keduanya terbaca sebagai satu bab yang
   kepanjangan. Di sini bentuknya roda — empat elemen mengelilingi inti
   "Adapt", dipilih lewat tab, dan tiap elemen punya ilustrasi sendiri. */
/* Kerja sama resmi dengan DISC Flow: klaim ini dikonfirmasi klien
   (15 Sep 2026) — sebelumnya naskahnya ditulis netral "memakai". */
.dsc__badge{ margin-top:1.4rem }
.dsc__badge span{
  display:inline-block; padding:0.5rem 1.1rem; border-radius:100px;
  border:1px solid var(--lime); color:var(--lime);
  font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs);
  letter-spacing:0.14em; text-transform:uppercase;
}

.bend{ display:grid; grid-template-columns:minmax(280px,44%) 1fr; gap:clamp(1.8rem,4vw,3.4rem); align-items:center; margin-top:clamp(2.2rem,5vh,3.4rem) }
@media (max-width:860px){ .bend{ grid-template-columns:1fr; gap:2rem } }

/* warna tiap elemen dipakai bersama oleh roda, tab, dan panel */
/* --el mewarnai bidang besar; --elk untuk huruf kecil di atas navy. Hijau
   0.62 hanya mencapai 4,06:1 sebagai teks — cukup untuk daun, tidak untuk label. */
[data-el="fire"],[data-el-tab="fire"],[data-el-card="fire"]{ --el:var(--lime); --elk:var(--lime) }
[data-el="air"],[data-el-tab="air"],[data-el-card="air"]{ --el:var(--cyan); --elk:var(--cyan) }
[data-el="earth"],[data-el-tab="earth"],[data-el-card="earth"]{ --el:var(--green); --elk:oklch(0.80 0.145 150) }
[data-el="water"],[data-el-tab="water"],[data-el-card="water"]{ --el:oklch(0.72 0.105 205); --elk:oklch(0.80 0.095 205) }
.bend{ --el-fire:var(--lime); --el-air:var(--cyan); --el-earth:var(--green); --el-water:oklch(0.72 0.105 205) }
/* warna kedua tiap elemen: daun yang bertindih di belakang penanda */
[data-el-card="fire"]{ --el2:var(--green) }
[data-el-card="air"]{ --el2:var(--teal-deep) }
[data-el-card="earth"]{ --el2:var(--cyan) }
[data-el-card="water"]{ --el2:var(--green) }

.bend__wheel{ position:relative; max-width:520px; width:100%; margin-inline:auto; padding:2rem clamp(2.8rem,5vw,4rem) }
.bend__svg{ display:block; width:100%; height:auto; overflow:visible }
.bend__dash{ fill:none; stroke:var(--cyan); stroke-opacity:0.3; stroke-width:1.5; stroke-dasharray:4 10 }
.bend__ax2{ stroke:var(--cyan); stroke-opacity:0.2; stroke-width:1.5 }

/* label sumbu: HTML, bukan <text> SVG — ikut kamus i18n dan ikut membesar
   bersama ukuran huruf pengguna */
.bend__lbl{ position:absolute; font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs); letter-spacing:0.14em; text-transform:uppercase; color:var(--cyan); margin:0 }
/* Label sumbu duduk DI DALAM padding wadah roda, bukan menggantung di
   luarnya: menggantung membuat "Fokus orang" menabrak panel di kanan. */
.bend__lbl{ max-width:4.6rem; line-height:1.35 }
.bend__lbl--fast,.bend__lbl--steady{ max-width:none; white-space:nowrap; left:50%; transform:translateX(-50%) }
.bend__lbl--fast{ top:0 }
.bend__lbl--steady{ bottom:0 }
.bend__lbl--task{ left:0; top:50%; transform:translateY(-50%); text-align:left }
.bend__lbl--people{ right:0; top:50%; transform:translateY(-50%); text-align:right }

.bend__node{ cursor:pointer }
.bend__disc{ fill:var(--el); fill-opacity:0.1; transition:fill-opacity 520ms var(--ease) }
.bend__ring{ fill:none; stroke:var(--el); stroke-opacity:0.34; stroke-width:1.5; transition:stroke-opacity 520ms var(--ease) }
.bend__gly{ fill:none; stroke:var(--el); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-opacity:0.62; transition:stroke-opacity 520ms var(--ease) }
.bend__node[data-el="fire"] .bend__gly path:first-child{ fill:var(--el); fill-opacity:0.12 }
.bend__node[data-on] .bend__disc{ fill-opacity:0.26 }
.bend__node[data-on] .bend__ring{ stroke-opacity:0.9 }
.bend__node[data-on] .bend__gly{ stroke-opacity:1 }
.bend__node:hover .bend__disc{ fill-opacity:0.2 }
.bend__node:hover .bend__gly{ stroke-opacity:0.9 }

/* inti roda mengambil warna elemen yang sedang dipilih: satu orang bisa
   memakai keempatnya — itu isi kalimat Aang di bawah */
.bend__coreDisc{ fill:var(--el-aktif,var(--cyan)); fill-opacity:0.2; transition:fill 700ms var(--ease) }
.bend__coreRing{ fill:none; stroke:var(--el-aktif,var(--cyan)); stroke-opacity:0.5; stroke-width:1.5; stroke-dasharray:3 8; transform-origin:200px 200px; transition:stroke 700ms var(--ease) }
.bend__coreT{ font-family:Outfit,sans-serif; font-size:13px; font-weight:500; letter-spacing:2.5px; fill:var(--paper) }

/* Gerak idle. Hanya transform, tidak ada properti layout. Semuanya mati di
   bawah 900px dan saat reduced-motion, sama seperti reveal — lihat DESIGN.md. */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .bend__node{ transition:transform 620ms var(--ease) }
  .bend__node[data-on]{ transform:translate(var(--nx),var(--ny)) scale(1.06) }
  .bend__node:hover{ transform:translate(var(--nx),var(--ny)) scale(1.04) }
  .bend__node[data-el="fire"]{ --nx:112px; --ny:112px }
  .bend__node[data-el="air"]{ --nx:288px; --ny:112px }
  .bend__node[data-el="earth"]{ --nx:112px; --ny:288px }
  .bend__node[data-el="water"]{ --nx:288px; --ny:288px }
  .bend__node[data-el="fire"] .bend__gly{ animation:bendApi 2600ms ease-in-out infinite }
  /* Angin TIDAK diputar utuh: memutar seluruh grup membuat ikonnya terbaca
     seperti logo yang muter-muter (koreksi klien). Tiap goresan bergeser
     mendatar dengan fase berbeda — itu yang terbaca sebagai embusan. */
  .bend__node[data-el="air"] .bend__gly path:nth-child(1){ animation:bendAngin 3400ms ease-in-out infinite }
  .bend__node[data-el="air"] .bend__gly path:nth-child(2){ animation:bendAngin 3400ms ease-in-out 420ms infinite }
  .bend__node[data-el="air"] .bend__gly path:nth-child(3){ animation:bendAngin 3400ms ease-in-out 840ms infinite }
  .bend__node[data-el="earth"] .bend__gly{ animation:bendTanah 6000ms ease-in-out infinite }
  .bend__node[data-el="water"] .bend__gly{ animation:bendAir 4200ms ease-in-out infinite }
  .bend__coreRing{ animation:bendPutar 26s linear infinite }
  @keyframes bendApi{ 0%,100%{ transform:scaleY(1) } 42%{ transform:scaleY(1.09) translateY(-1px) } 70%{ transform:scaleY(0.97) } }
  @keyframes bendAngin{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(2.5px) } }
  @keyframes bendTanah{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(2.5px) } }
  @keyframes bendAir{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
  @keyframes bendPutar{ to{ transform:rotate(360deg) } }
}

/* ── panel kanan: tab + kartu ─────────────────────────────────────── */
.bend__tabs{ display:flex; flex-wrap:wrap; gap:0.5rem; padding:0; margin:0 0 clamp(1.2rem,2.4vh,1.8rem); list-style:none }
.bend__tab{
  display:inline-flex; align-items:center; gap:0.55rem; cursor:pointer;
  padding:0.5rem 1rem 0.5rem 0.6rem; border-radius:100px;
  border:1px solid oklch(1 0 0 / 0.18); background:transparent; color:var(--muted-dark);
  font-family:Outfit,sans-serif; font-size:var(--fs-sm); font-weight:var(--w-label);
  transition:background-color 380ms var(--ease), color 380ms var(--ease), border-color 380ms var(--ease);
}
.bend__k{
  display:grid; place-items:center; width:1.55rem; height:1.55rem; border-radius:50%;
  background:var(--el); color:var(--navy); font-weight:var(--w-title); font-size:var(--fs-xs);
}
.bend__tab:hover{ color:var(--paper); border-color:var(--el); transform:translateY(-2px) }
.bend__tab:hover .bend__k{ transform:scale(1.12) }
.bend__k{ transition:transform 320ms var(--ease) }
.bend__tab[aria-pressed="true"]{ background:oklch(1 0 0 / 0.1); border-color:var(--el); color:var(--paper) }
/* yang sedang dipilih diberi garis bawah setebal warnanya, jadi bedanya
   terbaca juga tanpa warna (dan tanpa strip di sisi kartu) */
.bend__tab[aria-pressed="true"]::after{ content:""; position:absolute; left:1rem; right:1rem; bottom:-7px; height:2px; border-radius:2px; background:var(--el) }
.bend__tab{ position:relative }
.bend__cards{ position:relative; padding-top:clamp(1.6rem,3.4vh,2.4rem); border-top:1px solid var(--line-dark) }
/* tanpa garis aksen di tepi: penanda daunnya sudah membawa warna elemen, dan
   strip warna di sisi kartu adalah tanda paling umum dari desain templat */
.bend__card{ padding-left:0 }
.bend__card + .bend__card{ margin-top:1.6rem }        /* tanpa JS: keempatnya berderet */
.bend[data-live] .bend__card{ display:none; margin-top:0 }
.bend[data-live] .bend__card[data-on]{ display:grid; animation:bendMasuk 520ms var(--ease) both }   /* grid, bukan block: block merobohkan kolom pelatnya */
@media (prefers-reduced-motion:reduce){ .bend[data-live] .bend__card[data-on]{ animation:none } }
@keyframes bendMasuk{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.bend__ax{ font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs); letter-spacing:0.15em; text-transform:uppercase; color:var(--elk); margin-bottom:0.6rem }

/* Kartu penjelas dibongkar dari kotak jadi spread: naskah di kiri, pelat daun
   berhuruf DISC di kanan. Kotak abu-abu membuat sisi kanan menganggur dan
   tidak ada yang mengundang diklik; pelatnya sekarang yang memegang warna
   elemen, dan ia berganti bentuk tiap elemen seperti daun logo. */
.bend__card{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(1.4rem,4vw,3.2rem); align-items:center }
@media (max-width:760px){ .bend__card{ grid-template-columns:1fr; gap:1.6rem } }
.bend__card h3{ font-family:Outfit,sans-serif; font-weight:var(--w-display); font-size:var(--fs-xl); line-height:1.02; letter-spacing:-0.022em; margin-bottom:0.7rem }
.bend__d{ font-size:var(--fs-md); font-weight:var(--w-body); line-height:1.45; color:var(--paper); max-width:26ch }
.bend__meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem 2.2rem; margin:clamp(1.4rem,3vh,2rem) 0 0 }
@media (max-width:560px){ .bend__meta{ grid-template-columns:1fr; gap:1rem } }
.bend__meta dt{ font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs); letter-spacing:0.13em; text-transform:uppercase; color:var(--elk); margin-bottom:0.35rem }
.bend__meta dd{ margin:0; font-size:var(--fs-sm); font-weight:var(--w-body); line-height:1.6; color:var(--muted-dark); max-width:30ch }

/* pelat: daun logo dalam ukuran besar, dengan daun kedua bertindih di belakangnya */
.bend__plate{ position:relative; display:grid; place-items:center; margin-right:clamp(0.25rem,1.6vw,1.4rem); width:clamp(112px,14vw,196px); aspect-ratio:1; border-radius:var(--leaf); background:var(--el) }
[data-el-card="air"] .bend__plate,[data-el-card="water"] .bend__plate{ border-radius:var(--leaf-r) }
.bend__pecho{ position:absolute; inset:38% -18% -18% 38%; border-radius:var(--leaf-r); background:var(--el2); mix-blend-mode:screen; opacity:0.85 }
[data-el-card="air"] .bend__pecho,[data-el-card="water"] .bend__pecho{ inset:38% 38% -18% -18%; border-radius:var(--leaf) }
.bend__pl{ position:relative; font-family:Outfit,sans-serif; font-weight:var(--w-title); font-size:clamp(2.6rem,5vw,5rem); line-height:1; letter-spacing:-0.03em; color:var(--navy-deep) }

.dsc{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,4rem); margin-top:clamp(2.5rem,5vh,3.5rem) }
@media (max-width:700px){ .dsc{ grid-template-columns:1fr } }
.dsc h3{ font-size:var(--fs-md); font-weight:var(--w-title); margin-bottom:0.6rem }
.dsc p{ font-size:var(--fs-sm); font-weight:var(--w-body); line-height:1.65; color:var(--muted-dark); max-width:46ch }
.dsc b{ color:var(--paper); font-weight:var(--w-title) }
.dsc__flow{ display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; margin-top:1.2rem; padding:0; list-style:none; font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs); letter-spacing:0.14em; text-transform:uppercase; color:var(--lime) }
.dsc__flow li + li::before{ content:"\2192" / ""; margin-right:0.5rem; color:var(--muted-dark) }

.disc{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:clamp(2rem,4vh,3rem) }
.disc li{ list-style:none }
.disc span{
  display:inline-block; padding:0.55rem 1.15rem; border-radius:100px;
  border:1px solid var(--line); font-size:var(--fs-sm); font-weight:var(--w-body);
  transition:background-color 320ms var(--ease), border-color 320ms var(--ease);
}
.disc span:hover{ background:var(--lime); border-color:var(--lime) }


/* ══ 05a KENAPA DISC FLOW — DISC + emotional intelligence ═════════
   Dari deck pitching Imajinar sendiri. Ia berdiri di depan roda supaya
   bab ini tersambung ke kuadran Goleman di Bab 04, bukan berdiri sendiri. */
.why{ margin-top:clamp(2.2rem,5vh,3.2rem); max-width:62rem }
.why__k{ font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs); letter-spacing:0.15em; text-transform:uppercase; color:var(--lime); margin-bottom:0.5rem }
.why__d{ font-size:var(--fs-sm); font-weight:var(--w-body); line-height:1.65; color:var(--muted-dark); max-width:56ch }
.why__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,3vw,2.6rem); margin-top:clamp(1.4rem,3vh,2rem) }
@media (max-width:760px){ .why__cols{ grid-template-columns:1fr; gap:1.4rem } }
/* garis tipis di antara dua kolom: dua sudut pandang yang setara, bukan bertingkat */
.why__c{ padding-top:1rem; border-top:1px solid var(--line-dark) }
.why__ck{ font-family:Outfit,sans-serif; font-weight:var(--w-title); font-size:var(--fs-xs); letter-spacing:0.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:0.45rem }
.why__c h3{ font-size:var(--fs-md); font-weight:var(--w-title); margin-bottom:0.45rem }
.why__c p{ font-size:var(--fs-sm); font-weight:var(--w-body); line-height:1.65; color:var(--muted-dark); max-width:42ch }

/* ── lockup kemitraan ─────────────────────────────────────────────
   Wordmark DISC Flow versi gelap, jadi ia HARUS duduk di kepingan terang;
   di atas navy ia akan hilang. Logo Imajinar navy ikut di kepingan yang sama. */
/* Lockup kemitraan. Dipindah dari penutup bab 07 ke pembuka bagian DISC Flow:
   ini bukti kredibilitas, dan bukti dibaca sebelum orang menilai isinya, bukan
   setelah semuanya lewat. Seluruh isinya duduk di atas kepingan paper supaya
   warna label dan badge-nya tetap sah di atas section navy. */
.lock{ margin-top:clamp(2.2rem,5vh,3.4rem) }
.lock__card{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:clamp(1.1rem,3vw,2.6rem);
  padding:clamp(1.2rem,2.6vw,1.7rem) clamp(1.4rem,3.2vw,2.4rem);
  background:var(--paper); border-radius:var(--r-card);
  box-shadow:0 24px 50px -38px rgb(0 20 30 / 0.7);
}
.lock__row{ display:flex; align-items:center; gap:clamp(0.9rem,2.4vw,1.6rem) }
.lock__im{ height:clamp(30px,3.6vw,46px); width:auto; display:block }
.lock__df img{ height:clamp(28px,3.4vw,44px); width:auto; display:block }
.lock__x{ font-size:var(--fs-md); color:var(--muted); line-height:1 }
/* Badge duduk di kepingan terang, jadi ia memakai tinta gelap — bukan lime
   yang dipakai badge di atas navy. */
.lock__card .dsc__badge{ margin:0; padding-left:clamp(1.1rem,3vw,2.6rem); border-left:1px solid var(--line) }
.lock__card .dsc__badge span{ border-color:var(--accent-ink); color:var(--accent-ink) }
@media (max-width:640px){
  .lock__card{ display:flex; flex-direction:column; align-items:flex-start; gap:1.1rem }
  .lock__card .dsc__badge{ padding-left:0; border-left:0 }
}

/* ══ 06 FLOWCONNECT ═══════════════════════════════════════════════
   Ditulis ulang. Versi pertama memakai mockup aplikasi dengan bar meter dan
   tiga kartu seragam — persis dua anti-reference di PRODUCT.md (SaaS landing
   page, deck konsultan). Sekarang tiap kemampuan dipakaikan bentuk brand
   sendiri: dinding pill untuk topik, gelembung bicara untuk Ask Flo, dan dua
   daun bertindih untuk 1:1 Simulations — tumpangan itu konstruksi logonya. */
.fc{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(2.4rem,6vh,4rem) clamp(1.5rem,3vw,2.6rem); margin-top:clamp(2.6rem,6vh,4rem) }
.fc__topics{ grid-column:1 / span 7 }
.fc__ask{ grid-column:9 / span 4 }
.fc__sim{ grid-column:1 / span 6; display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,2.6vw,2rem); align-items:center }
.fc__life{ grid-column:8 / span 5; align-self:center }
@media (max-width:900px){
  .fc{ grid-template-columns:1fr; gap:2.6rem }
  .fc__topics,.fc__ask,.fc__sim,.fc__life{ grid-column:1 / -1 }
}
@media (max-width:520px){ .fc__sim{ grid-template-columns:1fr; gap:1.2rem } }

.fc__k{ font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs); letter-spacing:0.15em; text-transform:uppercase; color:var(--cyan-ink) }
.fc__topics h3,.fc__ask h3{ font-size:var(--fs-lg); font-weight:var(--w-title); margin-top:0.4rem }
.fc__note{ margin-top:1rem; font-size:var(--fs-sm); font-weight:var(--w-body); line-height:1.7; color:var(--muted); max-width:46ch }

/* dinding topik: bukti kedalaman ditulis apa adanya, bukan digambar jadi grafik */
.chips{ display:flex; flex-wrap:wrap; gap:0.5rem; list-style:none; margin:1.3rem 0 0; padding:0 }
.chips span{
  display:inline-block; padding:0.5rem 1rem; border-radius:100px; background:var(--paper);
  border:1px solid var(--line); font-size:var(--fs-sm); font-weight:var(--w-body); color:var(--ink);
  transition:border-color 320ms var(--ease), background-color 320ms var(--ease);
}
.chips li:nth-child(4n+1) span{ background:oklch(0.70 0.128 216 / 0.14); border-color:transparent }
.chips li:nth-child(4n+3) span{ background:oklch(0.62 0.161 154 / 0.13); border-color:transparent }
.chips li span:hover{ background:var(--lime); border-color:var(--lime) }   /* li ikut ditulis: aturan warna nth-child lebih spesifik dari .chips span */

/* Ask Flo: gelembung bicara — bentuk yang sama dengan logo Imajinar, dan lime
   karena inilah satu-satunya tempat di bab ini yang boleh berteriak */
.bub{
  margin:1.2rem 0 0; padding:clamp(1.2rem,2.6vw,1.7rem);
  background:var(--lime); color:var(--ink); border-radius:var(--r-card) var(--r-card) var(--r-card) 6px;
}
.bub p{ font-size:var(--fs-md); font-weight:var(--w-body); line-height:1.5; max-width:30ch }

/* 1:1 Simulations: dua daun bertindih, area tumpangnya melahirkan warna ketiga */
.ovl{ position:relative; width:clamp(150px,17vw,196px); aspect-ratio:1.5 / 1 }
.ovl__l{
  position:absolute; top:0; width:66%; aspect-ratio:1; display:grid; place-items:center;
  font-family:Outfit,sans-serif; font-weight:var(--w-title); font-size:var(--fs-lg);
  color:var(--navy-deep); mix-blend-mode:multiply;
}
.ovl__l--a{ left:0; border-radius:var(--leaf); background:var(--cyan) }
.ovl__l--b{ right:0; border-radius:var(--leaf-r); background:var(--lime) }
.fc__ovlk{ margin-top:0.9rem; font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs); letter-spacing:0.12em; text-transform:uppercase; color:var(--muted) }
.fc__ovlk b{ color:var(--accent-ink) }

/* akses seumur hidup: pernyataan, bukan badge kecil di pojok */
.fc__big{ font-family:Outfit,sans-serif; font-weight:var(--w-display); font-size:var(--fs-xl); line-height:1.05; letter-spacing:-0.02em; color:var(--accent-ink) }
.fc__life .fc__note{ margin-top:0.9rem; color:var(--ink); max-width:38ch }
.fc__soon{ margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--line); font-size:var(--fs-sm); line-height:1.65; color:var(--muted); max-width:44ch }
.fc__soon b{ font-family:Outfit,sans-serif; font-weight:var(--w-title); color:var(--ink) }

/* ══ 07 LAPORAN ═══════════════════════════════════════════════════
   Tiga baris, bukan tiga kartu identik: nama besar, satu kalimat pembeda,
   satu kalimat untuk siapa. Penandanya daun logo, sama seperti bab LIGHT. */
.rep{ list-style:none; margin:clamp(2.4rem,6vh,3.6rem) 0 0; padding:0 }
.rep__row{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.2rem,3vw,2.4rem); align-items:start; padding:clamp(1.6rem,3.4vh,2.4rem) 0; border-top:1px solid var(--line) }
.rep__row:last-child{ border-bottom:1px solid var(--line) }
.rep__mark{
  position:relative; display:grid; place-items:center; flex:none;
  width:clamp(52px,4.4vw,64px); aspect-ratio:1; border-radius:var(--leaf); background:var(--rep-c);
}
.rep__row:nth-child(1){ --rep-c:var(--cyan);  --rep-c2:var(--green) }
.rep__row:nth-child(2){ --rep-c:var(--green); --rep-c2:var(--lime) }
.rep__row:nth-child(3){ --rep-c:var(--lime);  --rep-c2:var(--cyan) }
.rep__row:nth-child(2) .rep__mark{ border-radius:var(--leaf-r) }
.rep__echo{ position:absolute; inset:40% -20% -20% 40%; border-radius:var(--leaf-r); background:var(--rep-c2); mix-blend-mode:multiply; opacity:0.8 }
.rep__row:nth-child(2) .rep__echo{ inset:40% 40% -20% -20%; border-radius:var(--leaf) }
.rep__l{ position:relative; font-family:Outfit,sans-serif; font-weight:var(--w-title); font-size:clamp(1.5rem,2vw,2rem); line-height:1; color:var(--navy-deep) }
.rep__say h3{ font-size:var(--fs-lg); font-weight:var(--w-title); letter-spacing:-0.014em }
.rep__tag{ margin-top:0.6rem; font-size:var(--fs-md); font-weight:var(--w-body); line-height:1.5; color:var(--ink); max-width:46ch }
.rep__for{ margin-top:0.55rem; font-size:var(--fs-sm); font-weight:var(--w-body); line-height:1.6; color:var(--muted); max-width:46ch }
.rep__more{ margin-top:clamp(1.4rem,3vh,2rem); font-size:var(--fs-sm); line-height:1.7; color:var(--muted); max-width:58ch }

.rep__in{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(2.2rem,4vw,3.6rem); align-items:center; margin-top:clamp(3.4rem,8vh,5rem) }
@media (max-width:900px){ .rep__in{ grid-template-columns:1fr; gap:2.6rem; justify-items:center } }

/* Circumplex DISC Flow. Bukan hiasan: susunannya sama dengan grafik di laporan
   aslinya — empat busur gaya, empat titik temu di antaranya, jaring sepusat,
   lalu bidang yang menunjukkan kekuatan tiap gaya. Warna busurnya memang milik
   DISC Flow, bukan palet Imajinar: yang digambar di sini produk mereka.
   Geometrinya dihitung, tidak digambar tangan — lihat catatan di DESIGN.md. */
.rep__ring{ margin:0; max-width:380px; text-align:center }
.spider{ display:block; width:100%; height:auto; margin:1rem 0 1.1rem }
.spider__arc{ fill:none; stroke-width:17; stroke-linecap:round }
.spider__web{ fill:none; stroke:var(--line); stroke-width:1 }
.spider__area{ fill:rgb(0 61 87 / 0.10); stroke:var(--navy); stroke-width:2; stroke-linejoin:round }
.spider__dot{ fill:var(--navy); stroke:var(--paper); stroke-width:3.5 }
.spider__name,.spider__blend{ font-family:Outfit,sans-serif; font-weight:var(--w-label); text-anchor:middle; dominant-baseline:middle }
.spider__name{ font-size:15px; letter-spacing:0.04em; fill:var(--ink) }
.spider__blend{ font-size:13px; letter-spacing:0.1em; fill:var(--muted) }
.spider__cap{ max-width:34ch; margin:0 auto; font-size:var(--fs-xs); line-height:1.6; color:var(--muted) }
/* Bidangnya tumbuh dari pusat grafik saat babnya masuk layar; cincin, jaring,
   dan labelnya tidak ikut bergerak supaya yang terbaca satu hal saja. */
.anim .rep__ring[data-rise] .spider__plot{ transform-box:view-box; transform-origin:220px 220px;
  transition:opacity 620ms var(--ease) 180ms, transform 820ms var(--ease) 180ms }
.anim .rep__ring[data-rise]:not(.in) .spider__plot{ opacity:0; transform:scale(0.5) }
@media (prefers-reduced-motion:reduce){
  .anim .rep__ring[data-rise] .spider__plot{ transition:none }
  .anim .rep__ring[data-rise]:not(.in) .spider__plot{ opacity:1; transform:none }
}

.rep__list h3{ max-width:20ch; font-size:var(--fs-lg); font-weight:var(--w-title); line-height:1.2; margin-bottom:clamp(1.5rem,3.4vh,2.1rem) }
.rep__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr)); gap:1.7rem 2.2rem }
.rep__grp{ border-top:1px solid var(--line); padding-top:0.85rem }
.rep__grpk{ margin-bottom:0.8rem; font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs); letter-spacing:0.14em; text-transform:uppercase; color:var(--cyan-ink) }
.rep__grp ul{ display:grid; gap:0.6rem; list-style:none; margin:0; padding:0 }
.rep__list li{ position:relative; padding-left:1.15rem; font-size:var(--fs-sm); font-weight:var(--w-body); line-height:1.5; color:var(--ink) }
.rep__list li::before{ content:""; position:absolute; left:0; top:0.5em; width:7px; height:7px; border-radius:var(--leaf); background:var(--green) }
.rep .rep__row:hover .rep__mark{ transform:scale(1.06) }
.rep__mark{ transition:transform 520ms var(--ease) }
#report .lock{ margin-top:clamp(3rem,7vh,4.6rem) }
#report #report .lock__row{ border:1px solid var(--line) }

/* ══ GERBANG PEMBUKA ══════════════════════════════════════════════
   Bukan layar loading: halamannya sudah utuh di belakangnya. Tandanya dipecah
   dari FILE LOGO ASLI jadi empat lapis piksel (tiga gelembung + satu lapis
   area tumpang), jadi begitu ketiganya bertemu hasilnya identik dengan logo,
   termasuk warna tumpangnya: #008E80 cyan x green, #50B748 green x lime.
   Versi sebelumnya menebak bentuk dengan border-radius dan memakai `screen`,
   yang membuat area tumpangnya pucat — bukan logo Imajinar. */
.gate{
  position:fixed; inset:0; z-index:200; display:grid; place-content:center; justify-items:center;
  padding:var(--pad); text-align:center; background:var(--navy-deep); color:var(--paper);
  will-change:transform;
}
html.gate-on{ overflow:hidden }
.gate[hidden]{ display:none }

/* aura: satu bidang lembut di belakang tanda, supaya gelembungnya tidak
   mengambang di bidang gelap yang mati */
.gate__aura{
  position:absolute; width:min(68vw,760px); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 42%, oklch(0.70 0.128 216 / 0.20), oklch(0.62 0.161 154 / 0.10) 42%, transparent 68%);
  translate:0 -8%;
}
.gate__stage{ position:relative; width:clamp(200px,24vw,290px); aspect-ratio:553 / 461; margin-bottom:clamp(1.6rem,3.4vh,2.6rem) }
.mk{ display:block; width:100%; height:100%; overflow:visible }

.gate__wordwrap{ position:relative; display:block }
.gate__word{ width:clamp(158px,19vw,240px); height:auto; display:block }
.gate__wordwrap::after,.gate__tag::after{
  content:""; position:absolute; top:-6%; bottom:-6%; width:2px; border-radius:2px;
  background:linear-gradient(to bottom, transparent, var(--lime), transparent);
  opacity:0; pointer-events:none;
}
.gate__tag{ position:relative }
.gate__tag{ margin-top:clamp(1rem,2vh,1.4rem); font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs); letter-spacing:0.3em; text-transform:uppercase; color:var(--cyan) }
.gate__line{ margin-top:clamp(1.5rem,3.6vh,2.4rem); font-size:var(--fs-md); font-weight:var(--w-body); line-height:1.5; color:var(--muted-dark); max-width:24ch }

/* tombol: garis lime yang terisi dari kiri saat disentuh, dan riak saat ditekan */
.gate__btn{
  position:relative; overflow:hidden; isolation:isolate; cursor:pointer;
  margin-top:clamp(1.8rem,4vh,2.6rem); display:inline-flex; align-items:center; gap:0.85rem;
  padding:1rem 1.9rem; border:1px solid var(--lime); border-radius:100px 100px 100px 10px;
  background:transparent; color:var(--lime);
  font-family:Outfit,sans-serif; font-weight:var(--w-title); font-size:var(--fs-base);
  letter-spacing:0.01em;   /* kalimat santai: huruf biasa, bukan kapital bertracking */
  transition:color 420ms var(--ease), transform 220ms var(--ease);
}
.gate__fill{
  position:absolute; inset:0; z-index:-1; background:var(--lime);
  transform:scaleX(0); transform-origin:left center; transition:transform 520ms var(--ease);
}
/* dua panah di satu jendela: yang satu keluar, penggantinya masuk */
.gate__arr{ position:relative; display:block; width:18px; height:18px; overflow:hidden }
.gate__arr svg{ position:absolute; inset:0; transition:transform 460ms var(--ease) }
.gate__arr svg:nth-child(2){ transform:translateX(-140%) }
.gate__lbl{ position:relative }
.gate__btn:hover{ color:var(--ink) }
.gate__btn:hover .gate__fill{ transform:scaleX(1) }
.gate__btn:hover .gate__arr svg:nth-child(1){ transform:translateX(140%) }
.gate__btn:hover .gate__arr svg:nth-child(2){ transform:none }
.gate__btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:5px }
.gate__btn[data-tekan]{ transform:scale(0.97) }
/* riak: satu lingkaran lime yang mekar dari titik tekan, sekali */
.gate__btn::after{
  content:""; position:absolute; left:var(--rx,50%); top:var(--ry,50%); z-index:-1;
  width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:var(--lime);
  opacity:0; transform:scale(0);
}
.gate__btn[data-riak]::after{ animation:gateRiak 720ms var(--ease) }
@keyframes gateRiak{ from{ opacity:0.55; transform:scale(0) } to{ opacity:0; transform:scale(26) } }

/* ── koreografi masuk ─────────────────────────────────────────────
   Tiga gelembung datang dari tiga arah, masing-masing dengan putaran kecil.
   Area tumpangnya baru muncul SETELAH ketiganya mendarat: itu momennya —
   warna keempat lahir di tempat mereka bertemu. */
@media (prefers-reduced-motion:no-preference){
  .gate[data-play] .mk{ animation:mkNapas 9s ease-in-out 2s infinite }
  .gate[data-play] .gate__aura{ animation:gateAura 1400ms var(--ease) 300ms both, gateAuraNapas 11s ease-in-out 2s infinite }
  .gate[data-play] .gate__word{ animation:gateSapu 820ms var(--ease) 1320ms both }
  .gate[data-play] .gate__wordwrap::after{ animation:gateSeam 820ms var(--ease) 1320ms both }
  .gate[data-play] .gate__tag{ animation:gateSapu 820ms var(--ease) 1480ms both }
  .gate[data-play] .gate__tag::after{ animation:gateSeam 820ms var(--ease) 1480ms both }
  .gate[data-play] .gate__line{ animation:gateNaik 820ms var(--ease) 1660ms both }
  .gate[data-play] .gate__btn{ animation:gateNaik 760ms var(--ease) 1820ms both }
  .gate[data-play] .gate__lbl,.gate[data-play] .gate__arr{ animation:gateNaik 620ms var(--ease) 1980ms both }
}
@keyframes mkNapas{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.018) } }
/* naskah tersingkap lewat sapuan, bukan sekadar memudar */
@keyframes gateSapu{
  from{ opacity:0; clip-path:inset(0 100% 0 0); transform:translateY(8px) }
  to{ opacity:1; clip-path:inset(0 0 0 0); transform:none }
}
@keyframes gateNaik{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
/* Mulai dari opacity 0: animasinya `fill: both`, jadi keadaan 0% sudah
   terpasang sejak detik nol. Dengan 0.9 di awal, garisnya diam terlihat di
   tepi kiri naskah selama 1,3 detik sebelum jalan — itu yang terbaca aneh. */
@keyframes gateSeam{ 0%{ opacity:0; left:0 } 12%{ opacity:0.9 } 70%{ opacity:0.9 } 100%{ opacity:0; left:100% } }
@keyframes gateAura{ from{ opacity:0; transform:scale(0.7) } to{ opacity:1; transform:none } }
@keyframes gateAuraNapas{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.08) } }

/* ── keluar: tirainya tersapu ke atas, tandanya terbang ke header ──
   Animasi masuk WAJIB dimatikan dulu: ia `fill: both`, jadi nilai akhirnya
   terkunci dan transisi keluar tidak pernah kelihatan. */
.gate--out .mk,.gate--out .gate__word,
.gate--out .gate__tag,.gate--out .gate__line,.gate--out .gate__btn{ animation:none }
.gate--out{
  transition:transform 1000ms var(--ease) 120ms, border-radius 1000ms var(--ease) 120ms;
  transform:translateY(-101%); border-radius:0 0 46% 46% / 0 0 26% 26%; pointer-events:none;
}
.gate--out .gate__word,.gate--out .gate__tag,.gate--out .gate__line,.gate--out .gate__btn{
  transition:opacity 260ms var(--ease), transform 340ms var(--ease); opacity:0; transform:translateY(10px);
}
/* tanda yang terbang dipindah ke body supaya tidak ikut tersapu bersama tirai */
.mk--terbang{ position:fixed; z-index:210; pointer-events:none; transition:transform 980ms var(--ease), opacity 300ms var(--ease) 700ms }
@media (prefers-reduced-motion:reduce){
  .gate--out,.gate--out *,.mk--terbang{ transition:none }
}
@media (prefers-reduced-motion:no-preference){
  main.gate-in{ animation:gateIn 900ms var(--ease) both }
}
@keyframes gateIn{ from{ opacity:0.5; transform:scale(0.985) } to{ opacity:1; transform:none } }

/* ══ 05 QUOTE — kutipannya yang memimpin ══════════════════════════
   Sebelumnya judul dan kutipan punya bobot visual yang sama, jadi tidak
   ada yang menang. Sekarang judul turun jadi kicker, kutipannya naik jadi
   elemen utama, dan dibaca dengan stabilo yang berjalan mengikuti scroll. */
.quote{ position:relative; overflow:hidden }
.quote__bg{ position:absolute; inset:0; pointer-events:none }
.quote__leaf{
  position:absolute; border-radius:var(--leaf); will-change:transform;
  background:oklch(0.78 0.155 116); opacity:0.38;   /* lime lebih dalam: kedalaman tanpa warna baru */
}
/* Ketiganya dijauhkan dari kolom teks. Versi sebelumnya menaruh ql3 tepat di
   belakang kicker dan memotong ql1 jadi bidang bertepi lurus di pojok kanan
   atas — yang terbaca bukan bentuk brand, melainkan noda. */
.ql1{ width:min(26vw,360px); aspect-ratio:1; top:9%; right:3% }
.ql2{ width:min(22vw,300px); aspect-ratio:1; bottom:-24%; left:-12%; border-radius:var(--leaf-r) }
.ql3{ width:min(9vw,120px); aspect-ratio:1; top:46%; right:13%; opacity:0.26; border-radius:var(--leaf-r) }

.quote .wrap{ position:relative; max-width:1000px }
.quote__kicker{
  font-family:Outfit,sans-serif; font-weight:var(--w-title);
  font-size:var(--fs-lg); letter-spacing:-0.015em; line-height:1.25;
  max-width:26ch; color:oklch(0.31 0.075 120); margin-bottom:clamp(2.2rem,5.5vh,3.8rem);
}
.quote__fig{ margin:0 }
/* Ukuran dan lebar ini pernah salah dan wajib dijaga: kutipannya 43 kata,
   tapi dipasang seperti pull quote lima kata — 2.7rem pada lebar 25ch.
   Hasilnya SEPULUH baris, section setinggi 1,36 layar, dan sepuluh blok
   stabilo bergerigi yang menutupi bidang lime. Kutipan sepanjang ini butuh
   lebar baca, bukan ukuran huruf. Sekarang ~5 baris dan muat satu layar:
   masih memimpin babnya, tapi bisa dibaca dalam sekali tarikan napas. */
.quote__body{
  margin:0; font-family:Outfit,sans-serif; font-weight:var(--w-display);
  font-size:clamp(1.15rem,2vw,1.85rem); line-height:1.65; letter-spacing:-0.015em;
  color:var(--ink); max-width:50ch;
  /* Panjang barisnya diratakan browser: tanpa ini baris terakhir tinggal enam
     kata dan blok stabilonya terbaca seperti tangga yang patah. */
  text-wrap:balance;
  /* Stabilo meluber 0.26em ke kiri; kutipannya digeser sejauh itu supaya tepi
     kiri bidang putihnya lurus dengan kicker dan label bab di atasnya. */
  margin-left:0.26em;
}
.quote__body b{ font-weight:var(--w-title) }

/* stabilo: latar tumbuh dari kiri ke kanan, satu frasa demi satu frasa.
   Teksnya tidak pernah diredupkan, jadi kontrasnya tidak pernah turun. */
/* radius 0.3em membuat tiap penggal baris jadi gelembung, bukan sapuan
   stabilo. Stabilo sungguhan bertepi lurus; 0.09em cukup melunakkan sudut
   tanpa berubah jadi bentuk lain. */
.ql{
  /* padding tegak 0.3em pada line-height 1.65 membuat batang tiap baris
     bersentuhan. Dengan 0.1em ada celah lime di antaranya, dan yang terbaca
     bukan satu paragraf yang distabilo melainkan lima potong kertas. */
  padding:0.3em 0.26em; margin-inline:-0.26em; border-radius:0.09em;
  background-image:linear-gradient(var(--paper), var(--paper));
  background-repeat:no-repeat; background-size:100% 100%;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.anim .quote__body .ql{
  background-size:0% 100%;
  transition:background-size 760ms var(--ease);
}
.anim .quote__body .ql[data-on]{ background-size:100% 100% }

.quote__cite{
  margin-top:clamp(1.8rem,4vh,2.8rem); font-size:var(--fs-sm);
  font-weight:var(--w-body); color:oklch(0.34 0.065 120); font-style:normal;
}
.quote__cite::before{ content:""; display:block; width:2.2rem; height:2px; background:oklch(0.34 0.065 120); margin-bottom:1rem; opacity:0.55 }
.quote__cite span{
  display:block; font-family:Outfit,sans-serif; font-weight:var(--w-title);
  font-size:var(--fs-md); letter-spacing:-0.01em; color:var(--ink); margin-bottom:0.15rem;
}
/* penanda sumber baru muncul setelah kutipannya selesai "diucapkan" */
.anim [data-quote-cite]{ opacity:0; transform:translateY(14px); transition:opacity 700ms var(--ease), transform 700ms var(--ease) }
.anim [data-quote-cite].in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .anim .quote__body .ql{ background-size:100% 100%; transition:none }
  .anim [data-quote-cite]{ opacity:1; transform:none }
}
@media (max-width:820px){
  .quote__body{ max-width:none }
  /* Di lebar penuh kutipan ini lima baris dan stabilonya terbaca sebagai
     satu sapuan. Di 390px ia jadi sepuluh baris, dan dengan padding tegak
     0.1em tiap baris punya batang putihnya sendiri dengan celah di antaranya
     — hasilnya bukan stabilo, melainkan sepuluh potong kertas. Padding tegak
     dinaikkan sampai batangnya bersentuhan, jadi yang terbaca satu bidang
     bertepi kanan bergerigi: persis rupa stabilo di atas paragraf. */
  .ql{ border-radius:0.05em }
}

/* ══ 06 VALUES — LIGHT ════════════════════════════════════════════
   Memakai kosakata yang sudah ada di halaman ini: kartu ber-radius,
   daun logo sebagai penanda, warna brand, reveal bertahap. Bukan
   mekanisme baru yang berdiri sendiri. */
.light{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(0.8rem,1.6vw,1.4rem); margin-top:clamp(2.4rem,5.5vh,3.8rem);
}
@media (max-width:1040px){ .light{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:720px){ .light{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:460px){ .light{ grid-template-columns:1fr } }

.val{
  position:relative; overflow:hidden; border-radius:var(--r-card);
  padding:clamp(1.3rem,2.2vw,1.8rem);
  background:var(--val-tint), oklch(0.30 0.052 231);
  border:1px solid var(--line-dark);
  transition:transform 480ms var(--ease), border-color 480ms var(--ease);
}
@media (min-width:900px){ .val:hover{ --hv:translateY(-5px); transform:var(--hv); border-color:oklch(0.95 0.02 220 / 0.3) } }
@media (prefers-reduced-motion:reduce){ .val{ transition:none } }

/* penanda: daun logo, dengan satu daun kedua yang bertindih di belakangnya —
   konstruksi yang sama dengan logonya sendiri */
.val__mark{
  position:relative; display:grid; place-items:center;
  width:clamp(50px,4.6vw,66px); aspect-ratio:1; border-radius:var(--leaf);
  background:var(--val-c); margin-bottom:clamp(1.1rem,2.2vw,1.5rem);
}
.val__echo{
  position:absolute; inset:40% -20% -20% 40%; border-radius:var(--leaf-r);
  background:var(--val-c2); mix-blend-mode:screen; opacity:0.75;
}
.val__l{
  position:relative; font-family:Outfit,sans-serif; font-weight:var(--w-title);
  font-size:clamp(1.6rem,2.1vw,2.1rem); line-height:1; letter-spacing:-0.02em; color:var(--navy-deep);
}
.light .val:nth-child(2) .val__mark,
.light .val:nth-child(4) .val__mark{ border-radius:var(--leaf-r) }
.light .val:nth-child(2) .val__echo,
.light .val:nth-child(4) .val__echo{ inset:40% 40% -20% -20%; border-radius:var(--leaf) }

.light .val:nth-child(1){ --val-c:var(--cyan);      --val-c2:var(--green);     --val-tint:linear-gradient(155deg, oklch(0.70 0.128 216 / 0.13), transparent 58%) }
.light .val:nth-child(2){ --val-c:var(--green);     --val-c2:var(--lime);      --val-tint:linear-gradient(155deg, oklch(0.62 0.161 154 / 0.13), transparent 58%) }
.light .val:nth-child(3){ --val-c:var(--lime);      --val-c2:var(--cyan);      --val-tint:linear-gradient(155deg, oklch(0.84 0.170 113 / 0.13), transparent 58%) }
.light .val:nth-child(4){ --val-c:var(--teal-deep); --val-c2:var(--cyan);      --val-tint:linear-gradient(155deg, oklch(0.56 0.087 190 / 0.15), transparent 58%) }
.light .val:nth-child(5){ --val-c:var(--cyan);      --val-c2:var(--lime);      --val-tint:linear-gradient(155deg, oklch(0.70 0.128 216 / 0.13), transparent 58%) }

.val h3{
  font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-sm);
  letter-spacing:0.16em; text-transform:uppercase; margin-bottom:0.55rem; color:var(--paper);
}
.val p{ font-size:var(--fs-sm); font-weight:var(--w-body); color:var(--muted-dark); line-height:1.6 }

/* penandanya mekar sedikit setelah kartunya naik — satu ketukan, bukan pertunjukan */
.anim .val[data-rise] .val__mark{ transform:scale(0.72); opacity:0; transition:transform 700ms var(--ease) 180ms, opacity 520ms var(--ease) 180ms }
.anim .val[data-rise].in .val__mark{ transform:scale(1); opacity:1 }
@media (prefers-reduced-motion:reduce){
  .anim .val[data-rise] .val__mark{ transform:none; opacity:1; transition:none }
}

/* ══ 09 CLIENTS + WORK ════════════════════════════════════════════ */
/* Dulu marquee tak berujung. Dibuang, dan alasannya bukan selera: pembaca
   bab ini HR/L&D yang sedang membandingkan vendor, dan pertanyaannya cuma
   satu, "pernah menangani perusahaan sekelas saya?". Strip berjalan justru
   menghalangi pertanyaan itu dijawab. Logonya tidak bisa dipindai, harus
   ditunggu, dan tidak pernah terlihat semua sekaligus. Sekarang kesembilan
   belas berdiri diam dan terbaca dalam sekali pandang. Itu yang mengubahnya
   dari hiasan jadi bukti.

   Nama .marquee/.marquee__t dipertahankan meski geraknya sudah tidak ada:
   sanity.mjs menegaskan .marquee__t harus display:flex, dan flex memang
   masih dipakai, cuma sekarang membungkus. Ganti nama perlu diselaraskan
   dengan cek itu lebih dulu. */
/* Bab ini dulu rata kiri di atas kertas polos: benar, tapi diam. Sekarang
   ia punya bidang warnanya sendiri seperti bab lain, dan bidang itu memakai
   daun logo yang sama dengan hero. Bukan mekanisme baru, kosakata yang sudah
   ada dipakai di tempat yang belum punya karakter. */
.wall{ overflow:hidden }
.wall__bg{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none }
.wall__leaf{
  position:absolute; border-radius:var(--leaf); filter:blur(58px);
  mix-blend-mode:multiply; will-change:transform; pointer-events:none;
}
.wl1{ width:min(38vw,520px); aspect-ratio:1; top:-16%;  left:-8%;   background:var(--cyan);  opacity:0.26 }
.wl2{ width:min(30vw,430px); aspect-ratio:1; top:6%;    right:-6%;  background:var(--lime);  opacity:0.30; border-radius:var(--leaf-r) }
.wl3{ width:min(26vw,360px); aspect-ratio:1; bottom:-14%; left:38%; background:var(--green); opacity:0.18 }
@media (prefers-reduced-motion:reduce){ .wall__leaf{ transform:none !important } }

/* Rata tengah, atas permintaan klien. Ada alasan teknisnya juga: header
   mengambang dan melintasi teks saat digulir. Judul rata kiri selebar layar
   menyembul di KEDUA sisi pil header sehingga potongannya terbaca patah;
   judul rata tengah selebar pil itu tertutup rapi, bukan tercabik. */
.wall__head{ position:relative; z-index:1; text-align:center }
.wall__h2{ max-width:22ch; margin-inline:auto }
.wall__lead{ max-width:56ch; margin:clamp(1.2rem,2.6vh,1.8rem) auto 0 }

/* Dinding logo duduk di atas bidang kertas terang, bukan melayang di atas
   warna. Dua alasannya: logo korporat dirancang untuk latar putih dan
   terbaca paling jelas di sana, dan bidang itu memberi dindingnya tepi —
   ia jadi satu benda, bukan sekumpulan gambar yang kebetulan berdekatan. */
.marquee{
  position:relative; z-index:1;
  margin:clamp(2.6rem,6vh,4.2rem) auto 0; max-width:1240px;
  padding:clamp(2.4rem,5vh,3.6rem) clamp(1.6rem,3vw,3rem);
  background:var(--paper); border-radius:var(--r-card);
  box-shadow:0 30px 70px -46px oklch(0.34 0.062 231 / 0.5);
}
/* Flex dengan lebar item DIKUNCI, bukan grid dan bukan flex bebas.
   Tiga percobaan sampai di sini, dan tiap kegagalannya beralasan:
   flex bebas membungkus menurut isi, jadi 19 logo berlebar tidak sama
   menyisakan baris terakhir berisi dua logo menggantung. Grid meratakan
   kolomnya, tapi 19 itu bilangan prima: di 2 dan 3 kolom selalu tersisa
   SATU logo, dan grid menaruhnya di kolom pertama, bukan di tengah.
   Lebar item yang dikunci memberi kolom yang sejajar seperti grid,
   sekaligus membiarkan justify-content memusatkan baris terakhir. */
.marquee__t{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(2.2rem,4vh,3.6rem) clamp(1.4rem,2.6vw,2.4rem);
  max-width:1160px; margin-inline:auto;
}
/* min-width:0 wajib. Tanpa itu sel grid tidak boleh lebih sempit dari isinya,
   dan logo terlebar (Surveyor Indonesia, 5,6:1) memaksa kolomnya melebar
   sampai cuma muat SATU kolom di layar 390px — dindingnya jatuh jadi 19 baris
   bertumpuk, gejala yang persis sama dengan bug yang melahirkan sanity.mjs. */
.marquee .logo{
  /* Lebar tetap: inilah yang menggantikan kolom grid. min-width:0 tetap perlu
     supaya logo terlebar (Surveyor Indonesia, 5,6:1) tidak memaksa itemnya
     melar melewati jatah kolomnya di layar sempit. */
  flex:0 0 clamp(116px,13.5vw,196px); min-width:0;
  display:flex; align-items:center; justify-content:center;
}
.marquee .logo img{
  /* Warna asli, bukan grayscale. Grayscale menyeragamkan, tapi harganya
     mahal di sini: logo yang diabukan terbaca sebagai tekstur latar, dan
     justru itu yang membuat bab ini terasa hiasan. BRI biru, Tokopedia
     hijau, Pertamina merah dikenali seketika, dan pengenalan itulah
     buktinya. */
  /* Angka ini tinggi KANVAS, bukan tinggi logo. Kanvasnya 200 satuan dengan
     ink 62-140 di dalamnya, jadi pada 108px ink terbaca 33-76px: rata-rata
     ~52px, dengan luas optik yang setara antar logo. */
  /* max-height, bukan height. Dengan width dan height sama-sama auto, gambar
     mengecil mengikuti batas mana pun yang lebih dulu kena: di layar sempit
     lebar kolomnya, di layar lebar tingginya. Rasio selalu terjaga, dan tidak
     ada logo yang memaksa kolomnya melebar. */
  max-height:clamp(80px,7.6vw,108px); max-width:100%; width:auto; height:auto; display:block;
}

/* Muncul berurutan, bukan serentak: mata sempat mendaftar tiap logo satu
   per satu, dan dindingnya terbaca sebagai daftar yang panjang. Jeda
   dipasang per anak lewat nth-child, bukan data-rise per logo. Menambah
   19 elemen data-rise cuma membebani observer tanpa menambah apa pun. */
.anim .marquee[data-rise] .logo{
  opacity:0; transform:translateY(18px) scale(0.94);
  transition:opacity 720ms var(--ease), transform 720ms var(--ease);
}
.anim .marquee[data-rise].in .logo{ opacity:1; transform:none }
.anim .marquee[data-rise] .logo:nth-child(2){ transition-delay:42ms }
.anim .marquee[data-rise] .logo:nth-child(3){ transition-delay:84ms }
.anim .marquee[data-rise] .logo:nth-child(4){ transition-delay:126ms }
.anim .marquee[data-rise] .logo:nth-child(5){ transition-delay:168ms }
.anim .marquee[data-rise] .logo:nth-child(6){ transition-delay:210ms }
.anim .marquee[data-rise] .logo:nth-child(7){ transition-delay:252ms }
.anim .marquee[data-rise] .logo:nth-child(8){ transition-delay:294ms }
.anim .marquee[data-rise] .logo:nth-child(9){ transition-delay:336ms }
.anim .marquee[data-rise] .logo:nth-child(10){ transition-delay:378ms }
.anim .marquee[data-rise] .logo:nth-child(11){ transition-delay:420ms }
.anim .marquee[data-rise] .logo:nth-child(12){ transition-delay:462ms }
.anim .marquee[data-rise] .logo:nth-child(13){ transition-delay:504ms }
.anim .marquee[data-rise] .logo:nth-child(14){ transition-delay:546ms }
.anim .marquee[data-rise] .logo:nth-child(15){ transition-delay:588ms }
.anim .marquee[data-rise] .logo:nth-child(16){ transition-delay:630ms }
.anim .marquee[data-rise] .logo:nth-child(17){ transition-delay:672ms }
.anim .marquee[data-rise] .logo:nth-child(18){ transition-delay:714ms }
@media (prefers-reduced-motion:reduce){
  .anim .marquee[data-rise] .logo{ opacity:1; transform:none; transition:none }
}

/* ── Bab 08 GALLERY WALK ───────────────────────────────────────────
   Bab ini dulu grid tiga kolom: enam kartu seragam, dibaca sekali, selesai.
   Sekarang bab ini MEMERAGAKAN salah satu metode yang didaftarnya sendiri
   di bawah — Gallery Walk. Karyanya digantung berderet di satu dinding dan
   pengunjung menyusurinya, bukan menggulirnya lewat.

   Mekanismenya bukan barang baru: panel terpaku di dalam track scroll,
   sama persis dengan Bab 01-03 dan 06. Yang berbeda cuma arah geraknya.
   Sorotan yang berpindah mengikuti scroll juga kutipan langsung dari Bab 06.

   KEADAAN DEFAULT DI SINI ADALAH GRID — sama seperti sebelumnya. Susunan
   dinding hanya berlaku di bawah .walk-on, kelas yang dipasang JS saat
   layarnya memang lapang. Tanpa JS, di HP, dan saat reduced-motion,
   bab ini tetap grid yang utuh dan bisa dibaca. */
.docs{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.8rem,4vw,3.4rem) clamp(1.6rem,3.2vw,2.8rem);
  margin-top:clamp(2rem,5vh,3.2rem);
}
@media (max-width:900px){ .docs{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .docs{ grid-template-columns:1fr } }
.doc{ margin:0 }
.docs .doc:nth-of-type(3n+2){ margin-top:clamp(0rem,3vw,2.6rem) }
@media (max-width:900px){ .docs .doc{ margin-top:0 !important } }
/* Bentuk daun logo, berselang-seling — kosakata yang sama dengan ilustrasi
   Bab 02, foto Tim, dan tumpukan Glimpse. Galeri satu-satunya yang masih
   memakai kotak membulat biasa, dan itu yang membuatnya terasa netral di
   tengah situs yang seluruh fotonya bertepi ekor. */
.doc__ph{
  overflow:hidden; border-radius:var(--leaf-ph); background:var(--paper-3);
  aspect-ratio:4/3;
}
.docs .doc:nth-of-type(even) .doc__ph{ border-radius:var(--leaf-phr) }
/* Rasio mengikuti bentuk asli fotonya, bukan giliran posisi di dinding.
   Sebelumnya rasio dipaksa bergantian lewat :nth-of-type; begitu galerinya
   memakai dokumentasi asli, aturan itu memotong orang di tepi frame —
   foto lanskap dipaksa jadi potret kehilangan separuh isinya. */
.doc--tall .doc__ph{ aspect-ratio:4/5 }
/* Foto rombongan besar diambil selebar 16:9. Memaksanya ke 4:3 membuang
   seperempat lebarnya, dan yang terbuang persis orang di kedua tepi frame —
   alasan yang sama dengan catatan di atas, cuma arah sebaliknya. */
.doc--pano .doc__ph{ aspect-ratio:16/9 }
.doc__ph img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease) }
@media (min-width:900px){ .doc:hover .doc__ph img{ transform:scale(1.04) } }
.docs__note{ margin-top:clamp(1.6rem,3vh,2.2rem); font-size:var(--fs-sm); color:var(--muted) }

/* Di dalam dinding, panel pembuka duduk di sebelah pintu masuk sebagai
   keterangan. Di grid ia tidak boleh menempati satu sel foto — jadi ia
   mengambil seluruh baris dan berlaku sebagai judul bab yang normal.
   Dulu ia disembunyikan sama sekali di grid, dan akibatnya di ponsel
   sembilan belas foto muncul tanpa satu kata pun: tanpa nama, tanpa
   keterangan, tanpa tahu itu dokumentasi program. Yang memang hanya punya
   arti di dalam dinding cuma dua: ajakan menyusuri dan penghitung ruang. */
.docs__lead{ grid-column:1 / -1; margin-bottom:clamp(0.2rem,1.2vh,0.9rem) }
.docs__hint, .walkNum{ display:none }
.walk-on .docs__hint{ display:flex }

/* ── susunan dinding ── */
/* Galeri kini section sendiri (#gallery), bukan lanjutan bab klien. Nada
   kertasnya berganti dan takiknya memberi tepi, jadi batas antara keduanya
   terbaca tanpa perlu garis atau jarak berlebihan. */
.gal{ padding-block:clamp(4.5rem,10vh,8rem) }

/* dinding menembus padding section supaya penuh selebar layar; aman dari
   scrollbar horizontal karena .walkStick meng-clip isinya */
.walk-on .walkTrack{ position:relative; margin-inline:calc(var(--pad) * -1) }
.walk-on .walkStick{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:center;
  padding-block:clamp(4.5rem,9vh,7rem) clamp(2rem,4vh,3rem);
}
.walk-on .docs{
  display:flex; flex-wrap:nowrap; align-items:center;
  gap:clamp(1.8rem,3.4vw,3.2rem);
  padding-inline:var(--pad); margin-top:0;
  /* flex:0 0 auto wajib: sebagai flex item, .docs yang meluber justru akan
     diperas balik oleh flex-shrink dan dindingnya runtuh jadi satu layar */
  flex:0 0 auto; width:max-content; max-width:none;
  will-change:transform;
}
/* Lebar tiap karya dikunci: dalam flex nowrap, figure tanpa lebar tetap
   akan diperas isi tetangganya dan tingginya jadi tidak terduga. */
.walk-on .docs .doc{
  flex:0 0 auto; width:clamp(230px,24vw,340px); margin:0;
  position:relative; --hang:clamp(14px,3vh,34px);
  transition:transform 620ms var(--ease);
}
/* Digantung pada ketinggian yang sedikit berbeda, seperti kurasi dinding
   sungguhan. Lewat `top`, bukan transform: transform di elemen ini sudah
   dipakai dua pihak (reveal data-rise dan angkatan [data-on]). Nilainya
   statis — tidak ada properti layout yang dianimasikan di sini. */
.walk-on .docs .doc:nth-of-type(3n+1){ top:calc(var(--hang) * -1) }
.walk-on .docs .doc:nth-of-type(3n)  { top:var(--hang) }
/* Karya yang sedang di depan mata terangkat sedikit dan bayangannya menebal.
   Dulu penegasannya lewat warna judul, tapi galerinya sekarang satu kesatuan
   tanpa keterangan per foto — jadi tinggal fotonya sendiri yang bicara. */
.walk-on .docs .doc[data-on]{ transform:translateY(-10px) }
.walk-on .docs .doc__ph{
  box-shadow:0 18px 44px -34px oklch(0.34 0.062 231 / 0.55);
  transition:box-shadow 620ms var(--ease);
}
.walk-on .docs .doc[data-on] .doc__ph{ box-shadow:0 26px 60px -30px oklch(0.34 0.062 231 / 0.6) }

/* panel pembuka: keterangan dinding di sebelah kiri pintu masuk */
.walk-on .docs__lead{
  display:block; flex:0 0 auto; width:clamp(250px,26vw,360px); align-self:center;
}
.docs__k{
  font-family:Outfit,sans-serif; font-weight:var(--w-label);
  font-size:var(--fs-sm); letter-spacing:0.2em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 0.9rem;
}
.docs__d{ font-size:var(--fs-base); line-height:1.72; color:var(--ink); margin:0; max-width:32ch }
/* display diserahkan ke aturan grid/dinding di atas — menulis display:flex
   di sini membuatnya menang atas .docs__hint{display:none} yang lebih awal,
   dan ajakan "gulir untuk menyusuri" tetap muncul di grid yang tidak bisa
   disusuri ke samping. */
.docs__hint{
  margin:1.4rem 0 0; font-size:var(--fs-sm); color:var(--muted);
  align-items:center; gap:0.5rem;
}
.walk-on .docs .docs__note{
  flex:0 0 auto; width:clamp(220px,20vw,280px); align-self:center;
  margin-top:0; padding-left:clamp(1rem,2vw,1.6rem);
  border-left:1px solid var(--line);
}
/* penghitung ruang: nomor kecil bertracking, kosakata yang sama dengan
   eyebrow .chapter — bukan gaya baru */
.walk-on .walkNum{
  display:block; position:absolute; right:var(--pad); bottom:clamp(1.6rem,3.5vh,2.6rem);
  font-family:Outfit,sans-serif; font-weight:var(--w-label);
  font-size:var(--fs-sm); letter-spacing:0.18em; color:var(--muted);
}
.walkNum b{ font-weight:var(--w-label); color:var(--ink) }
@media (prefers-reduced-motion:reduce){
  .walk-on .docs .doc, .walk-on .docs .doc__ph{ transition:none }
}


/* ══ 09 SATISFACTION ═══════════════════════════════════════════════
   Bab ini gampang jatuh jadi "template hero-metric" yang dilarang di
   project ini: angka raksasa, label kecil, deret statistik pendamping.
   Yang membedakannya di sini: angkanya TIDAK berdiri sendiri. Ia duduk
   sejajar dengan satu foto dokumentasi sungguhan dan satu penanda sumber
   — fotonya bukti, angkanya ringkasan bukti itu. Tidak ada statistik
   pendamping, tidak ada ikon, tidak ada kartu.

   Susunannya juga sengaja CERMIN dari Bab 01 (teks kiri, visual kanan):
   di sini fotonya yang di kiri. Ritme halaman butuh variasi, bukan pola
   dua kolom yang persis sama dua kali. */
.sat{
  display:grid; grid-template-columns:1.15fr 0.85fr;
  gap:clamp(1.8rem,4.5vw,4rem); align-items:center;
  margin-top:clamp(2.2rem,5vh,3.5rem);
}
@media (max-width:860px){ .sat{ grid-template-columns:1fr; gap:2rem } }
.sat__ph{ margin:0 }
.sat__ph picture{
  display:block; overflow:hidden; border-radius:var(--leaf-phr);
  aspect-ratio:3/2; background:var(--paper-3);
}
.sat__ph img{ width:100%; height:100%; object-fit:cover; display:block; transition:scale 900ms var(--ease) }
.sat__ph picture{ transition:border-radius 760ms var(--ease), box-shadow 700ms var(--ease) }
.sat__ph figcaption{ transition:color 500ms var(--ease) }
@media (min-width:860px) and (prefers-reduced-motion:no-preference){
  /* fotonya bukti, angkanya ringkasan bukti itu — jadi menyentuh salah
     satunya menghidupkan keduanya, bukan cuma yang disentuh */
  .sat:hover .sat__ph picture{
    border-radius:var(--leaf-ph);
    box-shadow:0 26px 54px -26px oklch(0.34 0.062 231 / 0.5);
  }
  .sat:hover .sat__ph img{ scale:1.04 }
  .sat:hover .sat__ph figcaption{ color:var(--accent-ink) }
  .sat:hover .sat__meter i{ transform:translateY(-3px) }
  .sat:hover .sat__meter i:nth-child(2){ transition-delay:60ms }
  .sat:hover .sat__meter i:nth-child(3){ transition-delay:120ms }
  .sat:hover .sat__meter i:nth-child(4){ transition-delay:180ms }
}
@media (prefers-reduced-motion:reduce){
  .sat__ph img, .sat__ph picture, .sat__meter i{ transition:none }
}
.sat__ph figcaption{
  margin-top:0.85rem; font-family:Outfit,sans-serif; font-weight:var(--w-label);
  font-size:var(--fs-xs); letter-spacing:0.16em; text-transform:uppercase;
  color:var(--cyan-ink);
}
/* ── penyebutnya digambar: empat gelembung logo ──────────────────
   Skor 3,8 dari 4,0 sulit dirasakan sebagai angka telanjang. Empat
   gelembung mengisi dari kiri, yang terakhir terisi sebagian, jadi
   besarnya skor terbaca sebelum angkanya sempat dibaca. --f diisi JS
   dari progres scroll yang sama dengan pencacah angkanya, supaya
   keduanya tidak pernah bisa bercerita berbeda. */
.sat__meter{ display:flex; gap:clamp(5px,0.6vw,9px); margin-bottom:clamp(0.7rem,1.6vh,1.1rem) }
.sat__meter i{
  width:clamp(15px,1.7vw,22px); aspect-ratio:1; border-radius:var(--leaf);
  background:linear-gradient(90deg,
    var(--cyan) calc(var(--f,1) * 100%), var(--paper-3) 0);
  transition:background 620ms var(--ease), transform 620ms var(--ease);
}
.sat__meter i:nth-child(even){ border-radius:var(--leaf-r) }

.sat__fig{
  margin:0; font-family:Outfit,sans-serif; font-weight:var(--w-display);
  font-size:clamp(3.4rem,8.5vw,7rem); line-height:0.95; letter-spacing:-0.04em;
  color:var(--ink);
}
/* Dua skor berdampingan. Ukuran .sat__fig tunggal (sampai 7rem) dirancang
   untuk SATU angka; dipakai dua kali ia mengalahkan h2 babnya sendiri dan
   pecah di layar sempit. Jadi di dalam .sat__scores skalanya diturunkan —
   masih angka terbesar di bab ini, tapi tidak lagi berteriak. */
.sat__scores{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:clamp(1.6rem,4vw,2.8rem);
}
.sat__scores .sat__fig{ font-size:clamp(2.6rem,5.6vw,4.2rem) }
/* Penyebutnya diredupkan, bukan disembunyikan: yang dibaca duluan tetap 3,8,
   tapi skalanya ikut terbawa dalam satu tarikan mata. */
.sat__of{
  font-size:0.4em; font-weight:var(--w-title); letter-spacing:0;
  color:var(--muted); margin-left:0.1em;
}
/* Label memakai idiom yang SAMA dengan figcaption foto di sebelahnya —
   cyan, uppercase, tracking lebar. Dua sisi bab ini jadi terbaca sepasang. */
.sat__lbl{
  margin:0.5rem 0 0; font-family:Outfit,sans-serif; font-weight:var(--w-label);
  font-size:var(--fs-xs); letter-spacing:0.16em; text-transform:uppercase;
  color:var(--cyan-ink);
}
.sat__note{
  margin:0.85rem 0 0; font-size:var(--fs-sm); line-height:1.6;
  color:var(--muted); max-width:34ch;
}

/* ══ 07 PEOPLE ═══════════════════════════════════════════════════ */
.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,2.6rem); margin-top:clamp(2rem,5vh,3.5rem) }
/* tiga kartu: langsung ke satu kolom, tidak lewat dua — dua kolom
   menyisakan satu kartu menggantung sendirian */
@media (max-width:820px){ .team{ grid-template-columns:1fr; gap:2.4rem } }

/* Nama orang sungguhan tidak dipasangi foto stok orang lain — itu
   menyesatkan. Foto asli tim dipakai begitu tersedia (Bimo, Reza, Rama);
   yang belum ada fotonya tetap monogram inisial dalam gelembung logo.
   alt foto dikosongkan: namanya sudah dibacakan lewat h3 di bawahnya. */
.mem__ph picture{ width:100%; height:100%; display:block }
.mem__ph img{ width:100%; height:100%; object-fit:cover; display:block }
.mem__ph{
  aspect-ratio:4/5; border-radius:var(--leaf-ph); margin-bottom:clamp(1rem,2vw,1.4rem);
  display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(150deg, oklch(0.70 0.128 216 / 0.20), oklch(0.62 0.161 154 / 0.16) 58%, oklch(0.84 0.170 113 / 0.20)), var(--paper-2);
}
.team .mem:nth-child(even) .mem__ph{ border-radius:var(--leaf-phr) }
.mem__ph span{
  font-family:Outfit,sans-serif; font-weight:var(--w-display);
  font-size:clamp(2.6rem,5vw,4.2rem); letter-spacing:-0.03em; line-height:1;
  color:var(--navy); opacity:0.5;
  transition:opacity 700ms var(--ease), transform 700ms var(--ease);
}
/* ── disentuh ────────────────────────────────────────────────────
   Sebelumnya hanya monogram yang menanggapi, jadi tiga kartu berfoto asli
   benar-benar mati saat disentuh. Sekarang keempatnya berperilaku sama.

   Bentuk daunnya BERTUKAR ke cerminnya saat disentuh — ekornya berpindah
   sudut. Itu gerakan yang cuma bisa dilakukan bentuk logo ini, bukan efek
   umum yang bisa ditempel di kartu mana pun.

   transform kartunya WAJIB lewat --hv: .mem punya data-rise, dan aturan
   .anim [data-rise].in (tiga kelas) mengalahkan .mem:hover (dua kelas)
   untuk properti yang sama. Ditulis langsung, hover-nya tidak akan pernah
   terpakai — persis yang pernah terjadi di Values dan Framework. */
.mem{ transition:transform 700ms var(--ease) }
.mem__ph{ transition:border-radius 760ms var(--ease), box-shadow 700ms var(--ease) }
.mem__ph img{ transition:scale 900ms var(--ease) }
.mem__role{ transition:color 500ms var(--ease) }

@media (min-width:820px) and (prefers-reduced-motion:no-preference){
  .mem:hover{ --hv:translateY(-6px); transform:var(--hv) }
  .mem:hover .mem__ph{
    border-radius:var(--leaf-phr);
    box-shadow:0 26px 52px -26px oklch(0.34 0.062 231 / 0.5);
  }
  .team .mem:nth-child(even):hover .mem__ph{ border-radius:var(--leaf-ph) }
  .mem:hover .mem__ph img{ scale:1.055 }
  .mem:hover .mem__ph span{ opacity:0.72; transform:scale(1.06) }
  .mem:hover .mem__role{ color:var(--accent-ink) }
}
@media (prefers-reduced-motion:reduce){
  .mem, .mem__ph, .mem__ph img, .mem__ph span, .mem__role{ transition:none }
}
.mem h3{ font-size:var(--fs-md); font-weight:var(--w-title); margin-bottom:0.25rem }
.mem__role{ font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs); letter-spacing:0.15em; text-transform:uppercase; color:var(--cyan-ink); margin-bottom:0.7rem }
.mem p:not(.mem__role){ font-size:var(--fs-sm); font-weight:var(--w-body); line-height:1.6; color:var(--muted); max-width:32ch }
.team__note{ margin-top:clamp(1.6rem,3vh,2.2rem); font-size:var(--fs-sm); color:var(--muted) }

/* ══ 05 A GLIMPSE OF US — pembuka bagian About Us ═════════════════
   Pernyataan posisi Imajinar, ditemani tiga potongan suasana. Foto di
   sini bukan galeri: perannya menemani kalimat, jadi kecil dan bertumpuk
   miring, bukan grid rapi yang menyaingi teksnya. */
.glimpse{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--gutter); align-items:center }
@media (max-width:900px){ .glimpse{ grid-template-columns:1fr; gap:clamp(2rem,5vh,3rem) } }
.glimpse h2{ margin-bottom:clamp(1.2rem,2.6vh,1.9rem) }
.glimpse__note{ margin-top:clamp(1.4rem,3vh,2rem); font-size:var(--fs-sm); font-weight:var(--w-body); color:var(--muted); max-width:44ch }
.glimpse h2 em{ font-style:normal; color:var(--accent-ink) }

.glimpse__ph{ position:relative; aspect-ratio:1; max-width:min(460px,92vw); margin-inline:auto; width:100% }
/* Gelembung logo di sekitar tumpukan foto.
   Fotonya menutupi hampir seluruh kotak — terukur, yang tersisa cuma tiga
   tepi: kanan-atas (x63-100, y0-24), kanan-bawah (x69-100, y67-100), dan
   jalur kiri-bawah. Jadi gelembungnya ditaruh DI SANA, masing-masing
   sedikit meluber keluar kotak supaya terbaca sebagai bidang tempat
   fotonya duduk, bukan tiga titik yang tersembunyi.
   gm1 dan gm2 sengaja tetap saling bertindih: tumpangannya yang melahirkan
   warna ketiga, dan itu yang membuatnya terbaca sebagai logo Imajinar.
   Semua meluber dibatasi <=12% dari kotak, dan diperiksa overflowx.mjs. */
.gm{
  position:absolute; aspect-ratio:1; border-radius:var(--leaf); z-index:0;
  mix-blend-mode:multiply; pointer-events:none; will-change:transform;
  transition:opacity 900ms var(--ease), scale 1000ms var(--ease), translate 900ms var(--ease);
}
.gm1{ --o:0.55; width:38%; top:-9%;     right:-9%;  background:var(--cyan);  opacity:var(--o) }
.gm2{ --o:0.50; width:25%; top:12%;     right:14%;  background:var(--green); opacity:var(--o); border-radius:var(--leaf-r) }
.gm3{ --o:0.58; width:29%; bottom:-7%;  right:-6%;  background:var(--lime);  opacity:var(--o) }
.gm4{ --o:0.42; width:24%; bottom:16%;  left:-11%;  background:var(--teal-deep); opacity:var(--o); border-radius:var(--leaf-r) }
@media (max-width:900px){
  .gm1{ right:-4% } .gm3{ right:-2% } .gm4{ left:-5% }
}

.glimpse__ph picture{
  transition:rotate 700ms var(--ease), translate 700ms var(--ease), box-shadow 700ms var(--ease), opacity 700ms var(--ease), scale 900ms var(--ease);
  position:absolute; overflow:hidden; border-radius:var(--leaf-ph); box-shadow:0 18px 44px -26px oklch(0.34 0.062 231 / 0.55);
  translate:var(--ht,0 0); scale:var(--hs,1) }
.glimpse__ph picture:nth-of-type(2){ border-radius:var(--leaf-phr) }
.glimpse__ph img{ width:100%; height:100%; object-fit:cover; display:block }
.glimpse__ph picture:nth-of-type(1){ width:62%; top:0;    left:0;   rotate:-3.5deg; z-index:1 }
.glimpse__ph picture:nth-of-type(2){ width:52%; top:26%;  right:0;  rotate:4deg;    z-index:2 }
.glimpse__ph picture:nth-of-type(3){ width:56%; bottom:0; left:12%; rotate:-1.5deg; z-index:3 }
/* ── kemunculan pertama ──────────────────────────────────────────
   Gelembungnya mekar dulu satu per satu dari belakang, baru fotonya naik
   ke tumpukannya. Rotasi istirahat foto TIDAK ikut dianimasikan: kalau
   ikut, ia bertengkar dengan rotasi hover sesudahnya. */
.anim .glimpse__ph[data-rise] .gm{ opacity:0; scale:0.5 }
.anim .glimpse__ph[data-rise].in .gm{ opacity:var(--o); scale:var(--hs,1) }
.anim .glimpse__ph[data-rise] .gm2{ transition-delay:90ms }
.anim .glimpse__ph[data-rise] .gm3{ transition-delay:180ms }
.anim .glimpse__ph[data-rise] .gm4{ transition-delay:270ms }

.anim .glimpse__ph[data-rise] picture{ opacity:0; translate:0 30px; scale:0.94 }
.anim .glimpse__ph[data-rise].in picture{ opacity:1; translate:var(--ht,0 0); scale:var(--hs,1) }
.anim .glimpse__ph[data-rise] picture:nth-of-type(1){ transition-delay:300ms }
.anim .glimpse__ph[data-rise] picture:nth-of-type(2){ transition-delay:440ms }
.anim .glimpse__ph[data-rise] picture:nth-of-type(3){ transition-delay:580ms }
/* jeda kemunculan dicabut begitu selesai, kalau tidak hover ikut tertunda */
.anim .glimpse__ph[data-rise].in picture,
.anim .glimpse__ph[data-rise].in .gm{ transition-delay:0ms }

@media (prefers-reduced-motion:no-preference) and (min-width:900px){
  /* Disentuh: tumpukan fotonya membuka sedikit, dan gelembung di belakangnya
     mengembang pelan ke arah yang berbeda-beda. Semuanya scale dan translate
     kecil — tidak ada yang keluar dari kotaknya, jadi tetap tidak mungkin
     melahirkan scroll mendatar. */

  /* gugusnya membuka sedikit: tiap gelembung bergerak menjauh dari pusat,
     jadi area tumpangnya melebar dan warna ketiganya makin terlihat */
  /* Disentuh: geraknya harus benar-benar terasa. Versi pertama cuma
     menggeser 6-14px dan tidak terbaca sebagai perubahan sama sekali.
     Translate dan scale disalurkan lewat --ht / --hs supaya tidak kalah
     spesifisitas dari aturan kemunculan yang selektornya jauh lebih panjang. */
  .glimpse:hover .glimpse__ph picture:nth-of-type(1){ --ht:-26px -16px; rotate:-7.5deg }
  .glimpse:hover .glimpse__ph picture:nth-of-type(2){ --ht:26px -8px;   rotate:9deg }
  .glimpse:hover .glimpse__ph picture:nth-of-type(3){ --ht:-10px 24px;  rotate:-5deg }
  .glimpse:hover .glimpse__ph picture{ box-shadow:0 30px 60px -26px oklch(0.34 0.062 231 / 0.62) }

  .glimpse:hover .gm1{ --hs:1.22; translate:14px -12px }
  .glimpse:hover .gm2{ --hs:1.28; translate:-11px 10px }
  .glimpse:hover .gm3{ --hs:1.24; translate:12px 12px }
  .glimpse:hover .gm4{ --hs:1.30; translate:-14px 4px }

  /* menyentuh satu foto langsung mengangkat foto ITU ke depan */
  .glimpse__ph picture:hover{ --hs:1.055; z-index:9;
    box-shadow:0 38px 72px -24px oklch(0.34 0.062 231 / 0.7) }
}
}

/* ══ 11 OUR PROGRAM — dua tingkat ═════════════════════════════════
   Empat cara masuk, dan yang keempat punya anak. Bentuknya sengaja
   daftar bernomor bertingkat, bukan grid kartu: tingkatannya harus
   terbaca dari bentuknya, bukan cuma dari ukuran huruf. */
.prg{ list-style:none; margin:clamp(2rem,5vh,3.4rem) 0 0; padding:0; border-top:1px solid var(--line) }
.prg__item{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1rem,2.6vw,2.2rem); padding:clamp(1.6rem,3.4vh,2.6rem) 0;
  border-bottom:1px solid var(--line);
}
.prg__n{
  font-family:Outfit,sans-serif; font-weight:var(--w-display);
  font-size:clamp(1.8rem,3.4vw,3rem); line-height:0.9; letter-spacing:-0.03em;
  color:var(--cyan-ink); opacity:0.55;
}
.prg__body h3{ font-size:var(--fs-lg); font-weight:var(--w-title); margin-bottom:0.5rem }
.prg__body > p{ font-size:var(--fs-base); font-weight:var(--w-body); line-height:1.62; color:var(--muted); max-width:58ch }
@media (max-width:620px){
  .prg__item{ grid-template-columns:1fr; gap:0.5rem }
  .prg__n{ font-size:var(--fs-md) }
}

/* anak dari butir 04: digeser masuk dan diberi garis induk */
.wb{ margin-top:clamp(1.6rem,3.4vh,2.4rem); padding-left:clamp(1rem,2.4vw,1.8rem); border-left:2px solid var(--lime) }
.wb__h{
  font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs);
  letter-spacing:0.17em; text-transform:uppercase; color:var(--cyan-ink); margin-bottom:clamp(1rem,2.2vh,1.5rem);
}
.wb__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.6vw,2rem) }
@media (max-width:820px){ .wb__list{ grid-template-columns:1fr; gap:1.8rem } }
.wb__ph{
  aspect-ratio:16/10; border-radius:var(--r-card); overflow:hidden;
  background:var(--paper-3); margin-bottom:0.9rem;
}
.wb__ph img{ width:100%; height:100%; object-fit:cover; display:block }
/* butir yang belum jalan: penanda status, bukan foto kosong */
.wb__ph--soon{
  display:grid; place-items:center;
  background:repeating-linear-gradient(135deg, var(--paper-3) 0 10px, var(--paper-2) 10px 20px);
}
.wb__soon{
  font-family:Outfit,sans-serif; font-weight:var(--w-label); font-size:var(--fs-xs);
  letter-spacing:0.16em; text-transform:uppercase; color:var(--ink);
  background:var(--lime); padding:0.42rem 0.9rem; border-radius:100px;
}
.wb__list h4{
  font-family:Outfit,sans-serif; font-weight:var(--w-title); font-size:var(--fs-base);
  letter-spacing:-0.01em; line-height:1.3; margin:0 0 0.35rem; color:var(--ink);
}
.wb__list p{ font-size:var(--fs-sm); font-weight:var(--w-body); line-height:1.6; color:var(--muted) }

/* ══ 10 CLOSING ═══════════════════════════════════════════════════ */
.close{ position:relative; overflow:hidden }
[data-slide]{ transition:transform 900ms var(--ease), opacity 900ms var(--ease) }
@media (prefers-reduced-motion:reduce){ [data-slide]{ transform:none !important; opacity:1 !important } }
.beyond{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem); margin:clamp(2.5rem,6vh,4rem) 0 }
@media (max-width:820px){ .beyond{ grid-template-columns:1fr } }
.beyond p{ font-family:Outfit,sans-serif; font-weight:var(--w-display); font-size:var(--fs-lg); line-height:1.24; letter-spacing:-0.015em; padding-top:1.2rem; border-top:1px solid var(--line-dark) }
.contact{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,4rem);
  align-items:start; padding-top:clamp(2rem,4vh,3rem); border-top:1px solid var(--line-dark);
}
@media (max-width:760px){ .contact{ grid-template-columns:1fr } }
.contact__lbl{
  font-family:Outfit,sans-serif; font-weight:var(--w-label);
  font-size:var(--fs-xs); letter-spacing:0.17em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:0.8rem; display:block;
}
.contact__who{ font-family:Outfit,sans-serif; font-weight:var(--w-title); font-size:var(--fs-lg); letter-spacing:-0.015em; color:var(--paper); margin-bottom:0.3rem }
.contact__role{ font-size:var(--fs-sm); color:var(--muted-dark) }
.contact__wa{ margin-top:clamp(1.2rem,2.5vh,1.8rem) }
.contact__wa svg{ width:19px; height:19px }
.contact__wa:hover svg{ transform:none }
.contact__links{
  list-style:none; margin:clamp(1rem,2.2vh,1.4rem) 0 0; padding:0;
  display:grid; gap:0.45rem; font-size:var(--fs-sm);
}
.contact__links a{
  color:var(--paper); text-decoration:none;
  display:inline-flex; align-items:center; gap:0.55rem;
  transition:color 320ms var(--ease);
}
/* Garis bawah pindah ke teksnya saja. Kalau tetap di tautan, ia ikut
   menggarisbawahi ikonnya dan terbaca seperti coretan, bukan tautan. */
.contact__links a span{
  border-bottom:1px solid oklch(0.95 0.02 220 / 0.28); padding-bottom:2px;
  transition:border-color 320ms var(--ease);
}
.contact__links svg{ flex:none; opacity:0.8; transition:opacity 320ms var(--ease) }
.contact__links a:hover svg{ opacity:1 }
.contact__links a:hover{ color:var(--lime) }
.contact__links a:hover span{ border-color:var(--lime) }
.contact__meta{ font-size:var(--fs-sm); color:var(--muted-dark); margin-top:clamp(1.2rem,2.5vh,1.6rem) }
.contact__form{ display:flex; flex-direction:column; align-items:flex-start; gap:0.9rem }
.contact__form textarea{
  width:100%; font:inherit; font-size:var(--fs-sm); color:var(--paper); line-height:1.6;
  background:oklch(0.95 0.02 220 / 0.06); border:1px solid var(--line-dark);
  border-radius:var(--r-card); padding:1rem 1.1rem; resize:vertical;
}
.contact__form textarea:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px }
.contact__form .btn{ color:var(--paper) }

footer{ background:var(--navy); color:var(--muted-dark); padding:clamp(2rem,4vh,3rem) var(--pad); font-size:var(--fs-sm) }
.footer__in{ max-width:1240px; margin-inline:auto; display:flex; flex-wrap:wrap; gap:0.8rem 2rem; justify-content:space-between; align-items:center }
.footer__note{ font-style:italic }