:root{
  --bg:#ffffff;
  --bg-alt:#f5f5f7;
  --ink:#1d1d1f;
  --ink-soft:#6e6e73;
  --line:rgba(0,0,0,.08);
  --green:#1f5c3e;
  --green-deep:#123c28;
  --gold:#b08d57;
  --radius-lg:28px;
  --radius-md:18px;
  --container:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:-apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--container); margin:0 auto; padding:0 24px;}

h1,h2,h3,h4{margin:0; font-weight:600;}
.display{
  font-size:clamp(2.4rem, 5.4vw, 4.6rem);
  line-height:1.03;
  letter-spacing:-0.03em;
  font-weight:600;
}
.headline{
  font-size:clamp(1.8rem, 3.2vw, 2.6rem);
  line-height:1.08;
  letter-spacing:-0.02em;
  font-weight:600;
}
.eyebrow{
  font-size:.95rem;
  color:var(--ink-soft);
  letter-spacing:0;
  font-weight:500;
}
p{ line-height:1.5; color:var(--ink-soft); max-width:60ch; }

/* ---------- NAV ---------- */
header.nav{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  height:56px; display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:1.02rem; }
.brand .mark{
  width:26px; height:26px; border-radius:7px;
  background:linear-gradient(150deg, var(--green), var(--green-deep));
  flex-shrink:0;
}
nav.links{ display:flex; align-items:center; gap:26px; }
nav.links > a, nav.links > .drop > button{
  font-size:.9rem; font-weight:500; color:var(--ink);
  background:none; border:none; cursor:pointer; padding:6px 0;
  font-family:inherit;
}
nav.links > a.active{ color:var(--green-deep); }
.drop{ position:relative; }
.drop:hover .drop-panel, .drop:focus-within .drop-panel{
  opacity:1; visibility:visible; transform:translateY(0);
}
.drop-panel{
  position:absolute; top:100%; left:50%; transform:translate(-50%,6px);
  opacity:0; visibility:hidden;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--line); border-radius:16px;
  padding:10px; min-width:280px;
  box-shadow:0 20px 40px rgba(0,0,0,.12);
  transition:opacity .22s ease, transform .22s ease;
  z-index:50;
}
.drop-panel a{
  display:block; padding:9px 12px; border-radius:10px; font-size:.86rem;
}
.drop-panel a:hover{ background:var(--bg-alt); }
.apply-pill{
  background:var(--ink); color:#fff; font-size:.83rem; font-weight:500;
  padding:8px 18px; border-radius:100px; transition:transform .15s ease, background .2s ease;
  white-space:nowrap;
}
.apply-pill:active{ transform:scale(.96); }
.apply-pill:hover{ background:var(--green-deep); }

.nav-toggle{
  display:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:#fff; align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:16px; height:2px; background:var(--ink); position:relative;
  transition:transform .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-5px; }
.nav-toggle span::after{ position:absolute; top:5px; }

.mobile-panel{
  display:none; flex-direction:column; gap:2px; padding:8px 24px 20px;
  border-top:1px solid var(--line); background:rgba(255,255,255,.96);
}
.mobile-panel a, .mobile-panel .m-label{
  padding:11px 4px; font-size:.94rem; border-bottom:1px solid var(--line);
}
.mobile-panel .m-label{ color:var(--ink-soft); font-size:.78rem; padding-top:16px; border-bottom:none; }
body.nav-open .mobile-panel{ display:flex; }

@media (max-width:900px){
  nav.links{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{
  padding:64px 0 48px;
  background:radial-gradient(900px 420px at 85% -20%, rgba(31,92,62,.10), transparent 60%), var(--bg);
}
.crumb{ font-size:.84rem; color:var(--ink-soft); margin-bottom:14px; }
.crumb a:hover{ color:var(--ink); }
.page-hero h1{ animation:rise .7s cubic-bezier(.22,1,.36,1) both; }
.page-hero p.lead{ font-size:1.06rem; margin-top:14px; animation:rise .7s .06s cubic-bezier(.22,1,.36,1) both; max-width:64ch; }
@keyframes rise{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .page-hero h1, .page-hero p.lead{ animation:none; } }

/* ---------- HOME HERO ---------- */
.hero{ position:relative; overflow:hidden; padding:88px 0 64px;
  background:radial-gradient(1100px 500px at 80% -10%, rgba(31,92,62,.10), transparent 60%), var(--bg); }
.hero-inner{ text-align:center; max-width:820px; margin:0 auto; }
.hero .tag{
  display:inline-flex; align-items:center; gap:8px; background:var(--bg-alt); border:1px solid var(--line);
  padding:6px 14px; border-radius:100px; font-size:.82rem; color:var(--ink-soft); margin-bottom:22px;
  animation:rise .7s cubic-bezier(.22,1,.36,1) both;
}
.hero h1{ animation:rise .8s .05s cubic-bezier(.22,1,.36,1) both; }
.hero .sub{ margin:18px auto 0; font-size:1.08rem; animation:rise .8s .12s cubic-bezier(.22,1,.36,1) both; }
.hero .codes{ margin-top:8px; font-size:.86rem; color:var(--ink-soft); animation:rise .8s .16s cubic-bezier(.22,1,.36,1) both; }
.hero .ctas{ margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; animation:rise .8s .2s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce){ .hero .tag,.hero h1,.hero .sub,.hero .codes,.hero .ctas{ animation:none; opacity:1; } }

.btn-solid, .btn-line{ padding:12px 24px; border-radius:100px; font-size:.94rem; font-weight:500; transition:transform .15s ease, opacity .2s ease; display:inline-block; }
.btn-solid{ background:var(--green); color:#fff; }
.btn-solid:hover{ opacity:.9; }
.btn-line{ border:1px solid var(--line); color:var(--ink); }
.btn-line:hover{ background:var(--bg-alt); }
.btn-solid:active, .btn-line:active{ transform:scale(.96); }

.hero-media{ margin-top:56px; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/7; position:relative; box-shadow:0 30px 60px rgba(0,0,0,.18); }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media .caption{ position:absolute; left:28px; bottom:24px; color:#fff; max-width:480px; }
.hero-media .caption h3{ font-size:1.4rem; letter-spacing:-.01em; }
.hero-media .caption p{ color:rgba(255,255,255,.85); font-size:.92rem; margin-top:6px; }
.hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.55), transparent 55%); }

/* ---------- STATS ---------- */
.stats{ padding:56px 0; background:var(--bg-alt); }
.stats-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; text-align:center; }
.stat .num{ font-size:clamp(2rem,3.4vw,2.8rem); font-weight:600; letter-spacing:-.02em; color:var(--green-deep); }
.stat .lbl{ margin-top:4px; font-size:.86rem; color:var(--ink-soft); }

/* ---------- SECTION SCAFFOLD ---------- */
section{ padding:80px 0; }
.section-head{ max-width:640px; margin-bottom:40px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- CARDS: vision/mission/values ---------- */
.vmv{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.vmv .card{ background:var(--bg-alt); border-radius:var(--radius-md); padding:32px; border:1px solid var(--line); }
.vmv .card h3{ font-size:1.1rem; margin-bottom:12px; }
.vmv .card ul{ margin:0; padding-left:18px; color:var(--ink-soft); font-size:.94rem; line-height:1.7; }
.vmv .card p{ font-size:.94rem; }

/* ---------- PRESIDENT / SPOTLIGHT BLOCK ---------- */
.spotlight{
  background:linear-gradient(135deg, var(--green-deep), var(--green));
  border-radius:var(--radius-lg); color:#fff;
  display:grid; grid-template-columns:220px 1fr; gap:36px; align-items:center; padding:40px; overflow:hidden;
}
.spotlight img{ border-radius:20px; aspect-ratio:1/1; object-fit:cover; }
.spotlight .eyebrow{ color:rgba(255,255,255,.7); }
.spotlight h3{ font-size:1.7rem; margin:6px 0 12px; letter-spacing:-.01em; }
.spotlight p{ color:rgba(255,255,255,.82); max-width:52ch; }
.spotlight a{ display:inline-block; margin-top:16px; font-size:.9rem; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:2px; }

/* ---------- PROGRAM / GENERIC CARD GRID ---------- */
.programs{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.program-card{ border:1px solid var(--line); border-radius:var(--radius-md); padding:26px 22px;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, border-color .2s ease; }
.program-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,.08); border-color:transparent; }
.program-card .idx{ font-size:.78rem; color:var(--gold); font-weight:600; }
.program-card h4{ font-size:1.02rem; margin-top:14px; line-height:1.3; letter-spacing:-.01em; }
.program-card p{ font-size:.86rem; margin-top:8px; }
.program-card .arrow{ margin-top:16px; font-size:.85rem; color:var(--ink-soft); }

.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.info-card{ border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; }
.info-card h4{ font-size:1.02rem; margin-bottom:10px; }
.info-card ul{ margin:0; padding-left:18px; color:var(--ink-soft); font-size:.92rem; line-height:1.7; }

/* ---------- BANNER (campus / photo section) ---------- */
.banner{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:380px; display:flex; align-items:flex-end; }
.banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.65), transparent 60%); }
.banner-content{ position:relative; padding:40px; color:#fff; max-width:560px; }
.banner-content p{ color:rgba(255,255,255,.85); }
.banner-content a{ display:inline-block; margin-top:16px; background:#fff; color:var(--ink); padding:10px 20px; border-radius:100px; font-size:.9rem; font-weight:500; }

/* ---------- CAROUSEL ---------- */
.carousel-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:16px; flex-wrap:wrap; }
.carousel-nav{ display:flex; gap:8px; }
.carousel-nav button{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:1rem; transition:background .15s ease, transform .15s ease; }
.carousel-nav button:hover{ background:var(--bg-alt); }
.carousel-nav button:active{ transform:scale(.92); }
.carousel{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none; }
.carousel::-webkit-scrollbar{ display:none; }
.news-card{ scroll-snap-align:start; flex:0 0 320px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); }
.news-card .thumb{ aspect-ratio:16/10; overflow:hidden; }
.news-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.news-card .body{ padding:18px; }
.news-card .date{ font-size:.78rem; color:var(--gold); font-weight:600; }
.news-card h4{ font-size:1rem; margin:8px 0 8px; line-height:1.35; letter-spacing:-.01em; }
.news-card p{ font-size:.86rem; margin:0; }

.alumni-card{ scroll-snap-align:start; flex:0 0 340px; border-radius:var(--radius-md); border:1px solid var(--line); padding:26px; display:flex; flex-direction:column; gap:16px; }
.alumni-card .who{ display:flex; align-items:center; gap:12px; }
.alumni-card img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.alumni-card .name{ font-weight:600; font-size:.94rem; }
.alumni-card .role{ font-size:.78rem; color:var(--ink-soft); }
.alumni-card .quote{ font-size:.92rem; color:var(--ink); margin:0; }

/* ---------- QUICK TILES ---------- */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tile{ background:var(--bg-alt); border-radius:var(--radius-md); padding:26px; text-align:center; transition:background .2s ease; }
.tile:hover{ background:#eceded; }
.tile h4{ font-size:1rem; }
.tile a{ font-size:.84rem; color:var(--green-deep); margin-top:8px; display:inline-block; }

/* ---------- TABLE ---------- */
table.simple{ width:100%; border-collapse:collapse; font-size:.92rem; }
table.simple td, table.simple th{ padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; }
table.simple th{ color:var(--ink-soft); font-weight:500; font-size:.82rem; }

/* ---------- FORM ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full{ grid-column:1 / -1; }
label{ display:block; font-size:.84rem; color:var(--ink-soft); margin-bottom:6px; }
input, select, textarea{
  width:100%; padding:11px 14px; border-radius:12px; border:1px solid var(--line);
  font-family:inherit; font-size:.94rem; background:#fff; color:var(--ink);
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--green); outline-offset:1px; }
button.submit{ background:var(--green); color:#fff; border:none; padding:12px 26px; border-radius:100px; font-size:.94rem; font-weight:500; cursor:pointer; }
button.submit:hover{ opacity:.9; }

/* ---------- SITEMAP PAGE ---------- */
.sitemap-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.sitemap-col h5{ font-size:.86rem; color:var(--ink-soft); margin-bottom:14px; }
.sitemap-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.sitemap-col ul a{ font-size:.94rem; }
.sitemap-col ul a:hover{ color:var(--green-deep); }
.sitemap-col ul ul{ margin-top:8px; padding-left:14px; gap:8px; }
.sitemap-col ul ul a{ font-size:.86rem; color:var(--ink-soft); }

/* ---------- FOOTER ---------- */
footer{ background:var(--ink); color:rgba(255,255,255,.72); padding:64px 0 28px; margin-top:0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
footer h5{ color:#fff; font-size:.86rem; font-weight:600; margin-bottom:16px; }
footer .addr{ font-size:.86rem; line-height:1.7; }
footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
footer ul a{ font-size:.86rem; }
footer ul a:hover{ color:#fff; }
.footer-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; align-items:center; font-size:.8rem; flex-wrap:wrap; gap:12px; }
.socials{ display:flex; gap:14px; }
.socials a{ width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:.78rem; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .vmv{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:repeat(3,1fr); row-gap:24px; }
  .programs{ grid-template-columns:repeat(2,1fr); }
  .spotlight{ grid-template-columns:1fr; text-align:center; }
  .spotlight img{ margin:0 auto; width:140px; }
  .tiles{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .cols-2, .cols-3{ grid-template-columns:1fr; }
  .sitemap-grid{ grid-template-columns:1fr 1fr; }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .programs{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .sitemap-grid{ grid-template-columns:1fr; }
}