/* ==========================================================================
   La Bonne Education — style.css
   Warna, tipografi, dan ukuran diambil langsung dari desain Canva asli
   (labonneedu.com). Kanvas asli 1366px; di sini ditulis ulang responsif.
   ========================================================================== */

/* ------------------------------ 1. TOKEN ---------------------------------- */
:root {
  /* Palet asli dari desain Canva */
  --blue:        #387d9f;   /* warna utama: teks, garis, panel */
  --blue-dark:   #2c6480;
  --cream:       #fffff8;   /* latar halaman */
  --coral:       #ff5620;
  --amber:       #ff9800;
  --sky:         #b0e0e6;
  --sky-2:       #b1e0e6;
  --mint:        #cfeced;
  --teal:        #94c5c6;
  --ivory:       #f9fbe7;
  --ink:         #272324;
  --grey:        #4d4d4d;

  /* Tipografi */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Nunito Sans", "Segoe UI", system-ui, sans-serif;

  --fs-hero:    clamp(40px, 6.6vw, 90px);
  --fs-display: clamp(34px, 6.8vw, 93px);
  --fs-panel:   clamp(50px, 9.8vw, 136px);
  --fs-h3:      clamp(22px, 2.4vw, 32px);
  --fs-lead:    clamp(17px, 1.8vw, 25px);
  --fs-body:    clamp(16px, 1.45vw, 20px);
  --fs-sm:      clamp(13px, 1.05vw, 15px);

  /* Bentuk */
  --stroke:     3px solid var(--blue);
  --r-card:     16px;
  --r-panel:    22px;
  --r-photo:    30px;
  --r-pill:     100px;

  --container:  1240px;
  --gap:        clamp(20px, 2.2vw, 30px);
  --section-y:  clamp(56px, 7vw, 104px);
}

/* ------------------------------ 2. RESET ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--blue);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 40px);
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--blue); color: var(--cream);
  padding: 12px 20px; border-radius: 0 0 10px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

/* ------------------------------ 3. LOGO ----------------------------------- */
/* Logo LBE dibuat murni dengan teks + CSS, meniru monogram di desain Canva:
   huruf "L" dan "b" bertumpuk, kata "education" di bawahnya. */
.lbe-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  line-height: 1;
  font-family: var(--font-display);
}
.lbe-logo__mark {
  position: relative;
  display: block;
  height: 0.86em;
  font-size: var(--logo-size, 46px);
  font-weight: 800;
  letter-spacing: -0.06em;
  white-space: nowrap;
  /* Canva memakai text-transform: uppercase, jadi huruf "b" tampil sebagai "B". */
  text-transform: uppercase;
}
.lbe-logo__mark .l { color: var(--logo-l, var(--amber)); }
.lbe-logo__mark .b { color: var(--logo-b, var(--coral)); margin-left: -0.09em; }
/* Topi wisuda di atas huruf B. Dipasang lewat ::after supaya tidak perlu
   mengubah markup logo di setiap halaman. */
.lbe-logo__mark::after {
  content: "";
  position: absolute;
  right: -0.10em;
  top: -0.30em;
  width: 0.60em;
  height: 0.44em;
  background: url("../img/logo-cap.svg") no-repeat center / contain;
  transform: rotate(-9deg);
  pointer-events: none;
}
.lbe-logo__word {
  display: block;
  font-size: calc(var(--logo-size, 46px) * 0.212);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--logo-word, var(--amber));
}
.lbe-logo--light { --logo-l: var(--cream); --logo-b: var(--cream); --logo-word: var(--cream); }

/* ------------------------------ 4. HEADER --------------------------------- */
/* Catatan: desain Canva asli tidak punya menu atas. Header ini ditambahkan
   agar keenam halaman bisa dijelajahi. Hapus blok ini bila tidak diinginkan. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid color-mix(in srgb, var(--blue) 18%, transparent);
  transition: box-shadow .25s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(56, 125, 159, .12); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 74px;
}
.header-inner .lbe-logo { --logo-size: 34px; }

/* Sejak Okt 2026 menu tinggal 6 butir pendek (Home · Learn · Grow · Go ·
   About · Contact), jadi deretan mendatar muat di lebar isi biasa dan baru
   pindah ke hamburger di bawah 980px. */
.main-nav ul {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 30px);
  list-style: none; margin: 0; padding: 0;
}
.main-nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .01em;
  color: var(--blue);
  padding: 8px 2px;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
}
.main-nav a:hover { border-bottom-color: var(--coral); }
.main-nav a[aria-current="page"] { border-bottom-color: var(--coral); }

.header-cta { flex-shrink: 0; }

.hamburger {
  display: none;
  width: 46px; height: 42px;
  border: var(--stroke); border-radius: 12px;
  background: transparent; cursor: pointer;
  padding: 0; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.hamburger span {
  display: block; width: 22px; height: 2.5px;
  background: var(--blue); border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 980px) {
  .hamburger { display: flex; }
  .site-header .header-cta { display: none; }
  .main-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream);
    border-bottom: var(--stroke);
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
  }
  .main-nav.is-open { max-height: 70vh; overflow-y: auto; }
  .main-nav ul {
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px clamp(18px, 4vw, 40px) 20px;
  }
  .main-nav a {
    display: block; padding: 14px 0; font-size: 17px;
    border-bottom: 1.5px solid color-mix(in srgb, var(--blue) 15%, transparent);
  }
  .main-nav a:hover, .main-nav a[aria-current="page"] {
    border-bottom-color: var(--coral); color: var(--coral);
  }
}

/* ------------------------------ 5. TOMBOL --------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }

/* Pill biru — "Learn more", "Konsultasi gratis" */
.btn-pill {
  background: var(--blue); color: var(--ivory);
  border: none; border-radius: var(--r-pill);
  padding: 13px 34px;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: .1em; text-transform: uppercase;
}
.btn-pill:hover { background: var(--blue-dark); color: var(--cream); }

.btn-pill-coral { background: var(--coral); color: var(--cream); }
.btn-pill-coral:hover { background: #e64a17; color: var(--cream); }

/* Kotak bergaris — "read more", label layanan */
.btn-outline {
  background: var(--cream); color: var(--blue);
  border: var(--stroke); border-radius: 15px;
  padding: 12px 26px;
  font-size: clamp(13px, 1.15vw, 16px);
  letter-spacing: .06em; text-transform: uppercase;
}
.btn-outline:hover { background: var(--blue); color: var(--cream); }

/* Tombol besar hero — "Free Consultation" */
.btn-hero {
  background: var(--sky-2); color: var(--blue);
  border: var(--stroke); border-radius: 15px;
  width: 100%; max-width: 470px;
  min-height: clamp(84px, 10vw, 138px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.5vw, 48px);
  letter-spacing: -0.02em;
}
.btn-hero:hover { background: var(--blue); color: var(--cream); }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.btn-row-center { justify-content: center; }

/* ------------------------------ 6. SECTION -------------------------------- */
.section { padding-block: var(--section-y); }
.section-mint  { background: var(--mint); }
.section-sky   { background: var(--sky); }
.section-teal  { background: var(--teal); }
.section-blue  { background: var(--blue); color: var(--cream); }
.section-amber { background: var(--amber); color: var(--cream); }
.section-coral { background: var(--coral); color: var(--cream); }

.section-title {
  font-size: var(--fs-display);
  color: var(--blue);
  letter-spacing: -0.045em;
  margin-bottom: clamp(28px, 3.4vw, 52px);
}
.section-title-center { text-align: center; }
.section-blue .section-title,
.section-coral .section-title,
.section-amber .section-title,
.section-teal .section-title { color: var(--cream); }

/* Panel besar berwarna — "Why us?", "FAQs", "Quality" */
.panel {
  border-radius: var(--r-panel);
  border: var(--stroke);
  color: var(--cream);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 4.5vw, 64px);
  display: flex; flex-direction: column; justify-content: center;
}
.panel h2 {
  font-size: var(--fs-panel);
  line-height: .95; letter-spacing: -0.045em;
  margin-bottom: .12em;
}
.panel p { font-size: var(--fs-lead); line-height: 1.15; letter-spacing: -0.02em; }
.panel-coral { background: var(--coral); }
.panel-amber { background: var(--amber); }
.panel-teal  { background: #95c5c6; }

/* Efek muncul saat digulir */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Foto: latar berwarna merek jadi cadangan bila file gambar belum ada,
   sehingga tidak pernah muncul ikon "gambar rusak". */
.photo {
  background-color: var(--sky);
  background-size: cover;
  background-position: center;
  border-radius: var(--r-card);
}

/* Aturan gambar potongan ada di bagian 23, paling bawah berkas ini, supaya
   selalu menang atas aturan komponen (.hero-photo, .about-story__photo, dll.). */

/* ------------------------------ 7. HERO ----------------------------------- */
.hero { padding-block: clamp(36px, 5vw, 64px) clamp(48px, 6vw, 86px); }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.hero .lbe-logo { --logo-size: 62px; margin-bottom: clamp(20px, 3vw, 40px); }

.hero-title {
  font-size: var(--fs-hero);
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: clamp(18px, 2.4vw, 34px);
}
.hero-quote {
  font-size: clamp(15px, 1.75vw, 24px);
  letter-spacing: .02em;
  line-height: 1.35;
  margin-bottom: clamp(22px, 3vw, 38px);
  max-width: 40ch;
}
.hero-quote cite { display: block; font-style: normal; opacity: .85; margin-top: .4em; }

.hero-visual { position: relative; }
/* Kartu coral di belakang potongan foto. Proporsinya mengikuti desain Canva:
   kartu sedikit masuk ke dalam di kiri-kanan, turun di atas (supaya kepala
   menyembul), dan rata di bawah. */
.hero-visual::before {
  content: "";
  position: absolute; inset: 13% 5% 0 5%;
  background: var(--coral);
  border: var(--stroke);
  border-radius: var(--r-photo);
}
.hero-photo {
  position: relative;
  aspect-ratio: 542 / 675;
  border-radius: var(--r-photo);
  background-color: var(--sky);
  background-size: cover; background-position: center;
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 420px; margin-inline: auto; }
  .btn-hero { max-width: none; }
}

/* ------------------------- 8. STUDY DESTINATION --------------------------- */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 38px) var(--gap);
}
.dest-card { display: block; text-decoration: none; }
.dest-card__media {
  display: block;
  position: relative;
  aspect-ratio: 366 / 183;
  border: var(--stroke);
  border-radius: var(--r-card);
  background-size: cover; background-position: center;
  transition: transform .22s ease;
}
.dest-card:hover .dest-card__media { transform: translateY(-4px); }
.dest-card__btn {
  position: absolute; left: 0; bottom: -20px;
  min-width: 57%;
  background: var(--cream); color: var(--blue);
  border: var(--stroke); border-radius: 15px;
  padding: 10px 20px;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-align: center;
}
.dest-card:hover .dest-card__btn { background: var(--blue); color: var(--cream); }
.dest-card__name {
  display: block;
  margin-top: 34px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 27px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--blue);
}
/* Warna latar kartu tujuan studi, urut seperti aslinya */
.dest-1 .dest-card__media { background-color: var(--sky-2); }
.dest-2 .dest-card__media { background-color: var(--amber); }
.dest-3 .dest-card__media { background-color: var(--coral); }
.dest-4 .dest-card__media { background-color: var(--coral); }
.dest-5 .dest-card__media { background-color: var(--sky-2); }
.dest-6 .dest-card__media { background-color: var(--amber); }

@media (max-width: 860px) { .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dest-grid { grid-template-columns: 1fr; } }

/* ------------------------- 9. REFER A FRIEND ------------------------------ */
.refer { background: var(--amber); color: var(--cream); overflow: hidden; }
/* Rasio mengikuti banner di Canva (1380x514). Kalau memakai tinggi tetap,
   di layar lebar rasionya jadi ~3.7 dan foto terpangkas sampai 60% — kepala
   orang di barisan belakang ikut terpotong.
   "center 30%" menggeser bingkai ke atas supaya semua kepala masuk. */
.refer-photo {
  aspect-ratio: 1380 / 514;
  max-height: 640px;
  min-height: 190px;
  background-color: var(--teal);
  background-size: cover; background-position: center 30%;
}
.refer-body { padding-block: clamp(30px, 4vw, 52px) clamp(38px, 5vw, 66px); text-align: center; }
.refer-kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.6vw, 34px);
  letter-spacing: .03em; text-transform: uppercase;
  margin-bottom: clamp(10px, 1.6vw, 22px);
}
/* Tiap kata adalah satu blok yang tidak boleh dipenggal; hanya antar-kata yang
   boleh pindah baris. Ukuran huruf dipatok agar "REFER A FRIEND" muat satu baris. */
.refer-word {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: flex-end;
  gap: 0 clamp(12px, 2.2vw, 40px);
  margin-bottom: clamp(22px, 3vw, 40px);
}
.refer-word .w {
  display: flex; align-items: flex-end;
  gap: clamp(1px, .4vw, 6px);
  white-space: nowrap;
}
.refer-word .w > span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 8.1vw, 116px);
  line-height: .82;
  letter-spacing: -0.045em;
  color: var(--cream);
}
.refer .btn-refer {
  background: var(--sky); color: var(--cream);
  border: none; border-radius: 36px;
  padding: 15px 40px;
  font-size: clamp(14px, 1.3vw, 20px);
  letter-spacing: .08em; text-transform: uppercase;
}
.refer .btn-refer:hover { background: var(--cream); color: var(--amber); }

/* --------------------------- 10. OUR SERVICES ----------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(46px, 5vw, 74px) var(--gap);
}
.svc-card { display: flex; flex-direction: column; }
.svc-card__media {
  position: relative;
  aspect-ratio: 366 / 235;
  border: var(--stroke);
  border-radius: var(--r-card);
  background-color: var(--mint);
  background-size: cover; background-position: center;
  margin-bottom: 34px;
}
.svc-card__label {
  position: absolute; left: 0; right: 0; bottom: -24px;
  background: var(--cream); color: var(--blue);
  border: var(--stroke); border-radius: 15px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(12px, 1.15vw, 16px);
  letter-spacing: .05em; text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}
.svc-card__text { font-size: clamp(15px, 1.45vw, 20px); letter-spacing: .015em; }

/* Hanya kartu Tutor Agency yang bisa diklik — menuju formulir di halaman yang
   sama. Kartu layanan lain tetap informasi biasa, tanpa tautan. */
.svc-card__link { display: block; text-decoration: none; }
.svc-card__link .svc-card__media { transition: transform .22s ease; }
.svc-card__link:hover .svc-card__media { transform: translateY(-4px); }
.svc-card__link:hover .svc-card__label { background: var(--blue); color: var(--cream); }

@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .svc-grid { grid-template-columns: 1fr; } }

/* --------------------------- 11. FOUNDER INTRO ---------------------------- */
.founder-intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(30px, 4vw, 72px);
  align-items: center;
}
.founder-hi {
  font-size: clamp(46px, 7vw, 96px);
  letter-spacing: -0.05em;
  margin-bottom: .1em;
}
.founder-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.1vw, 43px);
  letter-spacing: -0.04em;
  color: #95c5c6;
  margin-bottom: clamp(14px, 1.8vw, 24px);
}
.founder-text { letter-spacing: .03em; margin-bottom: clamp(22px, 3vw, 34px); }
.founder-visual { position: relative; }
.founder-visual::before {
  content: "";
  position: absolute; inset: 13% 5% 0 5%;
  background: var(--coral);
  border: var(--stroke);
  border-radius: var(--r-photo);
}
.founder-photo {
  position: relative;
  aspect-ratio: 550 / 682;
  border-radius: var(--r-photo);
  background-color: var(--sky);
  background-size: cover; background-position: center top;
}
@media (max-width: 900px) {
  .founder-intro-inner { grid-template-columns: 1fr; }
  .founder-visual { max-width: 400px; margin-inline: auto; }
}

/* ----------------------------- 12. WHY US --------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
/* Panel disejajarkan dengan judul pertama di kolom kanan, bukan di tengah. */
.split--top { align-items: start; }
.value-list { display: grid; gap: clamp(22px, 2.6vw, 38px); }
.value-item h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(16px, 1.55vw, 21px);
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: .5em;
}
.value-item p { font-size: clamp(15px, 1.35vw, 19px); }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

/* ---------------------------- 13. JOURNEY --------------------------------- */
.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  max-width: 1010px; margin-inline: auto;
}
/* Baris kedua berisi 2 kartu dan digeser ke tengah, seperti aslinya */
.journey-grid > :nth-child(4) { grid-column: 1 / span 1; transform: translateX(50%); }
.journey-grid > :nth-child(5) { grid-column: 2 / span 1; transform: translateX(50%); }

.journey-card {
  border: var(--stroke);
  border-radius: var(--r-panel);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 385px;
}
.journey-card__head {
  flex: 0 0 auto;
  padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 26px) clamp(34px, 4vw, 50px);
  text-align: center;
}
.journey-card__head h3 {
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.journey-card__body {
  position: relative;
  flex: 1 1 auto;
  background: var(--cream);
  border: var(--stroke);
  border-radius: var(--r-panel);
  margin: -14px -3px -3px;
  padding: clamp(34px, 4vw, 46px) clamp(18px, 2.2vw, 30px) clamp(20px, 2.4vw, 28px);
}
.journey-card__body p {
  font-size: clamp(15px, 1.35vw, 19px);
  color: var(--blue);
}
.journey-card__icon {
  position: absolute; top: -23px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--cream); border: var(--stroke);
  display: grid; place-items: center;
  color: var(--blue);
}
.journey-card__icon svg { width: 22px; height: 22px; }

.journey-amber .journey-card__head { background: var(--amber); color: var(--cream); }
.journey-sky   .journey-card__head { background: var(--sky-2); color: var(--blue); }

@media (max-width: 900px) {
  .journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-grid > :nth-child(4),
  .journey-grid > :nth-child(5) { grid-column: auto; transform: none; }
}
@media (max-width: 600px) {
  .journey-grid { grid-template-columns: 1fr; }
  .journey-card { min-height: 0; }
}

/* ------------------------ 14. CAREER / MAJOR TILES ------------------------ */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(44px, 4.6vw, 68px) var(--gap);
}
.tile { display: block; text-decoration: none; }
.tile__media {
  display: block;
  position: relative;
  aspect-ratio: 367 / 184;
  border: var(--stroke);
  border-radius: var(--r-card);
  background-color: var(--mint);
  background-size: cover; background-position: center;
  transition: transform .22s ease;
}
/* Variasi warna latar agar kartu tanpa foto tetap terlihat disengaja */
.tile-grid .tile:nth-child(4n+1) .tile__media { background-color: var(--sky-2); }
.tile-grid .tile:nth-child(4n+2) .tile__media { background-color: var(--mint); }
.tile-grid .tile:nth-child(4n+3) .tile__media { background-color: #a8d3d4; }
.tile-grid .tile:nth-child(4n)   .tile__media { background-color: #d6e9ec; }
.tile:hover .tile__media { transform: translateY(-4px); }
.tile__label {
  position: absolute; left: 0; right: 0; bottom: -22px;
  background: var(--cream); color: var(--blue);
  border: var(--stroke); border-radius: 15px;
  padding: 12px 10px;
  font-weight: 700;
  font-size: clamp(11px, 1.05vw, 16px);
  letter-spacing: .05em; text-transform: uppercase;
  text-align: center; line-height: 1.2;
}
.tile:hover .tile__label { background: var(--blue); color: var(--cream); }

@media (max-width: 900px) { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tile-grid { grid-template-columns: 1fr; } }

/* Kartu jurusan: foto dengan teks putih di tengah */
.major-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.major-card {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 366 / 185;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  background-color: var(--blue);
  background-size: cover; background-position: center;
  padding: 18px;
  transition: transform .22s ease;
}
.major-card::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(44, 100, 128, .42);
  transition: background .22s ease;
}
.major-card:hover { transform: translateY(-4px); }
.major-card:hover::after { background: rgba(44, 100, 128, .58); }
.major-grid .major-card:nth-child(4n+1) { background-color: var(--blue); }
.major-grid .major-card:nth-child(4n+2) { background-color: var(--coral); }
.major-grid .major-card:nth-child(4n+3) { background-color: var(--amber); }
.major-grid .major-card:nth-child(4n)   { background-color: var(--teal); }
.major-card span {
  position: relative; z-index: 1;
  font-weight: 800;
  font-size: clamp(15px, 1.5vw, 20px);
  color: var(--cream);
  text-align: center;
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
@media (max-width: 900px) { .major-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .major-grid { grid-template-columns: 1fr; } }

/* ------------------------------- 15. FAQ ---------------------------------- */
/* Akordeon FAQ. Memakai <details>/<summary> bawaan HTML, jadi tetap bisa
   dibuka-tutup dan dijelajahi keyboard walau JavaScript mati. */
.faq-accordion { display: grid; gap: 6px; }

.faq-acc { border-radius: 5px; overflow: hidden; }

.faq-acc > summary {
  list-style: none;
  cursor: pointer;
  background: var(--amber);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(15px, 1.45vw, 19px);
  line-height: 1.3;
  padding: clamp(15px, 1.9vw, 23px) clamp(52px, 5vw, 66px) clamp(15px, 1.9vw, 23px) clamp(16px, 2vw, 26px);
  position: relative;
  transition: background-color .2s ease;
}
.faq-acc > summary::-webkit-details-marker { display: none; }   /* Safari */
.faq-acc > summary::marker { content: ""; }
.faq-acc > summary:hover { background: #f08c00; }
.faq-acc > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

/* Lingkaran + / − di kanan, digambar dengan gradient (tanpa berkas gambar) */
.faq-acc > summary::after {
  content: "";
  position: absolute;
  right: clamp(15px, 1.9vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  width: 23px; height: 23px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 11px 2.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2.5px 11px no-repeat;
}
/* saat terbuka, batang vertikal dihilangkan -> berubah jadi tanda minus */
.faq-acc[open] > summary::after {
  background: linear-gradient(currentColor, currentColor) center / 11px 2.5px no-repeat;
}

.faq-acc__answer {
  background: #f7f6f1;
  color: var(--blue);
  padding: clamp(18px, 2.3vw, 28px) clamp(16px, 2vw, 26px);
}
.faq-acc__answer p { font-size: clamp(15px, 1.35vw, 19px); }

@media (prefers-reduced-motion: no-preference) {
  .faq-acc[open] > .faq-acc__answer { animation: faqOpen .22s ease; }
  @keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* ---------------------------- 16. ABOUT LBE ------------------------------- */
.page-hero {
  padding-block: clamp(40px, 5vw, 76px) clamp(46px, 6vw, 86px);
}
.page-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: center;
}
.page-hero .lbe-logo { --logo-size: 60px; margin-bottom: clamp(22px, 3vw, 44px); }
.page-hero__title {
  font-size: var(--fs-display);
  text-transform: uppercase;
  letter-spacing: -0.05em;
  line-height: 1;
}
.page-hero__sub {
  font-size: clamp(16px, 1.6vw, 22px);
  margin-block: clamp(14px, 1.8vw, 24px) clamp(22px, 3vw, 36px);
}
.page-hero__visual { position: relative; }
/* Kartu amber sedikit lebih besar dari fotonya, tapi RATA DI BAWAH (bottom: 0)
   supaya orangnya berpijak di dasar kartu dan tidak tampak melayang. */
.page-hero__visual::before {
  content: "";
  position: absolute; inset: -5% -2% 0 -2%;
  background: var(--amber);
  border: var(--stroke);
  border-radius: var(--r-photo);
}
/* Rasio kotak disamakan dengan rasio gambar potongannya, supaya "contain" mengisi
   penuh dan tidak menyisakan ruang kosong di samping. */
.page-hero__photo {
  position: relative;
  aspect-ratio: 1050 / 966;
  border-radius: var(--r-photo);
  background-color: var(--sky);
  background-size: cover; background-position: center;
}
@media (max-width: 900px) {
  .page-hero-inner { grid-template-columns: 1fr; }
  .page-hero__visual { order: -1; }
}

.about-story__title {
  font-size: clamp(32px, 6.2vw, 85px);
  letter-spacing: -0.045em;
  margin-bottom: clamp(20px, 2.6vw, 36px);
}
.about-story__text {
  font-size: clamp(17px, 2vw, 28px);
  line-height: 1.27;
  margin-bottom: clamp(30px, 4vw, 52px);
}
.about-story__photo {
  aspect-ratio: 1212 / 560;
  border: 2px solid var(--blue);
  border-radius: 11px;
  background-color: var(--ivory);
  background-size: cover; background-position: center;
}
@media (max-width: 700px) { .about-story__photo { aspect-ratio: 1 / 1; } }

.mv { display: grid; grid-template-columns: 1fr 1fr; }
.mv > * { padding: clamp(40px, 6vw, 96px) clamp(24px, 4.6vw, 80px); }
.mv__mission { background: var(--cream); color: var(--amber); }
.mv__vision  { background: var(--amber); color: var(--cream); }
.mv h2 {
  font-size: clamp(48px, 8.6vw, 117px);
  letter-spacing: -0.045em;
  line-height: .9;
  margin-bottom: clamp(18px, 2.4vw, 34px);
}
.mv__icon { width: 40px; height: 40px; margin-bottom: 18px; }
.mv p { font-size: clamp(16px, 2vw, 28px); line-height: 1.27; }
.mv__mission p { font-size: clamp(15px, 1.5vw, 20px); }
@media (max-width: 800px) { .mv { grid-template-columns: 1fr; } }

.corevalue { display: grid; gap: clamp(40px, 5vw, 62px); }
.corevalue__row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 3.6vw, 56px);
  align-items: center;
}
.corevalue__panel { text-align: center; padding-inline: clamp(16px, 2.2vw, 32px); }
/* Lebih kecil dari --fs-panel: kolomnya hanya ~separuh lebar, jadi kata
   panjang seperti "Nurturing" harus tetap muat tanpa terpotong. */
.corevalue__panel h2 {
  font-size: clamp(32px, 5.2vw, 74px);
  line-height: .98;
  max-width: 100%;
}
.corevalue__panel .kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.2vw, 31px);
  letter-spacing: -0.045em;
  margin-top: .2em;
}
.corevalue__text { font-size: clamp(15px, 1.35vw, 19px); }
@media (max-width: 880px) { .corevalue__row { grid-template-columns: 1fr; } }

/* ----------------------------- 17. FOUNDER -------------------------------- */
.founder-hero { position: relative; background: var(--cream); padding-top: clamp(24px, 3vw, 42px); }
.founder-hero__panel {
  background: var(--coral);
  border-radius: 32px;
  color: var(--cream);
  padding: clamp(34px, 4.5vw, 78px) clamp(24px, 4vw, 70px) clamp(40px, 5vw, 80px);
}
.founder-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  margin-bottom: clamp(28px, 3.6vw, 52px);
}
.founder-hero__name {
  font-size: clamp(48px, 7.5vw, 96px);
  line-height: 1.15;
  letter-spacing: -0.04em;
}
.founder-hero__portrait {
  aspect-ratio: 649 / 753;
  border-radius: 28px;
  background-color: var(--amber);
  background-size: cover; background-position: center top;
}
.founder-hero__bio,
.founder-hero__vision {
  max-width: 1100px; margin-inline: auto;
  text-align: center;
  font-size: clamp(17px, 1.9vw, 25px);
  letter-spacing: .03em;
  line-height: 1.4;
}
.founder-hero__vision { margin-top: clamp(20px, 2.6vw, 34px); }
@media (max-width: 860px) {
  .founder-hero__top { grid-template-columns: 1fr; }
  .founder-hero__portrait { max-width: 380px; margin-inline: auto; width: 100%; }
}

/* Grid ubin navigasi halaman Founder */
.ftiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.ftile {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 300px;
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: 4px;
  text-decoration: none;
  background-color: var(--blue);
  background-size: cover; background-position: center top;
  transition: transform .22s ease;
  overflow: hidden;
}
.ftile:hover { transform: translateY(-4px); }
.ftile h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.01em;
  line-height: 1.02;
  position: relative; z-index: 1;
}
.ftile .arrow {
  position: absolute; top: 26px; right: 26px; z-index: 1;
  width: 29px; height: 29px;
}
.ftile--blue  { background-color: var(--blue);  color: var(--cream); }
.ftile--coral { background-color: var(--coral); color: var(--cream); }
.ftile--amber { background-color: var(--amber); color: var(--cream); }
.ftile--white { background-color: var(--cream); color: var(--blue); }
.ftile--photo { color: var(--cream); }
.ftile--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(44,100,128,.72) 100%);
}

.ftile-card {
  background: var(--cream);
  border-radius: 4px;
  padding: clamp(20px, 2.2vw, 30px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  min-height: 210px;
}
.ftile-card__avatar {
  width: 79px; height: 79px; border-radius: 50%;
  border: 3px solid var(--cream);
  background-color: var(--blue);
  background-size: cover; background-position: center top;
  margin-top: -52px;
}
.ftile-card h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 27px);
  color: var(--blue);
}
@media (max-width: 1000px) { .ftiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ftiles { grid-template-columns: 1fr; } .ftile { min-height: 200px; } }

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.pillar {
  border-radius: 25px;
  padding: clamp(26px, 3vw, 42px);
  min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--cream);
}
.pillar h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 27px);
  margin-bottom: .5em;
}
.pillar p { font-size: clamp(15px, 1.35vw, 19px); line-height: 1.5; }
.pillar-1 { background: var(--coral); }
.pillar-2 { background: var(--amber); }
.pillar-3 { background: var(--sky-2); color: var(--blue); }
@media (max-width: 820px) { .pillar-grid { grid-template-columns: 1fr; } .pillar { min-height: 0; } }

.story-split {
  display: grid;
  grid-template-columns: minmax(0, 0.48fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
}
.story-split__photo {
  border-radius: 35px;
  min-height: 340px;
  background-color: var(--sky);
  background-size: cover; background-position: center;
}
.story-split__body {
  background: var(--amber);
  color: var(--cream);
  border-radius: 16px;
  padding: clamp(28px, 3.6vw, 56px);
}
.story-split__body h2 {
  font-size: clamp(28px, 3.6vw, 48px);
  letter-spacing: .02em;
  margin-bottom: clamp(18px, 2.2vw, 30px);
}
.story-split__body p { font-size: clamp(16px, 1.75vw, 24px); text-align: justify; letter-spacing: .03em; }
@media (max-width: 860px) { .story-split { grid-template-columns: 1fr; } }

.pro-exp {
  position: relative;
  color: var(--cream);
  background-color: var(--blue);
  background-size: cover; background-position: center;
  padding-block: clamp(48px, 6vw, 90px);
}
.pro-exp::before { content: ""; position: absolute; inset: 0; background: rgba(56, 125, 159, .86); }
.pro-exp .container { position: relative; z-index: 1; }
.pro-exp h2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 34px);
  letter-spacing: .04em;
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 44px);
}
.pro-exp p {
  font-size: clamp(16px, 1.75vw, 24px);
  text-align: center;
  letter-spacing: .03em;
  max-width: 1210px; margin-inline: auto;
}

.lead-split {
  display: grid;
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 52px);
}
.lead-split h2 {
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.lead-split p { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; }
.lead-gallery { display: grid; gap: 16px; margin-top: clamp(20px, 2.4vw, 32px); }
.lead-gallery__img {
  border-radius: 35px;
  aspect-ratio: 563 / 297;
  background-color: var(--mint);
  /* "center top" supaya kepala orang tidak terpotong saat dipangkas cover */
  background-size: cover; background-position: center top;
}
.lead-gallery--wide { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) {
  .lead-split { grid-template-columns: 1fr; }
  .lead-gallery--wide { grid-template-columns: 1fr; }
}

.cred-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 38px);
}
.cred__img {
  border-radius: 35px;
  aspect-ratio: 4 / 3.9;
  background-color: var(--sky);
  background-size: cover; background-position: center top;
  margin-bottom: clamp(16px, 2vw, 28px);
}
.cred p {
  font-size: clamp(17px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@media (max-width: 820px) { .cred-grid { grid-template-columns: 1fr; } }

.bio-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  gap: clamp(28px, 3.4vw, 52px);
  align-items: start;
}
.bio-split h2 {
  font-size: clamp(28px, 3.6vw, 48px);
  margin-bottom: clamp(16px, 2vw, 26px);
}
.bio-split p { font-size: clamp(16px, 1.8vw, 25px); text-align: justify; letter-spacing: .03em; }
.bio-split ul {
  margin: 0; padding-left: 1.2em;
  font-size: clamp(15px, 1.3vw, 17px);
  text-align: justify;
}
.bio-split li { margin-bottom: .5em; }
.bio-side { display: grid; gap: 18px; }
.bio-side__img {
  border-radius: 35px;
  aspect-ratio: 356 / 211;
  background-color: var(--mint);
  background-size: cover; background-position: center top;
}
.bio-side__img--tall { aspect-ratio: 280 / 373; }
.quote-block {
  border-left: 5px solid var(--coral);
  padding-left: clamp(16px, 2vw, 26px);
  font-style: italic;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
@media (max-width: 860px) { .bio-split { grid-template-columns: 1fr; } }

/* -------------------------- 18. PROGRAM SEKOLAH --------------------------- */
.prog-hero {
  background: var(--teal);
  color: var(--cream);
  padding-block: clamp(34px, 4vw, 56px) clamp(40px, 5vw, 66px);
  text-align: center;
}
.prog-hero h1 {
  font-size: clamp(34px, 6.8vw, 93px);
  line-height: 1.07;
  letter-spacing: -0.02em;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.prog-hero .lbe-logo { --logo-size: 40px; margin-bottom: clamp(22px, 3vw, 36px); }

.prog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px);
}
.prog-card { display: flex; flex-direction: column; color: var(--cream); }
.prog-card__media {
  aspect-ratio: 366 / 285;
  border-radius: var(--r-card);
  background-color: var(--mint);
  background-size: cover; background-position: center;
  margin-bottom: clamp(18px, 2.2vw, 28px);
}
.prog-card h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(16px, 1.55vw, 21px);
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: .7em;
  line-height: 1.25;
}
.prog-card p { font-size: clamp(15px, 1.45vw, 20px); margin-bottom: clamp(18px, 2.2vw, 26px); }
.prog-card .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 900px) { .prog-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* Kartu kampus */
.campus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 30px);
}
.campus-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--cream);
  border-radius: 20px;
  padding: clamp(18px, 2vw, 24px);
  min-height: 185px;
  text-decoration: none;
  color: var(--blue);
  box-shadow: 0 3px 14px rgba(56, 125, 159, .10);
  transition: transform .22s ease, box-shadow .22s ease;
}
.campus-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(56, 125, 159, .20); }
.campus-card h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.15;
  margin-bottom: 10px;
  padding-right: 44px;
}
.campus-card ul {
  list-style: none; margin: 0 0 auto; padding: 0;
  font-size: clamp(12px, 1vw, 13.5px);
  line-height: 1.42;
}
.campus-card__logo {
  height: 38px; width: auto; max-width: 130px;
  object-fit: contain; object-position: left bottom;
  margin-top: 14px;
}
.campus-card__arrow {
  position: absolute; right: 18px; bottom: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--mint); color: var(--blue);
  display: grid; place-items: center;
}
.campus-card:hover .campus-card__arrow { background: var(--coral); color: var(--cream); }
.campus-card__arrow svg { width: 19px; height: 19px; }
@media (max-width: 900px) { .campus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .campus-grid { grid-template-columns: 1fr; } }

/* -------------------------- 19. PROGRAM KULIAH ---------------------------- */
.kuliah-hero {
  background: var(--blue);
  color: var(--cream);
  padding-block: clamp(34px, 4vw, 56px);
}
.kuliah-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr);
  gap: clamp(28px, 3.6vw, 56px);
  align-items: center;
}
.kuliah-hero h1 {
  font-size: clamp(42px, 7.2vw, 99px);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: clamp(16px, 2vw, 26px);
}
.kuliah-hero p { font-size: clamp(16px, 1.45vw, 20px); margin-bottom: clamp(22px, 2.8vw, 34px); }
.kuliah-hero__visual { position: relative; }
.kuliah-hero__visual::before {
  content: "";
  position: absolute; inset: 8% -5% -5% 6%;
  background: var(--mint);
  border-radius: var(--r-card);
}
.kuliah-hero__photo {
  position: relative;
  aspect-ratio: 745 / 411;
  border-radius: var(--r-card);
  background-color: var(--sky);
  background-size: cover; background-position: center;
}
@media (max-width: 900px) {
  .kuliah-hero-inner { grid-template-columns: 1fr; }
  .kuliah-hero__visual { order: -1; }
}

/* --------------------------- 20. KONSULTASI ------------------------------- */
.form-wrap {
  max-width: 760px; margin-inline: auto;
  background: var(--cream);
  border: var(--stroke);
  border-radius: var(--r-panel);
  padding: clamp(24px, 3.4vw, 48px);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 16px;
  color: var(--blue);
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--blue) 40%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--coral); outline: none;
}
.form-note { font-size: 14px; margin-top: 16px; opacity: .85; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(34px, 4vw, 56px);
}
.contact-card {
  background: var(--mint);
  border-radius: var(--r-panel);
  padding: clamp(22px, 2.6vw, 32px);
  text-align: center;
  text-decoration: none;
  color: var(--blue);
  transition: transform .2s ease;
}
.contact-card:hover { transform: translateY(-4px); }
.contact-card svg { width: 30px; height: 30px; margin-bottom: 12px; }
.contact-card h3 { font-family: var(--font-body); font-weight: 800; font-size: 17px; margin-bottom: 6px; }
.contact-card p { font-size: 15px; }
@media (max-width: 760px) { .contact-cards { grid-template-columns: 1fr; } }

/* ----------------------------- 21. FOOTER --------------------------------- */
.site-footer { background: var(--blue); color: var(--cream); padding-block: clamp(34px, 4vw, 48px); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.footer-socials { display: flex; gap: 18px; align-items: center; }
.footer-socials a {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--cream);
  background: color-mix(in srgb, var(--cream) 14%, transparent);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.footer-socials a:hover { background: var(--cream); color: var(--blue); transform: translateY(-3px); }
.footer-socials svg { width: 20px; height: 20px; }

.footer-address { font-size: 14px; margin: 0; max-width: 60ch; line-height: 1.6; }
.footer-address a { color: var(--cream); }

.footer-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px;
  font-size: 14px; font-weight: 700;
}
.footer-links a { color: var(--cream); text-decoration: none; opacity: .92; }
.footer-links a:hover { text-decoration: underline; }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
  font-size: 13px;
  padding-top: 16px; margin-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--cream) 22%, transparent);
  width: 100%;
}
.footer-bottom p { margin: 0; }
.site-footer .lbe-logo { --logo-size: 40px; }

/* Footer versi krem (dipakai di halaman Founder & Konsultasi, seperti aslinya) */
.site-footer--cream { background: var(--cream); color: var(--blue); }
.site-footer--cream .footer-socials a { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }
.site-footer--cream .footer-socials a:hover { background: var(--blue); color: var(--cream); }
.site-footer--cream .footer-address a,
.site-footer--cream .footer-links a { color: var(--blue); }
.site-footer--cream .footer-bottom { border-top-color: color-mix(in srgb, var(--blue) 22%, transparent); }

/* --------------------------- 22. MENGAMBANG ------------------------------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 30px; height: 30px; }

.to-top {
  position: fixed; right: 18px; bottom: 84px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--blue); color: var(--cream);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease, transform .2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { transform: translateY(-3px); }
.to-top svg { width: 20px; height: 20px; }

@media print {
  .site-header, .wa-float, .to-top, .site-footer { display: none; }
}

/* --------------------- 23. HALAMAN NEGARA TUJUAN -------------------------- */
/* Baris pindah cepat antar negara, meniru bilah atas di situs lama. */
.dest-bar {
  position: sticky; top: 74px; z-index: 90;
  background: var(--mint);
  border-bottom: 2px solid color-mix(in srgb, var(--blue) 20%, transparent);
}
.dest-bar__inner {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 4px clamp(12px, 1.8vw, 26px);
  padding-block: 9px;
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 700;
}
.dest-bar a {
  color: var(--blue); text-decoration: none;
  padding: 4px 2px; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.dest-bar a:hover { border-bottom-color: var(--coral); }
.dest-bar a.is-current { color: var(--coral); border-bottom-color: var(--coral); }
@media (max-width: 1000px) {
  .dest-bar { top: 0; position: static; }
  .dest-bar__inner { justify-content: center; }
}

/* Kartu negara yang sedang dibuka diberi tanda */
.dest-card.is-current .dest-card__media { outline: 4px solid var(--coral); outline-offset: 4px; }

/* Panel judul negara / "Living costs" */
.dest-hero {
  border-radius: var(--r-card);
  padding: clamp(18px, 2.6vw, 34px) clamp(20px, 3vw, 46px);
  margin-bottom: clamp(22px, 2.8vw, 36px);
}
.dest-hero h2 {
  font-size: clamp(34px, 6.2vw, 93px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--cream);
}
/* warna panel mengikuti warna kartu negaranya */
.dest-hero--1, .dest-hero--5 { background: var(--sky-2); }
.dest-hero--2, .dest-hero--6 { background: var(--amber); }
.dest-hero--3, .dest-hero--4 { background: var(--coral); }
.dest-hero--1 h2, .dest-hero--5 h2 { color: #fffff8; }

.dest-body { max-width: 78ch; }
.dest-body h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(21px, 2.6vw, 34px);
  letter-spacing: -0.01em;
  color: var(--blue);
  margin: clamp(22px, 2.6vw, 34px) 0 .5em;
}
.dest-body > h3:first-child { margin-top: 0; }
.dest-body p { font-size: clamp(15px, 1.35vw, 19px); margin-bottom: .9em; }
.dest-reasons { margin: 0; padding-left: 1.25em; font-size: clamp(15px, 1.35vw, 19px); }
.dest-reasons li { margin-bottom: .55em; }

/* ----------------------- 24. REQUEST FOR TUTOR ---------------------------- */
.tutor-card {
  max-width: 560px;
  margin-inline: auto;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(56, 125, 159, .18);
}
.tutor-card__head {
  background: var(--amber);
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 30px);
}
.tutor-card__head h2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(19px, 2vw, 26px);
  letter-spacing: -0.01em;
  color: #fff;
}
.tutor-card__body { padding: clamp(20px, 2.6vw, 30px); }

/* --- Tiga formulir berdampingan: sekolah | tutor | universitas -----------
   Di HTML kartu tutor ditulis lebih dulu, supaya di layar sempit (yang
   menumpuk ke bawah) formulir utama itulah yang pertama terlihat. Baru di
   layar lebar, order memindahkannya ke tengah di antara dua kartu lain. */
.tri-forms {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  align-items: stretch;          /* tinggi ketiga kartu disamakan */
}

/* Supaya ketiganya benar-benar sejajar, tiga hal harus disamakan:
   1. tinggi kartu   -> kartu jadi flex kolom, mengisi penuh tinggi baris
   2. tinggi kepala  -> min-height, kalau tidak judul "Looking for a
                        University" yang jadi dua baris akan mendorong
                        seluruh isi kartu kanan turun sendirian
   3. letak tombol   -> margin-top:auto menambatkannya ke dasar kartu */
.tri-forms .tutor-card { display: flex; flex-direction: column; }
.tri-forms .tutor-card__head {
  display: flex;
  align-items: center;
  min-height: clamp(74px, 6vw, 92px);
}
.tri-forms .tutor-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tri-forms .tutor-submit { margin-top: auto; }

/* Judul kartu samping dikecilkan sedikit supaya "Looking for a University"
   tetap muat satu baris di kolom yang sempit. Kalau ia pecah jadi dua baris
   sedangkan "Looking for a School" tidak, kepalanya jadi beda tinggi. */
.tri-forms__side .tutor-card__head h2 { font-size: clamp(16px, 1.45vw, 20px); }
/* .tutor-card sendiri dibatasi 560px dan ditengahkan; di dalam grid ini
   lebarnya harus mengikuti kolomnya. */
.tri-forms .tutor-card { max-width: none; margin-inline: 0; }

/* Satu kolom: tetap ramping dan di tengah, seperti sebelumnya. */
@media (max-width: 1099px) {
  .tri-forms { max-width: 560px; margin-inline: auto; }
}

@media (min-width: 1100px) {
  /* Tiap kartu maksimal 420px. Kalau layarnya belum cukup lebar untuk tiga
     kartu seukuran itu, ketiganya menyusut bersama-sama, jadi tetap sama
     besar. Angka ini sepasang dengan max-width #request-tutor di bawah:
     3 x 420 + 2 jarak + padding container = sekitar 1400px. */
  .tri-forms {
    grid-template-columns: repeat(3, minmax(0, 420px));
    justify-content: center;
  }
  .tri-forms__side--school { order: 1; }
  .tri-forms__main         { order: 2; }
  .tri-forms__side--uni    { order: 3; }
}

/* Bagian ini sengaja dibuat lebih lebar dari bagian lain di situs (1240px),
   karena tiga kartu berdampingan butuh ruang lebih. Hanya bagian formulir
   yang melebar; bagian lain tidak ikut berubah. */
#request-tutor > .container { max-width: 1400px; }

/* Kolom samping lebih sempit, jadi jaraknya sedikit dirapatkan. Selektornya
   harus menyebut .tutor-card juga, kalau tidak ia kalah dari aturan
   ".tutor-card .field" yang tertulis di bawah ini. */
.tri-forms__side.tutor-card .field { margin-bottom: clamp(14px, 1.6vw, 18px); }
.tutor-card__head--blue  { background: var(--blue); }
.tutor-card__head--coral { background: var(--coral); }

.tutor-card .field { margin-bottom: clamp(16px, 2vw, 22px); }
.tutor-card .field label,
.tutor-fieldset legend {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 8px;
  display: block;
  padding: 0;
}
.tutor-card .req { color: #d81b60; }
.tutor-card input,
.tutor-card select {
  background: #eeeeee;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 13px 14px;
  font-size: 16px;
  color: var(--ink);
  width: 100%;
}
.tutor-card input::placeholder { color: #9a9a9a; }
/* Daftar saran alamat */
.field-ac { position: relative; }
/* Kode pos hanya 6 angka, tidak perlu selebar kolom lain */
.field-postal input { max-width: 220px; letter-spacing: .06em; }
.ac-list {
  position: absolute; z-index: 30;
  left: 0; right: 0; top: 100%;
  margin: 4px 0 0; padding: 4px;
  list-style: none;
  background: #fff;
  border: 2px solid var(--amber);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
  max-height: 260px; overflow-y: auto;
}
.ac-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
}
.ac-item:hover, .ac-item.is-active { background: #fff3e0; }
.ac-addr { font-weight: 700; line-height: 1.3; }
.ac-post { font-size: 12px; color: #6b6b6b; }

.tutor-card .field-hint {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6b6b6b;
  line-height: 1.4;
}
.tutor-card input:focus,
.tutor-card select:focus { border-color: var(--amber); background: #fff; outline: none; }

.tutor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(14px, 1.8vw, 20px); }
@media (max-width: 480px) { .tutor-grid { grid-template-columns: 1fr; } }

/* Pilihan mode belajar: radio yang tampil sebagai tombol bersambung */
.tutor-fieldset { border: 0; padding: 0; margin: 0 0 clamp(16px, 2vw, 22px); }
.seg { display: flex; border-radius: 6px; overflow: hidden; background: #eeeeee; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  flex: 1 1 0;
  margin: 0;
  padding: 13px 6px;
  text-align: center;
  cursor: pointer;
  font-weight: 700;
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b6b6b;
  transition: background-color .18s ease, color .18s ease;
}
.seg label:hover { color: var(--ink); }
.seg input:checked + label { background: var(--amber); color: #fff; }
.seg input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: -3px; }

.student-row { position: relative; }
.student-row .student-remove {
  position: absolute; right: 0; top: 0;
  background: none; border: 0; cursor: pointer;
  color: #d81b60; font-weight: 700; font-size: 13px;
}

.tutor-add {
  background: none; border: 0; cursor: pointer;
  color: var(--coral);
  font-weight: 800;
  font-size: clamp(14px, 1.35vw, 16px);
  padding: 0;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
.tutor-add:hover { text-decoration: underline; }

.tutor-points {
  list-style: none; margin: 0 0 clamp(18px, 2.2vw, 26px); padding: 0;
  font-weight: 700;
  font-size: clamp(14px, 1.35vw, 16px);
  color: var(--ink);
}
.tutor-points li { margin-bottom: .6em; }
.tutor-points li::before { content: "– "; }

.tutor-submit {
  display: block; width: 100%;
  background: var(--amber); color: #fff;
  border: 0; border-radius: 6px;
  padding: 16px 20px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease;
}
.tutor-submit:hover { background: #f08c00; }
.tutor-note { font-size: 13px; color: #6b6b6b; margin: 14px 0 0; }

/* --------------------- 24b. STATUS PENGIRIMAN FORMULIR -------------------- */
/* Perangkap bot: disembunyikan dari mata dan dari pembaca layar, tapi tetap
   ada di DOM supaya robot spam mengisinya. Jangan pakai display:none —
   sebagian bot melewatinya. */
.hp {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-status:empty { display: none; }
.form-status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 600;
  line-height: 1.5;
}
.form-status.is-ok {
  background: #e7f6ec;
  border: 2px solid #34a853;
  color: #14622f;
}
.form-status.is-err {
  background: #fdecea;
  border: 2px solid #d93025;
  color: #8c1d16;
}
.form-status.is-warn {
  background: #fff6e0;
  border: 2px solid var(--amber);
  color: #7a4b00;
}
.form-status a { color: inherit; font-weight: 800; }

/* Tanda merah pada kolom wajib yang belum diisi. Kelas .was-validated baru
   dipasang setelah pengunjung menekan tombol kirim, supaya kolom kosong tidak
   sudah merah sejak awal. */
.was-validated input:invalid,
.was-validated select:invalid,
.was-validated textarea:invalid {
  border-color: #d93025 !important;
  background: #fdecea;
}
.was-validated input:invalid:focus,
.was-validated select:invalid:focus,
.was-validated textarea:invalid:focus {
  outline: 3px solid rgba(217, 48, 37, .35);
  outline-offset: 1px;
}

/* ------------------------- 25. HALAMAN HUKUM ------------------------------ */
.legal { max-width: 82ch; }
.legal h2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(19px, 2.2vw, 28px);
  color: var(--blue);
  margin: clamp(28px, 3.2vw, 44px) 0 .55em;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--blue);
  margin: clamp(18px, 2.2vw, 28px) 0 .5em;
}
.legal p, .legal li { font-size: clamp(15px, 1.35vw, 18px); }
.legal ul, .legal ol { padding-left: 1.3em; margin: 0 0 1em; }
.legal li { margin-bottom: .5em; }
.legal a { color: var(--coral); }
.legal__updated {
  display: inline-block;
  background: var(--mint);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  font-size: 14px; font-weight: 700;
  margin-bottom: clamp(24px, 3vw, 38px);
}

/* ------------------------- 26. COOKIE CONSENT ----------------------------- */
.cc-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(44, 100, 128, .45);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.cc-overlay.show { opacity: 1; visibility: visible; }

.cc-banner {
  position: fixed; z-index: 210;
  left: 50%; bottom: 20px;
  transform: translate(-50%, 140%);
  width: min(940px, calc(100vw - 32px));
  background: var(--cream);
  border: var(--stroke);
  border-radius: var(--r-panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  padding: clamp(18px, 2.4vw, 28px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  opacity: 0; visibility: hidden;
  transition: transform .45s cubic-bezier(.22, .9, .3, 1), opacity .35s ease, visibility .35s;
}
.cc-banner.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

.cc-ico { font-size: clamp(28px, 3.4vw, 40px); line-height: 1; }
.cc-text h2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(16px, 1.7vw, 21px);
  color: var(--blue);
  margin-bottom: .35em;
}
.cc-text p { font-size: clamp(13px, 1.25vw, 15px); color: var(--blue); margin: 0; }
.cc-text a { color: var(--coral); font-weight: 700; }

.cc-actions { display: flex; flex-direction: column; gap: 9px; }
.cc-actions .btn { white-space: nowrap; }
.cc-link-btn {
  background: none; border: 0; cursor: pointer;
  color: var(--blue); font-weight: 700; font-size: 13px;
  text-decoration: underline; padding: 2px;
}
.cc-link-btn:hover { color: var(--coral); }

@media (max-width: 780px) {
  .cc-banner { grid-template-columns: 1fr; text-align: center; bottom: 12px; }
  .cc-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* --- Modal pengaturan --- */
.cc-modal {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(44, 100, 128, .55);
  display: grid; place-items: center;
  padding: 16px;
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.cc-modal.show { opacity: 1; visibility: visible; }
.cc-modal-box {
  width: min(620px, 100%);
  max-height: 86vh; overflow-y: auto;
  background: var(--cream);
  border: var(--stroke);
  border-radius: var(--r-panel);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.cc-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: clamp(20px, 2.6vw, 28px);
  border-bottom: 2px solid color-mix(in srgb, var(--blue) 18%, transparent);
}
.cc-modal-head h2 {
  font-family: var(--font-body); font-weight: 800;
  font-size: clamp(18px, 1.9vw, 23px); color: var(--blue); margin-bottom: .3em;
}
.cc-modal-head p { font-size: 14px; margin: 0; }
.cc-close {
  background: none; border: 0; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--blue);
  padding: 0 4px; flex-shrink: 0;
}
.cc-close:hover { color: var(--coral); }

.cc-modal-body { padding: clamp(16px, 2.2vw, 24px) clamp(20px, 2.6vw, 28px); }
.cc-cat {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 14%, transparent);
}
.cc-cat:last-child { border-bottom: 0; }
.cc-cat-text h3 {
  font-family: var(--font-body); font-weight: 800;
  font-size: 16px; color: var(--blue); margin-bottom: .3em;
}
.cc-cat-text p { font-size: 14px; margin: 0; }

.cc-switch { position: relative; flex-shrink: 0; width: 50px; height: 28px; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-slider {
  position: absolute; inset: 0; border-radius: 999px;
  background: #c9d4da; transition: background-color .2s ease; pointer-events: none;
}
.cc-slider::before {
  content: ""; position: absolute;
  width: 22px; height: 22px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: transform .2s ease;
}
.cc-switch input:checked + .cc-slider { background: var(--amber); }
.cc-switch input:checked + .cc-slider::before { transform: translateX(22px); }
.cc-switch input:disabled + .cc-slider { background: var(--teal); opacity: .8; }
.cc-switch input:focus-visible + .cc-slider { outline: 3px solid var(--coral); outline-offset: 2px; }

.cc-modal-foot {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: clamp(16px, 2.2vw, 24px) clamp(20px, 2.6vw, 28px);
  border-top: 2px solid color-mix(in srgb, var(--blue) 18%, transparent);
}

.cc-reopen {
  background: none; border: 0; cursor: pointer;
  color: inherit; font: inherit; font-size: 13px;
  text-decoration: underline; padding: 0;
}
.cc-reopen:hover { opacity: .8; }

/* --------------------- 28. TIGA PILAR: LEARN · GROW · GO ------------------- */
/* Warna tetap per pilar dipakai di seluruh situs supaya pengunjung selalu
   tahu sedang di pintu yang mana: Learn = coral, Grow = amber, Go = biru. */
.pl-learn { --pl: var(--coral); --pl-dark: #e64a17; }
.pl-grow  { --pl: var(--amber); --pl-dark: #e08600; }
.pl-go    { --pl: var(--blue);  --pl-dark: var(--blue-dark); }

.tagline {
  display: inline-flex; gap: .45em; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: .02em; text-transform: uppercase;
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.tagline .t1 { color: var(--coral); }
.tagline .t2 { color: var(--amber); }
.tagline .t3 { color: var(--blue); }

.eyebrow {
  display: inline-block;
  font-weight: 800; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pl, var(--coral));
  margin-bottom: 12px;
}

/* Hero dengan foto bersudut (bukan potongan orang) di atas kartu berwarna */
.p-hero { padding-block: clamp(36px, 5vw, 72px) clamp(46px, 6vw, 88px); }
.p-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(30px, 4.4vw, 70px);
  align-items: center;
}
.p-hero h1 {
  font-size: clamp(36px, 5.2vw, 70px);
  line-height: 1.02; letter-spacing: -0.045em;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.p-hero h1 em { font-style: normal; color: var(--pl, var(--coral)); }
.p-hero__sub {
  font-size: clamp(17px, 1.6vw, 21px);
  max-width: 54ch;
  margin-bottom: clamp(18px, 2.2vw, 28px);
}
.p-hero__visual { position: relative; }
.p-hero__visual::before {
  content: "";
  position: absolute; inset: 7% -4% -5% 7%;
  background: var(--pl, var(--amber));
  border: var(--stroke);
  border-radius: var(--r-photo);
}
.p-hero__photo {
  position: relative;
  aspect-ratio: 4 / 3.3;
  border: var(--stroke);
  border-radius: var(--r-photo);
  background-color: var(--sky);
  background-size: cover; background-position: center;
}
@media (max-width: 900px) {
  .p-hero__inner { grid-template-columns: 1fr; }
  .p-hero__visual { order: -1; max-width: 560px; }
}

.ticks { list-style: none; padding: 0; margin: 0 0 clamp(22px, 2.6vw, 32px); display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 32px; font-weight: 700; font-size: clamp(16px, 1.4vw, 19px); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .2em;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--pl, var(--coral)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffff8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Tombol WhatsApp — CTA utama di ketiga pilar */
.btn-wa {
  gap: 10px;
  background: #25d366; color: #fff;
  border: none; border-radius: var(--r-pill);
  padding: 15px 30px;
  font-size: clamp(15px, 1.25vw, 17px);
  letter-spacing: .02em;
}
.btn-wa:hover { background: #1ebe5b; color: #fff; }
.btn-wa svg { width: 22px; height: 22px; flex-shrink: 0; }
.btn-ghost {
  background: transparent; color: var(--blue);
  border: var(--stroke); border-radius: var(--r-pill);
  padding: 12px 28px;
  font-size: clamp(15px, 1.25vw, 17px);
}
.btn-ghost:hover { background: var(--blue); color: var(--cream); }

/* Tiga pintu di beranda */
.doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.door {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 300px;
  padding: clamp(26px, 3vw, 40px);
  border: var(--stroke);
  border-radius: var(--r-panel);
  background: var(--pl);
  color: var(--cream);
  text-decoration: none;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.door:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(56, 125, 159, .22); }
.door__num { font-weight: 800; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.door h3 {
  font-size: clamp(54px, 6.4vw, 92px);
  line-height: .9; letter-spacing: -0.05em;
  margin: auto 0 12px;
}
.door p { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.35; font-weight: 600; }
.door__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
}
.door__go svg { width: 18px; height: 18px; transition: transform .2s ease; }
.door:hover .door__go svg { transform: translateX(5px); }
.door__badge {
  position: absolute; top: 18px; right: 18px;
  background: var(--cream); color: var(--pl-dark);
  border-radius: var(--r-pill);
  padding: 5px 12px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; } .door { min-height: 230px; } }

/* Kartu isi sederhana: subjek, program, langkah */
.cards {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: var(--gap);
}
.card {
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--blue) 22%, transparent);
  border-radius: var(--r-panel);
  padding: clamp(22px, 2.6vw, 32px);
}
.card h3 {
  font-family: var(--font-body); font-weight: 800;
  font-size: clamp(19px, 1.8vw, 23px);
  letter-spacing: 0; line-height: 1.2;
  margin-bottom: 10px;
}
.card p { font-size: clamp(15px, 1.25vw, 17px); }
.card__icon {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--pl, var(--coral)) 14%, #fff);
  color: var(--pl, var(--coral));
  margin-bottom: 16px;
}
.card__icon svg { width: 28px; height: 28px; }
.card--soon { background: var(--ivory); border-style: dashed; }
.card__tag {
  display: inline-block; margin-bottom: 12px;
  background: var(--mint); color: var(--blue-dark);
  border-radius: var(--r-pill); padding: 4px 12px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.card__media {
  aspect-ratio: 16 / 10;
  margin: calc(-1 * clamp(22px, 2.6vw, 32px)) calc(-1 * clamp(22px, 2.6vw, 32px)) 20px;
  border-radius: calc(var(--r-panel) - 2px) calc(var(--r-panel) - 2px) 0 0;
  background-color: var(--sky);
  background-size: cover; background-position: center;
}
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }

.lead-text { font-size: clamp(17px, 1.6vw, 21px); max-width: 62ch; margin-bottom: clamp(26px, 3vw, 40px); }
.lead-text--center { margin-inline: auto; text-align: center; }

/* Langkah bernomor */
.steps { counter-reset: step; }
.steps .card { position: relative; padding-top: clamp(56px, 5vw, 66px); }
.steps .card::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; top: clamp(18px, 2vw, 24px); left: clamp(22px, 2.6vw, 32px);
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pl, var(--coral)); color: var(--cream);
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
}

/* Tabel biaya — gaya "Programme Fees": blok per jenjang, kartu per pilihan */
.fees { display: grid; gap: clamp(30px, 4vw, 52px); }
.fee-block h3 {
  font-size: clamp(24px, 2.6vw, 34px);
  margin-bottom: 18px;
}
.fee-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.fee-card {
  position: relative;
  background: #fff;
  border: var(--stroke);
  border-radius: var(--r-panel);
  padding: clamp(24px, 2.8vw, 34px);
  display: flex; flex-direction: column;
}
.fee-card--hi { background: var(--pl, var(--coral)); border-color: var(--pl, var(--coral)); color: var(--cream); }
.fee-card__ribbon {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--amber); color: #fff;
  border-radius: var(--r-pill); padding: 5px 14px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.fee-card__name { font-weight: 800; font-size: clamp(17px, 1.5vw, 20px); margin-bottom: 4px; }
/* min-height 2 baris: harga di ketiga kartu tetap sejajar walau deskripsinya beda panjang */
.fee-card__who { font-size: 15px; line-height: 1.4; min-height: 2.8em; opacity: .85; margin-bottom: 18px; }
.fee-card__price {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1; letter-spacing: -0.04em;
}
.fee-card__price small { font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 0; }
.fee-card__month { font-size: 15px; font-weight: 700; margin: 8px 0 18px; opacity: .9; }
.fee-card ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; font-size: 15px; }
.fee-card li { padding-left: 22px; position: relative; }
.fee-card li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; }
.fee-card .btn { margin-top: auto; }
.fee-card--hi .btn-wa { background: var(--cream); color: var(--coral); }
.fee-note { font-size: 15px; opacity: .9; margin-top: 14px; }
@media (max-width: 900px) { .fee-cards { grid-template-columns: 1fr; gap: 26px; } }

/* Ketentuan pembayaran: dua kolom daftar ringkas */
.terms {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}
.terms .card h3 { display: flex; align-items: center; gap: 10px; }
.terms ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: clamp(15px, 1.25vw, 17px); }
@media (max-width: 760px) { .terms { grid-template-columns: 1fr; } }

/* Kotak lead magnet + formulir pendek */
.magnet {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
  background: var(--pl, var(--coral));
  color: var(--cream);
  border-radius: var(--r-panel);
  border: var(--stroke);
  padding: clamp(26px, 4vw, 56px);
}
.magnet h2 { font-size: clamp(32px, 4vw, 54px); letter-spacing: -0.04em; margin-bottom: 14px; }
.magnet p { font-size: clamp(16px, 1.5vw, 20px); }
.magnet .ticks li::before { background-color: var(--cream); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23387d9f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.magnet .ticks { margin: 20px 0 0; }
.magnet form {
  background: var(--cream); color: var(--blue);
  border-radius: calc(var(--r-panel) - 6px);
  padding: clamp(20px, 2.6vw, 32px);
}
.magnet .form-grid { gap: 14px; }
@media (max-width: 900px) { .magnet { grid-template-columns: 1fr; } }

/* Satu baris rujukan ke SekolahdiSG di halaman Go */
.route-note {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--mint);
  border-radius: var(--r-card);
  padding: 16px 22px;
  font-weight: 700;
}
.route-note a { color: var(--coral); }

.story-split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 0.48fr); }
@media (max-width: 860px) { .story-split--flip { grid-template-columns: 1fr; } }

.card ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: clamp(15px, 1.25vw, 17px); }
.card a:not(.btn) { color: var(--coral); font-weight: 700; }

/* Bukti: kredensial */
.proof-cred .cred__img { aspect-ratio: 4 / 3.4; }
.proof-cred .cred p { font-size: clamp(16px, 1.5vw, 20px); }

/* Baris merek induk di footer */
.footer-brand { font-size: 14px; opacity: .92; max-width: 60ch; }
.footer-brand a { color: var(--cream); font-weight: 800; }

/* ----------------------- 27. GAMBAR POTONGAN ------------------------------ */
/* Foto orang tanpa latar. Di Canva diletakkan utuh di atas kartu berwarna,
   jadi harus tampil penuh (contain) dan tidak boleh dipotong (cover).
   Blok ini sengaja diletakkan paling akhir agar mengalahkan aturan komponen. */
.is-cutout {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.is-cutout--bare { background-color: transparent; }