* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --green-dark: #0d3f34;
  --green: #145c4b;
  --cream: #f4f0e7;
  --white: #ffffff;
  --text-dark: #17302b;
  --gold-soft: #c7a76b;
  --header-height: 92px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  background: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.container {
  width: min(92%, 1280px);
  margin-inline: auto;
}

/* HEADER */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition: background .3s ease, box-shadow .3s ease, height .3s ease;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
  height: 78px;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  color: #fff;
}

.site-header.scrolled .brand {
  color: var(--green-dark);
}

.brand-logo {
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 5px;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transition: width .3s ease, height .3s ease, padding .3s ease;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.site-header.scrolled .brand-logo {
  width: 58px;
  height: 58px;
  padding: 4px;
  background: #fff;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-text strong {
  font-size: .94rem;
  letter-spacing: .12em;
}

.brand-text small {
  margin-top: 5px;
  font-size: .65rem;
  opacity: .78;
  letter-spacing: .06em;
}

.main-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 21px;
}

.main-nav > a,
.nav-link-button {
  position: relative;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.94);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 11px 0;
  transition: opacity .2s ease;
}

.site-header.scrolled .main-nav > a,
.site-header.scrolled .nav-link-button {
  color: var(--text-dark);
}

.main-nav > a:hover,
.nav-link-button:hover {
  opacity: .72;
}

.nav-item {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: -22px;
  min-width: 250px;
  padding: 13px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: .22s ease;
}

.dropdown-menu::before {
  content: "";
  position: absolute;
  left: 24px;
  top: -8px;
  width: 16px;
  height: 16px;
  background: #fff;
  transform: rotate(45deg);
}

.dropdown-menu a {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--text-dark);
  padding: 11px 12px;
  border-radius: 7px;
  font-size: .8rem;
  line-height: 1.35;
}

.dropdown-menu a:hover {
  background: #f2f6f4;
  color: var(--green);
}

.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 19px;
  border-radius: 2px;
  background: var(--cream);
  color: var(--green-dark);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  flex-shrink: 0;
}

.site-header.scrolled .desktop-cta {
  background: var(--green-dark);
  color: #fff;
}

.mobile-cta {
  display: none;
}

.menu-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 0;
  width: 38px;
  height: 34px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 27px;
  height: 2px;
  background: #fff;
  margin: 6px auto;
  transition: .25s ease;
}

.site-header.scrolled .menu-toggle span {
  background: var(--green-dark);
}

/* HERO */
.hero {
  position: relative;
  min-height: 100svh;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    url("assets/hero-sdit-alummah.jpg")
    center 42% / cover no-repeat;
  transform: scale(1.02);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 35, 29, .87) 0%, rgba(7, 42, 34, .67) 43%, rgba(8, 38, 31, .18) 76%, rgba(0,0,0,.06) 100%),
    linear-gradient(0deg, rgba(4, 28, 23, .55) 0%, rgba(4, 28, 23, 0) 35%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--header-height) + 45px);
  padding-bottom: 150px;
}

.hero-copy {
  width: min(760px, 72%);
}

.eyebrow {
  margin-bottom: 22px;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: #e4d4b4;
}

.hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 6.2vw, 6.3rem);
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: 600;
  max-width: 980px;
}

.hero h1 span {
  display: block;
  margin-top: 8px;
  font-size: .66em;
  line-height: 1.06;
  color: rgba(255,255,255,.93);
}

.hero-description {
  margin-top: 28px;
  max-width: 630px;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.75;
  color: rgba(255,255,255,.84);
}

.hero-actions {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  min-height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  border: 1px solid transparent;
  transition: .25s ease;
}

.btn-primary {
  background: var(--cream);
  color: var(--green-dark);
}

.btn-primary:hover {
  background: #fff;
  transform: translateY(-2px);
}

.btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}

.btn-outline:hover {
  background: rgba(255,255,255,.1);
}

.hero-bottom {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid rgba(255,255,255,.18);
  background: rgba(7, 42, 34, .34);
  backdrop-filter: blur(7px);
}

.hero-bottom-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.hero-value {
  min-height: 105px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 25px;
  border-right: 1px solid rgba(255,255,255,.16);
}

.hero-value:last-child {
  border-right: 0;
}

.hero-value > span {
  font-size: .68rem;
  opacity: .66;
  letter-spacing: .12em;
}

.hero-value strong,
.hero-value small {
  display: block;
}

.hero-value strong {
  font-family: "Playfair Display", serif;
  font-size: 1.28rem;
}

.hero-value small {
  margin-top: 3px;
  color: rgba(255,255,255,.68);
  font-size: .72rem;
}

.scroll-indicator {
  position: absolute;
  right: 4%;
  bottom: 130px;
  z-index: 4;
  width: 28px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 20px;
}

.scroll-indicator span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  border-radius: 10px;
  background: #fff;
  transform: translateX(-50%);
  animation: scrollDot 1.7s infinite;
}

@keyframes scrollDot {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 18px); }
}




/* ABOUT */
.about-section {
  background: var(--cream);
  padding: 120px 0 110px;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .72fr);
  gap: clamp(60px, 9vw, 150px);
  align-items: start;
}

.section-kicker {
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 700;
  margin-bottom: 22px;
}

.about-heading h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 5.6vw, 6rem);
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: 600;
  color: var(--green-dark);
  max-width: 820px;
}

.about-heading h2 span {
  display: block;
  margin-top: 8px;
  color: var(--green);
}

.about-content {
  padding-top: 44px;
}

.about-content p {
  font-size: 1rem;
  line-height: 1.85;
  color: #4e615c;
  margin-bottom: 20px;
}

.about-content .about-lead {
  font-size: clamp(1.12rem, 1.55vw, 1.35rem);
  line-height: 1.7;
  color: var(--text-dark);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(13, 63, 52, .35);
  color: var(--green-dark);
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .035em;
  transition: gap .25s ease, border-color .25s ease;
}

.text-link:hover {
  gap: 20px;
  border-color: var(--green-dark);
}

.about-divider {
  height: 1px;
  background: rgba(13, 63, 52, .16);
  margin-top: 88px;
}

.about-statement {
  padding-top: 55px;
}

.about-statement p {
  width: min(100%, 1050px);
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 3.8vw, 4rem);
  line-height: 1.18;
  letter-spacing: -.025em;
  color: var(--green-dark);
}



/* LEADERSHIP MESSAGE */
.leadership-section {
  background: #f7f6f1;
  padding: 120px 0 125px;
}

.leadership-head {
  max-width: 900px;
  margin-bottom: 64px;
}

.leadership-head h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.25rem, 3.6vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -.028em;
  font-weight: 600;
  color: var(--green-dark);
  max-width: 760px;
}

.leadership-list {
  display: flex;
  flex-direction: column;
  gap: 82px;
}

.leadership-row {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
  gap: clamp(55px, 8vw, 120px);
  align-items: center;
}

.leadership-row-reverse .leadership-photo {
  order: 2;
}

.leadership-row-reverse .leadership-copy {
  order: 1;
}

.leadership-photo {
  min-width: 0;
}

.leader-photo-frame {
  aspect-ratio: 4 / 5;
  min-height: 500px;
  overflow: hidden;
  background: #e9ece9;
}

.leader-photo-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.leadership-role {
  margin-bottom: 12px;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .69rem;
  font-weight: 700;
}

.leadership-copy h3 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.75rem, 2.5vw, 2.7rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.018em;
  margin-bottom: 24px;
}

.leadership-copy blockquote {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.15rem, 1.75vw, 1.6rem);
  line-height: 1.5;
  color: #263d37;
  border-left: 2px solid rgba(13,63,52,.30);
  padding-left: 22px;
  margin-bottom: 24px;
}

.leadership-text {
  max-width: 590px;
  color: #5a6965;
  font-size: .93rem;
  line-height: 1.78;
  margin-bottom: 18px;
}

/* END LEADERSHIP MESSAGE */

/* PILLARS */
.pillars-section {
  background: #ffffff;
  padding: 120px 0 125px;
}

.pillars-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .6fr);
  gap: clamp(50px, 8vw, 130px);
  align-items: end;
  margin-bottom: 62px;
}

.pillars-head h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.7rem, 4.6vw, 5rem);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 600;
  color: var(--green-dark);
  max-width: 880px;
}

.pillars-intro {
  font-size: 1rem;
  line-height: 1.8;
  color: #5a6965;
  max-width: 470px;
  padding-bottom: 6px;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.pillar-card {
  min-height: 520px;
  padding: 34px 32px 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease;
}

.pillar-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 60px rgba(13, 63, 52, .13);
}

.pillar-card::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  right: -90px;
  top: -80px;
  border: 1px solid currentColor;
  opacity: .12;
}

.pillar-card::before {
  content: "";
  position: absolute;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  right: -30px;
  top: -28px;
  border: 1px solid currentColor;
  opacity: .11;
}

.pillar-card-dark {
  background: var(--green-dark);
  color: #fff;
}

.pillar-card-light {
  background: #eef2ed;
  color: var(--green-dark);
}

.pillar-card-accent {
  background: #d8c9a8;
  color: #17302b;
}

.pillar-number {
  position: relative;
  z-index: 1;
  font-size: .72rem;
  letter-spacing: .18em;
  font-weight: 700;
  opacity: .65;
}

.pillar-content {
  position: relative;
  z-index: 1;
}

.pillar-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  opacity: .7;
  margin-bottom: 12px;
}

.pillar-content h3 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  font-weight: 600;
  margin-bottom: 22px;
}

.pillar-content > p:not(.pillar-label) {
  font-size: .94rem;
  line-height: 1.75;
  opacity: .82;
  max-width: 350px;
  margin-bottom: 28px;
}

.pillar-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .025em;
  opacity: .95;
  transition: gap .25s ease;
}

.pillar-link:hover {
  gap: 18px;
}

/* END PILLARS */


/* PROGRAM UNGGULAN */
.program-section {
  background: #f5f2ea;
  padding: 125px 0 130px;
}

.program-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .6fr);
  gap: clamp(50px, 8vw, 130px);
  align-items: end;
  margin-bottom: 62px;
}

.program-head h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.7rem, 4.6vw, 4.9rem);
  line-height: 1.04;
  letter-spacing: -.032em;
  font-weight: 600;
  color: var(--green-dark);
  max-width: 820px;
}

.program-intro {
  max-width: 470px;
  color: #5b6965;
  font-size: .98rem;
  line-height: 1.8;
  padding-bottom: 5px;
}

.program-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.program-card {
  background: #fff;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.program-visual {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 28px;
  color: #fff;
}

.program-card-large .program-visual {
  min-height: 410px;
}

.program-visual::before,
.program-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
}

.program-visual::before {
  width: 330px;
  height: 330px;
  top: -145px;
  right: -90px;
}

.program-visual::after {
  width: 190px;
  height: 190px;
  bottom: -80px;
  left: -55px;
}

.program-quran {
  background:
    linear-gradient(135deg, rgba(8,48,39,.96), rgba(22,101,82,.82)),
    radial-gradient(circle at 75% 25%, rgba(255,255,255,.18), transparent 30%);
}

.program-ai {
  background:
    linear-gradient(135deg, #223a4b, #486f7a);
}

.program-tech {
  background:
    linear-gradient(135deg, #6f5f42, #b59a65);
}

.program-slc {
  background:
    linear-gradient(135deg, #274b43, #6b8c7f);
}

.program-index {
  position: relative;
  z-index: 1;
  font-size: .72rem;
  letter-spacing: .18em;
  font-weight: 700;
  opacity: .8;
}

.program-visual-label {
  position: relative;
  z-index: 1;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.7rem, 2.8vw, 2.9rem);
  line-height: 1;
  max-width: 70%;
  text-align: right;
}

.program-copy {
  padding: 31px 31px 34px;
}

.program-tag {
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .67rem;
  font-weight: 700;
  margin-bottom: 13px;
}

.program-copy h3 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.65rem, 2.4vw, 2.45rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.022em;
  margin-bottom: 17px;
}

.program-copy > p:not(.program-tag) {
  color: #5a6965;
  font-size: .92rem;
  line-height: 1.75;
  max-width: 600px;
  margin-bottom: 18px;
}

@media (max-width: 900px) and (min-width: 721px) {
  .program-section {
    padding: 95px 0 100px;
  }

  .program-head {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 44px;
  }

  .program-intro {
    max-width: 680px;
  }

  .program-grid {
    grid-template-columns: 1fr;
  }

  .program-visual,
  .program-card-large .program-visual {
    min-height: 350px;
  }
}
/* END PROGRAM UNGGULAN */

/* RESPONSIVE */
@media (max-width: 1120px) {
  .desktop-cta {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(88vw, 420px);
    height: 100svh;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 95px 28px 30px;
    overflow-y: auto;
    box-shadow: -20px 0 60px rgba(0,0,0,.16);
    transition: right .3s ease;
  }

  .main-nav.open {
    right: 0;
  }

  .main-nav > a,
  .nav-link-button {
    color: var(--text-dark) !important;
    width: 100%;
    text-align: left;
    font-size: .95rem;
    padding: 15px 0;
    border-bottom: 1px solid #e7ece9;
  }

  .nav-item {
    width: 100%;
  }

  .dropdown-menu {
    position: static;
    min-width: auto;
    padding: 0 0 5px 12px;
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  .dropdown-menu::before {
    display: none;
  }

  .dropdown-menu.show {
    display: block;
  }

  .dropdown-menu a {
    padding: 10px 0;
    font-size: .82rem;
  }

  .mobile-cta {
    display: inline-flex !important;
    width: 100%;
    margin-top: 25px;
    background: var(--green-dark);
    color: #fff !important;
  }

  .hero-copy {
    width: min(820px, 90%);
  }
}




@media (max-width: 1000px) and (min-width: 721px) {
  .leadership-section {
    padding: 95px 0 100px;
  }

  .leadership-head {
    margin-bottom: 46px;
  }

  .leadership-row {
    grid-template-columns: 1fr 1fr;
    gap: 42px;
  }

  .leader-photo-frame {
    min-height: 430px;
  }

  .leadership-copy blockquote {
    font-size: 1.35rem;
  }
}

@media (max-width: 1000px) and (min-width: 721px) {
  .pillars-section {
    padding: 95px 0 100px;
  }

  .pillars-head {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 45px;
  }

  .pillars-intro {
    max-width: 700px;
  }

  .pillars-grid {
    grid-template-columns: 1fr;
  }

  .pillar-card {
    min-height: 380px;
  }
}

@media (max-width: 900px) and (min-width: 721px) {
  .about-section {
    padding: 95px 0 85px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about-content {
    padding-top: 0;
    max-width: 720px;
  }

  .about-divider {
    margin-top: 65px;
  }
}

@media (max-width: 720px) {
  :root {
    --header-height: 76px;
  }

  .site-header {
    height: 76px;
  }

  .site-header.scrolled {
    height: 70px;
  }

  .brand-logo {
    width: 52px;
    height: 52px;
    padding: 4px;
  }

  .site-header.scrolled .brand-logo {
    width: 48px;
    height: 48px;
  }

  .brand-text strong {
    font-size: .8rem;
  }

  .brand-text small {
    display: none;
  }

  .hero {
    min-height: 100svh;
  }

  .hero-bg {
    background-position: 62% center;
  }

  .hero-overlay {
    background:
      linear-gradient(90deg, rgba(5, 32, 26, .90) 0%, rgba(5, 32, 26, .73) 65%, rgba(5,32,26,.42) 100%),
      linear-gradient(0deg, rgba(4, 28, 23, .64) 0%, rgba(4, 28, 23, .05) 45%);
  }

  .hero-content {
    padding-top: 118px;
    padding-bottom: 210px;
  }

  .hero-copy {
    width: 100%;
  }

  .hero h1 {
    font-size: clamp(2.7rem, 12vw, 4.4rem);
  }

  .hero h1 span {
    font-size: .62em;
    margin-top: 10px;
  }

  .hero-description {
    font-size: .94rem;
    line-height: 1.7;
    max-width: 92%;
  }

  .hero-actions {
    gap: 10px;
  }

  .btn {
    min-height: 48px;
    padding: 0 17px;
    font-size: .75rem;
  }

  .hero-bottom-inner {
    grid-template-columns: 1fr;
  }

  .hero-value {
    min-height: 57px;
    padding: 9px 8px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.13);
    gap: 10px;
  }

  .hero-value > span {
    min-width: 25px;
    font-size: .59rem;
  }

  .hero-value strong {
    font-size: .96rem;
  }

  .hero-value small {
    font-size: .62rem;
  }

  .scroll-indicator {
    display: none;
  }

  .about-section {
    padding: 78px 0 70px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-heading h2 {
    font-size: clamp(2.8rem, 12vw, 4.4rem);
  }

  .about-content {
    padding-top: 0;
  }

  .about-content p {
    font-size: .95rem;
    line-height: 1.75;
  }

  .about-content .about-lead {
    font-size: 1.08rem;
  }

  .about-divider {
    margin-top: 55px;
  }

  .about-statement {
    padding-top: 38px;
  }

  .about-statement p {
    font-size: clamp(1.8rem, 8vw, 3rem);
  }

  .pillars-section {
    padding: 78px 0 82px;
  }

  .pillars-head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 36px;
  }

  .pillars-head h2 {
    font-size: clamp(2.5rem, 10.8vw, 4rem);
  }

  .pillars-intro {
    font-size: .94rem;
    line-height: 1.7;
  }

  .pillars-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .pillar-card {
    min-height: 400px;
    padding: 28px 24px;
  }

  .pillar-content h3 {
    font-size: 2.4rem;
  }

  .pillar-content > p:not(.pillar-label) {
    font-size: .91rem;
  }



  .leadership-section {
    padding: 78px 0 82px;
  }

  .leadership-head {
    margin-bottom: 38px;
  }

  .leadership-head h2 {
    font-size: clamp(2.15rem, 9.5vw, 3.25rem);
  }

  .leadership-list {
    gap: 58px;
  }

  .leadership-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .leadership-row-reverse .leadership-photo,
  .leadership-row-reverse .leadership-copy {
    order: initial;
  }

  .leader-photo-frame {
    min-height: 0;
    aspect-ratio: 4 / 4.8;
  }

  .leadership-copy h3 {
    font-size: 2rem;
    margin-bottom: 20px;
  }

  .leadership-copy blockquote {
    font-size: 1.12rem;
    padding-left: 17px;
  }

  .leadership-text {
    font-size: .9rem;
  }



  .program-section {
    padding: 78px 0 82px;
  }

  .program-head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 36px;
  }

  .program-head h2 {
    font-size: clamp(2.45rem, 10.5vw, 3.85rem);
  }

  .program-intro {
    font-size: .93rem;
    line-height: 1.7;
  }

  .program-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .program-visual,
  .program-card-large .program-visual {
    min-height: 270px;
    padding: 22px;
  }

  .program-visual-label {
    font-size: 1.8rem;
  }

  .program-copy {
    padding: 25px 23px 28px;
  }

  .program-copy h3 {
    font-size: 1.75rem;
  }

  .program-copy > p:not(.program-tag) {
    font-size: .9rem;
  }

}


/* INNER MESSAGE PAGE */
.inner-page {
  background: #f7f6f1;
}

.inner-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(13, 63, 52, .10);
}

.inner-header-wrap {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.brand-inner {
  color: var(--green-dark);
}

.brand-inner .brand-logo {
  width: 56px;
  height: 56px;
  box-shadow: none;
  border: 1px solid rgba(13, 63, 52, .10);
}

.inner-back {
  color: var(--green-dark);
  font-size: .82rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(13, 63, 52, .30);
  padding-bottom: 5px;
}

.message-page {
  min-height: 100vh;
}

.message-hero {
  padding: 85px 0 75px;
  background: var(--cream);
}

.message-hero-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(45px, 7vw, 100px);
  align-items: center;
}

.message-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #e8ece8;
}

.message-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.message-title h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.4rem, 4.3vw, 4.8rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--green-dark);
  max-width: 780px;
}

.message-role {
  margin-top: 16px;
  color: #5a6965;
  font-size: .95rem;
  line-height: 1.5;
}

.message-content-section {
  padding: 80px 0 110px;
  background: #ffffff;
}

.message-content {
  max-width: 820px;
}

.message-content p {
  font-size: 1.04rem;
  line-height: 1.95;
  color: #435550;
  margin-bottom: 28px;
}

.message-content .salam {
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  color: var(--green-dark);
}

.message-signature {
  padding-top: 30px;
  margin-top: 40px;
  border-top: 1px solid rgba(13, 63, 52, .12);
}

.message-signature strong {
  color: var(--green-dark);
  font-family: "Playfair Display", serif;
  font-size: 1.3rem;
}

.message-signature span {
  font-size: .87rem;
  color: #6b7774;
}

@media (max-width: 720px) {
  .inner-header-wrap {
    min-height: 74px;
  }

  .brand-inner .brand-logo {
    width: 46px;
    height: 46px;
  }

  .brand-inner .brand-text small {
    display: none;
  }

  .inner-back {
    font-size: .72rem;
  }

  .message-hero {
    padding: 55px 0 50px;
  }

  .message-hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .message-person {
    max-width: 230px;
  }

  .message-title h1 {
    font-size: 2.55rem;
  }

  .message-content-section {
    padding: 55px 0 75px;
  }

  .message-content p {
    font-size: .96rem;
    line-height: 1.82;
  }

  .message-content .salam {
    font-size: 1.18rem;
  }
}
/* END INNER MESSAGE PAGE */


/* PROFILE SDIT AL-UMMAH PAGE */
.profile-page {
  background: #fff;
}

.profile-hero {
  background: var(--cream);
  padding: 96px 0 84px;
}

.profile-title {
  max-width: 920px;
}

.profile-title h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 5.5vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 600;
  color: var(--green-dark);
}

.profile-title > p:last-child {
  margin-top: 16px;
  color: #61706c;
  font-size: .98rem;
  letter-spacing: .02em;
}

.profile-story {
  padding: 88px 0 120px;
  background: #fff;
}

.profile-story-wrap {
  max-width: 1180px;
}

.profile-intro {
  max-width: 920px;
  margin-bottom: 64px;
}

.profile-intro-lead {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 3.1vw, 3rem);
  line-height: 1.24;
  letter-spacing: -.025em;
  color: var(--green-dark);
}

.profile-wide-image {
  width: 100%;
  aspect-ratio: 16 / 8.7;
  overflow: hidden;
  margin: 0 0 82px;
  background: #edf0ec;
}

.profile-wide-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 54%;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

.profile-wide-image:hover img {
  transform: scale(1.015);
}

.profile-text-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(40px, 7vw, 95px);
  max-width: 980px;
  margin: 0 auto 96px;
}

.profile-text-label {
  padding-top: 5px;
}

.profile-text-label span {
  display: block;
  margin-bottom: 12px;
  color: #97a29e;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.profile-text-label p {
  color: var(--green);
  font-size: .72rem;
  line-height: 1.5;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.profile-copy {
  max-width: 760px;
}

.profile-copy p {
  font-size: 1rem;
  line-height: 1.92;
  color: #445650;
  margin-bottom: 26px;
}

.profile-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
  gap: clamp(58px, 9vw, 125px);
  align-items: center;
  padding: 86px 0;
  margin-bottom: 88px;
  border-top: 1px solid rgba(13,63,52,.10);
  border-bottom: 1px solid rgba(13,63,52,.10);
}

.profile-split-copy {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 38px;
  align-items: start;
}

.profile-portrait-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  background: #edf0ec;
}

.profile-portrait-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 58% center;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

.profile-portrait-image:hover img {
  transform: scale(1.018);
}

.profile-closing {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(40px, 7vw, 95px);
  max-width: 980px;
  margin: 0 auto;
}

.profile-copy-last p:last-child {
  margin-bottom: 0;
}

/* subtle entrance animation */
.profile-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.7,.2,1);
}

.profile-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .profile-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .profile-wide-image img,
  .profile-portrait-image img {
    transition: none;
  }
}

@media (max-width: 900px) and (min-width: 721px) {
  .profile-story {
    padding: 72px 0 96px;
  }

  .profile-text-grid,
  .profile-closing {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 38px;
  }

  .profile-split {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .profile-split-copy {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .profile-portrait-image {
    width: min(70%, 520px);
    aspect-ratio: 4 / 4.8;
    margin-left: auto;
  }
}

@media (max-width: 720px) {
  .profile-hero {
    padding: 58px 0 52px;
  }

  .profile-title h1 {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .profile-story {
    padding: 52px 0 78px;
  }

  .profile-intro {
    margin-bottom: 38px;
  }

  .profile-intro-lead {
    font-size: clamp(1.55rem, 7.3vw, 2.25rem);
    line-height: 1.28;
  }

  .profile-wide-image {
    aspect-ratio: 4 / 3;
    margin-bottom: 52px;
  }

  .profile-text-grid,
  .profile-closing,
  .profile-split-copy {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .profile-text-grid {
    margin-bottom: 58px;
  }

  .profile-copy p {
    font-size: .95rem;
    line-height: 1.82;
  }

  .profile-split {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 58px 0;
    margin-bottom: 58px;
  }

  .profile-portrait-image {
    width: 100%;
    aspect-ratio: 4 / 4.5;
  }

  .profile-text-label {
    max-width: 210px;
  }
}
/* END PROFILE SDIT AL-UMMAH PAGE */


/* VISI MISI PAGE */
.vision-page {
  background: #fff;
}

.vision-hero {
  padding: 92px 0 82px;
  background: var(--cream);
}

.vision-hero-inner {
  max-width: 900px;
}

.vision-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 5.6vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 600;
  color: var(--green-dark);
}

.vision-hero-sub {
  margin-top: 18px;
  color: #61706c;
  font-size: 1rem;
  line-height: 1.7;
}

.dimension-section {
  padding: 100px 0 112px;
  background: #fff;
}

.dimension-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr);
  gap: clamp(55px, 8vw, 120px);
  align-items: end;
  margin-bottom: 58px;
}

.dimension-head h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
  color: var(--green-dark);
  max-width: 760px;
}

.dimension-head > p {
  color: #5d6b67;
  font-size: .95rem;
  line-height: 1.8;
  max-width: 440px;
}

.dimension-list {
  border-top: 1px solid rgba(13,63,52,.13);
}

.dimension-item {
  display: grid;
  grid-template-columns: 70px minmax(180px, .65fr) minmax(0, 1fr);
  align-items: center;
  min-height: 96px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(13,63,52,.13);
}

.dimension-item > span {
  color: #9ba7a3;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.dimension-item h3 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.3rem, 2.1vw, 2rem);
  font-weight: 600;
}

.dimension-item p {
  justify-self: end;
  text-align: right;
  color: var(--green);
  font-size: clamp(1rem, 1.7vw, 1.4rem);
  font-weight: 600;
}

.school-vision-section {
  padding: 104px 0;
  background: var(--green-dark);
  color: #fff;
}

.school-vision-grid {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: clamp(45px, 8vw, 105px);
  align-items: start;
}

.vision-label-block span {
  display: block;
  color: #ddc89c;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  margin-bottom: 10px;
}

.vision-label-block p {
  color: rgba(255,255,255,.72);
  font-size: .82rem;
  line-height: 1.5;
}

.school-vision-grid blockquote {
  margin: 0;
  max-width: 900px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 3.4vw, 3.35rem);
  line-height: 1.32;
  letter-spacing: -.02em;
  font-weight: 600;
  color: #fff;
}

.mission-section {
  padding: 108px 0 122px;
  background: #f7f6f1;
}

.mission-head {
  max-width: 800px;
  margin-bottom: 54px;
}

.mission-head h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.2rem, 3.9vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 600;
  color: var(--green-dark);
}

.mission-list {
  border-top: 1px solid rgba(13,63,52,.13);
}

.mission-item {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 27px 0;
  border-bottom: 1px solid rgba(13,63,52,.13);
}

.mission-item span {
  padding-top: 5px;
  color: #9ba7a3;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.mission-item p {
  max-width: 900px;
  color: #384d47;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.7;
}

/* smooth reveal */
.vision-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.7,.2,1);
}

.vision-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .vision-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 720px) {
  .vision-hero {
    padding: 58px 0 52px;
  }

  .vision-hero h1 {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .dimension-section {
    padding: 66px 0 76px;
  }

  .dimension-head {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 38px;
  }

  .dimension-head h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .dimension-item {
    grid-template-columns: 42px 1fr;
    gap: 8px 16px;
    min-height: 88px;
    padding: 18px 0;
  }

  .dimension-item h3 {
    font-size: 1.35rem;
  }

  .dimension-item p {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    font-size: .94rem;
  }

  .school-vision-section {
    padding: 70px 0 76px;
  }

  .school-vision-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .school-vision-grid blockquote {
    font-size: clamp(1.55rem, 7.2vw, 2.35rem);
  }

  .mission-section {
    padding: 72px 0 82px;
  }

  .mission-head {
    margin-bottom: 38px;
  }

  .mission-item {
    grid-template-columns: 42px 1fr;
    gap: 14px;
    padding: 22px 0;
  }

  .mission-item p {
    font-size: .95rem;
    line-height: 1.65;
  }
}
/* END VISI MISI PAGE */


/* OVERVIEW PAGE */
.overview-page {
  background: #fff;
}

.overview-hero {
  padding: 92px 0 82px;
  background: var(--cream);
}

.overview-hero-inner {
  max-width: 920px;
}

.overview-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 5.6vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 600;
  color: var(--green-dark);
}

.overview-hero-sub {
  margin-top: 18px;
  color: #61706c;
  font-size: 1rem;
  line-height: 1.7;
}

.overview-story-section {
  padding: 98px 0 108px;
  background: #fff;
}

.overview-story {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(45px, 8vw, 110px);
  max-width: 1080px;
}

.overview-story-label {
  padding-top: 8px;
}

.overview-story-label span,
.overview-panel-top span {
  display: block;
  margin-bottom: 12px;
  color: #99a49f;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.overview-story-label p,
.overview-panel-top p {
  color: var(--green);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.overview-story-copy {
  max-width: 800px;
}

.overview-story-copy p {
  color: #445650;
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: 26px;
}

.overview-story-copy .overview-lead {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  line-height: 1.42;
  letter-spacing: -.015em;
  margin-bottom: 34px;
}

.overview-grid-section {
  padding: 0 0 110px;
  background: #fff;
}

.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.overview-panel {
  min-height: 460px;
  padding: 42px 38px;
  background: #f3f1ea;
  color: var(--green-dark);
}

.overview-panel-dark {
  background: var(--green-dark);
  color: #fff;
}

.overview-panel-dark .overview-panel-top span,
.overview-panel-dark .overview-panel-top p {
  color: rgba(255,255,255,.65);
}

.overview-panel h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 3.3vw, 3.2rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.025em;
  margin: 55px 0 38px;
}

.overview-list {
  border-top: 1px solid rgba(13,63,52,.14);
}

.overview-panel-dark .overview-list {
  border-top-color: rgba(255,255,255,.18);
}

.overview-list-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: center;
  padding: 17px 0;
  border-bottom: 1px solid rgba(13,63,52,.14);
}

.overview-panel-dark .overview-list-item {
  border-bottom-color: rgba(255,255,255,.18);
}

.overview-list-item span {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .15em;
  opacity: .55;
}

.overview-list-item p {
  font-size: 1rem;
  line-height: 1.45;
}

.learning-process-section {
  padding: 108px 0 118px;
  background: #f7f6f1;
}

.learning-process-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: end;
  margin-bottom: 54px;
}

.learning-process-head h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
  color: var(--green-dark);
  max-width: 720px;
}

.learning-process-head > p {
  max-width: 430px;
  color: #5c6a66;
  font-size: .95rem;
  line-height: 1.8;
}

.learning-process-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(13,63,52,.14);
  border-bottom: 1px solid rgba(13,63,52,.14);
}

.learning-process-item {
  min-height: 160px;
  padding: 25px 20px;
  border-right: 1px solid rgba(13,63,52,.14);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.learning-process-item:last-child {
  border-right: 0;
}

.learning-process-item span {
  color: #9aa6a1;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .17em;
}

.learning-process-item p {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
  line-height: 1.15;
}

.overview-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s ease,
    transform .7s cubic-bezier(.2,.7,.2,1);
}

.overview-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .overview-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) and (min-width: 721px) {
  .overview-story {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 42px;
  }

  .overview-grid {
    grid-template-columns: 1fr;
  }

  .learning-process-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .learning-process-item:nth-child(3) {
    border-right: 0;
  }

  .learning-process-item:nth-child(-n+3) {
    border-bottom: 1px solid rgba(13,63,52,.14);
  }
}

@media (max-width: 720px) {
  .overview-hero {
    padding: 58px 0 52px;
  }

  .overview-hero h1 {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .overview-story-section {
    padding: 64px 0 72px;
  }

  .overview-story {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .overview-story-copy .overview-lead {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .overview-story-copy p {
    font-size: .95rem;
    line-height: 1.82;
  }

  .overview-grid-section {
    padding-bottom: 72px;
  }

  .overview-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .overview-panel {
    min-height: auto;
    padding: 30px 24px;
  }

  .overview-panel h2 {
    margin: 38px 0 26px;
    font-size: 2.05rem;
  }

  .learning-process-section {
    padding: 72px 0 82px;
  }

  .learning-process-head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 38px;
  }

  .learning-process-head h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .learning-process-list {
    grid-template-columns: 1fr;
  }

  .learning-process-item {
    min-height: 92px;
    border-right: 0;
    border-bottom: 1px solid rgba(13,63,52,.14);
    flex-direction: row;
    align-items: center;
  }

  .learning-process-item:last-child {
    border-bottom: 0;
  }

  .learning-process-item p {
    font-size: 1.35rem;
    text-align: right;
  }
}
/* END OVERVIEW PAGE */


/* GURU & TENAGA KEPENDIDIKAN PAGE */
.staff-page {
  background: #fff;
}

.staff-hero {
  padding: 94px 0 86px;
  background: var(--cream);
}

.staff-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .48fr);
  gap: clamp(55px, 9vw, 130px);
  align-items: end;
}

.staff-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 5.2vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 600;
  color: var(--green-dark);
}

.staff-hero-intro {
  max-width: 430px;
  color: #596963;
  font-size: .96rem;
  line-height: 1.8;
  padding-bottom: 5px;
}

.staff-directory-section {
  padding: 92px 0 122px;
  background: #fff;
}

.staff-directory-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 30px;
  margin-bottom: 44px;
  border-bottom: 1px solid rgba(13,63,52,.12);
}

.staff-directory-head .section-kicker {
  margin-bottom: 0;
}

.staff-count {
  color: #6a7773;
  font-size: .82rem;
  font-weight: 600;
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 26px;
  row-gap: 54px;
}

.staff-card {
  min-width: 0;
}

.staff-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #e8ece8;
  margin-bottom: 22px;
}

.staff-photo img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .75s cubic-bezier(.2,.7,.2,1);
}

.staff-card:hover .staff-photo img {
  transform: scale(1.018);
}

.staff-initials {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.3rem, 4vw, 4.2rem);
  color: rgba(13,63,52,.38);
  background:
    linear-gradient(145deg, #eef1ed, #dde5df);
}

.staff-photo.photo-failed .staff-initials {
  z-index: 3;
}

.staff-copy {
  padding-right: 10px;
}

.staff-role {
  margin-bottom: 9px;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .63rem;
  line-height: 1.5;
  font-weight: 700;
}

.staff-copy h3 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.35rem, 1.8vw, 1.75rem);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -.015em;
}

.staff-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.2,.7,.2,1);
}

.staff-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .staff-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .staff-photo img {
    transition: none;
  }
}

@media (max-width: 900px) and (min-width: 721px) {
  .staff-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .staff-hero-intro {
    max-width: 650px;
  }

  .staff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .staff-hero {
    padding: 58px 0 54px;
  }

  .staff-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .staff-hero h1 {
    font-size: clamp(2.45rem, 11vw, 3.8rem);
  }

  .staff-directory-section {
    padding: 60px 0 82px;
  }

  .staff-directory-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
  }

  .staff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 14px;
  }

  .staff-photo {
    margin-bottom: 15px;
  }

  .staff-role {
    font-size: .55rem;
    letter-spacing: .10em;
  }

  .staff-copy h3 {
    font-size: 1.08rem;
  }
}

@media (max-width: 480px) {
  .staff-grid {
    grid-template-columns: 1fr;
    row-gap: 42px;
  }

  .staff-photo {
    aspect-ratio: 4 / 4.8;
  }

  .staff-copy h3 {
    font-size: 1.35rem;
  }
}
/* END GURU & TENAGA KEPENDIDIKAN PAGE */


/* FASILITAS PAGE */
.facility-page {
  background: #fff;
}

.facility-hero {
  padding: 94px 0 86px;
  background: var(--cream);
}

.facility-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .48fr);
  gap: clamp(55px, 9vw, 130px);
  align-items: end;
}

.facility-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 5.4vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 600;
  color: var(--green-dark);
}

.facility-hero-intro {
  max-width: 430px;
  color: #596963;
  font-size: .96rem;
  line-height: 1.8;
  padding-bottom: 5px;
}

.facility-gallery-section {
  padding: 82px 0 105px;
  background: #fff;
}

.facility-gallery {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  grid-template-rows: 270px 270px;
  gap: 20px;
}

.facility-photo {
  margin: 0;
  overflow: hidden;
  background: #ecefeb;
}

.facility-photo-wide {
  grid-row: 1 / span 2;
}

.facility-photo-tall,
.facility-photo-small {
  min-height: 0;
}

.facility-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

.facility-photo:hover img {
  transform: scale(1.018);
}

.facility-list-section {
  padding: 108px 0 115px;
  background: #f7f6f1;
}

.facility-list-head {
  max-width: 860px;
  margin-bottom: 50px;
}

.facility-list-head h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
  color: var(--green-dark);
}

.facility-list {
  border-top: 1px solid rgba(13,63,52,.13);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 50px;
}

.facility-item {
  min-height: 88px;
  padding: 21px 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
  border-bottom: 1px solid rgba(13,63,52,.13);
}

.facility-item span {
  padding-top: 4px;
  color: #98a49f;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .17em;
}

.facility-item p {
  color: #394e47;
  font-size: .98rem;
  line-height: 1.65;
}

.facility-story-section {
  padding: 110px 0 125px;
  background: #fff;
}

.facility-story {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.facility-story-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .72fr);
  gap: clamp(55px, 8vw, 115px);
  align-items: center;
}

.facility-story-row-reverse figure {
  order: 2;
}

.facility-story-row-reverse .facility-story-copy {
  order: 1;
}

.facility-story-row figure {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #edf0ec;
}

.facility-story-row figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

.facility-story-row:hover figure img {
  transform: scale(1.015);
}

.facility-story-copy h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 3.4vw, 3.45rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 22px;
}

.facility-story-copy > p:last-child {
  color: #5a6965;
  font-size: .95rem;
  line-height: 1.8;
  max-width: 520px;
}

.facility-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .68s ease,
    transform .68s cubic-bezier(.2,.7,.2,1);
}

.facility-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .facility-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .facility-photo img,
  .facility-story-row figure img {
    transition: none;
  }
}

@media (max-width: 900px) and (min-width: 721px) {
  .facility-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .facility-hero-intro {
    max-width: 650px;
  }

  .facility-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 360px 260px;
  }

  .facility-photo-wide {
    grid-column: 1 / span 2;
    grid-row: auto;
  }

  .facility-list {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .facility-story-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .facility-story-row-reverse figure,
  .facility-story-row-reverse .facility-story-copy {
    order: initial;
  }
}

@media (max-width: 720px) {
  .facility-hero {
    padding: 58px 0 54px;
  }

  .facility-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .facility-hero h1 {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .facility-gallery-section {
    padding: 54px 0 72px;
  }

  .facility-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 14px;
  }

  .facility-photo-wide,
  .facility-photo-tall,
  .facility-photo-small {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }

  .facility-list-section {
    padding: 72px 0 82px;
  }

  .facility-list-head {
    margin-bottom: 36px;
  }

  .facility-list-head h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .facility-list {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .facility-item {
    grid-template-columns: 42px 1fr;
    min-height: 78px;
    padding: 18px 0;
  }

  .facility-item p {
    font-size: .94rem;
  }

  .facility-story-section {
    padding: 76px 0 88px;
  }

  .facility-story {
    gap: 68px;
  }

  .facility-story-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .facility-story-row-reverse figure,
  .facility-story-row-reverse .facility-story-copy {
    order: initial;
  }

  .facility-story-row figure {
    aspect-ratio: 4 / 3;
  }

  .facility-story-copy h2 {
    font-size: clamp(1.85rem, 8vw, 2.7rem);
  }
}
/* END FASILITAS PAGE */


/* AKADEMIK - KURIKULUM PAGE */
.curriculum-page {
  background: #fff;
}

.curriculum-hero {
  padding: 96px 0 88px;
  background: var(--cream);
}

.curriculum-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .48fr);
  gap: clamp(55px, 9vw, 130px);
  align-items: end;
}

.curriculum-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 5.4vw, 5.7rem);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 600;
  color: var(--green-dark);
}

.curriculum-hero-intro {
  max-width: 450px;
  color: #596963;
  font-size: .98rem;
  line-height: 1.8;
  padding-bottom: 5px;
}

.curriculum-intro-section {
  padding: 100px 0 108px;
  background: #fff;
}

.curriculum-intro {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(45px, 8vw, 110px);
  max-width: 1080px;
}

.curriculum-intro-label,
.robotics-label {
  padding-top: 8px;
}

.curriculum-intro-label span,
.robotics-label span {
  display: block;
  color: #98a49f;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 12px;
}

.curriculum-intro-label p,
.robotics-label p {
  color: var(--green);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1.55;
}

.curriculum-intro-copy {
  max-width: 790px;
}

.curriculum-lead {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.55rem, 2.45vw, 2.25rem);
  line-height: 1.4;
  letter-spacing: -.015em;
  margin-bottom: 30px;
}

.curriculum-intro-copy > p:not(.curriculum-lead),
.robotics-copy > div:last-child > p:not(.curriculum-lead) {
  color: #445650;
  font-size: 1rem;
  line-height: 1.9;
}

.curriculum-types-section {
  padding: 108px 0 118px;
  background: #f7f6f1;
}

.curriculum-types-head {
  max-width: 820px;
  margin-bottom: 48px;
}

.curriculum-types-head h2 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
}

.curriculum-types-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.curriculum-type {
  min-height: 430px;
  padding: 32px 30px;
  background: #fff;
  color: var(--green-dark);
  display: flex;
  flex-direction: column;
}

.curriculum-type-dark {
  background: var(--green-dark);
  color: #fff;
}

.curriculum-type-accent {
  background: #d9c9a5;
  color: #17302b;
}

.curriculum-type > span {
  color: currentColor;
  opacity: .55;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.curriculum-type-label {
  margin-top: auto;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .65rem;
  font-weight: 700;
  opacity: .7;
}

.curriculum-type h3 {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 2.6vw, 2.7rem);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -.025em;
  margin-bottom: 20px;
}

.curriculum-type > p:last-child {
  font-size: .92rem;
  line-height: 1.72;
  opacity: .8;
}

.curriculum-feature-section {
  padding: 112px 0;
  background: #fff;
}

.curriculum-feature-light {
  background: var(--cream);
}

.curriculum-feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .75fr);
  gap: clamp(58px, 9vw, 125px);
  align-items: center;
}

.curriculum-feature-row-reverse .curriculum-feature-image {
  order: 2;
}

.curriculum-feature-row-reverse .curriculum-feature-copy {
  order: 1;
}

.curriculum-feature-image {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #ecefeb;
  position: relative;
}

.curriculum-feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

.curriculum-feature-row:hover .curriculum-feature-image img {
  transform: scale(1.015);
}

.curriculum-video-shot figcaption,
.robotics-secondary-image figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  background: rgba(13, 63, 52, .82);
  color: #fff;
  padding: 8px 11px;
  font-size: .67rem;
  letter-spacing: .05em;
}

.curriculum-feature-copy h2 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2rem, 3.5vw, 3.55rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 600;
  margin-bottom: 24px;
}

.curriculum-feature-copy > p:not(.section-kicker) {
  color: #52625d;
  font-size: .96rem;
  line-height: 1.83;
  margin-bottom: 20px;
}

.robotics-section {
  padding: 115px 0 122px;
  background: #f7f6f1;
}

.robotics-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, .48fr);
  gap: clamp(55px, 9vw, 125px);
  align-items: end;
  margin-bottom: 54px;
}

.robotics-head h2 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
  max-width: 780px;
}

.robotics-head > p {
  color: #5a6965;
  font-size: .95rem;
  line-height: 1.8;
  max-width: 420px;
}

.robotics-gallery {
  display: grid;
  grid-template-columns: 1.32fr .68fr;
  gap: 18px;
  margin-bottom: 78px;
}

.robotics-gallery figure {
  margin: 0;
  overflow: hidden;
  background: #e9ede9;
  position: relative;
}

.robotics-main-image {
  aspect-ratio: 16 / 9;
}

.robotics-secondary-image {
  aspect-ratio: 4 / 5;
}

.robotics-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

.robotics-gallery figure:hover img {
  transform: scale(1.015);
}

.robotics-copy {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(45px, 8vw, 105px);
  max-width: 1040px;
}

.curriculum-closing-section {
  padding: 108px 0 118px;
  background: var(--green-dark);
  color: #fff;
}

.curriculum-closing {
  max-width: 980px;
}

.curriculum-closing .section-kicker {
  color: #dbc497;
}

.curriculum-closing blockquote {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  line-height: 1.32;
  letter-spacing: -.02em;
  color: #fff;
  font-weight: 600;
}

.curriculum-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .68s ease,
    transform .68s cubic-bezier(.2,.7,.2,1);
}

.curriculum-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .curriculum-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .curriculum-feature-image img,
  .robotics-gallery img {
    transition: none;
  }
}

@media (max-width: 900px) and (min-width: 721px) {
  .curriculum-hero-grid,
  .robotics-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .curriculum-hero-intro,
  .robotics-head > p {
    max-width: 680px;
  }

  .curriculum-types-grid {
    grid-template-columns: 1fr;
  }

  .curriculum-type {
    min-height: 330px;
  }

  .curriculum-feature-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .curriculum-feature-row-reverse .curriculum-feature-image,
  .curriculum-feature-row-reverse .curriculum-feature-copy {
    order: initial;
  }

  .robotics-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .robotics-main-image,
  .robotics-secondary-image {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 720px) {
  .curriculum-hero {
    padding: 58px 0 54px;
  }

  .curriculum-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .curriculum-hero h1 {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .curriculum-intro-section {
    padding: 66px 0 74px;
  }

  .curriculum-intro,
  .robotics-copy {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .curriculum-lead {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .curriculum-types-section {
    padding: 72px 0 82px;
  }

  .curriculum-types-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .curriculum-type {
    min-height: 360px;
    padding: 28px 24px;
  }

  .curriculum-feature-section {
    padding: 76px 0 82px;
  }

  .curriculum-feature-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .curriculum-feature-row-reverse .curriculum-feature-image,
  .curriculum-feature-row-reverse .curriculum-feature-copy {
    order: initial;
  }

  .curriculum-feature-image {
    aspect-ratio: 4 / 3;
  }

  .curriculum-feature-copy h2 {
    font-size: clamp(1.9rem, 8vw, 2.7rem);
  }

  .robotics-section {
    padding: 76px 0 84px;
  }

  .robotics-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .robotics-head h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .robotics-gallery {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 52px;
  }

  .robotics-main-image,
  .robotics-secondary-image {
    aspect-ratio: 4 / 3;
  }

  .curriculum-closing-section {
    padding: 76px 0 84px;
  }

  .curriculum-closing blockquote {
    font-size: clamp(1.55rem, 7.2vw, 2.35rem);
  }
}
/* END AKADEMIK - KURIKULUM PAGE */


/* AKADEMIK - PROGRAM AL-QURAN PAGE */
.quran-page {
  background: #fff;
}

.quran-hero {
  padding: 96px 0 88px;
  background: var(--cream);
}

.quran-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .48fr);
  gap: clamp(55px, 9vw, 130px);
  align-items: end;
}

.quran-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 5.4vw, 5.7rem);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 600;
  color: var(--green-dark);
}

.quran-hero-intro {
  max-width: 450px;
  color: #596963;
  font-size: .98rem;
  line-height: 1.8;
  padding-bottom: 5px;
}

.quran-intro-section {
  padding: 100px 0 108px;
}

.quran-intro {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(45px, 8vw, 110px);
  max-width: 1080px;
}

.quran-intro-label,
.quran-munaqosyah-label {
  padding-top: 8px;
}

.quran-intro-label span,
.quran-munaqosyah-label span {
  display: block;
  color: #98a49f;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 12px;
}

.quran-intro-label p,
.quran-munaqosyah-label p {
  color: var(--green);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.quran-intro-copy {
  max-width: 790px;
}

.quran-lead {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.55rem, 2.45vw, 2.25rem);
  line-height: 1.4;
  letter-spacing: -.015em;
  margin-bottom: 30px;
}

.quran-intro-copy > p:not(.quran-lead),
.quran-closing > p:last-child {
  color: #445650;
  font-size: 1rem;
  line-height: 1.9;
}

.quran-programs-section {
  padding: 108px 0 118px;
  background: #f7f6f1;
}

.quran-programs-head {
  max-width: 860px;
  margin-bottom: 50px;
}

.quran-programs-head h2 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
}

.quran-programs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.quran-program {
  min-height: 390px;
  padding: 32px 30px;
  background: #fff;
  color: var(--green-dark);
  display: flex;
  flex-direction: column;
}

.quran-program-dark {
  background: var(--green-dark);
  color: #fff;
}

.quran-program-accent {
  background: #d9c9a5;
  color: #17302b;
}

.quran-program-wide {
  grid-column: 1 / span 2;
  min-height: 300px;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: 55px;
  align-items: end;
}

.quran-program-number {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .18em;
  opacity: .55;
}

.quran-program-label {
  margin-top: auto;
  margin-bottom: 12px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}

.quran-program h3 {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.85rem, 2.7vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  font-weight: 600;
  margin-bottom: 20px;
}

.quran-program > p:last-child {
  font-size: .93rem;
  line-height: 1.75;
  opacity: .82;
}

.quran-detail-section {
  padding: 104px 0;
  background: #fff;
}

.quran-detail-light {
  background: var(--cream);
}

.quran-detail-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: clamp(42px, 8vw, 100px);
  max-width: 1020px;
  align-items: start;
}

.quran-detail-row-reverse {
  margin-left: auto;
}

.quran-detail-number {
  font-family: "Playfair Display", serif;
  color: rgba(13,63,52,.25);
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 1;
}

.quran-detail-copy h2 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 600;
  margin-bottom: 22px;
  max-width: 760px;
}

.quran-detail-copy > p:last-child {
  color: #52625d;
  font-size: .97rem;
  line-height: 1.85;
  max-width: 760px;
}

.quran-munaqosyah-section {
  padding: 110px 0;
  background: var(--green-dark);
  color: #fff;
}

.quran-munaqosyah {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(45px, 8vw, 105px);
  align-items: start;
  max-width: 1100px;
}

.quran-munaqosyah-label span,
.quran-munaqosyah-label p {
  color: rgba(255,255,255,.65);
}

.quran-munaqosyah blockquote {
  margin: 0;
  max-width: 850px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  line-height: 1.32;
  letter-spacing: -.02em;
  color: #fff;
  font-weight: 600;
}

.quran-closing-section {
  padding: 110px 0 122px;
  background: #fff;
}

.quran-closing {
  max-width: 980px;
}

.quran-closing h2 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 600;
  margin-bottom: 28px;
}

.quran-closing > p:last-child {
  max-width: 760px;
}

.quran-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .68s ease,
    transform .68s cubic-bezier(.2,.7,.2,1);
}

.quran-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .quran-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) and (min-width: 721px) {
  .quran-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .quran-hero-intro {
    max-width: 680px;
  }

  .quran-program-wide {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .quran-program-wide .quran-program-label {
    margin-top: 35px;
  }
}

@media (max-width: 720px) {
  .quran-hero {
    padding: 58px 0 54px;
  }

  .quran-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .quran-hero h1 {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .quran-intro-section {
    padding: 66px 0 74px;
  }

  .quran-intro,
  .quran-munaqosyah {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .quran-lead {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .quran-programs-section {
    padding: 72px 0 82px;
  }

  .quran-programs-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .quran-program,
  .quran-program-wide {
    grid-column: auto;
    min-height: 350px;
    padding: 28px 24px;
    display: flex;
  }

  .quran-program-wide .quran-program-label {
    margin-top: auto;
  }

  .quran-detail-section {
    padding: 74px 0 80px;
  }

  .quran-detail-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .quran-detail-number {
    font-size: 3rem;
  }

  .quran-detail-copy h2 {
    font-size: clamp(1.9rem, 8vw, 2.7rem);
  }

  .quran-munaqosyah-section {
    padding: 76px 0 84px;
  }

  .quran-munaqosyah blockquote {
    font-size: clamp(1.55rem, 7.2vw, 2.35rem);
  }

  .quran-closing-section {
    padding: 76px 0 86px;
  }

  .quran-closing h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }
}
/* END AKADEMIK - PROGRAM AL-QURAN PAGE */


/* AKADEMIK - PROGRAM UNGGULAN PAGE */
.flagship-page {
  background: #fff;
}

.flagship-hero {
  padding: 96px 0 88px;
  background: var(--cream);
}

.flagship-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .48fr);
  gap: clamp(55px, 9vw, 130px);
  align-items: end;
}

.flagship-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 5.4vw, 5.7rem);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 600;
  color: var(--green-dark);
}

.flagship-hero-intro {
  max-width: 450px;
  color: #596963;
  font-size: .98rem;
  line-height: 1.8;
  padding-bottom: 5px;
}

.flagship-intro-section {
  padding: 100px 0 108px;
  background: #fff;
}

.flagship-intro {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(45px, 8vw, 110px);
  max-width: 1080px;
}

.flagship-intro-label {
  padding-top: 8px;
}

.flagship-intro-label span {
  display: block;
  color: #98a49f;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 12px;
}

.flagship-intro-label p {
  color: var(--green);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.flagship-intro-copy {
  max-width: 790px;
}

.flagship-lead {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.55rem, 2.45vw, 2.25rem);
  line-height: 1.4;
  letter-spacing: -.015em;
  margin-bottom: 30px;
}

.flagship-intro-copy > p:not(.flagship-lead) {
  color: #445650;
  font-size: 1rem;
  line-height: 1.9;
}

.flagship-feature {
  padding: 112px 0;
  background: #fff;
}

.flagship-feature-light {
  background: #f7f6f1;
}

.flagship-feature-dark {
  background: var(--green-dark);
  color: #fff;
}

.flagship-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .75fr);
  gap: clamp(58px, 9vw, 125px);
  align-items: center;
}

.flagship-row-reverse > :first-child {
  order: 2;
}

.flagship-row-reverse > :last-child {
  order: 1;
}

.flagship-image,
.flagship-gallery-pair figure {
  margin: 0;
  overflow: hidden;
  background: #e9ede9;
}

.flagship-image {
  aspect-ratio: 16 / 10;
}

.flagship-image-wide {
  aspect-ratio: 16 / 9;
}

.flagship-image-portrait {
  aspect-ratio: 4 / 5;
}

.flagship-image img,
.flagship-gallery-pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

.flagship-row:hover img {
  transform: scale(1.015);
}

.flagship-gallery-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.flagship-gallery-wide {
  grid-template-columns: 1.15fr .85fr;
}

.flagship-gallery-wide figure:first-child {
  aspect-ratio: 16 / 10;
}

.flagship-gallery-wide figure:last-child {
  aspect-ratio: 4 / 5;
}

.flagship-copy h2 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2rem, 3.5vw, 3.55rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 600;
  margin-bottom: 24px;
}

.flagship-copy > p:not(.section-kicker) {
  color: #52625d;
  font-size: .96rem;
  line-height: 1.83;
  margin-bottom: 20px;
}

.flagship-feature-dark .section-kicker {
  color: #dbc497;
}

.flagship-feature-dark .flagship-copy h2 {
  color: #fff;
}

.flagship-feature-dark .flagship-copy > p:not(.section-kicker) {
  color: rgba(255,255,255,.78);
}

.flagship-closing-section {
  padding: 110px 0 122px;
  background: var(--cream);
}

.flagship-closing {
  max-width: 1000px;
}

.flagship-closing blockquote {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  line-height: 1.32;
  letter-spacing: -.02em;
  color: var(--green-dark);
  font-weight: 600;
}

.flagship-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .68s ease,
    transform .68s cubic-bezier(.2,.7,.2,1);
}

.flagship-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .flagship-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .flagship-image img,
  .flagship-gallery-pair img {
    transition: none;
  }
}

@media (max-width: 900px) and (min-width: 721px) {
  .flagship-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .flagship-hero-intro {
    max-width: 680px;
  }

  .flagship-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .flagship-row-reverse > :first-child,
  .flagship-row-reverse > :last-child {
    order: initial;
  }
}

@media (max-width: 720px) {
  .flagship-hero {
    padding: 58px 0 54px;
  }

  .flagship-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .flagship-hero h1 {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .flagship-intro-section {
    padding: 66px 0 74px;
  }

  .flagship-intro {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .flagship-lead {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .flagship-feature {
    padding: 76px 0 82px;
  }

  .flagship-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .flagship-row-reverse > :first-child,
  .flagship-row-reverse > :last-child {
    order: initial;
  }

  .flagship-gallery-pair,
  .flagship-gallery-wide {
    grid-template-columns: 1fr;
  }

  .flagship-image,
  .flagship-image-wide,
  .flagship-image-portrait,
  .flagship-gallery-wide figure:first-child,
  .flagship-gallery-wide figure:last-child {
    aspect-ratio: 4 / 3;
  }

  .flagship-copy h2 {
    font-size: clamp(1.9rem, 8vw, 2.7rem);
  }

  .flagship-closing-section {
    padding: 76px 0 84px;
  }

  .flagship-closing blockquote {
    font-size: clamp(1.55rem, 7.2vw, 2.35rem);
  }
}
/* END AKADEMIK - PROGRAM UNGGULAN PAGE */

/* AKADEMIK - KODING ARDUINO KA PAGE */
.tech-page{background:#fff}.tech-hero{padding:96px 0 88px;background:var(--cream)}
.tech-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.48fr);gap:clamp(55px,9vw,130px);align-items:end}
.tech-hero h1{font-family:"Playfair Display",serif;font-size:clamp(2.7rem,5vw,5.2rem);line-height:.98;letter-spacing:-.04em;font-weight:600;color:var(--green-dark)}
.tech-hero-intro{max-width:450px;color:#596963;font-size:.98rem;line-height:1.8;padding-bottom:5px}
.tech-intro-section{padding:100px 0 108px}.tech-intro{display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(45px,8vw,110px);max-width:1080px}
.tech-intro-label{padding-top:8px}.tech-intro-label span{display:block;color:#98a49f;font-size:.67rem;font-weight:700;letter-spacing:.18em;margin-bottom:12px}
.tech-intro-label p{color:var(--green);font-size:.72rem;font-weight:700;line-height:1.55;text-transform:uppercase;letter-spacing:.14em}
.tech-intro-copy{max-width:790px}.tech-lead{font-family:"Playfair Display",serif;color:var(--green-dark);font-size:clamp(1.55rem,2.45vw,2.25rem);line-height:1.4;letter-spacing:-.015em;margin-bottom:30px}
.tech-intro-copy>p:not(.tech-lead){color:#445650;font-size:1rem;line-height:1.9}
.tech-feature{padding:112px 0;background:#fff}.tech-feature-light{background:#f7f6f1}
.tech-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.75fr);gap:clamp(58px,9vw,125px);align-items:center}
.tech-row-reverse>:first-child{order:2}.tech-row-reverse>:last-child{order:1}.tech-image{margin:0;aspect-ratio:16/10;overflow:hidden;background:#e9ede9}
.tech-image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tech-row:hover .tech-image img{transform:scale(1.015)}
.tech-copy h2{font-family:"Playfair Display",serif;color:var(--green-dark);font-size:clamp(2rem,3.5vw,3.55rem);line-height:1.08;letter-spacing:-.025em;font-weight:600;margin-bottom:24px}
.tech-copy>p:not(.section-kicker){color:#52625d;font-size:.96rem;line-height:1.83;margin-bottom:20px}
.tech-arduino-section{padding:112px 0 120px;background:var(--green-dark);color:#fff}
.tech-arduino-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.48fr);gap:clamp(55px,9vw,125px);align-items:end;margin-bottom:52px}
.tech-arduino-head .section-kicker{color:#dbc497}.tech-arduino-head h2{font-family:"Playfair Display",serif;color:#fff;font-size:clamp(2.3rem,4vw,4rem);line-height:1.06;letter-spacing:-.03em;font-weight:600;max-width:800px}
.tech-arduino-head>p{color:rgba(255,255,255,.76);font-size:.95rem;line-height:1.8;max-width:430px}
.tech-arduino-main figure{margin:0 0 58px;aspect-ratio:16/8.5;overflow:hidden}.tech-arduino-main img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.tech-project-list{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.18)}
.tech-project-list article{min-height:115px;display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;padding:22px 20px;border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.tech-project-list article:nth-child(3n){border-right:0}.tech-project-list span{color:rgba(255,255,255,.48);font-size:.64rem;font-weight:700;letter-spacing:.16em}
.tech-project-list p{color:#fff;font-family:"Playfair Display",serif;font-size:1.15rem;line-height:1.25}
.tech-projects-section{padding:110px 0 120px;background:#f7f6f1}.tech-projects-head{max-width:850px;margin-bottom:50px}
.tech-projects-head h2{font-family:"Playfair Display",serif;color:var(--green-dark);font-size:clamp(2.3rem,4vw,4rem);line-height:1.06;letter-spacing:-.03em;font-weight:600}
.tech-projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.tech-project-card{background:#fff}
.tech-project-card-wide{grid-column:1/span 2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.65fr)}
.tech-project-card figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:#e9ede9}.tech-project-card-wide figure{aspect-ratio:auto;min-height:480px}
.tech-project-card img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tech-project-card:hover img{transform:scale(1.015)}.tech-project-card-copy{padding:30px 28px 34px}
.tech-project-card-wide .tech-project-card-copy{padding:44px 38px;display:flex;flex-direction:column;justify-content:center}
.tech-project-label{color:var(--green);text-transform:uppercase;letter-spacing:.14em;font-size:.64rem;font-weight:700;margin-bottom:12px}
.tech-project-card h3{font-family:"Playfair Display",serif;color:var(--green-dark);font-size:clamp(1.65rem,2.4vw,2.4rem);line-height:1.08;letter-spacing:-.02em;font-weight:600;margin-bottom:18px}
.tech-project-card-copy>p:last-child{color:#596863;font-size:.93rem;line-height:1.78}
.tech-closing-section{padding:110px 0 122px;background:var(--cream)}.tech-closing{max-width:1000px}
.tech-closing blockquote{margin:0 0 30px;font-family:"Playfair Display",serif;font-size:clamp(1.8rem,3.4vw,3.2rem);line-height:1.32;letter-spacing:-.02em;color:var(--green-dark);font-weight:600}
.tech-closing>p:last-child{max-width:780px;color:#52625d;font-size:.98rem;line-height:1.85}
.tech-reveal{opacity:0;transform:translateY(22px);transition:opacity .68s ease,transform .68s cubic-bezier(.2,.7,.2,1)}.tech-reveal.is-visible{opacity:1;transform:translateY(0)}
@media(max-width:900px) and (min-width:721px){.tech-hero-grid,.tech-arduino-head{grid-template-columns:1fr;gap:28px}.tech-row{grid-template-columns:1fr;gap:40px}.tech-row-reverse>:first-child,.tech-row-reverse>:last-child{order:initial}.tech-project-card-wide{grid-template-columns:1fr}.tech-project-card-wide figure{min-height:0;aspect-ratio:16/10}}
@media(max-width:720px){.tech-hero{padding:58px 0 54px}.tech-hero-grid{grid-template-columns:1fr;gap:24px}.tech-hero h1{font-size:clamp(2.25rem,10.5vw,3.65rem)}.tech-intro-section{padding:66px 0 74px}.tech-intro{grid-template-columns:1fr;gap:24px}.tech-feature{padding:76px 0 82px}.tech-row{grid-template-columns:1fr;gap:30px}.tech-row-reverse>:first-child,.tech-row-reverse>:last-child{order:initial}.tech-image{aspect-ratio:4/3}.tech-arduino-section{padding:76px 0 84px}.tech-arduino-head{grid-template-columns:1fr;gap:24px}.tech-arduino-main figure{aspect-ratio:4/3;margin-bottom:38px}.tech-project-list{grid-template-columns:1fr}.tech-project-list article,.tech-project-list article:nth-child(3n){border-right:0}.tech-projects-section{padding:76px 0 84px}.tech-projects-grid{grid-template-columns:1fr}.tech-project-card-wide{grid-column:auto;display:block}.tech-project-card figure,.tech-project-card-wide figure{aspect-ratio:4/3;min-height:0}.tech-project-card-wide .tech-project-card-copy{padding:30px 28px 34px}.tech-closing-section{padding:76px 0 84px}}
/* END AKADEMIK - KODING ARDUINO KA PAGE */


/* AKADEMIK - KOKURIKULER PAGE */
.cocurricular-page {
  background: #fff;
}

.cocurricular-hero {
  padding: 96px 0 88px;
  background: var(--cream);
}

.cocurricular-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .48fr);
  gap: clamp(55px, 9vw, 130px);
  align-items: end;
}

.cocurricular-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 5.4vw, 5.7rem);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 600;
  color: var(--green-dark);
}

.cocurricular-hero-intro {
  max-width: 450px;
  color: #596963;
  font-size: .98rem;
  line-height: 1.8;
  padding-bottom: 5px;
}

.cocurricular-intro-section {
  padding: 100px 0 108px;
}

.cocurricular-intro {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(45px, 8vw, 110px);
  max-width: 1080px;
}

.cocurricular-intro-label,
.kaih-book-label,
.school-family-label {
  padding-top: 8px;
}

.cocurricular-intro-label span,
.kaih-book-label span,
.school-family-label span {
  display: block;
  color: #98a49f;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 12px;
}

.cocurricular-intro-label p,
.kaih-book-label p,
.school-family-label p {
  color: var(--green);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.cocurricular-intro-copy {
  max-width: 790px;
}

.cocurricular-lead {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.55rem, 2.45vw, 2.25rem);
  line-height: 1.4;
  letter-spacing: -.015em;
  margin-bottom: 30px;
}

.cocurricular-intro-copy > p:not(.cocurricular-lead),
.kaih-book-copy > div:last-child > p:not(.cocurricular-lead) {
  color: #445650;
  font-size: 1rem;
  line-height: 1.9;
}

.habits-section {
  padding: 108px 0 118px;
  background: #f7f6f1;
}

.habits-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .48fr);
  gap: clamp(55px, 9vw, 125px);
  align-items: end;
  margin-bottom: 50px;
}

.habits-head h2 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
  max-width: 800px;
}

.habits-head > p {
  color: #5a6965;
  font-size: .95rem;
  line-height: 1.8;
  max-width: 430px;
}

.habits-list {
  border-top: 1px solid rgba(13,63,52,.14);
}

.habit-item {
  display: grid;
  grid-template-columns: 70px minmax(220px, .7fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 100px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(13,63,52,.14);
}

.habit-item > span {
  color: #99a49f;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.habit-item h3 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.15;
  font-weight: 600;
}

.habit-item p {
  justify-self: end;
  max-width: 560px;
  color: #596863;
  font-size: .93rem;
  line-height: 1.65;
}

.kaih-book-section {
  padding: 112px 0 122px;
  background: #fff;
}

.kaih-book-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .48fr);
  gap: clamp(55px, 9vw, 125px);
  align-items: end;
  margin-bottom: 52px;
}

.kaih-book-head h2 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
  max-width: 820px;
}

.kaih-book-head > p {
  color: #5a6965;
  font-size: .95rem;
  line-height: 1.8;
  max-width: 430px;
}

.kaih-book-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 80px;
}

.kaih-book-cover {
  margin: 0;
}

.kaih-book-cover img {
  width: 100%;
  height: auto;
  display: block;
  background: #f1f1ef;
  box-shadow: 0 20px 55px rgba(14, 43, 36, .10);
}

.kaih-book-cover figcaption {
  margin-top: 13px;
  color: #6b7773;
  font-size: .72rem;
  letter-spacing: .03em;
}

.kaih-book-copy {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(45px, 8vw, 110px);
  max-width: 1080px;
}

.track-record-section {
  padding: 108px 0 118px;
  background: var(--green-dark);
  color: #fff;
}

.track-record-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, .8fr);
  gap: clamp(55px, 9vw, 125px);
  align-items: start;
  margin-bottom: 58px;
}

.track-record-title .section-kicker {
  color: #dbc497;
}

.track-record-title h2 {
  font-family: "Playfair Display", serif;
  color: #fff;
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 600;
}

.track-record-copy p {
  color: rgba(255,255,255,.78);
  font-size: .98rem;
  line-height: 1.85;
  margin-bottom: 22px;
}

.track-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.18);
}

.track-point {
  padding: 30px 26px;
  min-height: 220px;
  border-right: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.track-point:last-child {
  border-right: 0;
}

.track-point span {
  display: block;
  color: rgba(255,255,255,.48);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 70px;
}

.track-point h3 {
  font-family: "Playfair Display", serif;
  color: #fff;
  font-size: 1.65rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.track-point p {
  color: rgba(255,255,255,.70);
  font-size: .9rem;
  line-height: 1.65;
}

.school-family-section {
  padding: 110px 0;
  background: var(--cream);
}

.school-family-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(45px, 8vw, 105px);
  align-items: start;
  max-width: 1100px;
}

.school-family-grid blockquote {
  margin: 0;
  max-width: 850px;
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  line-height: 1.32;
  letter-spacing: -.02em;
  font-weight: 600;
}

.cocurricular-closing-section {
  padding: 110px 0 122px;
  background: #fff;
}

.cocurricular-closing {
  max-width: 980px;
}

.cocurricular-closing h2 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 600;
  margin-bottom: 28px;
}

.cocurricular-closing > p:last-child {
  max-width: 760px;
  color: #52625d;
  font-size: .98rem;
  line-height: 1.85;
}

.cocurricular-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .68s ease,
    transform .68s cubic-bezier(.2,.7,.2,1);
}

.cocurricular-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .cocurricular-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) and (min-width: 721px) {
  .cocurricular-hero-grid,
  .habits-head,
  .kaih-book-head,
  .track-record-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cocurricular-hero-intro,
  .habits-head > p,
  .kaih-book-head > p {
    max-width: 680px;
  }

  .habit-item {
    grid-template-columns: 55px 230px 1fr;
  }
}

@media (max-width: 720px) {
  .cocurricular-hero {
    padding: 58px 0 54px;
  }

  .cocurricular-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cocurricular-hero h1 {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .cocurricular-intro-section {
    padding: 66px 0 74px;
  }

  .cocurricular-intro,
  .kaih-book-copy,
  .school-family-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cocurricular-lead {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .habits-section {
    padding: 72px 0 82px;
  }

  .habits-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .habit-item {
    grid-template-columns: 42px 1fr;
    gap: 8px 16px;
    padding: 20px 0;
  }

  .habit-item h3 {
    font-size: 1.35rem;
  }

  .habit-item p {
    grid-column: 2;
    justify-self: start;
  }

  .kaih-book-section {
    padding: 76px 0 84px;
  }

  .kaih-book-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .kaih-book-gallery {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-bottom: 58px;
  }

  .track-record-section {
    padding: 76px 0 84px;
  }

  .track-record-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .track-points {
    grid-template-columns: 1fr;
  }

  .track-point {
    min-height: auto;
    border-right: 0;
    padding: 24px 0;
  }

  .track-point span {
    margin-bottom: 22px;
  }

  .school-family-section {
    padding: 76px 0 84px;
  }

  .school-family-grid blockquote {
    font-size: clamp(1.55rem, 7.2vw, 2.35rem);
  }

  .cocurricular-closing-section {
    padding: 76px 0 84px;
  }

  .cocurricular-closing h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }
}
/* END AKADEMIK - KOKURIKULER PAGE */


/* HOMEPAGE - INSTAGRAM FEED */
.instagram-section {
  padding: 116px 0 122px;
  background: #f7f6f1;
  overflow: hidden;
}

.instagram-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .46fr);
  gap: clamp(55px, 9vw, 125px);
  align-items: end;
  margin-bottom: 46px;
}

.instagram-head h2 {
  max-width: 760px;
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2.35rem, 4vw, 4.15rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
}

.instagram-head-side > p {
  max-width: 430px;
  margin-bottom: 19px;
  color: #596863;
  font-size: .94rem;
  line-height: 1.75;
}

.instagram-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--green-dark);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(13, 63, 52, .35);
  padding-bottom: 5px;
  transition: opacity .25s ease;
}

.instagram-profile-link:hover {
  opacity: .66;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.instagram-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #e6e9e6;
  isolation: isolate;
}

.instagram-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

.instagram-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(5, 31, 25, .62), transparent 46%);
  opacity: 0;
  transition: opacity .35s ease;
}

.instagram-card:hover img {
  transform: scale(1.035);
}

.instagram-card:hover::after {
  opacity: 1;
}

.instagram-card-meta {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

.instagram-card:hover .instagram-card-meta {
  opacity: 1;
  transform: translateY(0);
}

.instagram-card-caption {
  display: -webkit-box;
  max-width: 86%;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: .76rem;
  line-height: 1.45;
}

.instagram-card-arrow {
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1;
}

.instagram-video-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 9px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .50);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.instagram-skeleton {
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(90deg, rgba(221,225,221,.8) 25%, rgba(237,239,236,.95) 42%, rgba(221,225,221,.8) 63%);
  background-size: 300% 100%;
  animation: instagramLoading 1.35s ease infinite;
}

@keyframes instagramLoading {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.instagram-status {
  padding-top: 22px;
  color: #65716d;
  font-size: .88rem;
  line-height: 1.65;
}

.instagram-status a {
  color: var(--green-dark);
  font-weight: 700;
}

@media (max-width: 900px) {
  .instagram-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .instagram-head-side > p {
    max-width: 680px;
  }

  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .instagram-section {
    padding: 76px 0 82px;
  }

  .instagram-head {
    margin-bottom: 30px;
  }

  .instagram-head h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .instagram-grid {
    gap: 7px;
  }

  .instagram-card-meta {
    display: none;
  }

  .instagram-card::after {
    display: none;
  }

  .instagram-video-badge {
    top: 9px;
    right: 9px;
    min-width: 30px;
    height: 25px;
    font-size: .58rem;
  }
}
/* END HOMEPAGE - INSTAGRAM FEED */


/* HOME - GOOGLE MAP LOCATION SECTION */
.location-section {
  padding: 108px 0 118px;
  background: #f7f6f1;
}

.location-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .48fr);
  gap: clamp(55px, 9vw, 125px);
  align-items: end;
  margin-bottom: 46px;
}

.location-head h2 {
  max-width: 820px;
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
}

.location-head-side {
  max-width: 440px;
}

.location-head-side p {
  margin-bottom: 20px;
  color: #596863;
  font-size: .96rem;
  line-height: 1.75;
}

.location-map-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--green-dark);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 63, 52, .35);
  padding-bottom: 5px;
  transition: opacity .25s ease, border-color .25s ease;
}

.location-map-link:hover {
  opacity: .7;
  border-color: var(--green-dark);
}

.location-map-wrap {
  overflow: hidden;
}

.location-map {
  display: block;
  width: 100%;
  height: clamp(430px, 50vw, 610px);
  border: 0;
  background: #e8ebe8;
}

@media (max-width: 900px) {
  .location-head {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .location-head-side {
    max-width: 680px;
  }
}

@media (max-width: 720px) {
  .location-section {
    padding: 76px 0 84px;
  }

  .location-head {
    margin-bottom: 30px;
  }

  .location-head h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .location-map {
    height: 460px;
  }
}
/* END HOME - GOOGLE MAP LOCATION SECTION */


/* GLOBAL FOOTER + BACK TO TOP */
html {
  scroll-behavior: smooth;
}

.site-footer {
  background: var(--green-dark);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.site-footer-inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.site-footer p {
  margin: 0;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  border: 1px solid rgba(255,255,255,.18);
  transition:
    transform .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.back-to-top span {
  font-size: 1.25rem;
  line-height: 1;
  transform: translateY(-1px);
}

.back-to-top:hover {
  transform: translateY(-3px);
  background: var(--green);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .20);
}

.back-to-top:focus-visible {
  outline: 3px solid rgba(219, 196, 151, .75);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .site-footer-inner {
    min-height: 68px;
  }

  .site-footer p {
    font-size: .68rem;
    letter-spacing: .13em;
  }

  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .back-to-top {
    transition: none;
  }
}
/* END GLOBAL FOOTER + BACK TO TOP */


/* HOME - PROGRAM UNGGULAN V29 */
.home-featured-programs {
  padding: 110px 0 120px;
  background: var(--cream);
}

.home-featured-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .48fr);
  gap: clamp(55px, 9vw, 125px);
  align-items: end;
  margin-bottom: 50px;
}

.home-featured-head h2 {
  max-width: 820px;
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2.3rem, 4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
}

.home-featured-intro {
  max-width: 430px;
}

.home-featured-intro p {
  margin-bottom: 22px;
  color: #596863;
  font-size: .95rem;
  line-height: 1.8;
}

.home-featured-main-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--green-dark);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 63, 52, .35);
  padding-bottom: 5px;
}

.home-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.home-featured-card {
  position: relative;
  min-height: 320px;
  padding: 28px 30px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  color: var(--green-dark);
  text-decoration: none;
  overflow: hidden;
  border: 1px solid rgba(13, 63, 52, .08);
  transition:
    transform .28s ease,
    box-shadow .28s ease;
}

.home-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(13, 63, 52, .10);
}

.home-featured-card-dark {
  background: var(--green-dark);
  color: #fff;
}

.home-featured-card-accent {
  background: #d9c9a3;
  color: var(--green-dark);
}

.home-featured-card-wide {
  grid-column: 1 / span 2;
  min-height: 250px;
}

.home-featured-number {
  color: currentColor;
  opacity: .55;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.home-featured-label {
  margin-bottom: 12px;
  color: currentColor;
  opacity: .66;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.home-featured-card h3 {
  max-width: 520px;
  margin-bottom: 16px;
  font-family: "Playfair Display", serif;
  color: currentColor;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  font-weight: 600;
}

.home-featured-card p:not(.home-featured-label) {
  max-width: 590px;
  color: currentColor;
  opacity: .76;
  font-size: .9rem;
  line-height: 1.7;
}

.home-featured-arrow {
  align-self: flex-end;
  color: currentColor;
  font-size: 1.15rem;
  transition: transform .25s ease;
}

.home-featured-card:hover .home-featured-arrow {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .home-featured-head {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .home-featured-intro {
    max-width: 680px;
  }
}

@media (max-width: 720px) {
  .home-featured-programs {
    padding: 76px 0 84px;
  }

  .home-featured-head {
    margin-bottom: 32px;
  }

  .home-featured-head h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .home-featured-grid {
    grid-template-columns: 1fr;
  }

  .home-featured-card,
  .home-featured-card-wide {
    grid-column: auto;
    min-height: 275px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-featured-card,
  .home-featured-arrow {
    transition: none;
  }
}
/* END HOME - PROGRAM UNGGULAN V29 */


/* GLOBAL HOMEPAGE HEADER ON INNER PAGES */
.inner-page {
  padding-top: 78px;
}

.inner-page .site-header {
  height: 78px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
}

.inner-page .site-header .brand {
  color: var(--green-dark);
}

.inner-page .site-header .brand-logo {
  width: 58px;
  height: 58px;
  padding: 4px;
  background: #fff;
}

.inner-page .site-header .main-nav > a,
.inner-page .site-header .nav-link-button {
  color: var(--text-dark);
}

.inner-page .site-header .desktop-cta {
  color: var(--green-dark);
  background: var(--cream);
}

.inner-page .site-header .menu-toggle span {
  background: var(--green-dark);
}

@media (max-width: 1120px) {
  .inner-page {
    padding-top: 72px;
  }

  .inner-page .site-header {
    height: 72px;
  }

  .inner-page .site-header .brand-logo {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 720px) {
  .inner-page {
    padding-top: 68px;
  }

  .inner-page .site-header {
    height: 68px;
  }

  .inner-page .site-header .brand-logo {
    width: 48px;
    height: 48px;
  }

  .inner-page .site-header .brand-text strong {
    font-size: .76rem;
  }

  .inner-page .site-header .brand-text small {
    font-size: .56rem;
  }
}
/* END GLOBAL HOMEPAGE HEADER ON INNER PAGES */


/* HOMEPAGE - YOUTUBE FEED */
.youtube-section {
  padding: 116px 0 122px;
  background: #fff;
  overflow: hidden;
}

.youtube-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .46fr);
  gap: clamp(55px, 9vw, 125px);
  align-items: end;
  margin-bottom: 46px;
}

.youtube-head h2 {
  max-width: 780px;
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2.35rem, 4vw, 4.15rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
}

.youtube-head-side > p {
  max-width: 430px;
  margin-bottom: 19px;
  color: #596863;
  font-size: .94rem;
  line-height: 1.75;
}

.youtube-channel-link,
.youtube-watch-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--green-dark);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 63, 52, .35);
  padding-bottom: 5px;
  transition: opacity .25s ease;
}

.youtube-channel-link:hover,
.youtube-watch-link:hover {
  opacity: .66;
}

.youtube-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.youtube-card {
  background: #f7f6f1;
  border: 1px solid rgba(13, 63, 52, .08);
}

.youtube-player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}

.youtube-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.youtube-card-copy {
  padding: 25px 25px 28px;
}

.youtube-date {
  margin-bottom: 11px;
  color: #7a8581;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.youtube-card h3 {
  margin: 0 0 22px;
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.2;
  font-weight: 600;
}

.youtube-skeleton {
  aspect-ratio: 16 / 10.6;
  background:
    linear-gradient(
      90deg,
      rgba(231, 233, 229, .85) 25%,
      rgba(244, 244, 241, .98) 42%,
      rgba(231, 233, 229, .85) 63%
    );
  background-size: 300% 100%;
  animation: youtubeLoading 1.35s ease infinite;
}

@keyframes youtubeLoading {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.youtube-status {
  padding-top: 22px;
  color: #65716d;
  font-size: .88rem;
  line-height: 1.65;
}

.youtube-status a {
  color: var(--green-dark);
  font-weight: 700;
}

@media (max-width: 900px) {
  .youtube-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .youtube-head-side > p {
    max-width: 680px;
  }
}

@media (max-width: 680px) {
  .youtube-section {
    padding: 76px 0 82px;
  }

  .youtube-head {
    margin-bottom: 30px;
  }

  .youtube-head h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .youtube-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .youtube-card-copy {
    padding: 21px 20px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .youtube-skeleton {
    animation: none;
  }
}
/* END HOMEPAGE - YOUTUBE FEED */


/* KESISWAAN - KEGIATAN MURID PAGE */
.student-activities-page{background:#fff}.activities-hero{padding:96px 0 88px;background:var(--cream)}
.activities-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.48fr);gap:clamp(55px,9vw,130px);align-items:end}
.activities-hero h1{font-family:"Playfair Display",serif;font-size:clamp(3rem,5.4vw,5.7rem);line-height:.98;letter-spacing:-.04em;font-weight:600;color:var(--green-dark)}
.activities-hero-intro{max-width:450px;color:#596963;font-size:.98rem;line-height:1.8;padding-bottom:5px}
.activities-intro{padding:100px 0 108px}.activities-intro-grid{display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(45px,8vw,110px);max-width:1080px}
.activities-index{padding-top:8px}.activities-index span{display:block;color:#98a49f;font-size:.67rem;font-weight:700;letter-spacing:.18em;margin-bottom:12px}.activities-index p{color:var(--green);font-size:.72rem;font-weight:700;line-height:1.55;text-transform:uppercase;letter-spacing:.14em}
.activities-lead{font-family:"Playfair Display",serif;color:var(--green-dark);font-size:clamp(1.55rem,2.45vw,2.25rem);line-height:1.4;letter-spacing:-.015em;margin-bottom:30px}.activities-intro-copy>p:not(.activities-lead){color:#445650;font-size:1rem;line-height:1.9}
.activities-daily-section{padding:110px 0 118px;background:#f7f6f1}.activities-photo-feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.65fr);gap:clamp(50px,8vw,110px);align-items:center;margin-bottom:80px}.activities-photo-wide{margin:0;aspect-ratio:16/9;overflow:hidden}.activities-photo-wide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.activities-photo-copy h2{font-family:"Playfair Display",serif;color:var(--green-dark);font-size:clamp(2rem,3.4vw,3.3rem);line-height:1.08;letter-spacing:-.025em;margin-bottom:22px}.activities-photo-copy>p:not(.section-kicker){color:#596863;font-size:.95rem;line-height:1.8}
.activities-timeline{border-top:1px solid rgba(13,63,52,.15)}.activity-step{display:grid;grid-template-columns:70px minmax(0,1fr);gap:20px;align-items:start;padding:26px 0;border-bottom:1px solid rgba(13,63,52,.15)}.activity-step>span{color:#98a49f;font-size:.66rem;font-weight:700;letter-spacing:.18em;padding-top:8px}.activity-step h3{font-family:"Playfair Display",serif;color:var(--green-dark);font-size:clamp(1.35rem,2vw,1.9rem);line-height:1.15;font-weight:600;margin-bottom:8px}.activity-step p{max-width:760px;color:#596863;font-size:.93rem;line-height:1.7}
.activities-gallery-section{padding:110px 0;background:#fff}.activities-gallery-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:start}.activities-gallery-grid figure{margin:0}.activities-gallery-large{aspect-ratio:16/10}.activities-gallery-small{aspect-ratio:4/5}.activities-gallery-large,.activities-gallery-small{overflow:hidden}.activities-gallery-grid img{width:100%;height:100%;display:block;object-fit:cover}.activities-gallery-grid figcaption,.activities-periodic-photo figcaption{margin-top:12px;color:#6d7773;font-size:.72rem;letter-spacing:.02em}
.activities-periodic-section{padding:112px 0 120px;background:var(--green-dark);color:#fff}.activities-periodic-head{display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(45px,8vw,110px);align-items:end;margin-bottom:54px}.activities-index-light span{color:rgba(255,255,255,.45)}.activities-index-light p,.activities-periodic-head .section-kicker{color:#dbc497}.activities-periodic-head h2{font-family:"Playfair Display",serif;color:#fff;font-size:clamp(2.3rem,4vw,4rem);line-height:1.07;letter-spacing:-.03em;font-weight:600}
.activities-periodic-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.18)}.periodic-item{min-height:230px;padding:28px 24px;border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}.periodic-item:nth-child(3n){border-right:0}.periodic-item>span{display:block;color:rgba(255,255,255,.42);font-size:.64rem;font-weight:700;letter-spacing:.18em;margin-bottom:58px}.periodic-item h3{font-family:"Playfair Display",serif;color:#fff;font-size:1.55rem;line-height:1.15;font-weight:600;margin-bottom:12px}.periodic-item p{color:rgba(255,255,255,.72);font-size:.89rem;line-height:1.68}
.activities-periodic-photos{padding:110px 0 118px;background:#f7f6f1}.activities-periodic-photo-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start}.activities-periodic-photo{margin:0}.activities-periodic-photo:first-child{aspect-ratio:16/10}.activities-periodic-photo:last-child{aspect-ratio:4/5}.activities-periodic-photo img{width:100%;height:100%;display:block;object-fit:cover}
.activities-closing{padding:110px 0 122px;background:var(--cream)}.activities-closing-inner{max-width:980px}.activities-closing blockquote{margin:0;font-family:"Playfair Display",serif;color:var(--green-dark);font-size:clamp(1.8rem,3.4vw,3.2rem);line-height:1.32;letter-spacing:-.02em;font-weight:600}
.activities-reveal{opacity:0;transform:translateY(22px);transition:opacity .68s ease,transform .68s cubic-bezier(.2,.7,.2,1)}.activities-reveal.is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.activities-reveal{opacity:1;transform:none;transition:none}}
@media(max-width:900px) and (min-width:721px){.activities-hero-grid,.activities-photo-feature{grid-template-columns:1fr;gap:30px}.activities-periodic-grid{grid-template-columns:repeat(2,1fr)}.periodic-item:nth-child(3n){border-right:1px solid rgba(255,255,255,.18)}.periodic-item:nth-child(2n){border-right:0}}
@media(max-width:720px){.activities-hero{padding:58px 0 54px}.activities-hero-grid{grid-template-columns:1fr;gap:24px}.activities-hero h1{font-size:clamp(2.5rem,12vw,4rem)}.activities-intro{padding:66px 0 74px}.activities-intro-grid,.activities-periodic-head{grid-template-columns:1fr;gap:24px}.activities-daily-section,.activities-gallery-section,.activities-periodic-section,.activities-periodic-photos,.activities-closing{padding:76px 0 84px}.activities-photo-feature{grid-template-columns:1fr;gap:30px;margin-bottom:54px}.activities-photo-wide{aspect-ratio:4/3}.activity-step{grid-template-columns:44px 1fr;gap:10px 16px}.activities-gallery-grid,.activities-periodic-photo-grid{grid-template-columns:1fr}.activities-gallery-large,.activities-gallery-small,.activities-periodic-photo:first-child,.activities-periodic-photo:last-child{aspect-ratio:4/3}.activities-periodic-grid{grid-template-columns:1fr}.periodic-item,.periodic-item:nth-child(2n),.periodic-item:nth-child(3n){border-right:0;min-height:auto}.periodic-item>span{margin-bottom:22px}.activities-periodic-head h2{font-size:clamp(2rem,9vw,3rem)}.activities-closing blockquote{font-size:clamp(1.55rem,7.2vw,2.35rem)}}
/* END KESISWAAN - KEGIATAN MURID PAGE */

/* KEGIATAN MURID - CAPTION FOTO AWAL HARI */
.activities-photo-wide figcaption {
  margin-top: 12px;
  color: #6d7773;
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .02em;
}
/* END KEGIATAN MURID - CAPTION FOTO AWAL HARI */


/* KEGIATAN MURID - SCAN BARCODE VIDEO */
.activities-daily-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.65fr);gap:clamp(38px,5vw,72px);align-items:start}.activities-daily-layout .activities-timeline{border-top:1px solid rgba(13,63,52,.15)}.activities-scan-demo{position:sticky;top:112px}.activities-scan-video-wrap{overflow:hidden;background:#0f1714;box-shadow:0 18px 42px rgba(13,63,52,.12)}.activities-scan-video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#111}.activities-scan-label{margin:20px 0 8px;color:var(--green);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.activities-scan-demo h3{margin:0 0 12px;font-family:"Playfair Display",serif;color:var(--green-dark);font-size:clamp(1.45rem,2vw,2rem);line-height:1.16}.activities-scan-demo>p:last-child{color:#596863;font-size:.9rem;line-height:1.72}.activities-photo-wide figcaption{margin-top:12px;color:#6d7773;font-size:.72rem;letter-spacing:.02em}
@media(max-width:960px){.activities-daily-layout{grid-template-columns:1fr;gap:42px}.activities-scan-demo{position:static;max-width:390px;margin:0 auto;width:100%}}
@media(max-width:720px){.activities-scan-demo{max-width:330px}}
/* END KEGIATAN MURID - SCAN BARCODE VIDEO */


/* V35 - SCAN VIDEO ONLY */
.activities-scan-demo {
  padding: 0;
}

.activities-scan-demo .activities-scan-video-wrap {
  margin: 0;
}
/* END V35 */


/* KESISWAAN - EKSTRAKURIKULER PAGE */
.extracurricular-page {
  background: #fff;
}

.extracurricular-hero {
  padding: 96px 0 88px;
  background: var(--cream);
}

.extracurricular-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .48fr);
  gap: clamp(55px, 9vw, 130px);
  align-items: end;
}

.extracurricular-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 5.4vw, 5.7rem);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 600;
  color: var(--green-dark);
}

.extracurricular-hero-intro {
  max-width: 450px;
  color: #596963;
  font-size: .98rem;
  line-height: 1.8;
  padding-bottom: 5px;
}

.extracurricular-intro-section {
  padding: 100px 0 108px;
}

.extracurricular-intro {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(45px, 8vw, 110px);
  max-width: 1080px;
}

.extracurricular-index {
  padding-top: 8px;
}

.extracurricular-index span {
  display: block;
  color: #98a49f;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 12px;
}

.extracurricular-index p {
  color: var(--green);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.extracurricular-lead {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.55rem, 2.45vw, 2.25rem);
  line-height: 1.4;
  letter-spacing: -.015em;
  margin-bottom: 30px;
}

.extracurricular-intro-copy > p:not(.extracurricular-lead) {
  color: #445650;
  font-size: 1rem;
  line-height: 1.9;
}

.extracurricular-feature {
  padding: 112px 0;
  background: #fff;
}

.extracurricular-feature-light {
  background: #f7f6f1;
}

.extracurricular-feature-dark {
  background: var(--green-dark);
  color: #fff;
}

.extracurricular-feature-accent {
  background: #ded0ad;
}

.extracurricular-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .75fr);
  gap: clamp(58px, 9vw, 125px);
  align-items: center;
}

.extracurricular-row-reverse > :first-child {
  order: 2;
}

.extracurricular-row-reverse > :last-child {
  order: 1;
}

.extracurricular-photo {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e8ebe8;
}

.extracurricular-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .75s cubic-bezier(.2,.7,.2,1);
}

.extracurricular-row:hover .extracurricular-photo img {
  transform: scale(1.015);
}

.extracurricular-copy h2 {
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2.1rem, 3.7vw, 3.7rem);
  line-height: 1.07;
  letter-spacing: -.028em;
  font-weight: 600;
  margin-bottom: 24px;
}

.extracurricular-copy > p:not(.section-kicker) {
  color: #52625d;
  font-size: .96rem;
  line-height: 1.84;
  margin-bottom: 20px;
}

.extracurricular-feature-dark .extracurricular-copy h2 {
  color: #fff;
}

.extracurricular-feature-dark .extracurricular-copy > p:not(.section-kicker) {
  color: rgba(255,255,255,.76);
}

.extracurricular-feature-dark .section-kicker {
  color: #dbc497;
}

.extracurricular-closing-section {
  padding: 110px 0 122px;
  background: var(--cream);
}

.extracurricular-closing {
  max-width: 1000px;
}

.extracurricular-closing blockquote {
  margin: 0 0 30px;
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  line-height: 1.32;
  letter-spacing: -.02em;
  font-weight: 600;
}

.extracurricular-closing > p:last-child {
  max-width: 790px;
  color: #52625d;
  font-size: .98rem;
  line-height: 1.85;
}

.extracurricular-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .68s ease,
    transform .68s cubic-bezier(.2,.7,.2,1);
}

.extracurricular-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) and (min-width: 721px) {
  .extracurricular-hero-grid,
  .extracurricular-row {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .extracurricular-row-reverse > :first-child,
  .extracurricular-row-reverse > :last-child {
    order: initial;
  }
}

@media (max-width: 720px) {
  .extracurricular-hero {
    padding: 58px 0 54px;
  }

  .extracurricular-hero-grid,
  .extracurricular-intro,
  .extracurricular-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .extracurricular-hero h1 {
    font-size: clamp(2.45rem, 11vw, 4rem);
  }

  .extracurricular-intro-section {
    padding: 66px 0 74px;
  }

  .extracurricular-feature {
    padding: 76px 0 82px;
  }

  .extracurricular-row-reverse > :first-child,
  .extracurricular-row-reverse > :last-child {
    order: initial;
  }

  .extracurricular-photo {
    aspect-ratio: 4 / 3;
  }

  .extracurricular-closing-section {
    padding: 76px 0 84px;
  }

  .extracurricular-closing blockquote {
    font-size: clamp(1.55rem, 7.2vw, 2.35rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .extracurricular-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .extracurricular-photo img {
    transition: none;
  }
}
/* END KESISWAAN - EKSTRAKURIKULER PAGE */

/* KESISWAAN - STUDENT-LED CONFERENCE PAGE */
.slc-page { background: #fff; }

.slc-hero {
  padding: 78px 0 92px;
  background: var(--cream);
  overflow: hidden;
}

.slc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: clamp(46px, 7vw, 100px);
  align-items: center;
}

.slc-hero-copy h1 {
  margin: 12px 0 28px;
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 5.2vw, 5.35rem);
  line-height: 1.01;
  letter-spacing: -.043em;
  font-weight: 600;
  color: var(--green-dark);
}

.slc-hero-copy > p:not(.section-kicker) {
  max-width: 650px;
  color: #53655f;
  font-size: 1rem;
  line-height: 1.85;
}

.slc-meta {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.slc-meta span {
  padding: 9px 13px;
  border: 1px solid rgba(13,72,57,.16);
  border-radius: 999px;
  color: var(--green-dark);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.slc-hero-photo {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #dde4df;
}

.slc-hero-photo img,
.slc-story-photo img,
.slc-future-photo img,
.slc-gallery img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.slc-intro-section { padding: 104px 0 112px; }

.slc-intro-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(45px, 8vw, 110px);
  max-width: 1090px;
}

.slc-section-number { padding-top: 8px; }
.slc-section-number span {
  display: block;
  color: #98a49f;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 12px;
}
.slc-section-number p {
  color: var(--green);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.slc-lead {
  margin: 0 0 30px;
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.6rem, 2.5vw, 2.3rem);
  line-height: 1.4;
  letter-spacing: -.016em;
}

.slc-intro-copy > p:not(.slc-lead) {
  color: #465852;
  font-size: 1rem;
  line-height: 1.9;
}

.slc-story { padding: 112px 0; }
.slc-story-light { background: #f7f6f1; }
.slc-story-dark { background: var(--green-dark); }

.slc-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .8fr);
  gap: clamp(58px, 8vw, 118px);
  align-items: center;
}

.slc-story-grid-reverse > :first-child { order: 2; }
.slc-story-grid-reverse > :last-child { order: 1; }

.slc-story-photo { margin: 0; overflow: hidden; background: #e7ebe8; }
.slc-story-photo-portrait { aspect-ratio: 4 / 5; max-height: 760px; }
.slc-story-photo-wide { aspect-ratio: 16 / 10; }
.slc-story-photo-portrait img { object-position: center 35%; }

.slc-story-copy h2,
.slc-future-copy h2,
.slc-gallery-heading h2 {
  margin: 0 0 26px;
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2.1rem, 3.7vw, 3.75rem);
  line-height: 1.09;
  letter-spacing: -.029em;
  font-weight: 600;
}

.slc-story-copy > p:not(.section-kicker),
.slc-future-copy > p:not(.section-kicker),
.slc-gallery-heading > p:not(.section-kicker) {
  color: #52625d;
  font-size: .98rem;
  line-height: 1.86;
  margin-bottom: 20px;
}

.slc-story-dark .slc-story-copy h2 { color: #fff; }
.slc-story-dark .slc-story-copy > p:not(.section-kicker) { color: rgba(255,255,255,.76); }
.slc-story-dark .section-kicker { color: #d8c08f; }

.slc-future-section { padding: 118px 0; background: #ded0ad; }
.slc-future-grid {
  display: grid;
  grid-template-columns: minmax(320px, .78fr) minmax(0, 1.12fr);
  gap: clamp(58px, 8vw, 118px);
  align-items: center;
}
.slc-future-photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #c9c2ad; }

.slc-gallery-section { padding: 118px 0 125px; background: #fff; }
.slc-gallery-heading { max-width: 860px; margin-bottom: 52px; }
.slc-gallery-heading h2 { margin-top: 7px; }
.slc-gallery {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-rows: repeat(2, minmax(220px, 320px));
  gap: 18px;
}
.slc-gallery figure { margin: 0; overflow: hidden; min-height: 0; background: #e7ebe8; }
.slc-gallery-large { grid-row: 1 / span 2; }
.slc-gallery figure:nth-child(2) img { object-position: center 32%; }

.slc-closing-section { padding: 110px 0 122px; background: var(--cream); }
.slc-closing { max-width: 1000px; }
.slc-closing blockquote {
  margin: 0 0 30px;
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  line-height: 1.32;
  letter-spacing: -.02em;
  font-weight: 600;
}
.slc-closing > p:last-child {
  max-width: 800px;
  color: #52625d;
  font-size: .98rem;
  line-height: 1.86;
}

.slc-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .68s ease, transform .68s cubic-bezier(.2,.7,.2,1);
}
.slc-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .slc-hero-grid,
  .slc-story-grid,
  .slc-future-grid { grid-template-columns: 1fr; gap: 38px; }
  .slc-story-grid-reverse > :first-child,
  .slc-story-grid-reverse > :last-child { order: initial; }
  .slc-story-photo-portrait { aspect-ratio: 16 / 10; max-height: none; }
  .slc-story-photo-portrait img { object-position: center 35%; }
}

@media (max-width: 720px) {
  .slc-hero { padding: 56px 0 66px; }
  .slc-hero-grid,
  .slc-intro-grid { grid-template-columns: 1fr; gap: 26px; }
  .slc-hero-copy h1 { font-size: clamp(2.45rem, 11vw, 3.9rem); }
  .slc-meta { margin-top: 26px; }
  .slc-hero-photo { aspect-ratio: 4 / 3; }
  .slc-intro-section { padding: 70px 0 78px; }
  .slc-story, .slc-future-section { padding: 78px 0 84px; }
  .slc-story-photo-portrait,
  .slc-story-photo-wide,
  .slc-future-photo { aspect-ratio: 4 / 3; }
  .slc-gallery-section { padding: 78px 0 86px; }
  .slc-gallery { display: grid; grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; }
  .slc-gallery-large { grid-row: auto; }
  .slc-gallery figure { aspect-ratio: 4 / 3; }
  .slc-gallery figure:nth-child(2) { aspect-ratio: 4 / 5; }
  .slc-closing-section { padding: 78px 0 88px; }
  .slc-closing blockquote { font-size: clamp(1.55rem, 7.1vw, 2.35rem); }
}

@media (prefers-reduced-motion: reduce) {
  .slc-reveal { opacity: 1; transform: none; transition: none; }
}


/* V40 - SLC VIDEO SECTION */
.slc-video-section {
  padding: 118px 0;
  background: #f7f6f1;
}

.slc-video-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, .62fr);
  gap: clamp(58px, 8vw, 118px);
  align-items: center;
}

.slc-video-copy h2 {
  margin: 0 0 26px;
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2.1rem, 3.7vw, 3.75rem);
  line-height: 1.09;
  letter-spacing: -.029em;
  font-weight: 600;
}

.slc-video-copy > p:not(.section-kicker) {
  color: #52625d;
  font-size: .98rem;
  line-height: 1.86;
  margin-bottom: 20px;
}

.slc-video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 30px;
}

.slc-video-tags span {
  padding: 9px 12px 8px;
  border: 1px solid rgba(13,72,57,.16);
  color: var(--green-dark);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.slc-video-frame {
  margin: 0;
  width: min(100%, 470px);
  justify-self: end;
}

.slc-video-frame video {
  width: 100%;
  display: block;
  aspect-ratio: 478 / 850;
  object-fit: cover;
  background: #101513;
  box-shadow: 0 24px 62px rgba(24, 48, 40, .18);
}

.slc-video-frame figcaption {
  padding-top: 14px;
  color: #6b7873;
  font-size: .76rem;
  line-height: 1.65;
}

@media (max-width: 980px) {
  .slc-video-grid { grid-template-columns: 1fr; gap: 42px; }
  .slc-video-frame { justify-self: start; width: min(100%, 430px); }
}

@media (max-width: 720px) {
  .slc-video-section { padding: 78px 0 84px; }
  .slc-video-grid { gap: 34px; }
  .slc-video-frame { width: min(100%, 390px); }
}
/* END V40 - SLC VIDEO SECTION */

/* END KESISWAAN - STUDENT-LED CONFERENCE PAGE */


/* KESISWAAN - STUDENT COUNCIL PAGE */
.student-council-page { background:#fff; }

.sc-hero { padding: 94px 0 105px; background: var(--cream); overflow:hidden; }
.sc-hero-grid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(380px,.78fr); gap:clamp(54px,8vw,118px); align-items:center; }
.sc-hero-copy h1 { margin:10px 0 26px; max-width:780px; font-family:"Playfair Display",serif; color:var(--green-dark); font-size:clamp(3rem,5.25vw,5.6rem); line-height:.99; letter-spacing:-.045em; font-weight:600; }
.sc-hero-lead { max-width:690px; color:#53655f; font-size:1rem; line-height:1.86; }
.sc-hero-tags { display:flex; flex-wrap:wrap; gap:9px; margin-top:31px; }
.sc-hero-tags span { padding:9px 13px 8px; border:1px solid rgba(20,81,66,.18); color:var(--green-dark); font-size:.69rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.sc-hero-visual { margin:0; overflow:hidden; box-shadow:0 22px 55px rgba(28,50,43,.12); background:#e5dcc5; }
.sc-hero-visual img { display:block; width:100%; height:auto; }

.sc-intro-section { padding:104px 0 112px; }
.sc-intro-grid { display:grid; grid-template-columns:180px minmax(0,1fr); gap:clamp(48px,8vw,112px); max-width:1080px; }
.sc-section-index { padding-top:8px; }
.sc-section-index span { display:block; margin-bottom:12px; color:#98a49f; font-size:.67rem; font-weight:700; letter-spacing:.18em; }
.sc-section-index p { color:var(--green); font-size:.72rem; font-weight:700; line-height:1.55; text-transform:uppercase; letter-spacing:.14em; }
.sc-lead { margin:0 0 30px; font-family:"Playfair Display",serif; color:var(--green-dark); font-size:clamp(1.55rem,2.45vw,2.28rem); line-height:1.4; letter-spacing:-.015em; }
.sc-intro-copy > p:not(.sc-lead), .sc-leaders-copy > p:not(.section-kicker), .sc-democracy-copy p, .sc-video-copy > p:not(.section-kicker), .sc-role-copy p { color:#4e615a; font-size:.98rem; line-height:1.88; }

.sc-leaders-section { padding:116px 0; background:#f4f2eb; }
.sc-leaders-grid { display:grid; grid-template-columns:minmax(340px,.88fr) minmax(0,1fr); gap:clamp(60px,9vw,130px); align-items:center; }
.sc-leaders-photo { margin:0; overflow:hidden; background:#e7dcc4; }
.sc-leaders-photo img { display:block; width:100%; height:auto; }
.sc-leaders-copy h2, .sc-democracy-grid h2, .sc-video-copy h2, .sc-role-grid h2 { margin:8px 0 28px; font-family:"Playfair Display",serif; color:var(--green-dark); font-size:clamp(2.05rem,3.5vw,3.55rem); line-height:1.1; letter-spacing:-.027em; font-weight:600; }
.sc-leader-names { display:grid; gap:13px; margin:30px 0 28px; }
.sc-leader-name { display:grid; grid-template-columns:145px 1fr; gap:18px; padding:16px 0; border-top:1px solid rgba(20,81,66,.15); }
.sc-leader-name:last-child { border-bottom:1px solid rgba(20,81,66,.15); }
.sc-leader-name span { color:#7f8c86; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.sc-leader-name strong { color:var(--green-dark); font-family:"Playfair Display",serif; font-size:1.18rem; font-weight:600; }

.sc-democracy-section { padding:118px 0 124px; background:var(--green-dark); }
.sc-democracy-grid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(320px,.7fr); gap:clamp(60px,9vw,130px); align-items:start; }
.sc-democracy-grid .section-kicker { color:#d7c08d; }
.sc-democracy-grid h2 { color:#fff; margin-bottom:0; }
.sc-democracy-copy p { color:rgba(255,255,255,.75); }
.sc-democracy-copy p + p { margin-top:20px; }

.sc-video-section { padding:118px 0 128px; background:#fff; }
.sc-video-grid { display:grid; grid-template-columns:minmax(0,.76fr) minmax(360px,.72fr); gap:clamp(58px,8vw,112px); align-items:start; }
.sc-video-copy { padding-top:20px; }
.sc-video-note { margin-top:23px; padding-top:20px; border-top:1px solid rgba(20,81,66,.13); font-size:.84rem !important; color:#7a8883 !important; }
.sc-instagram-shell { border:1px solid rgba(20,81,66,.12); background:#f6f4ee; padding:14px; box-shadow:0 20px 48px rgba(28,50,43,.09); }
.sc-instagram-header { display:flex; align-items:center; gap:9px; padding:8px 8px 15px; color:#5a6964; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.sc-instagram-dot { width:8px; height:8px; border-radius:50%; background:var(--green); }
.sc-instagram-embed { display:flex; justify-content:center; width:100%; overflow:hidden; background:#fff; min-height:540px; }
.sc-instagram-embed .instagram-media { width:100% !important; max-width:540px !important; min-width:0 !important; }

.sc-role-section { padding:110px 0 118px; background:#ded0ad; }
.sc-role-grid { display:grid; grid-template-columns:88px minmax(0,.72fr) minmax(320px,.62fr); gap:clamp(36px,6vw,82px); align-items:start; }
.sc-role-number { color:rgba(20,81,66,.32); font-family:"Playfair Display",serif; font-size:3rem; line-height:1; }
.sc-role-grid h2 { margin-bottom:0; }
.sc-role-copy p + p { margin-top:20px; }

.sc-closing-section { padding:112px 0 124px; background:var(--cream); }
.sc-closing { max-width:1000px; }
.sc-closing blockquote { margin:8px 0 0; font-family:"Playfair Display",serif; color:var(--green-dark); font-size:clamp(1.9rem,3.55vw,3.35rem); line-height:1.3; letter-spacing:-.025em; font-weight:600; }

.sc-reveal { opacity:0; transform:translateY(22px); transition:opacity .68s ease, transform .68s cubic-bezier(.2,.7,.2,1); }
.sc-reveal.is-visible { opacity:1; transform:translateY(0); }

@media (max-width:980px) {
  .sc-hero-grid, .sc-leaders-grid, .sc-democracy-grid, .sc-video-grid, .sc-role-grid { grid-template-columns:1fr; gap:38px; }
  .sc-hero-visual { max-width:650px; }
  .sc-role-number { margin-bottom:-16px; }
}

@media (max-width:720px) {
  .sc-hero { padding:58px 0 68px; }
  .sc-hero-grid, .sc-intro-grid { grid-template-columns:1fr; gap:27px; }
  .sc-hero-copy h1 { font-size:clamp(2.45rem,11vw,3.95rem); }
  .sc-intro-section { padding:70px 0 78px; }
  .sc-leaders-section, .sc-democracy-section, .sc-video-section, .sc-role-section { padding:78px 0 86px; }
  .sc-leader-name { grid-template-columns:1fr; gap:5px; }
  .sc-instagram-shell { padding:8px; }
  .sc-instagram-embed { min-height:500px; }
  .sc-closing-section { padding:78px 0 88px; }
  .sc-closing blockquote { font-size:clamp(1.55rem,7.2vw,2.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-reveal { opacity:1; transform:none; transition:none; }
}
/* END KESISWAAN - STUDENT COUNCIL PAGE */


/* =============================================
   BERITA SEKOLAH / NEWS SYSTEM - V42
   ============================================= */
.news-index-hero {
  padding: 96px 0 88px;
  background: var(--cream);
}

.news-index-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(300px,.48fr);
  gap: clamp(55px, 9vw, 130px);
  align-items: end;
}

.news-index-hero h1 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 5.4vw, 5.7rem);
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--green-dark);
  font-weight: 600;
}

.news-index-hero-grid > p {
  margin: 0 0 5px;
  color: #586963;
  font-size: .98rem;
  line-height: 1.85;
}

.news-index-section {
  padding: 100px 0 120px;
  background: #fff;
}

.news-index-heading {
  max-width: 780px;
  margin-bottom: 44px;
}

.news-index-heading h2 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  line-height: 1.08;
  color: var(--green-dark);
  letter-spacing: -.025em;
  font-weight: 600;
}

.news-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 34px;
}

.news-card {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(280px,.95fr) minmax(0,1.05fr);
  min-height: 465px;
  background: #f7f6f0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}

.news-card.is-visible { opacity: 1; transform: translateY(0); }

.news-card-cover {
  display: block;
  min-height: 100%;
  text-decoration: none;
  overflow: hidden;
}

.news-disaster-cover {
  position: relative;
  background:
    radial-gradient(circle at 82% 18%, rgba(229,202,144,.24) 0 5%, transparent 5.5%),
    radial-gradient(circle at 78% 73%, rgba(229,202,144,.14) 0 9%, transparent 9.5%),
    linear-gradient(145deg, #0b4b3c 0%, #123d36 54%, #70272a 100%);
  color: #fff;
}

.news-disaster-cover::before,
.news-disaster-cover::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
}
.news-disaster-cover::before { width: 330px; height: 330px; right: -165px; top: -85px; }
.news-disaster-cover::after { width: 220px; height: 220px; left: -110px; bottom: -75px; }

.news-card-cover-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 465px;
  padding: 42px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-cover-label {
  width: max-content;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.35);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
}

.news-card-cover-inner strong {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(2.25rem, 4vw, 4.3rem);
  line-height: .98;
  letter-spacing: -.03em;
}

.news-card-cover-inner small {
  font-size: .73rem;
  line-height: 1.5;
  letter-spacing: .05em;
  color: rgba(255,255,255,.78);
}

.news-card-body {
  padding: 48px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 22px;
  margin-bottom: 20px;
  color: #7d8984;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}

.news-card h3 {
  margin: 0 0 20px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.65rem, 2.8vw, 2.65rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 600;
}
.news-card h3 a { color: var(--green-dark); text-decoration: none; }
.news-card-body > p { margin: 0 0 30px; color: #53635e; line-height: 1.8; font-size: .94rem; }
.news-read-more { display: inline-flex; gap: 12px; align-items: center; width: max-content; color: var(--green-dark); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; text-decoration: none; }
.news-read-more span { transition: transform .2s ease; }
.news-read-more:hover span { transform: translateX(4px); }

/* Article */
.article-hero {
  padding: 82px 0 78px;
  background: var(--cream);
}
.article-hero-inner { max-width: 1120px; }
.article-breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 54px; font-size: .72rem; color: #75847f; }
.article-breadcrumb a { color: inherit; text-decoration: none; }
.article-hero h1 {
  max-width: 1050px;
  margin: 0 0 25px;
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2.8rem, 5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 600;
}
.article-deck { max-width: 820px; margin: 0 0 34px; color: #52645e; font-size: clamp(1rem, 1.45vw, 1.22rem); line-height: 1.72; }
.article-meta-row { display: flex; flex-wrap: wrap; gap: 11px 28px; color: #687872; font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; }

.article-cover-section { padding: 70px 0 30px; background: #fff; }
.article-editorial-cover { min-height: 560px; padding: clamp(32px,5vw,65px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.article-cover-topline, .article-cover-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.78); }
.article-cover-main { position: relative; z-index: 1; }
.article-cover-main p { margin: 0 0 16px; font-size: .75rem; letter-spacing: .22em; font-weight: 700; }
.article-cover-main h2 { margin: 0; color: #fff; font-family: "Playfair Display", serif; font-size: clamp(4rem, 9vw, 8rem); line-height: .82; letter-spacing: -.055em; font-weight: 600; }
.article-cover-note { margin: 13px 0 0; color: #8a938f; font-size: .72rem; font-style: italic; }

.article-body-section { padding: 75px 0 120px; background: #fff; }
.article-layout { display: grid; grid-template-columns: 220px minmax(0,760px); gap: clamp(55px,8vw,120px); align-items: start; justify-content: center; }
.article-side { position: sticky; top: 120px; padding-top: 8px; }
.article-side-label { margin: 0 0 20px; color: var(--green); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 700; }
.article-side ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid #dfe4df; }
.article-side li { padding: 14px 0; border-bottom: 1px solid #dfe4df; color: #5d6b66; font-size: .82rem; line-height: 1.5; }
.article-content { color: #384b44; font-size: 1rem; line-height: 1.92; }
.article-content p { margin: 0 0 27px; }
.article-content .article-lead { color: var(--green-dark); font-family: "Playfair Display", serif; font-size: clamp(1.4rem, 2.05vw, 1.85rem); line-height: 1.55; letter-spacing: -.01em; }
.article-content h2 { margin: 58px 0 20px; color: var(--green-dark); font-family: "Playfair Display", serif; font-size: clamp(1.65rem, 2.5vw, 2.35rem); line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }
.article-content blockquote { margin: 48px 0; padding: 36px 0 36px 35px; border-left: 3px solid #c5a56c; color: var(--green-dark); font-family: "Playfair Display", serif; font-size: clamp(1.4rem,2.25vw,2rem); line-height: 1.5; }
.article-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 55px; padding-top: 28px; border-top: 1px solid #dfe4df; }
.article-tags span { padding: 8px 12px; background: #f4f2ea; color: #52645e; font-size: .7rem; letter-spacing: .04em; }
.article-back-link { margin-top: 55px; }
.article-back-link a { color: var(--green-dark); text-decoration: none; font-size: .82rem; font-weight: 700; }

@media (max-width: 900px) {
  .news-index-hero-grid, .news-card, .article-layout { grid-template-columns: 1fr; }
  .news-list-grid { grid-template-columns: 1fr; }
  .news-card { grid-column: auto; }
  .article-side { position: static; display: none; }
  .article-content { max-width: 760px; }
}

@media (max-width: 720px) {
  .news-index-hero { padding: 58px 0 54px; }
  .news-index-hero-grid { gap: 25px; }
  .news-index-hero h1 { font-size: clamp(2.5rem,11vw,4rem); }
  .news-index-section { padding: 68px 0 82px; }
  .news-card-cover-inner { min-height: 390px; padding: 30px; }
  .news-card-body { padding: 34px 28px 38px; }
  .article-hero { padding: 52px 0 56px; }
  .article-breadcrumb { margin-bottom: 34px; }
  .article-hero h1 { font-size: clamp(2.45rem,10.5vw,4rem); }
  .article-cover-section { padding: 38px 0 18px; }
  .article-editorial-cover { min-height: 480px; }
  .article-cover-main h2 { font-size: clamp(3.4rem,18vw,6rem); }
  .article-body-section { padding: 50px 0 85px; }
  .article-content blockquote { padding-left: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .news-card { opacity: 1; transform: none; transition: none; }
}
/* END BERITA SEKOLAH / NEWS SYSTEM - V42 */


/* V43 - FOTO DOKUMENTASI BERITA MITIGASI */
.news-photo-cover {
  position: relative;
  background: #dfe6e2;
}

.news-photo-cover img {
  width: 100%;
  height: 100%;
  min-height: 465px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .6s ease;
}

.news-photo-cover:hover img {
  transform: scale(1.02);
}

.news-photo-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  padding: 9px 12px;
  background: rgba(9, 62, 50, .88);
  color: #fff;
  font-size: .66rem;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  backdrop-filter: blur(6px);
}

.article-main-photo,
.article-inline-photo {
  margin: 0;
}

.article-main-photo {
  overflow: hidden;
  background: #eef0ec;
}

.article-main-photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
}

.article-main-photo figcaption,
.article-inline-photo figcaption {
  margin-top: 12px;
  color: #7b8782;
  font-size: .73rem;
  line-height: 1.55;
  font-style: italic;
}

.article-inline-photo {
  margin: 42px 0 48px;
}

.article-inline-photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 720px) {
  .news-photo-cover img {
    min-height: 390px;
  }

  .news-photo-badge {
    left: 18px;
    bottom: 18px;
  }

  .article-main-photo img,
  .article-inline-photo img {
    aspect-ratio: 4 / 3;
  }
}
/* END V43 */


/* ==================================
   V44 - BERITA OTOMATIS BERANDA
   ================================== */
.home-news-section {
  padding: 110px 0 118px;
  background: #f7f5ef;
}

.home-news-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 44px;
}

.home-news-heading h2 {
  margin: 0;
  max-width: 760px;
  font-family: "Playfair Display", serif;
  color: var(--green-dark);
  font-size: clamp(2rem, 3.8vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 600;
}

.home-news-all {
  flex: 0 0 auto;
  color: var(--green-dark);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(15,72,61,.25);
  padding-bottom: 7px;
}

.home-news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.home-news-card,
.news-list-card {
  background: #fff;
  overflow: hidden;
  border: 1px solid rgba(15,72,61,.09);
  transition: transform .25s ease, box-shadow .25s ease;
}

.home-news-card:hover,
.news-list-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(21,54,46,.08);
}

.home-news-card__image,
.news-list-card__image {
  display: block;
  overflow: hidden;
  background: #e9ece8;
}

.home-news-card__image {
  aspect-ratio: 16 / 9;
}

.news-list-card__image {
  aspect-ratio: 16 / 9;
}

.home-news-card__image img,
.news-list-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}

.home-news-card:hover .home-news-card__image img,
.news-list-card:hover .news-list-card__image img {
  transform: scale(1.025);
}

.home-news-card__body,
.news-list-card__body {
  padding: 28px 30px 30px;
}

.home-news-card__meta,
.news-list-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 15px;
  color: #718078;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-news-card h3,
.news-list-card h3 {
  margin: 0 0 14px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  line-height: 1.23;
  letter-spacing: -.018em;
}

.home-news-card h3 a,
.news-list-card h3 a {
  color: var(--green-dark);
  text-decoration: none;
}

.home-news-card__body > p,
.news-list-card__body > p {
  margin: 0 0 22px;
  color: #5a6963;
  font-size: .92rem;
  line-height: 1.75;
}

.home-news-card__link,
.news-list-card__link {
  color: var(--green);
  text-decoration: none;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.news-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

@media (max-width: 760px) {
  .home-news-section {
    padding: 76px 0 82px;
  }

  .home-news-heading {
    display: block;
    margin-bottom: 30px;
  }

  .home-news-all {
    display: inline-block;
    margin-top: 20px;
  }

  .home-news-grid,
  .news-list-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .home-news-card__body,
  .news-list-card__body {
    padding: 23px 22px 25px;
  }
}
/* END V44 */


/* ==================================
   V45 - BERITA SEBELUM INSTAGRAM
   Kartu berita dibuat selebar kartu Instagram
   ================================== */
.home-news-section {
  padding: 92px 0 84px;
  background: #f7f5ef;
}

.home-news-heading {
  margin-bottom: 30px;
}

.home-news-heading h2 {
  max-width: 680px;
  font-size: clamp(1.9rem, 3vw, 3rem);
}

/* Sama dengan lebar kolom Instagram pada desktop */
.home-news-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.home-news-card {
  min-width: 0;
}

.home-news-card__image {
  aspect-ratio: 1 / 1;
}

.home-news-card__body {
  padding: 18px 18px 20px;
}

.home-news-card__meta {
  gap: 6px 10px;
  margin-bottom: 10px;
  font-size: .61rem;
}

.home-news-card h3 {
  margin-bottom: 9px;
  font-size: 1.05rem;
  line-height: 1.28;
}

.home-news-card__body > p {
  display: -webkit-box;
  margin-bottom: 14px;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: .78rem;
  line-height: 1.55;
}

.home-news-card__link {
  font-size: .65rem;
}

/* tablet: tetap kompak */
@media (max-width: 900px) {
  .home-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

/* HP: 2 kartu berdampingan agar tetap seperti feed sosial */
@media (max-width: 600px) {
  .home-news-section {
    padding: 68px 0 70px;
  }

  .home-news-heading {
    margin-bottom: 24px;
  }

  .home-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .home-news-card__body {
    padding: 14px 13px 16px;
  }

  .home-news-card h3 {
    font-size: .9rem;
  }

  .home-news-card__body > p {
    -webkit-line-clamp: 2;
    font-size: .7rem;
  }

  .home-news-card__meta {
    font-size: .55rem;
  }

  .home-news-card__link {
    font-size: .58rem;
  }
}
/* END V45 */


/* V46 - CMS BERITA: hanya elemen artikel berita dinamis */
.article-cms-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 34px 0 10px;
}
.article-cms-gallery .article-inline-photo { margin: 0; }
.article-cms-gallery .article-inline-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (max-width: 680px) {
  .article-cms-gallery { grid-template-columns: 1fr; }
}
/* END V46 */

/* V50 - AGENDA */
.agenda-index-hero{padding:96px 0 88px;background:var(--cream)}.agenda-index-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.48fr);gap:clamp(55px,9vw,130px);align-items:end}.agenda-index-hero h1{margin:0;font-family:"Playfair Display",serif;font-size:clamp(3rem,5.4vw,5.7rem);line-height:.98;letter-spacing:-.04em;font-weight:600;color:var(--green-dark)}.agenda-index-hero-grid>p{color:#596963;font-size:.98rem;line-height:1.8}.agenda-index-section{padding:100px 0 120px}.agenda-index-heading{margin-bottom:42px}.agenda-index-heading h2{margin:0;font-family:"Playfair Display",serif;font-size:clamp(2rem,3.6vw,3.4rem);color:var(--green-dark)}.agenda-empty{padding:25px;border:1px solid rgba(15,72,61,.12);background:#f7f8f6;color:#66766f}.agenda-group+.agenda-group{margin-top:76px}.agenda-group-heading{margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid rgba(15,72,61,.15)}.agenda-group-heading h3{margin:0;font-family:"Playfair Display",serif;font-size:1.75rem;color:var(--green-dark)}.agenda-list-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.agenda-card{background:#fff;border:1px solid rgba(15,72,61,.1);overflow:hidden;transition:.25s}.agenda-card:hover{transform:translateY(-3px);box-shadow:0 18px 45px rgba(21,54,46,.08)}.agenda-card-image{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#edf0ed}.agenda-card-image img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:#fff}.agenda-status{display:inline-flex;border-radius:999px;padding:7px 10px;font-size:.63rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.agenda-card-image .agenda-status{position:absolute;top:13px;left:13px}.agenda-status-upcoming{background:#dcefe6;color:#176650}.agenda-status-today{background:#fff0bd;color:#705500}.agenda-status-past{background:rgba(238,238,238,.95);color:#626b67}.agenda-card-body{padding:22px}.agenda-card-date{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;color:#738079;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em}.agenda-card-date strong{color:var(--green)}.agenda-card h3{margin:0 0 10px;font-family:"Playfair Display",serif;font-size:1.35rem;line-height:1.25}.agenda-card h3 a{color:var(--green-dark);text-decoration:none}.agenda-card-location{color:var(--green)!important;font-weight:700;font-size:.77rem!important}.agenda-card-body>p{color:#596862;font-size:.84rem;line-height:1.65}.agenda-card-link{color:var(--green);text-decoration:none;font-size:.69rem;font-weight:800;text-transform:uppercase}.agenda-detail-hero{padding:100px 0 86px;background:var(--cream)}.agenda-detail-hero h1{max-width:990px;margin:0 0 24px;font-family:"Playfair Display",serif;font-size:clamp(2.5rem,5vw,5rem);line-height:1.04;letter-spacing:-.035em;color:var(--green-dark)}.agenda-detail-deck{max-width:820px;color:#596862;font-size:1.05rem;line-height:1.8}.agenda-detail-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:46px;padding-top:28px;border-top:1px solid rgba(15,72,61,.15)}.agenda-detail-meta div{display:grid;gap:6px}.agenda-detail-meta span{color:#7a867f;font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700}.agenda-detail-meta strong{color:var(--green-dark);font-size:.93rem}.agenda-detail-gallery{padding:55px 0 0}.agenda-detail-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.agenda-detail-gallery-grid figure{margin:0;overflow:hidden;background:#edf0ed}.agenda-detail-gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.agenda-detail-gallery-grid figure:first-child{grid-column:span 2}.agenda-detail-content{padding:72px 0 110px}.agenda-detail-content-inner{max-width:830px}.agenda-detail-content p{color:#465850;font-size:1rem;line-height:1.92;margin:0 0 24px}@media(max-width:900px){.agenda-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.agenda-detail-meta{grid-template-columns:1fr}}@media(max-width:720px){.agenda-index-hero{padding:58px 0 54px}.agenda-index-hero-grid{grid-template-columns:1fr;gap:24px}.agenda-index-section{padding:70px 0 84px}.agenda-list-grid{grid-template-columns:1fr}.agenda-detail-hero{padding:68px 0 60px}.agenda-detail-gallery-grid{grid-template-columns:1fr}.agenda-detail-gallery-grid figure:first-child{grid-column:auto}.agenda-detail-content{padding:54px 0 80px}}
/* END V50 */