/* Essential: tiga bagian. Beranda, layanan dan kontak. Tanpa foto tambahan dan tanpa peta. */

/* ---------- 1. beranda ---------- */
.hero { padding: 0; align-content: stretch; grid-template-rows: minmax(0, 1fr); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }

.hero-copy {
  display: grid;
  gap: 0.9rem;
  padding: calc(var(--nav-h) + 12px) var(--pad-r) 6px var(--pad-l);
}
.hero-copy h1 { max-width: 14ch; font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.3rem); }
.hero-copy .lede { font-size: 0.95rem; line-height: 1.55; }
.hero-motto {
  position: relative;
  padding-top: 0.8rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--crimson);
}
.hero-motto::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 56px;
  height: 2px;
  background: var(--gold);
}

.hero-photo { display: grid; place-items: center; padding: 14px var(--pad-r) 18px var(--pad-l); }
.hero .arch { --arch-w: auto; height: min(26svh, 260px); width: auto; margin-inline: 0; }

@media (min-width: 600px) and (max-width: 899px) {
  .hero-copy h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.2rem); }
  .hero-copy .lede { font-size: 1.05rem; }
  .hero .arch { height: min(30svh, 340px); }
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: stretch; }
  .hero-copy {
    align-content: center;
    gap: 1.1rem;
    padding: calc(var(--nav-h) + 16px) clamp(24px, 4vw, 72px) 24px var(--pad-l);
  }
  .hero-copy h1 { max-width: 14ch; font-size: clamp(2.3rem, min(1.6rem + 3.6vw, 9.5svh), 4.8rem); }
  .hero-copy .lede { font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem); }
  .hero-motto { font-size: 1.15rem; padding-top: 1rem; }
  .hero-photo { background: var(--pink); padding: calc(var(--nav-h) + 16px) var(--pad-r) 28px 24px; }
  .hero .arch { height: min(66svh, 620px); margin-inline: auto; }
}

/* ---------- 2. layanan: daftar teks dengan ikon ---------- */
.lay { display: grid; gap: clamp(14px, 2.4vh, 28px); align-items: center; }
.lay-copy { display: grid; gap: 0.6rem; }
.lay-copy h2 { max-width: 16ch; }
.lay-list .proof { padding: 0.7rem 0; }
.lay-list .proof h3 { font-size: 1.1rem; margin-bottom: 0.1rem; }
.lay-list .proof p { font-size: 0.9rem; line-height: 1.45; }

@media (min-width: 900px) {
  .lay { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 96px); }
  .lay-list .proof { padding: 0.95rem 0; }
  .lay-list .proof h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); }
  .lay-list .proof p { font-size: 1rem; line-height: 1.6; }
}
@media (min-width: 900px) and (max-height: 780px) {
  .lay-list .proof { padding: 0.6rem 0; }
}

/* ---------- 3. kontak ---------- */
.kon { display: grid; gap: clamp(16px, 3vh, 32px); align-items: center; }
.kon-copy { display: grid; gap: 1rem; }
.kon-copy h2 { max-width: 16ch; }
.kon-info .proof { padding: 1rem 0; }
.kon-info .proof h3 { font-size: 1.15rem; margin-bottom: 0.2rem; }
.kon-info .proof p { font-size: 0.95rem; line-height: 1.55; }
.kon-credit { margin-top: 0.4rem; }

@media (min-width: 900px) {
  .kon { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 96px); }
  .kon-copy { align-content: center; }
  .kon-info .proof { padding: 1.4rem 0; }
  .kon-info .proof h3 { font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); }
  .kon-info .proof p { font-size: 1.05rem; }
  .kon-credit { grid-column: 1 / -1; margin-top: 0; }
}