@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/schibsted-400.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/schibsted-500.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/schibsted-600.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/schibsted-700.woff2") format("woff2");
}

:root {
  --paper: #141516;
  --paper-2: #d6ff2a;
  --ink: #f4f5f0;
  --accent: #d6ff2a;
}

html { scroll-behavior: smooth; }

::selection {
  background: var(--accent);
  color: #111;
}

body {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.font-display,
.hero__title,
.work__name,
.services__title,
.services__item-title,
.proof__title,
.quotes__quote,
.konsultasi__title,
.faq__title,
.work__note,
.footer__mark {
  font-family: "Schibsted Grotesk", system-ui, sans-serif !important;
}

a, button, summary { cursor: pointer; }

.header__logo img {
  height: 1.45rem;
  width: auto;
  display: block;
}

#hero, #work, #services, #proof, #quotes, #faq, #konsultasi {
  scroll-margin-top: 4.25rem;
}

.hero__title {
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.work__shot {
  overflow: hidden;
  background: #0a0a0a;
}

.work__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.work__shot--a img { object-position: center 30%; }
.work__shot--b img { object-position: 70% 82%; }

.work__shot:hover img { transform: scale(1.04); }

.folio {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

details.faq__item summary { list-style: none; }
details.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { display: flex; justify-content: space-between; gap: 1rem; }
.faq__q::after { content: "+"; color: var(--accent); }
details.faq__item[open] .faq__q::after { content: "–"; }