/* =====================================================================
   St. Paul's Co-Ed School, Bhopal: site theme (2026 redesign)
   Mobile-first. Every class is prefixed "sp-" so it never collides with
   Bootstrap 3 / the legacy wever.css that old page fragments still use.
   Bootstrap 3 sets html{font-size:10px}, so sizes here are in px.
   ===================================================================== */

:root {
	--sp-navy: #0b1f4d;
	--sp-navy-2: #12296a;
	--sp-blue: #1a3a8f;
	--sp-royal: #2453c7;
	--sp-sky: #eaf0ff;
	--sp-gold: #ffc91e;
	--sp-gold-2: #f4ae00;
	--sp-gold-soft: #fff4cf;
	--sp-ink: #0f172a;
	--sp-text: #334155;
	--sp-muted: #64748b;
	--sp-line: #e3e8f2;
	--sp-bg: #f6f8fc;
	--sp-card: #ffffff;
	--sp-radius: 18px;
	--sp-radius-sm: 12px;
	--sp-shadow-sm: 0 2px 8px rgba(15, 31, 77, .06);
	--sp-shadow: 0 12px 32px -12px rgba(15, 31, 77, .18), 0 2px 6px rgba(15, 31, 77, .05);
	--sp-shadow-lg: 0 30px 60px -20px rgba(11, 31, 77, .35);
	--sp-ease: cubic-bezier(.22, .61, .36, 1);
	--sp-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sp-display: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
	--sp-header-h: 72px;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.sp-body {
	margin: 0;
	font-family: var(--sp-font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--sp-text);
	background: var(--sp-bg);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
body.sp-body.sp-lock { overflow: hidden; }
.sp-body img { max-width: 100%; height: auto; }
.sp-body a { color: var(--sp-royal); transition: color .2s; }
.sp-body a:hover, .sp-body a:focus { color: var(--sp-blue); text-decoration: none; }
.sp-body :focus-visible { outline: 3px solid var(--sp-gold); outline-offset: 2px; border-radius: 6px; }
.sp-body ::selection { background: var(--sp-gold); color: var(--sp-navy); }
.sp-body h1, .sp-body h2, .sp-body h3, .sp-body h4 { font-family: var(--sp-display); color: var(--sp-ink); line-height: 1.2; }
.sp-skip { position: absolute; left: -9999px; top: 8px; z-index: 2000; background: var(--sp-gold); color: var(--sp-navy); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.sp-skip:focus { left: 12px; }
.sp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sp-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
@media (min-width: 768px) { .sp-container { padding: 0 28px; } }

/* Scroll progress bar */
.sp-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--sp-gold), var(--sp-gold-2)); z-index: 1200; pointer-events: none; }

/* ---------- Buttons ---------- */
.sp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 22px; border-radius: 999px; border: 2px solid transparent;
	font: 700 15px/1.2 var(--sp-font); letter-spacing: .01em; cursor: pointer;
	transition: transform .25s var(--sp-ease), box-shadow .25s var(--sp-ease), background .25s, color .25s, border-color .25s;
	text-decoration: none !important; white-space: nowrap;
}
.sp-btn:hover { transform: translateY(-2px); }
.sp-btn--gold { background: var(--sp-gold); color: var(--sp-navy) !important; box-shadow: 0 10px 24px -10px rgba(244, 174, 0, .8); }
.sp-btn--gold:hover { background: #ffd54d; box-shadow: 0 14px 28px -10px rgba(244, 174, 0, .9); }
.sp-btn--blue { background: var(--sp-royal); color: #fff !important; box-shadow: 0 10px 24px -12px rgba(36, 83, 199, .9); }
.sp-btn--blue:hover { background: var(--sp-blue); }
.sp-btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff !important; background: rgba(255, 255, 255, .08); }
.sp-btn--ghost:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.sp-btn--line { border-color: var(--sp-line); color: var(--sp-blue) !important; background: #fff; }
.sp-btn--line:hover { border-color: var(--sp-royal); }
.sp-btn--sm { padding: 9px 16px; font-size: 14px; }
.sp-btn .fa { font-size: 1.05em; }

.sp-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sp-royal) !important; }
.sp-link-arrow .fa { transition: transform .25s var(--sp-ease); }
.sp-link-arrow:hover .fa { transform: translateX(4px); }

/* ---------- Top bar ---------- */
.sp-topbar { background: var(--sp-navy); color: #c9d4f2; font-size: 13.5px; }
.sp-topbar .sp-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.sp-topbar a { color: #e6ecff !important; }
.sp-topbar a:hover { color: var(--sp-gold) !important; }
.sp-topbar__info { display: none; gap: 22px; }
.sp-topbar__info span { display: inline-flex; align-items: center; gap: 7px; }
.sp-topbar__info .fa { color: var(--sp-gold); }
.sp-topbar__cta { display: flex; gap: 8px; margin-left: auto; }
.sp-topbar__cta a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-weight: 600; font-size: 12.5px; }
.sp-topbar__cta a.is-hot { background: var(--sp-gold); color: var(--sp-navy) !important; }
.sp-topbar__cta a.is-hot:hover { background: #ffd54d; }
@media (min-width: 900px) { .sp-topbar__info { display: flex; } }
@media (max-width: 767px) { .sp-topbar { display: none; } }
@media (max-width: 420px) { .sp-topbar__cta a { padding: 4px 9px; font-size: 12px; } }

/* ---------- Header / nav ---------- */
.sp-header {
	position: sticky; top: 0; z-index: 1000;
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid rgba(227, 232, 242, .8);
	transition: box-shadow .3s, background .3s;
}
.sp-header.is-stuck { box-shadow: 0 10px 30px -18px rgba(11, 31, 77, .45); background: rgba(255, 255, 255, .95); }
.sp-header__row { display: flex; align-items: center; gap: 16px; min-height: var(--sp-header-h); }
.sp-brand { display: flex; align-items: center; gap: 12px; text-decoration: none !important; min-width: 0; }
.sp-brand > img { width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 6px 16px -6px rgba(26, 58, 143, .6); transition: transform .5s var(--sp-ease); flex: 0 0 auto; }
.sp-brand:hover > img { transform: rotate(-8deg) scale(1.05); }
.sp-brand__txt { min-width: 0; }
.sp-brand__name { display: block; font: 800 17px/1.15 var(--sp-display); color: var(--sp-navy); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-brand__sub { display: block; font-size: 11.5px; color: var(--sp-muted); font-weight: 600; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 480px) { .sp-brand__name { font-size: 19px; } .sp-brand > img { width: 54px; height: 54px; } }

/* Hanging ribbon logo: its top sits in the sticky header, the rest hangs over the
   slider / page below and stays in place on every page while scrolling. */
:root { --sp-ribbon-w: 60px; --sp-ribbon-h: 103px; --sp-topbar-h: 40px; }
@media (min-width: 768px) { :root { --sp-ribbon-w: 80px; --sp-ribbon-h: 137px; } }
@media (min-width: 1180px) { :root { --sp-ribbon-w: 92px; --sp-ribbon-h: 158px; } }
@media (max-width: 767px) { :root { --sp-topbar-h: 0px; } } /* phones hide the top bar */
.sp-topbar .sp-container { min-height: var(--sp-topbar-h); }
.sp-header__row { position: relative; }
.sp-brand--ribbon { padding-left: calc(var(--sp-ribbon-w) + 14px); }
/* Like the original site: the ribbon starts at the very top of the page (over the
   top bar), and once the header sticks it rides along with it, full crest visible. */
.sp-ribbon {
	position: absolute; top: calc(-1 * var(--sp-topbar-h)); left: 16px; width: var(--sp-ribbon-w); height: var(--sp-ribbon-h); z-index: 2;
	transform-origin: 50% 0; animation: sp-ribbon-drop 1.1s var(--sp-ease) both;
	transition: top .35s var(--sp-ease), height .35s var(--sp-ease), width .35s var(--sp-ease);
}
.sp-header.is-stuck .sp-ribbon { top: 0; width: calc(var(--sp-ribbon-w) * .7); height: calc(var(--sp-ribbon-h) * .7); }
@media (min-width: 768px) { .sp-ribbon { left: 28px; } }
.sp-ribbon { filter: drop-shadow(0 10px 14px rgba(11, 31, 77, .35)); }
/* logo-ribbon.png is the old badge trimmed to its clean blue part; the swallow-tail
   notch is cut here so it looks crisp over any slide photo. */
.sp-ribbon img { display: block; width: 100%; height: 100%; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 87%, 0 100%); }
/* Keep the top-bar text clear of the ribbon. */
.sp-topbar .sp-container { padding-left: calc(var(--sp-ribbon-w) + 30px); }
@media (min-width: 768px) { .sp-topbar .sp-container { padding-left: calc(var(--sp-ribbon-w) + 52px); } }
.sp-brand--ribbon:hover .sp-ribbon { animation: sp-ribbon-swing 1.2s ease-in-out; }
@keyframes sp-ribbon-drop { from { transform: translateY(-100%); } 70% { transform: translateY(4%); } to { transform: none; } }
@keyframes sp-ribbon-swing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } }
@media (max-width: 400px) { .sp-brand--ribbon .sp-brand__sub { display: none; } }
/* Desktop: the ribbon already carries the school name, so the menu gets the room. */
@media (min-width: 1180px) { .sp-header .sp-brand--ribbon .sp-brand__txt { display: none; } .sp-header .sp-brand--ribbon { padding-left: var(--sp-ribbon-w); } }
/* Inner page titles start to the right of the hanging ribbon. */
.sp-pagehero .sp-container { padding-left: calc(var(--sp-ribbon-w) + 32px); }
@media (min-width: 768px) { .sp-pagehero .sp-container { padding-left: calc(var(--sp-ribbon-w) + 56px); } }

.sp-nav { display: none; margin-left: auto; }
.sp-nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.sp-nav li { position: relative; list-style: none; }
.sp-nav > ul > li > a {
	position: relative; display: flex; align-items: center; gap: 6px;
	padding: 10px 11px; border-radius: 10px;
	font: 600 14.5px/1.2 var(--sp-font); color: var(--sp-ink) !important; white-space: nowrap;
}
.sp-nav > ul > li > a::after {
	content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px; border-radius: 2px;
	background: var(--sp-gold-2); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--sp-ease);
}
.sp-nav > ul > li:hover > a::after, .sp-nav > ul > li:focus-within > a::after, .sp-nav > ul > li.is-current > a::after { transform: scaleX(1); }
.sp-nav > ul > li > a .fa { font-size: 11px; opacity: .6; transition: transform .25s; }
.sp-nav > ul > li:hover > a .fa { transform: rotate(180deg); }
.sp-nav .sp-sub {
	position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; margin: 0; padding: 8px;
	background: #fff; border-radius: 14px; border: 1px solid var(--sp-line); box-shadow: var(--sp-shadow-lg);
	opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s, transform .22s var(--sp-ease), visibility .22s;
}
.sp-nav .sp-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.sp-nav li:hover > .sp-sub, .sp-nav li:focus-within > .sp-sub { opacity: 1; visibility: visible; transform: none; }
.sp-nav .sp-sub a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--sp-text) !important; }
.sp-nav .sp-sub a:hover { background: var(--sp-sky); color: var(--sp-blue) !important; padding-left: 16px; }
.sp-nav .sp-sub a { transition: background .2s, padding .2s, color .2s; }
.sp-nav .sp-sub .sp-sub { top: -8px; left: calc(100% + 6px); }
.sp-nav .sp-sub .sp-sub::before { top: 0; bottom: 0; left: -10px; width: 10px; height: auto; right: auto; }
.sp-nav > ul > li:nth-last-child(-n+3) > .sp-sub { left: auto; right: 0; }
.sp-nav > ul > li:nth-last-child(-n+3) .sp-sub .sp-sub { left: auto; right: calc(100% + 6px); }

.sp-header__cta { display: none; }
.sp-burger {
	margin-left: auto; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--sp-line);
	background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto;
}
.sp-burger span, .sp-burger span::before, .sp-burger span::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--sp-navy); position: relative; transition: transform .3s; }
.sp-burger span::before, .sp-burger span::after { content: ""; position: absolute; left: 0; }
.sp-burger span::before { top: -6px; } .sp-burger span::after { top: 6px; }

@media (min-width: 1180px) {
	.sp-nav { display: block; }
	.sp-burger { display: none; }
}
@media (min-width: 1180px) and (max-width: 1320px) {
	.sp-nav > ul > li > a { padding: 10px 8px; font-size: 13.5px; }
	.sp-nav > ul > li > a::after { left: 8px; right: 8px; }
	.sp-brand__sub { display: none; }
}

/* Drawer (phones / tablets) */
.sp-drawer-scrim { position: fixed; inset: 0; background: rgba(11, 31, 77, .5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 1100; }
.sp-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); z-index: 1101;
	background: #fff; transform: translateX(105%); transition: transform .4s var(--sp-ease);
	display: flex; flex-direction: column; box-shadow: var(--sp-shadow-lg);
}
.sp-drawer.is-open { transform: none; }
.sp-drawer.is-open + .sp-drawer-scrim, .sp-drawer-scrim.is-open { opacity: 1; visibility: visible; }
.sp-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--sp-line); }
.sp-drawer__close { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--sp-line); background: #fff; font-size: 20px; color: var(--sp-navy); cursor: pointer; }
.sp-drawer__body { flex: 1; overflow-y: auto; padding: 8px 10px 16px; -webkit-overflow-scrolling: touch; }
.sp-drawer ul { list-style: none; margin: 0; padding: 0; }
.sp-drawer li { list-style: none; }
.sp-drawer__body a, .sp-drawer button.sp-acc {
	display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
	padding: 13px 12px; border: 0; background: none; border-radius: 10px; text-align: left;
	font: 600 16px/1.3 var(--sp-font); color: var(--sp-ink) !important; cursor: pointer;
}
.sp-drawer__body a:hover, .sp-drawer button.sp-acc:hover { background: var(--sp-sky); }
.sp-drawer button.sp-acc .fa { transition: transform .3s; color: var(--sp-muted); }
.sp-drawer button.sp-acc[aria-expanded="true"] .fa { transform: rotate(180deg); }
.sp-drawer .sp-sub { display: none; padding-left: 12px; margin-left: 12px; border-left: 2px solid var(--sp-gold-soft); }
.sp-drawer .sp-sub.is-open { display: block; animation: sp-fade-down .3s var(--sp-ease); }
.sp-drawer__body .sp-sub a, .sp-drawer .sp-sub button.sp-acc { font-weight: 500; font-size: 15px; padding: 10px 12px; color: var(--sp-text) !important; }
.sp-drawer__foot { padding: 14px 16px 20px; border-top: 1px solid var(--sp-line); display: grid; gap: 10px; }
.sp-drawer__foot .sp-btn { width: 100%; box-sizing: border-box; }
.sp-drawer__head .sp-brand { text-decoration: none !important; }
@keyframes sp-fade-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Hero slider ---------- */
.sp-hero { position: relative; background: var(--sp-navy); overflow: hidden; isolation: isolate; }
.sp-hero__track { position: relative; height: clamp(150px, 40vw, 640px); }
.sp-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s var(--sp-ease), visibility 1s; }
.sp-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
/* Blurred copy fills the frame; the real photo sits on top uncropped, so text
   baked into the slide images is never cut off at any screen size. */
.sp-slide__bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(28px) saturate(1.2) brightness(.65); transform: scale(1.1); }
.sp-slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scale(1.04); }
.sp-slide.is-active .sp-slide__img { animation: sp-kenburns 7s ease-out forwards; }
.sp-slide.is-active .sp-slide__bg { animation: sp-kenburns-bg 9s ease-out forwards; }
@keyframes sp-kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes sp-kenburns-bg { from { transform: scale(1.1) translateX(0); } to { transform: scale(1.25) translateX(-2%); } }
.sp-hero__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(11, 31, 77, 0) 60%, rgba(11, 31, 77, .55) 100%); }
.sp-hero__nav { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(11, 31, 77, .35); color: #fff; font-size: 18px; cursor: pointer; display: none; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .25s, transform .25s; }
.sp-hero__nav:hover { background: var(--sp-gold); color: var(--sp-navy); }
.sp-hero__nav--prev { left: 18px; } .sp-hero__nav--next { right: 18px; }
@media (min-width: 768px) { .sp-hero__nav { display: inline-flex; } }
.sp-hero__dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 0 16px; }
.sp-hero__dot { width: 26px; height: 5px; border-radius: 5px; border: 0; padding: 0; background: rgba(255, 255, 255, .4); overflow: hidden; cursor: pointer; position: relative; }
.sp-hero__dot i { position: absolute; inset: 0; background: var(--sp-gold); transform: scaleX(0); transform-origin: left; }
.sp-hero__dot.is-active { width: 44px; }
.sp-hero__dot.is-active i { animation: sp-dot 6s linear forwards; }
.sp-hero.is-paused .sp-hero__dot.is-active i { animation-play-state: paused; }
@keyframes sp-dot { to { transform: scaleX(1); } }
@media (min-width: 768px) { .sp-hero__dots { bottom: 92px; } }
@media (max-width: 767px) { .sp-hero__dots { bottom: 8px; gap: 5px; flex-wrap: nowrap; } .sp-hero__dot { width: 10px; height: 4px; flex: 0 1 10px; } .sp-hero__dot.is-active { width: 22px; flex-basis: 22px; } }

/* Intro card that overlaps the hero */
.sp-intro { position: relative; z-index: 5; margin-top: 16px; }
@media (min-width: 768px) { .sp-intro { margin-top: -70px; } }
.sp-intro__card {
	display: grid; gap: 18px; align-items: center;
	padding: 22px; border-radius: 22px; background: #fff; box-shadow: var(--sp-shadow-lg);
	border: 1px solid rgba(227, 232, 242, .9); position: relative; overflow: hidden;
}
.sp-intro__card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: linear-gradient(var(--sp-gold), var(--sp-royal)); }
.sp-intro__eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-gold-2); }
.sp-intro__title { margin: 4px 0 4px; font-size: clamp(22px, 3.4vw, 32px); font-weight: 800; letter-spacing: -.02em; }
.sp-intro__title em { font-style: normal; background: linear-gradient(90deg, var(--sp-royal), var(--sp-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-intro__sub { margin: 0; color: var(--sp-muted); font-size: 14.5px; }
.sp-intro__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) { .sp-intro__card { grid-template-columns: 1fr auto; padding: 26px 32px; } }

/* ---------- Announcement ticker ---------- */
.sp-ticker { margin-top: 18px; }
.sp-ticker__inner { display: flex; align-items: stretch; border-radius: 14px; overflow: hidden; background: var(--sp-navy); color: #fff; box-shadow: var(--sp-shadow); }
.sp-ticker__label { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--sp-gold); color: var(--sp-navy); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.sp-ticker__label .fa { animation: sp-ring 2.4s ease-in-out infinite; }
.sp-ticker__viewport { flex: 1; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.sp-ticker__move { display: inline-flex; gap: 48px; white-space: nowrap; padding: 12px 0; animation: sp-marquee var(--sp-ticker-dur, 40s) linear infinite; }
.sp-ticker:hover .sp-ticker__move { animation-play-state: paused; }
.sp-ticker__move a { color: #fff !important; font-weight: 600; font-size: 14.5px; }
.sp-ticker__move a::before { content: "\2726"; color: var(--sp-gold); margin-right: 10px; }
.sp-ticker__move a:hover { color: var(--sp-gold) !important; }
@keyframes sp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sp-ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } 85% { transform: rotate(12deg); } }

/* ---------- Sections ---------- */
.sp-section { padding: 56px 0; position: relative; }
@media (min-width: 768px) { .sp-section { padding: 84px 0; } }
.sp-section--tight { padding-top: 36px; }
.sp-section--white { background: #fff; }
.sp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 28px; }
.sp-head--center { flex-direction: column; align-items: center; text-align: center; }
.sp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-gold-2); }
.sp-eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.sp-title { margin: 8px 0 0; font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -.025em; }
.sp-title span { color: var(--sp-royal); }
.sp-lead { margin: 10px 0 0; max-width: 620px; color: var(--sp-muted); font-size: 16px; }

.sp-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .sp-grid--2 { grid-template-columns: repeat(2, 1fr); } .sp-grid--4 { grid-template-columns: repeat(2, 1fr); } .sp-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .sp-grid--3 { grid-template-columns: repeat(3, 1fr); } .sp-grid--4 { grid-template-columns: repeat(4, 1fr); } .sp-grid { gap: 24px; } }

/* ---------- Welcome ---------- */
.sp-welcome { display: grid; gap: 32px; align-items: center; }
@media (min-width: 992px) { .sp-welcome { grid-template-columns: 1.15fr .85fr; gap: 56px; } }
.sp-welcome__text { font-size: 16.5px; color: var(--sp-text); }
.sp-welcome__text p { margin: 0 0 14px; }
.sp-welcome__quote { margin: 22px 0 26px; padding: 18px 20px; border-radius: 14px; background: var(--sp-gold-soft); color: #6b4e00; font-weight: 600; display: flex; gap: 14px; align-items: flex-start; }
.sp-welcome__quote .fa { color: var(--sp-gold-2); font-size: 22px; }
.sp-welcome__media { position: relative; }
.sp-welcome__media::before { content: ""; position: absolute; inset: 26px -14px -14px 26px; border-radius: 26px; background: linear-gradient(135deg, var(--sp-gold) 0%, var(--sp-gold-2) 100%); z-index: 0; }
.sp-welcome__frame { position: relative; z-index: 1; border-radius: 24px; overflow: hidden; background: var(--sp-navy); box-shadow: var(--sp-shadow-lg); }
.sp-welcome__badge { position: absolute; z-index: 2; left: -10px; bottom: 22px; background: #fff; border-radius: 16px; padding: 12px 16px; box-shadow: var(--sp-shadow); display: flex; gap: 12px; align-items: center; animation: sp-float 5s ease-in-out infinite; }
.sp-welcome__badge b { display: block; font: 800 15px/1.1 var(--sp-display); color: var(--sp-navy); }
.sp-welcome__badge small { color: var(--sp-muted); font-size: 12px; }
.sp-welcome__badge .fa { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--sp-sky); color: var(--sp-royal); font-size: 18px; }
@keyframes sp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Generic fade carousel (Walk in Wisdom, achievers) */
.sp-fader { position: relative; aspect-ratio: 4 / 3; }
@media (min-width: 992px) { .sp-welcome .sp-fader { aspect-ratio: 4 / 5; } }
.sp-fader > figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s var(--sp-ease), transform .9s var(--sp-ease); transform: scale(1.03); display: flex; align-items: center; justify-content: center; background: #fff; }
.sp-fader > figure.is-active { opacity: 1; transform: none; }
.sp-fader > figure { overflow: hidden; }
.sp-fader__bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(22px) saturate(1.2) brightness(.75); transform: scale(1.1); }
.sp-fader img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.sp-fader__ctl { position: absolute; z-index: 3; bottom: 12px; right: 12px; display: flex; gap: 8px; }
.sp-fader__ctl button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(11, 31, 77, .75); color: #fff; cursor: pointer; transition: background .2s; }
.sp-fader__ctl button:hover { background: var(--sp-gold); color: var(--sp-navy); }

/* ---------- Stats band ---------- */
.sp-stats { position: relative; overflow: hidden; color: #fff; background: radial-gradient(1200px 400px at 10% -10%, #2a52c9 0%, transparent 60%), linear-gradient(120deg, var(--sp-navy) 0%, var(--sp-navy-2) 60%, var(--sp-blue) 100%); }
.sp-stats::before, .sp-stats::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); opacity: .25; animation: sp-orbit 18s linear infinite; }
.sp-stats::before { width: 260px; height: 260px; right: -60px; top: -80px; border: 40px solid var(--sp-gold); }
.sp-stats::after { width: 140px; height: 140px; left: 6%; bottom: -70px; border: 24px solid #6f8fff; animation-duration: 24s; animation-direction: reverse; }
@keyframes sp-orbit { from { transform: rotate(0) translateX(10px) rotate(0); } to { transform: rotate(360deg) translateX(10px) rotate(-360deg); } }
.sp-stats .sp-container { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 16px; padding-top: 46px; padding-bottom: 46px; }
@media (min-width: 900px) { .sp-stats .sp-container { grid-template-columns: repeat(4, 1fr); } }
.sp-stat { text-align: center; }
.sp-stat__icon { width: 58px; height: 58px; margin: 0 auto 10px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: 24px; color: var(--sp-gold); }
.sp-stat__num { font: 800 clamp(32px, 5vw, 46px)/1 var(--sp-display); letter-spacing: -.02em; color: #fff; }
.sp-stat__lbl { margin-top: 6px; font-size: 14px; color: #c9d4f2; font-weight: 600; letter-spacing: .03em; }

/* ---------- Discover cards (highlights 2-5) ---------- */
.sp-card {
	position: relative; display: flex; flex-direction: column; height: 100%;
	background: var(--sp-card); border-radius: var(--sp-radius); padding: 26px 24px;
	border: 1px solid var(--sp-line); box-shadow: var(--sp-shadow-sm);
	transition: transform .4s var(--sp-ease), box-shadow .4s var(--sp-ease), border-color .4s;
	text-decoration: none !important; color: var(--sp-text) !important; overflow: hidden;
}
.sp-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--sp-gold), var(--sp-royal)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--sp-ease); }
.sp-card:hover { transform: translateY(-8px); box-shadow: var(--sp-shadow); border-color: transparent; }
.sp-card:hover::after { transform: scaleX(1); }
.sp-card__icon { width: 74px; height: 74px; border-radius: 20px; background: var(--sp-sky); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: transform .5s var(--sp-ease), background .4s; }
.sp-card__icon img { max-width: 52px; max-height: 48px; }
.sp-card:hover .sp-card__icon { transform: rotate(-6deg) scale(1.06); background: var(--sp-gold-soft); }
.sp-card__title { margin: 0 0 8px; font: 800 20px/1.25 var(--sp-display); color: var(--sp-ink); }
.sp-card__text { margin: 0 0 18px; font-size: 15px; color: var(--sp-muted); flex: 1; }
.sp-card__text * { font-size: inherit !important; color: inherit !important; font-family: inherit !important; }

/* ---------- News / downloads / achievers row ---------- */
.sp-tri { display: grid; gap: 22px; }
@media (min-width: 992px) { .sp-tri { grid-template-columns: 1.25fr 1fr .95fr; gap: 26px; } }
.sp-panel { background: #fff; border-radius: var(--sp-radius); border: 1px solid var(--sp-line); box-shadow: var(--sp-shadow-sm); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.sp-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--sp-line); }
.sp-panel__head h3 { margin: 0; font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.sp-panel__head h3 .fa { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--sp-sky); color: var(--sp-royal); font-size: 15px; }
.sp-panel__head a { font-size: 13.5px; font-weight: 700; }
.sp-panel__body { padding: 8px 12px; flex: 1; min-height: 0; }

/* Vertical auto-scrolling news list */
.sp-vscroll { position: relative; height: 420px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); }
.sp-vscroll__move { animation: sp-vmarquee var(--sp-vdur, 40s) linear infinite; }
.sp-vscroll:hover .sp-vscroll__move, .sp-vscroll:focus-within .sp-vscroll__move { animation-play-state: paused; }
@keyframes sp-vmarquee { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.sp-news { display: flex; gap: 14px; align-items: flex-start; padding: 14px 8px; border-bottom: 1px dashed var(--sp-line); text-decoration: none !important; border-radius: 12px; transition: background .2s; }
.sp-news:hover { background: var(--sp-bg); }
.sp-date { flex: 0 0 auto; width: 58px; text-align: center; border-radius: 14px; overflow: hidden; background: var(--sp-sky); box-shadow: inset 0 0 0 1px #d8e3ff; }
.sp-date b { display: block; font: 800 22px/1 var(--sp-display); color: var(--sp-blue); padding: 8px 0 4px; }
.sp-date small { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; background: var(--sp-royal); color: #fff; padding: 3px 0; }
.sp-news__t { font-weight: 700; color: var(--sp-ink); font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sp-news__m { margin-top: 4px; font-size: 12.5px; color: var(--sp-royal); font-weight: 700; }

.sp-dl { display: flex; align-items: center; gap: 14px; padding: 13px 10px; border-radius: 12px; text-decoration: none !important; color: var(--sp-ink) !important; transition: background .2s, transform .25s var(--sp-ease); }
.sp-dl + .sp-dl { border-top: 1px solid var(--sp-line); }
.sp-dl:hover { background: var(--sp-bg); transform: translateX(4px); }
.sp-dl__ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #fff1f1; color: #e0464e; font-size: 18px; }
.sp-dl__t { flex: 1; font-weight: 600; font-size: 14.5px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.sp-dl__go { color: var(--sp-muted); font-size: 14px; }
.sp-dl-list { max-height: 420px; overflow-y: auto; scrollbar-width: thin; }

.sp-panel .sp-fader { aspect-ratio: auto; height: 420px; }
.sp-panel .sp-fader > figure { padding: 10px; }
.sp-panel .sp-fader__ctl { top: 12px; bottom: auto; }

/* ---------- Academics ---------- */
.sp-acad-wrap { perspective: 1200px; }
.sp-acad {
	position: relative; display: block; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sp-navy);
	text-decoration: none !important; box-shadow: var(--sp-shadow); isolation: isolate;
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
	transition: transform .5s var(--sp-ease), box-shadow .5s var(--sp-ease);
}
.sp-acad.is-tilting { transition: transform .08s linear, box-shadow .5s var(--sp-ease); }
.sp-acad:hover { box-shadow: 0 34px 60px -24px rgba(11, 31, 77, .6); }
@media (min-width: 640px) and (max-width: 991px) { .sp-acad { aspect-ratio: 3 / 4; } }
.sp-acad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--sp-ease), filter .6s; }
.sp-acad:hover img { transform: scale(1.1); filter: saturate(1.15); }
/* Readable overlay: strong at the bottom where the text sits */
.sp-acad::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11, 31, 77, 0) 30%, rgba(11, 31, 77, .55) 58%, rgba(8, 20, 54, .96) 100%); transition: opacity .5s; }
/* Light sweep on hover */
.sp-acad::after { content: ""; position: absolute; z-index: 3; top: -20%; bottom: -20%; left: -60%; width: 40%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg) translateX(0); opacity: 0; pointer-events: none; }
.sp-acad:hover::after { animation: sp-shine 1.1s var(--sp-ease); }
@keyframes sp-shine { from { opacity: 1; transform: skewX(-18deg) translateX(0); } to { opacity: 0; transform: skewX(-18deg) translateX(420%); } }
.sp-acad__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 24px 24px; color: #fff; transform: translateZ(40px); }
.sp-acad__num { display: inline-flex; align-items: center; gap: 10px; font: 800 13px/1 var(--sp-display); letter-spacing: .22em; color: var(--sp-gold); }
.sp-acad__num::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; transition: width .5s var(--sp-ease); }
.sp-acad:hover .sp-acad__num::after { width: 54px; }
.sp-body .sp-acad__title { margin: 10px 0 8px; font: 800 clamp(24px, 2.4vw, 30px)/1.15 var(--sp-display); color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.sp-acad__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; line-height: 1.55; color: #dbe4ff; }
.sp-acad__text * { color: inherit !important; font-size: inherit !important; }
.sp-acad__cta { display: inline-flex; align-items: center; gap: 8px; max-height: 0; margin-top: 0; padding: 0 16px; overflow: hidden; border-radius: 999px; background: var(--sp-gold); color: var(--sp-navy); font-weight: 800; font-size: 13.5px; opacity: 0; transform: translateY(12px); transition: opacity .4s var(--sp-ease), transform .4s var(--sp-ease), max-height .45s var(--sp-ease), margin .45s var(--sp-ease), padding .45s var(--sp-ease); }
.sp-acad:hover .sp-acad__cta, .sp-acad:focus-visible .sp-acad__cta { opacity: 1; transform: none; max-height: 48px; margin-top: 14px; padding: 9px 16px; }
@media (hover: none) { .sp-acad__cta { opacity: 1; transform: none; max-height: 48px; margin-top: 14px; padding: 9px 16px; } }
.sp-acad__go { position: absolute; z-index: 2; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .3s, color .3s, transform .5s var(--sp-ease); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sp-acad:hover .sp-acad__go { background: var(--sp-gold); color: var(--sp-navy); transform: rotate(-45deg) scale(1.08); }
.sp-acad__badge { position: absolute; z-index: 2; top: 18px; left: 18px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--sp-navy); font-size: 12px; font-weight: 800; letter-spacing: .04em; box-shadow: var(--sp-shadow-sm); }

/* ---------- Gallery ---------- */
.sp-gallery { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .sp-gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 18px; } .sp-gallery > a:first-child { grid-column: span 2; grid-row: span 2; } .sp-gallery > a:nth-child(4) { grid-column: span 2; } }
.sp-album { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--sp-navy); text-decoration: none !important; isolation: isolate; }
@media (min-width: 900px) { .sp-album { aspect-ratio: auto; height: 100%; } }
.sp-album img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--sp-ease), filter .5s; }
.sp-album:hover img { transform: scale(1.08); filter: saturate(1.15); }
.sp-album::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11, 31, 77, .55)); z-index: 1; }
.sp-album__cap { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; color: #fff; padding: 10px 14px; border-radius: 14px; background: rgba(11, 31, 77, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .12); transform: translateY(0); transition: transform .45s var(--sp-ease), background .3s; }
.sp-album:hover .sp-album__cap { transform: translateY(-4px); background: rgba(11, 31, 77, .9); }
.sp-album__cap b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-album__cap b { display: block; font: 700 15px/1.3 var(--sp-display); }
.sp-album__cap small { color: var(--sp-gold); font-weight: 700; font-size: 12px; }
.sp-album__zoom { position: absolute; z-index: 2; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--sp-navy); display: flex; align-items: center; justify-content: center; transform: scale(0); transition: transform .4s var(--sp-ease); }
.sp-album:hover .sp-album__zoom { transform: scale(1); }

/* ---------- Recent activity cards ---------- */
.sp-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
@media (min-width: 640px) { .sp-rail { grid-auto-columns: 46%; } }
@media (min-width: 992px) { .sp-rail { grid-auto-columns: calc((100% - 54px) / 4); } }
.sp-rail > * { scroll-snap-align: start; }
.sp-post { display: flex; flex-direction: column; background: #fff; border-radius: var(--sp-radius); overflow: hidden; border: 1px solid var(--sp-line); text-decoration: none !important; color: var(--sp-text) !important; transition: transform .4s var(--sp-ease), box-shadow .4s; height: 100%; }
.sp-post:hover { transform: translateY(-6px); box-shadow: var(--sp-shadow); }
.sp-post__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sp-sky); }
.sp-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--sp-ease); }
.sp-post:hover .sp-post__img img { transform: scale(1.07); }
.sp-post__date { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--sp-navy); font-size: 12px; font-weight: 800; }
.sp-post__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sp-post__t { margin: 0; font: 700 16.5px/1.35 var(--sp-display); color: var(--sp-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sp-post__more { margin-top: auto; font-size: 13.5px; font-weight: 700; color: var(--sp-royal); }
.sp-rail-ctl { display: flex; gap: 10px; }
.sp-rail-ctl button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sp-line); background: #fff; color: var(--sp-navy); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.sp-rail-ctl button:hover { background: var(--sp-navy); color: #fff; border-color: var(--sp-navy); }

/* ---------- CTA band ---------- */
.sp-cta { position: relative; overflow: hidden; border-radius: 28px; padding: 36px 24px; color: #fff; background: linear-gradient(120deg, var(--sp-royal), var(--sp-navy)); box-shadow: var(--sp-shadow-lg); display: grid; gap: 20px; align-items: center; }
@media (min-width: 900px) { .sp-cta { grid-template-columns: 1fr auto; padding: 48px 56px; } }
.sp-cta::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 201, 30, .45), transparent 65%); animation: sp-pulse 6s ease-in-out infinite; }
@keyframes sp-pulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.15); opacity: 1; } }
.sp-cta > * { position: relative; }
.sp-cta h2 { margin: 6px 0 8px; color: #fff; font-size: clamp(24px, 3.6vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.sp-cta p { margin: 0; color: #d3dcff; }
.sp-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Footer ---------- */
.sp-footer { margin-top: 40px; background: var(--sp-navy); color: #b9c6ea; position: relative; }
.sp-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--sp-gold), var(--sp-gold-2) 40%, var(--sp-royal)); }
.sp-footer__grid { display: grid; gap: 34px; padding-top: 56px; padding-bottom: 40px; }
@media (min-width: 700px) { .sp-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sp-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } }
.sp-footer h4 { margin: 0 0 18px; color: #fff; font-size: 18px; font-weight: 700; position: relative; padding-bottom: 12px; }
.sp-footer h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 3px; background: var(--sp-gold); }
.sp-footer a { color: #dbe4ff !important; }
.sp-footer a:hover { color: var(--sp-gold) !important; }
.sp-footer__brand { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.sp-footer__brand img { width: 58px; height: 58px; border-radius: 50%; background: #fff; }
.sp-footer__brand b { display: block; color: #fff; font: 800 18px/1.2 var(--sp-display); }
.sp-footer__brand small { color: #9fb0dd; }
.sp-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sp-footer__list a { display: inline-flex; align-items: flex-start; gap: 9px; padding: 5px 0; font-size: 14.5px; transition: transform .25s var(--sp-ease), color .2s; }
.sp-footer__list a:hover { transform: translateX(4px); }
.sp-footer__list .fa { color: var(--sp-gold); font-size: 12px; margin-top: 5px; }
.sp-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14.5px; }
.sp-contact li { display: flex; gap: 12px; align-items: flex-start; }
.sp-contact .fa { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .07); color: var(--sp-gold); }
.sp-footer__bar { border-top: 1px solid rgba(255, 255, 255, .08); padding: 18px 0; font-size: 13.5px; }
.sp-footer__bar .sp-container { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.sp-findus { border-radius: 16px; padding: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.sp-findus p { margin: 0 0 14px; font-size: 14.5px; }

/* ---------- Floating bits ---------- */
.sp-totop { position: fixed; right: 16px; bottom: 16px; z-index: 900; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--sp-navy); color: #fff; font-size: 18px; box-shadow: var(--sp-shadow); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s, transform .3s var(--sp-ease), visibility .3s, background .2s; }
.sp-totop.is-show { opacity: 1; visibility: visible; transform: none; }
.sp-totop:hover { background: var(--sp-gold); color: var(--sp-navy); }
.sp-bday { position: fixed; left: 16px; bottom: 16px; z-index: 900; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: #fff; box-shadow: var(--sp-shadow-lg); text-decoration: none !important; color: var(--sp-navy) !important; font-weight: 800; font-size: 14px; animation: sp-bday-in .8s var(--sp-ease) 1.2s both; transition: transform .25s var(--sp-ease); }
.sp-bday:hover { transform: translateY(-3px) scale(1.03); }
.sp-bday__link { display: flex; align-items: center; gap: 10px; color: inherit !important; text-decoration: none !important; }
.sp-bday img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; animation: sp-wiggle 3s ease-in-out infinite; }
.sp-bday__x { margin-left: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--sp-bg); color: var(--sp-muted); font-size: 14px; line-height: 1; cursor: pointer; }
@keyframes sp-bday-in { from { opacity: 0; transform: translateY(40px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes sp-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-10deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
@media (max-width: 480px) { .sp-bday span { display: none; } .sp-bday { padding: 6px; } }

/* Popup notice */
.sp-modal { position: fixed; inset: 0; z-index: 1300; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(11, 31, 77, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sp-modal.is-open { display: flex; animation: sp-fade .3s ease; }
.sp-modal__box { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 20px; box-shadow: var(--sp-shadow-lg); animation: sp-pop .45s var(--sp-ease); }
.sp-modal__body { padding: 18px; font-size: 16px; color: var(--sp-ink); }
.sp-modal__body img { display: block; width: 100%; border-radius: 12px; }
.sp-modal__close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--sp-navy); color: #fff; font-size: 20px; cursor: pointer; z-index: 2; }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-pop { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- Inner page hero + layout ---------- */
.sp-pagehero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(900px 300px at 85% 0%, rgba(255, 201, 30, .28), transparent 60%), linear-gradient(120deg, var(--sp-navy) 0%, var(--sp-blue) 100%); }
.sp-pagehero__bg { position: absolute; inset: 0; background-size: cover; background-position: center 18%; transform-origin: center top; animation: sp-hero-zoom 18s ease-in-out infinite alternate; }
.sp-pagehero.has-img::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, rgba(11, 31, 77, .78) 0%, rgba(11, 31, 77, .5) 35%, rgba(18, 41, 106, .18) 65%, rgba(26, 58, 143, 0) 100%); }
/* Layers: photo (0) < navy overlay (1) < dot pattern (1) < text (2) */
.sp-pagehero.has-img .sp-pagehero__bg { z-index: 0; }
.sp-pagehero.has-img::before { z-index: 1; }
.sp-pagehero::after { z-index: 1; }
.sp-pagehero .sp-container { z-index: 2 !important; }
@keyframes sp-hero-zoom { from { transform: scale(1.02); } to { transform: scale(1.07) translateX(-1%); } }
.sp-pagehero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.sp-pagehero.has-img .sp-crumbs, .sp-pagehero.has-img .sp-crumbs a { text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.sp-pagehero.has-img::after { opacity: .06; }
.sp-pagehero::after { content: ""; position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
.sp-pagehero .sp-container { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 44px; }
@media (min-width: 768px) { .sp-pagehero .sp-container { padding-top: 60px; padding-bottom: 64px; } }
.sp-pagehero.has-img { display: flex; align-items: flex-end; min-height: 260px; }
.sp-pagehero.has-img .sp-container { width: 100%; }
@media (min-width: 768px) { .sp-pagehero.has-img { min-height: 380px; } }
@media (min-width: 1200px) { .sp-pagehero.has-img { min-height: 440px; } }
.sp-pagehero h1 { margin: 10px 0 0; color: #fff; font-size: clamp(28px, 5vw, 48px); font-weight: 800; letter-spacing: -.025em; animation: sp-rise .8s var(--sp-ease) both; }
.sp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: #c9d4f2; animation: sp-rise .8s var(--sp-ease) .1s both; }
.sp-crumbs a { color: #fff !important; font-weight: 600; }
.sp-crumbs li + li::before { content: "\203A"; margin-right: 8px; color: var(--sp-gold); }
@keyframes sp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.sp-page { padding: 34px 0 10px; }
@media (min-width: 768px) { .sp-page { padding-top: 54px; } }
.sp-layout { display: grid; gap: 26px; align-items: start; }
.sp-layout > *, .sp-grid > *, .sp-tri > *, .sp-welcome > *, .sp-video > * { min-width: 0; }
@media (min-width: 992px) { .sp-layout--side { grid-template-columns: 290px minmax(0, 1fr); gap: 36px; } }
.sp-side { background: #fff; border-radius: var(--sp-radius); border: 1px solid var(--sp-line); padding: 10px; box-shadow: var(--sp-shadow-sm); }
@media (min-width: 992px) { .sp-side { position: sticky; top: calc(var(--sp-header-h) + 18px); } }
.sp-side__title { padding: 10px 12px 8px; font: 800 13px/1 var(--sp-font); letter-spacing: .14em; text-transform: uppercase; color: var(--sp-gold-2); }
.sp-side ul { list-style: none; margin: 0; padding: 0; }
.sp-side a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border-radius: 10px; font-weight: 600; font-size: 14.5px; color: var(--sp-text) !important; transition: background .2s, color .2s, padding .2s; }
.sp-side a:hover { background: var(--sp-sky); color: var(--sp-blue) !important; padding-left: 16px; }
.sp-side a.is-current { background: var(--sp-navy); color: #fff !important; }
.sp-side a .fa { font-size: 12px; opacity: .6; }
/* Phones: the sibling list becomes a swipeable chip row */
@media (max-width: 991px) {
	.sp-side { padding: 6px; border-radius: 14px; }
	.sp-side__title { display: none; }
	.sp-side ul { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.sp-side ul::-webkit-scrollbar { display: none; }
	.sp-side li { flex: 0 0 auto; scroll-snap-align: start; }
	.sp-side a { white-space: nowrap; padding: 9px 14px; border-radius: 999px; background: var(--sp-bg); font-size: 14px; }
	.sp-side a .fa { display: none; }
}

/* Rich text coming from the CMS (old <font>/<table>/inline styles) */
.sp-prose { background: #fff; border-radius: var(--sp-radius); border: 1px solid var(--sp-line); box-shadow: var(--sp-shadow-sm); padding: 22px 18px; font-size: 16px; line-height: 1.75; color: var(--sp-text); overflow-wrap: anywhere; min-width: 0; }
@media (min-width: 768px) { .sp-prose { padding: 38px 42px; } }
.sp-prose h1, .sp-prose h2, .sp-prose h3, .sp-prose h4 { margin: 1.3em 0 .5em; color: var(--sp-ink); }
.sp-prose > :first-child { margin-top: 0; }
.sp-prose p { margin: 0 0 1em; }
.sp-prose img { border-radius: 12px; height: auto !important; max-width: 100% !important; }
.sp-prose ul, .sp-prose ol { padding-left: 1.3em; }
.sp-prose li { margin: .3em 0; }
.sp-prose a { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(36, 83, 199, .35); text-underline-offset: 3px; }
.sp-prose iframe { max-width: 100%; border-radius: 12px; }
.sp-prose font { font-family: inherit !important; }
/* CMS HTML often carries fixed pixel widths; never let it push past a phone screen (tables scroll instead). */
.sp-prose :where(div, p, span, img, iframe, video, figure, section, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, a, font, center) { max-width: 100% !important; box-sizing: border-box; }
.sp-prose :where(img, iframe, video) { height: auto; }
.sp-prose iframe { aspect-ratio: 16 / 9; height: auto !important; }
.sp-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.2em; border-radius: 12px; border: 1px solid var(--sp-line); }
.sp-prose table { width: 100% !important; border-collapse: collapse; font-size: 14.5px; margin: 0; background: #fff; }
.sp-prose td, .sp-prose th { padding: 10px 12px !important; border: 1px solid var(--sp-line) !important; vertical-align: top; }
.sp-prose tr:first-child td, .sp-prose th { background: var(--sp-sky); color: var(--sp-navy); font-weight: 700; }
.sp-prose tr:nth-child(even) td { background: #fafbff; }
.sp-prose blockquote { margin: 1.2em 0; padding: 14px 18px; border-left: 4px solid var(--sp-gold); background: var(--sp-gold-soft); border-radius: 0 12px 12px 0; }

.sp-empty { text-align: center; padding: 60px 20px; }
.sp-empty .fa { font-size: 48px; color: var(--sp-gold); }

/* Wrapper for old page fragments (blog, gallery, alumni, TC search...) */
.sp-legacy { background: #fff; border-radius: var(--sp-radius); border: 1px solid var(--sp-line); box-shadow: var(--sp-shadow-sm); padding: 18px 14px; min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 768px) { .sp-legacy { padding: 30px; } }
.sp-legacy .container { width: auto !important; max-width: 100%; padding-left: 0; padding-right: 0; }
.sp-legacy .row { margin-left: 0; margin-right: 0; }
.sp-legacy input[type=text], .sp-legacy input[type=email], .sp-legacy input[type=password], .sp-legacy input[type=date], .sp-legacy input[type=number], .sp-legacy input[type=tel], .sp-legacy select, .sp-legacy textarea {
	max-width: 100%; padding: 10px 12px !important; border: 1px solid #cfd8ea !important; border-radius: 10px !important; font: 15px var(--sp-font); background: #fff; transition: border-color .2s, box-shadow .2s; box-sizing: border-box;
}
.sp-legacy input:focus, .sp-legacy select:focus, .sp-legacy textarea:focus { outline: none; border-color: var(--sp-royal) !important; box-shadow: 0 0 0 4px rgba(36, 83, 199, .15); }
.sp-legacy input[type=submit], .sp-legacy input[type=button], .sp-legacy button:not(.sp-btn):not([class*="pswp"]) {
	padding: 10px 22px; border: 0; border-radius: 999px; background: var(--sp-royal); color: #fff; font: 700 15px var(--sp-font); cursor: pointer; transition: background .2s, transform .2s;
}
.sp-legacy input[type=submit]:hover, .sp-legacy input[type=button]:hover { background: var(--sp-blue); transform: translateY(-1px); }
.sp-legacy table { max-width: 100%; }

/* ---------- Listing toolbar (search) ---------- */
.sp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.sp-search { position: relative; flex: 1 1 320px; max-width: 520px; margin: 0; }
.sp-search .fa { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--sp-muted); }
.sp-search input { width: 100%; box-sizing: border-box; padding: 13px 16px 13px 44px; border-radius: 999px; border: 1px solid var(--sp-line); background: #fff; font: 15px var(--sp-font); color: var(--sp-ink); box-shadow: var(--sp-shadow-sm); transition: border-color .2s, box-shadow .2s; }
.sp-search input:focus { outline: none; border-color: var(--sp-royal); box-shadow: 0 0 0 4px rgba(36, 83, 199, .14); }
.sp-count { color: var(--sp-muted); font-size: 14px; }
.sp-count b { color: var(--sp-navy); }
.sp-post__ph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 42px; color: #b9c8ef; background: linear-gradient(135deg, var(--sp-sky), #fff); }
[data-sp-hide] { display: none !important; }

/* ---------- Article ---------- */
.sp-article__date { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--sp-sky); color: var(--sp-blue); font-size: 13px; font-weight: 700; }
.sp-article__title { margin: 14px 0 20px !important; font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.sp-article__cover { display: block; margin: 0 0 24px; border-radius: 16px; overflow: hidden; background: var(--sp-bg); text-decoration: none !important; }
.sp-article__cover img { display: block; width: 100%; max-height: 560px; object-fit: contain; border-radius: 0 !important; transition: transform .8s var(--sp-ease); }
.sp-article__cover:hover img { transform: scale(1.02); }
.sp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 22px; }
.sp-thumbs a { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--sp-bg); text-decoration: none !important; }
.sp-thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; transition: transform .6s var(--sp-ease); }
.sp-thumbs a:hover img { transform: scale(1.08); }

/* ---------- Photo grid (album view) ---------- */
.sp-photos { columns: 2 160px; column-gap: 12px; }
@media (min-width: 768px) { .sp-photos { columns: 3 220px; column-gap: 16px; } }
@media (min-width: 1100px) { .sp-photos { columns: 4 240px; } }
.sp-photos a { display: block; margin: 0 0 12px; break-inside: avoid; border-radius: 14px; overflow: hidden; position: relative; background: var(--sp-sky); text-decoration: none !important; }
@media (min-width: 768px) { .sp-photos a { margin-bottom: 16px; } }
.sp-photos img { display: block; width: 100%; height: auto; transition: transform .8s var(--sp-ease), filter .4s; }
.sp-photos a::after { content: "\f00e"; font-family: FontAwesome; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; background: rgba(11, 31, 77, .45); opacity: 0; transition: opacity .3s; }
.sp-photos a:hover::after { opacity: 1; }
.sp-photos a:hover img { transform: scale(1.06); }
.sp-albums { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.sp-albums .sp-album { aspect-ratio: 4 / 3; height: auto; }

/* ---------- Lightbox ---------- */
.sp-lb { position: fixed; inset: 0; z-index: 1400; display: none; flex-direction: column; background: rgba(6, 14, 38, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sp-lb.is-open { display: flex; animation: sp-fade .25s ease; }
.sp-lb__stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 12px 20px; min-height: 0; }
.sp-lb__img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); animation: sp-pop .35s var(--sp-ease); user-select: none; }
.sp-lb__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 18px; color: #c9d4f2; font-size: 14px; }
.sp-lb button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font-size: 20px; cursor: pointer; transition: background .2s, color .2s; }
.sp-lb button:hover { background: var(--sp-gold); color: var(--sp-navy); }
.sp-lb__close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.sp-lb__nav { display: flex; gap: 10px; }

/* ---------- Video page ---------- */
.sp-video { display: grid; gap: 24px; }
@media (min-width: 992px) { .sp-video { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.sp-video__player { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: var(--sp-shadow-lg); }
.sp-video__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-video__title { margin: 16px 0 0; font-size: 20px; font-weight: 800; }
.sp-vlist { display: grid; gap: 12px; }
@media (min-width: 992px) { .sp-vlist { max-height: 560px; overflow-y: auto; padding-right: 4px; } }
.sp-vitem { display: flex; gap: 12px; align-items: center; width: 100%; padding: 8px; border-radius: 14px; border: 1px solid var(--sp-line); background: #fff; text-align: left; cursor: pointer; font: inherit; transition: border-color .2s, box-shadow .2s, transform .25s var(--sp-ease); }
.sp-vitem:hover { transform: translateX(4px); box-shadow: var(--sp-shadow-sm); }
.sp-vitem.is-active { border-color: var(--sp-royal); box-shadow: 0 0 0 3px rgba(36, 83, 199, .15); }
.sp-vitem__thumb { position: relative; flex: 0 0 132px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.sp-vitem__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-vitem__thumb .fa { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 0, 0, .9); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; padding-left: 2px; }
.sp-vitem__t { font-weight: 700; color: var(--sp-ink); font-size: 14.5px; line-height: 1.35; }

/* ---------- Calendar ---------- */
.sp-cal { background: #fff; border-radius: var(--sp-radius); border: 1px solid var(--sp-line); box-shadow: var(--sp-shadow-sm); padding: 16px; }
@media (min-width: 768px) { .sp-cal { padding: 26px; } }
.sp-cal__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sp-cal__head h2 { margin: 0; font-size: clamp(20px, 3vw, 28px); font-weight: 800; flex: 0 1 auto; min-width: 150px; text-align: center; }
.sp-cal__nav { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--sp-line); display: inline-flex; align-items: center; justify-content: center; color: var(--sp-navy) !important; font-size: 18px; transition: background .2s, color .2s; }
.sp-cal__nav:hover { background: var(--sp-navy); color: #fff !important; }
.sp-cal__today { margin-left: auto; }
.sp-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.sp-cal__dow { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-muted); padding: 6px 0; }
.sp-cal__cell { min-height: 54px; border-radius: 12px; background: var(--sp-bg); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: background .2s, transform .25s var(--sp-ease); }
@media (min-width: 768px) { .sp-cal__cell { min-height: 96px; padding: 8px; } }
.sp-cal__cell.is-blank { background: transparent; }
.sp-cal__cell.has-ev { background: var(--sp-sky); }
.sp-cal__cell.has-ev:hover { transform: translateY(-2px); }
.sp-cal__cell.is-today { box-shadow: inset 0 0 0 2px var(--sp-gold-2); }
.sp-cal__num { font-weight: 800; font-size: 14px; color: var(--sp-ink); }
.sp-cal__ev { display: block; font-size: 11.5px; line-height: 1.3; font-weight: 700; color: #fff !important; background: var(--sp-royal); border-radius: 6px; padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) { .sp-cal__ev { font-size: 0; padding: 0; width: 8px; height: 8px; border-radius: 50%; } }
.sp-cal__none { margin: 14px 0 0; text-align: center; color: var(--sp-muted); }
.sp-evyears { display: grid; gap: 22px; }
@media (min-width: 900px) { .sp-evyears { grid-template-columns: repeat(2, 1fr); } }
.sp-evyear { background: #fff; border-radius: var(--sp-radius); border: 1px solid var(--sp-line); padding: 8px 14px 14px; box-shadow: var(--sp-shadow-sm); }
.sp-evyear h3 { margin: 12px 8px 6px; font-size: 22px; font-weight: 800; color: var(--sp-royal); }

/* ---------- Birthdays ---------- */
.sp-bdays { position: relative; overflow: hidden; }
.sp-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sp-confetti i { position: absolute; top: -20px; left: var(--x); width: 9px; height: 14px; border-radius: 2px; background: var(--c); opacity: .8; animation: sp-confetti 7s linear var(--d) infinite; }
@keyframes sp-confetti { to { transform: translateY(110vh) rotate(720deg); } }
.sp-bdays .sp-container { position: relative; z-index: 1; }
.sp-bday-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.sp-bday-card { background: #fff; border-radius: 22px; border: 1px solid var(--sp-line); box-shadow: var(--sp-shadow); padding: 22px 16px; text-align: center; position: relative; overflow: hidden; transition: transform .4s var(--sp-ease); }
.sp-bday-card:hover { transform: translateY(-6px) rotate(-1deg); }
.sp-bday-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 70px; background: linear-gradient(120deg, var(--sp-gold), #ff9f1c); }
.sp-bday-card__pic { position: relative; width: 110px; height: 110px; margin: 10px auto 12px; border-radius: 50%; overflow: hidden; border: 5px solid #fff; box-shadow: var(--sp-shadow); background: var(--sp-sky); display: flex; align-items: center; justify-content: center; }
.sp-bday-card__pic img { width: 100%; height: 100%; object-fit: cover; }
.sp-bday-card__pic span { font: 800 42px var(--sp-display); color: var(--sp-royal); }
.sp-bday-card__kind { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--sp-sky); color: var(--sp-blue); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sp-bday-card h3 { margin: 10px 0 4px; font-size: 18px; font-weight: 800; }
.sp-bday-card p { margin: 0; color: var(--sp-muted); font-size: 14px; }

/* ---------- TC search ---------- */
.sp-tc { max-width: 640px; margin: 0 auto; text-align: center; background: #fff; border-radius: 26px; border: 1px solid var(--sp-line); box-shadow: var(--sp-shadow-lg); padding: 30px 20px; position: relative; overflow: hidden; }
@media (min-width: 768px) { .sp-tc { padding: 44px 48px; } }
.sp-tc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--sp-gold), var(--sp-royal)); }
.sp-tc__icon { width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 22px; background: var(--sp-sky); color: var(--sp-royal); display: flex; align-items: center; justify-content: center; font-size: 32px; animation: sp-float 5s ease-in-out infinite; }
.sp-tc h2 { margin: 0 0 6px; font-size: 26px; font-weight: 800; }
.sp-tc p { margin: 0 0 22px; color: var(--sp-muted); }
.sp-tc__form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sp-tc__form input { flex: 1 1 220px; min-width: 0; padding: 14px 18px; border-radius: 999px; border: 1px solid #cfd8ea; font: 600 16px var(--sp-font); text-align: center; letter-spacing: .04em; transition: border-color .2s, box-shadow .2s; }
.sp-tc__form input:focus { outline: none; border-color: var(--sp-royal); box-shadow: 0 0 0 4px rgba(36, 83, 199, .15); }
.sp-tc__results { margin-top: 30px; display: grid; gap: 20px; }
.sp-tc__result { background: #fff; border-radius: var(--sp-radius); border: 1px solid var(--sp-line); box-shadow: var(--sp-shadow); overflow: hidden; }
.sp-tc__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--sp-line); }
.sp-tc__bar b { display: block; font: 800 18px var(--sp-display); color: var(--sp-navy); }
.sp-tc__bar small { color: var(--sp-muted); }
.sp-tc__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-tc__result iframe { display: block; width: 100%; height: min(75vh, 900px); border: 0; background: var(--sp-bg); }

/* ---------- Tabs (alumni) ---------- */
.sp-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 6px; margin: 0 auto 22px; width: max-content; max-width: 100%; border-radius: 999px; background: #fff; border: 1px solid var(--sp-line); box-shadow: var(--sp-shadow-sm); scrollbar-width: none; }
.sp-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: var(--sp-text) !important; transition: background .25s, color .25s; }
.sp-tabs a:hover { background: var(--sp-sky); }
.sp-tabs a.is-current { background: var(--sp-navy); color: #fff !important; }
.sp-alumni table { width: 100%; }
.sp-alumni th { font: 800 18px var(--sp-display); color: var(--sp-navy); padding: 6px 0 12px !important; border: 0 !important; }
.sp-alumni td { padding: 6px !important; border: 0 !important; vertical-align: middle; }
.sp-alumni .table > tbody > tr > td { border-top: 0; }
.sp-alumni .form-control { height: auto; box-shadow: none; }
.sp-alumni .mytable { width: 100%; max-width: 520px !important; margin: 0 auto 16px; border-radius: 16px; overflow: hidden; border: 1px solid var(--sp-line) !important; }
.sp-alumni .mytable td { padding: 10px 14px !important; border-bottom: 1px solid var(--sp-line) !important; }

/* ---------- Scroll reveal ---------- */
.sp-js [data-sp-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--sp-ease), transform .9s var(--sp-ease); transition-delay: var(--sp-delay, 0s); }
.sp-js [data-sp-reveal="left"] { transform: translateX(-36px); }
.sp-js [data-sp-reveal="right"] { transform: translateX(36px); }
.sp-js [data-sp-reveal="zoom"] { transform: scale(.92); }
.sp-js [data-sp-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.sp-js [data-sp-reveal] { opacity: 1; transform: none; }
	.sp-ticker__move, .sp-vscroll__move { animation: none !important; }
	.sp-vscroll { height: auto; max-height: 420px; overflow-y: auto; }
}

/* Print: drop the chrome */
@media print {
	.sp-topbar, .sp-header, .sp-drawer, .sp-drawer-scrim, .sp-footer, .sp-totop, .sp-bday, .sp-progress, .sp-side { display: none !important; }
	.sp-prose, .sp-legacy { box-shadow: none; border: 0; padding: 0; }
}

/* ---------- CMS content buttons (old Bootstrap "btn" links, e.g. CBSE disclosure Download) ---------- */
.sp-prose a.btn, .sp-prose .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 18px; border-radius: 999px; border: 0; background: var(--sp-navy); color: #fff !important; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none !important; white-space: nowrap; box-shadow: 0 6px 16px rgba(11, 31, 77, .18); transition: background .2s, color .2s, transform .2s var(--sp-ease), box-shadow .2s; }
.sp-prose a.btn::before { content: "\f019"; font-family: FontAwesome; font-weight: normal; font-size: 13px; color: var(--sp-gold); transition: color .2s; }
.sp-prose a.btn:hover, .sp-prose a.btn:focus-visible { background: var(--sp-gold); color: var(--sp-navy) !important; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255, 201, 30, .35); }
.sp-prose a.btn:hover::before, .sp-prose a.btn:focus-visible::before { color: var(--sp-navy); }

/* Cursor sparkles canvas (desktop only, added by sp.js) */
.sp-sparkle { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2147483000; }

/* Old wever.css turns ".tab" tables into stacked blocks under 600px (no labels, hard to read).
   Keep them real tables; .sp-table-wrap lets them scroll sideways on phones instead. */
@media screen and (max-width: 600px) {
	.sp-prose table.tab { display: table; min-width: 560px; }
	.sp-prose .tab thead { display: table-header-group; }
	.sp-prose .tab tr { display: table-row; }
	.sp-prose .tab td, .sp-prose .tab th { display: table-cell; text-align: left; }
	.sp-prose .tab td::before { content: none; display: none; }
}

/* ---------- Mobile fixes (Oct 2026) ---------- */
/* The closed drawer used to sit off-screen (translateX(105%)). Phones count that
   fixed box as page width, so the whole page could slide sideways (worst when the
   popup opened). Keep it inside the screen and wipe it in with clip-path instead. */
.sp-drawer { transform: none; clip-path: inset(0 0 0 100%); visibility: hidden; transition: clip-path .45s var(--sp-ease), visibility 0s linear .45s; }
.sp-drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .45s var(--sp-ease), visibility 0s; }

/* Popup notice: long links / headings must wrap inside the box on phones. */
.sp-modal__box { box-sizing: border-box; overflow-x: hidden; }
.sp-modal__body { overflow-wrap: anywhere; word-break: break-word; }
.sp-modal__body > :first-child { padding-right: 44px; }
.sp-modal__body * { max-width: 100% !important; box-sizing: border-box; }
.sp-modal__body a { word-break: break-all; }
.sp-modal__body table { width: 100% !important; table-layout: fixed; }
.sp-modal__body ul, .sp-modal__body ol { padding-left: 1.2em; }

/* Hero slider on phones: the slides are very wide (2.5-3.5:1), which left only a
   ~120px strip. Make the slider taller, fill it, and slowly pan across the slide
   during its 6 seconds so the whole picture is still seen. */
@media (max-width: 767px) {
	.sp-hero__track { height: 58vw; min-height: 210px; }
	.sp-hero .sp-slide__img { height: 100%; object-fit: cover; object-position: 0% 50%; transform: none; } /* beats .sp-body img { height: auto } */
	.sp-slide.is-active .sp-slide__img { animation: sp-pan 6s ease-in-out forwards; }
}
@keyframes sp-pan { from { object-position: 0% 50%; } to { object-position: 100% 50%; } }