/* Premium typography: Poppins (headings) + Inter (body) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700;800&display=swap');

:root{
  --bg:#07090D;
  --panel:rgba(16,20,26,.56);
  --panel2:rgba(18,24,32,.64);
  --text:#F7F8FC;
  --muted:rgba(247,248,252,.72);
  --gold:#E3C26F;
  --red:#B10515;
  /* unified accent used by badges/indicators */
  --accent: var(--gold);
  --stroke:rgba(255,255,255,.10);
  --shadow:0 28px 90px rgba(0,0,0,.58);
  --ease:cubic-bezier(.2,.9,.2,1);
  --r:20px; --r2:26px;
  --navH:72px;

  --font-head: 'Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}
[data-theme="light"]{
  --bg:#ffffff;
  --panel:rgba(255,255,255,.72);
  --panel2:rgba(244,247,250,.90);
  --text:#0B1220;
  --muted:rgba(11,18,32,.68);
  --stroke:rgba(11,18,32,.10);
  --shadow:0 18px 70px rgba(2,6,23,.14);
  --accent: var(--gold);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: var(--font-body);
  background:
    radial-gradient(1100px 700px at 18% -10%, rgba(227,194,111,.18), transparent 60%),
    radial-gradient(950px 650px at 92% 4%, rgba(177,5,21,.14), transparent 60%),
    radial-gradient(950px 650px at 52% 110%, rgba(227,194,111,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* Headings typography */
h1,h2,h3,h4,h5,h6,
.brandName,
.hero-title,
.sectionTitle h2,.sectionTitle h3{
  font-family: var(--font-head);
}
h1,h2,h3{letter-spacing:-0.02em;}
h4,h5,h6{letter-spacing:-0.01em;}

/* Headings use Poppins for a clean premium school tone */
h1,h2,h3,h4,h5,h6,.brandName,.btn,.menu a,.drawer a,.sectionTitle h2,.sectionTitle h3{font-family:var(--font-head);}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 18px}
/* Top progress */
#progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--gold),color-mix(in oklab,var(--gold) 55%, var(--red)));z-index:1000;}
/* Ambient blob */
.blob{position:fixed;inset:auto auto 0 0;width:620px;height:620px;background:
radial-gradient(circle at 30% 30%, rgba(227,194,111,.18), transparent 58%),
radial-gradient(circle at 70% 70%, rgba(177,5,21,.12), transparent 62%);
filter:blur(40px);transform:translate3d(-45%, 35%, 0);pointer-events:none;z-index:-1;}

/* Intro (plays every time) */
#intro{position:fixed;inset:0;z-index:2200;display:grid;place-items:center;background:#000;overflow:hidden;}
#intro .bg{position:absolute;inset:-10%;background-image:url('assets/intro-bg.webp');background-size:cover;background-position:center;transform:scale(1.16);filter:blur(30px) saturate(1.05) contrast(1.12);opacity:.58;}
#intro .vignette{position:absolute;inset:0;background:radial-gradient(closest-side at 50% 44%, rgba(0,0,0,.10), rgba(0,0,0,.82) 70%, rgba(0,0,0,.96) 100%);}
#intro .logo{width:clamp(220px,72vw,420px);max-width:82vw;display:grid;place-items:center;transform-style:preserve-3d;
animation:logoIn 2.25s var(--ease) forwards;filter:blur(28px) drop-shadow(0 0 0 rgba(227,194,111,0));opacity:0;will-change:transform,filter,opacity;}
#intro .logo img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 26px 70px rgba(0,0,0,.75));}
/* AE-style reveal: blur -> sharp, glow sweep */
#intro .sweep{position:absolute;inset:-25% -50%;background:linear-gradient(100deg, transparent 0%, rgba(227,194,111,.0) 35%, rgba(227,194,111,.55) 50%, rgba(255,255,255,.14) 55%, transparent 70%);
transform:translateX(-55%) rotate(10deg);animation:sweep 2.05s var(--ease) .35s forwards;opacity:.0;}
@keyframes sweep{0%{opacity:0;transform:translateX(-65%) rotate(10deg);}35%{opacity:.75;}100%{opacity:0;transform:translateX(65%) rotate(10deg);}}
@keyframes logoIn{0%{opacity:0;transform:perspective(1100px) rotateX(16deg) rotateY(-16deg) translateY(18px) scale(.78);}
40%{opacity:1;filter:blur(12px) drop-shadow(0 0 18px rgba(227,194,111,.10));}
72%{filter:blur(2px) drop-shadow(0 0 28px rgba(227,194,111,.22));transform:perspective(1100px) rotateX(0) rotateY(0) translateY(0) scale(1.03);}
100%{opacity:1;filter:blur(0) drop-shadow(0 0 34px rgba(227,194,111,.24));transform:perspective(1100px) rotateX(0) rotateY(0) translateY(0) scale(1);}}
#intro.out{animation:introOut .7s var(--ease) forwards;}
@keyframes introOut{to{opacity:0;transform:scale(1.02);pointer-events:none;}}
body.intro-on main{opacity:0;transform:translateY(10px);}
body.intro-done main{opacity:1;transform:none;transition:opacity .7s var(--ease), transform .7s var(--ease);}

/* Nav */
.nav{position:sticky;top:0;z-index:150;backdrop-filter:blur(18px);background:color-mix(in oklab,var(--bg) 72%, transparent);border-bottom:1px solid var(--stroke);}
.navbar{height:var(--navH);display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;}
.brand{display:flex;gap:12px;align-items:center;min-width:0;flex:1;}
.brandMark{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:color-mix(in oklab,var(--panel) 85%, transparent);border:1px solid var(--stroke);box-shadow:var(--shadow);overflow:hidden}
.brandMark img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}
.brandMark{
  position:relative;
}
.brandMark::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  padding:2px;
  background:linear-gradient(135deg, rgba(176,141,87,.95), rgba(255,255,255,.08));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.brandName{font-weight:800;letter-spacing:.2px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.brandSub{font-size:12px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.menu{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.menu a{font-weight:700;font-size:13px;opacity:.92;padding:10px 12px;border-radius:999px;transition:transform .22s var(--ease), background .22s var(--ease), opacity .22s var(--ease);}
.menu a:hover{transform:translateY(-1px);background:color-mix(in oklab,var(--panel2) 70%, transparent);opacity:1;}
.actions{display:flex;gap:10px;align-items:center}

/* Header responsiveness */
@media (max-width: 980px){
  .brandMark{width:40px;height:40px;border-radius:999px}
  .brandName{font-size:14px}
  .brandSub{font-size:11px}
}

@media (max-width: 720px){
  .brandSub{display:none}
  .actions .btn-primary{display:none}
}

@media (max-width: 480px){
  .navbar{gap:8px}
  .brandName{font-size:13px}
  .brand{gap:10px}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 14px;border-radius:999px;border:1px solid var(--stroke);background:color-mix(in oklab,var(--panel) 82%, transparent);box-shadow:0 10px 28px rgba(0,0,0,.14);font-weight:700;font-size:13px;cursor:pointer;transition:transform .22s var(--ease), border-color .22s var(--ease);}
.btn:hover{transform:translateY(-1px);border-color:color-mix(in oklab,var(--gold) 55%, var(--stroke));}
.btn-primary{position:relative;background:linear-gradient(135deg,var(--gold), color-mix(in oklab,var(--gold) 55%, var(--red)));color:#0b0d10;border-color:color-mix(in oklab,var(--gold) 55%, transparent);overflow:hidden;}
.btn-primary::after{content:"";position:absolute;inset:-60% -30%;background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.55) 44%, rgba(255,255,255,.10) 55%, transparent 75%);
transform:translateX(-55%) rotate(10deg);animation:shimmer 3.1s var(--ease) infinite;opacity:.55;}
@keyframes shimmer{0%{transform:translateX(-55%) rotate(10deg);}55%{transform:translateX(55%) rotate(10deg);}100%{transform:translateX(55%) rotate(10deg);}}
/* Mobile menu */
.hamb{display:none}
.btn.hamb{
  width:44px;
  height:44px;
  padding:0;
  font-size:20px;
  line-height:1;
  color:var(--text);
}
.btn.hamb:focus-visible{outline:2px solid color-mix(in oklab,var(--gold) 60%, transparent); outline-offset:2px;}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(360px,90vw);z-index:1700;transform:translateX(102%);
background:color-mix(in oklab,var(--bg) 82%, transparent);border-left:1px solid var(--stroke);backdrop-filter:blur(18px);transition:transform .35s var(--ease);padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.drawer.open{transform:none}
.drawer a{display:block;padding:12px 10px;border-radius:999px;font-weight:700;opacity:.95}
.drawer a:hover{background:color-mix(in oklab,var(--panel2) 70%, transparent)}
.drawerTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.scrim{position:fixed;inset:0;z-index:1600;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);display:none}
.scrim.open{display:block}

/* Sections (more breathing space for a premium scroll rhythm) */
.section{padding:72px 0; position:relative;}
.sectionTitle{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:18px}
.sectionTitle h2,.sectionTitle h3{margin:0;letter-spacing:-.02em}
.sectionTitle h3{font-size:22px}
.sectionTitle p{margin:6px 0 0;color:var(--muted);max-width:62ch}

@media (max-width: 768px){
  .section{padding:56px 0;}
  .sectionTitle{align-items:flex-start;}
  .sectionTitle h3{font-size:20px;}
}

@media (max-width: 768px){
  .section{padding:56px 0;}
  .sectionTitle{margin-bottom:14px;}
  .sectionTitle h3{font-size:20px;}
}

/* Notices bell */
.notice-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.25);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);color:var(--text);cursor:pointer;transition:transform .15s ease, background .15s ease, border-color .15s ease}
.notice-bell:hover{transform:translateY(-1px);background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.18)}
.notice-bell:active{transform:translateY(0)}
.notice-bell-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:var(--accent);
  color:#111;
  font-size:12px;
  line-height:18px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
}
[data-theme="light"] .notice-bell-badge{border-color:rgba(11,18,32,.18);}
.sectionGlow{position:absolute;inset:-10px 0 -10px 0;pointer-events:none;opacity:0;transition:opacity .2s linear;}

/* Trust strip (home) */
.trustStrip{padding:18px 0 0;}
.trustGrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;}
.trustItem{grid-column:span 4;border:1px solid var(--stroke);border-radius:18px;background:color-mix(in oklab,var(--panel) 86%, transparent);box-shadow:0 12px 40px rgba(0,0,0,.14);padding:16px 16px;}
.trustItem h4{margin:0 0 6px;font-size:15px;}
.trustItem p{margin:0;color:var(--muted);font-size:13px;line-height:1.6;}
@media (max-width: 900px){
  .trustItem{grid-column:span 12;}
}

/* Hero (better visibility) */
.hero{padding:18px 0 16px}

/* Full-bleed hero (Main Campus 57/A only) */
.hero.hero-full{padding:0}
.heroFull{width:100vw;height:calc(100svh - var(--navH));min-height:calc(100vh - var(--navH));overflow:hidden;background:color-mix(in oklab,var(--bg) 70%, #000);}
.heroImg{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);will-change:transform}

/* Prevent excessive cropping on large screens (show full building) */
@media (min-width: 1024px){
  .heroFull{height:min(780px, calc(100vh - var(--navH)));min-height:min(780px, calc(100vh - var(--navH)));}
  .heroImg{object-fit:contain;transform:none;}
}

.heroGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;align-items:stretch}
.panel{border:1px solid var(--stroke);border-radius:var(--r2);background:color-mix(in oklab,var(--panel2) 65%, transparent);box-shadow:var(--shadow);overflow:hidden;transform-style:preserve-3d;}
.heroMedia{position:relative;min-height:580px;}
.heroMedia .img{position:absolute;inset:0;background-image:url('assets/intro-bg.webp');background-size:cover;background-position:center;transform:scale(1.06);will-change:transform;}
.heroMedia::after{content:"";position:absolute;inset:0;background:
linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.10) 100%);}
[data-theme="light"] .heroMedia::after{background:linear-gradient(90deg, rgba(11,18,32,.58) 0%, rgba(11,18,32,.18) 62%, rgba(11,18,32,.06) 100%);}
.heroContent{position:absolute;left:18px;right:18px;bottom:18px;max-width:740px;display:flex;flex-direction:column;gap:10px}
.kicker{display:inline-flex;align-items:center;gap:10px;width:max-content;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);
background:rgba(0,0,0,.28);color:#fff;font-weight:1000;font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
.kicker i{width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,var(--gold),var(--red));display:inline-block;}
.h1{margin:0;font-size:clamp(34px,4.2vw,54px);line-height:1.03;letter-spacing:-.04em;color:#fff;max-width:18ch;text-shadow:0 14px 60px rgba(0,0,0,.55);}
.sub{margin:0;font-size:15px;color:rgba(255,255,255,.88);max-width:62ch;line-height:1.65}
.heroActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.stack{display:grid;grid-template-rows:1fr 1fr 1fr;gap:14px;}
.mini{position:relative;min-height:180px;overflow:hidden}
.mini .img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.03);transition:transform .35s var(--ease);}
.mini:hover .img{transform:scale(1.08);}
.mini .cap{position:absolute;left:12px;right:12px;bottom:12px;padding:10px 12px;border-radius:16px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);color:#fff;font-weight:1000;display:flex;justify-content:space-between;align-items:center;gap:10px}
.mini .cap small{font-weight:900;opacity:.82}

/* Grid blocks */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{border:1px solid var(--stroke);border-radius:var(--r2);background:color-mix(in oklab,var(--panel) 84%, transparent);
box-shadow:0 12px 40px rgba(0,0,0,.16);padding:18px;transform-style:preserve-3d;transition:transform .18s var(--ease), border-color .18s var(--ease);}
.card:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--gold) 55%, var(--stroke));}
.icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;
background:color-mix(in oklab,var(--gold) 20%, transparent);border:1px solid color-mix(in oklab,var(--gold) 40%, transparent);font-weight:1000;color:var(--gold);}
.card h4{margin:12px 0 6px;font-size:16px;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.media{border:1px solid var(--stroke);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow);position:relative;background:color-mix(in oklab,var(--panel2) 70%, transparent);transform-style:preserve-3d;}
.media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--ease);}
.media:hover img{transform:scale(1.04);}
.media .cap{position:absolute;left:14px;right:14px;bottom:14px;padding:10px 12px;border-radius:16px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);font-weight:1000;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.media .cap small{font-weight:900;opacity:.82;}

/* Album cards (folders) */
.albumCard{border:1px solid var(--stroke);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow);position:relative;background:color-mix(in oklab,var(--panel2) 70%, transparent);}
.albumCard img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.01);transition:transform .35s var(--ease), filter .35s var(--ease);filter:saturate(1.02) contrast(1.04);}
.albumCard:hover img{transform:scale(1.06);}
.albumCard .cap{position:absolute;left:14px;right:14px;bottom:14px;padding:10px 12px;border-radius:16px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);font-weight:1000;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.albumCard .cap small{font-weight:900;opacity:.82;white-space:nowrap;}

/* Album modal */
#albumModal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.68);backdrop-filter:blur(10px);z-index:2300;padding:18px;}
#albumModal[aria-hidden="false"]{display:grid;}
#albumModal .panel{width:min(1060px, 100%);max-height:min(86vh, 920px);border:1px solid rgba(255,255,255,.14);border-radius:var(--r2);background:rgba(8,10,14,.72);box-shadow:var(--shadow);overflow:hidden;}
[data-theme="light"] #albumModal .panel{background:rgba(255,255,255,.78);}
#albumModal .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--stroke);}
#albumModal .bar button{background:transparent;border:1px solid var(--stroke);color:var(--text);padding:10px 14px;border-radius:999px;font-weight:900;cursor:pointer;}
#albumModal .albumBody{padding:14px;overflow:auto;max-height:calc(86vh - 58px);}

/* Album modal thumbnails: show full image (no crop) */
#albumModal .media{aspect-ratio:4/3;background:color-mix(in oklab,var(--panel2) 75%, transparent);}
#albumModal .media img{height:100%;object-fit:contain;background:color-mix(in oklab,var(--bg) 86%, transparent);}
#albumModal .media:hover img{transform:none;}
.span-4{grid-column:span 4} .span-5{grid-column:span 5} .span-6{grid-column:span 6} .span-7{grid-column:span 7} .span-12{grid-column:span 12}

/* About / Why Us */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pill{display:inline-flex;gap:10px;align-items:center;padding:10px 12px;border-radius:999px;border:1px solid var(--stroke);
background:color-mix(in oklab,var(--panel2) 72%, transparent);font-weight:950;font-size:13px;color:var(--text)}
.pill b{color:var(--gold)}

/* Form */
label{display:block;font-weight:950;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
input,select,textarea{width:100%;padding:12px 12px;border-radius:999px;border:1px solid var(--stroke);
background:color-mix(in oklab,var(--panel2) 72%, transparent);color:var(--text);outline:none;transition:border-color .18s var(--ease);}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:color-mix(in oklab,var(--gold) 55%, var(--stroke));box-shadow:0 0 0 4px rgba(227,194,111,.14)}
input::placeholder,textarea::placeholder{color:color-mix(in oklab,var(--muted) 78%, transparent)}
.formGrid{gap:12px}
.field{grid-column:span 12}
.col-6{grid-column:span 6}
.col-12{grid-column:span 12}
.formActions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.is-invalid{border-color:rgba(239,68,68,.85) !important;box-shadow:0 0 0 4px rgba(239,68,68,.12) !important;}

/* Toast */
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(16px);z-index:2800;
padding:12px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
background:rgba(15,15,18,.62);backdrop-filter:blur(14px);color:#fff;font-weight:950;
opacity:0;pointer-events:none;transition:opacity .22s var(--ease), transform .22s var(--ease);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Contact section improvements */
.contactWrap{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;align-items:stretch}
.contactCard{padding:0;overflow:hidden}
.contactTop{padding:18px 18px 14px;border-bottom:1px solid var(--stroke);display:flex;align-items:center;justify-content:space-between;gap:12px}
.contactTop h4{margin:0;font-size:16px}
.contactBody{padding:18px}
.contactGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.map{min-height:360px}
.map::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));}

/* CEO section */
.ceoWrap{margin-top:14px}
.ceoCard{display:grid;grid-template-columns:340px 1fr;gap:0;overflow:hidden;border-radius:26px;border:1px solid var(--stroke);background:linear-gradient(180deg, rgba(18,18,22,.64), rgba(10,10,12,.44));box-shadow:0 26px 120px rgba(0,0,0,.55)}
.ceoMedia{position:relative;min-height:380px}
.ceoMedia img{width:100%;height:100%;object-fit:cover;display:block}
.ceoMedia::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.55));}
.ceoBody{padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px}
.ceoLabel{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ceoName{margin:0;font-size:22px;letter-spacing:.02em}
.ceoRole{font-size:13px;color:var(--muted);margin-top:-6px}
.ceoText{margin:6px 0 0;line-height:1.85;color:rgba(255,255,255,.88)}
.ceoActions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
.footer-premium{padding:42px 0 46px;background:linear-gradient(180deg, color-mix(in oklab,var(--bg) 92%, transparent), color-mix(in oklab,var(--bg) 70%, transparent));}
.footer-premium .footTop{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:stretch;margin-bottom:18px}
.footer-premium .footBrand{display:flex;gap:14px;align-items:center}
.footer-premium .footLogo{width:54px;height:54px;border-radius:999px;display:grid;place-items:center;background:color-mix(in oklab,var(--panel) 88%, transparent);border:1px solid var(--stroke);box-shadow:var(--shadow);overflow:hidden;position:relative}
.footer-premium .footLogo::before{content:"";position:absolute;inset:-2px;border-radius:999px;padding:2px;background:linear-gradient(135deg, rgba(176,141,87,.95), rgba(255,255,255,.08));-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.footer-premium .footLogo img{width:80%;height:80%;object-fit:contain;position:relative;z-index:1}
.footer-premium .footCta{border:1px solid var(--stroke);background:color-mix(in oklab,var(--panel) 84%, transparent);border-radius:18px;padding:16px;box-shadow:0 18px 60px rgba(0,0,0,.28)}
.footer-premium .footBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.footer-premium .footLinks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.footer-premium .footLinks a{color:var(--text);opacity:.9;text-decoration:none}
.footer-premium .footLinks a:hover{opacity:1;text-decoration:underline}
.footer-premium .footBottom{margin-top:18px;padding-top:14px;border-top:1px solid var(--stroke);opacity:.9}
.footer-premium .footCol a{color:var(--text);opacity:.9;text-decoration:none}
.footer-premium .footCol a:hover{text-decoration:underline;opacity:1}
@media (max-width:860px){
  .footer-premium .footTop{grid-template-columns:1fr}
  .footer-premium .footLinks{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .footer-premium .footLinks{grid-template-columns:1fr}
}

.footer{padding:26px 0 38px;border-top:1px solid var(--stroke);margin-top:8px;color:var(--muted);}
.footgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.footgrid strong{color:var(--text)}
.tiny{font-size:12px;line-height:1.7}

/* Reveal */
.reveal{opacity:0;transform:translateY(14px) scale(.99);filter:blur(10px);
transition:opacity .68s var(--ease), transform .68s var(--ease), filter .68s var(--ease);}
.reveal.in{opacity:1;transform:none;filter:blur(0);}

/* Lightbox */
#lightbox{position:fixed;inset:0;z-index:2600;display:none;place-items:center;background:rgba(0,0,0,.72);backdrop-filter:blur(18px);}
#lightbox.open{display:grid;}
#lightbox .panel{width:min(1040px,92vw);border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 120px rgba(0,0,0,.65);background:rgba(15,15,18,.55);}
#lightbox img{width:100%;height:auto;display:block;transform:scale(.985);opacity:0;animation:zoomIn .35s var(--ease) forwards;}
@keyframes zoomIn{to{transform:scale(1);opacity:1;}}
#lightbox .bar{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;color:#fff;font-weight:1000;}
#lightbox .bar button{all:unset;cursor:pointer;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.22);}

/* Responsive */
@media (max-width:1020px){.heroGrid{grid-template-columns:1fr;}.heroMedia{min-height:540px}.stack{grid-template-columns:1fr 1fr;grid-template-rows:auto}.contactWrap{grid-template-columns:1fr}}
@media (max-width:720px){.menu{display:none}.hamb{display:inline-flex}.stack{grid-template-columns:1fr}.footgrid{grid-template-columns:1fr}.contactGrid{grid-template-columns:1fr}.ceoCard{grid-template-columns:1fr}.ceoMedia{min-height:320px}.col-6{grid-column:span 12}.btn{min-height:44px}}
@media (prefers-reduced-motion: reduce){*{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}}

img{max-width:100%;height:auto;object-fit:cover;display:block}

.hero, .hero img{
  object-fit:cover;
  background-position:center;
}



/* CEO Section */
.ceo-section{
  padding: 64px 16px;
  background: #fff;
}
.ceo-wrap{
  max-width: 1100px;
  margin: 0 auto;
}
.ceo-card{
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 22px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.ceo-media{
  flex: 0 0 auto;
  width: 140px;
  height: 140px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(176,141,87,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  background: #f7f7f7;
}
.ceo-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ceo-kicker{
  margin: 0 0 6px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #b08d57;
}
.ceo-name{
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.15;
  color: #111;
}
.ceo-text{
  margin: 0;
  color: #333;
  font-size: 16px;
  line-height: 1.7;
  max-width: 70ch;
}
@media (max-width: 720px){
  .ceo-card{
    flex-direction: column;
    text-align: center;
  }
  .ceo-media{
    width: 120px;
    height: 120px;
  }
  .ceo-name{font-size: 24px}
  .ceo-text{max-width: 60ch}
}


/* Dark CEO Section */
.ceo-dark{padding:70px 16px;background:#0f0f0f}
.ceo-container{max-width:1100px;margin:0 auto}
.ceo-card-dark{
  position:relative;
  display:flex;
  gap:26px;
  align-items:center;
  background:var(--ceo-bg);
  border-radius:24px;
  padding:26px;
  border:1px solid var(--ceo-border);
  box-shadow:var(--ceo-card-shadow);
  overflow:hidden;
}
.ceo-image{
  position:relative;
  width:140px;
  height:140px;
  border-radius:18px;
  overflow:hidden;
  flex:0 0 auto;
  background: rgba(255,255,255,.03);
}
.ceo-image img{
  width:100%;
  height:100%;
  /* Portrait-safe: never crop the head */
  object-fit:contain;
  object-position: 50% 0%;
  transform:none;
}
.ceo-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
             linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.20) 100%);
  opacity:.55;
  pointer-events:none;
}
@media (min-width: 900px){
  .ceo-card-dark{
    display:grid;
    grid-template-columns: 460px 1fr;
    gap:34px;
    align-items:stretch;
    padding:30px;
  }
  .ceo-image{
    width:100%;
    height:auto;
    aspect-ratio: 4 / 5;
    border-radius:22px;
  }
  .ceo-image img{
    width:100%;
    height:100%;
    /* Portrait-safe on desktop too */
    object-fit:contain;
    object-position: 50% 0%;
  }
}

/* Leadership cards inside grids (Faculty page) */
.leader-card{
  padding:22px;
  gap:18px;
}
@media (min-width: 900px){
  .leader-card{
    display:grid;
    grid-template-columns: 200px 1fr;
    align-items:center;
    gap:18px;
    padding:22px;
  }
  .leader-card .ceo-image{
    aspect-ratio: 1 / 1;
    border-radius:18px;
  }
}
.ceo-label{color:#b08d57;font-weight:600;font-size:14px}
.ceo-card-dark h2{margin:6px 0 12px;color:#fff}
.ceo-card-dark p{color:#d0d0d0;line-height:1.7}
@media(max-width:720px){
  .ceo-card-dark{flex-direction:column;text-align:center}
  .ceo-image{width:160px;height:160px}
}

/* High priority notices */
.notice.high{
 border:1px solid rgba(176,141,87,.4);
 background:#181818;
}
.notice.high.is-unread{
  border-color:rgba(245,208,140,.85);
  box-shadow:0 0 0 1px rgba(245,208,140,.35), 0 18px 50px rgba(0,0,0,.45);
}
.notice-badge--unread{
  left:auto;
  right:12px;
  background:rgba(245,208,140,.14);
  border:1px solid rgba(245,208,140,.50);
  color:#f5d08c;
}
.notice-link{
 display:inline-block;margin-top:10px;
 color:#f5d08c;font-weight:600
}



/* CEO Section - Theme aware */
:root{
  --ceo-bg:#161616;
  --ceo-border:rgba(255,255,255,.08);
  --ceo-text:#d6d6d6;
  --ceo-title:#ffffff;
  --ceo-card-shadow:0 28px 60px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: light){
  :root{
    --ceo-bg:#ffffff;
    --ceo-border:rgba(0,0,0,.08);
    --ceo-text:#333333;
    --ceo-title:#111111;
    --ceo-card-shadow:0 18px 40px rgba(0,0,0,.10);
  }
}

/* ==========================================================
   MOBILE-ONLY PREMIUM PASS (v76)
   Goal: lighter, calmer, thumb-friendly, no overflow.
   ========================================================== */

/* Better anchor jumps under sticky header */
html{ scroll-padding-top: calc(var(--navH) + 12px); }

@media (max-width: 820px){
  /* Slightly smaller header on mobile so content breathes */
  :root{ --navH: 64px; }

  /* Safer default tap sizing + readability */
  body{ font-size: 16px; line-height: 1.6; }

  /* Consistent comfortable edges */
  .container{ padding-left: 18px; padding-right: 18px; }

  /* Buttons, icons, and menu items: thumb-friendly */
  .btn{ min-height: 48px; padding: 12px 16px; border-radius: 16px; }
  .hamb, .themeToggle, .navIcon, .iconBtn{ min-width: 44px; min-height: 44px; }
  .menu a{ padding: 12px 12px; }
  .drawer a{ padding: 14px 12px; }

  /* Hero sizing is handled by the 16:9 rule at the end of this file */

  /* Hero text card: lighter + less cramped */
  .hero-content{
    padding: 16px !important;
    max-width: min(520px, calc(100% - 28px)) !important;
  }
  .hero-title{ font-size: clamp(18px, 5.1vw, 26px) !important; }
  .hero-subtitle{ font-size: 13.5px !important; }

  /* Section rhythm: more breathing space */
  section{ padding-top: 42px; padding-bottom: 42px; }

  /* Cards: a bit more padding so it feels "premium" not tight */
  .card, .panel, .glass, .notice-card, .ceoCard{ padding: 16px !important; }

  /* Forms: prevent iOS zoom and improve usability */
  input, select, textarea{
    font-size: 16px !important;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 16px;
  }
  textarea{ min-height: 120px; }

  /* Reduce motion intensity on mobile for a calmer feel */
  .card:hover, .notice-card:hover, .diary-card:hover{ transform: none !important; }
}

@media (max-width: 420px){
  .container{ padding-left: 16px; padding-right: 16px; }
  /* Hero sizing is handled by the 16:9 rule at the end of this file */
  .hero-content{ left: 14px !important; right: 14px !important; bottom: 14px !important; }
}

@media (max-width: 768px){
  :root{
    /* Slightly shorter header feel on phones */
    --navH: 64px;
  }

  /* Calm readable base on mobile */
  body{ font-size: 16px; line-height: 1.6; }

  /* Safe, consistent side padding */
  .container{ padding-left: 16px; padding-right: 16px; }

  /* Sections: add breathing space */
  section{ padding-top: 48px; padding-bottom: 48px; }
  section:first-of-type{ padding-top: 28px; }

  /* Hero sizing is handled by the 16:9 rule at the end of this file */

  /* Hero card: tighter and thumb friendly */
  .hero-content{
    padding: 14px !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    max-width: min(520px, calc(100% - 28px)) !important;
  }
  .hero-title{ font-size: clamp(18px, 5.2vw, 26px) !important; }
  .hero-subtitle{ font-size: 13px !important; line-height: 1.35; }

  /* Tap targets: buttons, icons, menu */
  .btn{ min-height: 48px !important; padding: 12px 16px !important; }
  .hamb, .themeToggle, .navIcon, .iconBtn{
    width: 44px !important; height: 44px !important;
    min-width: 44px !important; min-height: 44px !important;
  }
  .menu a, .drawer a{ padding: 14px 12px !important; }

  /* Forms: prevent iOS zoom + improve comfort */
  input, select, textarea{
    font-size: 16px !important;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 14px;
  }
  textarea{ min-height: 120px; }

  /* Cards: remove “tight” feeling */
  .card, .panel, .notice-card, .feature, .tile{ padding: 16px !important; }

  /* Tables / wide content: never overflow */
  table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 420px){
  /* Tiny phones: slightly more compact hero to keep scroll smooth */
  /* Hero sizing is handled by the 16:9 rule at the end of this file */
  .hero-content{ padding: 12px !important; }
}
.ceo-dark{padding:72px 16px;background:transparent}
.ceo-container{max-width:1100px;margin:0 auto}
.ceo-card-dark{
  display:flex;gap:26px;align-items:center;
  background:var(--ceo-bg);
  border-radius:22px;
  padding:28px;
  border:1px solid var(--ceo-border);
  box-shadow:var(--ceo-card-shadow);
}
.ceo-image{
  width:160px;height:160px;border-radius:20px;overflow:hidden;
  border:1px solid rgba(176,141,87,.45);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  flex:0 0 auto;
}
.ceo-image img{width:100%;height:100%;object-fit:cover;display:block}
.ceo-label{color:#b08d57;font-weight:700;font-size:14px;letter-spacing:.2px}
.ceo-card-dark h2{margin:8px 0 12px;color:var(--ceo-title);font-size:34px;line-height:1.12}
.ceo-card-dark p{margin:0;color:var(--ceo-text);line-height:1.75;font-size:16px;max-width:78ch}
@media(max-width:720px){
  .ceo-card-dark{flex-direction:column;text-align:center}
  .ceo-image{width:140px;height:140px}
  .ceo-card-dark h2{font-size:28px}
}


/* Stack cards reused in campus gallery */
.stack-in-campus{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  width:100%;
}
.stack-in-campus .panel.mini{min-height:180px}


/* Premium Notices */
#notices{
  padding:64px 16px;
}
#notices h2{
  font-size:34px;
  margin:0 0 16px;
}
#notices .notice-grid{
  margin-top:18px;
}
#notices .notice{
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(176,141,87,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}
#notices .notice p{opacity:.92}
#notices a{display:inline-block;margin-top:14px}

/* Notices (global, theme aware) */
.notice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.notice{border-radius:16px;padding:18px;border:1px solid rgba(176,141,87,.35);
  background:color-mix(in oklab,var(--panel2) 70%, transparent);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.notice h4{margin:0 0 8px;color:color-mix(in oklab,var(--gold) 82%, white)}
.notice .date{font-size:13px;opacity:.78;margin-bottom:10px;color:var(--muted)}
.notice p{margin:0;color:var(--text);opacity:.9;line-height:1.7}
.notice-link{display:inline-block;margin-top:10px;color:var(--gold);font-weight:950}

/* Notice prominence upgrades (V32) */
.notice{position:relative;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.notice:hover{transform:translateY(-2px);border-color:rgba(255,210,120,.28);box-shadow:0 24px 90px rgba(0,0,0,.42)}
.notice.is-latest{border-color:rgba(255,210,120,.35);box-shadow:0 28px 120px rgba(255,193,77,.12), 0 30px 90px rgba(0,0,0,.55)}
.notice.is-latest::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:16px;
  background:radial-gradient(1100px 260px at 18% 0%, rgba(255,193,77,.18), transparent 56%);
  pointer-events:none;
}
.notice-badge{
  position:absolute;
  top:14px;
  right:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.4px;
  color:#111;
  background:linear-gradient(90deg,#ffd36a,#ffb23f);
  box-shadow:0 10px 30px rgba(255,193,77,.18);
}
.notice-badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(17,17,17,.75);
  box-shadow:0 0 0 6px rgba(255,193,77,.16);
}

/* Popup modal for latest notice */
.notice-modal[hidden]{display:none;}
.notice-modal{position:fixed;inset:0;z-index:9999;}
.notice-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);}
.notice-modal__panel{
  position:relative;
  width:min(900px, calc(100% - 24px));
  margin:72px auto 0;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(15,15,15,.92);
  box-shadow:0 50px 140px rgba(0,0,0,.65);
  padding:22px;
}
.notice-modal__panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:20px;
  background:radial-gradient(1200px 320px at 20% 0%, rgba(255,193,77,.20), transparent 55%);
  pointer-events:none;
}
.notice-modal__close{
  position:absolute;
  right:14px;
  top:14px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}
.notice-modal__close:hover{background:rgba(255,255,255,.10)}
.notice-modal__content{position:relative;}
.notice-modal__title{margin:0 0 6px;font-size:20px;}
.notice-modal__meta{margin:0 0 14px;opacity:.85;color:var(--muted);}
.notice-modal__body{margin:0;line-height:1.75;opacity:.95;}
.notice-modal__actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}

@media (max-width:560px){
  .notice-modal__panel{margin:54px auto 0;padding:18px;}
  .notice-badge{top:12px;right:12px;}
}

/* CEO section theme via data-theme (override old prefers-color-scheme block) */
:root{
  --ceo-bg:color-mix(in oklab,var(--panel2) 75%, transparent);
  --ceo-border:var(--stroke);
  --ceo-text:var(--muted);
  --ceo-title:var(--text);
  --ceo-card-shadow:var(--shadow);
}
[data-theme="light"]{
  --ceo-bg:color-mix(in oklab, white 86%, transparent);
  --ceo-border:var(--stroke);
  --ceo-text:rgba(11,18,32,.75);
  --ceo-title:#0B1220;
  --ceo-card-shadow:0 18px 70px rgba(2,6,23,.14);
}
.ceo-card-dark{background:var(--ceo-bg) !important;border:1px solid var(--ceo-border) !important;box-shadow:var(--ceo-card-shadow) !important;}
.ceo-card-dark p{color:var(--ceo-text) !important;}
.ceo-card-dark h2{color:var(--ceo-title) !important;}


@media (max-width:720px){
  .span-4,.span-5,.span-6,.span-7{grid-column:span 12}
  .heroMedia{min-height:420px}
  .heroContent{left:14px;right:14px;bottom:14px}
}


/* ===========================
   Responsive Alignment Overrides (V18)
   Keeps content/images unchanged, improves consistency across devices
   =========================== */

/* Safer box sizing */
*, *::before, *::after { box-sizing: border-box; }

/* Standard container padding for all viewports */
.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: clamp(14px, 3vw, 22px);
  padding-right: clamp(14px, 3vw, 22px);
}

/* Grids: consistent spacing */
.grid{
  gap: clamp(12px, 2.4vw, 18px);
}

/* Cards: equal height behavior */
.card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Media cards: consistent aspect ratio and caption legibility */
.media{
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  min-height: 240px;
}
.media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.media .cap{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Notice cards in homepage */
.notice-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 2.4vw, 18px);
}
.notice-grid .notice-card{
  grid-column: span 4;
  height: 100%;
}
@media (max-width: 980px){
  .notice-grid .notice-card{ grid-column: span 6; }
}
@media (max-width: 640px){
  .notice-grid .notice-card{ grid-column: span 12; }
}

/* Grid span collapse on smaller devices */
@media (max-width: 980px){
  .span-4,.span-5,.span-6,.span-7{grid-column: span 12;}
  .grid{grid-template-columns: repeat(12, 1fr);}
}

/* Hero: always full-bleed image; text stays readable */
.heroFull{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.heroFull .heroImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ensure sections never overflow on mobile */
main, section{ overflow-x: clip; }



/* HERO FIX */
.hero{
  width:100vw;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-content{
  position:relative;
  z-index:2;
  max-width:1200px;
  width:100%;
  padding:1.5rem;
  text-align:center;
}
@media(max-width:768px){
  .hero{min-height:100svh;}
  .hero-content{padding:1rem;}
}

/* NOTICE CARDS FIX */
.notice-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.25rem;
}
.notice-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:999px;
  padding:1.25rem;
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
}
.notice-card p{flex-grow:1;margin-bottom:1rem;}


/* HERO SLIDER – RESPONSIVE FIX */
.hero{
  width:100vw;
  height:68vh;
  max-height:580px;
  min-height:420px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
@media(max-width:768px){
  .hero{
    height:52vh;
    min-height:320px;
  }
}
.hero-slider{
  position:absolute;
  inset:0;
}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 0.8s ease;
}
.hero-slide.active{opacity:1;}
.hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: center 30%;
}
/* HERO TEXT CARD (matches notice-card, bottom-left) */
.hero-content{
  position:absolute;
  z-index:2;
  left: clamp(14px, 4vw, 44px);
  bottom: clamp(14px, 4vw, 44px);

  display:flex;
  flex-direction:column;
  gap:8px;

  padding: 1.25rem;
  border-radius: 14px;
  max-width: min(560px, calc(100% - 28px));
  text-align:left;

  /* fade-in per slide */
  opacity: 1;
  transform: translateY(0);
  transition: opacity .28s ease, transform .28s ease, background-color .28s ease, color .28s ease;
}

.hero-content.is-fading{
  opacity: 0;
  transform: translateY(10px);
}

/* Auto contrast themes (JS sets these) */
.hero-content.hero-theme-light{
  background: rgba(255,255,255,0.92);
  color: #101214;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.hero-content.hero-theme-dark{
  background: rgba(0,0,0,0.42);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.hero-title{
  margin:0;
  font-size: clamp(19px, 2.4vw, 30px);
  line-height: 1.18;
  letter-spacing: .2px;
}


@media (min-width: 1400px){
  .hero-content{ max-width: 480px; }
  .hero{ max-height: 560px; }
  .hero-slide img{ object-position: center 25%; }
}
.hero-subtitle{
  margin:0;
  font-size: clamp(12.5px, 1.2vw, 14px);
  opacity: .90;
}


/* MOBILE CUT / OVERFLOW FIX */
html, body { width: 100%; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }
:root { --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); }

/* Ensure main wrapper doesn't exceed viewport */
.container { max-width: 1200px; margin-inline: auto; padding-inline: 1rem; }
@media (max-width: 480px){
  .container { padding-inline: 0.9rem; }
}

/* NAV + HERO spacing (prevents content hiding under header on mobile) */
header, .navbar, .topbar { padding-top: max(0px, var(--safe-top)); }

/* HERO CARD match notice card look */
.hero-card{
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* HERO SLIDER CONTROLS */
.hero-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index:3;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color:#fff;
  font-size:26px;
  line-height:44px;
  text-align:center;
  cursor:pointer;
  user-select:none;
}
.hero-prev{ left: 14px; }
.hero-next{ right: 14px; }
@media (max-width: 768px){
  .hero-nav{ width:40px; height:40px; line-height:40px; font-size:24px; }
  .hero-prev{ left: 10px; }
  .hero-next{ right: 10px; }
}

/* Dots */
.hero-dots{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:14px;
  z-index:3;
  display:flex;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,0.35);
  border: none;
  cursor:pointer;
  padding:0;
}
.hero-dot.active{ background: rgba(255,255,255,0.95); }

/* Improve card spacing on mobile across sections */
section { scroll-margin-top: 90px; }
@media (max-width: 768px){
  section { scroll-margin-top: 76px; }
}

/* ===== HERO SLIDESHOW FINAL FIX (all screens) ===== */
/* Make hero scale nicely on large screens (no "zoomed" look) */
.hero.hero-full{
  height: clamp(420px, 80vh, 920px);
  max-height: none;
  min-height: 420px;
}
@media (min-width: 1200px){
  .hero.hero-full{ height: clamp(520px, 85vh, 980px); }
}
@media (max-width: 768px){
  .hero.hero-full{ height: clamp(320px, 55vh, 520px); min-height: 320px; }
}

/* Stop any forced scaling that makes the image look zoomed */
.hero.hero-full .heroImg,
.hero.hero-full .hero-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transform: none !important;
}

/* Keep slider layers correct */
.hero.hero-full .hero-slider{ inset: 0; }
.hero.hero-full .hero-slide{ inset: 0; }

/* Prevent hero content from stretching too wide on ultra-wide screens */
.hero.hero-full .hero-content{
  max-width: min(920px, 92vw);
}
/* Stop any scale applied elsewhere */
.hero.hero-full .heroImg,
.hero.hero-full .hero-slide img{
  transform: none !important;
  object-fit: cover;
  object-position: center 20%;
}

/* Ensure slider always fills hero box */
.hero.hero-full .hero-slider,
.hero.hero-full .hero-slide{
  inset: 0;
}

/* Tighter, consistent overlay card sizing */
.hero.hero-full .hero-content{
  width: min(980px, 92vw);
}

/* If browser is very wide, show more top of building */
@media (min-width: 1600px){
  .hero.hero-full .heroImg,
  .hero.hero-full .hero-slide img{
    object-position: center 12%;
  }
}
/* If browser supports it, prevent image stretching blur during transitions */
.hero.hero-full img{ image-rendering: auto; }


/* Admissions - Visit Campus info inside form */
.visit-campus-inline{
  margin: 0 0 14px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--panel2) 92%, transparent);
  border: 1px solid var(--stroke);
  color: var(--text);
}

/* Contact card WhatsApp button */
.whatsapp-btn{
  width: 100%;
  margin-top: 12px;
  justify-content: center;
  border-color: transparent;
  background: #25D366;
  color: #fff;
}
.whatsapp-btn:hover{
  transform: translateY(-1px);
}

/* === Main campus image responsiveness (patch) === */
.heroMedia{height:clamp(260px,45vw,580px);min-height:unset;}
.heroImg{object-position:center;}
@media (max-width:520px){.heroMedia{height:320px}}


/* ================================
   V53 LOCK FIXES (Drawer + Hero + Intro)
   ================================ */

/* 1) NAV: never show desktop menu by default; hamburger controls drawer only */
/* Keep Apply button visible */
header.nav .btn.btn-primary{display:inline-flex !important;}

.drawer{pointer-events:none;}
.drawer.open{pointer-events:auto;}
.scrim{pointer-events:none;}
.scrim.open{pointer-events:auto;}

/* Hard ensure drawer starts hidden */
.drawer{transform:translateX(102%) !important;}
.drawer.open{transform:translateX(0) !important;}

/* 2) HERO: improve title/subtitle readability + prevent visibility issues */
.hero.hero-full{position:relative; overflow:hidden; min-height:420px;}
.hero.hero-full::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.25) 45%, rgba(0,0,0,.65));
  z-index:1;
  pointer-events:none;
}
.hero-slider{z-index:0;}
.hero-content{
  position:relative;
  z-index:2 !important;
  max-width:980px;
  margin-inline:auto;
  padding: clamp(14px, 2.2vw, 22px);
}
.hero-title{
  color:#fff;
  text-shadow: 0 10px 30px rgba(0,0,0,.65), 0 2px 10px rgba(0,0,0,.55);
  letter-spacing:.3px;
}
.hero-subtitle{
  color:rgba(255,255,255,.92);
  text-shadow: 0 8px 24px rgba(0,0,0,.55);
  max-width: 820px;
  margin-inline:auto;
  line-height:1.5;
}

/* Make hero image show full on large screens, without making text disappear */
.hero-slide img{object-fit:cover;}
@media (min-width: 1024px){
  .hero{height:min(780px, calc(100vh - var(--navH))); min-height:520px;}
  .hero-slide img{object-fit:contain; background:rgba(0,0,0,.25);}
}

/* 3) INTRO: professional look + guaranteed exit */
#intro{background:radial-gradient(circle at 50% 40%, rgba(227,194,111,.12), rgba(0,0,0,.92) 55%, #000 100%) !important;}
#intro .logo{
  filter: drop-shadow(0 18px 50px rgba(0,0,0,.55)) !important;
  animation: logoInPro 1.2s cubic-bezier(.2,.9,.2,1) forwards !important;
}
@keyframes logoInPro{
  0%{opacity:0; transform: translateY(18px) scale(.92) rotateX(8deg); filter: blur(10px) drop-shadow(0 18px 50px rgba(0,0,0,.55));}
  65%{opacity:1; transform: translateY(0) scale(1.02) rotateX(0deg); filter: blur(0) drop-shadow(0 20px 60px rgba(0,0,0,.6));}
  100%{opacity:1; transform: translateY(0) scale(1); filter: blur(0) drop-shadow(0 18px 55px rgba(0,0,0,.55));}
}
#intro.hide{opacity:0; visibility:hidden; transition: opacity .55s ease, visibility .55s ease;}


/* =========================
   V54 FIXES: Hero captions + mobile header spacing + liquid glass
   ========================= */

/* Hero caption: left-bottom with liquid glass */
.hero.hero-full .hero-content{
  position:absolute !important;
  left: clamp(14px, 3vw, 34px) !important;
  /* Move liquid-glass caption closer to the bottom so it doesn't cover the background */
  bottom: clamp(8px, 2.2vw, 24px) !important;
  margin:0 !important;
  max-width: min(780px, calc(100% - 28px)) !important;
  text-align:left !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
  border-radius: 28px !important;
  padding: clamp(16px, 2.6vw, 26px) !important;
}

.hero.hero-full .hero-title{
  margin:0 0 10px 0 !important;
  text-align:left !important;
}

.hero.hero-full .hero-subtitle{
  margin:0 !important;
  text-align:left !important;
  max-width: 62ch !important;
  opacity:.95 !important;
}

/* Keep slider controls above caption */
.hero-nav{z-index:3 !important;}
.hero.hero-full::after{opacity:.75 !important;}

/* Remove hero dots (user requested) */
.hero-dots,
.hero-dot{
  display:none !important;
}

/* Mobile header: prevent overlap */
@media (max-width: 520px){
  .navbar{gap:8px !important;}
  .brand{gap:10px !important;}
  .brandMark{width:36px !important;height:36px !important;border-radius:999px !important;}
  .brandName{font-size:12px !important;max-width: 46vw !important;}
  .actions{gap:8px !important;}
  .btn{padding:9px 10px !important;border-radius:999px !important;}
  .notice-bell{width:40px !important;height:40px !important;justify-content:center !important;padding:0 !important;}
  .notice-bell-icon{font-size:16px !important;}
  header.nav .btn.btn-primary{padding:10px 12px !important;border-radius:999px !important;}
}

/* Extra small devices */
@media (max-width: 380px){
  .brandName{max-width: 40vw !important;}
  header.nav .btn.btn-primary{display:none !important;} /* Avoid collision */
  .actions{gap:6px !important;}
}


/* ===========================
   PATCH: HERO caption + mobile header + lightbox no-crop
   =========================== */

/* HERO caption: left-bottom with liquid glass */
.hero-content{
  position:absolute !important;
  left: clamp(14px, 3vw, 36px);
  bottom: clamp(14px, 3vw, 36px);
  right:auto;
  top:auto;
  text-align:left !important;
  z-index:5;

  max-width: min(520px, calc(100% - 28px));
  padding: 16px 18px;
  border-radius: 16px;

  background: rgba(15,15,18,.20);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);

  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  animation: heroCaptionIn .45s ease-out both;
}

@keyframes heroCaptionIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}


.hero-title{margin:0 0 8px !important; line-height:1.08;}
.hero-subtitle{margin:0 !important; opacity:.95; line-height:1.35;}

/* Keep slider arrows visible but not overlapping caption */
.hero-nav{z-index:6;}

/* Mobile header overlap fix */
@media (max-width:720px){
  .navbar{gap:10px;}
  .brand{min-width:0; gap:10px;}
  .brandSub{display:none;}
  .brandName{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:48vw;}
  .actions{gap:8px; flex-wrap:nowrap;}
  .actions .btn,
  .actions .notice-bell{width:42px; height:42px; min-height:42px; padding:0; border-radius:999px;}
  .actions .btn-primary{height:42px; min-height:42px; padding:0 14px; font-size:13px; border-radius:999px;}
}
@media (max-width:420px){
  .brandName{max-width:44vw;}
  .actions{gap:6px;}
  .actions .btn-primary{padding:0 12px;}
}

/* Lightbox single image: NEVER crop on large screens */
#lightbox .panel{
  max-height:92vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
#lightbox .bar{flex:0 0 auto;}
#lightbox img#lbImg{
  flex:1 1 auto;
  width:auto !important;
  height:auto !important;
  max-width:100%;
  max-height:calc(92vh - 56px);
  margin:0 auto 14px;
  object-fit:contain !important;
  background:transparent;
}

/* Premium internal pages */
.pageHero{padding:86px 0 24px;position:relative}
.pageHero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:center}
.pageHero h1{margin:0;font-size:40px;letter-spacing:.01em}
.pageHero p{margin:10px 0 0;color:var(--muted);line-height:1.85}
.pageHero .heroCard{border:1px solid var(--stroke);background:color-mix(in oklab,var(--panel) 85%, transparent);border-radius:22px;padding:16px;box-shadow:0 18px 70px rgba(0,0,0,.35)}
.badgeRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid var(--stroke);background:color-mix(in oklab,var(--panel) 78%, transparent);color:var(--text);font-weight:850;font-size:12px}
.stepGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.step{border:1px solid var(--stroke);background:color-mix(in oklab,var(--panel) 82%, transparent);border-radius:18px;padding:14px}
.step .num{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;font-weight:1000;border:1px solid var(--stroke);background:rgba(0,0,0,.12)}
.step h4{margin:10px 0 6px;font-size:14px}
.step p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.tableWrap{overflow:auto;border-radius:18px;border:1px solid var(--stroke);background:color-mix(in oklab,var(--panel) 86%, transparent)}
table.premiumTable{width:100%;border-collapse:collapse;min-width:720px}
table.premiumTable th, table.premiumTable td{padding:14px 14px;border-bottom:1px solid var(--stroke);text-align:left}
table.premiumTable th{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
table.premiumTable td{color:var(--text)}
.highlight{border:1px solid rgba(176,141,87,.35);background:linear-gradient(180deg, rgba(176,141,87,.14), rgba(0,0,0,.10));border-radius:22px;padding:18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:980px){
  .pageHero .container{grid-template-columns:1fr}
  .stepGrid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .pageHero h1{font-size:34px}
}
@media (max-width:560px){
  .stepGrid{grid-template-columns:1fr}
}


/* Phase-2: Testimonials + Policies */
.quoteCard{position:relative; overflow:hidden;}
.quoteMark{
  position:absolute;
  top:10px;
  right:14px;
  font-size:44px;
  line-height:1;
  font-weight:1000;
  color:color-mix(in oklab,var(--gold) 70%, transparent);
  opacity:.45;
  pointer-events:none;
}
.quoteMeta{
  margin-top:12px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:900;
}
.policyCard{display:block}
.policyList{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.75;
}
.policyList li{margin:6px 0}

/* ===== Phase 3: Events, Payments, Blog ===== */
.calendarWrap{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start}
@media (max-width: 900px){.calendarWrap{grid-template-columns:1fr}}
.calendar{border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.03)}
.calHead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.calHead .btn{padding:8px 10px;border-radius:12px}
.calGrid{display:grid;grid-template-columns:repeat(7,1fr)}
.calDow{font-size:12px;opacity:.8;padding:10px;text-align:center;border-bottom:1px solid rgba(255,255,255,.08)}
.calCell{min-height:70px;padding:8px;border-bottom:1px solid rgba(255,255,255,.06);border-right:1px solid rgba(255,255,255,.06)}
.calCell:nth-child(7n){border-right:none}
.calNum{font-size:12px;opacity:.85}
.calDot{width:8px;height:8px;border-radius:50%;display:inline-block;background:rgba(255,255,255,.75);margin-top:8px}
.calCell.isToday{background:rgba(255,255,255,.05)}
.calCell.isOtherMonth{opacity:.35}
.eventList{display:grid;gap:12px}
.eventItem{border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px;background:rgba(255,255,255,.03)}
.eventItem h4{margin:0 0 6px 0}

/* Events page calendar (V73) - matches assets/js/events.js markup */
.calHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 2px}
.calWeek{display:grid;grid-template-columns:repeat(7,1fr);gap:0}
.calWeek span{font-size:12px;opacity:.8;padding:8px 6px;text-align:center}
.calGrid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.03)}
.calCell{position:relative;appearance:none;border:0;background:transparent;color:inherit;cursor:pointer;text-align:left;min-height:66px;padding:10px;border-top:1px solid rgba(255,255,255,.06);border-right:1px solid rgba(255,255,255,.06)}
.calCell:nth-child(7n){border-right:none}
.calCell.isEmpty{cursor:default;opacity:.28}
.calDay{font-size:12px;opacity:.85}
.calBadge{position:absolute;top:10px;right:10px;min-width:18px;height:18px;padding:0 6px;border-radius:999px;font-size:11px;display:inline-flex;align-items:center;justify-content:center;background:rgba(176,141,87,.22);border:1px solid rgba(176,141,87,.42);color:rgba(255,255,255,.92)}

.blogGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width: 900px){.blogGrid{grid-template-columns:1fr}}
.blogCard{border:1px solid rgba(255,255,255,.12);border-radius:22px;overflow:hidden;background:rgba(255,255,255,.03)}
.blogCover{height:170px;overflow:hidden}
.blogCover img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.blogBody{padding:14px}
.blogMeta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;opacity:.85}

.payGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width: 900px){.payGrid{grid-template-columns:1fr}}
.payCard{border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:14px;background:rgba(255,255,255,.03)}
.payCard h4{margin:0 0 8px 0}
.payHint{font-size:12px;opacity:.85;line-height:1.8}

/* Desktop "More" dropdown (premium, minimal) */
.navMore{position:relative;display:inline-flex;align-items:center;}
.moreBtn{
  font-weight:950;
  font-size:13px;
  opacity:.92;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  transition:transform .18s var(--ease), background .18s var(--ease), opacity .18s var(--ease);
}
.moreBtn:hover{transform:translateY(-1px);background:color-mix(in oklab,var(--panel2) 70%, transparent);opacity:1;}
.navMore.open .moreBtn{background:color-mix(in oklab,var(--panel2) 85%, transparent);opacity:1;}

.moreMenu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:240px;
  padding:10px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:color-mix(in oklab,var(--panel) 92%, transparent);
  box-shadow:0 18px 55px rgba(0,0,0,.28);
  display:none;
  z-index:70;
}
.navMore.open .moreMenu{display:block;}
.moreMenu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  font-weight:850;
  opacity:.92;
}
.moreMenu a:hover{
  background:color-mix(in oklab,var(--panel2) 80%, transparent);
  opacity:1;
}

/* Desktop header menu: show 5 main items, hide hamburger */
@media (min-width: 721px){
  header.nav nav.menu{display:flex !important;}
  header.nav .btn.hamb{display:none !important;}
}

/* Mobile: keep drawer hamburger only */
@media (max-width: 720px){
  header.nav nav.menu{display:none !important;}
  header.nav .btn.hamb{display:inline-flex !important;}
}


/* Simple footer (less hectic, more premium) */
.footer-simple{padding:28px 0;border-top:1px solid var(--stroke);background:color-mix(in oklab,var(--bg) 90%, transparent);}
.footer-simple .footSimple{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;}
.footer-simple .footBrand{display:flex;gap:12px;align-items:center;}
.footer-simple .footLogo{width:42px;height:42px;border-radius:12px;overflow:hidden;border:1px solid var(--stroke);background:color-mix(in oklab,var(--panel) 86%, transparent);display:flex;align-items:center;justify-content:center;}
.footer-simple .footLogo img{width:100%;height:100%;object-fit:contain;padding:6px;}
.footer-simple .footMeta{max-width:520px;line-height:1.7;color:var(--muted);}
.footer-simple .footMeta a{color:color-mix(in oklab,var(--text) 88%, var(--muted));text-decoration:none;border-bottom:1px solid transparent;}
.footer-simple .footMeta a:hover{border-bottom-color:color-mix(in oklab,var(--gold) 45%, transparent);}
.footer-simple .footBottom{margin-top:16px;padding-top:14px;border-top:1px solid var(--stroke);color:var(--muted);}
@media (max-width:768px){
  .footer-simple{padding:22px 0;}
  .footer-simple .footBrand{align-items:flex-start;}
  .footer-simple .footMeta{max-width:100%;}
}

/* ==========================================================
   HERO (Premium, no-crop)
   Desktop: strict 16:9 frame (1920×1080 feel)
   Mobile: image stays 16:9, text sits BELOW so it never blocks the photo
   Bonus: blurred cover backdrop fills any letterboxing without cropping the main image
   ========================================================== */

/* Desktop + tablet: lock hero into a true 16:9 frame */
.hero{
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background: #000;
}

/* Slide layer fills the frame */
.hero-slider,
.hero-slide{ inset: 0; }

/* Backdrop (set by JS using --bg-url) */
.hero-slide{ position:absolute; overflow:hidden; }
.hero-slide::before{
  content:"";
  position:absolute;
  inset:-18px;
  background-image: var(--bg-url);
  background-size: cover;
  background-position: center;
  filter: blur(18px);
  transform: scale(1.08);
  opacity: .38;
}

/* Main image stays fully visible (no crop) */
.heroImg,
.hero-slide img,
.hero img{
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent;
}

/* Mobile: make hero taller overall by placing text BELOW image */
@media (max-width: 768px){
  .hero{ aspect-ratio: auto !important; height: auto !important; }
  .hero-slider{ position: relative !important; width: 100%; aspect-ratio: 16 / 9; }
  .hero-content{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 12px 12px 0 12px;
  }
}


/* ===== HERO MOBILE: keep image fully visible + move text below (no blocking) ===== */
@media (max-width: 768px){
  /* let hero height be driven by the image (16:9) + the text card below */
  .hero.hero-full{
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  .hero.hero-full .hero-slider{
    position:relative !important;
    inset:auto !important;
    width:100%;
    aspect-ratio:16 / 9;
    height:auto !important;
    background: rgba(0,0,0,.35);
  }
  .hero.hero-full .hero-slide{
    position:absolute;
    inset:0;
  }
  .hero.hero-full .hero-slide img{
    width:100%;
    height:100%;
    object-fit:contain !important; /* no crop on mobile */
    object-position:center center !important;
    transform:none !important;
    background: rgba(0,0,0,.35);
  }
  /* place the text card below the image */
  .hero.hero-full .hero-content{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    margin: 12px 14px 14px;
    max-width:none !important;
    width:auto;
  }
  /* keep titles readable but not huge */
  .hero.hero-full .hero-title{
    font-size: 22px;
    line-height:1.15;
  }
  .hero.hero-full .hero-subtitle{
    font-size: 13px;
    line-height:1.5;
  }
  /* keep slider arrows centered on the image area */
  .hero.hero-full .hero-nav{
    top: calc((100vw * 9 / 16) / 2);
    transform: translateY(-50%);
  }
}
/* ===== END HERO MOBILE FIX ===== */