/* ============================================================
   TRANOVA — COMPONENTS
   Phase 2 scope: navigation, hero, buttons, footer.
   ============================================================ */

/* ==================== NAVIGATION ==================== */
/* Floating light pill → full-color logo stays on a light
   surface even over the dark hero (Brand Guide p.31). */

.nav {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  width: min(calc(100% - 2rem), var(--container-max));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: 0.6rem 0.75rem 0.6rem 1.4rem;
  background: rgba(244, 241, 236, .88);   /* kertas transparan */
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--fill-2);
  border-radius: var(--r-pill);
  transition: box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.nav.is-scrolled {
  box-shadow: var(--shadow-nav);
  background: var(--tv-white);
}

.nav__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

/* horizontal lockup ≥ 75px digital minimum (Brand Guide p.30) */
.nav__logo img {
  height: 1.75rem;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.75rem);
}

.nav__link {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--ink);
  position: relative;
  padding: 0.35rem 0;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--grad-brand);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav__link:hover {
  color: var(--teal-900);
}

.nav__link:hover::after {
  transform: scaleX(1);
}

.nav__link.is-active {
  color: var(--teal-900);
  font-weight: 700;
}

.nav__link.is-active::after {
  transform: scaleX(1);
}

.nav__cta {
  flex: 0 0 auto;
}

/* burger — mobile only */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
}

.nav__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- mobile overlay menu ---------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--bg-page);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--container-pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out),
              visibility 0s linear var(--dur-med);
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.menu-overlay__close {
  position: absolute;
  top: 1.35rem;
  right: 1.35rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-1);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
}

.menu-overlay__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.menu-overlay__link {
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.menu-overlay.is-open .menu-overlay__link {
  opacity: 1;
  transform: translateY(0);
}

.menu-overlay__link:hover {
  color: var(--tx-brand);
}

.menu-overlay__link .idx {
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--tx-brand);
  letter-spacing: var(--ls-label);
  vertical-align: super;
  margin-right: 0.6rem;
}

.menu-overlay__foot {
  margin-top: var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  color: var(--tx-45);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ==================== BUTTONS ==================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.btn:active {
  transform: scale(0.98);
}

.btn .arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}

.btn:hover .arrow {
  transform: translateX(4px);
}

.btn--primary {
  background: var(--fill-brand);
  color: var(--ink);          /* Design System §4: tombol teal berteks hitam */
}

.btn--primary:hover {
  background: var(--teal-900);
  color: var(--tv-white);          /* teal gelap butuh teks putih agar kontras */
}

.btn--ghost-light {
  border: 1px solid var(--tx-45);
  color: var(--ink);
}

.btn--ghost-light:hover {
  border-color: var(--tx-brand);
  color: var(--tx-brand);
}

.btn--sm {
  padding: 0.6rem 1.2rem;
}

/* ==================== HERO ==================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-page);
  color: var(--ink);
  overflow: hidden;
  padding-top: 7rem;
  padding-bottom: 3.5rem;
}

/* ---- living gradient field (echoes the molecular brandmark) ---- */
.hero__blobs {
  position: absolute;
  inset: 0;
  z-index: var(--z-blobs);
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: multiply;
  will-change: transform;
}

.blob--1 {
  width: 46vmax; height: 46vmax;
  top: -10vmax; right: -8vmax;
  background: radial-gradient(circle at 40% 45%, var(--fill-brand) 0%, transparent 62%);
  opacity: 0.5;
  animation: blob-drift-a 26s var(--ease-out) infinite alternate;
}

.blob--2 {
  width: 40vmax; height: 40vmax;
  top: 26%; right: 2vmax;
  background: radial-gradient(circle at 55% 45%, var(--tv-light-teal) 0%, transparent 60%);
  opacity: 0.45;
  animation: blob-drift-b 32s var(--ease-out) infinite alternate;
}

.blob--3 {
  width: 34vmax; height: 34vmax;
  bottom: -6vmax; right: 12vmax;
  background: radial-gradient(circle at 50% 50%, var(--tv-pale-blue) 0%, transparent 62%);
  opacity: 0.42;
  animation: blob-drift-c 38s var(--ease-out) infinite alternate;
}

/* focus vignette */
.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(96deg, var(--bg-page) 0%, var(--bg-page) 30%, rgba(244,241,236,.72) 48%, rgba(244,241,236,0) 72%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: var(--z-content);
}

.hero__kicker {
  color: var(--tx-brand);
  margin-bottom: var(--sp-5);
}

/* ---- display title ---- */
.hero__title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  margin-bottom: var(--sp-6);
}

.hero__title .line {
  display: block;
  overflow: hidden;
  padding-block: 0.04em;
}

.hero__title .line > span {
  display: inline-block;
}

/* the "O" of GROWTH — molecular node, gradient, gently morphing */
.o-blob {
  display: inline-block;
  width: 0.82em;
  height: 0.82em;
  margin-inline: 0.03em;
  vertical-align: -0.06em;
  background: var(--grad-brand);
  border-radius: 46% 54% 50% 50% / 50% 46% 54% 50%;
  animation: o-morph 7s var(--ease-out) infinite alternate;
}

/* brand-echo period — the logotype's trailing dot */
.hero__title .dot {
  color: var(--tx-brand);
}

/* editorial badge — top-right jewelry */

.hero__sub {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--tx-70);
  max-width: 52ch;
  margin-bottom: var(--sp-6);
}

.hero__sub em {
  color: var(--tx-brand);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

/* ---- proof line ---- */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--sp-2);
  color: var(--tx-45);
}

.hero__proof .item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
}

.hero__proof .num {
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.hero__proof .sep {
  margin-inline: 1.1rem;
  color: var(--tx-brand);
  font-size: 1.1rem;
}

/* ---- scroll hint ---- */
.scroll-hint {
  position: absolute;
  bottom: 2.25rem;
  right: max(0.75rem, calc(var(--container-pad) - 2.25rem));
  z-index: var(--z-content);
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  color: var(--tx-70);
}
@media (max-width: 1180px) { .scroll-hint { display: none; } }

.scroll-hint .word {
  writing-mode: vertical-rl;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.scroll-hint .track {
  width: 1px;
  height: 3.25rem;
  background: var(--line-1);
  position: relative;
  overflow: hidden;
}

.scroll-hint .track::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40%;
  background: var(--fill-brand);
  animation: scroll-dash 2.2s var(--ease-out) infinite;
}

/* ==================== SECTION HEAD (shared) ==================== */

.section-head {
  margin-bottom: clamp(3rem, 6vh, 4.5rem);
}

.section-head__row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.section-head__index {
  color: var(--tx-brand);
  flex: none;
}

.bg-black .section-head__index,
.bg-dark .section-head__index {
  color: var(--tx-brand);
}

.bg-teal .section-head__index {
  color: var(--tv-black);
}

.section-head__rule {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.16;
}

.section-head__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}

.section-head__note {
  margin-top: var(--sp-4);
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  opacity: 0.7;
  max-width: 52ch;
}

/* ==================== [02] MARQUEE ==================== */

.marquee-band {
  background: var(--tv-white);
  border-block: 1px solid var(--line-2);
  padding-block: clamp(1.5rem, 3vh, 2.25rem);
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}

.marquee-band:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__seq {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-right: clamp(1.5rem, 3vw, 2.75rem);
}

.marquee__item {
  font-size: clamp(1.625rem, 3vw, 2.625rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

.marquee__item--ghost {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}

.marquee__dot {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  background: var(--grad-brand);
  border-radius: 46% 54% 50% 50% / 50% 46% 54% 50%;
}

/* ==================== [03] TENTANG ==================== */

.about-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.about-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.5;
  margin-bottom: var(--sp-7);
}

.about-big__value {
  display: block;
  font-size: clamp(5rem, 10vw, 8.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: var(--ls-tight);
  background: var(--grad-deep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-big__label {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  opacity: 0.75;
}

.about-base {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-2);
  opacity: 0.55;
}

.about-intro {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: 1.75;
  display: grid;
  gap: var(--sp-5);
}

.about-intro em {
  color: var(--teal-900);
}

.problems {
  margin-top: var(--sp-8);
}

.problems__title {
  opacity: 0.55;
  margin-bottom: var(--sp-4);
}

.problem {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line-2);
}

.problem__no {
  color: var(--tx-brand);
  padding-top: 0.2rem;
}

.problem__text {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}

.problems__punch {
  margin-top: var(--sp-5);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--teal-900);
  max-width: 24ch;
}

.why-grid {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.why-card {
  background: var(--tv-white);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}

.why-card h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-3);
}

.why-card__dot {
  width: 0.7rem;
  height: 0.7rem;
  flex: none;
  background: var(--grad-brand);
  border-radius: 46% 54% 50% 50% / 50% 46% 54% 50%;
}

.why-card__desc {
  font-family: var(--font-serif);
  opacity: 0.75;
}

/* ==================== [04] LAYANAN ==================== */

.cluster {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: var(--sp-7);
  border-top: 1px solid var(--line-2);
}

.cluster:first-child {
  border-top: 0;
  padding-top: 0;
}

.cluster__head {
  position: sticky;
  top: 7rem;
  align-self: start;
}

.cluster__kicker {
  color: var(--tx-brand);
  margin-bottom: var(--sp-3);
}

.cluster__name {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-4);
}

.cluster__note {
  font-family: var(--font-serif);
  font-style: italic;
  opacity: 0.7;
  max-width: 34ch;
  margin-bottom: var(--sp-5);
}

.cluster__output {
  font-size: var(--fs-small);
  opacity: 0.8;
}

.cluster__output .label {
  display: block;
  color: var(--tx-brand);
  opacity: 1;
  margin-bottom: 0.35rem;
}

.svc-row {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto;
  align-items: start;
  gap: var(--sp-5);
  padding: 1.35rem 1rem;
  margin-inline: -1rem;
  border-bottom: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-out);
}

.svc-row:hover {
  background: var(--teal-200);
}

.svc-row__no {
  color: var(--tx-brand);
  padding-top: 0.35rem;
}

.svc-row__name {
  display: block;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  margin-bottom: 0.3rem;
}

.svc-row__desc {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  opacity: 0.65;
  max-width: 52ch;
}

.svc-row__arrow {
  align-self: center;
  color: var(--tx-brand);
  /* Dulu 0 dan hanya muncul saat hover — pantas ketika baris ini
     belum bisa diklik. Sekarang baris ini tautan ke form audit,
     jadi panahnya harus terlihat tanpa kursor (layar sentuh). */
  opacity: .45;
  transform: none;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.svc-row:hover .svc-row__arrow,
.svc-row:focus-visible .svc-row__arrow {
  opacity: 1;
  transform: translateX(5px);
}

.services__close {
  margin-top: var(--sp-7);
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-lg);
  opacity: 0.75;
}

/* ==================== [05] KARYA ==================== */

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: var(--sp-6);
}

.filter-chip {
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--line-1);
  border-radius: var(--r-pill);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-70);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.filter-chip:hover {
  border-color: var(--tx-brand);
  color: var(--ink);
}

.filter-chip.is-active {
  background: var(--fill-brand);
  border-color: var(--tx-brand);
  color: var(--tv-black);
  font-weight: 700;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}

.work-card {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: 24rem;
  padding: var(--sp-6);
  background: var(--fill-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

a.work-card:hover {
  transform: translateY(-6px);
  border-color: var(--tx-brand);
  background: rgba(255, 255, 255, 0.11);
}

.work-card--slot {
  grid-column: span 3;
  min-height: 17rem;
  background: transparent;
  border-style: dashed;
  opacity: 0.6;
}

.work-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.chip {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line-1);
  border-radius: var(--r-pill);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--tx-70);
}

.work-card__city {
  color: var(--tx-45);
}

.work-card__metric .value {
  display: block;
  font-size: clamp(3.25rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: var(--ls-tight);
  transform-origin: left bottom;
  transition: transform var(--dur-fast) var(--ease-out);
}

a.work-card:hover .work-card__metric .value {
  transform: scale(1.04);
}

.work-card--slot .work-card__metric .value {
  color: var(--line-1);
}

.work-card__metric .label {
  display: block;
  margin-top: var(--sp-2);
  color: var(--tx-45);
}

.work-card__client {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--tv-white);
  margin-bottom: var(--sp-2);
}

.work-card__dur {
  color: var(--tx-45);
  margin-left: 0.5rem;
}

.work-card__summary {
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  color: var(--tx-70);
  max-width: 44ch;
  margin-bottom: var(--sp-4);
}

.work-card--slot .work-card__summary {
  color: var(--tx-45);
}

.work-card__cta {
  color: var(--tx-brand);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

a.work-card:hover .work-card__cta .arrow {
  transform: translateX(4px);
}

/* ==================== [07] HASIL ==================== */

.metrics-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--sp-6);
}

.metric {
  flex: 1 1 0;
  min-width: 11rem;
  padding-inline: var(--sp-6);
  border-left: 1px solid var(--line-1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.metric:first-child {
  padding-left: 0;
  border-left: 0;
}

.metric__value {
  font-size: clamp(3rem, 6.5vw, 5.75rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  font-variant-numeric: tabular-nums; /* count-up tanpa goyang lebar */
}

.metric__label {
  color: var(--tx-brand);
}

.metric__note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--tx-45);
}

.metrics-foot {
  margin-top: var(--sp-8);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.metrics-foot__note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-lg);
  color: var(--tx-70);
  max-width: 44ch;
}

/* ==================== [08] TESTIMONI ==================== */

.quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.quote:nth-child(2) {
  margin-top: var(--sp-9);
}

.quote__mark {
  display: block;
  font-family: var(--font-serif);
  font-size: 5rem;
  line-height: 0.6;
  color: var(--tx-brand);
  margin-bottom: var(--sp-4);
}

.quote__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.55;
  margin-bottom: var(--sp-5);
}

.quote__author {
  opacity: 0.8;
}

.quote__place {
  opacity: 0.6;
}

.quotes-note {
  margin-top: var(--sp-7);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  opacity: 0.5;
}

/* ==================== [09] PROSES ==================== */

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}

.step {
  padding-top: var(--sp-5);
  border-top: 2px solid var(--ink);
}

.step__no {
  display: block;
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--tx-brand);
  margin-bottom: var(--sp-4);
}

.step__name {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-3);
}

.step__desc {
  font-family: var(--font-serif);
  opacity: 0.75;
  max-width: 36ch;
}

.process-note {
  margin-top: var(--sp-7);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: var(--teal-200);
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: var(--fs-small);
}

.process-note::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  flex: none;
  border-radius: 50%;
  background: var(--fill-brand);
}

/* ==================== [10] KONTAK ==================== */

.contact {
  min-height: 86vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.contact__blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.14) 0%, transparent 65%);
  pointer-events: none;
}

.contact__blob--1 {
  width: 42vmax;
  height: 42vmax;
  top: -18vmax;
  right: -14vmax;
}

.contact__blob--2 {
  width: 34vmax;
  height: 34vmax;
  bottom: -16vmax;
  left: -10vmax;
}

.contact__inner {
  position: relative;
  z-index: var(--z-content);
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}

.contact__kicker {
  color: var(--tx-70);
}

.contact__title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

.contact__sub {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.6;
  color: var(--tx-90);
  max-width: 40ch;
}

.contact__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.btn--contrast {
  background: var(--tv-white);
  color: var(--teal-900);
  padding: 1.15rem 2.1rem;
  font-size: 1rem;
}

.btn--contrast:hover {
  background: var(--paper-deep);
}

.contact__foot {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  color: var(--tx-70);
}

/* ==================== CASE STUDY PAGE ==================== */

.case-header {
  position: relative;
  background: var(--ink);
  color: var(--tv-white);
  padding-top: 9rem;
  padding-bottom: var(--sp-7);
  overflow: hidden;
}

.case-header::before {
  content: "";
  position: absolute;
  top: -30vmax;
  right: -18vmax;
  width: 55vmax;
  height: 55vmax;
  background: radial-gradient(circle at 45% 45%, var(--fill-brand) 0%, transparent 62%);
  filter: blur(70px);
  opacity: 0.5;
  mix-blend-mode: screen;
  pointer-events: none;
}

.case-header .container {
  position: relative;
  z-index: var(--z-content);
}

.case-header__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
}

.case-header__kicker {
  color: var(--tx-brand);
  margin-bottom: var(--sp-4);
}

.case-title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

.case-title .dot {
  color: var(--tx-brand);
}

.case-lead {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--tx-70);
  max-width: 46ch;
}

.case-hero-metric {
  text-align: right;
}

.case-hero-metric__value {
  display: block;
  font-size: clamp(4rem, 9vw, 7rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: var(--ls-tight);
}

.case-hero-metric__label {
  display: block;
  margin-top: var(--sp-2);
  color: var(--tx-45);
}

.meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-8);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-1);
}

.meta__label {
  display: block;
  color: var(--tx-45);
  margin-bottom: 0.35rem;
}

.meta__value {
  font-weight: 700;
  font-size: var(--fs-small);
}

/* ---- langkah ---- */

.langkah-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}

/* ---- hasil & grafik ---- */

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-6);
}

.result {
  padding-left: var(--sp-5);
  border-left: 1px solid var(--line-1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.result__label {
  color: var(--tx-brand);
}

.result__value {
  font-size: clamp(1.875rem, 3.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--tv-white);
}

.result__note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--tx-45);
}

.chart {
  margin-top: var(--sp-9);
}

.chart__title {
  color: var(--tx-45);
  margin-bottom: var(--sp-6);
}

.chart__bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(0.5rem, 2.5vw, 1.5rem);
}

.chart-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.chart-col__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  height: clamp(9rem, 24vh, 15rem);
  width: 100%;
}

.chart-col__value {
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--tv-white);
  font-variant-numeric: tabular-nums;
}

.chart-col__bar {
  display: block;
  width: 100%;
  max-width: 4.5rem;
  height: var(--h, 0%);
  background: var(--grad-brand);
  border-radius: 0.5rem 0.5rem 0 0;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.chart.in-view .chart-col__bar {
  transform: scaleY(1);
}

.chart-col__month {
  color: var(--tx-45);
}

.chart__caption {
  margin-top: var(--sp-6);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-lg);
  color: var(--tx-70);
  max-width: 52ch;
}

/* ---- proyek berikutnya ---- */

.case-next {
  text-align: center;
}

.case-next__kicker {
  color: var(--tx-70);
  margin-bottom: var(--sp-5);
}

.case-next__link {
  display: inline-block;
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--tv-black);
}

.case-next__link .arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}

.case-next__link:hover .arrow {
  transform: translateX(10px);
}

.case-next__meta {
  margin-top: var(--sp-4);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--tx-70);
}

.case-next__cta {
  margin-top: var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
}

/* ==================== CUSTOM CURSOR (desktop) ==================== */
/* dibuat via JS hanya saat (hover:hover)+(pointer:fine), non reduced-motion */

body.has-cursor,
body.has-cursor a,
body.has-cursor button {
  cursor: none;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--fill-brand);
}

.cursor-ring {
  width: 38px;
  height: 38px;
  border: 1px solid var(--tv-light-teal);
}

/* ==================== FOOTER ==================== */

.footer {
  background: var(--teal-950);
  color: var(--tv-white);
  padding-block: var(--sp-9) var(--sp-6);
}

.footer__grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--line-1);
}

/* white version on dark background (Brand Guide p.31) */
.footer__logo img {
  height: 7.5rem;
  width: auto;
}

.footer__tag {
  color: var(--tx-45);
}

.footer__tag .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-lg);
  color: var(--tv-white);
  display: block;
  margin-bottom: var(--sp-3);
}

.footer__social {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: right;
}

.footer__social a {
  font-size: var(--fs-small);
  color: var(--tx-70);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__social a:hover {
  color: var(--tx-brand);
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-6);
  color: var(--tx-45);
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
}

/* ============================================================
   KEPATUHAN DESIGN SYSTEM §4 — teal sebagai TEKS
   #06A089 adalah warna ISI, bukan huruf. Di latar terang teks
   teal memakai #075D50; di latar gelap #06A089 justru benar
   karena kontrasnya terhadap hitam sudah cukup.
   ============================================================ */
.section-head__index { color: var(--tx-brand); }

/* ============================================================
   ==========  KOMPONEN PORTFOLIO KLIEN (2026 revisi)  ========
   Logo klien, logo wall, timeline, kartu klien, grid karya,
   lightbox, dan kredit. Semua memakai token di tokens.css.
   ============================================================ */

/* ---------- logo klien + fallback inisial ---------- */
.client-logo {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--fill-1);
  flex: none;
}
.client-logo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* kalau file logo tidak ada, img dilepas dan inisial brand yang tampil —
   jadi portfolio tidak pernah menampilkan gambar rusak */
.client-logo.is-fallback::before {
  content: attr(data-initials);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  background: var(--grad-brand);
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 0.42em;
}
.client-logo--card { width: 76px; height: 76px; font-size: 76px; }
.client-logo--wall { width: 84px; height: 84px; font-size: 84px; }
.client-logo--lg   { width: 128px; height: 128px; font-size: 128px; }

/* ---------- [05] logo wall ---------- */
.wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-7);
}
.wall__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-3);
  border: 1px solid var(--fill-1);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.wall__cell .client-logo {
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}
.wall__cell:hover,
.wall__cell:focus-visible {
  background: var(--fill-1);
  border-color: var(--line-brand);
  transform: translateY(-3px);
}
.wall__cell:hover .client-logo,
.wall__cell:focus-visible .client-logo { filter: grayscale(0); opacity: 1; }
.wall__name {
  color: var(--tx-70);
  text-align: center;
  line-height: 1.35;
  transition: color var(--dur-fast) var(--ease-out);
}
.wall__cell:hover .wall__name { color: var(--ink); }
.wall__cta { margin-top: var(--sp-7); display: flex; justify-content: center; }

/* ---------- header halaman (karya.html) ---------- */
.page-header {
  background: var(--bg-page);
  color: var(--ink);
  padding: calc(var(--section-pad) * 0.85) 0 var(--sp-8);
}
.page-header__kicker { color: var(--tx-brand); display: block; margin-bottom: var(--sp-4); }
.page-header__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-5);
}
.page-header__title .serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--tx-brand);
}
.page-header__lead {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--tx-70);
  max-width: 46ch;
}
.page-header__stats {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-1);
}
.pstat { display: flex; flex-direction: column; gap: 0.2rem; }
.pstat__v {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-h3); letter-spacing: var(--ls-tight);
  color: var(--tx-brand);
}
.pstat__l { color: var(--tx-70); }

/* ---------- grid kartu klien ---------- */
.client-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.client-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-6);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  background: var(--fill-1);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.client-card:hover, .client-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--line-brand);
  background: var(--fill-brand-soft);
}
.client-card__badge {
  position: absolute; top: var(--sp-5); right: var(--sp-5);
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-1);
  color: var(--tx-70);
  font-size: var(--fs-micro);
}
.client-card.is-aktif .client-card__badge {
  color: var(--ink); background: var(--fill-brand); border-color: transparent;
}
.client-card.is-arsip { opacity: 0.72; }
.client-card__body { display: flex; flex-direction: column; gap: 0.3rem; }
.client-card__name {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight); color: var(--ink);
}
.client-card__handle { color: var(--tx-brand); }
.client-card__meta { color: var(--tx-70); }
.client-card__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  margin-top: auto; padding-top: var(--sp-4);
  border-top: 1px solid var(--line-1);
}
.client-card__works { color: var(--tx-brand); }
.client-card:hover .client-card__works .arrow { transform: translateX(4px); }
.client-card__works .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }

.grid-empty {
  text-align: center; color: var(--tx-45);
  font-family: var(--font-serif); padding: var(--sp-8) 0;
}

/* ---------- header klien (klien.html) ---------- */
.client-header {
  background: var(--bg-page); color: var(--ink);
  padding: calc(var(--section-pad) * 0.8) 0 var(--sp-8);
}
.client-header__top { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.client-header__kicker { color: var(--tx-brand); display: block; margin-bottom: var(--sp-3); }
.client-header__name {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-h1); line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight); margin-bottom: var(--sp-4);
}
.client-header__blurb {
  font-family: var(--font-serif); font-size: var(--fs-body-lg);
  line-height: var(--lh-body); color: var(--tx-70); max-width: 58ch;
}
.client-header__id { flex: 1 1 22rem; min-width: 0; }

.badge {
  display: inline-block; padding: 0.15rem 0.6rem;
  border-radius: var(--r-pill); font-size: var(--fs-micro);
  font-family: var(--font-sans); letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border: 1px solid var(--line-1); color: var(--tx-70);
}
.badge.is-aktif { background: var(--fill-brand); color: var(--ink); border-color: transparent; }

.scope-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-6);
}
.scope-row__label { color: var(--tx-70); margin-right: var(--sp-2); }

/* ---------- grid karya (Judul · Deskripsi · Foto) ---------- */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.work-item {
  display: flex; flex-direction: column;
  background: var(--fill-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  overflow: hidden;
  text-align: left;
  cursor: zoom-in;
  color: inherit; font: inherit;
  padding: 0;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.work-item:hover, .work-item:focus-visible {
  transform: translateY(-4px);
  border-color: var(--line-brand);
}
.work-item__shot {
  position: relative; display: block;
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--fill-1);
}
.work-item__shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.work-item:hover .work-item__shot img { transform: scale(1.04); }
.work-item__zoom {
  position: absolute; right: var(--sp-3); bottom: var(--sp-3);
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--scrim); color: var(--tv-white);
  font-size: var(--fs-small);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.work-item:hover .work-item__zoom,
.work-item:focus-visible .work-item__zoom { opacity: 1; transform: none; }
.work-item__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); }
.work-item__no { color: var(--tx-brand); }
.work-item__title {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-body-lg); line-height: 1.25;
  letter-spacing: var(--ls-tight); color: var(--ink);
}
.work-item__desc {
  font-family: var(--font-serif); font-size: var(--fs-small);
  line-height: var(--lh-body); color: var(--tx-70);
}

.works-empty {
  margin-top: var(--sp-6); padding: var(--sp-8);
  border: 1px dashed var(--line-1); border-radius: var(--r-md);
  text-align: center; color: var(--tx-70); font-family: var(--font-serif);
}
.works-empty__how { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--tx-45); }
.works-empty__cta { margin-top: var(--sp-5); }
.works-empty code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em; color: var(--tx-brand);
  background: var(--fill-brand-soft); padding: 0.1rem 0.35rem; border-radius: var(--r-sm);
}

/* ---------- lightbox ---------- */
body.is-locked { overflow: hidden; }
/* WAJIB: .lightbox punya display:grid, yang MENGALAHKAN display:none
   bawaan atribut [hidden]. Tanpa baris ini lightbox tetap membentang
   penuh layar walau tak terlihat, dan menelan seluruh klik di halaman. */
.lightbox[hidden] { display: none; }

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0, 0, 0, 0.92);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.lightbox.is-open { opacity: 1; }
.lightbox__figure {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  max-width: 72rem; width: 100%;
  transform: translateY(10px) scale(0.99);
  transition: transform var(--dur-med) var(--ease-out);
}
.lightbox.is-open .lightbox__figure { transform: none; }
.lightbox__img {
  width: 100%; max-height: 82vh; object-fit: contain;
  border-radius: var(--r-md); display: block;
  background: var(--fill-1);
}
.lightbox__cap { color: var(--tv-white); }
.lightbox__count { color: var(--tx-brand); display: block; margin-bottom: var(--sp-3); }
.lightbox__title {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight); margin-bottom: var(--sp-4);
}
.lightbox__desc {
  font-family: var(--font-serif); font-size: var(--fs-body);
  line-height: var(--lh-body); color: var(--tx-70);
}
.lightbox__close, .lightbox__nav {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-1);
  background: var(--fill-1); color: var(--tv-white);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.lightbox__close:hover, .lightbox__nav:hover {
  background: var(--fill-brand); color: var(--ink); border-color: transparent;
}
.lightbox__close { top: var(--sp-5); right: var(--sp-5); }
.lightbox__nav--prev { left: var(--sp-4); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--sp-4); top: 50%; transform: translateY(-50%); }

/* ---------- kredit di footer ---------- */
.footer__credits {
  margin-top: var(--sp-7); padding-top: var(--sp-6);
  border-top: 1px solid var(--line-1);
}
.footer__credits-note { color: var(--tx-45); margin-bottom: var(--sp-4); }
.footer__credits-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.credit {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.credit:hover, .credit:focus-visible { border-color: var(--line-brand); background: var(--fill-brand-soft); }
.credit__name { font-family: var(--font-sans); font-weight: 700; color: var(--tv-white); font-size: var(--fs-small); }
.credit__handle { color: var(--tx-brand); }
.credit__role { color: var(--tx-45); }

.nav__link.is-current { color: var(--tx-brand); }

/* ---------- responsif ---------- */
@media (max-width: 1024px) {
  .wall { grid-template-columns: repeat(4, 1fr); }
  .client-grid, .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lightbox__figure { grid-template-columns: 1fr; align-content: start; }
  .lightbox__img { max-height: 58vh; }
}
@media (max-width: 768px) {
  .wall { grid-template-columns: repeat(3, 1fr); }
  .client-header__name, .page-header__title { font-size: var(--fs-h2); }
}
@media (max-width: 560px) {
  .wall { grid-template-columns: repeat(2, 1fr); }
  .client-grid, .works-grid { grid-template-columns: 1fr; }
  .lightbox__nav { width: 2.5rem; height: 2.5rem; }
  .lightbox__nav--prev { left: var(--sp-2); }
  .lightbox__nav--next { right: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  .work-item, .client-card, .wall__cell, .work-item__shot img,
  .lightbox, .lightbox__figure { transition: none; }
}

/* ============================================================
   METRIK DI LATAR TERANG
   Seksi Hasil pindah dari latar gelap ke bg-grey, jadi warna
   bawaannya (putih / white-45) tidak terbaca. Override di sini
   supaya kontrasnya benar tanpa mengubah versi latar gelap.
   ============================================================ */
.bg-grey .metric,
.bg-white .metric { border-left-color: var(--line-2); }
.bg-grey .metric__value,
.bg-white .metric__value { color: var(--ink); }
.bg-grey .metric__label,
.bg-white .metric__label { color: var(--tx-brand); }
.bg-grey .metric__note,
.bg-white .metric__note { color: rgba(0, 0, 0, 0.55); }
.bg-grey .metrics-foot__note,
.bg-white .metrics-foot__note { color: rgba(0, 0, 0, 0.70); }

/* ---------- meta-bar versi halaman klien ---------- */
/* Markup lama memakai .meta__label; halaman klien memakai
   .meta-bar__item > .label, jadi butuh aturannya sendiri
   supaya label tidak menempel ke nilainya. */
.meta-bar__item { display: flex; flex-direction: column; gap: 0.35rem; }
.meta-bar__item > .label { color: var(--tx-70); }
.meta-bar__item a { color: var(--tx-brand); text-decoration: none; }
.meta-bar__item a:hover { text-decoration: underline; }
.meta-bar__item .badge { align-self: flex-start; }

/* ---------- karya berupa DOKUMEN / DESAIN ---------- */
/* Foto boleh dipotong rapat (cover) karena yang penting suasananya.
   Halaman brand guideline, contact sheet, dan sampul reels harus
   tampil UTUH — memotongnya sama saja merusak karyanya. */
.work-item__shot.is-doc {
  aspect-ratio: 4 / 3;
  background: var(--paper-deep);
  padding: var(--sp-3);
}
.work-item__shot.is-doc img { object-fit: contain; }
.work-item:hover .work-item__shot.is-doc img { transform: scale(1.02); }

/* ============================================================
   DUA PULAU GELAP DI SISTEM TERANG
   Situs berlatar kertas, tapi footer dan lightbox tetap gelap —
   sama seperti blok kutipan gelap di referensi Design System.
   Token lapisan dibalik di dalam keduanya supaya garis, isian,
   dan teks sekundernya tetap terlihat tanpa menulis ulang
   satu pun aturan komponen di atas.
   ============================================================ */
.footer,
.lightbox {
  --tx-90:  rgba(255,255,255,.92);
  --tx-70:  rgba(255,255,255,.72);
  --tx-45:  rgba(255,255,255,.48);
  --line-1: rgba(255,255,255,.18);
  --line-2: rgba(255,255,255,.14);
  --fill-1: rgba(255,255,255,.08);
  --fill-2: rgba(255,255,255,.10);
  --tx:     var(--tv-white);
  --tx-brand: var(--tv-light-teal);   /* teks teal di latar gelap pakai light-teal */
}

/* Di bidang #06A089, hitam 66% hanya mencapai 4.05:1. Token lapisan
   dipekatkan khusus di sana supaya label kecil tetap lolos 4.5:1. */
.bg-teal {
  --tx-70: rgba(0,0,0,.86);
  --tx-45: rgba(0,0,0,.72);
}

/* ============================================================
   GRAIN — tingkat HEAVY (ketetapan C1 21 Agu)
   Lapisan [EKSPRESI] Design System §8. Overlay noise 128px yang
   membuat kertas terasa kertas, bukan bidang putih rata.
   Dipasang di permukaan halaman, bukan di kartu — supaya kartu
   tetap terbaca bersih di atasnya.
   ============================================================ */
.hero, .section, .page-header, .client-header, .footer { position: relative; isolation: isolate; }
.hero::after, .section::after, .page-header::after,
.client-header::after, .footer::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 128px 128px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: .46;                      /* grain-heavy */
}
/* Isi seksi harus di ATAS lapisan grain — tapi hanya pembungkus isinya.
   Menaikkan SEMUA anak akan memaksa elemen yang memang absolut
   (blob, kabut, petunjuk scroll) jadi relative dan posisinya rusak. */
.hero > .container,
.section > .container,
.page-header > .container,
.client-header > .container,
.footer > .container { position: relative; z-index: 2; }
.scroll-hint { z-index: 3; }

/* di bidang gelap, overlay terbaca terlalu keras — turunkan sedikit */
.footer::after { opacity: .30; mix-blend-mode: soft-light; }

/* ============================================================
   FORM AUDIT GRATIS
   Kontrol form menyalin spesifikasi Design System v2.1
   components/04-forms.html apa adanya — bukan gaya baru.
   ============================================================ */
.audit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.audit__lead {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--tx-70);
  max-width: 40ch;
}
.audit__points { list-style: none; margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.audit__points li {
  display: flex; gap: var(--sp-3);
  font-size: var(--fs-small); line-height: 1.55; color: var(--tx-70);
}
.audit__tick {
  flex: none; width: 1.35rem; height: 1.35rem;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--fill-brand); color: var(--tv-black);
  font-size: 0.72rem; font-weight: 700;
}
.audit__privacy {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--line-1);
  font-size: var(--fs-label); line-height: 1.6; color: var(--tx-70);
  max-width: 46ch;
}
.audit__privacy a { color: var(--tx-brand); }

/* ---------- kartu form ---------- */
.formwrap {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(1.5rem, 3vw, var(--s7));
  border-radius: var(--r-card);
  background: linear-gradient(160deg, var(--mint-300) 0%, var(--paper) 46%, var(--sand-300) 100%);
  box-shadow: var(--shadow-card);
}
.formwrap::before {           /* bola kabur — bahasa [EKSPRESI] sistem */
  content: ""; position: absolute; z-index: 0;
  width: 320px; height: 320px; right: -110px; top: -120px;
  border-radius: 50%; filter: blur(64px);
  background: var(--tv-light-teal); opacity: .55;
}
.formwrap > * { position: relative; z-index: 3; }

.f { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--s5); }
.f label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ink-muted);
}
.inp {
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--tv-white); border: 0;
  box-shadow: inset 0 0 0 1.2px var(--hairline);
  border-radius: var(--r-pill);
  padding: 14px 20px; outline: none; width: 100%;
  transition: box-shadow .14s ease;
}
.inp::placeholder { color: var(--sand-700); }
.inp:focus { box-shadow: inset 0 0 0 2px var(--fill-brand); }
.inp.is-invalid { box-shadow: inset 0 0 0 2px #B03A2E; }
textarea.inp { border-radius: var(--r-card); min-height: 120px; resize: vertical; line-height: 1.55; }
select.inp {
  appearance: none; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.hint { font-size: 12px; color: var(--ink-muted); }
.hint-err { font-size: 12px; color: #B03A2E; font-weight: 700; }
.hint-err a { color: #B03A2E; }
.f label.chk,
.chk {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14px; line-height: 1.5; color: var(--ink-muted);
  cursor: pointer;
  /* .chk juga sebuah <label>, jadi gaya label kapital-renggang di atas
     ikut kena. Dikembalikan ke kalimat biasa supaya terbaca. */
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.chk input { margin-top: 3px; width: 17px; height: 17px; accent-color: #06A089; flex: none; }
.btn--block { width: 100%; justify-content: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- status berhasil ---------- */
.audit__done { text-align: center; padding: var(--sp-5) 0; }
.audit__done-mark {
  width: 3.25rem; height: 3.25rem; margin: 0 auto var(--sp-5);
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--fill-brand); color: var(--tv-black);
  font-size: 1.5rem; font-weight: 700;
}
.audit__done-t { font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-tight); }
.audit__done-d {
  font-family: var(--font-serif); font-size: var(--fs-body);
  line-height: var(--lh-body); color: var(--tx-70);
  margin: var(--sp-3) auto var(--sp-6); max-width: 34ch;
}

@media (max-width: 900px) {
  .audit { grid-template-columns: 1fr; }
}

/* ============================================================
   KETERKLIKAN
   Aturannya satu: yang bisa diklik harus terlihat bisa diklik
   tanpa perlu disentuh kursor dulu — karena di layar sentuh
   tidak ada kursor. Tiap elemen di bawah punya tanda tetap,
   bukan hanya efek hover.
   ============================================================ */

/* ---------- baris layanan (dulu <li> berpanah yang tak ke mana-mana) ---------- */
a.svc-row { text-decoration: none; color: inherit; cursor: pointer; }
a.svc-row:hover,
a.svc-row:focus-visible { background: var(--fill-brand-soft); }
a.svc-row:hover .svc-row__name,
a.svc-row:focus-visible .svc-row__name { color: var(--tx-brand); }

/* dropdown berkedip sekali saat terisi otomatis dari baris layanan,
   supaya pengguna sadar pilihannya sudah dibuatkan */
.inp.is-prefilled {
  box-shadow: inset 0 0 0 2px var(--fill-brand);
  animation: prefill 1.6s var(--ease-out);
}
@keyframes prefill {
  0%, 100% { background-color: var(--tv-white); }
  22%      { background-color: var(--teal-50); }
}

/* ---------- metrik yang menautkan ---------- */
.metric--link { text-decoration: none; color: inherit; position: relative; }
.metric--link .metric__go {
  display: inline-block; margin-top: var(--sp-2);
  font-size: var(--fs-label); color: var(--tx-brand);
  transition: transform var(--dur-fast) var(--ease-out);
}
.metric--link:hover .metric__go,
.metric--link:focus-visible .metric__go { transform: translateX(5px); }
.metric--link:hover .metric__value { color: var(--tx-brand); }

/* ---------- isyarat tetap di logo wall ---------- */
.wall__cell { position: relative; }
.wall__go {
  position: absolute; right: var(--sp-3); top: var(--sp-3);
  font-size: var(--fs-label); color: var(--tx-brand);
  opacity: .42;                                  /* selalu terlihat, tidak menuntut hover */
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wall__cell:hover .wall__go,
.wall__cell:focus-visible .wall__go { opacity: 1; transform: translateX(3px); }

/* ---------- blok "klien berikutnya" ---------- */
a.case-next {
  display: block; text-decoration: none; color: inherit;
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--r-card);
  border: 1.5px solid rgba(0,0,0,.22);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
a.case-next:hover,
a.case-next:focus-visible {
  background: rgba(255,255,255,.30);
  border-color: var(--tv-black);
  transform: translateY(-3px);
}
.case-next__link { display: block; }
.case-next__meta { display: block; }
.case-next__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--sp-4);
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-small); color: var(--tv-black);
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
a.case-next:hover .case-next__go .arrow { transform: translateX(5px); }
.case-next__go .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }

/* ---------- fokus papan ketik terlihat di seluruh situs ---------- */
a:focus-visible, button:focus-visible,
.work-item:focus-visible, .wall__cell:focus-visible, .client-card:focus-visible {
  outline: 2.5px solid var(--tx-brand);
  outline-offset: 3px;
}
.bg-teal a:focus-visible, .bg-teal button:focus-visible { outline-color: var(--tv-black); }
.footer a:focus-visible { outline-color: var(--tv-light-teal); }

/* ============================================================
   TARGET SENTUH DI PONSEL
   Trafik dari bio Instagram/TikTok/Linktree hampir seluruhnya
   ponsel, dan dibuka di browser dalam-aplikasi. Semua sasaran
   jempol dinaikkan ke 44px (pedoman Apple) tanpa mengubah
   tampilan di layar besar.
   ============================================================ */
@media (max-width: 900px), (pointer: coarse) {
  .nav__logo { display: flex; align-items: center; min-height: 44px; padding-block: 10px; }

  .footer__social a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-block: 8px;
  }

  .audit__privacy a { display: inline-block; padding-block: 10px; }

  .meta-bar__item a { display: inline-flex; align-items: center; min-height: 40px; }

  .filter-chip { min-height: 44px; }

  /* kotak centang persetujuan: kotaknya kecil, tapi seluruh label
     memang sudah bisa ditekan — cukup diberi ruang jempol */
  .chk { padding-block: 6px; min-height: 44px; align-items: center; }
  .chk input { width: 21px; height: 21px; margin-top: 0; }
}

/* ============================================================
   DOK KONTAK MELAYANG
   Empat kanal, selalu terjangkau jempol. Tertutup secara bawaan
   supaya tidak menutupi isi; sekali ketuk membuka semuanya.
   ============================================================ */
.dock {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  /* Badge "Powered by Netlify" (bawaan paket gratis) menempel di pojok
     kanan bawah sebagai iframe 202x64 px. Seluruh kotaknya menelan klik
     -- bukan cuma pil yang terlihat -- jadi tombol WhatsApp di bawahnya
     tertutup DAN tidak bisa ditekan. Dok diangkat melewati badge itu.
     Angka 76px = 64 tinggi badge + 12 jarak napas; nilainya diukur ulang
     oleh js/contact-dock.js, jadi begitu situs pindah ke domain sendiri
     (badge hilang) dok turun sendiri ke pojok tanpa menyunting apa pun. */
  bottom: max(clamp(1rem, 3vw, 2rem), var(--dock-lift, 76px));
  z-index: 55;                        /* di bawah lightbox (60), di atas isi */
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3);
}

.dock__list {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.dock.is-shown .dock__list { opacity: 1; transform: none; }

.dock__item {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: 48px; padding: 0 var(--sp-5) 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--tv-white);
  box-shadow: 0 6px 22px rgba(0,0,0,.16);
  text-decoration: none; color: var(--ink);
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-small);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.dock__item:hover, .dock__item:focus-visible {
  transform: translateX(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.dock__ico {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: var(--r-pill);
}
.dock__ico svg { width: 19px; height: 19px; fill: currentColor; display: block; }

/* tiap kanal memakai warna sistem — bukan warna merek pihak lain,
   supaya dok tetap terbaca sebagai milik Tranova */
.is-wa   .dock__ico { background: var(--fill-brand);   color: var(--tv-black); }
.is-mail .dock__ico { background: var(--teal-800);     color: var(--tv-white); }
.is-ig   .dock__ico { background: var(--tv-light-teal);color: var(--teal-900); }
.is-tt   .dock__ico { background: var(--tv-pale-blue); color: var(--teal-900); }

.dock__toggle {
  position: relative;
  width: 60px; height: 60px; flex: none;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--fill-brand); color: var(--tv-black);
  box-shadow: 0 8px 26px rgba(6,160,137,.42);
  display: grid; place-items: center;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.dock__toggle:hover { transform: scale(1.05); }
.dock__toggle svg { width: 28px; height: 28px; fill: currentColor; }
.dock__toggle-ico, .dock__toggle-x {
  grid-area: 1 / 1; display: grid; place-items: center;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.dock__toggle-x { font-size: 1.35rem; font-weight: 700; opacity: 0; transform: rotate(-90deg); }
.dock.is-open .dock__toggle { background: var(--teal-900); color: var(--tv-white); }
.dock.is-open .dock__toggle-ico { opacity: 0; transform: rotate(90deg); }
.dock.is-open .dock__toggle-x { opacity: 1; transform: none; }

@media (max-width: 560px) {
  .dock__item { font-size: var(--fs-label); padding-right: var(--sp-4); }
  .dock__toggle { width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .dock__list, .dock__item, .dock__toggle,
  .dock__toggle-ico, .dock__toggle-x { transition: none; }
}

/* ==================== [09b] PROSES — DOKUMENTASI LAPANGAN ====================
   Foto kerja nyata di bawah tiga langkah Proses. Rasio asli dipertahankan
   (tanpa crop paksa), jadi grid-nya memakai kolom CSS, bukan tinggi tetap.
   Warna & jarak seluruhnya dari token — tidak ada nilai warna baru di sini. */

.fieldwork {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--line-1);
}

.fieldwork__head {
  max-width: 62ch;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.fieldwork__kicker {
  display: block;
  color: var(--tx-brand);
  margin-bottom: var(--sp-3);
}

.fieldwork__intro {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--tx-70);
}

.fieldwork__grid {
  column-count: 3;
  column-gap: clamp(1rem, 2.5vw, 1.75rem);
}

.fieldwork__item {
  break-inside: avoid;
  margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
}

.fieldwork__img {
  display: block;
  width: 100%;
  height: auto;                 /* rasio asli — tidak dipotong */
  border-radius: var(--r-md);
  background: var(--fill-1);
}

.fieldwork__cap {
  margin-top: 0.7rem;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--tx-70);
  max-width: 42ch;
}

@media (max-width: 900px) {
  .fieldwork__grid { column-count: 2; }
}

@media (max-width: 560px) {
  .fieldwork__grid { column-count: 1; }
  .fieldwork__cap  { max-width: none; }
}