/* ===========================================
   TOKENS
=========================================== */
:root{
  --paper: #F8F9F4;
  --paper-line: #E4E7DC;
  --ink: #16233F;
  --green: #1F6F54;
  --green-dark: #164F3C;
  --red: #D6483F;
  --yellow: #F4B942;
  --graphite: #565C66;
  --white: #FFFFFF;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-hand: 'Caveat', cursive;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(22,35,63,0.08);
  --container: 1140px;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

h1,h2,h3,h4{ font-family: var(--font-display); line-height:1.15; }
h2{ font-size: clamp(1.8rem, 3vw, 2.6rem); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior:auto !important; }
}

/* ===========================================
   PROGRESS RIBBON
=========================================== */
.progress-ribbon{
  position: fixed; top:0; left:0; width:100%; height:4px;
  background: transparent; z-index: 1100;
}
.progress-ribbon__fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--red), var(--yellow), var(--green));
  transition: width 0.1s linear;
}

/* ===========================================
   BUTTONS
=========================================== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 13px 26px; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem;
  border: 2px solid transparent; cursor:pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-family: var(--font-body);
}
.btn--primary{ background: var(--ink); color: var(--white); }
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22,35,63,0.25); }
.btn--accent{ background: var(--red); color: var(--white); }
.btn--accent:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(214,72,63,0.3); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color: var(--white); }

/* ===========================================
   NAVBAR
=========================================== */
.navbar{
  position: fixed; top:4px; left:0; width:100%; z-index:1000;
  background: rgba(248,249,244,0.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--paper-line);
}
.navbar__inner{
  max-width: var(--container); margin:0 auto; padding: 14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand__mark{
  width:42px; height:42px; border-radius: 10px;
  background: var(--green); color: var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:1rem;
  transform: rotate(-4deg); flex-shrink:0;
}
.brand__text{ font-family: var(--font-display); font-weight:600; font-size:0.85rem; line-height:1.2; }

.nav-links{ display:flex; gap: 26px; }
.nav-link{ font-size:0.92rem; font-weight:600; color: var(--graphite); position:relative; padding: 4px 0; }
.nav-link:hover, .nav-link.active{ color: var(--ink); }
.nav-link.active::after{
  content:''; position:absolute; left:0; bottom:-4px; width:100%; height:2px;
  background: var(--red); border-radius:2px;
}
.navbar__cta{ padding: 10px 20px; font-size: 0.85rem; white-space:nowrap; }

.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.hamburger span{ width:24px; height:2px; background: var(--ink); border-radius:2px; }

@media (max-width: 900px){
  .nav-links{
    position: fixed; top: 68px; right: -100%; height: calc(100vh - 68px);
    width: 260px; background: var(--white); flex-direction:column;
    padding: 32px 24px; gap: 22px; transition: right 0.3s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,0.08);
  }
  .nav-links.open{ right:0; }
  .navbar__cta{ display:none; }
  .hamburger{ display:flex; }
}

/* ===========================================
   HERO
=========================================== */
.hero{
  position:relative; padding: 150px 0 90px;
  overflow:hidden;
}
.hero__lines{
  position:absolute; inset:0; z-index:0;
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent 38px, var(--paper-line) 39px
  );
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  opacity: 0.6;
}
.hero__inner{
  position:relative; z-index:1;
  max-width: var(--container); margin:0 auto; padding: 0 24px;
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items:center;
}
.tag-sticker{
  display:inline-block; background: var(--yellow); color: var(--ink);
  font-weight:700; font-size:0.8rem; padding: 6px 14px; border-radius:6px;
  transform: rotate(-2deg); margin-bottom: 20px;
}
.hero__title{
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 700; margin-bottom: 18px;
}
.ink-underline{
  position:relative; color: var(--green-dark);
}
.ink-underline::after{
  content:''; position:absolute; left:0; bottom:2px; width:100%; height:10px;
  background: rgba(31,111,84,0.18); z-index:-1; border-radius: 4px;
}
.hero__note-handwritten{
  font-family: var(--font-hand); font-size: 1.4rem; color: var(--red);
  margin-bottom: 18px; transform: rotate(-1deg);
}
.hero__desc{ color: var(--graphite); max-width: 480px; margin-bottom: 30px; font-size: 1.02rem; }
.hero__actions{ display:flex; gap: 16px; flex-wrap:wrap; }

.hero__visual{ position:relative; }
.notebook-card{
  position:relative; background: var(--white); padding: 18px 18px 18px 44px;
  border-radius: var(--radius); box-shadow: var(--shadow); transform: rotate(2deg);
}
.notebook-card img{ border-radius: 8px; }
.notebook-card__spiral{
  position:absolute; left:14px; top:20px; bottom:20px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.notebook-card__spiral span{
  width:16px; height:16px; border-radius:50%;
  background: var(--paper); border: 3px solid var(--paper-line);
}
.washi-tape{ position:absolute; width:70px; height:26px; opacity:0.85; border-radius:2px; }
.washi-tape--1{ background: var(--yellow); top:-12px; left:60px; transform: rotate(-8deg); }
.washi-tape--2{ background: var(--red); bottom:-12px; right:40px; transform: rotate(6deg); }

.stat-pin{
  position:absolute; background: var(--ink); color: var(--white);
  padding: 14px 20px; border-radius: 12px; text-align:center;
  box-shadow: var(--shadow);
}
.stat-pin strong{ display:block; font-family: var(--font-display); font-size: 1.5rem; }
.stat-pin span{ font-size: 0.72rem; opacity:0.8; }
.stat-pin--1{ top: -18px; right: -10px; transform: rotate(-4deg); }
.stat-pin--2{ bottom: -18px; left: -20px; background: var(--green); transform: rotate(3deg); }

@media (max-width: 900px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero{ padding-top: 120px; }
  .stat-pin{ position:static; display:inline-block; margin: 16px 10px 0 0; transform:none !important; }
  .hero__visual{ display:flex; flex-direction:column; }
}

/* ===========================================
   SECTIONS (general)
=========================================== */
.section{ padding: 90px 0; position:relative; }
.section--tint{ background: #F1F0E6; }
.section--ruled{
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 38px, var(--paper-line) 39px);
}
.section-head{ max-width: 640px; margin-bottom: 50px; position:relative; }
.eyebrow{
  display:inline-block; font-family: var(--font-hand); font-size: 1.3rem;
  color: var(--red); margin-bottom: 6px;
}
.section-head p{ color: var(--graphite); margin-top: 12px; }

.margin-note{
  font-family: var(--font-hand); font-size: 1.15rem; color: var(--green-dark);
  position:absolute; top: 6px;
}
.margin-note--left{ left: -190px; transform: rotate(-4deg); width:160px; text-align:right; }
@media (max-width: 1240px){ .margin-note{ display:none; } }

/* ===========================================
   ABOUT
=========================================== */
.about-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 60px;
}
.about-card{
  background: var(--white); border-radius: var(--radius); padding: 28px;
  box-shadow: var(--shadow);
}
.about-card h3{ margin-bottom: 10px; color: var(--green-dark); }
.about-card p{ color: var(--graphite); font-size: 0.95rem; }
.about-card--sticky{ background: var(--yellow); display:flex; align-items:center; transform: rotate(-2deg); }
.sticky-note{ font-family: var(--font-hand); font-size: 1.3rem; color: var(--ink); line-height:1.3; }

.stats-row{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  border-top: 2px dashed var(--paper-line); padding-top: 36px;
}
.stat-block{ text-align:center; }
.stat-block strong{ display:block; font-family: var(--font-display); font-size: 2.4rem; color: var(--green-dark); }
.stat-block span{ font-size: 0.85rem; color: var(--graphite); }

@media (max-width: 800px){
  .about-grid{ grid-template-columns: 1fr; }
  .stats-row{ grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
}

/* ===========================================
   PROGRAM
=========================================== */
.program-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.program-card{
  background: var(--white); border-radius: var(--radius); padding: 32px 28px;
  box-shadow: var(--shadow); position:relative; overflow:hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-top: 4px solid var(--green);
}
.program-card:nth-child(2){ border-top-color: var(--red); }
.program-card:nth-child(3){ border-top-color: var(--yellow); }
.program-card:hover{ transform: translateY(-8px); box-shadow: 0 18px 40px rgba(22,35,63,0.14); }
.program-card__index{
  font-family: var(--font-display); font-weight:700; font-size: 0.85rem;
  color: var(--graphite); letter-spacing: 1px; margin-bottom: 12px;
}
.program-card h3{ margin-bottom: 10px; }
.program-card p{ color: var(--graphite); font-size: 0.92rem; margin-bottom: 16px; }
.program-card ul li{
  font-size: 0.88rem; padding-left: 18px; position:relative; margin-bottom: 6px; color: var(--ink);
}
.program-card ul li::before{ content:'—'; position:absolute; left:0; color: var(--red); }

@media (max-width: 900px){ .program-grid{ grid-template-columns: 1fr; } }

/* ===========================================
   KEGIATAN / GALLERY
=========================================== */
.filter-row{ display:flex; gap: 12px; margin-bottom: 34px; flex-wrap:wrap; }
.filter-btn{
  padding: 9px 18px; border-radius: 999px; border: 2px solid var(--ink);
  background: transparent; font-weight:700; font-size:0.85rem; cursor:pointer;
  transition: all 0.2s ease;
}
.filter-btn.active, .filter-btn:hover{ background: var(--ink); color: var(--white); }

.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gallery-item{
  position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio: 4/3;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery-item.hidden{ display:none; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform 0.4s ease; }
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item figcaption{
  position:absolute; inset:auto 0 0 0; padding: 16px;
  background: linear-gradient(to top, rgba(22,35,63,0.9), transparent);
  color: var(--white); transform: translateY(60%); transition: transform 0.3s ease;
}
.gallery-item:hover figcaption{ transform: translateY(0); }
.gallery-item figcaption h4{ font-size: 1rem; margin-bottom: 4px; }
.gallery-item figcaption p{ font-size: 0.78rem; opacity: 0.9; }

@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .gallery-grid{ grid-template-columns: 1fr; } }

/* ===========================================
   PRESTASI / MARQUEE
=========================================== */
.marquee{ overflow:hidden; padding: 10px 0; }
.marquee__track{
  display:flex; gap: 16px; width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state: paused; }
.badge-pill{
  background: var(--white); border: 2px solid var(--paper-line);
  padding: 12px 22px; border-radius: 999px; font-weight:600; font-size: 0.9rem;
  white-space:nowrap; box-shadow: var(--shadow);
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ===========================================
   BERITA
=========================================== */
.news-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.news-card{
  background: var(--white); border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow); position:relative; transition: transform 0.25s ease;
}
.news-card:hover{ transform: translateY(-6px); }
.news-card img{ height: 180px; object-fit:cover; width:100%; }
.news-card__body{ padding: 20px; }
.news-card__body h4{ font-size: 1.05rem; margin-bottom: 8px; }
.news-card__body p{ font-size: 0.88rem; color: var(--graphite); }
.sticky-date{
  position:absolute; top:14px; right:14px; z-index:2;
  background: var(--red); color: var(--white); font-family: var(--font-display);
  font-weight:700; font-size:0.75rem; text-align:center; line-height:1.3;
  padding: 6px 10px; border-radius: 8px; transform: rotate(4deg);
}
@media (max-width: 900px){ .news-grid{ grid-template-columns: 1fr; } }

/* ===========================================
   TESTIMONI
=========================================== */
.testimonial{ display:flex; align-items:center; gap: 24px; max-width: 720px; margin: 0 auto; }
.testi-track{
  display:flex; overflow:hidden; flex:1;
}
.testi-slide{
  min-width:100%; background: var(--white); border-radius: var(--radius);
  padding: 40px; box-shadow: var(--shadow); text-align:center;
  transition: transform 0.4s ease;
}
.testi-slide p{ font-family: var(--font-hand); font-size: 1.5rem; color: var(--ink); margin-bottom: 16px; line-height:1.4; }
.testi-slide cite{ font-style:normal; font-size: 0.85rem; color: var(--graphite); font-weight:600; }
.testi-nav{
  width:44px; height:44px; border-radius:50%; border: 2px solid var(--ink);
  background: var(--white); font-size: 1.1rem; cursor:pointer; flex-shrink:0;
  transition: all 0.2s ease;
}
.testi-nav:hover{ background: var(--ink); color: var(--white); }
.testi-dots{ display:flex; justify-content:center; gap: 8px; margin-top: 20px; }
.testi-dot{ width:8px; height:8px; border-radius:50%; background: var(--paper-line); cursor:pointer; border:none; }
.testi-dot.active{ background: var(--red); width:24px; border-radius:4px; transition: all 0.3s ease; }

@media (max-width: 600px){ .testimonial{ flex-direction:column; } .testi-slide{ padding: 26px; } }

/* ===========================================
   PPDB STEPS
=========================================== */
.steps{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step;
}
.step{
  background: var(--white); border-radius: var(--radius); padding: 28px 22px;
  box-shadow: var(--shadow); position:relative;
}
.step__num{
  font-family: var(--font-display); font-size: 2rem; font-weight:700;
  color: var(--paper-line); -webkit-text-stroke: 1px var(--green); display:block; margin-bottom: 10px;
}
.step h4{ margin-bottom: 8px; font-size: 1.05rem; }
.step p{ font-size: 0.86rem; color: var(--graphite); }
@media (max-width: 900px){ .steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }

/* ===========================================
   KONTAK
=========================================== */
.kontak-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:start; }
.kontak-info p{ color: var(--graphite); margin: 14px 0 26px; }
.kontak-list li{ margin-bottom: 18px; display:flex; flex-direction:column; gap:2px; }
.kontak-list strong{ font-size: 0.8rem; text-transform:uppercase; letter-spacing:0.5px; color: var(--red); }
.kontak-list span{ font-size: 0.95rem; }

.kontak-form{
  background: var(--white); border-radius: var(--radius); padding: 32px;
  box-shadow: var(--shadow);
}
.form-row{ margin-bottom: 18px; display:flex; flex-direction:column; gap: 6px; }
.form-row label{ font-size: 0.85rem; font-weight:700; }
.form-row input, .form-row textarea{
  padding: 12px 14px; border-radius: 8px; border: 2px solid var(--paper-line);
  font-family: var(--font-body); font-size: 0.95rem; resize: vertical;
  transition: border-color 0.2s ease;
}
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color: var(--green); }
.form-submit{ width:100%; justify-content:center; }
.form-status{ margin-top: 14px; font-size: 0.88rem; font-weight:600; min-height: 1.2em; }
.form-status.success{ color: var(--green-dark); }
.form-status.error{ color: var(--red); }

@media (max-width: 800px){ .kontak-grid{ grid-template-columns: 1fr; } }

/* ===========================================
   FOOTER
=========================================== */
.footer{ background: var(--ink); color: var(--white); padding: 60px 0 24px; margin-top: 40px; }
.footer__inner{
  display:flex; justify-content:space-between; gap: 40px; flex-wrap:wrap; margin-bottom: 30px;
}
.footer__inner p{ max-width: 320px; opacity:0.75; font-size: 0.88rem; margin-top: 10px; }
.brand__mark--footer{ background: var(--yellow); color: var(--ink); }
.footer__links{ display:flex; flex-direction:column; gap: 10px; }
.footer__links a{ opacity:0.8; font-size: 0.9rem; }
.footer__links a:hover{ opacity:1; }
.footer__social{ display:flex; gap: 12px; height: fit-content; }
.footer__social a{
  width:38px; height:38px; border-radius:50%; border: 1px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center; font-size: 0.75rem; font-weight:700;
}
.footer__copy{ text-align:center; font-size: 0.78rem; opacity: 0.55; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }

/* ===========================================
   BACK TO TOP
=========================================== */
.back-to-top{
  position: fixed; bottom: 26px; right: 26px; width: 46px; height:46px;
  border-radius: 12px; background: var(--red); color:var(--white); border:none;
  font-size: 1.1rem; cursor:pointer; box-shadow: var(--shadow); z-index: 900;
  opacity:0; pointer-events:none; transform: translateY(10px) rotate(-4deg);
  transition: all 0.3s ease;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform: translateY(0) rotate(-4deg); }
.back-to-top:hover{ transform: translateY(-3px) rotate(0deg); }

/* ===========================================
   SCROLL REVEAL
=========================================== */
.reveal{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }
.js-reveal-ready .reveal{ opacity:0; transform:translateY(24px); }
.js-reveal-ready .reveal.visible{ opacity:1; transform:translateY(0); }
/* CMS v3: fasilitas & Huma Digital */
.facility-grid,.huma-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.facility-card,.huma-card{background:#fff;border-radius:18px;overflow:hidden;border:1px solid rgba(22,35,63,.08);box-shadow:0 12px 30px rgba(22,35,63,.08);transition:transform .25s,box-shadow .25s}.facility-card:hover,.huma-card:hover{transform:translateY(-7px);box-shadow:0 20px 42px rgba(22,35,63,.13)}.facility-card img,.huma-card img{width:100%;height:210px;object-fit:cover}.facility-card__body,.huma-card>div:last-child{padding:22px}.card-kicker{font-size:.68rem;letter-spacing:1.4px;font-weight:800;color:var(--green);display:block;margin-bottom:8px}.facility-card h3,.huma-card h3{margin-bottom:8px}.facility-card p,.huma-card p{color:var(--graphite);font-size:.9rem}.huma-card{display:block;color:var(--ink);text-decoration:none}.huma-card__icon{height:150px;display:grid;place-items:center;font-size:4rem;background:#f1f0e6}.huma-card__arrow{display:inline-block;margin-top:14px;font-weight:800;font-size:.82rem;color:var(--red)}.huma-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.huma-grid{grid-template-columns:repeat(2,1fr)}.facility-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.huma-grid,.facility-grid{grid-template-columns:1fr}}
.nav-item>.submenu .nav-item{position:relative}.nav-item>.submenu .nav-item>.submenu{left:100%;top:-8px}.nav-item:hover>.submenu .nav-item:hover>.submenu,.nav-item:focus-within>.submenu .nav-item:focus-within>.submenu{display:block}

.menu-style-pill .nav-link{padding:8px 12px;border-radius:999px}.menu-style-pill .nav-link:hover{background:var(--green);color:#fff}.menu-style-minimal .nav-link{padding-left:4px;padding-right:4px}.menu-style-minimal .nav-link:hover{color:var(--green)}.radius-style-soft{--radius:22px}.radius-style-sharp{--radius:5px}.helper-text{font-size:.8rem;color:var(--graphite);margin:-4px 0 18px}
/* CMS v3.1 refinements */
.brand__logo{width:42px;height:42px;object-fit:contain;border-radius:10px;background:#fff;padding:4px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.profile-page-card{display:grid;grid-template-columns:minmax(280px,42%) 1fr;gap:34px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);padding:18px}.profile-page-card img{width:100%;height:360px;object-fit:cover;border-radius:16px}.profile-page-card div{display:flex;align-items:center;padding:24px}.employee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.employee-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(22,35,63,.07)}.employee-card img{width:100%;height:260px;object-fit:cover}.employee-card__body{padding:22px}.employee-card__body strong{color:var(--green-dark);display:block;margin-bottom:14px}.employee-card__body p{font-size:.88rem;margin:7px 0;color:var(--graphite)}.huma-grid--page{grid-template-columns:repeat(3,1fr)}.achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.achievement-card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(22,35,63,.07)}.achievement-card img{width:100%;height:180px;object-fit:cover}.achievement-card>div{padding:20px}.achievement-card h3{margin-top:12px}.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.testimonial-card{background:#fff;border-radius:18px;padding:26px;box-shadow:var(--shadow);position:relative;border:1px solid rgba(22,35,63,.07)}.testimonial-card__quote{font-family:var(--font-hand);font-size:4rem;color:var(--red);line-height:.7}.testimonial-card p{font-family:var(--font-hand);font-size:1.3rem;line-height:1.4;margin:14px 0}.testimonial-card cite{display:block;font-style:normal;font-weight:800}.testimonial-card span{font-size:.8rem;color:var(--graphite)}
@media(max-width:900px){.profile-page-card,.employee-grid,.achievement-grid,.testimonials-grid,.huma-grid--page{grid-template-columns:1fr}.profile-page-card img{height:280px}}

/* CMS v3.2: functional dropdown navigation */
.nav-item{position:relative}
.nav-link-wrap{display:flex;align-items:center;gap:3px}
.nav-toggle{border:0;background:transparent;color:var(--graphite);font-size:.95rem;line-height:1;cursor:pointer;padding:5px 4px;border-radius:6px;transition:transform .2s,background .2s,color .2s}
.nav-toggle:hover{background:rgba(31,111,84,.08);color:var(--green)}
.nav-item.submenu-open>.nav-link-wrap>.nav-toggle{transform:rotate(180deg);color:var(--green)}
.submenu{display:none;position:absolute;top:calc(100% + 12px);left:0;min-width:220px;padding:8px;background:#fff;border:1px solid rgba(22,35,63,.08);border-radius:14px;box-shadow:0 18px 40px rgba(22,35,63,.14);z-index:1000}
.nav-item.submenu-open>.submenu{display:block}
.submenu .nav-item{width:100%}
.submenu .nav-link-wrap{width:100%}
.submenu .nav-link{display:block;width:100%;padding:10px 12px;border-radius:9px;font-size:.86rem}
.submenu .nav-link:hover{background:rgba(31,111,84,.08)}
.submenu .nav-toggle{margin-left:auto}
.submenu .submenu{left:calc(100% + 8px);top:-8px}
.footer-brand{display:inline-block;text-decoration:none}
.brand__mark--footer{overflow:hidden}
.brand__mark--footer img{width:100%;height:100%;object-fit:contain;padding:5px;border-radius:inherit;background:#fff;display:block}
.current-thumb--hero{width:240px!important;height:140px!important;object-fit:cover!important}
@media(max-width:900px){
  .nav-links{gap:10px}
  .nav-item{width:100%}
  .nav-link-wrap{justify-content:space-between}
  .nav-link{padding:9px 4px}
  .submenu{position:static;min-width:0;width:100%;box-shadow:none;border:0;border-left:2px solid rgba(31,111,84,.18);border-radius:0;margin:2px 0 4px;padding:4px 0 4px 10px;background:transparent}
  .submenu .submenu{position:static;margin-left:10px}
}
.page-hero{padding-top:150px;padding-bottom:70px;background:linear-gradient(180deg,rgba(31,111,84,.07),transparent)}
.page-hero h1{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,4.5rem);line-height:1.02;margin:10px 0 16px;max-width:900px}
.page-hero p{max-width:760px;color:var(--graphite);font-size:1.05rem}
.faq-list{max-width:900px;margin:auto}
.faq-item{background:#fff;border:1px solid rgba(22,35,63,.08);border-radius:16px;margin-bottom:14px;box-shadow:var(--shadow);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:800;position:relative;padding-right:55px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:'+';position:absolute;right:22px;top:17px;font-size:1.4rem;color:var(--green)}
.faq-item[open] summary:after{content:'−'}
.faq-item>div{padding:0 24px 22px;color:var(--graphite);line-height:1.7}
.empty-state{padding:30px;text-align:center;background:rgba(31,111,84,.05);border-radius:16px;color:var(--graphite)}
@media(max-width:650px){.page-hero{padding-top:120px}.page-hero h1{font-size:2.4rem}}

/* CMS v3.4: compact footer and social links */
.footer__inner--compact{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:0}
.footer__brand-block{display:flex;align-items:center;gap:14px;min-width:0}
.footer__brand-block>div{min-width:0}
.footer__brand-block strong{display:block;font-family:var(--font-display);font-size:1rem}
.footer__brand-block p{max-width:none!important;margin-top:2px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.footer__inner--compact .footer__social{margin-left:auto}
.footer__social{display:flex;align-items:center;gap:10px}
.social-btn{width:42px;height:42px;border-radius:12px;display:inline-flex!important;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff!important;transition:transform .2s ease,background .2s ease}
.social-btn:hover{transform:translateY(-3px);background:rgba(255,255,255,.16)}
.social-btn svg{width:21px;height:21px}
.footer__bottom{margin-top:22px}
.footer__bottom .footer__copy{margin:0}
.hero-image-placeholder{height:100%;min-height:340px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e9efe7,#f8f9f4);color:var(--graphite);font-weight:700}
@media(max-width:700px){.footer__inner--compact{align-items:flex-start;flex-direction:column}.footer__inner--compact .footer__social{margin-left:0}.footer__brand-block p{white-space:normal}.hero-image-placeholder{min-height:240px}}

/* FINAL: ultra-minimal unified footer + responsive layout */
.footer--modern{--footer-bg:#132238;--footer-accent:var(--green)}
.footer--colorful{--footer-bg:#35205f;--footer-accent:#ffd166}
.footer--batik{--footer-bg:#3a2416;--footer-accent:#e6b85c;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 10px),repeating-linear-gradient(-45deg,rgba(230,184,92,.035) 0 2px,transparent 2px 12px)}
.footer--dayak{--footer-bg:#182b26;--footer-accent:#f0b34a;background-image:linear-gradient(135deg,transparent 0 46%,rgba(240,179,74,.05) 46% 50%,transparent 50% 100%)}
.footer--scientific{--footer-bg:#071c2b;--footer-accent:#55d6ff;background-image:linear-gradient(rgba(85,214,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(85,214,255,.035) 1px,transparent 1px);background-size:24px 24px}
.footer{background:var(--footer-bg,#132238);color:#fff;margin-top:0}
.footer__inner--unified{display:grid;grid-template-columns:minmax(220px,1.05fr) minmax(280px,2fr) auto;gap:20px;align-items:center;padding:16px 0}
.footer__contact{display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center;font-size:.78rem;color:rgba(255,255,255,.76);min-width:0}
.footer__contact a,.footer__contact span{color:inherit;text-decoration:none;min-width:0}
.footer__contact span{max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.footer__contact a:hover{color:var(--footer-accent,#fff)}
.footer .footer__brand-block{display:flex;align-items:center;gap:10px;min-width:0}
.footer .footer-brand{display:block;flex:0 0 auto}
.footer .brand__mark--footer{width:44px;height:44px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;border-radius:10px;overflow:hidden;color:#fff;font-weight:800}
.footer .brand__mark--footer img{width:100%;height:100%;object-fit:contain;background:#fff;padding:3px}
.footer__brand-block>div{min-width:0}
.footer__brand-block strong{display:block;font-size:.84rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.footer__brand-block p{margin:2px 0 0;color:rgba(255,255,255,.58);font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.footer__social{display:flex;gap:6px;flex:0 0 auto}
.footer .social-btn{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.16);font-size:.64rem;font-weight:800}
.footer .social-btn:hover{background:var(--footer-accent,#fff);color:#111;transform:translateY(-1px)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:center;padding:8px 0;color:rgba(255,255,255,.48);font-size:.68rem}
.footer__bottom .footer__copy{margin:0}
@media(max-width:900px){
  .footer__inner--unified{grid-template-columns:1fr auto;gap:10px 16px;padding:14px 0}
  .footer__contact{grid-column:1 / -1;order:3;gap:5px 14px;font-size:.74rem}
  .footer__contact span{max-width:100%;flex-basis:100%}
  .footer__social{justify-self:end}
}
@media(max-width:560px){
  .container{padding-left:16px;padding-right:16px}
  .navbar__inner{padding-left:16px;padding-right:16px}
  .brand__text{max-width:190px}
  .nav-links{top:64px;height:calc(100vh - 64px);width:min(88vw,320px);padding:22px 18px}
  .footer__inner--unified{grid-template-columns:1fr auto;padding:12px 0}
  .footer__brand-block strong{font-size:.78rem}
  .footer__brand-block p{font-size:.66rem}
  .footer__contact{font-size:.7rem}
  .footer__social{gap:5px}
  .footer .social-btn{width:32px;height:32px}
  .footer__bottom{padding:7px 0;font-size:.64rem}
}

/* FINAL responsive pass: prevent overflow and improve touch targets */
html,body{max-width:100%;overflow-x:hidden}
button,a,input,select,textarea{touch-action:manipulation}
.nav-link-wrap{min-height:36px}
@media(max-width:900px){
  .hero{padding-top:118px;padding-bottom:56px}
  .hero__inner{gap:34px}
  .hero__title{font-size:clamp(2rem,8vw,3.3rem)}
  .hero__desc{font-size:.94rem}
  .hero__actions .btn{width:100%;justify-content:center}
  .profile-page-card{grid-template-columns:1fr!important}
  .profile-page-card img{height:auto;max-height:340px}
  .employee-grid,.achievement-grid,.testimonials-grid,.huma-grid--page,.facility-grid,.huma-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .section{padding-top:96px}
  .section-head{margin-bottom:28px}
  .section-head h1{font-size:clamp(1.9rem,9vw,2.6rem)}
  .employee-grid,.achievement-grid,.testimonials-grid,.huma-grid--page,.facility-grid,.huma-grid,.program-grid{grid-template-columns:1fr}
  .achievement-card img,.facility-card img,.huma-card img{height:190px}
  .employee-card img{height:240px}
  .card,.program-card{padding:18px}
  .table-card{overflow-x:auto}
  .table-card table{min-width:680px}
}
/* Public theme presets */
body.theme-colorful{--green:#6c2bb8;--red:#ff6b6b}.theme-batik{background-image:repeating-linear-gradient(45deg,rgba(145,94,45,.025) 0 2px,transparent 2px 12px)}
body.theme-dayak{--green:#176b5a;--red:#e59f32;background-image:linear-gradient(90deg,rgba(23,107,90,.018) 1px,transparent 1px);background-size:28px 28px}
body.theme-scientific{--green:#087ea4;--red:#ef6c00;background-image:linear-gradient(rgba(8,126,164,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(8,126,164,.025) 1px,transparent 1px);background-size:32px 32px}

/* =========================================================
   2026 MODERNIZATION PASS — compact header, stronger logo,
   colorful interaction, accessible touch targets
========================================================= */
:root{--container:1080px;--ink:#12233f;--paper:#f7faf8;--paper-line:#e3ebe6;--glass:rgba(255,255,255,.82)}
body{background:radial-gradient(circle at 10% 0%,rgba(31,111,84,.07),transparent 28%),radial-gradient(circle at 100% 10%,rgba(214,72,63,.055),transparent 24%),var(--paper)}
.container{max-width:var(--container)}
.site-headnote{position:relative;z-index:1000;background:var(--ink);color:rgba(255,255,255,.78);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase}
.site-headnote__inner{min-height:28px;display:flex;align-items:center;justify-content:center;gap:9px;padding-top:4px;padding-bottom:4px}
.site-headnote__dot{opacity:.35}.site-headnote__year{color:#ffd166;font-weight:800;margin-left:4px}
.navbar{position:sticky;top:0;z-index:999;background:rgba(247,250,248,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(18,35,63,.08);box-shadow:0 8px 28px rgba(18,35,63,.055)}
.navbar__inner{max-width:var(--container);min-height:76px;margin:auto;padding:8px 24px;display:flex;align-items:center;gap:22px}
.brand{gap:12px;min-width:0}.brand__logo-wrap{width:58px;height:58px;flex:0 0 58px;border-radius:16px;padding:5px;background:#fff;border:1px solid rgba(18,35,63,.08);box-shadow:0 8px 22px rgba(18,35,63,.12);display:grid;place-items:center;transition:transform .25s ease,box-shadow .25s ease}.brand__logo-wrap:hover{transform:translateY(-2px) rotate(-2deg);box-shadow:0 12px 28px rgba(18,35,63,.16)}
.brand__logo{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:11px!important;padding:0!important;background:#fff!important;box-shadow:none!important}.brand__mark{width:58px;height:58px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,var(--green),var(--red));color:#fff;font-family:var(--font-display);font-weight:800}
.brand__text{font-size:.88rem;font-weight:800;max-width:250px;line-height:1.18}.nav-links{margin-left:auto;gap:4px;align-items:center}.nav-link{font-size:.76rem;font-weight:800;padding:9px 10px;border-radius:10px;position:relative;transition:background .2s,color .2s,transform .2s}.nav-link:hover,.nav-link.active{background:rgba(31,111,84,.09);color:var(--green)}.nav-link.active::after{display:none}.nav-link-wrap{gap:1px}.nav-toggle{padding:7px 5px}.nav-tools{display:flex;align-items:center;gap:7px}.nav-home{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#fff;border:1px solid rgba(18,35,63,.08);font-size:1rem;transition:transform .2s,background .2s}.nav-home:hover{background:var(--green);color:#fff;transform:translateY(-2px)}
.submenu{top:calc(100% + 8px);border-radius:14px;padding:7px;box-shadow:0 18px 48px rgba(18,35,63,.16);border:1px solid rgba(18,35,63,.08)}.submenu .nav-link{padding:9px 10px}
.hero{padding-top:100px}.hero__inner{max-width:var(--container);gap:44px}.hero__title{font-size:clamp(2.5rem,5vw,4.35rem);letter-spacing:-.035em}.hero__desc{font-size:.96rem}.tag-sticker{box-shadow:0 5px 0 rgba(18,35,63,.07)}
.notebook-card{box-shadow:0 22px 55px rgba(18,35,63,.13);border:1px solid rgba(18,35,63,.06)}
.section{padding:76px 0}.section-head{max-width:680px;margin-bottom:36px}.section-head h1,.section-head h2{letter-spacing:-.03em}
.quick-panel{background:linear-gradient(180deg,transparent,rgba(31,111,84,.035))}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.quick-card{min-height:118px;padding:18px;border-radius:20px;color:#fff;display:flex;align-items:flex-end;gap:12px;position:relative;overflow:hidden;box-shadow:0 16px 34px rgba(18,35,63,.12);transition:transform .25s ease,box-shadow .25s ease}.quick-card::before{content:'';position:absolute;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.14);right:-35px;top:-45px}.quick-card:hover{transform:translateY(-6px);box-shadow:0 22px 42px rgba(18,35,63,.18)}.quick-card--green{background:linear-gradient(135deg,#176b5a,#249276)}.quick-card--orange{background:linear-gradient(135deg,#e47a25,#efad3a)}.quick-card--blue{background:linear-gradient(135deg,#2364a3,#45a1c7)}.quick-card--purple{background:linear-gradient(135deg,#6841a4,#9a65d0)}.quick-icon{position:absolute;right:15px;top:13px;font-size:1.5rem}.quick-card b{display:block;font-family:var(--font-display);font-size:1rem}.quick-card small{display:block;font-size:.68rem;opacity:.84;margin-top:2px}.quick-arrow{margin-left:auto;font-size:1.1rem;opacity:.8}
.cta-strip{padding:44px 0;background:linear-gradient(135deg,var(--ink),#1f3d61);color:#fff;overflow:hidden;position:relative}.cta-strip::after{content:'';position:absolute;inset:auto -10% -100px auto;width:360px;height:220px;border-radius:50%;background:rgba(255,255,255,.06)}.cta-strip__inner{display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:1}.cta-strip .eyebrow{color:#ffd166}.cta-strip h2{max-width:680px;font-size:clamp(1.5rem,3vw,2.3rem)}
.footer{margin-top:0}.footer__inner--unified{max-width:var(--container);padding:15px 24px}.footer__bottom{max-width:var(--container);padding-left:24px;padding-right:24px;margin:auto}
.reveal{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
@media(max-width:1000px){.quick-grid{grid-template-columns:repeat(2,1fr)}.nav-links{gap:2px}.brand__text{max-width:200px}}
@media(max-width:900px){.site-headnote__inner{justify-content:flex-start;padding-left:16px;padding-right:16px}.site-headnote__year{margin-left:auto}.navbar__inner{min-height:68px}.brand__logo-wrap,.brand__mark{width:52px;height:52px;flex-basis:52px;border-radius:14px}.nav-home{display:none}.nav-links{top:96px;height:calc(100vh - 96px);background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-left:1px solid rgba(18,35,63,.08);box-shadow:-20px 0 50px rgba(18,35,63,.13);padding:22px}.nav-links.open{right:0}.nav-link{font-size:.82rem;padding:10px 6px}.hamburger{display:flex}.hero{padding-top:84px}.quick-card{min-height:105px}}
@media(max-width:650px){.site-headnote__inner span:nth-child(2),.site-headnote__inner span:nth-child(3){display:none}.site-headnote__year{font-size:.58rem}.brand__text{font-size:.75rem;max-width:175px}.navbar__inner{padding-left:14px;padding-right:14px}.quick-grid{grid-template-columns:1fr 1fr;gap:10px}.quick-card{min-height:112px;padding:15px;border-radius:17px}.quick-card b{font-size:.82rem}.quick-card small{font-size:.62rem}.cta-strip__inner{align-items:flex-start;flex-direction:column}.cta-strip .btn{width:100%;justify-content:center}.section{padding:64px 0}.hero{padding-top:72px}}
@media(max-width:430px){.quick-grid{grid-template-columns:1fr}.quick-card{min-height:92px}.brand__text{max-width:150px}}
/* ===== PORTAL PRO 2026 ===== */
.split-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}.split-heading h2{margin-top:5px}.text-link{font-weight:800;color:var(--green);white-space:nowrap}.announcement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.announcement-card{background:#fff;border:1px solid rgba(22,35,63,.08);border-radius:18px;padding:22px;box-shadow:0 10px 30px rgba(22,35,63,.06)}.announcement-card>span{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:12px}.announcement-card h2,.announcement-card h3{margin-bottom:9px}.announcement-card p{color:#5b6370;line-height:1.65}.announcement-card small{display:block;margin-top:16px;color:#858b94}.announcement-card.is-important{border-top:4px solid var(--red)}.agenda-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.agenda-card{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:center;background:#fff;border:1px solid rgba(22,35,63,.08);border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(22,35,63,.05)}.agenda-date{width:64px;height:72px;border-radius:16px;background:var(--green);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.agenda-date strong{font:700 1.6rem/1 'Space Grotesk'}.agenda-date span{text-transform:uppercase;font-size:.68rem;font-weight:800;margin-top:5px}.agenda-card h3{margin:5px 0 8px}.agenda-card p,.agenda-card small{color:#69717b}.achievement-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.achievement-card{padding:26px;background:linear-gradient(135deg,#fff,#f5f8f2);border:1px solid var(--line);border-radius:20px}.achievement-icon{font-size:2rem;margin-bottom:16px}.download-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.download-card{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid rgba(22,35,63,.08);padding:20px;border-radius:18px;box-shadow:0 8px 24px rgba(22,35,63,.05);transition:.2s}.download-card:hover{transform:translateY(-3px);border-color:var(--green)}.download-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#e7f3ed;color:var(--green);font-size:1.3rem;flex:0 0 auto}.download-card h2,.download-card h3{margin:5px 0 6px}.download-card p,.download-card small{color:#68717b;line-height:1.55}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gallery-item{position:relative;display:block;overflow:hidden;border-radius:18px;min-height:190px;background:#ddd}.gallery-item img{width:100%;height:100%;min-height:190px;object-fit:cover;display:block;transition:.35s}.gallery-item span{position:absolute;left:12px;right:12px;bottom:12px;color:#fff;font-weight:800;text-shadow:0 1px 12px #000;background:linear-gradient(transparent,rgba(0,0,0,.65));padding-top:30px}.gallery-item:hover img{transform:scale(1.05)}.lightbox{position:fixed;inset:0;background:rgba(8,16,28,.88);display:none;align-items:center;justify-content:center;z-index:9999;padding:30px}.lightbox.is-open{display:flex}.lightbox img{max-width:min(1000px,94vw);max-height:88vh;border-radius:16px}.lightbox button{position:absolute;right:25px;top:20px;border:0;background:#fff;color:#16233f;border-radius:50%;width:42px;height:42px;font-size:1.3rem;cursor:pointer}.page-hero{padding-top:52px;padding-bottom:52px}.page-hero h1{font-size:clamp(2rem,5vw,4rem);margin:10px 0}.page-hero p{max-width:700px;color:#66707c;font-size:1.02rem;line-height:1.7}.agenda-grid--page,.announcement-grid--page,.download-grid--page{margin-top:10px}.gallery-grid--page{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.announcement-grid,.achievement-row{grid-template-columns:1fr 1fr}.gallery-grid,.gallery-grid--page{grid-template-columns:1fr 1fr}}@media(max-width:650px){.split-heading{align-items:start;flex-direction:column}.announcement-grid,.agenda-grid,.achievement-row,.download-grid,.gallery-grid,.gallery-grid--page{grid-template-columns:1fr}.page-hero{padding-top:35px;padding-bottom:35px}.agenda-card{grid-template-columns:58px 1fr}.agenda-date{width:54px;height:64px}.agenda-date strong{font-size:1.3rem}}

/* Hero media robustness + admin preview */
.notebook-card{overflow:hidden;}
.notebook-card img{width:100%;height:clamp(300px,42vw,520px);object-fit:cover;display:block;}
.hero-live-preview .hero-preview-card{display:grid;grid-template-columns:1fr 320px;gap:24px;padding:24px;border:1px solid #e4e7dc;border-radius:18px;background:#f8f9f4;align-items:center;}
.hero-preview-card h3{font-size:clamp(1.6rem,3vw,2.6rem);margin:12px 0;}
.hero-preview-card p{color:#565c66;margin:8px 0;}
#previewHeroBadge{display:inline-block;padding:7px 12px;background:#f4b942;border-radius:8px;font-weight:700;font-size:.8rem;}
#previewHeroNote{font-weight:700;}
.hero-preview-media{min-height:210px;border-radius:14px;overflow:hidden;background:#e4e7dc;display:grid;place-items:center;position:relative;}
.hero-preview-media img{width:100%;height:240px;object-fit:cover;display:none;}
.hero-preview-media span{color:#565c66;padding:20px;text-align:center;}
@media(max-width:700px){.hero-live-preview .hero-preview-card{grid-template-columns:1fr}.hero-preview-media{order:-1}}

.site-search{display:flex;gap:10px;max-width:720px;margin-top:22px}.site-search input{flex:1;padding:15px 18px;border:2px solid var(--paper-line);border-radius:12px;font:inherit}.search-results{display:grid;gap:14px;margin-top:25px}.search-result{padding:20px;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);transition:.2s}.search-result:hover{transform:translateY(-2px)}.search-result>span{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--red);font-weight:700}.search-result h3{margin:5px 0}.search-result p{color:var(--graphite)}

.theme-toggle{border:0;background:transparent;cursor:pointer;font:inherit}.dark-mode{--paper:#101822;--ink:#f3f6f3;--graphite:#b5bec6;--white:#18222d;--line:#2b3744;--paper-line:#2b3744}.dark-mode .navbar,.dark-mode .site-headnote{background:#111923}.dark-mode .section--tint{background:#141e28}.dark-mode .form-card,.dark-mode .search-result,.dark-mode .news-card,.dark-mode .agenda-card,.dark-mode .download-card,.dark-mode .quick-card{background:#18222d}
/* PAGE FOOTNOTE — compact contextual note shown consistently on every public menu */
.page-footnote{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:9px 16px;border-top:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.58);font-size:.68rem;line-height:1.4;text-align:center}
.page-footnote__page{font-weight:800;color:rgba(255,255,255,.82);text-transform:uppercase;letter-spacing:.08em}
.page-footnote a{color:inherit;text-decoration:none;font-weight:700}
.page-footnote a:hover{color:var(--footer-accent,#fff)}
@media(max-width:600px){.page-footnote{gap:5px 8px;padding:8px 12px}.page-footnote__page{width:100%}}


/* ===========================================
   STAGE 4 — DYNAMIC PAGE NOTES + PREMIUM NAV
=========================================== */
.site-headnote{position:relative;z-index:1001;background:linear-gradient(90deg,var(--ink),var(--green));color:#fff;min-height:30px;display:flex;align-items:center;letter-spacing:.02em;font-size:.72rem;font-weight:600}
.site-headnote__inner{min-height:30px;display:flex;align-items:center;gap:9px;white-space:nowrap;overflow:hidden}
.site-headnote__label{font-weight:800;letter-spacing:.09em;font-size:.64rem;opacity:.92}
.site-headnote__dynamic{overflow:hidden;text-overflow:ellipsis}
.site-headnote__dot{opacity:.5}.site-headnote__year{margin-left:auto;padding-left:12px;border-left:1px solid rgba(255,255,255,.2);font-size:.62rem;opacity:.8}
.navbar{top:30px;background:rgba(248,249,244,.92);box-shadow:0 8px 30px rgba(22,35,63,.06)}
.navbar__inner{min-height:72px}
.brand__logo-wrap{width:58px;height:58px;display:grid;place-items:center;flex:none;border-radius:16px;background:#fff;box-shadow:0 7px 20px rgba(22,35,63,.11);border:1px solid rgba(22,35,63,.08);padding:5px}
.brand__logo{width:100%;height:100%;object-fit:contain;border-radius:11px}
.brand__text{font-size:.9rem;max-width:205px}
.nav-links{align-items:center;gap:4px}
.nav-item{position:relative}
.nav-link-wrap{display:flex;align-items:center;gap:2px}
.nav-link{display:flex;align-items:center;gap:6px;padding:11px 12px;border-radius:12px;color:var(--ink);transition:background .2s ease,color .2s ease,transform .2s ease}
.nav-link:hover{background:rgba(31,111,84,.08);color:var(--green-dark);transform:translateY(-1px)}
.nav-toggle{width:27px;height:27px;border:0;border-radius:8px;background:transparent;color:var(--graphite);cursor:pointer;font-size:1rem;display:grid;place-items:center;transition:.2s}
.nav-toggle:hover{background:rgba(31,111,84,.1);color:var(--green-dark)}
.nav-item.has-submenu>.nav-link-wrap:after{content:'';display:block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:1px;margin-right:5px;opacity:.6;pointer-events:none}
.nav-item.has-submenu>.nav-link-wrap .nav-toggle{display:none}
.submenu{position:absolute;top:calc(100% + 10px);left:0;min-width:245px;padding:9px;background:rgba(255,255,255,.98);border:1px solid rgba(22,35,63,.09);border-radius:16px;box-shadow:0 20px 50px rgba(22,35,63,.15);opacity:0;visibility:hidden;transform:translateY(-7px) scale(.98);transform-origin:top left;transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:1050}
.nav-item:hover>.submenu,.nav-item:focus-within>.submenu,.nav-item.submenu-open>.submenu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.submenu .nav-item{width:100%}.submenu .nav-link-wrap{width:100%}.submenu .nav-link{width:100%;padding:11px 12px;font-size:.86rem;border-radius:10px}.submenu .nav-link:hover{background:rgba(31,111,84,.08)}
.submenu .nav-item.has-submenu>.nav-link-wrap:after{transform:rotate(-45deg);margin-left:auto}.submenu .submenu{left:calc(100% + 8px);top:-9px}
.page-footnote{border-top:1px solid rgba(22,35,63,.08);display:flex;align-items:center;gap:12px;padding-top:13px!important;padding-bottom:13px!important;font-size:.72rem;color:var(--graphite)}
.page-footnote__page{font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.07em}.page-footnote a{margin-left:auto;font-weight:800;color:var(--green-dark)}
.dark-mode .navbar{background:rgba(15,22,35,.92);border-color:rgba(255,255,255,.08)}
.dark-mode .nav-link{color:#eef2f7}.dark-mode .nav-link:hover{background:rgba(255,255,255,.07)}.dark-mode .submenu{background:#182131;border-color:rgba(255,255,255,.1)}.dark-mode .submenu .nav-link:hover{background:rgba(255,255,255,.07)}
@media(max-width:900px){
 .site-headnote__inner{padding-left:18px;padding-right:18px}.site-headnote__year{display:none}.navbar{top:30px}.navbar__inner{padding-top:9px;padding-bottom:9px}.brand__logo-wrap{width:50px;height:50px}.brand__text{font-size:.78rem;max-width:145px}
 .nav-links{top:92px;height:calc(100vh - 92px);width:min(340px,88vw);padding:20px 14px;gap:5px;overflow-y:auto;box-shadow:-18px 0 45px rgba(0,0,0,.14)}
 .nav-item,.nav-link-wrap,.nav-link{width:100%}.nav-link{justify-content:space-between;padding:13px 14px}.nav-item.has-submenu>.nav-link-wrap:after{display:none}.nav-item.has-submenu>.nav-link-wrap .nav-toggle{display:grid;margin-left:auto;background:rgba(31,111,84,.07)}
 .submenu{position:static;min-width:0;width:100%;padding:4px 0 4px 12px;margin:2px 0 5px;box-shadow:none;border:0;border-left:2px solid var(--green);border-radius:0;background:transparent;opacity:1;visibility:visible;transform:none;display:none}
 .nav-item.submenu-open>.submenu{display:block}.submenu .nav-link{font-size:.82rem;padding:10px 12px}.submenu .submenu{display:none}.submenu .nav-item.submenu-open>.submenu{display:block}
 .page-footnote{align-items:flex-start;flex-wrap:wrap}.page-footnote a{margin-left:0}
}

/* STAGE 4.1 — premium dropdown / menu notes */
.nav-link__icon{display:inline-grid;place-items:center;width:20px;height:20px;font-size:.9rem;flex:0 0 20px}
.nav-link__label{line-height:1}
.submenu--primary{width:340px;min-width:340px;padding:0;overflow:hidden;border-radius:20px;background:rgba(255,255,255,.98);border:1px solid rgba(18,35,63,.09);box-shadow:0 24px 65px rgba(18,35,63,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.submenu__head{display:flex;gap:13px;align-items:center;padding:18px 18px 15px;background:linear-gradient(135deg,rgba(31,111,84,.12),rgba(31,111,84,.025));border-bottom:1px solid rgba(18,35,63,.07)}
.submenu__head-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--green);color:#fff;font-size:1.15rem;box-shadow:0 9px 20px rgba(31,111,84,.22);flex:0 0 42px}
.submenu__head-copy{min-width:0;display:grid;gap:2px}.submenu__eyebrow{font-size:.58rem;letter-spacing:.12em;font-weight:800;color:var(--green);text-transform:uppercase}.submenu__head-copy strong{font-size:1rem;color:var(--ink)}.submenu__head-copy small{font-size:.68rem;line-height:1.35;color:var(--graphite);white-space:normal}
.submenu__list{padding:9px}.submenu__link{display:flex;align-items:center;gap:11px;width:100%;padding:11px;border-radius:13px;text-decoration:none;color:var(--ink);transition:background .18s,transform .18s,box-shadow .18s}.submenu__link:hover{background:rgba(31,111,84,.075);transform:translateX(2px)}
.submenu__icon{width:34px;height:34px;border-radius:10px;background:rgba(31,111,84,.08);display:grid;place-items:center;flex:0 0 34px;font-size:.9rem}.submenu__copy{min-width:0;display:grid;gap:2px;flex:1}.submenu__copy strong{font-size:.78rem;line-height:1.2}.submenu__copy small{font-size:.62rem;line-height:1.35;color:var(--graphite);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.submenu__chevron{font-size:1.15rem;color:var(--graphite)}
.submenu__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;background:rgba(18,35,63,.025);border-top:1px solid rgba(18,35,63,.07);font-size:.62rem;color:var(--graphite)}.submenu__foot a{font-weight:800;color:var(--green);text-decoration:none;white-space:nowrap}.submenu__foot a:hover{text-decoration:underline}
.submenu--nested{left:calc(100% + 10px)!important;top:-10px!important;width:310px;min-width:310px;padding:9px;border-radius:17px}
.submenu--nested .submenu__foot,.submenu--nested .submenu__head{display:none}
@media(max-width:900px){
 .submenu--primary,.submenu--nested{width:100%;min-width:0;border-radius:14px;box-shadow:none;padding:0;background:transparent;backdrop-filter:none}
 .submenu__head{border-radius:14px;margin:5px 0 4px;padding:13px;background:linear-gradient(135deg,rgba(31,111,84,.10),rgba(31,111,84,.025));border:1px solid rgba(31,111,84,.08)}
 .submenu__head-icon{width:36px;height:36px;flex-basis:36px;border-radius:11px}.submenu__head-copy strong{font-size:.88rem}.submenu__list{padding:3px 0 3px 8px;border-left:1px solid rgba(31,111,84,.15)}.submenu__link{padding:10px 9px}.submenu__foot{border-radius:10px;margin-top:4px;padding:9px 11px}.submenu--nested{position:static!important;margin-left:8px!important}
 .submenu__copy small{white-space:normal}.submenu__chevron{display:none}
}
.dark-mode .submenu--primary{background:rgba(24,33,45,.98);border-color:rgba(255,255,255,.1);box-shadow:0 24px 65px rgba(0,0,0,.35)}
.dark-mode .submenu__head{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:rgba(255,255,255,.08)}
.dark-mode .submenu__link:hover{background:rgba(255,255,255,.06)}.dark-mode .submenu__icon{background:rgba(255,255,255,.07)}.dark-mode .submenu__foot{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.08)}

/* FINAL NAV + DARK MODE POLISH 2026 */
html{color-scheme:light}html.dark-mode{color-scheme:dark}
body{transition:background-color .25s ease,color .25s ease}
.nav-item.has-submenu>.nav-link-wrap:after{display:none!important}
.nav-item.has-submenu>.nav-link-wrap>.nav-toggle{display:grid!important}
.nav-toggle span{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.nav-item.submenu-open>.nav-link-wrap>.nav-toggle span{transform:rotate(225deg)}
.submenu--primary{min-width:360px;width:360px;border-radius:22px;padding:0;background:rgba(255,255,255,.97);border:1px solid rgba(18,35,63,.10);box-shadow:0 28px 80px rgba(18,35,63,.20);overflow:hidden}
.submenu__head{padding:16px 18px;background:linear-gradient(135deg,rgba(31,111,84,.13),rgba(255,255,255,.8));}
.submenu__head-icon{width:44px;height:44px;flex-basis:44px;border-radius:14px}
.submenu__head-copy{gap:3px}.submenu__head-copy strong{font-family:var(--font-display);font-size:1.03rem}.submenu__head-copy small{font-size:.69rem;max-width:250px}
.submenu__list{padding:8px}.submenu__link{min-height:58px}.submenu__link:hover{box-shadow:0 7px 18px rgba(18,35,63,.07);transform:translateX(0)}
.submenu__icon{width:36px;height:36px;flex-basis:36px;border:1px solid rgba(31,111,84,.08)}
.submenu__copy strong{font-size:.8rem}.submenu__copy small{font-size:.64rem}
.submenu__foot{padding:10px 15px}
/* Keep dropdown within viewport on right-side items */
.nav-item:nth-last-child(-n+2)>.submenu--primary{left:auto;right:0;transform-origin:top right}
.dark-mode{background:var(--paper);color:var(--ink)}
.dark-mode .navbar{background:rgba(15,23,33,.94);border-color:rgba(255,255,255,.08)}
.dark-mode .brand__logo-wrap,.dark-mode .nav-home{background:#18222d;border-color:rgba(255,255,255,.09)}
.dark-mode .brand__text,.dark-mode .nav-link{color:#f1f5f2}
.dark-mode .section,.dark-mode main{background:transparent}
.dark-mode .page-hero,.dark-mode .section--ruled{background:transparent}
.dark-mode .profile-page-card,.dark-mode .about-card,.dark-mode .program-card,.dark-mode .facility-card,.dark-mode .achievement-card,.dark-mode .testimonial-card,.dark-mode .faq-item,.dark-mode .huma-card{background:#18222d;border-color:rgba(255,255,255,.08);color:#f1f5f2}
.dark-mode .profile-page-card p,.dark-mode .about-card p,.dark-mode .program-card p,.dark-mode .facility-card p,.dark-mode .testimonial-card p,.dark-mode .faq-item div{color:#bcc6ce}
.dark-mode .footer{background:#0d141d}
.dark-mode .page-footnote{border-color:rgba(255,255,255,.08)}
.dark-mode .submenu--primary,.dark-mode .submenu--nested{background:#17212c;border-color:rgba(255,255,255,.10)}
.dark-mode .submenu__head{background:linear-gradient(135deg,rgba(72,180,143,.14),rgba(23,33,44,.98));border-color:rgba(255,255,255,.08)}
.dark-mode .submenu__head-copy strong,.dark-mode .submenu__link{color:#f1f5f2}
.dark-mode .submenu__link:hover{background:rgba(255,255,255,.06);box-shadow:none}.dark-mode .submenu__copy small,.dark-mode .submenu__foot{color:#aeb9c3}
.dark-mode .submenu__icon{background:rgba(72,180,143,.12);border-color:rgba(255,255,255,.08)}
.dark-mode .submenu__foot{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.08)}
.dark-mode .site-headnote{background:linear-gradient(90deg,#0b121a,#12382e)}
.dark-mode .site-search input{background:#18222d;color:#f1f5f2;border-color:#2b3744}
@media(max-width:900px){
 .nav-links{top:100%;height:calc(100vh - 102px);background:var(--paper);border-left:1px solid var(--paper-line)}
 .submenu--primary,.submenu--nested{width:100%;min-width:0;border-radius:15px}
 .submenu__head{margin:5px 0}.submenu__foot{margin-bottom:4px}
 .dark-mode .nav-links{background:#101822;border-color:rgba(255,255,255,.08)}
}


/* STAGE 4.3 — navigation interaction, flexible theme and compact footer controls */
.nav-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-tools .hamburger{display:none}
.page-footnote{max-width:min(1180px,calc(100% - 32px));margin:0 auto 14px!important;border:1px solid rgba(18,35,63,.09)!important;border-radius:14px!important;background:rgba(255,255,255,.58);padding:8px 10px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;font-size:.66rem!important;line-height:1.35!important}
.page-footnote__copy{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}.page-footnote__page{flex:none}.page-footnote__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-footnote__tools{display:flex;align-items:center;gap:6px;flex:none}.foot-tool{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;border:1px solid rgba(18,35,63,.09);background:rgba(255,255,255,.78);color:var(--ink);text-decoration:none;cursor:pointer;font:inherit;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}.foot-tool:hover{transform:translateY(-2px);background:var(--green);color:#fff;border-color:var(--green)}.foot-tool .theme-icon{font-size:1rem;line-height:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Parent links intentionally open their branches; the dropdown footer keeps access to the parent landing page. */
.nav-item.has-submenu>.nav-link-wrap>.nav-link{cursor:pointer}
.nav-item.submenu-open>.submenu{opacity:1!important;visibility:visible!important;transform:translateY(0) scale(1)!important}
.nav-item.submenu-open>.nav-link-wrap>.nav-link{background:rgba(31,111,84,.08);color:var(--green-dark)}
.dark-mode .page-footnote{background:rgba(23,33,44,.72)!important;border-color:rgba(255,255,255,.09)!important}.dark-mode .foot-tool{background:#18222d;border-color:rgba(255,255,255,.09);color:#f1f5f2}.dark-mode .foot-tool:hover{background:var(--green);color:#fff}
@media(max-width:900px){.nav-tools .hamburger{display:flex}.page-footnote{max-width:calc(100% - 24px);margin-bottom:12px!important}.page-footnote__copy{align-items:flex-start;flex-direction:column;gap:2px}.page-footnote__text{white-space:normal}.foot-tool{width:34px;height:34px}.nav-item.has-submenu>.nav-link-wrap>.nav-toggle{display:grid!important}}
@media(max-width:560px){.page-footnote{align-items:center!important}.page-footnote__text{font-size:.61rem}.page-footnote__page{font-size:.58rem}.page-footnote__tools{gap:5px}.foot-tool{width:30px;height:30px;border-radius:9px}}


/* ===== STAGE 4.4 NAVIGATION + FOOTNOTE FIX ===== */
.nav-link-wrap{display:flex;align-items:center;gap:4px;position:relative}
.nav-item.has-submenu>.nav-link-wrap:after{display:none!important}
.nav-toggle{display:inline-flex!important;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:10px;background:transparent;color:inherit;cursor:pointer;flex:0 0 30px;transition:background .18s ease,transform .18s ease}
.nav-toggle:hover,.nav-item.submenu-open>.nav-link-wrap>.nav-toggle{background:rgba(255,255,255,.10)}
.nav-toggle__chevron{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}
.nav-item.submenu-open>.nav-link-wrap>.nav-toggle .nav-toggle__chevron{transform:rotate(225deg) translate(-1px,-1px)}
.nav-item.submenu-open>.submenu{display:block!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0)!important}
.nav-item>.submenu{pointer-events:none}
.nav-item.submenu-open>.submenu{pointer-events:auto}
.submenu--primary{min-width:310px!important;padding:12px!important;border-radius:20px!important;background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(245,249,248,.98))!important;border:1px solid rgba(31,111,84,.13)!important;box-shadow:0 24px 70px rgba(5,20,30,.22)!important;overflow:hidden}
.submenu__head{padding:12px!important;margin-bottom:6px!important;border-radius:14px!important;background:linear-gradient(135deg,var(--green),color-mix(in srgb,var(--green) 68%,#10202b))!important;color:#fff!important}
.submenu__eyebrow{display:block!important;font-size:.65rem!important;letter-spacing:.14em!important;text-transform:uppercase!important;opacity:.72!important;margin-bottom:3px!important}
.submenu__head-copy strong{display:block!important;font-size:1.02rem!important}.submenu__head-copy small{display:block!important;margin-top:4px!important;line-height:1.45!important;opacity:.88!important}
.submenu__link{display:flex!important;align-items:center!important;gap:10px!important;padding:11px 12px!important;border-radius:13px!important;text-decoration:none!important;transition:background .16s ease,transform .16s ease!important}
.submenu__link:hover{background:rgba(31,111,84,.09)!important;transform:translateX(2px)}
.submenu__icon{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(31,111,84,.10)}
.submenu__copy{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0}.submenu__copy small{font-size:.72rem!important;opacity:.65!important;white-space:normal!important}
.submenu__chevron{margin-left:auto;font-size:1.1rem;opacity:.6}.submenu__foot{display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px!important;margin-top:7px!important;border-top:1px solid rgba(31,111,84,.10)!important;font-size:.72rem!important}.submenu__foot a{font-weight:800;text-decoration:none;color:var(--green)!important}
.page-footnote{display:flex!important;visibility:visible!important;position:relative!important;width:min(calc(100% - 32px),720px)!important;margin:14px auto 0!important;padding:10px 14px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:16px!important;background:rgba(255,255,255,.06)!important;backdrop-filter:blur(10px)!important;color:rgba(255,255,255,.78)!important;box-shadow:0 10px 30px rgba(0,0,0,.10)!important}
.page-footnote__copy{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.page-footnote__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-footnote__tools{display:flex!important;align-items:center;gap:6px!important;margin-left:auto!important}.foot-tool{width:32px!important;height:32px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:10px!important;text-decoration:none!important;background:rgba(255,255,255,.10)!important;color:#fff!important;border:1px solid rgba(255,255,255,.12)!important;cursor:pointer}.foot-tool:hover{transform:translateY(-1px);background:rgba(255,255,255,.18)!important}.footer{padding-top:18px!important}
@media(max-width:900px){.nav-toggle{margin-left:auto}.nav-item.has-submenu>.nav-link-wrap{display:flex!important}.nav-link-wrap>.nav-link{flex:1}.submenu--primary{min-width:0!important}.nav-item>.submenu{display:none!important}.nav-item.submenu-open>.submenu{display:block!important}.submenu{position:static!important;transform:none!important;box-shadow:none!important;opacity:1!important;visibility:visible!important;background:transparent!important;border:0!important;padding:4px 0 4px 12px!important}.submenu__head{margin:6px 0!important}.submenu__foot{display:none!important}.page-footnote{width:calc(100% - 24px)!important;margin-top:12px!important}.page-footnote__copy{min-width:0}.page-footnote__text{display:none}.page-footnote__page{white-space:nowrap}.foot-tool{width:30px!important;height:30px!important}}
.dark-mode .submenu--primary{background:linear-gradient(145deg,#14212c,#101923)!important;border-color:rgba(255,255,255,.10)!important}.dark-mode .submenu__link{color:#edf4f7!important}.dark-mode .submenu__link:hover{background:rgba(255,255,255,.07)!important}.dark-mode .submenu__icon{background:rgba(255,255,255,.08)!important}.dark-mode .page-footnote{background:rgba(12,20,28,.72)!important;color:rgba(255,255,255,.78)!important}

/* ================= STAGE 4.5 NAVIGATION + FOOTNOTE FINAL FIX ================= */
.navbar,.navbar__inner,.nav-links,.nav-item,.nav-link-wrap{overflow:visible!important}
.navbar{position:sticky;top:30px;z-index:3000!important}
.nav-item{position:relative!important}
.nav-item.has-submenu>.nav-link-wrap>.nav-toggle{display:inline-flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
.nav-toggle{position:relative;z-index:3200!important}
.submenu--primary{display:none!important;position:absolute!important;top:calc(100% + 10px)!important;left:0!important;z-index:9999!important;min-width:320px!important;width:320px!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.nav-item.submenu-open>.submenu--primary{display:block!important}
.nav-item.submenu-open>.submenu--nested{display:block!important}
.submenu__head{display:flex!important}.submenu__list{display:block!important}.submenu__link{display:flex!important}
.nav-item:nth-last-child(-n+2)>.submenu--primary{left:auto!important;right:0!important}
.nav-toggle__chevron{display:block!important}

/* Footnote selalu terlihat, ringkas, dan berada sebelum footer utama */
.page-footnote-wrap{display:block!important;width:100%!important;padding:18px 0 0!important;background:transparent!important}
.page-footnote{display:flex!important;visibility:visible!important;opacity:1!important;position:relative!important;width:min(calc(100% - 32px),760px)!important;min-height:54px!important;margin:0 auto!important;padding:10px 14px!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;border:1px solid rgba(18,35,63,.13)!important;border-radius:16px!important;background:rgba(255,255,255,.96)!important;color:#24303b!important;box-shadow:0 10px 28px rgba(10,25,35,.10)!important}
.page-footnote__copy{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;flex:1!important}.page-footnote__page{font-weight:900!important;color:var(--green-dark)!important;white-space:nowrap!important}.page-footnote__text{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.page-footnote__tools{display:flex!important;align-items:center!important;gap:6px!important;flex:none!important}.foot-tool{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:32px!important;height:32px!important;border-radius:10px!important;border:1px solid rgba(18,35,63,.12)!important;background:#f7faf8!important;color:#17232d!important;text-decoration:none!important;cursor:pointer!important}
.foot-tool:hover{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important}
.dark-mode .page-footnote{background:#14202a!important;color:#e9eff3!important;border-color:rgba(255,255,255,.12)!important}.dark-mode .page-footnote__page{color:#9ee0c2!important}.dark-mode .foot-tool{background:#1b2a36!important;color:#fff!important;border-color:rgba(255,255,255,.12)!important}
@media(max-width:900px){.nav-links.open{display:flex!important}.submenu--primary{position:static!important;width:100%!important;min-width:0!important;margin:4px 0!important;padding:6px!important;border-radius:14px!important;box-shadow:none!important}.nav-item.submenu-open>.submenu--primary{display:block!important}.page-footnote{width:calc(100% - 24px)!important}.page-footnote__text{display:none!important}.page-footnote__copy{min-width:0!important}}
@media(max-width:560px){.page-footnote{padding:9px 10px!important;gap:8px!important}.page-footnote__page{font-size:.62rem!important}.foot-tool{width:30px!important;height:30px!important}.page-footnote__tools{gap:4px!important}}


/* ================= STAGE 4.6 — MOBILE NAVIGATION LAYOUT FIX =================
   Keep the mobile drawer out of normal document flow so it cannot stretch the navbar.
*/
@media (max-width: 900px){
  /* Mobile: keep the header anchored below the 30px headnote.
     Sticky positioning was causing the header to retain a displaced
     flow position on some mobile browsers. */
  .navbar{position:fixed !important;top:30px !important;left:0 !important;right:0 !important;width:100% !important;z-index:3000 !important;}
  .navbar__inner{position:relative;min-height:72px;}
  .nav-links{
    position:fixed !important;
    top:102px !important;
    right:-100% !important;
    bottom:auto !important;
    width:min(340px,88vw) !important;
    height:calc(100dvh - 102px) !important;
    max-height:calc(100dvh - 102px) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    padding:20px 14px !important;
    gap:5px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    z-index:3100 !important;
    transition:right .3s ease !important;
  }
  .nav-links.open{right:0 !important;}
  .nav-tools,.hamburger{position:relative;z-index:3200;}
  /* The fixed mobile header must not cover the first hero content. */
  main{padding-top:72px;}
}
@media (max-width:560px){
  .nav-links{width:min(340px,90vw) !important;top:102px !important;height:calc(100dvh - 102px) !important;max-height:calc(100dvh - 102px) !important;}
}

/* =========================================================
   RESPONSIVE HARDENING — 320px to 430px
   Single final mobile layer. Keeps the header/drawer out of
   normal flow and prevents narrow-screen overflow.
========================================================= */

@media (max-width: 900px){
  .site-headnote{min-height:28px;height:28px;}
  .site-headnote__inner{min-height:28px;height:28px;}

  /* Header is anchored to the headnote, never to its flow position. */
  .navbar{
    position:fixed !important;
    top:28px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:68px !important;
    z-index:5000 !important;
  }
  .navbar__inner{
    width:100%;
    height:68px;
    min-height:68px !important;
    padding:8px 16px !important;
  }

  /* Do not add artificial height to main; individual hero/page sections
     already provide their own top spacing. */
  main{padding-top:0 !important;}

  .brand{min-width:0;max-width:calc(100% - 52px);}
  .brand__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .nav-tools{margin-left:auto;flex:0 0 auto;}
  .hamburger{display:flex !important;width:40px;height:40px;align-items:center;justify-content:center;padding:8px;}

  .nav-links{
    position:fixed !important;
    top:96px !important;
    right:-105vw !important;
    left:auto !important;
    bottom:0 !important;
    width:min(340px,90vw) !important;
    max-width:90vw !important;
    height:auto !important;
    max-height:calc(100dvh - 96px) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:14px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:4px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:rgba(255,255,255,.98) !important;
    box-shadow:-20px 0 50px rgba(18,35,63,.16) !important;
    border-left:1px solid rgba(18,35,63,.10) !important;
    z-index:5100 !important;
    transition:right .28s ease !important;
  }
  .nav-links.open{right:0 !important;}

  .nav-item,.nav-link-wrap,.nav-link{min-width:0;width:100%;}
  .nav-link-wrap{display:flex !important;align-items:center;}
  .nav-link-wrap>.nav-link{flex:1 1 auto;}
  .nav-link{min-height:44px;padding:10px 11px !important;font-size:.82rem;}
  .nav-toggle{min-width:38px;width:38px;height:38px;flex:0 0 38px;}

  /* Mobile submenus stay inside the drawer; no desktop 310/320/360px widths. */
  .submenu,.submenu--primary,.submenu--nested{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:4px 0 !important;
    padding:4px 0 4px 10px !important;
    box-shadow:none !important;
    transform:none !important;
    overflow:hidden !important;
  }
  .submenu--primary{border-left:2px solid rgba(31,111,84,.18) !important;}
  .submenu__head,.submenu__list,.submenu__link{min-width:0;max-width:100%;}
  .submenu__head-copy,.submenu__copy{min-width:0;overflow:hidden;}
  .submenu__copy small{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;}

  /* Generic narrow-screen safety. */
  .container,.hero__inner,.navbar__inner{max-width:100%;}
  .hero__inner,.section>.container,.cta-strip__inner{min-width:0;}
  .hero__text,.hero__visual,.section-head,.split-heading{min-width:0;max-width:100%;}
  .hero__actions{width:100%;}
  .hero__actions .btn{max-width:100%;}
  .notebook-card{max-width:100%;}
  .notebook-card img{width:100%;height:auto;}
  .quick-card,.announcement-card,.news-card,.agenda-card,.download-card,.achievement-card,.facility-card,.huma-card,.employee-card,.testimonial-card,.program-card{min-width:0;}
  .quick-card h3,.quick-card b,.announcement-card h3,.news-card h4,.agenda-card h3,.download-card h3,.achievement-card h3,.facility-card h3,.huma-card h3,.employee-card h3{overflow-wrap:anywhere;}
  .split-heading{align-items:flex-start;flex-wrap:wrap;}
  .text-link{max-width:100%;}
}

@media (max-width: 430px){
  .container{padding-left:14px !important;padding-right:14px !important;}
  .navbar__inner{padding-left:12px !important;padding-right:12px !important;gap:10px !important;}
  .brand{gap:9px;max-width:calc(100% - 48px);}
  .brand__logo-wrap,.brand__mark{width:48px !important;height:48px !important;flex-basis:48px !important;border-radius:13px !important;}
  .brand__text{font-size:.72rem;max-width:none;line-height:1.15;}
  .hamburger{width:38px;height:38px;}

  .hero{padding-top:100px !important;padding-bottom:52px !important;}
  .hero__inner{padding-left:14px !important;padding-right:14px !important;gap:28px !important;}
  .hero__title{font-size:clamp(1.9rem,9vw,2.5rem) !important;line-height:1.08;overflow-wrap:anywhere;}
  .hero__note-handwritten{font-size:1.18rem;}
  .hero__desc{font-size:.88rem;}
  .hero__actions{gap:10px;}
  .hero__actions .btn{padding:12px 18px;font-size:.88rem;}

  .section{padding:56px 0 !important;}
  .section-head{margin-bottom:24px;}
  .section-head h2,.split-heading h2{font-size:clamp(1.65rem,7.5vw,2.2rem);overflow-wrap:anywhere;}
  .section-head p{font-size:.88rem;}
  .quick-grid{grid-template-columns:1fr !important;}
  .quick-card{min-height:86px;padding:14px;}
  .quick-card b{font-size:.8rem;}
  .quick-card small{font-size:.6rem;}
  .announcement-grid,.agenda-grid{grid-template-columns:1fr !important;}
  .agenda-card{grid-template-columns:60px minmax(0,1fr);gap:12px;}
  .gallery-grid{grid-template-columns:1fr !important;}

  .page-hero{padding-top:100px !important;padding-bottom:52px !important;}
  .page-hero h1{font-size:clamp(2rem,10vw,2.5rem) !important;overflow-wrap:anywhere;}
  .page-hero p{font-size:.92rem;}

  .profile-page-card{padding:12px !important;gap:12px !important;}
  .profile-page-card img{max-height:260px !important;}
  .testimonial-card{padding:20px;}
  .testimonial-card p{font-size:1.15rem;}

  .footer__inner--unified{grid-template-columns:1fr !important;gap:10px !important;padding-left:14px !important;padding-right:14px !important;}
  .footer__contact{grid-column:auto !important;white-space:normal;}
  .footer__contact span{max-width:100%;white-space:normal;overflow-wrap:anywhere;}
  .footer__brand-block strong,.footer__brand-block p{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;}

  .page-footnote{width:calc(100% - 20px) !important;}
}

@media (max-width: 360px){
  .navbar__inner{padding-left:10px !important;padding-right:10px !important;}
  .brand__logo-wrap,.brand__mark{width:44px !important;height:44px !important;flex-basis:44px !important;}
  .brand__text{font-size:.68rem;}
  .hero{padding-top:96px !important;}
  .hero__title{font-size:1.82rem !important;}
  .btn{padding-left:15px;padding-right:15px;}
  .page-footnote__tools{gap:3px !important;}
}


/* =========================================================
   RESPONSIVE MASTER LAYER — 2026-09-01
   Authoritative rules for desktop/tablet/mobile.
   This layer intentionally overrides earlier staged patches.
========================================================= */

/* All viewport sizes: prevent intrinsic children from creating overflow. */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
.container, .navbar__inner, .hero__inner { min-width:0; }
.grid, [class*="-grid"] { min-width:0; }
[class*="-card"], [class*="__body"], [class*="__copy"], [class*="__text"] { min-width:0; }

/* 901–1240: preserve desktop navigation while giving content more room. */
@media (min-width:901px) and (max-width:1240px){
  .container, .navbar__inner, .hero__inner { padding-left:20px; padding-right:20px; }
  .navbar__inner { gap:14px; }
  .nav-links { gap:18px; }
  .brand { min-width:0; }
  .brand__text { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* 768–900: tablet/large-phone drawer. */
@media (min-width:768px) and (max-width:900px){
  .container { padding-left:20px; padding-right:20px; }
  .nav-links { width:min(380px,82vw) !important; }
}

/* <=900: one authoritative mobile navigation model. */
@media (max-width:900px){
  .site-headnote { min-height:30px; height:30px; }
  .site-headnote__inner { min-height:30px; height:30px; overflow:hidden; }

  .navbar {
    position:fixed !important;
    top:30px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:68px !important;
    z-index:5000 !important;
  }
  .navbar__inner {
    width:100%; height:68px; min-height:68px !important;
    padding:8px 16px !important;
  }
  .brand { min-width:0; max-width:calc(100% - 52px); flex:1 1 auto; }
  .brand__text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-tools { margin-left:auto; flex:0 0 auto; }
  .hamburger { display:flex !important; width:42px; height:42px; padding:8px; align-items:center; justify-content:center; }
  .hamburger span { width:24px; height:2px; }

  .nav-links {
    position:fixed !important;
    top:98px !important;
    right:-105vw !important;
    left:auto !important;
    bottom:0 !important;
    width:min(360px,90vw) !important;
    max-width:90vw !important;
    height:auto !important;
    max-height:calc(100dvh - 98px) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:14px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:4px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:rgba(255,255,255,.98) !important;
    border-left:1px solid rgba(18,35,63,.10) !important;
    box-shadow:-20px 0 50px rgba(18,35,63,.16) !important;
    z-index:5100 !important;
    transition:right .28s ease !important;
  }
  .nav-links.open { right:0 !important; }

  .nav-item, .nav-link-wrap, .nav-link { width:100%; min-width:0; }
  .nav-link-wrap { display:flex !important; align-items:center; }
  .nav-link-wrap > .nav-link { flex:1 1 auto; min-width:0; }
  .nav-link { min-height:44px; padding:10px 11px !important; font-size:.82rem; }
  .nav-toggle { min-width:38px; width:38px; height:38px; flex:0 0 38px; }

  .submenu, .submenu--primary, .submenu--nested {
    position:static !important;
    inset:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:4px 0 !important;
    padding:4px 0 4px 10px !important;
    box-shadow:none !important;
    transform:none !important;
    overflow:hidden !important;
  }
  .submenu--primary { border-left:2px solid rgba(31,111,84,.18) !important; }
  .submenu__head, .submenu__list, .submenu__link, .submenu__head-copy, .submenu__copy { min-width:0; max-width:100%; }
  .submenu__copy small { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:anywhere; }

  /* Fixed navbar is outside flow; content supplies its own spacing. */
  main { padding-top:0 !important; }
  .hero { padding-top:120px; }
  .page-hero { padding-top:120px; }

  /* Common components: never allow long content to widen the viewport. */
  .hero__text, .hero__visual, .section-head, .split-heading, .hero__actions { min-width:0; max-width:100%; }
  .hero__title, .page-hero h1, h1, h2, h3, h4, p, a, button, small, strong { overflow-wrap:anywhere; }
  .hero__actions { gap:10px; }
  .hero__actions .btn { max-width:100%; }
  .notebook-card { max-width:100%; }
  .notebook-card img { width:100%; height:auto; }
  .quick-card, .announcement-card, .news-card, .agenda-card, .download-card, .achievement-card, .facility-card, .huma-card, .employee-card, .testimonial-card, .program-card, .faq-item { min-width:0; max-width:100%; }

  /* Footer: stack before text becomes cramped. */
  .footer__contact span, .footer__brand-block p { max-width:100%; white-space:normal; overflow-wrap:anywhere; overflow:visible; text-overflow:clip; }
}

/* <=650: phone layout. */
@media (max-width:650px){
  .container { padding-left:16px !important; padding-right:16px !important; }
  .site-headnote__inner { padding-left:16px !important; padding-right:16px !important; }
  .site-headnote__dynamic, .site-headnote__dot { display:none; }
  .site-headnote__year { display:none; }
  .navbar__inner { padding-left:12px !important; padding-right:12px !important; gap:8px !important; }
  .brand { gap:9px; max-width:calc(100% - 50px); }
  .brand__logo-wrap, .brand__mark { width:48px !important; height:48px !important; flex-basis:48px !important; border-radius:13px !important; }
  .brand__text { font-size:.72rem; line-height:1.15; }
  .nav-links { top:98px !important; width:min(360px,90vw) !important; max-width:90vw !important; max-height:calc(100dvh - 98px) !important; padding:12px !important; }
  .hero { padding-top:108px !important; padding-bottom:52px !important; }
  .hero__inner { padding-left:16px !important; padding-right:16px !important; gap:28px !important; }
  .hero__title { font-size:clamp(1.9rem,9vw,2.5rem) !important; line-height:1.08; }
  .hero__desc { font-size:.9rem; }
  .section { padding:56px 0 !important; }
  .section-head { margin-bottom:24px; }
  .section-head h2, .split-heading h2 { font-size:clamp(1.65rem,7.5vw,2.2rem); }
  .quick-grid, .announcement-grid, .agenda-grid, .achievement-row, .download-grid, .gallery-grid, .gallery-grid--page, .huma-grid, .facility-grid { grid-template-columns:1fr !important; }
  .quick-card { min-height:86px; padding:14px; }
  .agenda-card { grid-template-columns:60px minmax(0,1fr); gap:12px; }
  .page-hero { padding-top:108px !important; padding-bottom:52px !important; }
  .page-hero h1 { font-size:clamp(2rem,10vw,2.5rem) !important; }
  .profile-page-card { padding:12px !important; gap:12px !important; }
  .profile-page-card img { max-height:260px !important; }
  .footer__inner--unified { grid-template-columns:1fr !important; gap:10px !important; padding-left:16px !important; padding-right:16px !important; }
  .footer__social { justify-self:start; }
  .footer__contact { grid-column:auto !important; }
  .page-footnote { width:calc(100% - 20px) !important; }
}

/* <=430: narrow phones. */
@media (max-width:430px){
  .container { padding-left:14px !important; padding-right:14px !important; }
  .navbar__inner { padding-left:10px !important; padding-right:10px !important; }
  .brand { max-width:calc(100% - 46px); }
  .brand__logo-wrap, .brand__mark { width:46px !important; height:46px !important; flex-basis:46px !important; }
  .brand__text { font-size:.69rem; }
  .hamburger { width:38px; height:38px; }
  .nav-links { width:min(340px,92vw) !important; max-width:92vw !important; }
  .hero { padding-top:104px !important; }
  .page-hero { padding-top:104px !important; }
  .hero__actions .btn { flex:1 1 140px; justify-content:center; }
  .testimonial-card { padding:20px; }
  .page-footnote { width:calc(100% - 16px) !important; }
}

/* <=360: very narrow phones. */
@media (max-width:360px){
  .navbar__inner { padding-left:8px !important; padding-right:8px !important; }
  .brand { gap:7px; max-width:calc(100% - 44px); }
  .brand__logo-wrap, .brand__mark { width:42px !important; height:42px !important; flex-basis:42px !important; border-radius:11px !important; }
  .brand__text { font-size:.64rem; }
  .hamburger { width:36px; height:36px; padding:7px; }
  .hamburger span { width:22px; }
  .nav-links { width:94vw !important; max-width:94vw !important; padding:10px !important; }
  .nav-link { min-height:42px; padding:9px 10px !important; }
  .hero { padding-top:100px !important; }
  .hero__title { font-size:1.78rem !important; }
  .hero__desc { font-size:.84rem; }
  .hero__actions .btn { flex-basis:100%; }
  .page-hero { padding-top:100px !important; }
  .page-footnote__tools { gap:3px !important; }
}

/* =========================================================
   PIXEL-PERFECT RESPONSIVE OVERRIDE — 2026-09-01
   Single authoritative navigation/layout layer.
   This intentionally wins over the earlier staged patches.
========================================================= */

html, body { width:100%; max-width:100%; overflow-x:hidden; }

/* Header geometry: the 30px portal ribbon is in normal flow;
   the main navigation is anchored directly beneath it. */
.site-headnote{
  position:relative !important;
  z-index:6000 !important;
  min-height:30px !important;
  height:30px !important;
}
.site-headnote__inner{
  min-height:30px !important;
  height:30px !important;
}

.navbar{
  position:fixed !important;
  top:30px !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:72px !important;
  z-index:5000 !important;
}
.navbar__inner{
  width:100% !important;
  max-width:var(--container) !important;
  height:72px !important;
  min-height:72px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  padding:7px 24px !important;
  gap:20px !important;
}
.brand{min-width:0 !important; flex:0 1 auto !important;}
.brand__text{min-width:0 !important;}
.nav-tools{display:flex !important; align-items:center !important; margin-left:auto !important; flex:0 0 auto !important;}

/* Desktop */
@media (min-width:901px){
  .nav-links{
    position:static !important;
    display:flex !important;
    flex:0 1 auto !important;
    margin-left:auto !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    padding:0 !important;
    overflow:visible !important;
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    transform:none !important;
    right:auto !important;
  }
  .hamburger{display:none !important;}
  .nav-item{min-width:0;}
}

/* Mobile/tablet */
@media (max-width:900px){
  .site-headnote__inner{
    padding-left:16px !important;
    padding-right:16px !important;
    justify-content:center !important;
  }
  .site-headnote__dynamic,
  .site-headnote__dot,
  .site-headnote__year{display:none !important;}

  .navbar{height:68px !important;}
  .navbar__inner{
    height:68px !important;
    min-height:68px !important;
    padding:7px 16px !important;
    gap:12px !important;
  }
  .brand{
    max-width:calc(100% - 52px) !important;
    gap:9px !important;
  }
  .brand__logo-wrap,
  .brand__mark{
    width:50px !important;
    height:50px !important;
    flex:0 0 50px !important;
    border-radius:14px !important;
  }
  .brand__text{
    font-size:.76rem !important;
    line-height:1.16 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    max-width:190px !important;
    overflow-wrap:anywhere !important;
  }
  .hamburger{
    display:flex !important;
    width:42px !important;
    height:42px !important;
    padding:8px !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 42px !important;
    border-radius:10px !important;
  }
  .hamburger span{width:24px !important;height:2px !important;}

  .nav-links{
    position:fixed !important;
    top:98px !important;
    right:-105vw !important;
    left:auto !important;
    bottom:0 !important;
    width:min(360px,90vw) !important;
    max-width:90vw !important;
    height:auto !important;
    max-height:calc(100dvh - 98px) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:14px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:4px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    background:rgba(255,255,255,.985) !important;
    border-left:1px solid rgba(18,35,63,.10) !important;
    box-shadow:-20px 0 50px rgba(18,35,63,.16) !important;
    z-index:5100 !important;
    transition:right .28s ease !important;
  }
  .nav-links.open{right:0 !important;}

  .nav-item,.nav-link-wrap,.nav-link{width:100% !important;min-width:0 !important;}
  .nav-link-wrap{display:flex !important;align-items:center !important;}
  .nav-link-wrap > .nav-link{flex:1 1 auto !important;}
  .nav-link{min-height:44px !important;padding:10px 11px !important;font-size:.82rem !important;}
  .nav-toggle{width:38px !important;min-width:38px !important;height:38px !important;flex:0 0 38px !important;}

  .submenu,.submenu--primary,.submenu--nested{
    position:static !important;
    inset:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:4px 0 !important;
    padding:4px 0 4px 10px !important;
    transform:none !important;
    box-shadow:none !important;
    background:transparent !important;
    overflow:hidden !important;
  }
  .submenu--primary{border-left:2px solid rgba(31,111,84,.18) !important;}

  body.nav-open{overflow:hidden !important;}
  main{padding-top:0 !important;}
  .hero{padding-top:104px !important;}
  .page-hero{padding-top:104px !important;}
}

/* Phone: keep the header visually identical across 320–430px. */
@media (max-width:650px){
  .navbar__inner{padding-left:12px !important;padding-right:12px !important;}
  .brand__logo-wrap,.brand__mark{width:48px !important;height:48px !important;flex-basis:48px !important;}
  .brand__text{font-size:.72rem !important;max-width:170px !important;}
  .nav-links{top:98px !important;max-height:calc(100dvh - 98px) !important;}
  .container{padding-left:16px !important;padding-right:16px !important;}
  .hero__inner{padding-left:16px !important;padding-right:16px !important;}
}

@media (max-width:430px){
  .navbar__inner{padding-left:10px !important;padding-right:10px !important;gap:8px !important;}
  .brand{max-width:calc(100% - 46px) !important;gap:8px !important;}
  .brand__logo-wrap,.brand__mark{width:46px !important;height:46px !important;flex-basis:46px !important;border-radius:13px !important;}
  .brand__text{font-size:.69rem !important;max-width:155px !important;}
  .hamburger{width:38px !important;height:38px !important;flex-basis:38px !important;}
  .hamburger span{width:23px !important;}
  .nav-links{width:min(340px,92vw) !important;max-width:92vw !important;}
  .hero{padding-top:104px !important;}
  .page-hero{padding-top:104px !important;}
}

@media (max-width:360px){
  .navbar__inner{padding-left:8px !important;padding-right:8px !important;}
  .brand{max-width:calc(100% - 44px) !important;gap:7px !important;}
  .brand__logo-wrap,.brand__mark{width:42px !important;height:42px !important;flex-basis:42px !important;border-radius:11px !important;}
  .brand__text{font-size:.64rem !important;max-width:145px !important;}
  .hamburger{width:36px !important;height:36px !important;flex-basis:36px !important;padding:7px !important;}
  .hamburger span{width:22px !important;}
  .nav-links{width:94vw !important;max-width:94vw !important;padding:10px !important;}
  .hero{padding-top:100px !important;}
  .page-hero{padding-top:100px !important;}
}

/* Tablet: retain a comfortable desktop-like content width while using the drawer. */
@media (min-width:651px) and (max-width:900px){
  .container{padding-left:20px !important;padding-right:20px !important;}
  .navbar__inner{padding-left:20px !important;padding-right:20px !important;}
  .brand__text{font-size:.82rem !important;max-width:260px !important;}
  .nav-links{width:min(380px,82vw) !important;max-width:82vw !important;}
}

/* Cache-safe revision marker; keep this as the final CSS layer. */


/* =========================================================
   STAGE 4.7 — ROBUST MOBILE DRAWER + SUBMENU FIX
   Use transform/visibility instead of right:-105vw so the
   drawer opens reliably on Safari/iOS and Chromium mobile.
========================================================= */
@media (max-width:900px){
  .navbar{position:fixed !important;top:30px !important;left:0 !important;right:0 !important;width:100% !important;height:68px !important;z-index:5000 !important;}
  .navbar__inner{height:68px !important;min-height:68px !important;}
  .nav-tools{position:relative !important;z-index:5200 !important;}
  .hamburger{position:relative !important;z-index:5300 !important;display:flex !important;pointer-events:auto !important;touch-action:manipulation !important;}

  .nav-links{
    position:fixed !important;
    top:98px !important;
    right:0 !important;
    left:auto !important;
    bottom:0 !important;
    width:min(360px,92vw) !important;
    max-width:92vw !important;
    height:auto !important;
    max-height:calc(100dvh - 98px) !important;
    margin:0 !important;
    padding:14px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:4px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate3d(105%,0,0) !important;
    opacity:0 !important;
    transition:transform .28s ease,opacity .18s ease,visibility 0s linear .28s !important;
    z-index:5100 !important;
  }
  .nav-links.open{
    right:0 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translate3d(0,0,0) !important;
    opacity:1 !important;
    transition:transform .28s ease,opacity .18s ease !important;
  }

  .nav-item,.nav-link-wrap{width:100% !important;min-width:0 !important;}
  .nav-link-wrap{display:flex !important;align-items:center !important;}
  .nav-link-wrap>.nav-link{flex:1 1 auto !important;min-width:0 !important;}
  .nav-toggle{display:inline-flex !important;visibility:visible !important;opacity:1 !important;pointer-events:auto !important;position:relative !important;z-index:5201 !important;touch-action:manipulation !important;}

  /* All submenu levels are accordion panels on mobile. */
  .nav-item>.submenu,
  .nav-item.submenu-open>.submenu,
  .nav-item.submenu-open>.submenu--primary,
  .nav-item.submenu-open>.submenu--nested{
    position:static !important;
    inset:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:4px 0 !important;
    padding:5px 0 5px 10px !important;
    transform:none !important;
    opacity:1 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  .nav-item>.submenu{display:none !important;visibility:hidden !important;pointer-events:none !important;}
  .nav-item.submenu-open>.submenu{display:block !important;visibility:visible !important;pointer-events:auto !important;}
  .submenu--primary{border-left:2px solid rgba(31,111,84,.18) !important;}
  .submenu__link{width:100% !important;min-width:0 !important;}

  body.nav-open{overflow:hidden !important;}
}
@media (max-width:430px){
  .nav-links{width:92vw !important;max-width:92vw !important;}
}
@media (max-width:360px){
  .nav-links{width:94vw !important;max-width:94vw !important;padding:10px !important;}
}


/* FINAL MOBILE NAV FALLBACK v6 — inline handler independent of external JS */
@media (max-width:900px){
  .navbar{position:fixed!important;top:30px!important;left:0!important;right:0!important;width:100%!important;height:68px!important;z-index:10000!important;}
  .navbar__inner{height:68px!important;min-height:68px!important;position:relative!important;}
  .nav-tools{position:relative!important;z-index:10003!important;}
  .hamburger{display:flex!important;position:relative!important;z-index:10004!important;pointer-events:auto!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent!important;}
  .nav-links{position:fixed!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;top:98px!important;right:0!important;left:auto!important;bottom:0!important;width:min(360px,92vw)!important;max-width:92vw!important;height:auto!important;max-height:calc(100dvh - 98px)!important;margin:0!important;padding:14px!important;gap:4px!important;overflow-y:auto!important;overflow-x:hidden!important;background:var(--paper)!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;transform:translate3d(100%,0,0)!important;transition:transform .25s ease,opacity .2s ease,visibility 0s linear .25s!important;z-index:10002!important;}
  .nav-links.open{visibility:visible!important;opacity:1!important;pointer-events:auto!important;transform:translate3d(0,0,0)!important;transition:transform .25s ease,opacity .2s ease!important;}
  .nav-item,.nav-link-wrap{width:100%!important;min-width:0!important;}
  .nav-link-wrap{display:flex!important;align-items:center!important;}
  .nav-link-wrap>.nav-link{flex:1 1 auto!important;min-width:0!important;}
  .nav-toggle{display:inline-flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;position:relative!important;z-index:10005!important;flex:0 0 36px!important;width:36px!important;height:36px!important;touch-action:manipulation!important;}
  .nav-item>.submenu{position:static!important;display:none!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:4px 0!important;padding:5px 0 5px 10px!important;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:none!important;box-shadow:none!important;}
  .nav-item.submenu-open>.submenu{display:block!important;pointer-events:auto!important;}
  .submenu--primary,.submenu--nested{width:100%!important;min-width:0!important;max-width:100%!important;border-radius:14px!important;background:transparent!important;box-shadow:none!important;padding:0!important;}
  .submenu__head{margin:5px 0!important;}
  body.nav-open{overflow:hidden!important;}
}
@media(max-width:430px){
  .nav-links{width:calc(100vw - 18px)!important;max-width:calc(100vw - 18px)!important;top:98px!important;}
  .brand__text{font-size:.76rem!important;max-width:180px!important;}
}
@media(max-width:360px){
  .brand__text{font-size:.70rem!important;max-width:155px!important;}
  .brand__logo-wrap,.brand__mark{width:46px!important;height:46px!important;flex-basis:46px!important;}
  .hamburger{width:40px!important;height:40px!important;}
}

/* =========================================================
   MOBILE NAV FINAL — single source of truth
   The hamburger must have exactly ONE click handler (script.js).
========================================================= */
@media (max-width: 900px) {
  .navbar {
    position: fixed !important;
    top: 30px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 68px !important;
    z-index: 20000 !important;
    pointer-events: auto !important;
  }

  .navbar__inner {
    position: relative !important;
    height: 68px !important;
    min-height: 68px !important;
    pointer-events: auto !important;
  }

  .nav-tools {
    position: relative !important;
    z-index: 20003 !important;
    pointer-events: auto !important;
  }

  .hamburger {
    display: flex !important;
    position: relative !important;
    z-index: 20004 !important;
    width: 46px !important;
    height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  .nav-links {
    position: fixed !important;
    top: 98px !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: min(360px, 92vw) !important;
    max-width: 92vw !important;
    height: auto !important;
    max-height: calc(100dvh - 98px) !important;
    margin: 0 !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--paper) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(100%, 0, 0) !important;
    transition: transform .25s ease, opacity .2s ease, visibility 0s linear .25s !important;
    z-index: 20002 !important;
  }

  .nav-links.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
    transition: transform .25s ease, opacity .2s ease !important;
  }

  .nav-item,
  .nav-link-wrap {
    width: 100% !important;
    min-width: 0 !important;
  }

  .nav-link-wrap {
    display: flex !important;
    align-items: center !important;
  }

  .nav-link-wrap > .nav-link {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .nav-toggle {
    display: inline-flex !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 20005 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  .nav-item > .submenu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 4px 0 !important;
    padding: 5px 0 5px 10px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: none !important;
    box-shadow: none !important;
  }

  .nav-item.submenu-open > .submenu {
    display: block !important;
    pointer-events: auto !important;
  }

  .submenu--primary,
  .submenu--nested {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  body.nav-open {
    overflow: hidden !important;
  }
}

@media (max-width: 430px) {
  .nav-links {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
  }
}


/* =========================================================
   MOBILE DRAWER VISIBILITY FIX — 2026-09-01
   The drawer lives inside the fixed navbar. Some iOS/WebKit
   builds treat backdrop-filter as a containing/stacking context
   for fixed descendants. Disable that only on mobile so the
   drawer is positioned against the viewport and always visible.
========================================================= */
@media (max-width:900px){
  .navbar{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;
    transform:none !important;
    overflow:visible !important;
    isolation:auto !important;
  }
  .navbar__inner{
    overflow:visible !important;
    transform:none !important;
    filter:none !important;
  }
  #navLinks{
    display:flex !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    transform:translate3d(100%,0,0) !important;
  }
  #navLinks.open{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translate3d(0,0,0) !important;
  }
  #navLinks.open .nav-item,
  #navLinks.open .nav-link-wrap,
  #navLinks.open .nav-link{
    visibility:visible !important;
  }
  #navLinks .nav-link{
    color:var(--ink) !important;
  }
  .dark-mode #navLinks .nav-link{
    color:#f1f5f2 !important;
  }
}

/* =========================================================
   PIXEL POLISH — MOBILE MENU + ACCORDION
   Final cascade: 320–900px
========================================================= */
@media (max-width:900px){
  #navLinks .nav-item{display:block;width:100%;margin:0;padding:0;flex:0 0 auto;}
  #navLinks .nav-link-wrap{display:flex;align-items:center;width:100%;min-height:48px;}
  #navLinks .nav-link-wrap > .nav-link{display:flex;align-items:center;min-height:46px;padding:11px 10px;border-radius:10px;text-decoration:none;line-height:1.25;}
  #navLinks .nav-toggle{appearance:none;-webkit-appearance:none;border:0;background:rgba(31,111,84,.07);border-radius:10px;color:var(--green);margin-left:6px;flex:0 0 40px;width:40px;height:40px;display:grid!important;place-items:center;}
  #navLinks .nav-toggle__chevron,
  #navLinks .nav-toggle > span:not(.nav-toggle__chevron){display:block;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s ease;}
  #navLinks .nav-item.submenu-open > .nav-link-wrap > .nav-toggle{background:rgba(31,111,84,.13);}
  #navLinks .nav-item.submenu-open > .nav-link-wrap > .nav-toggle .nav-toggle__chevron,
  #navLinks .nav-item.submenu-open > .nav-link-wrap > .nav-toggle > span:not(.nav-toggle__chevron){transform:rotate(225deg);}

  #navLinks .nav-item > .submenu,
  #navLinks .nav-item > .submenu.submenu--primary,
  #navLinks .nav-item > .submenu.submenu--nested{
    position:static!important;inset:auto!important;display:none!important;width:100%!important;min-width:0!important;max-width:none!important;
    margin:3px 0 7px!important;padding:4px 0 4px 10px!important;overflow:visible!important;
    opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:none!important;
    background:transparent!important;border:0!important;border-left:2px solid rgba(31,111,84,.18)!important;border-radius:0!important;box-shadow:none!important;
  }
  #navLinks .nav-item.submenu-open > .submenu{display:block!important;pointer-events:auto!important;}
  #navLinks .submenu__head{display:flex!important;margin:2px 0 5px!important;padding:10px 11px!important;border-radius:10px!important;}
  #navLinks .submenu__head-icon{width:32px!important;height:32px!important;flex-basis:32px!important;border-radius:9px!important;font-size:.9rem!important;}
  #navLinks .submenu__head-copy strong{font-size:.8rem!important;}
  #navLinks .submenu__head-copy small{font-size:.6rem!important;}
  #navLinks .submenu__list{padding:2px 0!important;border:0!important;}
  #navLinks .submenu__link{min-height:46px!important;padding:8px 7px!important;border-radius:9px!important;}
  #navLinks .submenu__icon{width:30px!important;height:30px!important;flex-basis:30px!important;border-radius:8px!important;}
  #navLinks .submenu__copy strong{font-size:.74rem!important;}
  #navLinks .submenu__copy small{font-size:.59rem!important;}
  #navLinks .submenu__foot{display:none!important;}
  #navLinks .submenu--nested{margin-left:5px!important;padding-left:8px!important;}
}

@media (max-width:430px){
  #navLinks{top:98px!important;width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;padding:12px!important;}
  #navLinks .nav-link-wrap > .nav-link{font-size:.78rem!important;}
}
@media (max-width:360px){
  #navLinks{width:calc(100vw - 10px)!important;max-width:calc(100vw - 10px)!important;padding:10px!important;}
  #navLinks .nav-link-wrap > .nav-link{font-size:.74rem!important;padding-left:8px!important;padding-right:8px!important;}
  #navLinks .nav-toggle{flex-basis:36px!important;width:36px!important;height:36px!important;}
}

/* PIXEL POLISH MOBILE MENU v8 */
@media (max-width:900px){
#navLinks .nav-item{display:block;width:100%;margin:0;padding:0;flex:0 0 auto}
#navLinks .nav-link-wrap{display:flex;align-items:center;width:100%;min-height:48px}
#navLinks .nav-link-wrap>.nav-link{display:flex;align-items:center;min-height:46px;padding:11px 10px;border-radius:10px;line-height:1.25}
#navLinks .nav-toggle{appearance:none;-webkit-appearance:none;border:0;background:rgba(31,111,84,.07);border-radius:10px;color:var(--green);margin-left:6px;flex:0 0 40px;width:40px;height:40px;display:grid!important;place-items:center}
#navLinks .nav-toggle__chevron,#navLinks .nav-toggle>span:not(.nav-toggle__chevron){display:block;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .18s ease}
#navLinks .nav-item.submenu-open>.nav-link-wrap>.nav-toggle .nav-toggle__chevron,#navLinks .nav-item.submenu-open>.nav-link-wrap>.nav-toggle>span:not(.nav-toggle__chevron){transform:rotate(225deg)}
#navLinks .nav-item>.submenu{position:static!important;inset:auto!important;display:none!important;width:100%!important;min-width:0!important;max-width:none!important;margin:3px 0 7px!important;padding:4px 0 4px 10px!important;overflow:visible!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:none!important;background:transparent!important;border:0!important;border-left:2px solid rgba(31,111,84,.18)!important;border-radius:0!important;box-shadow:none!important}
#navLinks .nav-item.submenu-open>.submenu{display:block!important;pointer-events:auto!important}
#navLinks .submenu__head{display:flex!important;margin:2px 0 5px!important;padding:10px 11px!important;border-radius:10px!important}
#navLinks .submenu__head-icon{width:32px!important;height:32px!important;flex-basis:32px!important;border-radius:9px!important}
#navLinks .submenu__head-copy strong{font-size:.8rem!important}
#navLinks .submenu__head-copy small{font-size:.6rem!important}
#navLinks .submenu__list{padding:2px 0!important;border:0!important}
#navLinks .submenu__link{min-height:46px!important;padding:8px 7px!important;border-radius:9px!important}
#navLinks .submenu__icon{width:30px!important;height:30px!important;flex-basis:30px!important;border-radius:8px!important}
#navLinks .submenu__copy strong{font-size:.74rem!important}
#navLinks .submenu__copy small{font-size:.59rem!important}
#navLinks .submenu__foot{display:none!important}
#navLinks .submenu--nested{margin-left:5px!important;padding-left:8px!important}
}
@media(max-width:430px){#navLinks{top:98px!important;width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;padding:12px!important}#navLinks .nav-link-wrap>.nav-link{font-size:.78rem!important}}
@media(max-width:360px){#navLinks{width:calc(100vw - 10px)!important;max-width:calc(100vw - 10px)!important;padding:10px!important}#navLinks .nav-link-wrap>.nav-link{font-size:.74rem!important;padding-left:8px!important;padding-right:8px!important}#navLinks .nav-toggle{flex-basis:36px!important;width:36px!important;height:36px!important}}


/* =========================================================
   FINAL VISUAL SYSTEM — HEADER + MOBILE ACCORDION + RESPONSIVE
   One final cascade, intentionally placed last.
========================================================= */
.navbar__inner,
.brand,
.nav-link-wrap,
.nav-tools,
.nav-item { min-width: 0; }

.brand__logo-wrap { flex: 0 0 auto; }
.brand__logo { display:block; }
.brand__text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (min-width: 901px) {
  .navbar { position: sticky !important; top: 30px !important; z-index: 3000 !important; }
  .navbar__inner { min-height: 72px !important; }
  .nav-links { position: relative !important; display:flex !important; margin-left:auto !important; }
  .nav-links > .nav-item { flex:0 0 auto; }
  .submenu { z-index: 4000 !important; }
}

@media (max-width: 900px) {
  .site-headnote { height:30px !important; min-height:30px !important; }
  .site-headnote__inner { height:30px !important; min-height:30px !important; }
  .navbar {
    position: fixed !important; top:30px !important; left:0 !important; right:0 !important;
    height:68px !important; z-index:20000 !important; overflow:visible !important;
    transform:none !important; filter:none !important; backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .navbar__inner { height:68px !important; min-height:68px !important; padding:6px 16px !important; gap:12px !important; }
  .brand { flex:1 1 auto !important; max-width:calc(100% - 54px) !important; gap:10px !important; }
  .brand__logo-wrap,.brand__mark { width:52px !important; height:52px !important; flex-basis:52px !important; border-radius:14px !important; }
  .brand__text { font-size:.78rem !important; max-width:none !important; }
  .nav-tools { flex:0 0 auto !important; margin-left:auto !important; }
  .hamburger { width:46px !important; height:46px !important; padding:9px !important; z-index:20004 !important; }

  #navLinks {
    position:fixed !important; top:98px !important; right:0 !important; left:auto !important; bottom:10px !important;
    width:min(360px, calc(100vw - 16px)) !important; max-width:calc(100vw - 16px) !important;
    height:auto !important; max-height:none !important; margin:0 !important; padding:14px !important;
    display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:3px !important;
    overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain !important;
    background:var(--paper,#f7faf8) !important; border:1px solid rgba(18,35,63,.10) !important;
    border-radius:18px 0 0 18px !important; box-shadow:0 20px 60px rgba(18,35,63,.20) !important;
    opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
    transform:translate3d(105%,0,0) !important; transition:transform .24s ease,opacity .18s ease,visibility 0s linear .24s !important;
    z-index:20002 !important;
  }
  #navLinks.open { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translate3d(0,0,0) !important; transition:transform .24s ease,opacity .18s ease !important; }
  #navLinks .nav-item { width:100% !important; flex:0 0 auto !important; }
  #navLinks .nav-link-wrap { display:flex !important; align-items:center !important; width:100% !important; min-height:48px !important; }
  #navLinks .nav-link-wrap > .nav-link { flex:1 1 auto !important; min-width:0 !important; display:flex !important; align-items:center !important; min-height:46px !important; padding:10px 11px !important; border-radius:10px !important; }
  #navLinks .nav-toggle { display:grid !important; place-items:center !important; width:40px !important; height:40px !important; flex:0 0 40px !important; margin-left:6px !important; border:0 !important; border-radius:10px !important; background:rgba(31,111,84,.07) !important; color:var(--green) !important; z-index:20005 !important; touch-action:manipulation !important; }
  #navLinks .nav-toggle__chevron,#navLinks .nav-toggle > span:not(.nav-toggle__chevron) { width:9px !important; height:9px !important; border-right:2px solid currentColor !important; border-bottom:2px solid currentColor !important; transform:rotate(45deg) !important; }
  #navLinks .nav-item.submenu-open > .nav-link-wrap > .nav-toggle { background:rgba(31,111,84,.14) !important; }
  #navLinks .nav-item.submenu-open > .nav-link-wrap > .nav-toggle .nav-toggle__chevron,
  #navLinks .nav-item.submenu-open > .nav-link-wrap > .nav-toggle > span:not(.nav-toggle__chevron) { transform:rotate(225deg) !important; }

  #navLinks .nav-item > .submenu,
  #navLinks .nav-item.submenu-open > .submenu {
    position:static !important; inset:auto !important; width:100% !important; min-width:0 !important; max-width:100% !important;
    margin:3px 0 7px !important; padding:5px 0 5px 10px !important; border:0 !important; border-left:2px solid rgba(31,111,84,.18) !important;
    border-radius:0 !important; background:transparent !important; box-shadow:none !important; transform:none !important;
    opacity:1 !important; visibility:visible !important;
  }
  #navLinks .nav-item > .submenu { display:none !important; pointer-events:none !important; }
  #navLinks .nav-item.submenu-open > .submenu { display:block !important; pointer-events:auto !important; }
  #navLinks .submenu__head { display:flex !important; }
  #navLinks .submenu__foot { display:none !important; }
  #navLinks .submenu__link { width:100% !important; min-height:46px !important; padding:8px 7px !important; border-radius:9px !important; }
  #navLinks .submenu__copy { min-width:0 !important; }
  #navLinks .submenu__copy small { white-space:normal !important; overflow-wrap:anywhere !important; }
  body.nav-open { overflow:hidden !important; }
}

@media (max-width: 430px) {
  .navbar__inner { padding-left:10px !important; padding-right:10px !important; gap:8px !important; }
  .brand { gap:8px !important; max-width:calc(100% - 50px) !important; }
  .brand__logo-wrap,.brand__mark { width:46px !important; height:46px !important; flex-basis:46px !important; border-radius:13px !important; }
  .brand__text { font-size:.72rem !important; }
  #navLinks { width:calc(100vw - 12px) !important; max-width:calc(100vw - 12px) !important; padding:11px !important; }
}

@media (max-width: 360px) {
  .brand__logo-wrap,.brand__mark { width:42px !important; height:42px !important; flex-basis:42px !important; border-radius:11px !important; }
  .brand__text { font-size:.66rem !important; }
  .hamburger { width:42px !important; height:42px !important; }
  #navLinks { width:calc(100vw - 8px) !important; max-width:calc(100vw - 8px) !important; padding:9px !important; }
  #navLinks .nav-link-wrap > .nav-link { font-size:.74rem !important; padding-left:8px !important; padding-right:8px !important; }
  #navLinks .nav-toggle { width:36px !important; height:36px !important; flex-basis:36px !important; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .navbar__inner { padding-left:18px !important; padding-right:18px !important; gap:12px !important; }
  .brand__text { max-width:180px !important; }
  .nav-link { padding-left:7px !important; padding-right:7px !important; font-size:.72rem !important; }
}

/* =========================================================
   DAYAK / HUMA BETANG VISUAL REFRESH — 2026
   Elegant dark palette with fresh forest, jade and warm gold.
   CSS-only cultural texture: geometric/batik-inspired bands.
========================================================= */
:root{
  --dayak-forest:#0B1716;
  --dayak-deep:#0D141D;
  --dayak-panel:#12231F;
  --dayak-panel-2:#172C27;
  --dayak-jade:#35B887;
  --dayak-jade-soft:#8EE0BE;
  --dayak-gold:#E9A93A;
  --dayak-gold-soft:#FFD071;
  --dayak-red:#C95B45;
  --dayak-cream:#F4F0E5;
  --dayak-muted:#AAB9B5;
}

/* Fresh light mode companion palette */
body{
  background:
    radial-gradient(circle at 8% 8%, rgba(233,169,58,.06), transparent 26%),
    linear-gradient(180deg,#F7F7F1 0%,#F2F5EF 100%);
}
.navbar{
  background:rgba(247,248,242,.90);
  border-bottom-color:rgba(22,35,63,.10);
}
.tag-sticker{background:linear-gradient(135deg,#F5B942,#E9A93A);}
.btn--accent{background:linear-gradient(135deg,var(--dayak-red),#A84438);}
.btn--primary{background:linear-gradient(135deg,#183A31,#1F6F54);}
.btn--ghost{border-color:#24483D;color:#183A31;}
.btn--ghost:hover{background:#183A31;color:#fff;}

/* Dark mode: main visual language */
html.dark-mode body,
.dark-mode{
  --paper:var(--dayak-deep);
  --paper-line:#20302F;
  --ink:#F4F6F3;
  --green:var(--dayak-jade);
  --green-dark:#67D1A4;
  --red:var(--dayak-red);
  --yellow:var(--dayak-gold);
  --graphite:var(--dayak-muted);
  --white:var(--dayak-panel);
  --line:#29413A;
  background:
    radial-gradient(circle at 88% 12%, rgba(53,184,135,.09), transparent 24%),
    radial-gradient(circle at 8% 48%, rgba(233,169,58,.055), transparent 22%),
    linear-gradient(180deg,#0A121A 0%,#0D171E 52%,#0A1414 100%);
  color:var(--ink);
}

html.dark-mode body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.18;
  background-image:
    linear-gradient(45deg,transparent 45%,rgba(233,169,58,.12) 46%,rgba(233,169,58,.12) 54%,transparent 55%),
    linear-gradient(-45deg,transparent 45%,rgba(53,184,135,.08) 46%,rgba(53,184,135,.08) 54%,transparent 55%);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,transparent,black 12%,black 88%,transparent);
}

.dark-mode .navbar{
  background:rgba(9,18,25,.88)!important;
  border-bottom:1px solid rgba(233,169,58,.16)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
}
.dark-mode .site-headnote{
  background:linear-gradient(90deg,#091116 0%,#0D2A22 52%,#10261F 100%)!important;
  border-bottom:1px solid rgba(233,169,58,.16);
}
.dark-mode .brand__logo-wrap,
.dark-mode .brand__mark,
.dark-mode .nav-home{
  background:linear-gradient(145deg,#18352D,#11221F)!important;
  border-color:rgba(233,169,58,.25)!important;
  box-shadow:0 8px 25px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.035);
}
.dark-mode .brand__text,.dark-mode .nav-link{color:#F2F5F2!important;}
.dark-mode .nav-link:hover,.dark-mode .nav-link.active{color:#8BE1BC!important;}
.dark-mode .nav-link.active::after{background:linear-gradient(90deg,var(--dayak-gold),var(--dayak-jade));}
.dark-mode .hamburger span{background:#F4F6F3!important;}

/* Hero / home */
.dark-mode .hero{
  background:
    radial-gradient(circle at 84% 34%,rgba(53,184,135,.11),transparent 23%),
    linear-gradient(180deg,rgba(10,18,26,.35),rgba(10,18,26,.02));
}
.dark-mode .hero__lines{
  background-image:repeating-linear-gradient(to bottom,transparent,transparent 38px,rgba(84,112,105,.16) 39px);
  opacity:.5;
}
.dark-mode .hero__title{color:#F5F7F4;letter-spacing:-.035em;}
.dark-mode .hero__note-handwritten{color:#E27661;}
.dark-mode .hero__desc{color:#B9C5C2;}
.dark-mode .ink-underline{color:#7ADBB0;}
.dark-mode .ink-underline::after{background:rgba(53,184,135,.17);}
.dark-mode .notebook-card{
  background:linear-gradient(145deg,#17252D,#12201F)!important;
  border:1px solid rgba(233,169,58,.16);
  box-shadow:0 25px 60px rgba(0,0,0,.32);
}
.dark-mode .stat-pin{background:linear-gradient(145deg,#182E29,#11211F)!important;border:1px solid rgba(53,184,135,.18);}
.dark-mode .stat-pin--2{background:linear-gradient(145deg,#A94B3D,#7F352D)!important;}

/* Sections */
.dark-mode .section--tint{background:linear-gradient(180deg,#111D24,#101A20)!important;}
.dark-mode .section--ruled{background-image:repeating-linear-gradient(to bottom,transparent,transparent 38px,rgba(82,108,101,.13) 39px);}
.dark-mode .section-head p,.dark-mode .split-heading p{color:#AEBBB8;}
.dark-mode .eyebrow{color:#E9A93A;}
.dark-mode .text-link{color:#62D2A1;}

/* Cards: forest + jade, not flat grey */
.dark-mode .about-card,
.dark-mode .program-card,
.dark-mode .facility-card,
.dark-mode .news-card,
.dark-mode .announcement-card,
.dark-mode .agenda-card,
.dark-mode .download-card,
.dark-mode .achievement-card,
.dark-mode .testimonial-card,
.dark-mode .faq-item,
.dark-mode .huma-card{
  background:linear-gradient(145deg,#152720,#111E21)!important;
  border-color:rgba(93,157,133,.18)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025);
}
.dark-mode .about-card h3,.dark-mode .program-card h3,.dark-mode .achievement-card h3{color:#7EDCB3;}
.dark-mode .about-card p,.dark-mode .program-card p,.dark-mode .news-card p,.dark-mode .announcement-card p{color:#B3C0BD;}
.dark-mode .announcement-card.is-important{border-top-color:var(--dayak-gold)!important;}
.dark-mode .agenda-date{background:linear-gradient(145deg,#1F7458,#174C3C);}
.dark-mode .download-icon{background:rgba(53,184,135,.12);color:#7FE0B6;border:1px solid rgba(53,184,135,.16);}
.dark-mode .achievement-card{background:linear-gradient(145deg,#182C27,#101B1F)!important;}

/* Quick cards — hero-like, cultural */
.dark-mode .quick-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#142A24 0%,#11211F 62%,#152B27 100%)!important;
  border:1px solid rgba(233,169,58,.20)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.03);
}
.dark-mode .quick-card::after{
  content:"";
  position:absolute;
  width:170px;height:170px;
  right:-70px;bottom:-105px;
  border-radius:50%;
  border:1px solid rgba(233,169,58,.14);
  box-shadow:0 0 0 16px rgba(233,169,58,.025),0 0 0 32px rgba(233,169,58,.02);
  pointer-events:auto;
}
.dark-mode .quick-card--green{border-left:4px solid var(--dayak-jade)!important;}
.dark-mode .quick-card--orange{border-left:4px solid var(--dayak-gold)!important;}
.dark-mode .quick-card--blue{border-left:4px solid #76A9C9!important;}
.dark-mode .quick-card--purple{border-left:4px solid #9B87C9!important;}
.dark-mode .quick-icon{background:rgba(233,169,58,.10)!important;color:#FFD071!important;border:1px solid rgba(233,169,58,.16);}
.dark-mode .quick-card b{color:#F2F5F2;}
.dark-mode .quick-card small{color:#AFC0BA;}
.dark-mode .quick-arrow{color:#6ED8AA;}

/* The lower Beranda info box / footnote */
.dark-mode .page-footnote-wrap{
  background:#0A141A!important;
  position:relative;
}
.dark-mode .page-footnote-wrap::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#C99435 20%,#E9A93A 50%,#C99435 80%,transparent);
  opacity:.7;
}
.dark-mode .page-footnote{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(17,42,35,.98),rgba(18,37,33,.97)),
    repeating-linear-gradient(45deg,transparent 0 8px,rgba(233,169,58,.04) 8px 10px)!important;
  border:1px solid rgba(233,169,58,.26)!important;
  border-radius:24px!important;
  box-shadow:0 18px 42px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.035);
}
.dark-mode .page-footnote::after{
  content:"✦";
  position:absolute;
  left:18px;top:50%;transform:translateY(-50%);
  color:rgba(233,169,58,.25);
  font-size:4.4rem;
  line-height:1;
  pointer-events:none;
}
.dark-mode .page-footnote__page{color:#75D9AC!important;letter-spacing:.05em;}
.dark-mode .page-footnote__text{color:#D3DBD7!important;}
.dark-mode .foot-tool{
  background:linear-gradient(145deg,#19352D,#142822)!important;
  color:#F2F5F2!important;
  border-color:rgba(233,169,58,.20)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.dark-mode .foot-tool:hover{background:linear-gradient(145deg,#245342,#1B392F)!important;color:#FFD071!important;border-color:rgba(233,169,58,.45)!important;}

/* CTA: Huma Betang atmosphere without requiring extra image assets */
.dark-mode .cta-strip{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 30%,rgba(233,169,58,.16),transparent 18%),
    radial-gradient(circle at 72% 80%,rgba(53,184,135,.13),transparent 28%),
    linear-gradient(135deg,#10241F,#0D191B 60%,#142B26)!important;
  border-top:1px solid rgba(233,169,58,.24);
  border-bottom:1px solid rgba(53,184,135,.16);
}
.dark-mode .cta-strip::before{
  content:"";
  position:absolute;
  inset:auto -5% 0 40%;
  height:70%;
  background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(233,169,58,.045) 18px 20px);
  transform:skewX(-18deg);
  pointer-events:none;
}
.dark-mode .cta-strip h2{color:#F3F6F3;}
.dark-mode .cta-strip .btn--primary{background:linear-gradient(135deg,#F0B23F,#D58E25)!important;color:#16211F!important;box-shadow:0 12px 30px rgba(233,169,58,.18);}

/* Decorative divider inspired by Dayak/Batik geometry */
.dark-mode .section + .section::before,
.dark-mode .page-footnote-wrap + .footer::before{
  content:"◇ ─ ◇ ─ ◇";
  display:block;
  text-align:center;
  color:rgba(233,169,58,.38);
  letter-spacing:.45em;
  font-size:.7rem;
  height:22px;
  overflow:hidden;
}

/* Footer */
.dark-mode .footer{background:linear-gradient(180deg,#0A1519,#081015)!important;}
.dark-mode .footer__brand-block strong{color:#F2F5F2;}
.dark-mode .footer__brand-block p,.dark-mode .footer__contact{color:#AEBBB8;}
.dark-mode .footer-brand .brand__mark--footer{background:linear-gradient(145deg,#F4F0E5,#DCD4C2)!important;border-color:rgba(233,169,58,.25)!important;}
.dark-mode .footer__copy{color:#82918D;}
.dark-mode .social-btn{border-color:rgba(233,169,58,.18)!important;background:#13241F!important;}

/* Mobile: keep ornamentation elegant and uncluttered */
@media(max-width:650px){
  .dark-mode .page-footnote{border-radius:18px!important;padding:12px 14px!important;}
  .dark-mode .page-footnote::after{font-size:3rem;left:8px;}
  .dark-mode .page-footnote__copy{padding-left:28px;}
  .dark-mode .quick-card::after{opacity:.45;}
  .dark-mode .cta-strip{padding-top:42px;padding-bottom:42px;}
}
@media(max-width:430px){
  .dark-mode .page-footnote__copy{display:block;min-width:0;}
  .dark-mode .page-footnote__text{font-size:.68rem;}
  .dark-mode .page-footnote__tools{gap:5px!important;}
  .dark-mode .foot-tool{width:34px!important;height:34px!important;border-radius:10px!important;}
}

/* DESKTOP LOCK: mobile uses the same layout as desktop. The viewport meta tag is set to 1200px. */
@media (max-width: 1199px){
  html, body{ min-width: 1200px; }
}


/* =========================================================
   FLOATING NAVIGATION MODES
   - vertical: fixed sidebar at left
   - horizontal: fixed floating bar at bottom
   - hamburger: fixed floating button + drawer
   ========================================================= */
.nav-mode-vertical .navbar__inner,
.nav-mode-horizontal .navbar__inner,
.nav-mode-hamburger .navbar__inner{pointer-events:none}
.nav-mode-vertical .brand,
.nav-mode-horizontal .brand,
.nav-mode-hamburger .brand,
.nav-mode-vertical .nav-tools,
.nav-mode-horizontal .nav-tools,
.nav-mode-hamburger .nav-tools{pointer-events:auto}

.nav-mode-vertical .nav-links,
.nav-mode-horizontal .nav-links,
.nav-mode-hamburger .nav-links{
  display:flex;
}

.nav-mode-vertical .nav-links{
  position:fixed; left:18px; top:50%; transform:translateY(-50%);
  width:218px; max-height:calc(100vh - 44px); overflow:visible;
  flex-direction:column; gap:4px; padding:12px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
  border:1px solid rgba(22,35,63,.10); border-radius:20px;
  box-shadow:0 18px 50px rgba(22,35,63,.16); z-index:1200;
}
.nav-mode-vertical .nav-item{width:100%}
.nav-mode-vertical .nav-link-wrap{width:100%; justify-content:space-between}
.nav-mode-vertical .nav-link{display:block; width:100%; padding:10px 12px; border-radius:11px}
.nav-mode-vertical .nav-link:hover{background:rgba(31,111,84,.08)}
.nav-mode-vertical .submenu{left:calc(100% + 10px); top:-8px; min-width:240px}
.nav-mode-vertical .nav-item:hover>.submenu{display:none}
.nav-mode-vertical .nav-item.submenu-open>.submenu{display:block}
.nav-mode-vertical .nav-tools .hamburger{display:none}

.nav-mode-horizontal .navbar{background:transparent;border:0;pointer-events:none}
.nav-mode-horizontal .nav-links{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  align-items:center; gap:4px; padding:9px 12px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
  border:1px solid rgba(22,35,63,.10); border-radius:999px;
  box-shadow:0 16px 44px rgba(22,35,63,.16); z-index:1200;
  max-width:calc(100vw - 40px);
}
.nav-mode-horizontal .nav-link{padding:9px 11px;border-radius:999px;white-space:nowrap}
.nav-mode-horizontal .nav-link:hover{background:rgba(31,111,84,.08)}
.nav-mode-horizontal .submenu{top:auto;bottom:calc(100% + 12px);left:0}
.nav-mode-horizontal .submenu .submenu{top:auto;bottom:-8px;left:calc(100% + 8px)}
.nav-mode-horizontal .nav-tools .hamburger{display:none}

.nav-mode-hamburger .navbar{background:transparent;border:0;pointer-events:none}
.nav-mode-hamburger .nav-links{
  position:fixed; top:20px; right:20px; width:310px; max-height:calc(100vh - 40px);
  overflow:auto; flex-direction:column; gap:4px; padding:62px 18px 18px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(16px);
  border:1px solid rgba(22,35,63,.10); border-radius:22px;
  box-shadow:0 24px 70px rgba(22,35,63,.22); z-index:1200;
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.98);
  transform-origin:top right; transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}
.nav-mode-hamburger .nav-links.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.nav-mode-hamburger .nav-item{width:100%}
.nav-mode-hamburger .nav-link-wrap{width:100%;justify-content:space-between}
.nav-mode-hamburger .nav-link{display:block;width:100%;padding:11px 12px;border-radius:11px}
.nav-mode-hamburger .nav-link:hover{background:rgba(31,111,84,.08)}
.nav-mode-hamburger .submenu{position:static;width:100%;min-width:0;margin:3px 0 5px;padding:5px 0 5px 10px;border-left:2px solid rgba(31,111,84,.16);border-radius:0;box-shadow:none;background:transparent}
.nav-mode-hamburger .nav-tools .hamburger{
  display:flex; position:fixed; top:20px; right:20px; z-index:1300;
  width:48px;height:48px;align-items:center;justify-content:center;
  background:rgba(255,255,255,.96); border:1px solid rgba(22,35,63,.10); border-radius:15px;
  box-shadow:0 12px 34px rgba(22,35,63,.16); pointer-events:auto;
}
.nav-mode-hamburger .hamburger span{width:22px}
.nav-mode-hamburger.nav-open::after{
  content:'';position:fixed;inset:0;background:rgba(15,28,38,.24);backdrop-filter:blur(2px);z-index:1100;
}
.nav-mode-hamburger.nav-open .hamburger{background:var(--green);color:#fff}
.nav-mode-hamburger.nav-open .hamburger span{background:#fff}

/* Floating navigation dark mode */
.dark-mode.nav-mode-vertical .nav-links,
.dark-mode.nav-mode-horizontal .nav-links,
.dark-mode.nav-mode-hamburger .nav-links,
.dark-mode.nav-mode-hamburger .nav-tools .hamburger{
  background:rgba(16,31,29,.96);border-color:rgba(233,169,58,.18);box-shadow:0 20px 55px rgba(0,0,0,.30)
}
.dark-mode.nav-mode-vertical .nav-link,
.dark-mode.nav-mode-horizontal .nav-link,
.dark-mode.nav-mode-hamburger .nav-link{color:#E7EEEA}
.dark-mode.nav-mode-vertical .nav-link:hover,
.dark-mode.nav-mode-horizontal .nav-link:hover,
.dark-mode.nav-mode-hamburger .nav-link:hover{background:rgba(53,184,135,.13);color:#fff}

@media(max-width:900px){
  .nav-mode-vertical .nav-links{left:10px;width:210px}
  .nav-mode-horizontal .nav-links{left:10px;right:10px;bottom:10px;transform:none;max-width:none;overflow-x:auto;justify-content:flex-start;border-radius:18px}
  .nav-mode-horizontal .nav-link{white-space:nowrap}
  .nav-mode-hamburger .nav-links{top:10px;right:10px;width:300px;max-height:calc(100vh - 20px)}
  .nav-mode-hamburger .nav-tools .hamburger{top:10px;right:10px}
}


/* =========================================================
   NAVIGATION MODE OVERRIDE v2
   Mode is read directly from #navbar[data-navigation-mode].
   This avoids conflicts with older responsive/menu CSS.
   ========================================================= */
.navbar[data-navigation-mode="vertical"] .nav-links{
  position:fixed !important; left:18px !important; top:50% !important; right:auto !important; bottom:auto !important;
  transform:translateY(-50%) !important; width:218px !important; max-width:none !important; max-height:calc(100vh - 44px) !important;
  display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:4px !important;
  padding:12px !important; overflow:visible !important; visibility:visible !important; opacity:1 !important;
  background:rgba(255,255,255,.96) !important; border:1px solid rgba(22,35,63,.10) !important; border-radius:20px !important;
  box-shadow:0 18px 50px rgba(22,35,63,.16) !important; z-index:1200 !important;
}
.navbar[data-navigation-mode="vertical"] .nav-tools .hamburger{display:none !important}
.navbar[data-navigation-mode="vertical"] .nav-item{width:100% !important}
.navbar[data-navigation-mode="vertical"] .nav-link{display:block !important;width:100% !important;padding:10px 12px !important;border-radius:11px !important}
.navbar[data-navigation-mode="vertical"] .submenu{left:calc(100% + 10px) !important;top:-8px !important;bottom:auto !important}

.navbar[data-navigation-mode="horizontal"]{background:transparent !important;border:0 !important}
.navbar[data-navigation-mode="horizontal"] .nav-links{
  position:fixed !important; left:50% !important; top:auto !important; right:auto !important; bottom:20px !important;
  transform:translateX(-50%) !important; display:flex !important; flex-direction:row !important; align-items:center !important;
  gap:4px !important; padding:9px 12px !important; width:max-content !important; max-width:calc(100vw - 40px) !important;
  overflow:visible !important; visibility:visible !important; opacity:1 !important;
  background:rgba(255,255,255,.96) !important; border:1px solid rgba(22,35,63,.10) !important; border-radius:999px !important;
  box-shadow:0 16px 44px rgba(22,35,63,.16) !important; z-index:1200 !important;
}
.navbar[data-navigation-mode="horizontal"] .nav-tools .hamburger{display:none !important}
.navbar[data-navigation-mode="horizontal"] .nav-link{padding:9px 11px !important;border-radius:999px !important;white-space:nowrap !important}
.navbar[data-navigation-mode="horizontal"] .submenu{top:auto !important;bottom:calc(100% + 12px) !important;left:0 !important}

.navbar[data-navigation-mode="hamburger"]{background:transparent !important;border:0 !important}
.navbar[data-navigation-mode="hamburger"] .nav-links{
  position:fixed !important; top:20px !important; right:20px !important; left:auto !important; bottom:auto !important;
  width:310px !important; max-width:none !important; max-height:calc(100vh - 40px) !important;
  display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:4px !important;
  padding:62px 18px 18px !important; overflow:auto !important;
  background:rgba(255,255,255,.98) !important; border:1px solid rgba(22,35,63,.10) !important; border-radius:22px !important;
  box-shadow:0 24px 70px rgba(22,35,63,.22) !important; z-index:1200 !important;
  opacity:0 !important; visibility:hidden !important; transform:translateY(-10px) scale(.98) !important;
}
.navbar[data-navigation-mode="hamburger"] .nav-links.open{opacity:1 !important;visibility:visible !important;transform:translateY(0) scale(1) !important}
.navbar[data-navigation-mode="hamburger"] .nav-tools .hamburger{
  display:flex !important; position:fixed !important; top:20px !important; right:20px !important; z-index:1300 !important;
  width:48px !important;height:48px !important;align-items:center !important;justify-content:center !important;
  background:rgba(255,255,255,.97) !important;border:1px solid rgba(22,35,63,.10) !important;border-radius:15px !important;
  box-shadow:0 12px 34px rgba(22,35,63,.16) !important;pointer-events:auto !important;
}
.navbar[data-navigation-mode="hamburger"] .submenu{position:static !important;width:100% !important;min-width:0 !important}

@media(max-width:1199px){
  .navbar[data-navigation-mode="vertical"] .nav-links{left:18px !important;width:218px !important}
  .navbar[data-navigation-mode="horizontal"] .nav-links{left:50% !important;right:auto !important;bottom:20px !important;max-width:calc(100vw - 40px) !important;overflow-x:auto !important}
  .navbar[data-navigation-mode="hamburger"] .nav-links{top:20px !important;right:20px !important;width:310px !important}
  .navbar[data-navigation-mode="hamburger"] .nav-tools .hamburger{top:20px !important;right:20px !important}
}

/* NAV FIX v7 — posisi navigasi dan submenu klik */
@media (min-width: 901px){
  .navbar[data-navigation-mode="horizontal"] .nav-links{
    position: fixed !important;
    top: 58px !important;
    left: auto !important;
    right: 12vw !important;
    margin: 0 !important;
    z-index: 12000 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    pointer-events: auto !important;
  }
  .navbar[data-navigation-mode="horizontal"] .navbar__inner{position:relative !important;}
}
/* Ensure the parent arrow is a real clickable button, not a decorative triangle. */
#navLinks .nav-item.has-submenu > .nav-link-wrap > .nav-toggle{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:20000 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  flex:0 0 34px !important;
  width:34px !important;
  min-width:34px !important;
  height:34px !important;
  touch-action:manipulation !important;
}
#navLinks .nav-item.has-submenu > .nav-link-wrap{
  position:relative !important;
  z-index:20000 !important;
}
#navLinks .nav-item > .submenu{
  pointer-events:none !important;
}
#navLinks .nav-item.submenu-open > .submenu{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  z-index:25000 !important;
}
#navLinks .nav-item.submenu-open > .nav-link-wrap > .nav-toggle .nav-toggle__chevron{
  transform:rotate(225deg) translate(-1px,-1px) !important;
}

/* =========================================================
   NAVIGATION FINAL FIX v8
   Horizontal mode follows the approved header composition:
   brand on the left, navigation on the right, dropdowns DOWN.
   Parent menus open ONLY by clicking the arrow button.
   ========================================================= */
@media (min-width: 901px){
  .navbar[data-navigation-mode="horizontal"] .navbar__inner{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    min-height:76px !important;
    overflow:visible !important;
  }
  .navbar[data-navigation-mode="horizontal"] .brand{
    position:relative !important;
    z-index:12001 !important;
    flex:0 0 auto !important;
    margin-right:24px !important;
  }
  .navbar[data-navigation-mode="horizontal"] #navLinks{
    position:absolute !important;
    left:auto !important;
    right:0 !important;
    top:0 !important;
    bottom:auto !important;
    transform:none !important;
    width:max-content !important;
    max-width:none !important;
    min-width:0 !important;
    height:76px !important;
    max-height:none !important;
    padding:0 18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    overflow:visible !important;
    visibility:visible !important;
    opacity:1 !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(22,35,63,.10) !important;
    border-radius:999px !important;
    box-shadow:0 16px 44px rgba(22,35,63,.14) !important;
    z-index:12000 !important;
  }
  .navbar[data-navigation-mode="horizontal"] #navLinks > .nav-item{
    position:relative !important;
    flex:0 0 auto !important;
    width:auto !important;
    overflow:visible !important;
  }
  .navbar[data-navigation-mode="horizontal"] #navLinks > .nav-item > .nav-link-wrap{
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    overflow:visible !important;
  }
  .navbar[data-navigation-mode="horizontal"] #navLinks .nav-link{
    display:flex !important;
    align-items:center !important;
    width:auto !important;
    min-width:0 !important;
    padding:10px 12px !important;
    white-space:nowrap !important;
    border-radius:999px !important;
  }
  .navbar[data-navigation-mode="horizontal"] #navLinks .nav-toggle{
    position:relative !important;
    flex:0 0 28px !important;
    width:28px !important;
    min-width:28px !important;
    height:34px !important;
    margin-left:-4px !important;
    border:0 !important;
    background:transparent !important;
    z-index:20001 !important;
    cursor:pointer !important;
  }
  .navbar[data-navigation-mode="horizontal"] #navLinks .nav-item > .submenu{
    position:absolute !important;
    left:0 !important;
    right:auto !important;
    top:calc(100% + 8px) !important;
    bottom:auto !important;
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(-6px) !important;
    transform-origin:top left !important;
    pointer-events:none !important;
    z-index:30000 !important;
  }
  .navbar[data-navigation-mode="horizontal"] #navLinks .nav-item.submenu-open > .submenu{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
    pointer-events:auto !important;
  }
  .navbar[data-navigation-mode="horizontal"] #navLinks .submenu .nav-item > .submenu{
    left:calc(100% + 8px) !important;
    right:auto !important;
    top:0 !important;
    bottom:auto !important;
  }
  /* Never let hover/focus alone force a dropdown open. */
  .navbar[data-navigation-mode="horizontal"] #navLinks .nav-item:hover > .submenu,
  .navbar[data-navigation-mode="horizontal"] #navLinks .nav-item:focus-within > .submenu{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .navbar[data-navigation-mode="horizontal"] #navLinks .nav-item.submenu-open:hover > .submenu,
  .navbar[data-navigation-mode="horizontal"] #navLinks .nav-item.submenu-open:focus-within > .submenu{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
}

/* DARK MODE NAV FIX — keep the floating navigation highly visible */
.dark-mode .navbar{
  background:rgba(248,249,244,.98)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.32)!important;
}
.dark-mode .navbar .nav-link,
.dark-mode .navbar .nav-item.has-submenu>.nav-link-wrap:after{
  color:#12233f!important;
}
.dark-mode .navbar .nav-link:hover{
  background:rgba(31,111,84,.12)!important;
  color:#164f3c!important;
}
.dark-mode .navbar .nav-toggle{
  color:#12233f!important;
}
.dark-mode .navbar .nav-toggle:hover{
  background:rgba(31,111,84,.12)!important;
  color:#164f3c!important;
}
.dark-mode .navbar .brand__text{color:#12233f!important}
.dark-mode .navbar .brand__logo-wrap{background:#fff;border-color:rgba(255,255,255,.22);box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* DARK MODE NAV FIX — keep the floating navigation highly visible */
.dark-mode .navbar{
  background:rgba(248,249,244,.98)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.32)!important;
}
.dark-mode .navbar .nav-link,
.dark-mode .navbar .nav-item.has-submenu>.nav-link-wrap:after{
  color:#12233f!important;
}
.dark-mode .navbar .nav-link:hover{
  background:rgba(31,111,84,.12)!important;
  color:#164f3c!important;
}
.dark-mode .navbar .nav-toggle{
  color:#12233f!important;
}
.dark-mode .navbar .nav-toggle:hover{
  background:rgba(31,111,84,.12)!important;
  color:#164f3c!important;
}
.dark-mode .navbar .brand__text{color:#12233f!important}
.dark-mode .navbar .brand__logo-wrap{background:#fff;border-color:rgba(255,255,255,.22);box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* DARK MODE FINAL BRAND CONTRAST FIX — keep the floating navbar light and school name readable */
html.dark-mode .navbar{background:rgba(255,255,255,.96)!important;border-color:rgba(18,35,63,.10)!important;box-shadow:0 10px 32px rgba(0,0,0,.18)!important}
html.dark-mode .navbar .brand__text{color:#12233f!important;text-shadow:none!important}
html.dark-mode .navbar .nav-link{color:#12233f!important}
html.dark-mode .navbar .nav-toggle{color:#12233f!important}
html.dark-mode .navbar .nav-link:hover{color:#1f6f54!important;background:rgba(31,111,84,.09)!important}

/* DARK MODE FINAL BRAND CONTRAST FIX — keep the floating navbar light and school name readable */
html.dark-mode .navbar{background:rgba(255,255,255,.96)!important;border-color:rgba(18,35,63,.10)!important;box-shadow:0 10px 32px rgba(0,0,0,.18)!important}
html.dark-mode .navbar .brand__text{color:#12233f!important;text-shadow:none!important}
html.dark-mode .navbar .nav-link{color:#12233f!important}
html.dark-mode .navbar .nav-toggle{color:#12233f!important}
html.dark-mode .navbar .nav-link:hover{color:#1f6f54!important;background:rgba(31,111,84,.09)!important}