/* ========== Teks kecil ========== */
.kicker {
  font-family: var(--font-text);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

/* ========== Tombol ========== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 50px; padding: 0 25px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease-soft), background-color .2s, color .2s, border-color .2s;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn--sage { background: var(--sage); color: var(--ivory); }
.btn--sage:hover, .btn--sage:focus-visible { background: var(--sage-dark); }
.btn--gold { background: transparent; color: var(--ivory); border-color: var(--gold); }
.btn--gold:hover, .btn--gold:focus-visible { background: var(--gold); }
.btn--outline { background: transparent; color: var(--ivory); border-color: var(--ivory-soft); }
.btn--outline:hover, .btn--outline:focus-visible { border-color: var(--ivory); }
.btn--outline-dark { background: transparent; color: var(--sage); border-color: var(--sage); }
.btn--outline-dark:hover, .btn--outline-dark:focus-visible { background: var(--sage); color: var(--ivory); }
.btn--ink { background: var(--ink); color: var(--ivory); }
.btn--ink:hover, .btn--ink:focus-visible { background: var(--sage); }

/* ========== Label coming soon ========== */
.soon {
  display: inline-block; vertical-align: middle; margin-left: .5em;
  padding: 5px 10px; border-radius: 999px;
  background: var(--gold); color: var(--ink);
  font-family: var(--font-text); font-weight: 800; font-size: .66rem; line-height: 1.2;
  letter-spacing: .14em; text-transform: uppercase; font-style: normal;
}

/* ========== Placeholder foto ========== */
.ph {
  position: relative; min-height: 240px;
  background:
    radial-gradient(circle at 30% 25%, var(--ivory-soft), transparent 40%),
    linear-gradient(135deg, var(--sage), var(--sage-dark));
}
.ph::after {
  content: attr(data-label);
  position: absolute; inset: auto 0 18px; text-align: center;
  font: 800 .66rem/1.3 var(--font-text); letter-spacing: .16em; color: var(--ivory);
}

/* ========== Header (top bar) — ukuran ikut top bar referensi ========== */
.site-header {
  position: sticky; top: 0; z-index: 1100;
  height: var(--header-h);
  background: var(--ivory); color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background-color .18s, color .18s, box-shadow .18s;
}
.site-header__inner {
  display: grid; grid-template-columns: minmax(180px, .8fr) auto minmax(240px, .8fr); align-items: center; gap: 30px;
  width: min(100% - 48px, 1440px); height: 100%; margin-inline: auto;
}
/* Lebar logo ≈ clamp(188px, 15vw, 220px) */
.brand {
  justify-self: start; color: var(--sage);
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-size: clamp(1.85rem, 2.35vw, 2.2rem); line-height: 1;
  text-transform: lowercase; letter-spacing: 0;
}
.brand__wise { color: var(--gold); }
.site-header__menu {
  display: flex; justify-content: center; align-items: center; gap: clamp(16px, 2vw, 34px);
  list-style: none; margin: 0; padding: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* paling dekat ke font menu referensi */
  font-weight: 700; font-size: .71rem; line-height: 1.2; letter-spacing: .105em; text-transform: uppercase; white-space: nowrap;
}
.site-header__menu a { display: block; padding: 8px 0 4px; transition: color .2s, box-shadow .2s; } /* +2px biar sejajar dengan referensi */
.site-header__menu a:hover { color: var(--sage); }
.site-header__menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }
.site-header__actions { justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.site-header__icon { display: grid; place-items: center; width: 30px; height: 30px; color: var(--sage); }
.site-header__icon svg { width: 16px; height: 16px; }
.site-header__cta { min-height: 48px; padding: 0 24px; margin-left: 7px; font-size: .78rem; letter-spacing: .09em; }
.site-header__cta:hover, .site-header__cta:focus-visible { background: var(--ink); }
.site-header__toggle { display: none; }

.site-header.is-scrolled { background: var(--sage); color: var(--ivory); box-shadow: var(--shadow-header); }
.site-header.is-scrolled .brand, .site-header.is-scrolled .site-header__icon { color: var(--ivory); }
.site-header.is-scrolled .site-header__menu a:hover { color: var(--gold); }
.site-header.is-scrolled .site-header__cta { background: var(--ivory); color: var(--sage); border-color: var(--ivory); }
.site-header.is-scrolled .site-header__cta:hover,
.site-header.is-scrolled .site-header__cta:focus-visible { background: var(--gold); color: var(--ink); border-color: var(--gold); }

@media (max-width: 1100px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-header__menu, .site-header__actions { display: none; }
  .site-header__toggle {
    display: grid; place-items: center; justify-self: end;
    width: 45px; height: 45px; padding: 0; border-radius: 50%;
    border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer;
    font-weight: 700; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  }
  .site-header[data-open="true"] { height: auto; padding-bottom: 24px; }
  .site-header[data-open="true"] .site-header__inner { height: auto; min-height: var(--header-h); row-gap: 12px; }
  .site-header[data-open="true"] .site-header__menu,
  .site-header[data-open="true"] .site-header__actions {
    display: flex; flex-direction: column; align-items: center; grid-column: 1 / -1; justify-self: stretch;
  }
  .site-header[data-open="true"] .site-header__menu { gap: 0; }
  .site-header[data-open="true"] .site-header__menu a { padding: 11px; }
}

/* ========== Footer ========== */
.site-footer {
  background: var(--ink); color: var(--ivory);
  padding: clamp(60px, 8vw, 110px) clamp(24px, 5vw, 78px) 26px;
  /* Minimal setinggi layar di bawah header: pas di-scroll mentok, section sebelumnya gak nyisa kelihatan */
  min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column;
}
.site-footer__brand {
  margin: 0; padding-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--line-ivory);
  /* Ukuran sama dengan brand footer referensi */
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-size: clamp(3.2rem, 8vw, 9.6rem); line-height: .9;
  letter-spacing: -.005em; text-transform: lowercase; white-space: nowrap;
}
.site-footer__grid {
  display: grid; grid-template-columns: .8fr 1.15fr .8fr 1.3fr; gap: 32px;
  padding: clamp(40px, 5vw, 64px) 0;
  border-bottom: 1px solid var(--line-ivory);
  flex: 1 0 auto; align-content: start;
}
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__col a { font-weight: 700; font-size: .88rem; line-height: 1.9; transition: color .2s; }
.site-footer__col a:hover { color: var(--gold); }
.site-footer__col .btn { margin-top: 4px; line-height: 1; }
.site-footer__col .btn:hover { color: var(--ivory); }
.site-footer__label {
  margin: 0 0 18px; color: var(--gold);
  font-weight: 800; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
}
.site-footer__quote {
  margin: 0 0 22px;
  font-family: var(--font-accent); font-style: italic; font-weight: 500; font-size: 1.55rem; line-height: 1.25;
}
.site-footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 22px;
  font-weight: 800; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
}
@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__col--cta { grid-column: 1 / -1; }
  .site-footer__bottom { flex-direction: column; }
}

/* ========== Reveal on scroll ========== */
.js .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ========== Marquee ========== */
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ========== Grid karya (gaya koran) ========== */
.work-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong);
}
.work-card {
  display: flex; flex-direction: column; min-height: 330px;
  padding: clamp(28px, 4vw, 56px);
  border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  transition: background-color .26s var(--ease-soft), color .26s;
}
.work-card__tag { color: var(--ink); transition: color .26s; }
.work-card h3 { color: var(--ink); font-size: clamp(1.6rem, 3vw, 3rem); transition: color .26s; }
.work-card p { max-width: 620px; margin: 14px 0 24px; font-size: .98rem; color: var(--ink); transition: color .26s; }
.work-card__cta {
  margin-top: auto; color: var(--sage);
  font-weight: 800; font-size: .7rem; letter-spacing: .11em; text-transform: uppercase;
}
.work-card:hover, .work-card:focus-visible { background: var(--sage); }
.work-card:hover *, .work-card:focus-visible * { color: var(--ivory); }
/* Kartu "coming soon": belum bisa diklik, kursor tetap panah biasa */
.work-card--soon, .work-card--soon * { cursor: default; }
@media (max-width: 760px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-card { padding: 28px 22px 32px; min-height: 0; }
}

/* ========== Toast ========== */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 2000;
  transform: translateX(-50%);
  padding: 12px 22px; border-radius: 999px;
  background: var(--ink); color: var(--ivory);
  font-weight: 700; font-size: .8rem; border: 1px solid var(--line-ivory);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.toast.is-shown { opacity: 1; }
/* Language switch: the reference sliding pill, with ID / EN labels. */
.site-header__inner { grid-template-columns: minmax(180px, 1fr) auto minmax(260px, 1fr); gap: 24px; }
.language-toggle {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-self: end;
  width: 72px; height: 36px; padding: 3px; flex-shrink: 0;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--ivory); color: var(--sage); cursor: pointer;
  font-family: var(--font-text); font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .03em;
  transition: background .4s cubic-bezier(.32,.72,0,1), border-color .4s cubic-bezier(.32,.72,0,1);
}
.language-toggle[hidden] { display: none; }
.language-toggle__thumb {
  position: absolute; z-index: -1; top: 2px; left: 2px; width: 30px; height: 30px;
  background: var(--sage); border-radius: 50%; transform: translateX(0);
  transition: transform .55s cubic-bezier(.32,.72,0,1);
}
.language-toggle__label { display: grid; place-items: center; width: 50%; height: 100%; transition: color .4s cubic-bezier(.32,.72,0,1); }
.language-toggle__label:nth-of-type(2) { color: var(--ivory); }
.language-toggle[aria-checked="true"] .language-toggle__thumb { transform: translateX(36px); }
.language-toggle[aria-checked="true"] .language-toggle__label:nth-of-type(2) { color: var(--sage); }
.language-toggle[aria-checked="true"] .language-toggle__label:last-child { color: var(--ivory); }
.language-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.site-header.is-scrolled .language-toggle { border-color: var(--gold); }
@media (max-width: 1100px) {
  .site-header__inner { width: min(100% - 32px, 1440px); grid-template-columns: minmax(0, 1fr) 72px 45px; column-gap: 12px; }
  .site-header__inner > .brand { grid-column: 1; grid-row: 1; font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
  .language-toggle { grid-column: 2; grid-row: 1; }
  .site-header__toggle { grid-column: 3; grid-row: 1; }
  .site-header[data-open="true"] .site-header__menu,
  .site-header[data-open="true"] .site-header__actions { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  html[lang="en"] .build-services h2 { font-size: clamp(1.6rem, 8.8vw, 3rem); }
}
@media (prefers-reduced-motion: reduce) { .language-toggle__thumb { transition: none; } }

/* Translation text wrappers are transparent to the original heading layout. */
span.i18n-text[data-i18n] { display: contents; }
@media (min-width: 1101px) {
  .site-header__utilities { grid-column: 3; grid-row: 1; }
}
/* Keep language and the contact CTA together on the right. */
.site-header__utilities { display: flex; align-items: center; justify-content: flex-end; gap: 20px; min-width: 0; }
.site-header__utilities .site-header__cta { margin-left: 0; }
@media (max-width: 1100px) {
  .site-header__utilities { display: contents; }
}
/* Footer contact details and unavailable WhatsApp. */
.site-footer__pending { font-weight: 700; font-size: .88rem; line-height: 1.9; }
.site-footer__col a[href^="mailto:"] { overflow-wrap: anywhere; max-width: 100%; }