:root {
  --blue: #1556a5;
  --navy: #0d2848;
  --gold: #f3b62d;
  --ink: #18314e;
  --muted: #687b91;
  --soft: #f4f8fc;
  --line: #e4ebf3;
  --shadow: 0 16px 42px rgba(16,43,77,.09)
}
/* Base typography and shared components */
* {
  box-sizing: border-box
}
body {
  font-family: system-ui,-apple-system,"Segoe UI",sans-serif;
  color: #24354b
}
.navbar-brand {
  letter-spacing: -.03em
}
.hero {
  min-height: 510px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(110deg,rgba(9,37,76,.9),rgba(21,86,165,.61)),url('../images/school-placeholder.svg') center/cover;
  animation: fadein .7s ease
}
.hero-inner {
  max-width: 850px;
  padding: 4rem 1.5rem
}
.hero h1 {
  font-weight: 850;
  font-size: clamp(3.3rem,10vw,7rem);
  letter-spacing: .08em
}
.hero-sub {
  font-size: clamp(1.1rem,3vw,1.7rem);
  margin: 1rem auto 2rem
}
.eyebrow {
  color: var(--blue);
  font-weight: 750;
  letter-spacing: .13em;
  font-size: .78rem
}
.hero .eyebrow {
  color: #ffd878
}
.stat-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 35px #19365712;
  padding: 1.5rem .5rem;
  font-weight: 650
}
.stat-number {
  color: var(--blue);
  font-size: clamp(1.5rem,5vw,2.8rem);
  font-weight: 800
}
.section-heading {
  text-align: center;
  margin-bottom: 2rem
}
.section-heading h2,.section-soft h2 {
  font-weight: 750;
  margin: .5rem 0
}
.section-soft {
  background: var(--soft)
}
.content-copy {
  line-height: 1.8
}
.content-copy p:last-child {
  margin-bottom: 0
}
.program-card,.article-card {
  overflow: hidden;
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 9px 30px #12314c12
}
.program-card img {
  height: 230px;
  width: 100%;
  object-fit: cover
}
.article-card .card-img-top {
  height: 220px;
  object-fit: cover
}
.article-card .card-body {
  padding: 1.3rem
}
.page-banner {
  background: linear-gradient(115deg,#102d51,#1d64b3);
  color: #fff;
  padding: 4rem 0
}
.page-banner span {
  color: #f8cf74;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em
}
.page-banner h1 {
  font-weight: 800;
  font-size: clamp(2.3rem,6vw,4rem);
  margin: .5rem 0 0
}
.form-panel {
  padding: 2rem;
  border: 1px solid #e3eaf2;
  border-radius: 1rem;
  box-shadow: 0 12px 35px #132e4b0c
}
.form-panel h2 {
  font-weight: 750;
  margin-bottom: 1.4rem
}
.footer {
  background: var(--navy);
  color: #d7e4f3
}
.footer h4,.footer h5 {
  color: #fff
}
.social-link {
  display: inline-block;
  margin: .25rem .6rem .25rem 0;
  color: #fff
}
.social-card {
  text-align: center;
  border: 1px solid #e5ecf4;
  border-radius: 1rem;
  padding: 2rem
}
.social-card i {
  font-size: 2rem;
  color: #c13584
}
.social-card a {
  text-decoration: none
}
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(130deg,#102e53,#287bc5);
  padding: 1rem
}
.login-box {
  background: #fff;
  border-radius: 1rem;
  padding: 2.5rem;
  width: min(100%,430px);
  box-shadow: 0 25px 70px #001b373b
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: var(--gold);
  border-radius: 50%;
  font-weight: 850;
  color: #153356;
  font-size: 1.2rem;
  margin-bottom: .8rem
}
.toast-message {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 5
}
.article-body {
  font-size: 1.08rem;
  line-height: 1.85
}
.article-body img {
  max-width: 100%;
  height: auto
}
@keyframes fadein {
  from {
    opacity: .25
  }
  to {
    opacity: 1
  }
}
@media (max-width:575px) {
  .hero {
    min-height: 410px
  }
  .stat-card {
    height: 100%
  }
  .form-panel {
    padding: 1.25rem
  }
  .footer .col-md-4 {
    margin-top: .5rem
  }
}
/* Navigation and responsive school-profile components */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px
}
body {
  color: var(--ink);
  line-height: 1.65;
  overflow-x: hidden
}
.navbar {
  min-height: 76px
}
.navbar-brand {
  font-size: 1.08rem;
  color: var(--navy)!important
}
.navbar .nav-link {
  font-size: .95rem;
  font-weight: 600;
  padding: .65rem .8rem!important;
  color: #415770
}
.navbar .nav-link:hover {
  color: var(--blue)
}
.navbar .btn {
  border-radius: 999px;
  padding: .55rem 1.2rem;
  font-weight: 650
}
.hero {
  min-height: clamp(420px,58vw,640px);
  background-position: center;
  background-size: cover
}
.hero-inner {
  width: min(100%,940px);
  padding: clamp(2rem,6vw,5rem) 1.25rem
}
.hero h1 {
  line-height: 1.02;
  text-shadow: 0 5px 24px #00172c66
}
.hero-sub {
  max-width: 700px;
  text-shadow: 0 2px 12px #00172c70
}
.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  margin: 0 5px
}
.carousel-control-prev,.carousel-control-next {
  width: 8%
}
.stat-card {
  height: 100%;
  padding: 1.6rem 1rem;
  border: 1px solid var(--line);
  transition: transform .2s,box-shadow .2s
}
.stat-card:hover,.program-card:hover,.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow)
}
.section-heading {
  margin-bottom: 2.5rem
}
.section-heading h2,.section-soft h2 {
  font-size: clamp(1.8rem,4vw,2.6rem);
  letter-spacing: -.035em
}
.section-soft {
  position: relative
}
.content-copy {
  max-width: 850px
}
.program-card,.article-card {
  height: 100%;
  transition: transform .2s,box-shadow .2s
}
.program-card img,.article-card .card-img-top {
  background: #e9f0f7
}
.program-card p,.article-card p {
  color: var(--muted)
}
.article-card .card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}
.article-card .card-body .btn {
  margin-top: auto
}
.article-card h3 {
  line-height: 1.35
}
.btn {
  font-weight: 650;
  border-radius: .7rem
}
.btn-primary {
  --bs-btn-bg: var(--blue);
  --bs-btn-border-color: var(--blue);
  --bs-btn-hover-bg: #104c8d;
  --bs-btn-hover-border-color: #104c8d
}
.page-banner {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem,8vw,6.5rem) 0
}
.page-banner:after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border: 1px solid #ffffff25;
  border-radius: 50%;
  right: 8%;
  top: -210px;
  box-shadow: 0 0 0 35px #ffffff0c,0 0 0 70px #ffffff09
}
.page-banner .container {
  position: relative;
  z-index: 1
}
.form-panel {
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--line)
}
.form-control,.form-select {
  min-height: 46px;
  border-color: #dce5ef;
  border-radius: .65rem
}
.form-control:focus,.form-select:focus {
  border-color: #75a9df;
  box-shadow: 0 0 0 .22rem #1761ad18
}
.form-label {
  font-weight: 650;
  color: #344b64
}
.social-card {
  height: 100%;
  border-color: var(--line);
  box-shadow: 0 8px 28px #12314c0a;
  transition: transform .2s
}
.social-card:hover {
  transform: translateY(-3px)
}
.footer {
  margin-top: 4rem
}
.footer a:hover {
  color: #ffd36a
}
.login-box {
  border: 1px solid #ffffff80
}
.breadcrumb {
  font-size: .9rem
}
.article-body {
  color: #354b63
}
.article-body h2,.article-body h3 {
  color: var(--navy);
  margin-top: 2rem
}
.ratio {
  box-shadow: var(--shadow)
}
@media (max-width:991.98px) {
  .navbar-collapse {
    padding: .75rem 0 1rem
  }
  .navbar-nav {
    align-items: stretch!important
  }
  .navbar .btn {
    margin: .45rem 0 0!important;
    width: 100%
  }
  .hero {
    min-height: 470px
  }
  .carousel-control-prev,.carousel-control-next {
    width: 12%
  }
  .footer {
    margin-top: 2rem
  }
}
@media (max-width:767.98px) {
  .hero {
    min-height: 420px
  }
  .hero h1 {
    letter-spacing: .04em
  }
  .hero-sub {
    font-size: 1.08rem
  }
  .stat-card {
    padding: 1.15rem .45rem;
    font-size: .82rem;
    border-radius: .85rem
  }
  .stat-number {
    font-size: clamp(1.25rem,6vw,2rem)
  }
  .section-heading {
    margin-bottom: 1.7rem
  }
  .section-soft {
    padding-block: 3rem!important
  }
  .program-card img,.article-card .card-img-top {
    height: 210px
  }
  .page-banner {
    padding: 3.3rem 0
  }
  .page-banner:after {
    right: -180px
  }
  .form-panel {
    padding: 1.25rem
  }
  .footer .container {
    padding-block: 2.6rem!important
  }
  .footer h4 {
    font-size: 1.2rem
  }
}
@media (max-width:420px) {
  .hero {
    min-height: 390px
  }
  .hero-inner {
    padding-inline: 1.1rem
  }
  .hero .btn {
    font-size: .95rem
  }
  .stat-card {
    font-size: .74rem
  }
  .article-card .card-body {
    padding: 1.1rem
  }
  .page-banner h1 {
    font-size: 2.15rem
  }
}
/* Page-specific layouts: home, about, articles, admissions, contact */ .school-hero .hero {
  min-height: clamp(500px,62vw,690px);
  background-position: center;
  background-size: cover
}
.school-hero .hero-inner {
  padding-block: clamp(4rem,10vw,7.5rem)
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  padding: .55rem .9rem;
  border: 1px solid #ffffff50;
  border-radius: 99px;
  background: #ffffff13;
  color: #fff;
  font-size: .77rem;
  font-weight: 750;
  letter-spacing: .11em
}
.school-hero .hero h1 {
  margin-top: 1.3rem
}
.school-hero .hero .btn {
  border-radius: 99px;
  padding: .8rem 1.35rem
}
.stats-wrap {
  position: relative;
  margin-top: -2.2rem;
  z-index: 2
}
.stats-wrap .stat-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .8rem;
  text-align: left;
  padding: 1.25rem 1.4rem;
  border-radius: 1rem;
  background: #fff
}
.stat-icon {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #edf5fe;
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 1.2rem
}
.stat-number {
  font-size: clamp(1.45rem,3vw,2rem);
  line-height: 1.2
}
.stat-label {
  color: var(--muted);
  font-size: .86rem
}
.admission-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: linear-gradient(115deg,#eef6ff,#f8fbff 70%);
  border: 1px solid #dceafa;
  border-radius: 1.35rem;
  padding: clamp(1.5rem,4vw,3rem)
}
.admission-banner h2 {
  max-width: 660px;
  font-weight: 780;
  font-size: clamp(1.5rem,3.2vw,2.45rem);
  letter-spacing: -.035em;
  margin: .55rem 0
}
.admission-banner p {
  color: var(--muted);
  margin: 0
}
.admission-banner .btn {
  border-radius: 99px;
  white-space: nowrap;
  padding: .85rem 1.3rem
}
.vision-section,.latest-section,.values-section {
  background: var(--soft)
}
.vision-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  padding: clamp(1.5rem,4vw,3rem);
  box-shadow: var(--shadow);
  overflow: hidden
}
.vision-card .content-copy {
  font-size: clamp(1.1rem,2vw,1.4rem);
  font-weight: 600;
  color: var(--navy);
  margin-top: .8rem;
  position: relative;
  z-index: 1
}
.quote-mark {
  position: absolute;
  right: 2rem;
  top: 1.4rem;
  color: #edf4fc;
  font-size: 4.5rem
}
.vision-footer {
  display: flex;
  align-items: center;
  gap: .7rem;
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: .82rem
}
.mini-emblem {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: #173c68;
  font-size: .8rem;
  font-weight: 850
}
.section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  text-align: left
}
.section-heading-row h2 {
  font-weight: 780;
  letter-spacing: -.035em;
  margin: .4rem 0
}
.section-heading-row p {
  color: var(--muted);
  margin: 0
}
.text-link {
  display: inline-flex;
  align-items: center;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap
}
.text-link:hover {
  color: #0e477f
}
.program-image-wrap {
  position: relative
}
.program-number {
  position: absolute;
  left: 1rem;
  top: 1rem;
  background: #ffffffed;
  color: var(--navy);
  border-radius: 99px;
  padding: .35rem .65rem;
  font-size: .75rem;
  font-weight: 800
}
.program-card .p-4 {
  padding: 1.25rem!important
}
.social-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .9rem;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  padding: 1.2rem
}
.social-card:hover {
  color: var(--blue)
}
.social-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #fff0f7;
  display: grid;
  place-items: center;
  flex: 0 0 auto
}
.social-icon i {
  font-size: 1.25rem
}
.social-platform {
  font-weight: 750;
  flex: 1
}
.social-action {
  font-size: .8rem;
  color: var(--blue);
  font-weight: 650
}
.page-banner .breadcrumb {
  margin-bottom: 1.7rem
}
.page-banner .breadcrumb-item,.page-banner .breadcrumb-item a {
  color: #ffffffb8;
  text-decoration: none
}
.page-banner .breadcrumb-item.active {
  color: #fff
}
.page-banner .breadcrumb-item+.breadcrumb-item:before {
  color: #ffffff75
}
.page-eyebrow {
  display: inline-block;
  color: #ffda79;
  font-size: .76rem;
  letter-spacing: .13em;
  font-weight: 800
}
.page-banner h1 {
  letter-spacing: -.045em
}
.page-banner p {
  max-width: 670px;
  color: #e2edf8;
  margin: .8rem 0 0;
  font-size: 1.05rem
}
.about-photo-wrap {
  position: relative;
  padding: 0 1rem 1rem 0
}
.about-photo-wrap:before {
  content: "";
  position: absolute;
  inset: 1.2rem 0 0 1.2rem;
  border: 2px solid #d8e8f7;
  border-radius: 1.3rem
}
.about-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 1.2rem;
  box-shadow: var(--shadow)
}
.photo-caption {
  position: absolute;
  z-index: 2;
  left: 1rem;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: .9rem;
  padding: .7rem 1rem;
  box-shadow: var(--shadow);
  font-size: .82rem
}
.photo-caption small {
  display: block;
  color: var(--muted);
  font-size: .72rem
}
.about-history {
  color: #566b82
}
.about-values {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.3rem
}
.about-values span {
  display: flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: .45rem .7rem;
  color: #486078;
  font-size: .77rem;
  font-weight: 650
}
.about-values i {
  color: var(--blue)
}
.value-card {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: #fff;
  padding: clamp(1.4rem,3vw,2.2rem);
  box-shadow: 0 10px 30px #102b4d08
}
.value-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: #edf5fe;
  color: var(--blue);
  border-radius: 15px;
  margin-bottom: 1.2rem
}
.value-card>.eyebrow {
  display: block;
  margin-bottom: .6rem
}
.value-card .content-copy {
  color: #40566f
}
.mission-value .content-copy ol,.mission-value .content-copy ul {
  padding-left: 1.25rem
}
.mission-value .content-copy li {
  padding: .2rem 0
}
.motto-panel {
  text-align: center;
  border-radius: 1.3rem;
  padding: clamp(1.7rem,5vw,3.5rem);
  background: #f5f8fc;
  border: 1px solid var(--line)
}
.motto-panel h2 {
  font-size: clamp(1.6rem,3vw,2.3rem);
  font-weight: 780;
  margin: .5rem 0
}
.motto-content {
  max-width: 760px;
  margin: 0 auto;
  color: var(--navy);
  font-size: 1.1rem;
  font-weight: 650
}
.motto-words {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.3rem
}
.motto-words span {
  background: #fff;
  border: 1px solid var(--line);
  color: #486078;
  border-radius: 99px;
  padding: .45rem .8rem;
  font-size: .82rem;
  font-weight: 700
}
.about-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  padding: 1.6rem 2rem;
  box-shadow: var(--shadow)
}
.about-cta h2 {
  font-weight: 750;
  font-size: clamp(1.25rem,2.5vw,1.8rem);
  margin: .35rem 0 0
}
.about-cta .btn {
  white-space: nowrap
}
.articles-content {
  min-height: 55vh
}
.articles-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.8rem
}
.articles-toolbar h2 {
  font-size: 1.65rem;
  font-weight: 780;
  margin: .3rem 0 0
}
.articles-count {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--muted);
  font-size: .84rem
}
.articles-count i {
  color: var(--blue);
  font-size: 1.15rem
}
.article-image-link {
  display: block;
  overflow: hidden
}
.article-card .card-img-top {
  transition: transform .35s
}
.article-card:hover .card-img-top {
  transform: scale(1.035)
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  color: var(--muted);
  font-size: .72rem
}
.article-card h3 a {
  color: var(--ink);
  text-decoration: none
}
.article-card h3 a:hover {
  color: var(--blue)
}
.article-card .card-body p {
  font-size: .9rem
}
.article-read-link {
  margin-top: auto;
  color: var(--blue);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 700
}
.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  background: #f8fafc;
  border: 1px dashed #d6e0ea;
  border-radius: 1rem
}
.empty-state>span {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 1rem;
  background: #eaf3fc;
  color: var(--blue);
  border-radius: 20px;
  font-size: 1.4rem
}
.empty-state h3 {
  font-weight: 750
}
.empty-state p {
  color: var(--muted);
  margin: 0
}
.article-pagination .page-link {
  border: 0;
  border-radius: .6rem;
  margin: 0 .2rem;
  color: #466078
}
.article-pagination .active>.page-link {
  background: var(--blue);
  color: #fff
}
.ppdb-banner {
  background: radial-gradient(ellipse at 85% 15%,#2d70b4 0,transparent 45%),linear-gradient(115deg,#102d51,#174e89)
}
.ppdb-overview {
  padding-top: 3rem!important
}
.ppdb-info-card,.ppdb-steps,.ppdb-detail-card {
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  background: #fff;
  padding: clamp(1.3rem,3vw,2rem);
  box-shadow: 0 12px 35px #102b4d08
}
.ppdb-info-card h2,.ppdb-steps h2 {
  font-size: 1.55rem;
  font-weight: 780;
  margin: .45rem 0 .9rem
}
.ppdb-info-card .content-copy {
  color: #51667d
}
.ppdb-contact-mini {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-top: 1.2rem;
  margin-top: 1.3rem;
  border-top: 1px solid var(--line)
}
.contact-mini-icon {
  width: 43px;
  height: 43px;
  border-radius: 14px;
  background: #e8f8ef;
  color: #168750;
  display: grid;
  place-items: center;
  font-size: 1.2rem
}
.ppdb-contact-mini small,.ppdb-contact-mini strong {
  display: block
}
.ppdb-contact-mini small {
  color: var(--muted);
  font-size: .72rem
}
.ppdb-contact-mini strong {
  font-size: .87rem
}
.ppdb-steps {
  background: #f5f9fe
}
.ppdb-steps ol {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0
}
.ppdb-steps li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .65rem 0
}
.ppdb-steps li>span {
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e1efff;
  color: var(--blue);
  font-size: .8rem;
  font-weight: 800
}
.ppdb-steps li strong,.ppdb-steps li small {
  display: block
}
.ppdb-steps li strong {
  font-size: .9rem
}
.ppdb-steps li small {
  color: var(--muted);
  font-size: .8rem;
  margin-top: .15rem
}
.service-note {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: .8rem;
  padding: .8rem
}
.service-note>i {
  color: var(--blue)
}
.service-note small,.service-note strong {
  display: block
}
.service-note small {
  font-size: .7rem;
  color: var(--muted)
}
.service-note strong {
  font-size: .82rem
}
.ppdb-detail-card {
  height: 100%;
  box-shadow: none
}
.detail-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #edf5fe;
  color: var(--blue);
  margin-bottom: .85rem
}
.ppdb-detail-card h3 {
  font-weight: 750;
  font-size: 1.05rem
}
.ppdb-detail-card .content-copy {
  color: #5a6d82;
  font-size: .88rem
}
.ppdb-form-section {
  background: var(--soft);
  scroll-margin-top: 80px
}
.ppdb-form-panel {
  padding: clamp(1.25rem,4vw,2.5rem)
}
.form-intro h2 {
  font-size: 1.8rem;
  font-weight: 780;
  margin: .35rem 0
}
.form-intro p {
  color: var(--muted)
}
.form-section-label {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .95rem;
  font-weight: 750;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
  padding-bottom: .7rem;
  margin-bottom: 1rem
}
.form-section-label>span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e8f2fd;
  color: var(--blue);
  font-size: .75rem
}
.file-upload-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  height: 100%;
  padding: .9rem;
  border: 1px solid #dce5ef;
  border-radius: .8rem;
  cursor: pointer;
  transition: border-color .15s,background .15s
}
.file-upload-card:hover,.file-upload-card:focus-within {
  border-color: #82b1e2;
  background: #f8fbff
}
.file-upload-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--blue);
  background: #edf5fe;
  flex: 0 0 auto
}
.file-upload-card strong,.file-upload-card small {
  display: block
}
.file-upload-card strong {
  font-size: .8rem
}
.file-upload-card small {
  font-size: .7rem;
  color: var(--muted);
  margin-top: .15rem;
  overflow-wrap: anywhere
}
.faq-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: clamp(1.4rem,4vw,2.5rem);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: #fff
}
.faq-panel h2 {
  font-size: 1.45rem;
  font-weight: 750;
  margin: .4rem 0
}
.faq-panel p,.faq-copy {
  color: var(--muted)
}
.contact-banner {
  background: radial-gradient(ellipse at 88% 12%,#367ab8 0,transparent 42%),linear-gradient(115deg,#102d51,#174e89)
}
.contact-content {
  min-height: 50vh
}
.contact-intro h2 {
  font-weight: 780;
  font-size: 1.9rem;
  margin: .45rem 0
}
.contact-intro p {
  color: var(--muted);
  max-width: 440px
}
.contact-details {
  display: grid;
  gap: .55rem;
  margin-top: 1.4rem
}
.contact-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem .9rem;
  border: 1px solid var(--line);
  border-radius: .85rem;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  transition: border-color .15s,transform .15s
}
.contact-item[href]:hover {
  border-color: #9fc3e8;
  transform: translateX(2px);
  color: var(--blue)
}
.contact-item-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #edf5fe;
  color: var(--blue)
}
.contact-item-icon.whatsapp {
  background: #e8f8ef;
  color: #168750
}
.contact-item small,.contact-item strong {
  display: block
}
.contact-item small {
  color: var(--muted);
  font-size: .72rem
}
.contact-item strong {
  font-size: .86rem;
  overflow-wrap: anywhere
}
.contact-arrow {
  margin-left: auto;
  color: #a1afbd;
  font-size: .76rem
}
.contact-address {
  align-items: flex-start
}
.contact-social {
  margin-top: 1.3rem
}
.contact-social>div {
  display: flex;
  gap: .55rem;
  margin-top: .65rem
}
.contact-social a {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--blue);
  text-decoration: none;
  transition: all .15s
}
.contact-social a:hover {
  background: var(--blue);
  color: #fff
}
.location-panel {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  background: #fff;
  box-shadow: var(--shadow)
}
.location-heading {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.2rem
}
.location-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #edf5fe;
  color: var(--blue);
  display: grid;
  place-items: center
}
.location-heading strong,.location-heading small {
  display: block
}
.location-heading small {
  max-width: 530px;
  color: var(--muted);
  font-size: .76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.contact-map {
  height: 460px;
  background: #edf2f5
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0
}
.map-placeholder {
  height: 460px;
  position: relative;
  overflow: hidden;
  background-color: #e9f0e9;
  background-image: linear-gradient(35deg,transparent 46%,#fff 47%,#fff 52%,transparent 53%),linear-gradient(115deg,transparent 42%,#fff 43%,#fff 48%,transparent 49%),linear-gradient(0deg,transparent 48%,#f8fbfc 49%,#f8fbfc 54%,transparent 55%);
  background-size: 190px 140px,250px 200px,100% 120px
}
.map-decoration {
  position: absolute;
  inset: 0
}
.map-road {
  position: absolute;
  display: block;
  height: 16px;
  background: #fff;
  border: 1px solid #dae3de;
  border-radius: 99px;
  transform: rotate(-25deg)
}
.road-one {
  width: 130%;
  top: 32%;
  left: -12%
}
.road-two {
  width: 110%;
  top: 65%;
  left: 5%;
  transform: rotate(18deg)
}
.road-three {
  width: 90%;
  top: 45%;
  left: 40%;
  transform: rotate(75deg)
}
.map-park {
  position: absolute;
  right: 11%;
  top: 12%;
  width: 100px;
  height: 85px;
  border-radius: 45% 55% 35% 65%;
  background: #cde6ca;
  transform: rotate(20deg)
}
.map-pin {
  position: absolute;
  left: 51%;
  top: 42%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  border: 5px solid #fff;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  box-shadow: 0 8px 20px #18314e45
}
.map-pin i {
  transform: rotate(45deg)
}
.map-caption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem .9rem;
  border-radius: .8rem;
  background: #fff;
  box-shadow: var(--shadow)
}
.map-pin-small {
  color: var(--blue);
  font-size: 1.2rem
}
.map-caption strong,.map-caption small {
  display: block
}
.map-caption strong {
  font-size: .82rem
}
.map-caption small {
  font-size: .7rem;
  color: var(--muted)
}
.location-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.1rem;
  color: var(--muted);
  font-size: .77rem
}
.location-footer a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap
}
@media (max-width:991.98px) {
  .school-hero .hero {
    min-height: 540px
  }
  .stats-wrap {
    margin-top: -1.5rem
  }
  .about-photo {
    height: 390px
  }
  .contact-map,.map-placeholder {
    height: 400px
  }
}
@media (max-width:767.98px) {
  .school-hero .hero {
    min-height: 485px
  }
  .school-hero .hero-inner {
    padding-block: 4.5rem
  }
  .school-hero .hero .btn {
    font-size: .9rem;
    padding: .72rem 1rem
  }
  .stats-wrap {
    margin-top: -1rem
  }
  .stats-wrap .stat-card {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    padding: .85rem .35rem;
    row-gap: .25rem
  }
  .stat-icon {
    grid-row: auto;
    width: 35px;
    height: 35px;
    border-radius: 11px;
    font-size: .9rem
  }
  .stat-number {
    font-size: 1.45rem
  }
  .stat-label {
    font-size: .7rem;
    line-height: 1.2
  }
  .admission-banner,.about-cta {
    align-items: flex-start;
    flex-direction: column
  }
  .admission-banner {
    gap: 1rem
  }
  .admission-banner .btn {
    width: 100%
  }
  .section-heading-row {
    align-items: flex-start;
    flex-direction: column
  }
  .about-photo {
    height: 320px
  }
  .about-intro .display-6 {
    font-size: 2rem
  }
  .articles-toolbar {
    align-items: flex-start;
    flex-direction: column
  }
  .articles-count {
    font-size: .78rem
  }
  .ppdb-contact-mini {
    flex-wrap: wrap
  }
  .ppdb-contact-mini .btn {
    margin-left: 0!important;
    width: 100%
  }
  .ppdb-form-panel {
    padding: 1.1rem
  }
  .form-section-label {
    font-size: .86rem;
    flex-wrap: wrap
  }
  .form-section-label small {
    flex-basis: 100%;
    margin-left: 2.4rem!important
  }
  .faq-panel {
    grid-template-columns: 1fr;
    gap: 1rem
  }
  .contact-intro h2 {
    font-size: 1.65rem
  }
  .contact-map,.map-placeholder {
    height: 330px
  }
  .location-footer {
    align-items: flex-start;
    flex-direction: column
  }
  .location-heading small {
    max-width: calc(100vw - 130px)
  }
}
@media (max-width:420px) {
  .school-hero .hero {
    min-height: 440px
  }
  .hero-kicker {
    font-size: .64rem;
    padding: .48rem .68rem
  }
  .school-hero .hero h1 {
    font-size: 3.25rem
  }
  .school-hero .hero-sub {
    font-size: .98rem
  }
  .stats-wrap .stat-card {
    min-height: 100px
  }
  .stat-number {
    font-size: 1.25rem
  }
  .stat-label {
    font-size: .65rem
  }
  .about-photo {
    height: 270px
  }
  .photo-caption {
    left: .45rem;
    right: .3rem;
    padding: .6rem
  }
  .contact-item {
    gap: .6rem;
    padding: .75rem
  }
  .contact-item-icon {
    width: 37px;
    height: 37px
  }
  .contact-item strong {
    font-size: .79rem
  }
  .ppdb-steps h2,.ppdb-info-card h2 {
    font-size: 1.35rem
  }
  .faq-panel {
    padding: 1.25rem
  }
  .location-footer {
    font-size: .72rem
  }
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .95rem!important;
  line-height: 1.1
}
.nav-emblem,.footer-emblem {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #eaf3fd;
  color: var(--blue);
  font-size: .86rem;
  font-weight: 850
}
.navbar-brand small {
  display: block;
  margin-top: .25rem;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 550;
  letter-spacing: 0
}
.site-footer {
  margin-top: 3rem;
  background: #102b4d;
  color: #d5e1ee
}
.footer-main {
  padding-top: 3.6rem;
  padding-bottom: 1rem
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: #fff;
  text-decoration: none;
  font-size: 1.02rem;
  font-weight: 750
}
.footer-brand:hover {
  color: #fff
}
.footer-emblem {
  background: #f2b93d;
  color: #17385e
}
.footer-brand small {
  display: block;
  margin-top: .25rem;
  color: #a9bdd3;
  font-size: .73rem;
  font-weight: 500
}
.footer-intro {
  max-width: 420px;
  color: #b9c9d9;
  margin: 1.15rem 0 0;
  font-size: .88rem
}
.footer-title {
  font-size: .86rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 800;
  margin: 0 0 1rem
}
.site-footer .col-lg-3>a,.site-footer .col-lg-4>a {
  display: block;
  width: fit-content;
  color: #c2d0df;
  text-decoration: none;
  font-size: .85rem;
  margin: .55rem 0
}
.site-footer .col-lg-3>a:hover,.site-footer .col-lg-4>a:hover {
  color: #ffd36a
}
.site-footer .col-lg-4 p {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  color: #c2d0df;
  font-size: .84rem
}
.site-footer .col-lg-4 p i,.site-footer .col-lg-4>a i {
  color: #f2c45b;
  min-width: 16px;
  margin-top: .15rem
}
.footer-socials {
  display: flex;
  gap: .55rem;
  margin-top: 1rem
}
.footer-socials a {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 12px;
  border: 1px solid #ffffff30;
  color: #e3edf6;
  text-decoration: none;
  transition: all .15s
}
.footer-socials a:hover {
  background: #f2b93d;
  border-color: #f2b93d;
  color: #17385e
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  border-top: 1px solid #ffffff20;
  padding: 1.1rem 0 1.5rem;
  margin-top: 2rem;
  color: #9fb2c7;
  font-size: .76rem
}
.footer-bottom a {
  color: #c8d7e6;
  text-decoration: none
}
.footer-bottom a:hover {
  color: #ffd36a
}
@media (max-width:767.98px) {
  .navbar-brand {
    font-size: .83rem!important;
    max-width: calc(100vw - 100px)
  }
  .navbar-brand>span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }
  .nav-emblem {
    width: 38px;
    height: 38px
  }
  .site-footer {
    margin-top: 2rem
  }
  .footer-main {
    padding-top: 2.6rem
  }
  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: .55rem;
    margin-top: 1.3rem
  }
}
.article-category {
  display: inline-flex;
  width: fit-content;
  margin-bottom: .45rem;
  padding: .23rem .55rem;
  border-radius: 99px;
  background: #edf5fe;
  color: var(--blue);
  font-size: .67rem;
  font-weight: 750
}
.article-card .article-meta {
  margin-top: .2rem
}
.site-brand-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  object-fit: contain
}
.footer-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #fff;
  padding: 3px
}
.login-school-logo {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: contain;
  margin: 0 auto 1rem;
  background: #fff;
  border-radius: 16px;
  padding: 5px
}
/* Layout responsif bersama untuk seluruh halaman publik */ #schoolHero .carousel-inner {
  height: auto!important
}
#schoolHero .carousel-item {
  min-height: clamp(420px,58vw,690px)
}
#schoolHero .hero {
  height: 100%;
  min-height: clamp(420px,58vw,690px)
}
img,iframe {
  max-width: 100%
}
.article-image-link {
  display: block;
  overflow: hidden;
  background: var(--soft)
}
.article-image-link img {
  transition: transform .35s ease
}
.article-card:hover .article-image-link img {
  transform: scale(1.035)
}
.article-card h3 a {
  color: var(--navy);
  text-decoration: none
}
.article-card h3 a:hover {
  color: var(--blue)
}
.article-read-link {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none
}
.article-read-link:hover {
  color: #0e477f
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  color: var(--muted);
  font-size: .74rem
}
.articles-content {
  min-height: 40vh
}
.article-pagination .page-link {
  min-width: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: .65rem!important;
  margin: 0 .2rem;
  color: var(--blue);
  border-color: var(--line)
}
.article-pagination .active .page-link {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff
}
.contact-map,.map-placeholder {
  width: 100%;
  max-width: 100%
}
.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0
}
.ppdb-form-panel,.form-panel {
  min-width: 0
}
.form-control, .form-select {
  max-width: 100%
}
.scroll-reveal {
  opacity: 1;
  transform: none
}
.reveal-enabled .scroll-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease,transform .55s ease
}
.reveal-enabled .scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0)
}
@media (max-width:991.98px) {
  .navbar-brand {
    max-width: min(70vw,420px)
  }
  .navbar-brand>span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }
  .school-hero .hero-inner {
    padding-inline: 3rem
  }
  .stats-wrap {
    margin-top: -1.25rem
  }
  .contact-map,.map-placeholder {
    height: clamp(300px,52vw,420px)
  }
}
@media (max-width:767.98px) {
  .navbar {
    min-height: 66px
  }
  .navbar-brand {
    font-size: .9rem!important;
    max-width: calc(100vw - 92px);
    gap: .55rem
  }
  .navbar-brand small {
    font-size: .58rem
  }
  .site-brand-logo,.nav-emblem {
    width: 38px;
    height: 38px
  }
  .school-hero .hero,.school-hero .carousel-item {
    min-height: clamp(430px,78svh,560px)
  }
  .school-hero .hero-inner {
    padding: 4rem 2.5rem
  }
  .school-hero .hero h1 {
    font-size: clamp(2.8rem,12vw,4.4rem)
  }
  .school-hero .hero-sub {
    font-size: clamp(.95rem,3.6vw,1.2rem);
    margin-bottom: 1.4rem
  }
  .school-hero .hero .btn {
    font-size: .9rem;
    padding: .7rem 1rem
  }
  .carousel-control-prev,.carousel-control-next {
    width: 9%
  }
  .stats-wrap {
    margin-top: -.8rem
  }
  .stats-wrap .stat-card {
    min-height: 104px;
    padding: .8rem .25rem;
    row-gap: .3rem
  }
  .stats-wrap .stat-number {
    font-size: clamp(1.05rem,5vw,1.5rem)
  }
  .stats-wrap .stat-label {
    font-size: clamp(.62rem,2.3vw,.75rem)
  }
  .stat-icon {
    width: 34px;
    height: 34px;
    font-size: .85rem
  }
  .section-heading-row {
    align-items: flex-start;
    flex-direction: column
  }
  .admission-banner {
    align-items: stretch;
    flex-direction: column;
    gap: 1rem
  }
  .admission-banner .btn {
    width: 100%
  }
  .about-photo {
    height: clamp(250px,70vw,360px)
  }
  .photo-caption {
    max-width: calc(100% - 1rem)
  }
  .article-card .card-img-top {
    height: clamp(180px,48vw,230px)
  }
  .page-banner {
    padding: clamp(2.7rem,10vw,4rem) 0
  }
  .page-banner h1 {
    font-size: clamp(2rem,8vw,3.1rem)
  }
  .contact-map,.map-placeholder {
    height: clamp(260px,75vw,360px)
  }
  .location-footer {
    align-items: flex-start;
    flex-direction: column
  }
  .faq-panel {
    grid-template-columns: 1fr;
    gap: 1rem
  }
  .footer-main {
    padding-top: 2.5rem
  }
  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: .55rem
  }
  .login-box {
    padding: clamp(1.3rem,6vw,2.2rem)
  }
}
@media (max-width:420px) {
  .container {
    --bs-gutter-x: 1.25rem
  }
  .hero-kicker {
    font-size: .62rem;
    letter-spacing: .08em
  }
  .school-hero .hero-inner {
    padding-inline: 2rem
  }
  .school-hero .hero .btn {
    font-size: .82rem;
    padding: .65rem .8rem
  }
  .stats-wrap .stat-card {
    border-radius: .75rem
  }
  .stats-wrap .stat-number {
    font-size: 1.03rem
  }
  .stats-wrap .stat-label {
    font-size: .6rem
  }
  .about-values span {
    font-size: .7rem
  }
  .form-panel {
    padding: 1rem
  }
  .form-section-label {
    font-size: .82rem
  }
  .contact-item {
    padding: .7rem;
    gap: .55rem
  }
  .contact-item strong {
    font-size: .78rem
  }
  .article-pagination .page-link {
    min-width: 36px;
    min-height: 36px;
    margin: 0 .1rem
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
  .scroll-reveal,.reveal-enabled .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none
  }
  *,*::before,*::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    scroll-behavior: auto!important
  }
}
/* Company-profile accents and richer micro-interactions */ .school-hero {
  position: relative;
  isolation: isolate;
  background: #102b4d
}
.school-hero .carousel-item {
  overflow: hidden
}
.school-hero .hero {
  position: relative;
  isolation: isolate
}
.school-hero .hero:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(60vw,620px);
  aspect-ratio: 1;
  right: -11%;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #ffffff18;
  border-radius: 50%;
  box-shadow: 0 0 0 42px #ffffff08,0 0 0 88px #ffffff05;
  pointer-events: none
}
.school-hero .hero-inner {
  animation: hero-rise .8s cubic-bezier(.2,.75,.25,1) both
}
.school-hero .hero-kicker {
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px #ffffff30
}
.school-hero .hero .btn-warning {
  box-shadow: 0 12px 30px #f2b93d42
}
.school-hero .carousel-control-prev,.school-hero .carousel-control-next {
  z-index: 3
}
.hero-progress {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #ffffff25;
  overflow: hidden
}
.hero-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--gold)
}
.hero-progress span.is-running {
  animation: hero-progress 6s linear both
}
.stats-wrap .stat-card {
  position: relative;
  overflow: hidden
}
.stats-wrap .stat-card:after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -65px;
  top: -65px;
  border-radius: 50%;
  background: #e9f3ff;
  transition: transform .3s ease
}
.stats-wrap .stat-card:hover:after {
  transform: scale(1.5)
}
.stat-icon,.stat-number,.stat-label {
  position: relative;
  z-index: 1
}
.articles-banner {
  background: radial-gradient(ellipse at 85% 10%,#4386c5 0,transparent 38%),linear-gradient(120deg,#102b4d,#1b5a9d)
}
.contact-banner {
  background: radial-gradient(ellipse at 85% 10%,#4386c5 0,transparent 38%),linear-gradient(120deg,#102b4d,#1b5a9d)
}
.articles-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 1rem 0 1.25rem
}
.articles-toolbar h2 {
  font-size: clamp(1.5rem,3vw,2rem);
  font-weight: 780;
  letter-spacing: -.035em;
  margin: .35rem 0 .15rem
}
.articles-result-count {
  color: var(--muted);
  font-size: .82rem;
  margin: 0
}
.article-search-wrap {
  position: relative;
  width: min(100%,380px)
}
.article-search-wrap>i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: #8596aa
}
.article-search-wrap .form-control {
  padding-left: 2.7rem;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 8px 25px #102b4d0b
}
.article-filter-list {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding: .25rem 0 1.15rem;
  scrollbar-width: thin
}
.article-filter {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  color: #53687f;
  padding: .55rem 1rem;
  font-size: .82rem;
  font-weight: 700;
  transition: background .18s,color .18s,border-color .18s,transform .18s
}
.article-filter:hover {
  transform: translateY(-1px);
  border-color: #a8c5e4;
  color: var(--blue)
}
.article-filter.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 7px 18px #102b4d25
}
.empty-state {
  padding: 3rem 1rem;
  text-align: center;
  border: 1px dashed #cedbea;
  border-radius: 1.2rem;
  background: #f9fbfe
}
.empty-state>span {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 18px;
  background: #eaf3fd;
  color: var(--blue);
  font-size: 1.3rem
}
.empty-state h3 {
  font-size: 1.15rem;
  font-weight: 750
}
.empty-state p {
  margin: 0;
  color: var(--muted)
}
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(16px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes hero-progress {
  to {
    transform: scaleX(1)
  }
}
@media (max-width:767.98px) {
  .articles-toolbar {
    align-items: stretch;
    flex-direction: column
  }
  .article-search-wrap {
    width: 100%
  }
  .article-filter-list {
    margin-inline: -.2rem
  }
  .school-hero .hero:before {
    width: 90vw;
    right: -48%;
    opacity: .65
  }
}
@media (prefers-reduced-motion:reduce) {
  .school-hero .hero-inner {
    animation: none
  }
  .hero-progress span.is-running {
    animation: none;
    transform: scaleX(1)
  }
}
.about-banner {
  background: radial-gradient(ellipse at 85% 10%,#4386c5 0,transparent 38%),linear-gradient(120deg,#102b4d,#1b5a9d)
}
.navbar .nav-link {
  position: relative;
  transition: color .18s ease
}
.navbar .nav-link:after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .24rem;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease
}
.navbar .nav-link:hover:after,.navbar .nav-link.active:after {
  transform: scaleX(1)
}
.navbar .nav-link.active {
  color: var(--blue)!important
}
@media (max-width:991.98px) {
  .navbar .nav-link:after {
    display: none
  }
  .navbar .nav-link.active {
    background: #eff6fd;
    border-radius: .6rem;
    padding-left: .9rem!important
  }
}
/* Compact teacher introduction cards */ .principal-section {
  padding: 2rem 0;
  background: linear-gradient(135deg,#f4f8f5,#fff8f1)
}
.principal-card {
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: center;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  padding: 1.15rem;
  border: 1px solid #e1ebe6;
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: 0 12px 34px #173d3b12
}
.principal-photo {
  width: 100%;
  height: 275px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: .9rem;
  background: #edf4ef
}
.principal-copy h2 {
  margin: .35rem 0;
  font-size: clamp(1.35rem,3vw,2rem);
  font-weight: 800;
  color: #153d3b
}
.principal-position {
  margin: 0 0 .55rem;
  color: #157c74;
  font-weight: 700;
  font-size: .88rem
}
.principal-copy p {
  margin: 0 0 .8rem;
  color: #63736d;
  font-size: .9rem;
  line-height: 1.65
}
.principal-copy .eyebrow {
  font-size: .68rem;
  color: #157c74;
  letter-spacing: .11em;
  font-weight: 800
}
.principal-achievement,.teacher-achievement {
  display: flex;
  align-items: flex-start;
  gap: .25rem;
  padding: .6rem .7rem;
  border-radius: .7rem;
  background: #f1f7f3;
  color: #365c4f!important;
  font-size: .78rem!important;
  line-height: 1.5!important
}
.principal-achievement i,.teacher-achievement i {
  flex: 0 0 auto;
  margin-top: .15rem;
  color: #e8785f
}
.principal-copy .btn {
  font-size: .85rem;
  border-radius: 99px;
  padding: .55rem .9rem
}
.teacher-section {
  background: #faf9f4
}
.teacher-card {
  overflow: hidden;
  border: 1px solid #e3e9e4;
  border-radius: .9rem;
  background: #fff;
  box-shadow: 0 8px 24px #153d3b0d;
  transition: transform .2s,box-shadow .2s
}
.teacher-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px #153d3b18
}
.teacher-photo-wrap {
  height: 175px;
  overflow: hidden;
  background: #edf4ef
}
.teacher-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform .3s
}
.teacher-card:hover .teacher-photo-wrap img {
  transform: scale(1.035)
}
.teacher-card-body {
  padding: .8rem .85rem .9rem
}
.teacher-position {
  display: block;
  margin: 0 0 .25rem;
  color: #157c74;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase
}
.teacher-card-body h3 {
  margin: 0 0 .45rem;
  color: #153d3b;
  font-size: .94rem;
  font-weight: 800;
  line-height: 1.3
}
.teacher-achievement {
  margin: 0;
  padding: .5rem .55rem;
  font-size: .71rem!important
}
.sample-data-note {
  padding: .65rem .8rem;
  border: 1px solid #f2ddbd;
  border-radius: .7rem;
  background: #fff8e9;
  color: #69563b;
  font-size: .78rem
}
.sample-badge {
  display: inline-block;
  margin-bottom: .35rem;
  padding: .18rem .42rem;
  border-radius: 99px;
  background: #fff0e9;
  color: #b94e38;
  font-size: .57rem;
  letter-spacing: .06em;
  font-weight: 850
}
.teacher-empty {
  padding: 2rem 1rem;
  border: 1px dashed #ccd9d1;
  border-radius: 1rem;
  text-align: center;
  background: #fff;
  color: #64736b
}
@media (min-width:1200px) {
  .teacher-photo-wrap {
    height: 195px
  }
}
@media (max-width:575.98px) {
  .principal-section {
    padding: 1.4rem 0
  }
  .principal-card {
    grid-template-columns: 104px 1fr;
    gap: .8rem;
    padding: .75rem;
    border-radius: .9rem
  }
  .principal-photo {
    height: 148px;
    border-radius: .65rem
  }
  .principal-copy h2 {
    font-size: 1.05rem;
    line-height: 1.2
  }
  .principal-copy .eyebrow {
    font-size: .55rem;
    letter-spacing: .07em
  }
  .principal-position {
    font-size: .7rem;
    margin-bottom: .35rem
  }
  .principal-copy p {
    font-size: .72rem;
    line-height: 1.45;
    margin-bottom: .45rem
  }
  .principal-achievement {
    padding: .42rem .48rem;
    font-size: .65rem!important
  }
  .principal-copy .btn {
    padding: .4rem .65rem;
    font-size: .69rem
  }
  .teacher-photo-wrap {
    height: clamp(95px,34vw,145px)
  }
  .teacher-card-body {
    padding: .62rem .6rem .7rem
  }
  .teacher-card-body h3 {
    font-size: .79rem
  }
  .teacher-position {
    font-size: .56rem
  }
  .teacher-achievement {
    font-size: .63rem!important;
    padding: .4rem
  }
  .sample-data-note {
    font-size: .7rem
  }
}
@media (prefers-reduced-motion:reduce) {
  .teacher-card,.teacher-photo-wrap img {
    transition: none
  }
}

/* Dedicated teacher profile page with a centered school principal feature. */
.profile-banner{background:radial-gradient(ellipse at 86% 12%,#328b83 0,transparent 42%),linear-gradient(115deg,#102d51,#174e89)}
.teacher-profile-page{background:linear-gradient(180deg,#f7faf8,#fff 42%)}
.principal-profile-section{padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.principal-profile-card{display:grid;grid-template-columns:minmax(220px,310px) minmax(0,1fr);align-items:center;gap:clamp(1.3rem,4vw,3rem);max-width:900px;padding:clamp(1rem,3vw,1.5rem);margin:0 auto;border:1px solid #e2eae4;border-radius:1.4rem;background:#fff;box-shadow:0 22px 60px rgba(25,57,40,.09)}
.principal-profile-photo{height:clamp(250px,34vw,350px);overflow:hidden;border-radius:1rem;background:#edf4ef}
.principal-profile-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.principal-profile-copy{padding:1rem 1.25rem 1rem 0}
.principal-profile-badge{display:inline-flex;align-items:center;padding:.45rem .75rem;border-radius:99px;background:#fff2d9;color:#946414;font-size:.75rem;font-weight:800}
.principal-profile-copy h3{margin:.9rem 0 .4rem;color:#153d3b;font-size:clamp(1.55rem,3vw,2.2rem);font-weight:850;letter-spacing:-.035em}
.principal-profile-copy .teacher-position{font-size:.75rem}
.teacher-profile-bio{margin:.8rem 0;color:#64736b;line-height:1.8}
.principal-profile-copy .teacher-achievement{padding:.8rem .9rem;border-radius:.75rem;background:#f7f8f2;color:#4f614e;font-size:.85rem!important;line-height:1.65}
.other-teachers-section{padding-top:1rem}
.other-teachers-section .section-heading{margin-bottom:1.8rem}
.teacher-empty>span{display:grid;place-items:center;width:54px;height:54px;margin:0 auto .8rem;border-radius:18px;background:#eaf3ec;color:#25814f;font-size:1.3rem}
@media(max-width:575.98px){.principal-profile-card{grid-template-columns:1fr;max-width:420px;gap:.3rem;padding:.8rem;border-radius:1.1rem}.principal-profile-photo{height:clamp(230px,74vw,320px)}.principal-profile-copy{padding:1rem .4rem .45rem}.principal-profile-copy h3{font-size:1.45rem}.teacher-profile-bio{font-size:.88rem;line-height:1.65}.principal-profile-copy .teacher-achievement{font-size:.78rem!important}}

/* PPDB four-step application wizard */
.ppdb-form-panel{overflow:hidden;padding:clamp(1.1rem,3vw,2.5rem)}
.ppdb-form-panel [hidden]{display:none!important}
.ppdb-paper-head{display:flex;align-items:center;justify-content:center;gap:1.2rem;padding:0 0 1.4rem;margin-bottom:1.5rem;border-bottom:1px solid #e7ece8;text-align:center}
.ppdb-school-mark{display:grid;place-items:center;flex:0 0 76px;width:76px;height:76px;border-radius:1rem;background:#f0f6ef;color:#18643d;font-weight:900;font-size:1.4rem;overflow:hidden}
.ppdb-school-mark img{width:100%;height:100%;object-fit:contain;padding:.4rem}
.ppdb-paper-head h2{margin:.25rem 0;font-size:clamp(.82rem,2vw,1.15rem);font-weight:850;color:#183c2b}
.ppdb-paper-head strong{font-size:.85rem;color:#b7791f}.ppdb-paper-head small{display:block;margin-top:.35rem;color:#637268;font-size:.76rem}
.bismillah{margin:0;color:#1c6340;font-size:1.3rem}
.ppdb-progress{position:relative;display:flex;justify-content:space-between;gap:.3rem;margin:2rem 0 1.4rem}
.ppdb-progress-line{position:absolute;top:18px;left:8%;right:8%;height:3px;background:#e8eee9}
.ppdb-progress-line span{display:block;width:0;height:100%;background:#25814f;transition:width .3s ease}
.ppdb-progress-step{z-index:1;display:flex;align-items:center;flex-direction:column;gap:.45rem;width:25%;color:#849188;text-align:center}
.ppdb-progress-step>span{display:grid;place-items:center;width:38px;height:38px;border:2px solid #dce5de;border-radius:50%;background:#fff;font-weight:800}
.ppdb-progress-step small{font-size:.72rem;font-weight:650}.ppdb-progress-step.active,.ppdb-progress-step.complete{color:#17663e}
.ppdb-progress-step.active>span,.ppdb-progress-step.complete>span{border-color:#25814f;background:#25814f;color:#fff}
.ppdb-step-status{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.1rem;margin-bottom:1.5rem;border-radius:.8rem;background:#f1f7f2;color:#254a35}
.ppdb-step-status strong{font-size:.95rem}.ppdb-step-status>span{font-size:.78rem;color:#64776a;text-align:right}
.ppdb-form-step{display:none;animation:ppdb-enter .24s ease both}.ppdb-form-step.active{display:block}
@keyframes ppdb-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.ppdb-form-panel .form-label{font-size:.85rem;font-weight:700;color:#34463a}
.ppdb-form-panel .form-control,.ppdb-form-panel .form-select{min-height:46px;border-color:#dfe7e1;border-radius:.65rem;font-size:.9rem}
.ppdb-form-panel textarea.form-control{min-height:95px}.ppdb-form-panel .form-control:focus,.ppdb-form-panel .form-select:focus{border-color:#58a779;box-shadow:0 0 0 .2rem rgba(37,129,79,.12)}
.ppdb-subheading{padding-top:.5rem;margin:0;color:#244b34;font-size:1rem;font-weight:800}
.parent-panel{padding:1.2rem;margin:1rem 0 1.25rem;border:1px solid #e4ebe5;border-radius:1rem;background:#fbfcfb}
.parent-panel-heading{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}.parent-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:.8rem;background:#eaf4ec;color:#26764b}
.parent-panel-heading h3{margin:0;font-size:1rem;font-weight:800;color:#21432f}.parent-panel-heading p,.step-help{margin:.25rem 0 1rem;color:#69776d;font-size:.84rem}
.guardian-choice{max-width:540px;padding:1rem;border:1px solid #e4ebe5;border-radius:.8rem;background:#fafcfb}
.guardian-choice label{display:block;margin-bottom:.6rem;font-weight:750;color:#34463a}
.ppdb-wizard-actions{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding-top:1.4rem;margin-top:1.5rem;border-top:1px solid #e8ede9}
.wizard-step-count{color:#77837b;font-size:.8rem;font-weight:650}.ppdb-wizard-actions .btn{min-width:155px}
.ppdb-review{display:grid;gap:.85rem}.review-card{padding:1rem;border:1px solid #e3eae4;border-radius:.85rem;background:#fff}
.review-card-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:.7rem;margin-bottom:.4rem;border-bottom:1px solid #edf1ed}
.review-card-heading h3{margin:0;font-size:.98rem;font-weight:800;color:#244b34;text-transform:capitalize}
.review-list{margin:0}.review-row{display:grid;grid-template-columns:minmax(130px, .7fr) 1.3fr;gap:1rem;padding:.46rem 0;border-bottom:1px solid #f1f3f1;font-size:.82rem}
.review-row:last-child{border-bottom:0}.review-row dt{color:#748077;font-weight:600}.review-row dd{margin:0;color:#293b2f;overflow-wrap:anywhere}
.ppdb-consent{display:flex;align-items:flex-start;gap:.65rem;padding:1rem;margin:1rem 0;border:1px solid #e1e9e2;border-radius:.8rem;background:#f8fbf8;font-size:.87rem;font-weight:650;color:#34463a}
.ppdb-consent input{width:19px;height:19px;flex:0 0 auto;margin-top:.1rem;accent-color:#25814f}.privacy-note{display:flex;align-items:center;gap:.65rem;color:#64756a;font-size:.8rem}.privacy-note i{color:#25814f}
.ppdb-success-section{padding:clamp(3rem,9vw,7rem) 0;background:linear-gradient(135deg,#f1f7f1,#f8faf7)}
.ppdb-success-card{max-width:680px;padding:clamp(1.5rem,5vw,3rem);margin:0 auto;border:1px solid #e1e9e2;border-radius:1.4rem;background:#fff;box-shadow:0 24px 70px rgba(29,67,43,.09);text-align:center}
.success-mark{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 1.2rem;border-radius:50%;background:#e9f6ed;color:#218047;font-size:1.6rem}
.ppdb-success-card .eyebrow{color:#27804e;font-size:.75rem;font-weight:850;letter-spacing:.1em}.ppdb-success-card h1{margin:.55rem 0;font-size:clamp(1.7rem,5vw,2.5rem);font-weight:850;color:#1b3d29}
.ppdb-success-card>p{color:#637168;line-height:1.7}.registration-number-label{margin-top:1.5rem;color:#69786e;font-size:.8rem}.registration-number{display:inline-block;padding:.65rem 1rem;margin:.4rem 0 0;border:1px dashed #83b395;border-radius:.7rem;background:#f4faf5;color:#1b6340;font-size:clamp(1.1rem,4vw,1.5rem);letter-spacing:.07em}
.registration-date{margin-top:.55rem;font-size:.8rem}.success-next-step{display:flex;align-items:center;gap:.7rem;padding:.9rem;margin:1.25rem 0;border-radius:.8rem;background:#f6f8f6;color:#526158;text-align:left;font-size:.85rem}.success-next-step i{color:#25814f}
@media(max-width:575.98px){.ppdb-paper-head{gap:.65rem;text-align:left;justify-content:flex-start}.ppdb-school-mark{flex-basis:52px;width:52px;height:52px;border-radius:.7rem}.ppdb-paper-head small{font-size:.65rem;line-height:1.4}.bismillah{font-size:1rem}.ppdb-progress-step small{max-width:70px;font-size:.61rem;line-height:1.25}.ppdb-step-status{align-items:flex-start;flex-direction:column;gap:.25rem}.ppdb-step-status>span{text-align:left}.parent-panel{padding:.9rem}.ppdb-wizard-actions{flex-wrap:wrap}.ppdb-wizard-actions .btn{min-width:0;flex:1}.wizard-step-count{order:3;width:100%;text-align:center}.review-row{grid-template-columns:1fr;gap:.12rem}.ppdb-review{gap:.65rem}}
@media(prefers-reduced-motion:reduce){.ppdb-form-step,.ppdb-progress-line span{animation:none;transition:none}}

/* SPMB info page: landscape poster cards with clean mobile stacking. */
.spmb-banner{background:linear-gradient(120deg,rgba(9,36,62,.91),rgba(16,88,115,.67)),url('../images/school-placeholder.svg') center/cover}
.spmb-intro{padding-top:clamp(2rem,5vw,4rem)!important}
.spmb-intro-card{padding:clamp(1.35rem,4vw,2.5rem);border:1px solid #e6ece8;border-radius:1.35rem;background:#fff;box-shadow:0 18px 55px rgba(27,57,43,.07)}
.spmb-intro-card h2,.spmb-section-heading h2{margin:.45rem 0 .8rem;color:#173b2a;font-size:clamp(1.55rem,3vw,2.35rem);font-weight:850;letter-spacing:-.035em}
.spmb-intro-card>.content-copy{max-width:850px;color:#647168;line-height:1.8}
.spmb-contact-strip{display:flex;align-items:center;gap:.8rem;padding:1rem;margin-top:1.5rem;border-radius:.9rem;background:#f3f8f3}
.spmb-contact-strip>span,.spmb-poster-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:.8rem;background:#e1f0e6;color:#25814f;font-size:1.15rem}
.spmb-contact-strip small,.spmb-contact-strip strong{display:block}.spmb-contact-strip small{color:#718078;font-size:.76rem}.spmb-contact-strip strong{color:#254b36}
.spmb-section-heading{margin:0 auto 1.5rem;text-align:center}.spmb-section-heading p{margin:0;color:#6f7c73}
.spmb-poster-card{display:block;padding:clamp(.55rem,1.2vw,1rem);border:1px solid #e4ebe5;border-radius:1.25rem;background:#fff;box-shadow:0 16px 48px rgba(25,57,40,.06)}
.spmb-poster-copy h3{margin:.9rem 0 .45rem;color:#1a402c;font-size:1.3rem;font-weight:800}.spmb-poster-copy p{margin:0;color:#68766d;line-height:1.7}.spmb-poster-copy .content-copy{color:#647168;line-height:1.7}
.spmb-poster-section,.spmb-fees-section{width:100%}
.spmb-poster-frame{display:grid;place-items:center;overflow:hidden;width:100%;min-width:0;aspect-ratio:16/5;border-radius:0;background:#f2f6f2}
.spmb-poster-landscape{display:block;width:100%;height:100%;aspect-ratio:16/5;object-fit:contain;background:#f2f6f2}
.spmb-poster-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.45rem;padding:1rem;text-align:center;color:#6c7b70}.spmb-poster-empty i{color:#8bac92;font-size:2rem}.spmb-poster-empty strong{color:#355944}.spmb-poster-empty span{font-size:.82rem}
.spmb-fees-section{background:#f5f8f5}.spmb-fees-card{grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr)}
.spmb-final-cta{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(1.2rem,3vw,2rem);margin-top:2rem;border-radius:1.15rem;background:#173b2a;color:#fff}.spmb-final-cta h2{margin:.35rem 0;font-size:clamp(1.25rem,2.4vw,1.8rem);font-weight:800}.spmb-final-cta p{margin:0;color:#d0ddd3}.spmb-final-cta .eyebrow{color:#b1d9bb}.spmb-form-banner{padding-bottom:2.5rem}
.spmb-admin-poster-preview{display:block;width:min(100%,480px);aspect-ratio:16/5;object-fit:contain;border:1px solid #e2e9e3;border-radius:.75rem;background:#f4f7f4}
.spmb-carousel-section{width:100%;background:#f2f6f2}
.spmb-info-carousel{width:100%;overflow:hidden}
.spmb-info-carousel .carousel-item{background:#f2f6f2}
.spmb-info-carousel .carousel-indicators{margin-bottom:.65rem}
.spmb-info-carousel .carousel-indicators [data-bs-target]{width:9px;height:9px;border:0;border-radius:50%;background-color:#fff;opacity:.65}
.spmb-info-carousel .carousel-indicators .active{width:24px;border-radius:99px;background-color:#f3b62d;opacity:1}
.spmb-info-carousel .carousel-control-prev,.spmb-info-carousel .carousel-control-next{width:9%;opacity:1}
.spmb-info-carousel .carousel-control-prev-icon,.spmb-info-carousel .carousel-control-next-icon{width:2.65rem;height:2.65rem;border-radius:50%;background-color:#173b2ab8;background-size:46%;box-shadow:0 4px 16px #0002}
.spmb-carousel-label{padding:.85rem 1rem;background:#173b2a;color:#fff;text-align:center;font-size:.86rem;font-weight:800;letter-spacing:.04em}
.spmb-fees-pdf-action{display:flex;justify-content:center;padding-block:1.5rem 2rem}
.spmb-fees-pdf-action .btn{border-radius:999px;padding:.85rem 1.5rem;font-weight:750;box-shadow:0 10px 24px rgba(21,86,165,.18)}
@media(max-width:767.98px){.spmb-poster-card,.spmb-fees-card{grid-template-columns:1fr}.spmb-poster-copy{display:grid;grid-template-columns:44px 1fr;column-gap:.8rem;align-items:center}.spmb-poster-copy h3{margin:.1rem 0}.spmb-poster-copy p,.spmb-poster-copy>.content-copy{grid-column:2}.spmb-poster-icon{grid-row:1/3}.spmb-final-cta{align-items:flex-start;flex-direction:column}.spmb-final-cta .btn{width:100%}.spmb-contact-strip{flex-wrap:wrap}.spmb-contact-strip .btn{margin-left:0!important}}
@media(max-width:575.98px){.spmb-info-carousel .carousel-control-prev,.spmb-info-carousel .carousel-control-next{width:13%}.spmb-info-carousel .carousel-control-prev-icon,.spmb-info-carousel .carousel-control-next-icon{width:2.2rem;height:2.2rem}.spmb-info-carousel .carousel-indicators{margin-bottom:.55rem}.spmb-carousel-label{padding:.7rem;font-size:.78rem}}

/* SPMB information page refresh */
.spmb-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(1.25rem,3vw,2.5rem) 0 clamp(2.25rem,5vw,4rem);background:radial-gradient(ellipse at 78% 10%,rgba(94,157,103,.22),transparent 34%),linear-gradient(128deg,#102f25 0%,#174a34 57%,#246346 100%);color:#fff}
.spmb-hero:after{position:absolute;z-index:-1;right:-9rem;bottom:-20rem;width:min(65vw,52rem);height:min(65vw,52rem);border:1px solid rgba(255,255,255,.09);border-radius:50%;content:"";box-shadow:0 0 0 3rem rgba(255,255,255,.025),0 0 0 7rem rgba(255,255,255,.018)}
.spmb-hero-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(1px);pointer-events:none}.spmb-hero-orb-one{top:7rem;right:30%;width:1rem;height:1rem;background:#f1bb43;box-shadow:0 0 45px 18px rgba(241,187,67,.16)}.spmb-hero-orb-two{top:2rem;right:11%;width:4rem;height:4rem;border:1px solid rgba(255,255,255,.1)}
.spmb-breadcrumb{margin-bottom:clamp(2rem,5vw,4.4rem);--bs-breadcrumb-divider-color:#9ab6a1}.spmb-breadcrumb .breadcrumb-item,.spmb-breadcrumb .breadcrumb-item a{color:#bad0bf;text-decoration:none}.spmb-breadcrumb .breadcrumb-item.active{color:#fff}.spmb-breadcrumb .breadcrumb-item+.breadcrumb-item:before{color:#88a493}
.spmb-hero-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);align-items:center;gap:clamp(2rem,7vw,7rem)}.spmb-hero-copy{max-width:790px}.spmb-kicker,.spmb-section-kicker{display:inline-flex;align-items:center;gap:.55rem;color:#e8bd5d;font-size:.72rem;font-weight:850;letter-spacing:.15em}.spmb-kicker{padding:.62rem .85rem;border:1px solid rgba(255,255,255,.18);border-radius:99px;background:rgba(255,255,255,.07)}.spmb-hero-copy h1{max-width:760px;margin:1.3rem 0 1rem;font-size:clamp(2.55rem,6.5vw,5.4rem);font-weight:850;line-height:1.02;letter-spacing:-.065em}.spmb-hero-copy h1 span{display:block;color:#f2c75e}.spmb-hero-lead{max-width:610px;margin:0;color:#d1e0d5;font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.8}.spmb-hero-actions{display:flex;align-items:center;gap:1.35rem;flex-wrap:wrap;margin-top:1.8rem}.spmb-primary-cta{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;padding:.95rem 1.35rem;border:0;border-radius:999px;background:#f0bd45;color:#183b2b;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.17);transition:transform .2s,box-shadow .2s,background .2s}.spmb-primary-cta:hover,.spmb-primary-cta:focus{transform:translateY(-2px);background:#ffd36c;color:#183b2b;box-shadow:0 16px 34px rgba(0,0,0,.23)}.spmb-text-link{color:#ecf4ed;font-weight:700;text-decoration:none}.spmb-text-link i{margin-left:.35rem;color:#f0bd45;font-size:.78rem}.spmb-hero-meta{display:flex;gap:1.3rem;flex-wrap:wrap;margin-top:2.5rem;color:#bfd2c3;font-size:.82rem}.spmb-hero-meta span{display:flex;align-items:center;gap:.5rem}.spmb-hero-meta i{color:#efc556}
.spmb-help-card{position:relative;padding:1.4rem;border:1px solid rgba(255,255,255,.16);border-radius:1.25rem;background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.055));box-shadow:0 26px 60px rgba(4,24,15,.2);backdrop-filter:blur(12px)}.spmb-help-icon{display:grid;place-items:center;width:2.9rem;height:2.9rem;margin-bottom:1.5rem;border-radius:.9rem;background:#f1c456;color:#193b2a;font-size:1.2rem}.spmb-help-label{color:#e9c45c;font-size:.65rem;font-weight:850;letter-spacing:.16em}.spmb-help-card h2{margin:.45rem 0;color:#fff;font-size:1.35rem;font-weight:800;letter-spacing:-.03em}.spmb-help-card p{margin:0 0 1.15rem;color:#c7d8cc;font-size:.9rem;line-height:1.6}.spmb-help-link{display:flex;align-items:center;gap:.65rem;padding:.8rem .85rem;border:1px solid rgba(255,255,255,.2);border-radius:.8rem;color:#fff;font-size:.85rem;font-weight:750;text-decoration:none}.spmb-help-link>i:first-child{color:#8fdfa5;font-size:1.1rem}.spmb-help-link:hover{background:rgba(255,255,255,.1);color:#fff}.spmb-help-link.is-muted{color:#d6e4d9}.spmb-hero-bottom{display:flex;align-items:center;gap:.9rem;margin-top:clamp(2.6rem,6vw,5.3rem);color:#b6cbbb;font-size:.65rem;font-weight:750;letter-spacing:.1em}.spmb-hero-bottom>span:last-child{font-size:.74rem;font-weight:500;letter-spacing:0}.spmb-hero-line{width:3rem;height:1px;background:#eac04f}
.spmb-quick-guide{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:-1.25rem}.spmb-guide-card{position:relative;display:flex;align-items:center;gap:.95rem;min-width:0;padding:1.15rem 1rem;border:1px solid #e7ede8;border-radius:1rem;background:#fff;box-shadow:0 14px 36px rgba(22,55,36,.08)}.spmb-guide-number{position:absolute;top:.55rem;right:.7rem;color:#e5ebe6;font-size:.7rem;font-weight:850;letter-spacing:.08em}.spmb-guide-icon{display:grid;place-items:center;flex:0 0 2.8rem;width:2.8rem;height:2.8rem;border-radius:.9rem;background:#eef6ee;color:#287448;font-size:1.05rem}.spmb-guide-card h2{margin:0 0 .22rem;color:#1a3f2b;font-size:.96rem;font-weight:800}.spmb-guide-card p{margin:0;color:#738077;font-size:.79rem;line-height:1.5}
.spmb-information-section{padding:clamp(3.5rem,7vw,6rem) 0 0}.spmb-information-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}.spmb-information-heading h2{margin:.35rem 0;color:#183b29;font-size:clamp(1.85rem,4vw,3rem);font-weight:850;letter-spacing:-.05em}.spmb-information-heading p{margin:0;color:#728077}.spmb-slider-hint{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;border:1px solid #e6ece7;border-radius:99px;color:#617568;font-size:.67rem;font-weight:800;letter-spacing:.08em}.spmb-slider-hint i{color:#378153}.spmb-carousel-section{background:#f1f5f1}.spmb-info-carousel{position:relative;background:#eaf0ea}.spmb-info-carousel .carousel-inner,.spmb-info-carousel .carousel-item{overflow:hidden}.spmb-poster-frame{aspect-ratio:16/5;border-radius:0;background:#eaf0ea}.spmb-poster-landscape{aspect-ratio:16/5;object-fit:contain;background:#eaf0ea}.spmb-info-carousel .carousel-indicators{bottom:.8rem;margin-bottom:0}.spmb-info-carousel .carousel-indicators [data-bs-target]{width:8px;height:8px;margin:0 .3rem;border:0;border-radius:50%;background:#fff;opacity:.7;box-shadow:0 1px 5px #0005}.spmb-info-carousel .carousel-indicators .active{width:25px;border-radius:99px;background:#f0bd45;opacity:1}.spmb-info-carousel .carousel-control-prev,.spmb-info-carousel .carousel-control-next{width:10%}.spmb-carousel-arrow{display:grid;place-items:center;width:2.8rem;height:2.8rem;border:1px solid #ffffff55;border-radius:50%;background:#153a2ec9;color:#fff;box-shadow:0 5px 20px #0003;transition:transform .2s,background .2s}.spmb-info-carousel .carousel-control-prev:hover .spmb-carousel-arrow,.spmb-info-carousel .carousel-control-next:hover .spmb-carousel-arrow{transform:scale(1.08);background:#174e36}.spmb-poster-empty{min-height:100%;color:#718077}.spmb-empty-icon{display:grid;place-items:center;width:3.5rem;height:3.5rem;margin-bottom:.35rem;border-radius:1.2rem;background:#fff;color:#559065;font-size:1.25rem;box-shadow:0 10px 26px #173b2a12}.spmb-poster-empty strong{color:#244d35}.spmb-slide-caption{position:absolute;right:clamp(1rem,5vw,5rem);bottom:1rem;z-index:4;display:flex;align-items:center;gap:.7rem;padding:.45rem .55rem .45rem .8rem;border:1px solid #ffffff40;border-radius:99px;background:#143728d9;color:#d6e5d8;font-size:.62rem;font-weight:800;letter-spacing:.08em;backdrop-filter:blur(8px)}.spmb-slide-caption a{padding:.4rem .65rem;border-radius:99px;background:#f0bd45;color:#173b2a;font-size:.72rem;letter-spacing:0;text-decoration:none}.spmb-slide-caption a i{margin-left:.3rem}
.spmb-final-wrap{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(3rem,6vw,5rem)}.spmb-final-cta{position:relative;overflow:hidden;padding:clamp(1.4rem,4vw,2.6rem);border-radius:1.4rem;background:linear-gradient(120deg,#173b2a,#286448);box-shadow:0 20px 50px rgba(21,66,41,.13)}.spmb-final-cta:after{position:absolute;top:-6rem;right:12rem;width:17rem;height:17rem;border:1px solid #ffffff1a;border-radius:50%;content:"";box-shadow:0 0 0 2rem #ffffff08,0 0 0 4rem #ffffff06;pointer-events:none}.spmb-final-cta>div,.spmb-final-cta>.btn{position:relative;z-index:1}.spmb-final-cta h2{margin:.45rem 0;color:#fff;font-size:clamp(1.35rem,3vw,2rem);font-weight:850;letter-spacing:-.04em}.spmb-final-cta p{color:#d0ddd3}.spmb-pdf-row{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;margin-top:1rem;border:1px solid #e5ece6;border-radius:1rem;background:#fff}.spmb-pdf-icon{display:grid;place-items:center;flex:0 0 2.8rem;width:2.8rem;height:2.8rem;border-radius:.85rem;background:#fff0ef;color:#c84943;font-size:1.15rem}.spmb-pdf-row>div{display:grid;gap:.2rem}.spmb-pdf-row strong{color:#244331;font-size:.9rem}.spmb-pdf-row small{color:#748077;font-size:.78rem}.spmb-pdf-button{margin-left:auto;border:1px solid #dce7de;border-radius:99px;color:#28553a;font-size:.8rem;font-weight:800}.spmb-pdf-button:hover{border-color:#2b7045;background:#edf6ef;color:#1b4c2e}
@media(max-width:767.98px){.spmb-hero{padding-bottom:2.75rem}.spmb-hero-grid{grid-template-columns:1fr;gap:2rem}.spmb-help-card{max-width:500px}.spmb-hero-copy h1{font-size:clamp(2.55rem,12vw,4.5rem)}.spmb-hero-meta{gap:.75rem 1rem;margin-top:1.7rem}.spmb-hero-bottom{margin-top:2rem}.spmb-quick-guide{grid-template-columns:1fr;margin-top:-.8rem}.spmb-guide-card{padding:.9rem}.spmb-information-heading{align-items:flex-start;flex-direction:column}.spmb-slider-hint{align-self:flex-start}.spmb-poster-frame,.spmb-poster-landscape{aspect-ratio:16/5}.spmb-carousel-arrow{width:2.25rem;height:2.25rem;font-size:.85rem}.spmb-slide-caption{right:.65rem;bottom:.65rem;font-size:.55rem}.spmb-slide-caption a{font-size:.65rem}.spmb-final-cta{align-items:flex-start}.spmb-final-cta .btn{width:100%}}
@media(max-width:420px){.spmb-breadcrumb{margin-bottom:1.6rem}.spmb-kicker{font-size:.61rem}.spmb-hero-actions{align-items:flex-start;flex-direction:column;gap:1rem}.spmb-hero-meta{flex-direction:column}.spmb-hero-bottom>span:last-child{font-size:.67rem}.spmb-pdf-row{align-items:flex-start;flex-wrap:wrap}.spmb-pdf-row>div{flex:1}.spmb-pdf-button{width:100%;margin-left:0;text-align:center}}

/* Hero carousel banner ratio */
#schoolHero .carousel-inner{height:auto!important}
#schoolHero .carousel-item{aspect-ratio:16/5;min-height:0}
#schoolHero .carousel-item .hero{width:100%;height:100%;min-height:0}
#schoolHero .hero-inner{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:flex-end;padding:2rem 1.25rem clamp(.75rem,1.5vw,1.4rem)}
#schoolHero .hero-actions{margin-top:auto}
@media(max-width:991.98px){#schoolHero .carousel-item{aspect-ratio:auto;min-height:clamp(430px,65vw,560px)}#schoolHero .carousel-item .hero{height:100%;min-height:inherit}}

/* Compact public navigation */
.navbar{min-height:64px;padding-top:.2rem;padding-bottom:.2rem}
.site-brand-logo,.nav-emblem{width:36px;height:36px}
.navbar .nav-link{padding:.45rem .65rem!important}
.navbar .btn{padding:.45rem 1rem}
@media(max-width:767.98px){.navbar{min-height:58px}.site-brand-logo,.nav-emblem{width:34px;height:34px}}

/* Beri jarak lebih lega antara hero beranda dan kartu statistik. */
.stats-wrap{margin-top:-1rem}

/* Foto profil guru dan kepala sekolah memakai crop potret 3:4. */
.teacher-photo-wrap,.principal-profile-photo{height:auto;aspect-ratio:3/4}
.teacher-photo-wrap img,.principal-profile-photo img{width:100%;height:100%;object-fit:cover}

/* Desktop carousel artwork and actions share the same hero canvas. */
#schoolHero .carousel-item .hero{position:relative;display:flex;align-items:stretch;justify-content:center;overflow:hidden}
#schoolHero .hero-slide-image{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
#schoolHero .hero-inner{position:absolute;z-index:1;inset:auto 0 1rem;display:flex;align-items:center;justify-content:center;width:100%;height:auto;padding:0 1.25rem}
#schoolHero .hero-actions{display:flex;visibility:visible;opacity:1;justify-content:center;margin:0}

/* Keep the carousel actions inside the hero on narrow phones. */
@media(max-width:575.98px){
  #schoolHero .carousel-item{height:auto;min-height:0;aspect-ratio:auto}
  #schoolHero .carousel-item .hero{position:relative;display:block;height:auto;min-height:0;aspect-ratio:auto;overflow:hidden;background:#102b4d;background-image:none}
  #schoolHero .carousel-item .hero:before{display:none}
  #schoolHero .hero-slide-image{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:#f4f6f7}
  #schoolHero .hero-no-image{min-height:260px}
  #schoolHero .hero-inner{display:none}
}

/* SPMB payment instructions and required proof upload */
.spmb-payment-card {
    padding: clamp(1.1rem, 3vw, 1.7rem);
    margin: 1.35rem 0 1.5rem;
    border: 1px solid #dce9df;
    border-radius: 1.1rem;
    background: linear-gradient(145deg, #f5faf5 0%, #fff 70%);
    box-shadow: 0 14px 38px rgba(25, 70, 42, .07);
}
.spmb-payment-heading { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.2rem; }
.spmb-payment-icon { display: grid; place-items: center; flex: 0 0 2.9rem; width: 2.9rem; height: 2.9rem; border-radius: .9rem; background: #e4f2e7; color: #267346; font-size: 1.1rem; }
.spmb-payment-eyebrow { color: #53805d; font-size: .64rem; font-weight: 850; letter-spacing: .12em; }
.spmb-payment-heading h3 { margin: .15rem 0 0; color: #1c402b; font-size: 1.08rem; font-weight: 800; }
.spmb-payment-summary { display: grid; grid-template-columns: minmax(190px, .75fr) minmax(0, 1.5fr); gap: .85rem; }
.spmb-payment-price, .spmb-payment-account { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 1rem 1.1rem; border-radius: .9rem; }
.spmb-payment-price { background: linear-gradient(145deg, #174c32, #28764a); color: #fff; }
.spmb-payment-price span, .spmb-payment-price small { color: #d4e7d8; font-size: .77rem; }
.spmb-payment-price strong { margin: .3rem 0; color: #ffdc78; font-size: clamp(1.7rem, 4vw, 2.25rem); font-weight: 900; letter-spacing: -.045em; line-height: 1.1; }
.spmb-payment-account { position: relative; border: 1px solid #e2ebe3; background: #fff; }
.spmb-payment-bank { display: flex; align-items: center; gap: .45rem; margin-bottom: .55rem; color: #42604b; font-size: .77rem; font-weight: 700; }
.spmb-payment-bank i { color: #32804d; }
.spmb-payment-bank b { padding: .18rem .4rem; border-radius: .3rem; background: #e9f5eb; color: #28653d; font-size: .65rem; letter-spacing: .06em; }
.spmb-account-label { color: #758178; font-size: .72rem; }
.spmb-account-number { color: #174b31; font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 850; letter-spacing: .07em; font-variant-numeric: tabular-nums; }
.spmb-account-name { color: #526359; font-size: .82rem; }
.spmb-payment-note { display: flex; align-items: flex-start; gap: .55rem; margin: 1rem 0; color: #68776c; font-size: .82rem; line-height: 1.55; }
.spmb-payment-note i { margin-top: .16rem; color: #398153; }
.spmb-payment-note span { flex: 1; }
.spmb-receipt-upload { padding: 1rem; border: 1px dashed #a9cbb0; border-radius: .85rem; background: #f8fcf8; }
.spmb-receipt-label { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.spmb-receipt-label .form-label { margin-bottom: .55rem; color: #284a33; font-size: .86rem; font-weight: 800; }
.spmb-required-badge { padding: .2rem .55rem; margin-bottom: .45rem; border-radius: 99px; background: #fff1e8; color: #a94d27; font-size: .66rem; font-weight: 800; }
.spmb-receipt-upload .form-control { min-height: 48px; padding: .55rem; border-color: #d7e5d9; background: #fff; }
.spmb-receipt-upload .form-control::file-selector-button { min-height: 34px; margin: -.1rem .75rem -.1rem -.1rem; border: 0; border-radius: .45rem; background: #e9f4eb; color: #28663d; font-weight: 750; }
.spmb-receipt-upload .form-text { display: block; margin-top: .5rem; color: #718077; font-size: .75rem; }
.spmb-receipt-upload .invalid-feedback { margin-top: .35rem; }
@media (max-width: 575.98px) {
    .spmb-payment-card { padding: 1rem; border-radius: .9rem; }
    .spmb-payment-summary { grid-template-columns: 1fr; }
    .spmb-payment-price, .spmb-payment-account { padding: .9rem; }
    .spmb-payment-price strong { font-size: 1.8rem; }
    .spmb-account-number { font-size: 1.45rem; }
}