/* ==========================================================================
   Sections — layout per blok halaman
   ========================================================================== */

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-pad-y) 40px;
  background-color: transparent;
  color: var(--c-text);
  transition:
    padding 240ms var(--ease-reveal),
    background-color 240ms var(--ease-reveal),
    backdrop-filter 240ms var(--ease-reveal),
    color 240ms var(--ease-reveal);
}

/* Setelah lepas dari puncak halaman: background 40% + frosted glass. */
.site-header--scrolled {
  padding-block: var(--header-pad-y-sm);
  background-color: var(--header-bg-light);
  -webkit-backdrop-filter: blur(var(--header-blur));
  backdrop-filter: blur(var(--header-blur));
}

/* Saat melintas di atas section berlatar gelap, transparansi ikut gelap. */
.site-header--scrolled.site-header--on-dark {
  background-color: var(--header-bg-dark);
}
.site-header--on-dark { color: var(--c-on-dark); }

/* Tanpa dukungan backdrop-filter, naikkan opacity supaya tetap terbaca. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header--scrolled { background-color: rgba(255, 255, 255, 0.85); }
  .site-header--scrolled.site-header--on-dark { background-color: rgba(0, 0, 0, 0.85); }
}

/* Dua logo ditumpuk, di-crossfade sesuai latar di belakang header. */
.site-header__logo {
  position: relative;
  display: block;
  height: var(--logo-h);
}
.site-header__logo-img {
  display: block;
  height: var(--logo-h);
  width: auto;
  transition: opacity 240ms var(--ease-reveal);
}
.site-header__logo-img--light {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.site-header--on-dark .site-header__logo-img { opacity: 0; }
.site-header--on-dark .site-header__logo-img--light { opacity: 1; }

/* Wrapper jadi acuan posisi popover — panel di-anchor ke tombol, bukan ke
   viewport, supaya titik X selalu jatuh persis di atas icon hamburger
   walaupun padding header menyusut saat scroll. */
.site-header__nav { position: relative; }

.site-header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: inherit;
  transition: opacity 180ms var(--ease-reveal);
}
/* Hamburger tertutup panel; disembunyikan supaya tidak beradu dengan
   icon X panel selama transisi. */
.site-header__menu[aria-expanded="true"] { opacity: 0; pointer-events: none; }

/* --- Nav popover (Figma 29:128 — 480 x 582) -------------------------------- */
.nav-overlay {
  /* Pusat tombol ada di (20, 20) dari sudutnya. Pusat X panel ada 36px dari
     sisi atas & kanan panel (padding 20 + separuh icon 16). Selisih 16px. */
  position: absolute;
  top: -16px;
  right: -16px;
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--c-ink);
  color: var(--c-on-dark);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 240ms var(--ease-reveal), transform 240ms var(--ease-reveal), visibility 0s linear 240ms;
}
.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 240ms var(--ease-reveal), transform 240ms var(--ease-reveal);
}

/* Ukuran font ditulis literal — panel terkunci 480px, jadi tidak boleh ikut
   mengecil lewat override --fs-* di breakpoint. */

/* Blok 1 — head (80px) */
.nav-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 28px 28px;
}
.nav-overlay__mark { display: block; width: 28px; height: 28px; }
.nav-overlay__close {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--c-on-dark);
}

/* Blok 2 — nav utama (118px) */
.nav-overlay__primary { padding: 0 20px 0 28px; }

.nav-overlay__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Line-height ditulis px (bukan rasio) supaya tinggi tiap baris sama dengan
   pembulatan Figma — rasio 1.2 meleset ~0.4px per baris dan menumpuk. */
.nav-overlay__link {
  font-size: 28px;
  line-height: 34px;
  font-weight: var(--fw-light);
  letter-spacing: -0.56px;
  color: var(--c-on-dark);
  transition: color 180ms ease;
}
.nav-overlay__link:hover { color: var(--c-nav-label); }

.nav-overlay__label {
  font-size: var(--fs-small);
  line-height: 14px;
  font-weight: var(--fw-regular);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--c-nav-label);
}

/* Blok 3 — services (226px) */
.nav-overlay__services {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 20px 28px;
}

/* Blok 4 — kontak (97px) */
.nav-overlay__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 40px 20px 20px 28px;
}
/* Basis 180px: di panel 480px keduanya muat sebaris (210px each, sesuai
   Figma); saat panel terjepit di layar sempit, otomatis menumpuk supaya
   alamat email tidak menabrak kolom telepon. */
.nav-overlay__contact-item {
  flex: 1 1 180px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-overlay__contact-value {
  display: block;
  font-size: var(--fs-body-2);
  line-height: 19px;
  font-weight: var(--fw-regular);
  letter-spacing: -0.32px;
  color: var(--c-on-dark);
}

/* Blok 5 — footer (61px) */
.nav-overlay__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 20px 20px 28px;
  border-top: 1px solid var(--c-nav-border);
}
.nav-overlay__copy {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  font-weight: var(--fw-light);
  letter-spacing: 0.24px;
  text-transform: uppercase;
  color: var(--c-on-dark);
}
.nav-overlay__social { display: flex; gap: 16px; }
.nav-overlay__social a { display: flex; color: var(--c-on-dark); }
.nav-overlay__social a:hover { color: var(--c-nav-label); }

/* --- Hero ---------------------------------------------------------------- */
.section--hero {
  position: relative;
  overflow: hidden;
  padding-top: 120px;
  padding-bottom: 152px;
}

/* ASCII field — duduk di belakang grid supaya link tetap bisa diklik.
   Dipakai hero home dan hero halaman service; geometrinya sama persis, jadi
   satu aturan untuk keduanya.

   Inset 8px kiri-kanan asalnya dari frame Figma 45:15 (halaman service), lalu
   diikutkan ke home supaya batas field seragam di seluruh situs.

   Celah 8px-nya sendiri tidak dicat di sini: body sudah
   background: var(--c-surface).

   pointer-events dimatikan supaya seleksi teks tidak terganggu — listener
   pointer dipasang ke section pembungkus, bukan ke canvas.

   Cell size TIDAK diatur di sini. Nilainya masuk ke shader sebagai uniform dan
   ikut breakpoint di JS, karena backing store canvas hitungannya device px
   sementara CSS bicara CSS px. */
.hero__canvas,
.service-hero__canvas {
  position: absolute;
  inset: 0 8px;
  display: block;
  width: calc(100% - 16px);
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.section--hero .grid {
  position: relative;
  z-index: 1;
}

.section--problem { padding-bottom: 48px; }
.hero__lead { margin-top: var(--space-7); color: var(--c-text); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-9); }

/* --- Lead paragraf section ---------------------------------------------- */
.section__lead { margin-top: var(--space-6); color: var(--c-text); }
.section__lead--tight { margin-top: var(--space-5); }

/* --- Services ------------------------------------------------------------ */
.services__row { margin-top: var(--space-6); align-items: stretch; }

/* --- Why Pixelzenic ------------------------------------------------------ */
.why__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: var(--space-10);
}

/* --- Selected work ------------------------------------------------------- */
.section--dark {
  background: var(--c-ink);
  color: var(--c-on-dark);
  /* Section gelap punya ritme sendiri: bg mulai 140px setelah section sebelumnya
     dan berakhir 171px sebelum section berikutnya (diukur dari artboard). */
  margin-block: 45px 38px;
  margin-inline: 8px;
  padding-block: 109px;
}
.section--dark .eyebrow { color: var(--c-on-dark); }
.section--dark .h2 { color: var(--c-on-dark); }
.work__row { margin-top: var(--space-6); align-items: stretch; }
.work-card { min-height: 530px; }

/* --- How we work --------------------------------------------------------- */
/* Selector ol.steps — reset punya ol[class] { margin: 0 } yang spesifisitasnya
   lebih tinggi dari .steps, jadi margin-top wajib dinaikkan spesifisitasnya. */
ol.steps {
  margin-top: var(--space-8);
  /* Kartu rata bawah — tingginya beda-beda, jadi stagger-nya di sisi atas. */
  align-items: end;
}

.step { background: var(--c-surface-tint); }

/* Tinggi dikunci per kartu untuk membentuk stagger seperti artboard. */
.step:nth-child(1) { height: 280px; }
.step:nth-child(2) { height: 320px; }
.step:nth-child(3) { height: 384px; }
.step:nth-child(4) { height: 280px; }

.step__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-8);
}

/* 24px — di antara body-1 dan h3, sesuai proporsi artboard */
.step__text {
  font-size: 24px;
  line-height: 1.4;
  font-weight: var(--fw-light);
  color: var(--c-text);
}

/* Label + nomor didorong ke dasar kartu */
.step__meta { margin-top: auto; }

.step__label {
  display: block;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text);
}

.step__num {
  display: block;
  font-size: 56px;
  line-height: 1;
  font-weight: var(--fw-light);
  color: var(--c-text);
}

/* --- About / Trust ------------------------------------------------------- */
.about__body { margin-top: var(--space-6); }
.about__title { max-width: 100%; }
.about__body .btn { margin-top: var(--space-8); }

/* --- CTA / Contact --------------------------------------------------------
   Satu komponen dipakai di semua halaman (dikelola tools/sync-partials.mjs,
   isi di site/partials/contact.html). Lebar kolom & padding sengaja
   self-contained lewat custom property lokal, tidak bergantung pada grid
   halaman induk, biar tampil identik di mana pun section ini ditaruh. */
.cta {
  --cta-col: 780px;
  --cta-gutter: 0px;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: var(--c-surface);
  padding-top: 160px;
  padding-bottom: 80px;
}

.cta__glow {
  display: none;
  position: absolute;
  z-index: 0;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  filter: blur(800px);
  pointer-events: none;
}

.cta__glow--warm {
  left: 7px;
  bottom: -424px;
  background: var(--c-brand-yellow);
  opacity: 0.5;
}

.cta__glow--cool {
  right: 0;
  bottom: -458px;
  background: var(--c-brand-magenta);
  opacity: 0.28;
}

.cta__inner {
  position: relative;
  z-index: 1;
  width: min(var(--cta-col), 100% - var(--cta-gutter) * 2);
  margin-inline: auto;
}

.cta__card { background: #F9F9F9; padding: 40px; }
.cta__card + .cta__card { margin-top: 4px; }
.cta__title { margin-top: 20px; }
.cta__lead { margin-top: 20px; color: var(--c-text-muted); }

.cta__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 40px;
  margin-top: 40px;
}
.cta__form .field--wide,
.cta__form .btn--block,
.cta__form .contact__status { grid-column: 1 / -1; }

.cta__email { display: block; padding-bottom: 20px; border-bottom: 1px solid var(--c-border); }
.cta__email:hover,
.cta__phone:hover { color: var(--c-text-muted); }

.cta__contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
}
.cta__hours { margin-top: 12px; color: var(--c-text); }
.cta__cal-btn { flex: none; }

/* --- Legal (baris copyright, ikut di dalam blok CTA) ---------------------- */
.legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
}
.legal__copy {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text);
}
.legal__social {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--c-text);
}
.legal__social a { display: flex; }

@media (max-width: 1280px) {
  .cta { padding-top: 120px; }
}

@media (max-width: 1024px) {
  .cta { --cta-gutter: 40px; }
}

@media (max-width: 768px) {
  .cta { padding-top: 80px; }
  .cta__form { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .cta__contact-row { flex-direction: column; align-items: flex-start; }
  .cta__cal-btn { width: 100%; }
  .legal { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 520px) {
  .cta { --cta-gutter: 20px; }
  .cta__email,
  .cta__phone { font-size: 20px; overflow-wrap: anywhere; }
  .cta__card { padding: 24px; }
  .cta__glow { width: 420px; height: 420px; }
}

/* ==========================================================================
   Halaman service — UX Optimization (Figma 45:2)
   Blok di bawah hanya dipakai halaman service, bukan homepage.
   ========================================================================== */

/* --- Hero service (artboard Frame 99.pdf) -------------------------------- */
/* Geometri hero — kartu 900px, kolom 780px, field glyph di belakang — datang
   dari css/layout.css lewat class page--shell, sama persis dengan home dan
   about. Yang tersisa di sini cuma jarak di dalam kartu.

   Artboard: ink logo berakhir y=250, badge mulai y=410 -> jarak 160px. Dua
   class supaya menang atas nilai default di .page--shell (layout.css dimuat
   belakangan, spesifisitasnya sama kalau cuma satu class). */
.page-service.page--shell { --hero-gap-logo: 156px; }

/* Judul hero service lebih panjang dari About, jadi pitch-nya tetap --lh-h1;
   yang disamakan cuma pola clamp supaya tidak jadi enam baris di layar kecil. */
.page-service .hero__title {
  font-size: clamp(40px, 5.9vw, 76px);
}

.service-hero__badge {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.service-hero__badge-icon { display: block; width: 60px; height: 60px; }
.service-hero__badge-text {
  font-size: var(--fs-lead);
  line-height: var(--lh-h2);
  font-weight: var(--fw-light);
  color: var(--c-ink);
}

/* Weight 300 mengikuti artboard — semua teks 24px pakai IBM Plex Sans Light. */
.service-hero__lead {
  margin-top: var(--space-8);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-light);
  color: var(--c-text);
}
/* Di artboard dua paragraf ini satu text node yang dipisah baris kosong, jadi
   jaraknya persis satu baris — bukan angka spacing. */
.service-hero__lead + .service-hero__lead { margin-top: calc(var(--fs-lead) * var(--lh-lead)); }

/* --- What we optimize ----------------------------------------------------- */
/* Bukan lagi kartu abu di grid 5 kolom: di artboard Frame 99 tiap item jadi
   satu baris di kolom 780px — thumbnail kiri, teks kanan, garis orange
   sebagai pemisah (warna yang sama dengan FAQ). */
ul.optimize,
ul.principles {
  margin: 0;
  padding: 0;
  list-style: none;
}

.optimize__item,
.principles__item {
  border-bottom: 1px solid var(--c-accent-orange);
}
.optimize__item:last-child,
.principles__item:last-child {
  border-bottom: none;
}

.optimize__body,
.principles__body {
  display: flex;
  gap: var(--space-8);
  padding-block: var(--space-6);
}

/* 140px = ukuran kotak thumbnail di artboard; --placeholder-size global 160px
   dipakai halaman lain, jadi di-override lokal. */
.optimize__thumb {
  flex: none;
  width: 140px;
  height: 140px;
}

.optimize__text .h3 { font-size: var(--fs-lead); margin-bottom: 4px; }
.optimize__text .body-1 { color: var(--c-text); }

.optimize__tags {
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  line-height: var(--lh-h2);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.optimize__tags-label { font-weight: var(--fw-bold); color: var(--c-ink); }

/* --- Framework ------------------------------------------------------------ */
/* Garis framework tetap abu tipis (bukan orange) — sesuai artboard. */
.framework {
  margin: 0;
  padding: 0;
  list-style: none;
}

.framework__row {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--c-accent-orange);
}
.framework__row:first-child { border-top: 1px solid var(--c-accent-orange); }
.framework__row:last-child { border-bottom: none; }

/* Grid ada di .panel__content supaya wrapper motion tidak memutus kolom.
   Tiga kolom di dalam 780px: nomor 60px, judul, lalu deskripsi mulai di x=368
   seperti di artboard. */
.framework__inner {
  display: grid;
  grid-template-columns: 60px minmax(0, 300px) minmax(0, 1fr);
  column-gap: var(--space-2);
  align-items: start;
}

.framework__head {
  display: contents;
}
.framework__num {
  color: var(--c-text-faint);
}
.framework__desc { color: var(--c-text); }

/* --- Approach (principles) ------------------------------------------------ */
.principles__icon {
  flex: none;
  display: block;
  width: 60px;
  height: 60px;
}
.principles__text { align-self: center; }
.principles__text .h3 { font-size: var(--fs-lead); margin-bottom: 4px; }
.principles__text .body-2 { color: var(--c-text-muted); }

/* Section FAQ punya jarak bawah sendiri sebelum field abu CTA mulai — pola
   yang sama dengan halaman About. */
.page-service .sec--service-faq { padding-bottom: var(--space-9); }

/* --- Working model cards (Product Design Partner) -------------------------- */
/* Di artboard Frame 121.pdf barisnya keluar dari kolom 780px dan melebar sampai
   40px dari tepi viewport. Pola full-bleed-nya sama dengan .page--shell
   .site-header di layout.css: lebar 100vw lalu ditarik balik ke tengah dengan
   margin negatif. Lebar kolomnya 2fr 1fr 2fr, persis rasio 606:301:606 px yang
   terukur di artboard. */
/* Selector ul.models (bukan .models) supaya menang atas reset `ul[class]` di
   reset.css yang me-nol-kan margin dan padding — pola yang sama dipakai
   ul.optimize di atas. */
ul.models {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: 40px;
  padding-inline: 40px;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 4px;
  list-style: none;
}

.models__card {
  display: flex;
  min-height: 500px;
}
.models__card--01 { background: var(--c-model-01); }
.models__card--02 { background: var(--c-model-02); }
.models__card--03 { background: var(--c-model-03); }

/* Kartu diisi lewat .panel__content — wrapper yang sama dipakai komponen panel
   lain supaya animasi reveal tetap jalan. Flex column dipasang di sini, bukan di
   .models__card, karena isinya duduk satu lapis lebih dalam. */
.models__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 32px 28px;
}

.models__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.models__num {
  font-size: 48px;
  font-weight: var(--fw-light);
  line-height: 1.1;
  margin-bottom: var(--space-6);
}

.models__title { margin-bottom: var(--space-4); }
.models__desc { color: var(--c-text); }

/* margin-top:auto mendorong blok "Best for" ke dasar kartu, jadi ketiganya
   sejajar walau panjang body-nya beda. */
.models__best {
  margin-top: auto;
  padding-top: var(--space-6);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.models__best-label { display: block; font-weight: var(--fw-bold); }

/* --- Comparison table (Product Design Partner vs Hiring) ------------------- */
/* Tabel lebih lebar dari kolom 780px di layar sempit, jadi ia menggeser sendiri
   di dalam wrapper — bukan bikin <body> ikut scroll horizontal. */
.vs-table__scroll {
  margin-top: 40px;
  overflow-x: auto;
}

.vs-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  text-align: left;
}

.vs-table th,
.vs-table td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--c-rule);
  font-size: 14px;
  line-height: 1.5;
  vertical-align: top;
}

.vs-table thead th {
  font-weight: var(--fw-bold);
  border-bottom-color: var(--c-ink);
}

.vs-table tbody th { font-weight: var(--fw-regular); color: var(--c-ink); }
.vs-table tbody td { color: var(--c-text-muted); }
/* Kolom terakhir = kolom Pixelzenic, sengaja dibuat kontras penuh. */
.vs-table tbody td:last-child { color: var(--c-ink); font-weight: var(--fw-bold); }

/* Sel kosong di pojok kiri-atas: labelnya hanya untuk screen reader. */
.vs-table__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vs-table__note { margin-top: var(--space-6); color: var(--c-text); }

/* --- Responsive service --------------------------------------------------- */
@media (max-width: 768px) {
  .optimize__body,
  .principles__body {
    flex-direction: column;
    gap: var(--space-5);
  }

  .framework__inner {
    grid-template-columns: 60px minmax(0, 1fr);
    row-gap: var(--space-4);
  }
  .framework__desc { grid-column: 2; }

  /* Tiga kolom jadi satu tumpukan; tinggi kartu ikut isinya lagi. */
  ul.models {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 20px;
  }
  .models__card { min-height: 0; }
  .models__inner { padding: 24px; }
}

/* Wrapper baris header. Halaman ber-class page--shell (home, about) memakainya
   sebagai kolom 780px — aturannya ada di layout.css. Di halaman yang masih
   memakai grid lama (case-studies, ux-optimization) wrapper ini dibuat
   transparan lewat display:contents, jadi logo dan tombol menu tetap jadi anak
   langsung .site-header dan layoutnya tidak berubah sedikit pun. */
.site-header__row { display: contents; }

/* --- FAQ (Figma 59:710) --------------------------------------------------- */
.faq { margin-top: var(--space-6); }

/* Garis orange, bukan abu — diambil dari artboard about-us.pdf (#FFA007) dan
   dipakai untuk FAQ di semua halaman supaya cuma ada satu style FAQ. */
.faq__item { border-top: 1px solid var(--c-accent-orange); }
.faq__item:last-child { border-bottom: 1px solid var(--c-accent-orange); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--c-accent-orange); outline-offset: 4px; }
.faq__q .h3 { font-weight: var(--fw-light); }

.faq__chevron {
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--c-text);
  transition: transform 240ms var(--ease-reveal);
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); }

.faq__a {
  padding-bottom: var(--space-5);
  font-size: var(--fs-body-1);
  line-height: var(--lh-lead);
  color: var(--c-text);
}
.faq__a p + p { margin-top: var(--space-4); }

/* Animasi buka-tutup. Butuh interpolate-size + ::details-content (Chrome 129+,
   Safari 18.4+). Browser tanpa dukungan membuka seketika — isinya tetap utuh. */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 320ms var(--ease-reveal), content-visibility 320ms allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__chevron { transition: none; }
  .faq__item::details-content { transition: none; }
}

/* --- Glyph strip — gradient dots field di bawah footer ---------------------
   Port CSS murni dari component GradientDots (React + framer-motion). Dua layer
   radial-gradient pertama = mask dot warna putih (lubang 1.5px di tengah tiap
   sel heksagonal); empat layer di bawahnya = gradient warna yang mengintip
   lewat lubang itu. Nol JS, nol dependency.
   Dulu cuma di index2.html (di-scope .page-home2), sekarang komponen global —
   dipakai lewat partial site/partials/glyph-strip.html di semua halaman. */
.glyph-strip {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: 200px;
  background: #ffffff;
  overflow: hidden;
}

.glyph-strip__dots {
  /* dot-size 8px, spacing 10px — sama dengan component asli.
     Durasi diperlambat: pan 72s (asli 30s), hue 28s (asli 6s). */
  --gd-dot: 8px;
  --gd-space: 10px;
  --gd-hex: 17.32px;          /* spacing * 1.732 — jarak heksagonal */
  --gd-bg: #ffffff;

  position: absolute;
  inset: 0;
  background-color: var(--gd-bg);
  background-image:
    radial-gradient(circle at 50% 50%, transparent 1.5px, var(--gd-bg) 0 var(--gd-dot), transparent var(--gd-dot)),
    radial-gradient(circle at 50% 50%, transparent 1.5px, var(--gd-bg) 0 var(--gd-dot), transparent var(--gd-dot)),
    radial-gradient(circle at 50% 50%, #f00, transparent 60%),
    radial-gradient(circle at 50% 50%, #ff0, transparent 60%),
    radial-gradient(circle at 50% 50%, #0f0, transparent 60%),
    radial-gradient(ellipse at 50% 50%, #00f, transparent 60%);
  background-size:
    var(--gd-space) var(--gd-hex),
    var(--gd-space) var(--gd-hex),
    200% 200%, 200% 200%, 200% 200%,
    200% var(--gd-hex);
  animation:
    gd-pan 72s linear infinite alternate,
    gd-hue 28s linear infinite;
}

/* Layer mask (dua posisi pertama) statis di kedua keyframe: grid dot diam,
   yang bergerak cuma gradient warnanya. `alternate` bikin loop bolak-balik
   supaya tidak ada lompatan saat animasi restart. */
@keyframes gd-pan {
  from {
    background-position:
      0 0, calc(var(--gd-space) / 2) calc(var(--gd-hex) / 2),
      800% 400%, 1000% -400%, -1200% -600%, 400% var(--gd-hex);
  }
  to {
    background-position:
      0 0, calc(var(--gd-space) / 2) calc(var(--gd-hex) / 2),
      0 0, 0 0, 0 0, 0 0;
  }
}

@keyframes gd-hue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .glyph-strip__dots { animation: none; }
}

/* --- Card scroll — kartu horizontal-scroll (UX Optimization "What we
   optimize", Product Design Partner "What we can do") ----------------------
   Ganti ul.optimize (list satu kolom) di dua section itu: kartu berjajar ke
   samping, dipisah garis vertikal, tiap kartu lebar tetap. Isinya sama persis
   dengan li.optimize__item lama (thumbnail, h3, body-1, tags) — cuma wrapper-
   nya yang baru. Scroll pakai overflow-x:auto biasa, pola yang sama dengan
   .vs-table__scroll — nol JS baru. */
.card-scroll {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: 40px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.card-scroll::-webkit-scrollbar {
  display: none;
}

ul.card-scroll__list {
  display: flex;
  width: max-content;
  min-width: 100%;
  margin: 0;
  gap: 4px;
  padding-inline-start: calc((100vw - min(var(--col), 100vw - var(--col-gutter) * 2)) / 2);
  padding-inline-end: 40px;
  list-style: none;
}

.card-scroll__item {
  position: relative;
  flex: none;
  width: 244px;
  height: 488px;
  overflow: hidden;
  background: var(--c-surface-tint);
  transition: background-color 0.2s ease;
}

.card-scroll__item:hover {
  background: var(--c-accent-orange);
}

.card-scroll__item pixel-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.card-scroll__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6) var(--space-6) var(--space-8);
  transition: color 0.2s ease;
}

.card-scroll__card .h3 { font-size: var(--fs-lead); margin-bottom: 4px; }
.card-scroll__card .body-1 { color: var(--c-text); transition: color 0.2s ease; }

.card-scroll__tags {
  margin-top: auto;
  padding-top: var(--space-5);
  font-size: var(--fs-small);
  line-height: var(--lh-h2);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-text-faint);
  transition: color 0.2s ease;
}
.card-scroll__tags-label { font-weight: var(--fw-bold); color: var(--c-ink); transition: color 0.2s ease; }

.card-scroll__item:hover .card-scroll__card,
.card-scroll__item:hover .card-scroll__card .body-1,
.card-scroll__item:hover .card-scroll__tags,
.card-scroll__item:hover .card-scroll__tags-label {
  color: #ffffff;
}


/* ==========================================================================
   Halaman About (Figma 67:2884)
   ========================================================================== */

/* --- Hero About ---------------------------------------------------------- */
/* Geometri hero (kartu 900px, kolom 780px, field glyph di belakang) datang dari
   css/layout.css lewat class page--shell — sama persis dengan home. Yang
   tersisa di sini cuma jarak antar-teks di dalam kartu.

   Artboard about-us.pdf: eyebrow -> H1 = 20px, H1 -> paragraf pertama = 40px.
   Kartu hero About tidak punya tombol seperti home, jadi tepi bawahnya butuh
   padding sendiri supaya paragraf terakhir tidak menempel di garis kartu. */
/* Jarak logo -> eyebrow di About jauh lebih lapang dari home (150px vs 50px);
   angkanya diambil dari artboard: ink logo berakhir y=250, eyebrow mulai y=415.
   Dua class supaya menang atas nilai default di .page--shell (layout.css dimuat
   belakangan, spesifisitasnya sama kalau cuma satu class). */
.page-about.page--shell { --hero-gap-logo: 150px; }

/* Artboard: pitch baris H1 76px pada font-size 76px, jadi line-height 1.0 —
   lebih rapat dari --lh-h1 (1.1) yang dipakai heading lain.
   clamp memakai pola yang sama dengan hero home: nilainya mentok di 76px mulai
   viewport 1288px ke atas (jadi desktop persis artboard) dan menyusut sendiri
   di bawah itu, supaya judul lima kata ini tidak jadi lima baris di layar kecil. */
.page-about .hero__title {
  margin-top: 20px;
  font-size: clamp(40px, 5.9vw, 76px);
  line-height: 1;
}

/* Jarak logo -> eyebrow 150px hanya masuk akal di layar lebar; di layar sempit
   ia jadi ruang kosong yang mahal, jadi disusutkan bertahap sampai 50px —
   angka yang sama dipakai hero home. */
@media (max-width: 1024px) {
  .page-about.page--shell { --hero-gap-logo: 90px; }
}

/* Di bawah 768px judul section ikut mengecil, angka yang sama dipakai home
   untuk .problem__text / .why__heading. */
@media (max-width: 768px) {
  .page-about.page--shell { --hero-gap-logo: 50px; }
  .page-about .sec--about-philosophy .h2 { font-size: 32px; }
}

/* Weight 300 diambil dari Figma (IBM Plex Sans Light untuk semua teks 24px). */
.about-hero__lead {
  margin-top: 40px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-light);
  color: var(--c-text);
}
/* Di Figma dua paragraf ini satu text node yang dipisah baris kosong, jadi
   jaraknya persis satu baris — bukan angka spacing. */
.about-hero__lead + .about-hero__lead { margin-top: calc(var(--fs-lead) * var(--lh-lead)); }

/* --- One philosophy ------------------------------------------------------ */
/* Jarak atas section diurus --sec-pad-top di layout.css (160px), sama dengan
   home dan sama dengan jarak di artboard. */

/* Section FAQ punya jarak bawah sendiri sebelum field abu CTA mulai: di
   artboard garis FAQ terakhir di y=2856 dan field abu mulai di y=2912. */
.page-about .sec--about-faq { padding-bottom: var(--space-9); }

.about-philosophy__lead {
  margin-top: 20px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-light);
  color: var(--c-text);
}

/* Chip audience. Margin negatif -1px bikin garis antar-chip kolaps jadi satu
   garis; di Figma frame-nya memang bersinggungan tanpa jarak.
   Padding kanan 20px sengaja tidak memakai token (--space-5 16px / --space-6
   24px keduanya meleset): angkanya diambil apa adanya dari frame Figma 67:3258,
   dan sisi kanan memang lebih lapang karena kiri sudah punya ruang dari ikon. */
/* Selector-nya ul.audience, bukan .audience: reset.css punya
   `ul[class] { margin: 0; padding: 0 }` yang spesifisitasnya lebih tinggi dari
   satu class dan mematikan margin-top di bawah ini. */
ul.audience {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-left: 1px;
  padding-top: 1px;
}

.audience__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 20px var(--space-4) var(--space-4);
  margin: -1px 0 0 -1px;
  border: 1px solid var(--c-accent-orange);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-light);
  color: var(--c-ink);
}

/* object-fit dipasang karena founders.svg keluar dari Figma dengan rasio
   31.33x30, bukan 32x32 seperti empat ikon lain — tanpa ini gambarnya melar. */
.audience__icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* --- Stack (baris icon tools, section baru di About) ----------------------- */
ul.stack__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-7);
  margin-top: 20px;
}

.stack__icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* --- Case Studies -------------------------------------------------------- */
/* Dua section ini memakai .section--dark supaya aturan "di atas gelap" yang
   sudah ada ikut terpakai — terutama blok wipe yang harus putih
   (.section--dark .wipe__w::after) dan warna .eyebrow / .h2.
   Yang tidak dipakai adalah geometrinya: .section--dark membawa margin 8px /
   45px / 38px dan padding 109px yang khusus untuk ritme "Selected work" di
   home, sementara di halaman ini blok hitamnya full-bleed dan menyatu dari
   hero sampai kartu terakhir. */
.section--case-hero,
.section--case-list {
  margin: 0;
}

.section--case-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-ink);
  /* Diukur dari frame design (artboard 1600): label mulai 120px di bawah header,
     dan H1 berjarak 64px ke kartu pertama. 120px sama dengan padding-top
     .section--hero di home; 64px tidak punya token — --space-9 (56) dan
     --space-10 (80) dua-duanya meleset. */
  padding-block: 120px 64px;
}

/* Grid duduk di atas canvas ASCII supaya teks tetap bisa diseleksi. */
.section--case-hero .grid {
  position: relative;
  z-index: 1;
}

.section--case-hero .h1 { color: var(--c-on-dark); }

/* Nilai identik dengan .about-hero__label — hanya warnanya dibalik ke terang.
   60px = gap frame design; tidak ada token di antara --space-9 (56) dan
   --space-10 (80). */
.case-hero__label {
  font-size: var(--fs-lead);
  line-height: var(--lh-h2);
  font-weight: var(--fw-light);
  color: var(--c-on-dark);
  margin-bottom: 60px;
}

/* padding 0 atas-bawah: grid kartu menyambung tanpa jahitan dengan hero, dan
   di design blok hitamnya berhenti tepat di garis bawah kartu terakhir. */
.section--case-list {
  background: var(--c-ink);
  padding-block: 0;
}

.case__row { align-items: stretch; }
.case__row + .case__row { margin-top: var(--gutter); }

/* Baris pertama sengaja lebih tinggi dari min-height global .work-card (530px).
   800px diukur dari frame design — ruang kosong antara deskripsi dan blok meta
   memang bagian dari komposisinya, bukan sisa layout. */
.case__row--featured .work-card { min-height: 800px; }

/* Garis 1px antar kartu ada di design tapi tidak dipakai section "Selected
   work" di home, jadi border-nya dikunci ke section ini saja. */
.section--case-list .work-card {
  border: 1px solid var(--c-border-dark);
}

/* Sel kosong dibiarkan transparan — yang terbaca hanya garisnya, seperti
   design. Kartu berisi teks tetap memakai --c-surface-dark dari components. */
.section--case-list .work-card--empty {
  background: transparent;
}

/* Design System Optimization page: thumbnail 100x100px (override 140px global). */
.page-ds-optimization .optimize__thumb {
  width: 100px;
  height: 100px;
}