/* Image slots from NL WEBSITE / MOTION ASSETS. Geometry is expressed relative
   to each slot, so the Figma crop follows the existing responsive layout.
   This file only affects artwork on About, Services, service detail & Contact. */

/* About — BG 1775:16218 inside the 1440 × 900 hero. */
.hero--about .hero__bg img {
  position: absolute;
  width: 130.208333%;
  height: 149.444444%;
  max-width: none;
  left: -27.708333%;
  top: -49.444444%;
  object-position: center;
  animation: none;
}

/* Services uses the portrait crop, distinct from the detail image slots. */
.scard__media img {
  position: absolute;
  inset: 0;
  object-position: center;
}

/* Service detail — clipping frame is 494 × 291 in Figma. */
.dservice__media[class*="dservice__media--"] {
  position: relative;
}
.dservice__media[class*="dservice__media--"] img {
  position: absolute;
  max-width: none;
}

/* 2025:22694 — original transparent image + the slot's orange gradient. */
.dservice__media--brand-identity-design {
  background: linear-gradient(90deg, #000, #f8613b);
}
/* Gambar sudah dipotong tepat sesuai bingkai Figma (resolusi tinggi),
   jadi cukup memenuhi kotak — tidak lagi diperbesar 333% yang membuatnya buram. */
.dservice__media--brand-identity-design img {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: fill;
}

/* 2031:24429 */
.dservice__media--digital-media-design img {
  width: 99.797571%;
  height: 183.505155%;
  left: 0;
  top: -51.546392%;
  object-fit: cover;
}

/* 2031:24527 */
.dservice__media--print-design img {
  width: 100%;
  height: 113.745704%;
  left: 0;
  top: 0;
  object-fit: cover;
}

/* 2031:24625 */
.dservice__media--digital-marketing img {
  width: 100%;
  height: 196.907216%;
  left: 0;
  top: -48.453608%;
  object-fit: cover;
}

/* Contact — preserve all three Figma fills and their ordering (1002:1779). */
/* Kotak .contact__bg setinggi seluruh section, jadi rasionya berubah jauh
   mengikuti isi halaman (0.57 di desktop lebar, 1.9 saat menumpuk). Dulu
   artwork memakai persen lebar dan tinggi terpisah, sehingga ikut berubah
   rasio dan fotonya melar. Sekarang rasionya dikunci 2743:1530.502 seperti
   di Figma, lalu ukurannya diambil dari sisi mana pun yang lebih butuh
   supaya tetap menutup penuh — sama seperti cara kerja object-fit: cover. */
.contact__bg { overflow: hidden; container-type: size; }
.contact__artwork {
  position: absolute;
  width: max(149.725208cqw, 219.045cqh);
  aspect-ratio: 2743 / 1530.502;
  height: auto;
  /* Titik jangkar dipertahankan seperti sebelumnya: pusat mendatar di 72.43%
     dan geser ke atas 16.625% dari tinggi artwork sendiri. */
  left: 27.57%;
  top: 0;
  transform: translate(-50%, -16.625%) scaleX(-1);
}
.contact__bg .contact__image {
  position: absolute;
  max-width: none;
  object-fit: fill;
}
.contact__bg .contact__image--base {
  /* Lapisan paling belakang: kotaknya di Figma tidak seukuran rasio fotonya,
     jadi dipotong seperlunya alih-alih diregangkan. */
  object-fit: cover;
  width: 127.37%;
  height: 151.84%;
  left: -25.63%;
  top: -18.33%;
}
.contact__bg .contact__image--middle {
  width: 68.53%;
  height: 87.73%;
  left: 0;
  top: 12.26%;
}
.contact__bg .contact__image--front {
  width: 83.36%;
  height: 83.39%;
  left: -13.77%;
  top: 16.63%;
}

@media (max-width: 860px) {
  /* About mobile BG 1917:11944, framed on the book instead of the face. */
  .hero--about .hero__bg img {
    width: 1994px;
    height: auto;
    left: calc(50% - 1114px);
    top: -216px;
  }

  /* Keep the Contact photo proportional in the current stacked page.
     The Figma mobile portrait is 676px high; the existing form stays intact. */
  .contact__artwork {
    width: 2743px;
    height: 1530.502px;
    aspect-ratio: auto;
    left: calc(50% - 1812px);
    top: -323px;
    transform: none;
  }
  .contact__bg .contact__image--base { display: none; }
  .contact__bg .contact__image--middle {
    width: 40.27%;
    height: 51.55%;
    left: 46.47%;
    top: 18.62%;
  }
  .contact__bg .contact__image--front {
    width: 53.22%;
    height: 53.24%;
    left: 27.68%;
    top: 20.94%;
  }
  .contact__bg {
    background: #000;
  }
  .contact__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.2), transparent 300px, #000 676px);
    pointer-events: none;
  }
}

/* Imageries — gambar pengganti dari dashboard. Semua posisi Figma di atas
   hanya untuk gambar bawaan; gambar baru cukup memenuhi bingkainya (cover)
   dengan titik fokus dari dashboard (object-position inline). */
.hero--about .hero__bg img.nl-imagery,
.dservice .dservice__media img.nl-imagery {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.contact__custom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.contact__bg.nl-imagery-on .contact__artwork { display: none; }