/* ════════════════════════════════════════════════════════════════════════
   Winayasa Utama — stylesheet
   Palette ratio 60 / 30 / 10:
     60%  #FFFFFF  page background and cards
     30%  #233961  headings, dark bands, footer
     10%  #F1C40F  calls to action and accents
   Hand-written, no framework: the whole file gzips to a few kilobytes so the
   page stays fast on low-end Android hardware.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  --navy:        #233961;
  --navy-700:    #1b2c4c;
  --navy-300:    #4a5f88;
  --gold:        #f1c40f;
  --gold-600:    #d4ab06;
  --white:       #ffffff;

  --ink:         #1c2942;
  --body:        #56637a;
  --muted:       #7b8699;
  --line:        #e3e7ee;
  --tint:        #f6f8fb;
  --tint-warm:   #f7f5f0;

  --shadow-sm:   0 1px 2px rgba(35, 57, 97, .06);
  --shadow-md:   0 6px 18px -6px rgba(35, 57, 97, .14);
  --shadow-lg:   0 18px 42px -18px rgba(35, 57, 97, .28);

  --radius:      14px;
  --radius-lg:   20px;
  --wrap:        1160px;
  --gutter:      clamp(1.15rem, 4vw, 2.5rem);
  --header-h:    76px;

  --ease:        cubic-bezier(.22, .61, .36, 1);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(.95rem, .92rem + .18vw, 1.03rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.015em;
}

p  { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold-600); }

button, input, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Utilities ─────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  padding: .7rem 1.2rem;
  background: var(--navy);
  color: var(--white);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; color: var(--white); }

.eyebrow {
  margin: 0 0 .85rem;
  color: var(--gold-600);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow--light { color: var(--gold); }
.eyebrow--pill {
  display: inline-block;
  padding: .35rem 1.1rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold-600);
}

.underline-accent {
  box-shadow: inset 0 -.28em 0 rgba(241, 196, 15, .55);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  --btn-py: .85rem;
  --btn-px: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--accent {
  background: var(--gold);
  color: var(--navy);
  box-shadow: var(--shadow-md);
}
.btn--accent:hover {
  background: var(--gold-600);
  color: var(--navy);
  box-shadow: var(--shadow-lg);
}

.btn--ghost {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--ghost:hover { background: var(--navy); color: var(--white); }

.btn--sm  { --btn-py: .62rem; --btn-px: 1.25rem; font-size: .85rem; }
.btn--lg  { --btn-py: 1rem;   --btn-px: 2.2rem;  font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

/* ── Header ────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { backdrop-filter: blur(10px); }
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

.header__brand { flex: 0 0 auto; margin-right: auto; }
/* Artwork logo diganti ke lockup yang lebih memanjang (4,88:1, sebelumnya
   3,00:1). Pada lebar yang sama ia tampil jauh lebih pendek, jadi lebarnya
   dinaikkan supaya tinggi optisnya di header kembali setara. */
.header__logo  { width: clamp(168px, 20vw, 232px); height: auto; }

.header__nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.4vw, 1.25rem);
}
.nav__list a {
  position: relative;
  display: block;
  padding: .35rem .1rem;
  color: var(--ink);
  font-size: .87rem;
  font-weight: 500;
  white-space: nowrap;
}
.nav__list a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav__list a:hover,
.nav__list a.is-active { color: var(--navy); }
.nav__list a:hover::after,
.nav__list a.is-active::after { transform: scaleX(1); }

.header__cta { display: none; }

.header__toggle {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
}
.header__toggle-bar {
  display: block;
  width: 19px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(2) { opacity: 0; }
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer. The breakpoint sits at 1120px rather than 1024px because the
   nine nav items plus the CTA start colliding below that. */
@media (max-width: 1119px) {
  .header__nav {
    display: block;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .28s var(--ease), visibility .28s;
  }
  .header__nav.is-open {
    max-height: min(78vh, 560px);
    overflow-y: auto;
    visibility: visible;
  }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1.25rem;
  }
  .nav__list li + li { border-top: 1px solid var(--line); }
  .nav__list a { padding: .85rem .1rem; font-size: .95rem; }
  .nav__list a::after { display: none; }
}

@media (min-width: 1120px) {
  .header__nav   { display: block; }
  .header__cta   { display: inline-flex; }
  .header__toggle { display: none; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(35, 57, 97, .14) 0%, rgba(35, 57, 97, 0) 58%),
    linear-gradient(180deg, var(--tint) 0%, var(--white) 65%);
}

/* Brand mark, top-right, at 40% opacity — the supplied artwork is white, so it
   sits on the navy wash above and reads as a soft watermark. */
.hero__watermark {
  position: absolute;
  z-index: -1;
  /* Bleeds off the top only. Letting it run off the right edge as well would
     slice through the wordmark and read as a broken image rather than a mark. */
  top: clamp(-70px, -5vw, -28px);
  right: clamp(-18px, 1vw, 12px);
  width: clamp(200px, 30vw, 420px);
  opacity: .4;
  pointer-events: none;
}
.hero__watermark img { width: 100%; height: auto; }

.hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.hero__title {
  margin-bottom: 1.15rem;
  font-size: clamp(1.95rem, 1.3rem + 3.1vw, 3.55rem);
  letter-spacing: -.03em;
  text-wrap: balance;
}

.hero__lead {
  max-width: 60ch;
  font-size: clamp(1rem, .96rem + .3vw, 1.13rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.9rem;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 2.1rem;
}
.chip {
  padding: .42rem 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  font-size: .8rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.hero__aside {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.hero__quote {
  margin-bottom: 1.5rem;
  color: var(--ink);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  font-weight: 600;
  line-height: 1.55;
}
.hero__aside-label {
  margin-bottom: .7rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero__approach li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .93rem;
}
.hero__approach li + li { margin-top: .5rem; }
.hero__approach li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
}

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); }
  .hero__aside { margin-top: 2.6rem; }
}

/* ── Section shell ─────────────────────────────────────────────────────── */
.section { padding-block: clamp(3.25rem, 7vw, 5.75rem); }
.section--tint { background: var(--tint); }

.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head--center { max-width: 46ch; margin-inline: auto; text-align: center; }
.section__head--split {
  display: grid;
  gap: 1.5rem;
  max-width: none;
  align-items: start;
}
@media (min-width: 900px) {
  .section__head--split {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .section__head--split > div { max-width: 68ch; }
}

.section__title {
  font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.4rem);
  text-wrap: balance;
}
.section__lead { margin-top: 1rem; }

/* ── Nilai kami (navy band) ────────────────────────────────────────────── */
.values {
  padding-block: clamp(3rem, 6vw, 4.75rem);
  background: var(--navy);
  color: rgba(255, 255, 255, .78);
}
.values h3 { color: var(--white); }

.values__head {
  display: grid;
  gap: 1.75rem;
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.values__quote {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.42;
  text-wrap: balance;
}
@media (min-width: 900px) {
  .values__head { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem; }
}

.values__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.value-card {
  padding: 1.5rem 1.4rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  transition: background-color .22s var(--ease), border-color .22s var(--ease);
}
.value-card:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(241, 196, 15, .5);
}
.value-card h3 { margin-bottom: .55rem; font-size: 1.06rem; }
.value-card p  { font-size: .9rem; }

/* ── Tentang ───────────────────────────────────────────────────────────── */
.about { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
.about__head { margin-bottom: 0; }
@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* ── Layanan ───────────────────────────────────────────────────────────── */
.services {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
.service {
  position: relative;
  padding: 1.75rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.service::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--gold);
  border-radius: 0 0 var(--radius) var(--radius);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.service:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.service:hover::before { transform: scaleX(1); }

.service__num {
  display: block;
  margin-bottom: .6rem;
  color: var(--gold-600);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.service__title { margin-bottom: .65rem; font-size: 1.12rem; }
.service p { font-size: .92rem; }

/* ── Cara kerja ────────────────────────────────────────────────────────── */
.steps {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  counter-reset: step;
}
.step {
  position: relative;
  padding: 1.9rem 1.5rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.step__num {
  display: inline-grid;
  place-content: center;
  width: 46px; height: 46px;
  margin-bottom: 1rem;
  background: var(--navy);
  border-radius: 50%;
  color: var(--white);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.step__title { margin-bottom: .5rem; font-size: 1.08rem; }
.step p { font-size: .91rem; }

/* Connector line between the four cards on wide screens. */
@media (min-width: 1024px) {
  .steps { position: relative; }
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(1.9rem + 23px);
    left: calc(1.5rem + 46px + 10px);
    right: -1.15rem;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  }
}

/* ── Keunggulan kami ───────────────────────────────────────────────────── */
/* Two columns, three rows, matching the supplied layout reference. */
.features {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.feature {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  overflow: hidden;                 /* keeps the icon inside the card as it grows */
  min-height: 168px;
  padding: 1.6rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transform: scale(1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
  will-change: transform;
}
.feature__text { flex: 1 1 auto; min-width: 0; }
.feature__title { margin-bottom: .5rem; font-size: 1.14rem; }
.feature p { font-size: .89rem; }

.feature__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(74px, 11vw, 96px);
}
/* The transform lives on the <img>, not the <picture>: picture is a wrapper
   element browsers treat inconsistently as a transform container. */
.feature__icon img {
  width: 100%;
  height: auto;
  transform: rotate(0deg) scale(1);
  transform-origin: center;
  transition: transform .3s var(--ease);
  will-change: transform;
}

/* Hover: the card grows 2%; the icon turns 3° counter-clockwise and grows a
   further 2%. `overflow: hidden` on the card keeps the icon inside it, so the
   whole tile scales uniformly. */
.feature:hover,
.feature:focus-within {
  transform: scale(1.02);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.feature:hover .feature__icon img,
.feature:focus-within .feature__icon img {
  transform: rotate(-3deg) scale(1.02);
}

/* ── Tim kami ──────────────────────────────────────────────────────────── */
.team { background: var(--tint-warm); }

.team__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

/* Susunan 3 + 2: tiga anggota di baris atas, dua sisanya di tengah baris
   kedua. Enam kolom dipakai supaya tiap kartu bisa mengambil dua kolom, lalu
   dua kartu terakhir digeser satu kolom -- itu yang membuat baris kedua duduk
   tepat di tengah tanpa wrapper tambahan. Lebar tiap kartu tetap sama persis
   dengan baris atas. */
@media (min-width: 760px) {
  .team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .team__grid--3-2-2 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .team__grid--3-2-2 > .member { grid-column: span 2; }
  .team__grid--3-2-2 > .member:nth-child(4) { grid-column: 2 / span 2; }
  .team__grid--3-2-2 > .member:nth-child(5) { grid-column: 4 / span 2; }
  /* Baris ketiga: dua anggota tambahan, diletakkan di tengah seperti baris kedua. */
  .team__grid--3-2-2 > .member:nth-child(6) { grid-column: 2 / span 2; }
  .team__grid--3-2-2 > .member:nth-child(7) { grid-column: 4 / span 2; }
}

/* Susunan 3 + 4 di layar lebar: tiga anggota di baris atas, empat di baris
   kedua. Dua belas kolom dipakai supaya baris atas (3 x 4 kolom) dan baris
   bawah (4 x 3 kolom) sama-sama penuh. Tablet (760-999px) memakai susunan
   3 + 2 + 2 di atas; seluler (di bawah 760px) memakai 3 + 4 lagi, lihat blok di bawah. */
@media (min-width: 1000px) {
  .team__grid--3-4 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .team__grid--3-4 > .member { grid-column: span 4; }
  .team__grid--3-4 > .member:nth-child(n+4) { grid-column: span 3; }
  .team__grid--3-4 .member__photo { width: min(100%, clamp(160px, 18vw, 224px)); }
}

/* Dua kolom di tablet sempit; anggota terakhir yang ganjil ikut di tengah. */
@media (min-width: 520px) and (max-width: 759.98px) {
  .team__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .team__grid > .member { grid-column: span 2; }
  .team__grid > .member:last-child:nth-child(odd) { grid-column: 2 / span 2; }
}

/* Seluler: 3 + 4 juga. Ukuran foto dan teks dikecilkan supaya empat kartu muat
   sebaris; foto diberi ukuran yang sama untuk kedua baris. Ditaruh setelah
   blok tablet sempit di atas supaya aturan ini yang menang. */
@media (max-width: 759.98px) {
  .team__grid.team__grid--3-4 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem .5rem;
  }
  .team__grid.team__grid--3-4 > .member { grid-column: span 4; }
  .team__grid.team__grid--3-4 > .member:nth-child(n+4) { grid-column: span 3; }
  .team__grid--3-4 .member__photo {
    width: clamp(52px, 18vw, 120px);
    margin-bottom: .7rem;
  }
  .team__grid--3-4 .member__name { font-size: .78rem; line-height: 1.3; }
  .team__grid--3-4 .member__role { font-size: .66rem; line-height: 1.3; }
}

.member__photo {
  display: block;
  width: clamp(160px, 22vw, 224px);
  margin: 0 auto 1.35rem;
  border-radius: 50%;
  overflow: hidden;
  /* Potretnya sendiri sudah dipotong bulat dengan alpha (lihat
     tools/build_assets.py), jadi tidak ada lagi sudut persegi yang perlu
     ditutup warna dasar. border-radius di sini tinggal sebagai jaring
     pengaman untuk fallback JPEG yang tidak bisa membawa alpha. */
  background: transparent;
  box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.member__photo img { display: block; width: 100%; height: auto; }
.member:hover .member__photo {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
/* Foto anggota tim yang bisa diklik (Yuda dan Ghina -> WhatsApp). */
.member__link { display: block; pointer-events: none; }
.member__link .member__photo { pointer-events: auto; cursor: pointer; }
.member__link:focus-visible { outline: none; }
.member__link:focus-visible .member__photo { outline: 3px solid var(--gold); outline-offset: 4px; }
.member__name { font-size: 1.06rem; }
.member__role {
  margin-top: .3rem;
  color: var(--muted);
  font-size: .87rem;
}

/* ── Artikel ───────────────────────────────────────────────────────────── */
.articles {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
}
.article {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.article:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.article__tag {
  margin-bottom: .85rem;
  color: var(--gold-600);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.article__title { margin-bottom: .7rem; font-size: 1.08rem; line-height: 1.4; }
.article__excerpt { font-size: .9rem; }
.article__meta {
  margin: 1.15rem 0 1rem;
  color: var(--muted);
  font-size: .8rem;
}
.article__link {
  margin-top: auto;
  align-self: flex-start;
  font-size: .88rem;
  font-weight: 600;
}
.article__link::after {
  content: ' →';
  transition: margin-left .2s var(--ease);
}
.article__link:hover::after { margin-left: .25rem; }
/* "Baca" kini sebuah <button> karena ia membuka dialog, bukan berpindah
   halaman. Gaya bawaan tombol dilucuti agar tampilannya persis seperti tautan
   sebelumnya. */
.article__link {
  padding: 0;
  background: none;
  border: 0;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
}
.article__link:hover { color: var(--gold-600); }

/* Dipasang di <body> selagi dialog terbuka supaya halaman di belakang tidak
   ikut bergulir. Berupa class, bukan style inline dari skrip, karena CSP situs
   ini melarang inline style. */
.is-dialog-open { overflow: hidden; }

/* ── Dialog artikel ────────────────────────────────────────────────────── */
.article-dialog {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(.75rem, 3vw, 2rem);
}
.article-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 50, .55);
}
@supports (backdrop-filter: blur(2px)) {
  .article-dialog__backdrop { backdrop-filter: blur(2px); }
}

.article-dialog__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(86vh, 900px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.6rem, 4vw, 3rem);
  /* Krem hangat seperti pada rancangan, bukan putih polos. */
  background: #fdfbf5;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -20px rgba(20, 30, 50, .5);
}
.article-dialog__panel:focus { outline: none; }

.article-dialog__close {
  position: absolute;
  top: clamp(.7rem, 2vw, 1.1rem);
  right: clamp(.7rem, 2vw, 1.1rem);
  display: grid;
  place-content: center;
  width: 40px; height: 40px;
  padding: 0;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.article-dialog__close:hover { background: var(--gold); color: var(--navy); }

.article-dialog__tag {
  margin: 0 0 .85rem;
  color: var(--gold-600);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.article-dialog__title {
  /* Serif untuk judul, mengikuti rancangan yang Anda kirim. Memakai serif
     bawaan sistem, bukan webfont tambahan: tidak ada berkas yang perlu diunduh
     sehingga tidak menambah beban di perangkat kelas bawah. */
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.22;
  /* Beri ruang agar judul panjang tidak menabrak tombol silang. */
  padding-right: 3rem;
}
.article-dialog__meta {
  margin: .85rem 0 1.75rem;
  color: var(--muted);
  font-size: .9rem;
}
.article-dialog__body p { margin-bottom: 1.15rem; }
.article-dialog__body p:last-child { margin-bottom: 0; }

/* Halaman di belakang dikunci lewat JS; ini menjaga dialog tetap enak dibaca
   pada layar pendek dengan menempelkan tombol tutup di tempatnya. */
@media (max-width: 560px) {
  .article-dialog__panel { max-height: 92vh; }
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 940px) {
  .faq { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .faq__aside { position: sticky; top: calc(var(--header-h) + 24px); }
}

.faq__card {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--navy);
  border-radius: var(--radius-lg);
  color: rgba(255, 255, 255, .78);
}
.faq__card h3 { margin-bottom: .4rem; color: var(--white); font-size: 1.05rem; }
.faq__card p  { margin-bottom: 1.2rem; font-size: .89rem; }

.faq__list {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}
.qa + .qa { border-top: 1px solid var(--line); }

.qa__q {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  transition: background-color .2s var(--ease);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { background: var(--tint); }

.qa__q::after {
  content: '';
  flex: 0 0 auto;
  width: 11px; height: 11px;
  margin-top: .42em;
  margin-left: auto;
  border-right: 2px solid var(--gold-600);
  border-bottom: 2px solid var(--gold-600);
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.qa[open] .qa__q { background: var(--tint); }
.qa[open] .qa__q::after { transform: rotate(-135deg); margin-top: .72em; }

.qa__a {
  padding: 0 1.4rem 1.4rem;
  font-size: .92rem;
}
.qa__a p + p { margin-top: .8rem; }

/* Daftar bertingkat di dalam jawaban FAQ ("Apa yang sebenarnya kami lakukan?").
   Ikon emoji diberi lebar tetap supaya seluruh teks penjelasan rata kiri pada
   satu garis, berapa pun lebar glyph emoji yang dipakai perangkat. */
.qa__steps { margin: 1rem 0 0; }
.qa__steps > li {
  display: flex;
  gap: .75rem;
  padding: .9rem 0;
  border-top: 1px solid var(--line);
}
.qa__steps > li:last-child { padding-bottom: 0; }
.qa__steps-icon {
  flex: 0 0 1.5rem;
  font-size: 1.05rem;
  line-height: 1.5;
  text-align: center;
}
.qa__steps strong {
  display: block;
  margin-bottom: .3rem;
  color: var(--ink);
}
.qa__steps p { margin: 0; font-size: .92rem; }
.qa__steps p + p { margin-top: .55rem; }

/* Nomor registrasi pada jawaban "Apakah ini legal?". Ditampilkan sebagai
   daftar, bukan kalimat, supaya deretan angkanya mudah dipindai dan disalin. */
.qa__refs {
  margin: .85rem 0;
  padding-left: 0;
}
.qa__refs li {
  padding: .45rem .85rem;
  background: var(--tint);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 600;
  /* Nomor referensi: jarak antar-karakter yang seragam membuatnya lebih mudah
     dicocokkan dengan dokumen aslinya. */
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.qa__refs li + li { margin-top: .45rem; }

.qa__closing {
  margin-top: 1.1rem;
  padding-top: .95rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-style: italic;
}

/* ── CTA band ──────────────────────────────────────────────────────────── */
.cta {
  padding-block: clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(241, 196, 15, .16) 0%, rgba(241, 196, 15, 0) 60%),
    var(--navy);
  color: rgba(255, 255, 255, .8);
  text-align: center;
}
.cta__inner { max-width: 44rem; margin-inline: auto; }
.cta__title {
  margin-bottom: .9rem;
  color: var(--white);
  font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.6rem);
  text-wrap: balance;
}
.cta__lead { margin-bottom: 2rem; }

/* ── Kontak ────────────────────────────────────────────────────────────── */
.contact { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 940px) {
  .contact { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.contact__list {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.contact__item--wide { grid-column: 1 / -1; }
.contact__item dt {
  margin-bottom: .3rem;
  color: var(--muted);
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.contact__item dd {
  color: var(--ink);
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.6;
}

/* Elemen yang disembunyikan sementara lewat atribut `hidden` harus benar-benar
   hilang, termasuk kalau komponennya memasang display: flex/grid sendiri. */
[hidden] { display: none !important; }

/* ── Kartu peta ────────────────────────────────────────────────────────
   Menggantikan formulir "Kirim Pesan Cepat". Rasio dijaga lewat aspect-ratio
   supaya tinggi iframe ikut lebarnya dan tidak ada lompatan layout saat peta
   selesai dimuat.                                                          */
.map-card {
  padding: clamp(1.6rem, 3.5vw, 2.25rem);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.map-card__title { margin-bottom: .4rem; font-size: 1.2rem; }
.map-card__note  { margin-bottom: 1.4rem; font-size: .88rem; color: var(--muted); }

.map-card__frame {
  margin-bottom: 1.25rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 11px;
}
.map-card__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Di layar sempit peta 4:3 memakan terlalu banyak tinggi; dipendekkan agar
   tombol di bawahnya tetap terlihat tanpa harus menggulir jauh. */
@media (max-width: 560px) {
  .map-card__frame { aspect-ratio: 1 / 1; }
}

.btn--outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--outline:hover { background: var(--navy); color: var(--white); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
  background: var(--navy);
  color: rgba(255, 255, 255, .72);
  font-size: .89rem;
}
.site-footer a { color: rgba(255, 255, 255, .72); }
.site-footer a:hover { color: var(--gold); }

/* Press strip */
.press {
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
}
.press__label {
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, .55);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.press__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.25rem, 3.6vw, 2.75rem);
}
.press__list img {
  width: auto;
  /* The five wordmarks are cropped tight and range from 2.9:1 to 6.1:1. Capping
     height alone would let the widest ones run twice as long as the narrowest,
     so both axes are capped: the wide marks land on the width limit and sit
     slightly shorter, which is what reads as evenly weighted. */
  height: clamp(20px, 2.6vw, 28px);
  max-width: clamp(90px, 13vw, 138px);
  object-fit: contain;
  /* Artwork is already supplied as white on transparency — no tinting needed. */
  opacity: .85;
  transition: opacity .2s var(--ease);
}
/* Media Indonesia is the only stacked, two-line mark: at a shared box height its
   letters come out about half the size of the single-line marks, so it gets a
   taller box to match their optical weight. */
.press__list li.is-stacked img { height: clamp(28px, 3.7vw, 40px); }
.press__list li:hover img { opacity: 1; }

.footer__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .footer__grid { grid-template-columns: 1.25fr .8fr 1.15fr; }
}

.footer__heading {
  margin-bottom: 1.1rem;
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
}
.footer__strong { margin-bottom: .5rem; color: var(--white); font-weight: 600; }
.footer__address { font-style: normal; line-height: 1.75; }
.footer__contact { margin-top: 1rem; line-height: 1.9; }

.footer__links li + li { margin-top: .6rem; }

/* Two badges per row, the ISO plate dropping to the next — matching the
   supplied footer reference. */
.certs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  align-items: center;
  gap: 1.5rem 2.25rem;
}
.certs__item img {
  display: block;
  width: auto;
  height: 46px;
  max-width: 150px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .9;
}
/* The ISO badge is a certification scan and keeps its own white plate. */
.certs__item--plate {
  padding: 6px;
  background: var(--white);
  border-radius: 6px;
}
.certs__item--plate img {
  height: 58px;
  filter: none;
  opacity: 1;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .55);
  font-size: .82rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* Between these widths the legal links sit flush right, exactly where the
   floating WhatsApp button lands. Above 1220px the centred container keeps them
   clear on its own; below 640px the row has already stacked left-aligned. */
@media (min-width: 640px) and (max-width: 1220px) {
  .footer__bottom { padding-right: 76px; }
}

/* ── Floating WhatsApp ─────────────────────────────────────────────────── */
.wa-float {
  position: fixed;
  right: clamp(.9rem, 3vw, 1.6rem);
  bottom: clamp(.9rem, 3vw, 1.6rem);
  z-index: 90;
  display: grid;
  place-content: center;
  width: 54px; height: 54px;
  background: #25d366;
  border-radius: 50%;
  color: var(--white);
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .45);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.wa-float:hover {
  transform: scale(1.06);
  color: var(--white);
  box-shadow: 0 14px 32px -8px rgba(0, 0, 0, .5);
}

/* ── Scroll reveal ─────────────────────────────────────────────────────── */
/* Only applied once JS confirms IntersectionObserver support, so a no-JS or
   very old browser simply renders everything visible.

   The offset uses the standalone `translate` property rather than `transform`.
   Several revealed elements (.feature, .service, .article) also have hover
   transforms, and this rule's higher specificity would otherwise cancel them.
   Browsers without `translate` still get the fade. */
.js-reveal .reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .5s var(--ease), translate .5s var(--ease);
}
.js-reveal .reveal.is-visible {
  opacity: 1;
  translate: none;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js-reveal .reveal { opacity: 1; translate: none; }
}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
  .site-header, .wa-float, .hero__watermark, .map-card { display: none; }
  body { color: #000; }
  .values, .cta, .site-footer { background: none; color: #000; }
}

/* ── Footer yang sebagian disembunyikan ───────────────────────────────────
   Dulu diatur lewat atribut `style` di markup; dipindah ke sini karena CSP
   situs (`style-src 'self'`) memblokir gaya inline. Hanya blok sertifikasi
   dan baris hak cipta yang tampil, jadi keduanya dipusatkan. */
.footer__grid--solo { display: block; text-align: center; }
.footer__grid--solo .footer__col--certs { width: 100%; text-align: center; }
.footer__grid--solo .certs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
/* padding kiri-kanan sama supaya teks tetap di tengah, sekaligus tidak
   tertutup tombol WhatsApp mengambang di pojok kanan bawah. */
.footer__bottom--solo {
  justify-content: center;
  text-align: center;
  padding-inline: 76px;
}