/* ailua.co | style.css
 * Sistem proporsi (acuan orgnzm.studio): body font-size 0.833vw, jadi 1em = 12px di layar 1440px.
 * Semua tipe dan spasi ditulis dalam em agar seluruh halaman menskala proporsional; lebar kolom memakai % / fr.
 * Penamaan kelas mengikuti Client-First (Webflow): section_*, padding-global, container-large, heading-style-*,
 * text-style-*, [komponen]_[elemen], modifier is-*.
 * Font (semua gratis, lisensi OFL): Inter Tight (teks), Geist Mono (label), Poppins 800 (hanya logo).
 * Token gerak (--ease, --dur-*) harus sejalan dengan token T di motion.js.
 */

/* ---------- Token ---------- */
:root {
  --color-bg: #efeeea;
  --color-panel: #e4e2dd;
  --color-surface: #f7f6f3;
  --color-ink: #141414;
  --color-text: #2e2e2e;
  --color-muted: #85837d;
  --color-line: rgba(20, 20, 20, .16);
  --color-dark: #121212;
  --color-dark-panel: #1c1c1b;
  --color-dark-text: #f2f1ed;
  --color-dark-muted: #8d8b85;
  --color-dark-line: rgba(255, 255, 255, .14);
  --color-accent: #ff3b00;
  --color-accent-tone: rgba(20, 20, 20, .28);   /* teks senada di atas blok aksen */

  --font-text: "Inter Tight", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-brand: "Poppins", system-ui, sans-serif;   /* hanya logo */

  --ease: cubic-bezier(.165, .84, .44, 1);           /* power3.out */
  --ease-in-out: cubic-bezier(.455, .03, .515, .955); /* power2.inOut */
  --dur-fast: .3s;
  --dur-base: .6s;

  /* Satuan dasar = font-size body. Spasi dihitung dari --u (bukan em) supaya tidak ikut membesar
     di elemen yang font-nya besar (mis. margin 5em pada wordmark 123px = 615px). */
  --u: max(10px, .833vw);
  --s-1: calc(.625 * var(--u));
  --s-2: calc(1.25 * var(--u));
  --s-3: calc(1.875 * var(--u));
  --s-4: calc(2.5 * var(--u));
  --s-5: calc(5 * var(--u));
  --s-6: calc(7.5 * var(--u));
  --s-7: calc(12.5 * var(--u));
  --gutter: var(--s-4);
  --radius-sm: calc(.3125 * var(--u));
  --radius-md: calc(.625 * var(--u));
  --col-gap: calc(1.25 * var(--u));
  --menu-t: calc(3.75 * var(--u));   /* ukuran tombol hamburger */
  --contact-w: calc(13.5 * var(--u));   /* lebar tombol Contact us */
  --dock-gap: calc(.625 * var(--u));   /* jarak tombol Contact us ke hamburger */
}
@media (max-width: 767px) { :root { --u: clamp(11px, 3.2vw, 14px); } }

/* ---------- Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }   /* seperti acuan: scrollbar disembunyikan, lebar konten penuh */
/* Browser mobile melebarkan viewport (lalu menata ulang halaman lebih lebar dari layar) bila ada satu elemen
   yang keluar sisi kanan, mis. jalur horizontal Process. overflow-x di html mencegahnya; clip tidak membuat area scroll */
html { overflow-x: clip; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--u);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; font-size: 1.25em; line-height: 1.3; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--color-accent); color: var(--color-ink); }
:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 3px; }

.skip-link { position: fixed; left: var(--gutter); top: -6em; z-index: 200; padding: 1em 1.25em; background: var(--color-ink); color: #fff; border-radius: var(--radius-sm); font: 400 1em var(--font-mono); text-transform: uppercase; }
.skip-link:focus { top: var(--gutter); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Layout ---------- */
.padding-global { padding-inline: var(--gutter); }
.container-large { width: 100%; margin-inline: auto; }
.padding-section-large { padding-block: var(--s-7) var(--s-6); }
.padding-section-medium { padding-block: var(--s-5); }
.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: initial; } }

/* Grid 12 kolom: label di kolom 1-3, isi mulai kolom 4 */
.split_layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-4); align-items: start; }
.split_layout > :first-child { grid-column: 1 / 6; }
.split_layout > :last-child { grid-column: 7 / 13; }
.split_layout.is-reverse > :first-child { grid-column: 1 / 4; }
.split_layout.is-reverse > :last-child { grid-column: 4 / 13; }
.is-sticky { position: sticky; top: 8.75em; }
@media (max-width: 767px) {
  .split_layout > :first-child, .split_layout > :last-child,
  .split_layout.is-reverse > :first-child, .split_layout.is-reverse > :last-child { grid-column: 1 / -1; }
  .is-sticky { position: static; }
}

/* ---------- Tipografi ---------- */
.heading-style-hero,
.heading-style-display { font-size: 6.25em; font-weight: 500; line-height: .92; letter-spacing: -.035em; color: var(--color-ink); text-wrap: balance; }
.heading-style-h2 { font-size: 4.375em; font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--color-ink); text-wrap: balance; }
.heading-style-h3 { font-size: 4.375em; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.heading-style-h4 { font-size: 2.5em; font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--color-ink); }
.heading-style-statement { font-size: 4.375em; font-weight: 500; line-height: 1.02; letter-spacing: -.03em; color: var(--color-ink); text-indent: 25%; text-wrap: pretty; }
.heading-style-statement.is-small { font-size: 2.5em; line-height: 1.1; text-indent: 0; }
/* Baris pertama judul menjorok lewat elemen spasi (bukan text-indent, yang diwarisi tiap kata hasil SplitText) */
[data-anim] div { text-indent: 0; }
.heading-indent { display: inline-block; width: 25%; }
@media (max-width: 767px) { .heading-indent { display: none; } }
.text-size-medium { font-size: 1.25em; line-height: 1.3; }
.text-style-mono { font: 400 1em/1.2 var(--font-mono); letter-spacing: -.02em; text-transform: uppercase; }
p.text-style-mono { font-size: 1em; }
.text-color-muted { color: var(--color-muted); }
.text-color-accent { color: var(--color-accent); }

.wordmark { font-family: var(--font-brand); font-weight: 800; text-transform: lowercase; letter-spacing: -.05em; line-height: 1; font-size: 2em; color: var(--color-ink); }

.section-header { display: flex; justify-content: space-between; gap: var(--s-2); padding-bottom: var(--s-2); color: var(--color-accent); }
.divider { border: 0; height: 1px; background: var(--color-ink); margin: 0 0 var(--s-5); }

/* ---------- Tombol & tautan ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 1.05em 1.4em; border-radius: var(--radius-sm); border: 1px solid var(--color-ink);
  background: var(--color-ink); color: var(--color-bg);
  font: 400 1em/1 var(--font-mono); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.button::after { content: ""; width: .55em; height: .55em; background: var(--color-accent); }
.button:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-ink); }
.button:hover::after { background: var(--color-ink); }
.button.is-small { padding: .85em 1.1em; }
.button.is-secondary { background: transparent; color: var(--color-ink); }
.button.is-secondary:hover { background: var(--color-ink); color: var(--color-bg); }
.button-group { display: flex; flex-wrap: wrap; gap: var(--s-1); }

.text-link {
  display: inline-flex; gap: .4em; font: 400 1em/1 var(--font-mono); letter-spacing: -.02em; text-transform: uppercase;
  padding-bottom: .35em; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: color var(--dur-fast) var(--ease), background-size var(--dur-base) var(--ease);
}
.text-link:hover { color: var(--color-accent); background-size: 0 1px; background-position: 100% 100%; }
p .text-link { font-size: .8em; }

.button.is-large { padding: 1.45em 1.9em; gap: 1.6em; }
.button.is-large::after { width: .7em; height: .7em; }
.section_cta .button.is-secondary { border-color: var(--color-ink); }
.section_cta .button:not(.is-secondary):hover { background: var(--color-bg); border-color: var(--color-bg); color: var(--color-ink); }
.section_cta .button:not(.is-secondary):hover::after { background: var(--color-accent); }

/* ---------- Navigasi ---------- */
.nav_component {
  position: fixed; top: var(--s-2); left: var(--s-2); right: var(--s-2); z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-2); border-radius: var(--radius-md); border: 1px solid transparent;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), backdrop-filter var(--dur-base) var(--ease);
}
.nav_component.is-scrolled {
  background: rgba(239, 238, 234, .78); border-color: var(--color-line);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.nav_right { display: flex; align-items: center; gap: var(--s-2); }
.nav_clock { display: none; color: var(--color-muted); }
@media (min-width: 1360px) { .nav_clock { display: inline; } }

/* ---------- Hero beranda ---------- */
.section_hero { position: relative; min-height: 100svh; display: flex; overflow: hidden; }
.section_hero > .padding-global { display: flex; flex: 1; position: relative; z-index: 1; }
.hero_layout { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5); padding-top: 8.75em; padding-bottom: var(--s-4); }
.hero_layout .heading-style-hero { max-width: 15em; }
.hero_bottom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-3); align-items: end; }
.hero_info {
  grid-column: 1 / 4; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5);
  min-height: 15em; padding: var(--s-2); border-radius: var(--radius-sm); background: var(--color-panel);
}
.hero_info-row { display: flex; justify-content: space-between; gap: var(--s-2); }
.hero_info .text-color-muted { color: var(--color-muted); }
.hero_lead { grid-column: 5 / 9; text-align: center; color: var(--color-ink); }
.hero_lead p { font-size: 1.25em; line-height: 1.25; max-width: 30em; margin-inline: auto; }
.button-group.is-center { justify-content: center; margin-top: var(--s-3); }
.hero_card { grid-column: 10 / 13; justify-self: end; width: 100%; max-width: 23em; }
.hero_cta { display: grid; gap: var(--s-2); }
.status-dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: #1fbf6b; margin-right: .6em; }
/* Bola oranye: .hero_orb = posisi + animasi scroll (GSAP), .orb_body = bentuk slime (orb.js) */
/* Dipusatkan lewat margin, BUKAN translate: GSAP (animasi scroll yPercent) menimpa translate sumbu Y,
   sehingga bola dulu turun setengah ukurannya. Beranda: top + --orb/2 mempertahankan posisi yang sudah ada */
.hero_orb {
  --orb: 34em;
  position: absolute; z-index: 0; left: 50%; top: calc(52% + var(--orb) / 2); width: var(--orb); aspect-ratio: 1;
  margin: calc(var(--orb) / -2) 0 0 calc(var(--orb) / -2); pointer-events: none;
}
.orb_body {
  position: absolute; inset: 0; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle at 60% 65%, #ff3b00, rgba(255, 59, 0, .55) 38%, rgba(255, 59, 0, 0) 68%);
  filter: blur(var(--orb-blur, .6em)) saturate(var(--orb-sat, 1));   /* makin kencang saat terhimpit (orb.js) */
}
/* Inti lebih gelap di sisi bawah-kanan dan kilau putih di kiri-atas: kesan bola 3D. Kilau bergeser lewat --hx/--hy */
.orb_body::before, .orb_body::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.orb_body::before { background: radial-gradient(circle at 66% 72%, rgba(170, 32, 0, .42), rgba(170, 32, 0, 0) 40%); }
.orb_body::after {
  background: radial-gradient(circle at calc(35% + var(--hx, 0%)) calc(30% + var(--hy, 0%)), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 32%);
}
/* Hero halaman dalam: bola di kanan-atas, mengisi ruang kosong di atas judul */
.section_page-hero { position: relative; overflow: hidden; }
/* Hero yang punya bola: setinggi satu layar penuh, jadi batas bola = batas layar */
.section_page-hero:has(.hero_orb) { min-height: 100svh; }
.section_page-hero > .padding-global { position: relative; z-index: 1; }
/* Bola di tengah (simetris, seperti beranda), di ruang kosong antara garis atas dan judul */
.hero_orb.is-page { --orb: 30em; left: 50%; top: 48%; }
.mini-card {
  display: grid; grid-template-columns: 7.5em 1fr; gap: var(--s-2); padding: var(--s-1); border-radius: var(--radius-sm);
  background: var(--color-surface); border: 1px solid rgba(20, 20, 20, .07);   /* outline tipis, tidak menonjol */
  transition: border-color var(--dur-base) var(--ease);
}
.mini-card:hover { border-color: rgba(20, 20, 20, .35); }
.mini-card_thumb { aspect-ratio: 1; border-radius: .2em; background: radial-gradient(120% 90% at 30% 20%, #ece9e2, #cfcbc2); }
.mini-card_body { display: flex; flex-direction: column; justify-content: space-between; padding-block: .25em; }
.mini-card_title { font-size: 1.25em; font-weight: 500; color: var(--color-ink); }
.mini-card_meta { font-size: 1em; color: var(--color-muted); }

/* Hero halaman dalam */
.section_page-hero { min-height: 82svh; display: flex; }
.section_page-hero.is-short { min-height: 62svh; }
.section_page-hero > .padding-global { display: flex; flex: 1; }
.page-hero_layout { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-4); padding-top: 8.75em; padding-bottom: var(--s-4); }
.page-hero_layout .heading-style-hero { max-width: 15em; }
.hero_meta { display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; padding-bottom: var(--s-2); border-bottom: 1px solid var(--color-ink); margin-bottom: auto; color: var(--color-accent); }
.page-hero_layout .hero_bottom .hero_lead { grid-column: 4 / 9; text-align: left; color: var(--color-text); }
.page-hero_layout .hero_bottom .hero_cta { grid-column: 10 / 13; justify-items: end; }
.hero_scroll { display: none; }

@media (max-width: 767px) {
  .hero_bottom > * { grid-column: 1 / -1 !important; }
  .hero_lead { text-align: left !important; }
  .hero_info { min-height: 0; gap: var(--s-3); }
  .hero_card { justify-self: start; }
  .page-hero_layout .hero_bottom .hero_cta { justify-items: start; }
}

/* ---------- Statistik ---------- */
.stats_list { border-top: 1px solid var(--color-ink); margin-top: var(--s-6); }
.stats_row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; padding-block: var(--s-2) var(--s-3); border-bottom: 1px solid var(--color-line); }
.stats_index { grid-column: 1 / 2; color: var(--color-accent); }
.stats_number { grid-column: 3 / 7; font-size: 11.25em; font-weight: 400; line-height: .78; letter-spacing: -.04em; color: var(--color-ink); }
.stats_label { grid-column: 7 / 9; color: var(--color-accent); padding-top: .3em; }
.stats_desc { grid-column: 10 / 13; max-width: 20em; padding-top: .2em; }
@media (max-width: 767px) {
  /* Baris 1: nomor (kiri) + label (kanan), baris 2: angka besar, baris 3: deskripsi */
  .stats_row { grid-template-columns: auto 1fr; row-gap: var(--s-2); }
  .stats_index { grid-column: 1; grid-row: 1; }
  .stats_label { grid-column: 2; grid-row: 1; justify-self: end; padding-top: 0; text-align: right; }
  .stats_number { grid-column: 1 / -1; grid-row: 2; font-size: 7em; }
  .stats_desc { grid-column: 1 / -1; grid-row: 3; max-width: none; }
}

/* ---------- Pill industri ---------- */
.pill_cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: .14em .1em; max-width: 72em; margin-inline: auto; }
.pill {
  font-size: 4.375em; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--color-ink);
  padding: .04em .38em .1em; border: 1px solid var(--color-ink); border-radius: 999px;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.pill:hover { background: var(--color-accent); border-color: var(--color-accent); }
.pill_caption { text-align: center; color: var(--color-accent); margin-bottom: var(--s-4); }
@media (max-width: 767px) { .pill { font-size: 2.4em; } }

/* ---------- Masalah ---------- */
.problem_list { border-top: 1px solid var(--color-ink); }
.problem_item { display: grid; grid-template-columns: 4em 1fr; gap: var(--s-2); padding-block: var(--s-2) var(--s-3); border-bottom: 1px solid var(--color-line); }
.problem_item .text-style-mono { color: var(--color-accent); padding-top: .4em; }
.problem_item p { font-size: 2.5em; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; color: var(--color-ink); }

/* ---------- Daftar layanan (juga dipakai untuk indeks karya) ---------- */
.services_heading { margin-bottom: var(--s-5); }
.services_list { border-top: 1px solid var(--color-ink); }
.service_row {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center;
  padding-block: var(--s-2); border-bottom: 1px solid var(--color-line);
}
.service_index { grid-column: 1 / 4; color: var(--color-accent); align-self: start; padding-top: .6em; }
.service_title { grid-column: 4 / 10; font-size: 6.25em; line-height: .95; color: var(--color-accent-tone); transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.service_desc { grid-column: 10 / 12; color: var(--color-muted); transition: color var(--dur-base) var(--ease); }
.service_arrow {
  grid-column: 12 / 13; justify-self: end; display: grid; place-items: center; width: 3.75em; height: 3.75em;
  border-radius: var(--radius-sm); border: 1px solid var(--color-line); font: 400 1.25em var(--font-mono);
  transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
@media (hover: hover) {
  .service_row:hover .service_title { color: var(--color-ink); transform: translateX(.08em); }
  .service_row:hover .service_desc { color: var(--color-ink); }
  .service_row:hover .service_arrow { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg); transform: rotate(45deg); }
}
@media (max-width: 767px) {
  .service_row { grid-template-columns: 1fr auto; row-gap: var(--s-1); }
  .service_index { grid-column: 1 / -1; padding-top: 0; }
  .service_title { grid-column: 1; font-size: 3.4em; color: var(--color-ink); }
  .service_desc { grid-column: 1 / -1; }
  .service_arrow { grid-column: 2; grid-row: 2; }
}

/* ---------- Tema ---------- */
.theme-accent { background: var(--color-accent); color: var(--color-ink); }
/* Seleksi teks di section oranye: latar terang + teks gelap (seleksi oranye bawaan tidak terlihat di atas oranye) */
.theme-accent ::selection, .section_cta ::selection { background: var(--color-bg); color: var(--color-ink); -webkit-text-fill-color: var(--color-ink); }
.theme-accent .section-header, .theme-accent .service_index { color: var(--color-ink); }
.theme-accent .divider { background: var(--color-ink); }
.theme-accent .services_list, .theme-accent .service_row { border-color: rgba(20, 20, 20, .25); }
.theme-accent .service_desc { color: rgba(20, 20, 20, .55); }
.theme-accent .service_arrow { border-color: rgba(20, 20, 20, .3); }

.theme-dark { background: var(--color-dark); color: var(--color-dark-text); }
.theme-dark p { color: var(--color-dark-muted); }
.theme-dark .heading-style-h2, .theme-dark .heading-style-display, .theme-dark .heading-style-h4, .theme-dark .heading-style-hero { color: var(--color-dark-text); }
.theme-dark .divider { background: var(--color-dark-text); }
.theme-dark .text-link { color: var(--color-dark-text); }
.theme-dark .service_arrow { border-color: var(--color-dark-line); }

/* ---------- Cara kerja ---------- */
.section_process { overflow: hidden; }
.process_inner { padding-block: var(--s-5); }
.process_head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-2); margin-bottom: var(--s-4); }
.process_track { display: grid; gap: var(--s-1); }
.process_card {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3); border-radius: var(--radius-sm); background: var(--color-dark-panel); border: 1px solid var(--color-dark-line);
  transition: opacity var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.process_card p { margin-top: var(--s-1); max-width: 22em; }
.process_num { font-size: 6.25em; font-weight: 400; line-height: .8; letter-spacing: -.04em; color: var(--color-accent); }
.process_result { margin-top: var(--s-2) !important; color: var(--color-accent) !important; }
.process_progress { display: none; }
@media (min-width: 768px) { .process_track { grid-template-columns: 1fr 1fr; } .process_card { min-height: 26em; } }

.section_process.is-horizontal .process_inner { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 7.5em var(--s-4); }
.section_process.is-horizontal .process_track { display: flex; gap: var(--s-1); width: max-content; padding-right: var(--gutter); }
.section_process.is-horizontal .process_card { width: 30em; height: 36em; min-height: 0; opacity: .4; }
.section_process.is-horizontal .process_card.is-active { opacity: 1; border-color: var(--color-accent); }
.section_process.is-horizontal .process_progress { display: block; height: 1px; margin-top: var(--s-4); background: var(--color-dark-line); }
.process_progress-bar { display: block; height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }

/* ---------- Karya ---------- */
.work_head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-2); margin-bottom: var(--s-4); }
.work_grid { display: grid; gap: var(--s-4) var(--col-gap); }
.work_link { display: grid; gap: var(--s-2); }
.work_media { position: relative; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 1 / 1; background: var(--color-panel); }
.work_media-inner {
  position: absolute; inset: -8% 0; display: grid; place-items: center; color: var(--color-muted);
  background: radial-gradient(120% 90% at 30% 20%, #ece9e2, #d3cfc6); transition: scale 1.2s var(--ease);
}
.work_meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.work_meta .heading-style-h4 { font-size: 1.875em; }
.work_meta .text-style-mono { color: var(--color-accent); }
.work_desc { color: var(--color-muted); max-width: 32em; }
@media (hover: hover) { .work_link:hover .work_media-inner { scale: 1.04; } }
@media (min-width: 768px) {
  .work_grid { grid-template-columns: 1fr 1fr; }
  .work_card.is-large { grid-column: 1 / -1; }
  .work_card.is-large .work_media { aspect-ratio: 16 / 8; }
}

/* ---------- Kenapa / pendekatan ---------- */
.why_list { border-top: 1px solid var(--color-ink); }
.why_item { display: grid; grid-template-columns: 4em 1fr; gap: var(--s-1) var(--s-2); padding-block: var(--s-2) var(--s-3); border-bottom: 1px solid var(--color-line); }
.why_item .text-style-mono { grid-row: span 2; color: var(--color-accent); padding-top: .4em; }
.why_item .heading-style-h4 { font-size: 2.5em; }
.why_item p { color: var(--color-muted); max-width: 30em; }

/* ---------- Harga ---------- */
.pricing_lead { margin-top: var(--s-3); max-width: 28em; color: var(--color-muted); }
.pricing_rows { border-top: 1px solid var(--color-ink); }
.pricing_row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; padding-block: var(--s-2) var(--s-3); border-bottom: 1px solid var(--color-line); }
.pricing_row .text-style-mono { color: var(--color-accent); }
.pricing_value { font-size: 3.125em; font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--color-ink); }
.pricing_stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-1); margin: var(--s-3) 0; }
.pricing_stages li { display: grid; gap: var(--s-4); padding: var(--s-2); border-radius: var(--radius-sm); background: var(--color-panel); font-size: 1.25em; font-weight: 500; color: var(--color-ink); }
.pricing_stages .text-style-mono { color: var(--color-accent); font-size: .8em; }

.pricing_grid { display: grid; gap: var(--s-1); }
.pricing_card {
  display: flex; flex-direction: column; gap: var(--s-3); min-height: 32em; padding: var(--s-3);
  border-radius: var(--radius-sm); background: var(--color-panel);
}
.pricing_card > .text-style-mono { color: var(--color-accent); }
.pricing_card .text-link { margin-top: auto; align-self: flex-start; }
.pricing_card.is-dark { background: var(--color-dark); color: var(--color-dark-text); }
.pricing_card.is-dark .pricing_value { color: var(--color-dark-text); }
.pricing_list { display: grid; gap: var(--s-1); }
.pricing_list li { font-size: 1.25em; padding-top: var(--s-1); border-top: 1px solid var(--color-line); color: var(--color-muted); }
.pricing_card.is-dark .pricing_list li { border-color: var(--color-dark-line); color: var(--color-dark-muted); }
.pricing_note { margin-top: var(--s-3); }
@media (min-width: 768px) { .pricing_grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pricing_grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- FAQ ---------- */
.faq_list { border-top: 1px solid var(--color-ink); }
.faq_item { border-bottom: 1px solid var(--color-line); }
.faq_question {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
  padding-block: var(--s-2); font-size: 1.875em; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; color: var(--color-ink);
  transition: color var(--dur-fast) var(--ease);
}
.faq_question::-webkit-details-marker { display: none; }
.faq_question:hover { color: var(--color-accent); }
.faq_icon { position: relative; flex: none; width: 1.3em; height: 1.3em; border-radius: var(--radius-sm); border: 1px solid var(--color-line); transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.faq_icon::before, .faq_icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: .42em; height: 1px; background: currentColor; translate: -50% -50%; }
.faq_icon::after { rotate: 90deg; }
.faq_item[open] .faq_icon { transform: rotate(45deg); background: var(--color-accent); border-color: var(--color-accent); color: var(--color-ink); }
.faq_answer { overflow: hidden; }
.faq_answer p { padding-bottom: var(--s-3); color: var(--color-muted); max-width: 36em; }

/* ---------- CTA ---------- */
.section_cta {
  position: relative; overflow: hidden; color: var(--color-ink);
  background:
    radial-gradient(60% 80% at 80% 20%, #ff7a3d, rgba(255, 122, 61, 0) 60%),
    radial-gradient(70% 90% at 15% 90%, #c22c00, rgba(194, 44, 0, 0) 60%),
    var(--color-accent);
}
/* Kartu formulir: kiri judul + formulir, kanan kolom kontak dipisah garis tegak setinggi section */
.section_cta { --cta-ink: #fff; --cta-line: rgba(255, 255, 255, .35); color: var(--cta-ink); }   /* teks putih di blok oranye */
.cta_layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cta_info {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5);
  padding-block: var(--s-6); padding-right: var(--s-5); border-right: 1px solid var(--cta-line);
}
.cta_label { color: var(--cta-ink); margin-bottom: var(--s-3); }
.cta_title { max-width: 10em; font-size: calc(5 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: -.035em; color: var(--cta-ink); }
.cta_form {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--u); align-content: center;
  padding-block: var(--s-6); padding-left: var(--s-5);
}
.cta_form .is-full { grid-column: 1 / -1; }

/* Kolom isian: label di dalam kotak, naik mengecil saat diisi/difokus (tanpa JS, via :placeholder-shown) */
.cta_field { position: relative; display: block; }
.cta_field input, .cta_field select, .cta_field textarea, .cta_field .select_trigger {
  display: block; width: 100%; height: calc(4.5 * var(--u)); padding: calc(1.7 * var(--u)) calc(1.4 * var(--u)) calc(.45 * var(--u));
  border: 1px solid var(--cta-line); border-radius: calc(.5 * var(--u)); background: rgba(255, 255, 255, .04);
  font-size: calc(1.25 * var(--u)); color: var(--cta-ink); appearance: none; -webkit-appearance: none;
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.cta_field textarea { height: calc(9 * var(--u)); min-height: calc(9 * var(--u)); padding-top: calc(2.4 * var(--u)); resize: vertical; line-height: 1.3; }
.cta_field select { padding-right: calc(3.5 * var(--u)); cursor: pointer; }
.cta_field option { color: var(--color-ink); background: #fff; }   /* cadangan bila select.js tidak jalan */
.cta_field:hover :is(input, select, textarea, .select_trigger) { border-color: rgba(255, 255, 255, .45); }
.cta_field :is(input, select, textarea, .select_trigger):focus,
.cta_field.is-open .select_trigger { outline: none; border-color: var(--cta-ink); background: rgba(255, 255, 255, .1); }
.cta_field :is(input, textarea, select):user-invalid,
.cta_field.is-invalid .select_trigger { border-color: var(--cta-ink); border-style: dashed; }

/* Autofill browser: tanpa latar biru muda / teks gelap bawaan, tetap mengikuti gaya kotak.
   Latar autofill ditunda sangat lama lewat transition (satu-satunya cara yang andal di Chrome/Brave/Safari). */
.cta_field input:is(:-webkit-autofill, :autofill),
.cta_field input:is(:-webkit-autofill, :autofill):is(:hover, :focus) {
  -webkit-text-fill-color: var(--cta-ink); caret-color: var(--cta-ink);
  transition: background-color 600000s 0s, color 600000s 0s, border-color .4s var(--ease);
}
.form_field input:is(:-webkit-autofill, :autofill),
.form_field input:is(:-webkit-autofill, :autofill):is(:hover, :focus) {
  -webkit-text-fill-color: var(--color-ink); caret-color: var(--color-ink);
  transition: background-color 600000s 0s, color 600000s 0s, border-color var(--dur-fast) var(--ease);
}
.cta_field > span {
  position: absolute; left: calc(1.4 * var(--u)); top: 50%; transform: translateY(-50%); transform-origin: 0 50%;
  font-size: calc(1.25 * var(--u)); line-height: 1; color: rgba(255, 255, 255, .72); pointer-events: none;
  transition: transform .45s var(--ease), top .45s var(--ease), color .45s var(--ease);
}
.cta_field.is-area > span { top: calc(1.6 * var(--u)); transform: none; }
.cta_field :is(input, textarea):is(:focus, :not(:placeholder-shown), :-webkit-autofill) + span,
.cta_field select:is(:focus, :valid) + span,
.cta_field:is(.is-filled, .is-open) > span { top: calc(1 * var(--u)); transform: scale(.72); color: rgba(255, 255, 255, .6); }
.cta_field.is-area textarea:is(:focus, :not(:placeholder-shown)) + span { top: calc(.85 * var(--u)); }

/* ---------- Dropdown custom (select.js) ----------
   <select> asli tersembunyi (tetap jadi sumber nilai + validasi), digantikan tombol + daftar pilihan */
.is-custom { position: relative; }
.is-custom select { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.select_trigger { display: flex; align-items: center; gap: var(--u); width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.select_value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select_chevron { flex: none; width: calc(.85 * var(--u)); transition: transform .45s cubic-bezier(.5, .5, 0, 1); }
.is-open .select_chevron { transform: rotate(180deg); }
.select_list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + calc(.5 * var(--u)));
  margin: 0; padding: calc(.5 * var(--u)); list-style: none; max-height: calc(24 * var(--u)); overflow-y: auto; overscroll-behavior: contain;
  border-radius: calc(.5 * var(--u)); background: var(--color-bg); color: var(--color-ink);
  box-shadow: 0 0 0 1px rgba(20, 20, 20, .08), 0 calc(1.5 * var(--u)) calc(3 * var(--u)) calc(-1 * var(--u)) rgba(20, 20, 20, .28);
  opacity: 0; visibility: hidden; transform: translateY(calc(-.5 * var(--u))); transform-origin: 50% 0;
  transition: opacity .3s var(--ease), transform .45s cubic-bezier(.5, .5, 0, 1), visibility 0s .45s;
}
.select_list:focus { outline: none; }
.is-open .select_list { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .45s cubic-bezier(.5, .5, 0, 1), visibility 0s; }
.select_option {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
  padding: calc(.9 * var(--u)) var(--u); border-radius: calc(.35 * var(--u));
  font-size: calc(1.25 * var(--u)); line-height: 1.1; cursor: pointer; transition: background-color .2s var(--ease);
}
.select_option.is-active { background: rgba(20, 20, 20, .06); }
/* Pilihan aktif ditandai titik oranye kecil, sama dengan titik di menu */
.select_option::after { content: ""; flex: none; width: calc(.5 * var(--u)); height: calc(.5 * var(--u)); border-radius: 50%; background: var(--color-accent); transform: scale(0); transition: transform .35s cubic-bezier(.5, .5, 0, 1); }
.select_option[aria-selected="true"]::after { transform: scale(1); }
/* Formulir halaman Contact: tombol bergaya garis bawah seperti kolom lain */
.form_field .select_trigger {
  padding: .7em 0; border: 0; border-bottom: 1px solid var(--color-ink); border-radius: 0; background: transparent;
  color: var(--color-ink); font-size: max(16px, 1.875em); font-weight: 500; letter-spacing: -.02em; transition: border-color var(--dur-fast) var(--ease);
}
.form_field .select_trigger:focus-visible, .form_field.is-open .select_trigger { outline: none; border-color: var(--color-accent); }
.form_field.is-invalid .select_trigger { border-color: var(--color-accent); }
.form_field .select_value:empty::before { content: "Choose"; color: var(--color-muted); }
.form_field .select_chevron { width: .45em; }
/* CTA: panah di tengah tinggi kotak (isi kotak turun karena ruang label mengambang di atas) */
.cta_field .select_trigger { padding-right: calc(3.5 * var(--u)); }
.cta_field .select_chevron { position: absolute; right: calc(1.4 * var(--u)); top: 50%; translate: 0 -50%; }

.cta_submit .button { background: #fff; border-color: #fff; color: var(--color-ink); }
.cta_submit .button:hover { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.cta_submit .button:hover::after { background: var(--color-accent); }
/* Seleksi teks di blok oranye: latar warna halaman (bukan oranye), agar teks yang diblok tetap terlihat */
.section_cta ::selection { background: var(--color-bg); color: var(--color-ink); }
.cta_submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-1); }
.cta_status { font: 400 1em/1.3 var(--font-mono); text-transform: uppercase; color: var(--cta-ink); max-width: 30em; }

/* Kontak di kiri bawah, sejajar akhir formulir */
.cta_connect { display: grid; gap: var(--s-2); }
.cta_connect-title { font-size: calc(1.875 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--cta-ink); }
.cta_contacts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: var(--s-5); row-gap: var(--s-2); margin: 0; }
.cta_contacts dt { font-size: calc(1.125 * var(--u)); font-weight: 500; color: var(--cta-ink); margin-bottom: calc(.5 * var(--u)); }
.cta_contacts dd { margin: 0; font-size: calc(1.125 * var(--u)); line-height: 1.35; color: rgba(255, 255, 255, .72); }
.cta_contacts a { color: var(--cta-ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.cta_contacts a:hover { background-size: 100% 1px; }

@media (max-width: 767px) {
  .cta_layout { grid-template-columns: 1fr; }
  .cta_info { padding: var(--s-6) 0 var(--s-4); border-right: 0; border-bottom: 1px solid var(--cta-line); gap: var(--s-4); }
  .cta_title { font-size: calc(3.75 * var(--u)); }
  .cta_contacts { grid-template-columns: 1fr; }
  .cta_form { grid-template-columns: 1fr; padding: var(--s-4) 0 var(--s-6); }
  .cta_field :is(input, select, textarea, .select_trigger), .cta_field > span, .select_option { font-size: 16px; }   /* 16px: iOS tidak zoom saat fokus */
}

/* ---------- Footer ---------- */
.footer_component { overflow: hidden; background: var(--color-bg); color: var(--color-text); }
.footer_inner { padding-top: var(--s-5); }
.footer_grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-4); }
.footer_about { grid-column: 1 / 5; display: grid; gap: var(--s-2); align-content: start; max-width: 22em; }
.footer_about p { color: var(--color-muted); }
.footer_logo { font-size: 2.5em; }
.footer_col { grid-column: span 2; display: grid; gap: var(--s-1); align-content: start; font-size: 1.25em; }
.footer_col.is-first { grid-column: 7 / 9; }
.footer_col .text-style-mono { color: var(--color-accent); margin-bottom: var(--s-1); font-size: .8em; }
/* nowrap: teks acak saat hover bisa sedikit lebih lebar; tanpa ini link turun ke baris 2 dan footer naik-turun */
.footer_col a { white-space: nowrap; transition: color var(--dur-fast) var(--ease); }
.footer_col a:is(:hover, :focus-visible) { color: var(--color-accent); }
.footer_mark {
  margin: var(--s-5) 0 0; text-align: center; white-space: nowrap; color: var(--color-ink);
  font-family: var(--font-brand); font-weight: 800; font-size: 21.5vw; line-height: .78; letter-spacing: -.012em;   /* lebih rapat dari ini, huruf c dan o bersentuhan */
  --mark-fade: linear-gradient(to bottom, var(--color-ink) 28%, rgba(20, 20, 20, .42) 100%);   /* pudar tipis dari ~1/3 atas ke bawah */
  background: var(--mark-fade); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-transform: lowercase;
}
/* Setelah dipecah per huruf (motion.js rise), gradasi dipasang di tiap huruf karena huruf bergerak sendiri-sendiri */
.footer_mark:has(.rise-char) { background: none; }
/* Gradasi hanya terlukis di dalam kotak huruf; kotaknya (line-height .78) lebih pendek dari hurufnya,
   jadi kotak diperluas dengan padding + margin negatif (posisi huruf tidak bergeser) agar huruf tidak terpotong */
.footer_mark .rise-char { padding: .22em .12em .14em 0; margin: -.22em -.12em -.14em 0; }
.footer_mark .rise-char { background: var(--mark-fade); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.footer_bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); padding-block: var(--s-2) var(--s-3); color: var(--color-muted); margin-top: var(--s-1); }
/* © ailua.co: Poppins tipis, ukuran dan warna sama dengan Privacy · Terms */
.footer_copy { font: 300 1em/1 var(--font-brand); letter-spacing: 0; text-transform: lowercase; color: var(--color-muted); }
@media (max-width: 767px) {
  .footer_about { grid-column: 1 / -1; }
  .footer_col, .footer_col.is-first { grid-column: span 6; }
}

/* ---------- Fitur ---------- */
.feature_grid { display: grid; gap: var(--s-1); }
.feature_card {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5); min-height: 20em;
  padding: var(--s-3); border-radius: var(--radius-sm); background: var(--color-panel); border: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease);
}
.feature_card:hover { border-color: var(--color-ink); }
.feature_card > .text-style-mono { color: var(--color-accent); }
.feature_card .heading-style-h4 { font-size: 1.875em; }
.feature_card p { margin-top: var(--s-1); color: var(--color-muted); max-width: 22em; }
@media (min-width: 768px) { .feature_grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .feature_grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Langkah ringkas ---------- */
.steps-inline { display: grid; gap: var(--col-gap); grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); }
.steps-inline li { display: grid; gap: var(--s-4); align-content: start; padding-top: var(--s-2); border-top: 1px solid var(--color-ink); }
.steps-inline .text-style-mono { color: var(--color-accent); }
.steps-inline strong { font-size: 1.875em; font-weight: 500; letter-spacing: -.02em; color: var(--color-ink); }
.steps-inline .flow_desc { margin-top: calc(var(--s-3) * -1); color: var(--color-muted); max-width: 20em; }

/* ---------- Studi kasus ---------- */
.case_media { position: relative; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 16 / 9; background: var(--color-panel); }
.case_info { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); padding-block: var(--s-3); border-bottom: 1px solid var(--color-line); }
.case_info .text-style-mono { display: block; margin-bottom: var(--s-1); color: var(--color-accent); }
.case_info p { color: var(--color-ink); }
@media (max-width: 767px) { .case_info { grid-template-columns: 1fr 1fr; } }
.case_block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-2); padding-block: var(--s-4); border-top: 1px solid var(--color-line); }
.case_block:first-child { border-top: 0; padding-top: 0; }
.case_block > .text-style-mono { grid-column: 1 / 4; color: var(--color-accent); }
.case_block > p { grid-column: 4 / 12; }
@media (max-width: 767px) { .case_block > .text-style-mono, .case_block > p { grid-column: 1 / -1; } }
.case_gallery { display: grid; gap: var(--col-gap); margin-block: var(--s-5); }
.case_shot { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: radial-gradient(120% 90% at 30% 20%, #ece9e2, #d3cfc6); color: var(--color-muted); }
@media (min-width: 768px) { .case_gallery { grid-template-columns: 1fr 1fr; } }
.case_quote { margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--color-ink); display: grid; gap: var(--s-2); }
.case_quote .heading-style-statement { text-indent: 25%; }
.case_quote footer { color: var(--color-muted); }

.next_link { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.next_title { display: block; transition: color var(--dur-base) var(--ease); }
.next_arrow { width: 6.25em; height: 6.25em; flex: none; font-size: 1.5em; }
@media (hover: hover) {
  .next_link:hover .next_title { color: var(--color-accent); }
  .next_link:hover .next_arrow { transform: rotate(45deg); background: var(--color-accent); border-color: var(--color-accent); color: var(--color-ink); }
}

/* ---------- Gambar ---------- */
img.work_media-inner { width: 100%; height: 116%; object-fit: cover; }
.mini-card_thumb { overflow: hidden; }
.mini-card_thumb img, .case_shot img, .team_photo img { width: 100%; height: 100%; object-fit: cover; }
.case_shot { overflow: hidden; }
.team_photo { overflow: hidden; }
.team_photo img { filter: grayscale(1) contrast(1.05); transition: filter var(--dur-base) var(--ease), scale 1.2s var(--ease); }
@media (hover: hover) { .team_card:hover .team_photo img { filter: grayscale(0); scale: 1.03; } }

/* ---------- Tim (acuan: "Our Lineup" orgnzm.studio) ----------
   Foto besar 36.1% dan kecil 23.35% dari lebar konten, rasio 5:6, disusun zigzag. */
.section_team { overflow: hidden; }
.section_team .container-large { container-type: inline-size; }   /* judul raksasa diukur dari lebar ini (cqw) */
.section_team .padding-section-medium { padding-block: var(--s-4) calc(6.25 * var(--u)); }
/* Seperti acuan: tiap huruf bergradasi gelap -> transparan ke bawah, dibaurkan (overlay) dengan warna latar */
.team_giant {
  margin: 0; font-size: calc(31.5 * var(--u)); font-size: 27.4cqw; font-weight: 500; line-height: .725; letter-spacing: -.055em;
  white-space: nowrap; color: transparent;
  background: linear-gradient(to bottom, #000 12%, rgba(0, 0, 0, 0) 92%); -webkit-background-clip: text; background-clip: text;
  mix-blend-mode: overlay;
}
.team_head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-2); margin-bottom: calc(6.25 * var(--u)); }
.team_head-text { display: grid; gap: calc(1.875 * var(--u)); }
.team_eyebrow { display: flex; gap: calc(1.4 * var(--u)); font: 400 1em/1 var(--font-mono); letter-spacing: -.03em; text-transform: uppercase; color: var(--color-ink); }
.team_count {
  flex: none; display: grid; place-items: center; width: calc(6.5 * var(--u)); aspect-ratio: 1;
  border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-accent);
  font-size: calc(3.125 * var(--u)); font-weight: 500; letter-spacing: -.03em;
}
/* Kolom: kecil 23.35% | 12.75% | 2.1% | besar 36.1% | 2.35% | kecil 23.35%  (=100%) */
.team_layout {
  display: grid; grid-template-columns: 23.35% 12.75% 2.1% 36.1% 2.35% 23.35%;
  row-gap: calc(3.875 * var(--u)); align-items: start;
}
.team_card { display: grid; gap: var(--s-2); align-content: start; }
.team_card:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }      /* besar, kiri atas */
.team_card:nth-child(2) { grid-column: 6 / 7; grid-row: 1; }      /* kecil, kanan atas */
.team_card:nth-child(3) { grid-column: 1 / 2; grid-row: 2; align-self: end; }  /* kecil, kiri bawah */
.team_card:nth-child(4) { grid-column: 4 / 5; grid-row: 2; }      /* besar, tengah bawah */
.team_photo { aspect-ratio: 5 / 6; border-radius: var(--radius-sm); background: rgba(20, 20, 20, .1); }
.team_name { display: flex; justify-content: space-between; gap: var(--s-2); font-size: 1.25em; font-weight: 500; line-height: 1; color: var(--color-ink); }
.team_name h3 { font-size: 1em; font-weight: 500; }
.team_name span { opacity: .4; text-align: right; }
@media (max-width: 767px) {
  .team_layout { grid-template-columns: 1fr 1fr; column-gap: var(--col-gap); row-gap: var(--s-4); }
  .team_card:nth-child(n) { grid-column: auto; grid-row: auto; align-self: start; }
  .team_name { flex-direction: column; gap: var(--s-1); }
  .team_name span { text-align: left; }
}

/* ---------- Tentang ---------- */
.about_story { margin-top: var(--s-5); margin-left: 25%; max-width: 32em; color: var(--color-muted); }
@media (max-width: 767px) { .about_story { margin-left: 0; } }

/* ---------- Kontak ---------- */
.contact_aside { display: grid; align-content: start; }
.contact_row { display: grid; gap: var(--s-1); padding-block: var(--s-2); border-bottom: 1px solid var(--color-line); }
.contact_row:first-child { border-top: 1px solid var(--color-ink); }
.contact_row .text-style-mono { color: var(--color-accent); }
.contact_row > span:not(.text-style-mono) { font-size: 1.25em; color: var(--color-ink); }
.contact_next { display: grid; gap: var(--s-1); margin-top: var(--s-4); }
.contact_next li { display: grid; grid-template-columns: 3em 1fr; font-size: 1.25em; line-height: 1.3; }
.contact_next .text-style-mono { color: var(--color-accent); font-size: .8em; padding-top: .25em; }
.form_component { display: grid; gap: var(--s-4); }
.form_row { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .form_row { grid-template-columns: 1fr 1fr; } }
.form_field { display: grid; gap: var(--s-1); }
.form_field > .text-style-mono { color: var(--color-accent); }
.form_field input, .form_field select, .form_field textarea {
  width: 100%; padding: .7em 0; border: 0; border-bottom: 1px solid var(--color-ink); border-radius: 0; background: transparent;
  color: var(--color-ink); font-size: max(16px, 1.875em); font-weight: 500; letter-spacing: -.02em;
  transition: border-color var(--dur-fast) var(--ease);
}
.form_field textarea { resize: vertical; line-height: 1.2; }
.form_field input:focus, .form_field select:focus, .form_field textarea:focus { outline: none; border-color: var(--color-accent); }
.form_field :user-invalid { border-color: var(--color-accent); }
.form_submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.form_status { color: var(--color-accent); }

/* ---------- Blog & legal ---------- */
.empty_state { display: grid; gap: var(--s-3); justify-items: start; }
.legal_body { margin-left: 25%; max-width: 40em; color: var(--color-muted); display: grid; gap: var(--s-2); }
@media (max-width: 767px) { .legal_body { margin-left: 0; } }

/* ---------- Ukuran mobile ---------- */
/* Proporsi diukur dari orgnzm.studio di 375px: gutter 19px, paragraf ~19px, tombol lebar penuh 48px */
@media (max-width: 767px) {
  :root { --gutter: calc(1.5 * var(--u)); }   /* 18px; sebelumnya 30px, terlalu sempit untuk layar 375 */
  /* Paragraf tanpa kelas ukuran sendiri: 14.4px (sebelumnya 12px). :where = spesifisitas 0, kelas lain tetap menang */
  :where(main, footer) :where(p:not(.text-style-mono)) { font-size: 1.2em; line-height: 1.35; }
  .text-size-medium, .hero_lead p { font-size: 1.45em; line-height: 1.3; }
  /* Tombol bertumpuk selebar konten, tinggi ~48px seperti acuan */
  .button-group, .button-group.is-center { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .button-group .button { width: 100%; padding-block: 1.5em; }
  /* Tombol Contact us mengambang disembunyikan: menutupi konten. Kontak tetap ada di menu, tombol hero, dan formulir */
  .menu_component.is-contact { display: none; }
  .team_giant { margin-bottom: var(--s-2); }
  .heading-style-hero, .heading-style-display { font-size: 3.6em; }
  .heading-style-h2, .heading-style-h3 { font-size: 2.8em; }
  .heading-style-statement { font-size: 2.5em; text-indent: 0; }
  .heading-style-h4, .why_item .heading-style-h4 { font-size: 1.875em; }
  .problem_item p { font-size: 1.75em; }
  .process_num { font-size: 4.5em; }
  .pricing_value { font-size: 2.2em; }
  .faq_question { font-size: 1.5em; }
  .padding-section-large { padding-block: var(--s-6) var(--s-5); }
  .hero_orb { --orb: 24em; top: calc(46% + var(--orb) / 2); }
  .hero_orb.is-page { --orb: 20em; left: 50%; top: 46.5%; }
}

/* ---------- Bola SVG (orb.js) ----------
   Seluruh gerak bola digambar di lapisan SVG tetap DI BELAKANG konten (z-index -1, di atas latar halaman).
   .hero_orb tetap ada sebagai patokan posisi & ukuran; tampilan CSS-nya disembunyikan saat orb.js aktif. */
.orb_layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.orb_layer svg { display: block; overflow: visible; }
.hero_orb.is-svg .orb_body { visibility: hidden; }

/* ---------- Bingkai layar dari bola (orb.js) ---------- */
.page_frame { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.page_frame[hidden] { display: none; }
.page_frame svg { position: absolute; inset: 0; display: block; overflow: visible; }
/* Semua tetesan + tab dalam satu grup berfilter "goo": menyatu seperti cairan, tepinya tetap tegas */
.frame_goo { fill: var(--color-accent); }
/* Logo di tab tengah atas bingkai (seperti Safeer). --frame-tab = tinggi bingkai + tab, --frame-p = 0..1 */
.frame_logo {
  position: fixed; z-index: 56; top: 0; left: 50%; height: var(--frame-tab, 0px);
  display: flex; align-items: center; translate: -50% 0;
  transform: translateY(calc((var(--frame-p, 0) - 1) * 12px)); opacity: var(--frame-p, 0); pointer-events: none;
  font: 800 calc(1.875 * var(--u))/1 var(--font-brand); letter-spacing: -.05em; text-transform: lowercase; color: var(--color-ink);
}
.frame_logo[hidden] { display: none; }
.frame_logo span { color: #fff; }   /* titik putih: titik oranye tidak terlihat di atas bingkai oranye */
.frame-on .frame_logo { pointer-events: auto; }
.nav_logo { transition: opacity .4s var(--ease); }
.frame-on .nav_logo { opacity: 0; pointer-events: none; }   /* satu logo saja saat bingkai aktif */
/* Pita header tidak menutupi tab logo di tengah atas */
.frame-on .nav_component.is-scrolled { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- Notifikasi salin email (copy.js) ---------- */
.toast {
  position: fixed; z-index: 90; left: 50%; bottom: var(--gutter);
  padding: var(--u) calc(1.5 * var(--u)); border-radius: calc(.5 * var(--u));
  background: var(--color-ink); color: var(--color-bg);
  font: 400 1em/1 var(--font-mono); letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; visibility: hidden; translate: -50% calc(1 * var(--u)); pointer-events: none;
  transition: opacity .35s var(--ease), translate .6s cubic-bezier(.5, .5, 0, 1), visibility 0s .6s;
}
.toast.is-visible { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity .35s var(--ease), translate .6s cubic-bezier(.5, .5, 0, 1), visibility 0s; }
@media (max-width: 767px) { .toast { bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); } }
[data-copy] { cursor: copy; }

/* ---------- Tirai transisi antarhalaman ---------- */
.transition { display: none; }
.js .transition {
  display: flex; flex-direction: column; justify-content: space-between;
  position: fixed; inset: 0; z-index: 140; padding: var(--gutter);
  background: var(--color-dark); color: var(--color-dark-text);
  transform: translateY(100%); visibility: hidden;
}
.js.is-entering .transition { transform: none; visibility: visible; }
.transition_brand { font-family: var(--font-brand); font-weight: 800; font-size: 2em; letter-spacing: -.05em; text-transform: lowercase; }
.transition_mask { display: block; overflow: hidden; padding-bottom: .1em; }
.transition_label { display: block; font-size: 11.25em; font-weight: 500; line-height: .9; letter-spacing: -.04em; }
@media (max-width: 767px) { .transition_label { font-size: 5em; } }

/* ---------- Preloader, kursor, WhatsApp ---------- */
.loader { display: none; }
.js .loader { display: flex; position: fixed; inset: 0; z-index: 150; background: var(--color-dark); color: var(--color-dark-text); align-items: flex-end; padding: var(--gutter); }
.js.is-loaded .loader { display: none; }
.loader_inner { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; }
.loader_mark { font-family: var(--font-brand); font-weight: 800; font-size: 9em; line-height: .9; letter-spacing: -.06em; text-transform: lowercase; }
.loader_count { color: var(--color-dark-muted); }

.cursor { display: none; }
.has-cursor .cursor {
  display: grid; place-items: center; position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none;
  width: 7.5em; height: 7.5em; margin: -3.75em 0 0 -3.75em; border-radius: 50%;
  background: var(--color-accent); color: var(--color-ink); scale: .1; opacity: 0;
  transition: scale var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
}
.has-cursor .cursor.is-visible { opacity: 1; }
.has-cursor .cursor.is-active { scale: 1; }
.cursor_label { font: 400 1em/1 var(--font-mono); text-transform: uppercase; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.cursor.is-active .cursor_label { opacity: 1; }

/* ---------- Menu hamburger (acuan orgnzm.studio) ----------
   Desktop: kanan bawah, panel mengembang ke atas-kiri. Ponsel: kanan atas, panel mengembang ke bawah-kiri.
   Murni CSS: .menu_component selalu berukuran seperti isi menu (menu_group ada di alur dokumen walau diskalakan
   0.15), latar .menu_bg bertransisi dari ukuran tombol ke 100%. Status dari data-menu-status (menu.js). */
/* Overlay transparan: hanya menangkap klik di luar panel untuk menutupnya, halaman tidak diredupkan */
.menu_overlay { position: fixed; inset: 0; z-index: 65; visibility: hidden; }
.menu-open .menu_overlay { visibility: visible; }

.menu_component {
  --menu-ease: cubic-bezier(.5, .5, 0, 1);
  --t-w: var(--menu-t); --t-h: var(--menu-t);   /* ukuran tombol = ukuran awal latar panel */
  position: fixed; z-index: 70; right: var(--gutter); bottom: var(--gutter);
  border-radius: var(--radius-md); pointer-events: none;
}
.menu_bg {
  position: absolute; right: 0; bottom: 0; width: var(--t-w); height: var(--t-h);
  border-radius: var(--radius-md); background: #fafaf8;
  transition: all .7s var(--menu-ease);
}
[data-menu-status="open"] .menu_bg { width: 100%; height: 100%; }

.menu_group {
  position: relative; display: flex; flex-direction: column; gap: calc(3.5 * var(--u));
  padding: calc(1.5625 * var(--u)); max-height: calc(100svh - 2 * var(--gutter)); overflow-y: auto;
  transform-origin: 100% 100%; transform: scale(.15) rotate(.001deg); opacity: 0; visibility: hidden;
  transition: all .5s var(--menu-ease), transform .7s var(--menu-ease);
}
[data-menu-status="open"] .menu_group { transform: scale(1) rotate(.001deg); opacity: 1; visibility: visible; pointer-events: auto; }

.menu_label { font: 400 calc(1 * var(--u))/1 var(--font-mono); letter-spacing: -.02em; text-transform: uppercase; color: var(--color-accent); }

.menu_list { display: flex; flex-direction: column; gap: calc(1.25 * var(--u)); }
.menu_list .nav_link { display: flex; justify-content: space-between; align-items: center; width: calc(28 * var(--u)); color: var(--color-ink); }
.menu_text {
  font-size: calc(3.125 * var(--u)); font-weight: 500; line-height: 1; letter-spacing: -.035em; white-space: nowrap;
  padding-right: calc(1.25 * var(--u)); transition: opacity .7s var(--menu-ease);
}
.menu_dot {
  flex: none; width: calc(.5 * var(--u)); height: calc(.5 * var(--u)); margin-right: var(--u); border-radius: 50%;
  background: var(--color-accent); transform: scale(0) rotate(.001deg); transition: all .7s var(--menu-ease);
}
/* Huruf acak saat hover (menu.js). pointer-events none: huruf ini diganti tiap beberapa ms; tanpa ini klik yang
   jatuh di atasnya bisa batal (elemen yang ditekan sudah hilang saat tombol dilepas), jadi terasa harus menunggu */
.menu_scramble { display: inline-block; white-space: pre; pointer-events: none; }
.menu_text { pointer-events: none; }
/* Halaman aktif: teks pudar + titik tampil. Saat salah satu link di-hover, hanya titik link itu yang tampil. */
.menu_list .nav_link[aria-current] .menu_text { opacity: .33; }
.menu_list .nav_link[aria-current] .menu_dot { transform: scale(1) rotate(.001deg); }
/* Status hover dari menu.js (bukan :hover): :hover bisa tertahan saat panel masih mengembang di bawah kursor */
.menu_list.has-hover .menu_dot { transform: scale(0) rotate(.001deg); }
.menu_list .nav_link.is-hover .menu_dot { transform: scale(1) rotate(.001deg); }

/* Desktop (tombol di kanan bawah): label "Menu" di bawah, sebaris dengan tombol, cermin dari acuan */
.menu_group { flex-direction: column-reverse; }

.menu_toggle {
  position: absolute; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center;
  width: var(--menu-t); height: var(--menu-t); padding: 0; border: 0; border-radius: var(--radius-sm);
  background: var(--color-accent); cursor: pointer; pointer-events: auto;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .14);   /* tetap terlihat saat melintas di atas section oranye */
  transform: translate(0, 0) rotate(.001deg); transition: transform .7s var(--menu-ease);
}
[data-menu-status="open"] .menu_toggle { transform: translate(calc(-1 * var(--u)), calc(-1 * var(--u))) rotate(.001deg); }
.menu_bar {
  position: absolute; width: 40%; height: max(1.5px, calc(.125 * var(--u))); background: var(--color-ink);
  transform: translateY(calc(-.15 * var(--u))) rotate(.001deg); transition: transform .7s var(--menu-ease);
}
.menu_bar:nth-child(2) { transform: translateY(calc(.15 * var(--u))) rotate(.001deg); }
.menu_toggle:hover .menu_bar { transform: translateY(calc(.15 * var(--u))) rotate(.001deg); }
.menu_toggle:hover .menu_bar:nth-child(2) { transform: translateY(calc(-.15 * var(--u))) rotate(.001deg); }
[data-menu-status="open"] .menu_toggle .menu_bar { transform: translateY(0) rotate(45deg); }
[data-menu-status="open"] .menu_toggle .menu_bar:nth-child(2) { transform: translateY(0) rotate(-45deg); }

/* Tombol Contact us: di kiri hamburger, panel berisi email + WhatsApp (pola panel sama dengan menu) */
.menu_component.is-contact { --t-w: var(--contact-w); z-index: 69; right: calc(var(--gutter) + var(--menu-t) + var(--dock-gap)); }
.menu_component.is-contact[data-menu-status="open"] { z-index: 71; }
.is-contact .menu_list .nav_link { width: calc(24 * var(--u)); }
.is-contact .menu_text { font-size: calc(2.25 * var(--u)); letter-spacing: -.03em; }
.contact_toggle {
  width: var(--contact-w); justify-content: flex-start; padding: 0 calc(1.5 * var(--u));
  border: 1px solid var(--color-ink); background: var(--color-bg); color: var(--color-ink); box-shadow: none;
  font: 400 calc(1.125 * var(--u))/1 var(--font-mono); letter-spacing: -.02em; text-transform: uppercase;
  transition: transform .7s var(--menu-ease), background-color .4s var(--menu-ease);
}
.contact_toggle:hover { background: #fafaf8; }
.contact_toggle-arrow {
  position: absolute; top: calc(.5 * var(--u)); right: calc(.5 * var(--u)); width: calc(.875 * var(--u)); height: calc(.875 * var(--u));
  transition: transform .7s var(--menu-ease);
}
.contact_toggle:hover .contact_toggle-arrow { transform: translate(calc(.15 * var(--u)), calc(-.15 * var(--u))); }
.is-contact[data-menu-status="open"] .contact_toggle-arrow { transform: rotate(90deg); }

/* Isi kontak di dalam menu: hanya saat panel Contact ber-morph menjadi menu (menu.js, desktop) */
.menu_contact { display: none; flex-direction: column; gap: calc(1.25 * var(--u)); padding-top: calc(1.875 * var(--u)); border-top: 1px solid var(--color-line); }
[data-menu-contact] .menu_contact { display: flex; }
.menu_contact .menu_text { font-size: calc(2.25 * var(--u)); letter-spacing: -.03em; }
/* Menu + kontak: tiap label oranye tepat di atas bagiannya (MENU di atas daftar link, CONTACT di atas kontak),
   kontak di baris paling bawah sejajar tombol tutup. Urutan via order karena grup memakai column-reverse. */
[data-menu-contact] .menu_group > .menu_label { order: 2; margin-bottom: calc(-2.25 * var(--u)); }   /* jarak ke list = 1.25u, sama dengan CONTACT */
[data-menu-contact] .menu_group > .menu_list { order: 1; }
[data-menu-contact] .menu_contact { order: 0; }
/* Panel Contact yang sedang ber-morph: disembunyikan seketika, latar menu mengambil alih bentuknya */
.is-morphing .menu_bg, .is-morphing .menu_group { transition: none !important; opacity: 0; }
/* Menu yang menerima morph: grup tampil penuh tanpa fade/skala (di-mask oleh menu.js); hanya isi baru yang memudar masuk */
.is-morph-in .menu_group { transform: none; opacity: 1; visibility: visible; overflow: hidden; }   /* hidden: tanpa scrollbar saat isi bergeser */
.is-morph-in .menu_group > .menu_list, .is-morph-in .menu_group > .menu_label, .is-morph-in .menu_contact > .menu_label {
  animation: menu-morph-fade .6s cubic-bezier(.5, .5, 0, 1) .15s both;
}
@keyframes menu-morph-fade { from { opacity: 0; } }

/* Jangan tertutup tombol kontak + menu di pojok kanan bawah (desktop) */
/* Kartu hero tetap di posisi kanan semula; dinaikkan setinggi tombol (bukan digeser ke kiri, nanti menabrak teks tengah) */
.hero_card { margin-bottom: calc(var(--menu-t) + var(--s-2)); }
.footer_bottom { padding-right: calc(var(--menu-t) + var(--contact-w) + var(--dock-gap) + var(--s-2)); }

/* Ponsel: kanan atas, panel ringkas seperti acuan */
@media (max-width: 767px) {
  :root { --menu-t: calc(2.75 * var(--u)); }
  .menu_component { top: calc(var(--s-2) + var(--s-1)); bottom: auto; right: var(--gutter); border-radius: calc(.25 * var(--u)); }
  /* Header sejajar gutter konten: logo dan hamburger tepat di garis kiri/kanan konten */
  .nav_component { left: calc(var(--gutter) - var(--s-1)); right: calc(var(--gutter) - var(--s-1)); padding-left: var(--s-1); }
  .menu_bg { top: 0; bottom: auto; border-radius: calc(.25 * var(--u)); }
  .menu_toggle { top: 0; bottom: auto; border-radius: calc(.25 * var(--u)); }
  .menu_group { flex-direction: column; transform-origin: 100% 0; gap: calc(1.875 * var(--u)); padding: calc(1.25 * var(--u)) calc(1.9 * var(--u)) calc(1.25 * var(--u)) calc(1.25 * var(--u)); max-height: calc(100svh - 2 * (var(--s-2) + var(--s-1))); }
  .menu_list { gap: calc(.875 * var(--u)); }
  .menu_list .nav_link { width: calc(19.5 * var(--u)); }
  .menu_text { font-size: calc(2.5 * var(--u)); }
  .menu_dot { width: calc(.35 * var(--u)); height: calc(.35 * var(--u)); margin-right: 0; }
  .menu_label { font-size: calc(.875 * var(--u)); }
  [data-menu-status="open"] .menu_toggle { transform: translate(calc(-1 * var(--u)), var(--u)) rotate(.001deg); }
  .nav_component { min-height: calc(var(--menu-t) + 2 * var(--s-1)); }
  [data-menu-contact] .menu_contact { display: none; }
  /* Ponsel: Contact us tetap di kanan bawah, panel mengembang ke atas */
  :root { --contact-w: calc(11 * var(--u)); }
  .menu_component.is-contact { top: auto; bottom: calc(var(--s-2) + var(--s-1)); right: calc(var(--s-2) + var(--s-1)); }
  .is-contact .menu_bg, .is-contact .menu_toggle { top: auto; bottom: 0; }
  .is-contact .menu_group { flex-direction: column-reverse; transform-origin: 100% 100%; }
  .is-contact .menu_list .nav_link { width: calc(19.5 * var(--u)); }
  .is-contact .menu_text { font-size: calc(1.875 * var(--u)); }
  .is-contact[data-menu-status="open"] .menu_toggle { transform: translate(calc(-1 * var(--u)), calc(-1 * var(--u))) rotate(.001deg); }
  .hero_card, .footer_bottom { margin-right: 0; padding-right: 0; }
  .hero_card { margin-bottom: 0; }
}

/* ---------- Keadaan awal animasi ----------
   Aktif hanya dengan html.js. Tanpa JS, gagal muat, atau reduced motion: konten tampil penuh. */
.js .nav_component,
.js [data-anim="lines"],
.js [data-anim="chars"],
.js [data-anim="fade-up"],
.js [data-anim="fade"],
.js [data-anim="clip"],
.js [data-anim="stagger"] > * { visibility: hidden; }
.js [data-anim="draw"] { transform: scaleX(0); transform-origin: left center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}