/* Figma reference: uACIize3nmAXVtk3W6C62U.
   Exact reference type sizes; responsive interpolation between the supplied
   desktop/mobile frames where Figma provides no intermediate breakpoint. */
.hero--about {
  container-type: inline-size;
  min-height: 900px;
}
.hero--about .hero__bg img {
  /* Interpolate the actual rendered image, including the desktop cover crop.
     At 428px: 1994 × 1122, x -900, y -216.
     At 1440px: 2391 × 1345, x -657, y -445. */
  width: calc(1826.06px + 39.22925cqw + .784585 * var(--gutter));
  height: auto;
  left: max(calc(-1002.77px + 24.01186cqw + .4802372 * var(--gutter)), calc(60.77075cqw + 1.215415 * var(--gutter) - 1826.06px));
  top: calc(-119.15px - 22.62846cqw - .4525692 * var(--gutter));
  object-fit: contain;
  object-position: center;
}
.hero--about .hero__fade {
  height: 424px;
  background: linear-gradient(to bottom, transparent 13.445%, #000 90.845%);
}
.about-lede { gap: 24px 0; }
.about-lede__title {
  font-size: 50px;
  line-height: 1;
  letter-spacing: -.04em;
  flex-basis: 50%;
  color: #fff;
}
.about-lede__text {
  font-size: 16px;
  line-height: normal;
  flex-basis: 50%;
  color: #fff;
}
.clients--light .clients__title { font-size: 45px; line-height: 1.08; }
.clients--light .clients__subtitle { font-size: 16px; opacity: .8; color: #000; }
.clients--light .clients__more { font-size: 14px; opacity: 1; color: #000; }

/* Services: stroke is a 45%-opacity white-to-black gradient in Figma.
   Draw it separately so it never becomes an opaque rectangular outline. */
.services {
  padding: 134px var(--gutter) 134px;
  background: #000;
  isolation: isolate;
}
.services::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 940px;
  z-index: -1;
  background: linear-gradient(to bottom, #000 -16.7%, #812b15 14.17%, #000 73.599%);
  pointer-events: none;
}
.services__title {
  font-size: 50px;
  height: 70px;
  line-height: 84px;
  letter-spacing: -.04em;
  margin-bottom: 83px;
  color: #fff;
}
.services__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 25px;
}
.services .scard {
  position: relative;
  min-width: 0;
  min-height: 519px;
  border: 0;
  border-radius: 30.275px;
  /* Dulu 58.189% dari tinggi kartu. Karena tinggi kartu berubah-ubah
     (judul kadang turun dua baris), titik #131315 ikut bergeser, jadi warna
     persis di bawah jahitan gambar tidak selalu sama dengan warna tujuan
     fade — itu yang membuat sambungannya terlihat di sebagian viewport.
     Dipatok ke 303px, sejajar tinggi area gambar, supaya selalu sama. */
  background: linear-gradient(to bottom, #131315 303px, #000 100%);
  box-shadow: none;
}
.services .scard::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.08125px;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,.45) 0%, rgba(255,255,255,.45) 41.281%, rgba(0,0,0,.45) 82.563%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: 3;
  pointer-events: none;
}
/* Tinggi pecahan membuat tepi bawah jatuh di antara dua piksel, dan
   hasilnya berbeda-beda per lebar layar. Dibulatkan ke 303px. */
.services .scard__media {
  height: 303px;
  flex: 0 0 303px;
}
/* Fade sudah pekat di 92%, bukan tepat di tepi bawah, jadi baris terakhir
   gambar tidak pernah mengintip sebagai garis terang. */
.services .scard__media::after {
  height: 131px;
  background: linear-gradient(to bottom, rgba(19,19,21,0), rgba(19,19,21,.851) 72%, #131315 92%);
}
.services .scard__body {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 16px;
  padding: 23px 21.625px 21.625px;
}
.services .scard__title {
  font-size: 35px;
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 400;
  min-height: var(--services-title-row, 70px);
  margin-bottom: 16px;
  color: #fff;
}
.services .scard__title span { display: block; }
.services .scard__desc {
  font-size: 10px;
  line-height: 19.4625px;
  color: rgba(255,255,255,.502);
}
.services .btn--pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 104.862px;
  min-height: 33.4237px;
  padding: 9.712px;
  font-size: 12px;
  border: .607px solid rgba(242,236,228,.2);
  background: rgba(255,255,255,.12);
  color: #fff;
}
.services .btn--pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-orange);
  opacity: 0;
  transition: opacity 200ms ease;
}
.services .btn--pill:is(:hover, :focus-visible, :active)::before { opacity: 1; }
.services .btn--pill:is(:hover, :focus-visible, :active) { border-color: var(--orange-20); }
@media (hover: none), (pointer: coarse) {
  .services .scard:hover, .services .scard:hover .scard__media img { transform: none; }
  .services .btn--pill { min-height: 44px; }
}
@media (hover: hover) and (pointer: fine) {
  .services .scard:hover { transform: none; box-shadow: none; }
  .services .scard:hover .scard__media img { transform: scale(1.025); }
}
@keyframes service-arrive {
  from { opacity: 0; transform: translateY(32px) scale(.97) rotate(.6deg); }
  72% { opacity: 1; transform: translateY(-2px) scale(1) rotate(0); }
  to { opacity: 1; transform: none; }
}
.service-enter-ready .scard:not(.is-in) { opacity: 0; }
.service-enter-ready .scard.is-in {
  animation: service-arrive 650ms cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--arrival-delay, 0) * 1ms);
}
.service-enter-ready .scard.is-in.is-settled { animation: none; }

/* Match detail fonts/colours to the four desktop detail frames. */
.dservice__title { font-size: 30px; font-weight: 300; line-height: 1; letter-spacing: -.04em; }
.dservice__back { font-size: 12.474px; font-weight: 600; opacity: 1; }
.dlist__item {
  font-size: 50px;
  line-height: 1.6;
  letter-spacing: -.05em;
  padding: 0;
  border-color: rgba(248,97,59,.4);
  text-transform: capitalize;
}
.dlist__item:first-child { border-top: 0; }
.dlist__item span[aria-hidden] { font-size: 15px; color: rgba(255,255,255,.4); text-shadow: 0 .608px 5px #f8613b; }
/* Geometri Figma: gambar 494 + jarak 91 + daftar 775 = 1360. Jarak itu
   dulunya ruang sisa di dalam kolom kiri, jadi ikut hilang begitu layar
   menyempit dan daftar terlihat mepet ke gambar. Sekarang jarak itu dibuat
   eksplisit sebagai gap, dan menyusut sebanding dengan lebar isi halaman. */
.dservice__grid {
  grid-template-columns: minmax(0,494fr) minmax(0,775fr);
  gap: clamp(40px, calc(6.69vw - 5px), 91px);
  align-items: end;
}
.dservice__media { width: 100%; }
.dservice__media[class*="dservice__media--"] { border: 1.023px solid #f8613b; border-radius: 23px; }
.dservice {
  background: linear-gradient(to bottom, transparent 0%, #000 90.845%), linear-gradient(-63.103deg, #000 .88739%, #f96330 85.459%);
}

/* Contact reference typography; input sizes remain touch-safe on small screens. */
.contact { container-type: inline-size; }
.contact__title { font-size: 75px; line-height: 1; letter-spacing: -.04em; }
.contact__lede { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.75); }
.contact__eyebrow { font-size: 14px; color: #cdbdad; }
.contact__row dt { font-size: 13px; opacity: 1; color: rgba(255,255,255,.502); }
.contact__row dd { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.4); }
.form-card__title { font-size: 35px; line-height: 1; letter-spacing: -.04em; }
.field__label { font-size: 11.264px; color: rgba(255,255,255,.85); }
.field__input { font-size: 12.069px; }
.field__input::placeholder { color: rgba(255,255,255,.502); }
.form-card { border-color: rgba(255,255,255,.2); }

@media (max-width: 1199px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dlist__item { font-size: clamp(30px, 3.48vw, 50px); line-height: 1.6; }
}
@media (max-width: 1023px) {
  .about-lede { flex-direction: column; align-items: flex-start; gap: 24px; }
  .about-lede__title, .about-lede__text { flex: 0 0 auto; width: 100%; }
  .hero--about .hero__text { text-align: left; align-items: flex-start; }
  .hero--about .hero__fade { height: 602px; }
}
@media (max-width: 860px) {
  /* Saat menumpuk, kolom kiri tidak lagi didorong ke bawah oleh daftar di
     kanan, jadi padding atas bawaan menyisakan 78px kosong di bawah navbar.
     Dirapatkan jadi sekitar 38px. */
  .dservice { padding-top: calc(var(--sp-8) + 104px); }
  .dservice__grid { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .contact { padding-top: 756px; }
  .contact__bg { height: 676px; }
  .contact__bg::after { background: linear-gradient(to bottom, transparent 480px, #000 660px); }
  .contact__fade { display: none; }
  .field__input { font-size: 16px; }
}
@media (max-width: 699px) {
  .services__grid { grid-template-columns: minmax(0,1fr); gap: 25px; }
  .services .scard__title { min-height: 0; }
  .services .btn--pill { min-height: 44px; }
  .services__title { height: auto; min-height: 70px; line-height: 1.2; }
}
@media (max-width: 379px) {
  .contact__title { font-size: 60px; }
  .dlist__item { font-size: 30px; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .service-enter-ready .scard, .service-enter-ready .scard.is-in { opacity: 1; animation: none; }
  .services .scard, .services .scard__media img, .services .btn--pill::before { transition: none; }
  .services .scard:hover, .services .scard:hover .scard__media img { transform: none; }
}

/* Revisi 12 Okt 2026 — hero About selalu terlihat utuh di desktop & tablet:
   bila layar lebih pendek dari 900px, tinggi hero mengikuti tinggi layar
   (minimal 560px) sehingga judul dan paragraf langsung terlihat tanpa scroll. */
@media (min-width: 600px) {
  .hero--about { min-height: max(560px, min(900px, 100vh)); }
  @supports (height: 100svh) { .hero--about { min-height: max(560px, min(900px, 100svh)); } }
}

/* Revisi 12 Okt 2026 — Services: satu section pas satu layar di desktop & tablet.
   Tinggi gambar kartu menyesuaikan tinggi layar, sehingga judul, keempat kartu,
   dan tombol See Details terlihat utuh; scroll sedikit langsung ke footer. */
@media (min-width: 1024px) {
  .services {
    --media: clamp(110px, calc(100svh - 432px - 7.5vh), 303px);
    min-height: max(560px, 100svh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(96px + 2vh);
    padding-bottom: 4vh;
    box-sizing: border-box;
  }
  .services__title { margin-bottom: clamp(18px, 3.5vh, 83px); }
  .services .scard { min-height: 0; background: linear-gradient(to bottom, #131315 var(--media), #000 100%); }
  .services .scard__media { height: var(--media); flex: 0 0 var(--media); }
  .services .scard__media::after { height: min(131px, 60%); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .services__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .services .scard__title { font-size: 26px; }
  .services .scard__body { padding: 18px 16px 16px; gap: 12px; }
}
/* Tablet tegak (2 × 2): dipaskan bila layarnya cukup tinggi. */
@media (min-width: 700px) and (max-width: 1023px) and (min-height: 900px) {
  .services {
    --media: clamp(100px, calc((100svh - 760px) / 2), 303px);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(92px + 1.5vh);
    padding-bottom: 3vh;
    box-sizing: border-box;
  }
  .services__title { margin-bottom: 24px; }
  .services__grid { gap: 18px; }
  .services .scard { min-height: 0; background: linear-gradient(to bottom, #131315 var(--media), #000 100%); }
  .services .scard__media { height: var(--media); flex: 0 0 var(--media); }
  .services .scard__media::after { height: min(131px, 60%); }
  .services .scard__body { padding: 18px 18px 18px; gap: 10px; }
}

/* Revisi 12 Okt 2026 — Services di HP: satu section pas satu layar.
   Keempat kartu berjejer horizontal dan bisa digeser (swipe) melewati tepi
   layar; tepi kiri-kanan memudar halus seperti Featured Project di Homepage.
   Tinggi gambar kartu mengikuti tinggi layar supaya tombol See Details
   selalu terlihat. */
@media (max-width: 699px) {
  .services {
    --media: clamp(110px, calc(100svh - 505px), 303px);
    min-height: max(560px, 100svh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(80px + 2vh);
    padding-bottom: 3vh;
    box-sizing: border-box;
  }
  .services > .container { width: 100%; }
  .services__title { margin-bottom: clamp(12px, 3vh, 40px); font-size: clamp(32px, 11vw, 50px); white-space: nowrap; min-height: 0; }
  .services .scard__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .services__grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - 44px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - 44px), transparent 100%);
  }
  .services__grid::-webkit-scrollbar { display: none; }
  .services__grid > .scard { flex: 0 0 82%; scroll-snap-align: start; }
  .services .scard { min-height: 0; background: linear-gradient(to bottom, #131315 var(--media), #000 100%); }
  .services .scard__media { height: var(--media); flex: 0 0 var(--media); }
  .services .scard__media::after { height: min(131px, 60%); }
  .services .scard__title { font-size: 30px; margin-bottom: 10px; }
  .services .scard__body { padding: 18px 18px 18px; gap: 12px; }
  .services .scard:hover, .services .scard:hover .scard__media img { transform: none; }
}
@supports not (height: 100svh) {
  @media (max-width: 699px) {
    .services { --media: clamp(110px, calc(100vh - 505px), 303px); min-height: max(560px, 100vh); }
  }
}