/*!
 * SJPU College Homepage – widget styles
 * All selectors are prefixed with .sjpu- to avoid theme conflicts.
 * Version 1.0.0
 */

/* ==========================================================================
   1. Tokens & reset
   ========================================================================== */
.sjpu-home {
	--sjpu-navy: #0A1A3F;
	--sjpu-royal: #1D4ED8;
	--sjpu-gold: #F2B827;
	--sjpu-gold-deep: #C8921A;
	--sjpu-white: #FFFFFF;
	--sjpu-sky: #EAF2FF;
	--sjpu-text: #42506B;
	--sjpu-max: 1200px;
	--sjpu-space: 96px;
	--sjpu-panel-h: 400px;
	--sjpu-tilt: 18deg;
	--sjpu-radius: 18px;
	/* Theme (Elementor Global) fonts first, bundled fonts as fallback */
	--sjpu-font: var(--e-global-typography-text-font-family, "Poppins"), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sjpu-font-head: var(--e-global-typography-primary-font-family, "Merriweather"), Georgia, "Times New Roman", serif;
	--sjpu-font-ui: var(--e-global-typography-secondary-font-family, var(--e-global-typography-text-font-family, "Poppins")), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sjpu-shadow: 0 18px 40px -18px rgba(11, 31, 77, .35);
	--sjpu-shadow-sm: 0 8px 22px -12px rgba(11, 31, 77, .35);

	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	overflow-x: clip;
	overflow-y: visible;
	font-family: var(--sjpu-font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--sjpu-text);
	background: transparent;
	-webkit-font-smoothing: antialiased;
}

.sjpu-home *,
.sjpu-home *::before,
.sjpu-home *::after {
	box-sizing: border-box;
}

.sjpu-home img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.sjpu-home a {
	text-decoration: none;
	transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .3s ease, box-shadow .3s ease;
}

.sjpu-home :where(h1, h2, h3, p, ul, figure, blockquote) {
	margin: 0;
	padding: 0;
}

.sjpu-home :where(ul) {
	list-style: none;
}

.sjpu-home button {
	font-family: inherit;
}

.sjpu-home .sjpu-svg-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	vertical-align: middle;
}

.sjpu-home .sjpu-wrap {
	position: relative;
	width: 100%;
	max-width: var(--sjpu-max);
	margin: 0 auto;
	padding: 0 24px;
}

.sjpu-home .sjpu-section {
	position: relative;
	padding: var(--sjpu-space) 0;
}

/* Shared headings ---------------------------------------------------------- */
.sjpu-home .sjpu-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sjpu-royal);
}

.sjpu-home .sjpu-label::before {
	content: "";
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--sjpu-gold);
}

.sjpu-home .sjpu-label--light {
	color: #FFFFFF;
	opacity: .9;
}

.sjpu-home .sjpu-title {
	margin: 10px 0 16px;
	font-family: var(--sjpu-font-head);
	font-size: clamp(25px, 2.9vw, 40px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--sjpu-navy);
	overflow-wrap: anywhere;
}

.sjpu-home .sjpu-title--light {
	color: #FFFFFF;
}

.sjpu-home .sjpu-lead {
	font-size: 16.5px;
	color: var(--sjpu-text);
}

.sjpu-home .sjpu-section-head {
	max-width: 720px;
	margin: 0 auto 44px;
	text-align: center;
}

/* Buttons ----------------------------------------------------------------- */
.sjpu-home .sjpu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.sjpu-home .sjpu-btn .sjpu-svg-icon {
	font-size: 18px;
	transition: transform .3s ease;
}

.sjpu-home .sjpu-btn:hover .sjpu-svg-icon {
	transform: translateX(4px);
}

.sjpu-home .sjpu-btn--navy {
	background: var(--sjpu-navy);
	color: #FFFFFF;
	box-shadow: var(--sjpu-shadow-sm);
}

.sjpu-home .sjpu-btn--navy:hover,
.sjpu-home .sjpu-btn--navy:focus-visible {
	background: var(--sjpu-royal);
	color: #FFFFFF;
}

.sjpu-home .sjpu-btn--gold {
	background: var(--sjpu-gold);
	color: var(--sjpu-navy);
}

.sjpu-home .sjpu-btn--gold:hover,
.sjpu-home .sjpu-btn--gold:focus-visible {
	background: #FFFFFF;
	color: var(--sjpu-navy);
}

.sjpu-home .sjpu-btn--ghost {
	border-color: rgba(255, 255, 255, .7);
	color: #FFFFFF;
	background: transparent;
}

.sjpu-home .sjpu-btn--ghost:hover,
.sjpu-home .sjpu-btn--ghost:focus-visible {
	background: #FFFFFF;
	color: var(--sjpu-navy);
}

.sjpu-home .sjpu-btn--block {
	display: flex;
	width: 100%;
}

.sjpu-home a:focus-visible,
.sjpu-home button:focus-visible {
	outline: 3px solid var(--sjpu-gold);
	outline-offset: 3px;
}

/* ==========================================================================
   2. Hero
   ========================================================================== */
.sjpu-home .sjpu-hero {
	position: relative;
	isolation: isolate;
	padding: 28px 0 56px;
	background: transparent;
}

.sjpu-home.sjpu-tint .sjpu-hero {
	background: linear-gradient(180deg, #F7FAFF 0%, var(--sjpu-sky) 42%, #DCE8FF 100%);
}

.sjpu-home .sjpu-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.sjpu-home .sjpu-hero__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(10px);
}

.sjpu-home .sjpu-hero__glow--a {
	top: -180px;
	left: -160px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(29, 78, 216, .14), rgba(29, 78, 216, 0) 70%);
}

.sjpu-home .sjpu-hero__glow--b {
	top: 80px;
	right: -200px;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, rgba(242, 184, 39, .14), rgba(242, 184, 39, 0) 70%);
}

.sjpu-home .sjpu-hero__rays {
	position: absolute;
	left: 50%;
	top: 40%;
	width: 1400px;
	height: 1400px;
	transform: translate(-50%, -50%);
	background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .35) 0deg 4deg, rgba(255, 255, 255, 0) 4deg 14deg);
	-webkit-mask-image: radial-gradient(circle, #000 0%, transparent 60%);
	mask-image: radial-gradient(circle, #000 0%, transparent 60%);
	opacity: .55;
}

/* Brand strip */
.sjpu-home .sjpu-brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
}

.sjpu-home .sjpu-brand__id {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.sjpu-home .sjpu-brand__logo {
	width: auto;
	max-width: 220px;
	max-height: 64px;
	object-fit: contain;
}

.sjpu-home .sjpu-brand__emblem {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	border-radius: 50%;
	font-size: 26px;
	color: var(--sjpu-gold);
	background: var(--sjpu-navy);
	box-shadow: 0 0 0 4px rgba(242, 184, 39, .25);
}

.sjpu-home .sjpu-brand__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.2;
}

.sjpu-home .sjpu-brand__name {
	font-family: var(--sjpu-font-head);
	font-size: 19px;
	font-weight: 700;
	color: var(--sjpu-navy);
}

.sjpu-home .sjpu-brand__tag {
	margin-top: 3px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sjpu-gold-deep);
}

.sjpu-home .sjpu-brand__site {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 500;
	color: var(--sjpu-navy);
}

.sjpu-home .sjpu-brand__site .sjpu-svg-icon {
	font-size: 18px;
	color: var(--sjpu-royal);
}

.sjpu-home .sjpu-brand__site:hover {
	color: var(--sjpu-royal);
}

/* Heading block */
.sjpu-home .sjpu-hero__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 860px;
	margin: 34px auto 0;
	text-align: center;
}

.sjpu-home .sjpu-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding: 7px 16px;
	border: 1px solid rgba(29, 78, 216, .15);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sjpu-royal);
	background: rgba(255, 255, 255, .85);
}

.sjpu-home .sjpu-eyebrow .sjpu-svg-icon {
	font-size: 16px;
	color: var(--sjpu-gold);
}

.sjpu-home .sjpu-hero__title {
	font-family: var(--sjpu-font-head);
	font-size: clamp(28px, 4vw, 52px);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -.005em;
	color: var(--sjpu-navy);
	overflow-wrap: anywhere;
}

.sjpu-home .sjpu-hero__accent {
	font-weight: 900;
	color: var(--sjpu-gold-deep);
}

.sjpu-home .sjpu-word {
	display: inline-block;
}

.sjpu-home .sjpu-hero__accent .sjpu-word__in {
	display: inline-block;
	background: linear-gradient(100deg, var(--sjpu-gold-deep) 0%, var(--sjpu-gold) 30%, #FFE08A 45%, var(--sjpu-gold) 60%, var(--sjpu-gold-deep) 100%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: sjpu-shimmer 6s ease-in-out infinite;
}

@keyframes sjpu-shimmer {
	0%, 100% { background-position: 100% 0; }
	50%      { background-position: 0% 0; }
}

.sjpu-home .sjpu-hero__sub {
	max-width: 640px;
	margin-top: 14px;
	font-size: 17px;
	color: var(--sjpu-text);
}

.sjpu-home .sjpu-pill-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	max-width: 100%;
	margin-top: 24px;
	padding: 6px 22px 6px 6px;
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: var(--sjpu-shadow);
	color: var(--sjpu-navy);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
}

.sjpu-home .sjpu-pill-btn__icon {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 9px;
	background: var(--sjpu-navy);
	color: #FFFFFF;
	font-size: 20px;
	transition: background-color .25s ease;
}

.sjpu-home .sjpu-pill-btn:hover {
	transform: translateY(-2px);
	color: var(--sjpu-royal);
}

.sjpu-home .sjpu-pill-btn:hover .sjpu-pill-btn__icon {
	background: var(--sjpu-gold);
	color: var(--sjpu-navy);
}

/* ==========================================================================
   3. Angled academic panels
   ========================================================================== */
.sjpu-home .sjpu-stage {
	position: relative;
	width: 100%;
	max-width: calc(var(--sjpu-max) + 60px);
	margin: 40px auto 0;
	padding: 0 24px;
}

.sjpu-home .sjpu-panels {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	perspective: 1700px;
	perspective-origin: 50% 35%;
}

.sjpu-home .sjpu-panel {
	position: relative;
	display: block;
	flex: 1 1 0;
	min-width: 0;
	height: calc(var(--sjpu-panel-h) + var(--sjpu-abs, 0) * 46px);
	margin-top: calc((1 - var(--sjpu-abs, 0)) * 38px);
	color: #FFFFFF;
	transform: rotateY(calc(var(--sjpu-off, 0) * var(--sjpu-tilt) * -1));
	transform-style: preserve-3d;
	will-change: transform;
}

.sjpu-home .sjpu-panel__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 14px;
	background: var(--sjpu-pc, var(--sjpu-royal));
	box-shadow: 0 30px 50px -28px rgba(11, 31, 77, .6);
	transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
}

.sjpu-home .sjpu-panel:hover .sjpu-panel__inner,
.sjpu-home .sjpu-panel:focus-visible .sjpu-panel__inner {
	transform: translateY(-10px);
	box-shadow: 0 40px 60px -26px rgba(11, 31, 77, .7);
}

.sjpu-home .sjpu-panel__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: center bottom;
	transition: transform .8s ease;
}

.sjpu-home .sjpu-panel:hover .sjpu-panel__img {
	transform: scale(1.05);
}

.sjpu-home .sjpu-panel__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		var(--sjpu-pc) 0%,
		var(--sjpu-pc) 30%,
		var(--sjpu-pc-a, rgba(29, 78, 216, .55)) 52%,
		rgba(255, 255, 255, 0) 80%);
}

.sjpu-home .sjpu-panel__head {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 30px 14px 0;
	text-align: center;
}

.sjpu-home .sjpu-panel__icon {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 4px;
	border: 1.5px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	font-size: 26px;
	color: #FFFFFF;
	background: rgba(255, 255, 255, .12);
}

.sjpu-home .sjpu-panel__icon svg,
.sjpu-home .sjpu-panel__icon i {
	width: 26px;
	height: 26px;
	font-size: 24px;
	fill: currentColor;
}

.sjpu-home .sjpu-panel__icon .sjpu-svg-icon {
	fill: none;
}

.sjpu-home .sjpu-panel__title {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: #FFFFFF;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	overflow-wrap: anywhere;
}

.sjpu-home .sjpu-panel__text {
	display: -webkit-box;
	max-width: 220px;
	overflow: hidden;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .92);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.sjpu-home .sjpu-panel__more {
	display: none;
}

/* Colour schemes */
.sjpu-home .sjpu-panel--royal {
	--sjpu-pc: var(--sjpu-royal);
	--sjpu-pc-a: rgba(29, 78, 216, .55);
	--sjpu-pc-a: color-mix(in srgb, var(--sjpu-royal) 55%, transparent);
}

.sjpu-home .sjpu-panel--gold {
	--sjpu-pc: var(--sjpu-gold-deep);
	--sjpu-pc-a: rgba(200, 146, 26, .55);
	--sjpu-pc-a: color-mix(in srgb, var(--sjpu-gold-deep) 55%, transparent);
}

.sjpu-home .sjpu-panel--navy {
	--sjpu-pc: var(--sjpu-navy);
	--sjpu-pc-a: rgba(11, 31, 77, .55);
	--sjpu-pc-a: color-mix(in srgb, var(--sjpu-navy) 55%, transparent);
}

.sjpu-home .sjpu-panel--sky {
	--sjpu-pc: #3B7BEA;
	--sjpu-pc: color-mix(in srgb, var(--sjpu-royal) 75%, #FFFFFF);
	--sjpu-pc-a: rgba(59, 123, 234, .55);
	--sjpu-pc-a: color-mix(in srgb, var(--sjpu-royal) 45%, transparent);
}

.sjpu-home .sjpu-panel--indigo {
	--sjpu-pc: #1A2F72;
	--sjpu-pc: color-mix(in srgb, var(--sjpu-navy) 80%, var(--sjpu-royal));
	--sjpu-pc-a: rgba(26, 47, 114, .55);
	--sjpu-pc-a: color-mix(in srgb, var(--sjpu-navy) 55%, transparent);
}

.sjpu-home .sjpu-panel--indigo .sjpu-panel__icon,
.sjpu-home .sjpu-panel--navy .sjpu-panel__icon {
	border-color: var(--sjpu-gold);
	color: var(--sjpu-gold);
}

.sjpu-home .sjpu-panel--gold .sjpu-panel__icon {
	background: rgba(11, 31, 77, .18);
}

/* Landmark image overlapping panel bottoms */
.sjpu-home .sjpu-landmark {
	position: relative;
	z-index: 3;
	max-width: 1180px;
	margin: calc(var(--sjpu-panel-h) * -0.4) auto 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
}

.sjpu-home .sjpu-landmark img {
	width: 100%;
	height: auto;
}

/* Contact pill bar */
.sjpu-home .sjpu-contact {
	position: relative;
	z-index: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: -26px;
	padding: 12px 30px;
	border-radius: 999px;
	background: var(--sjpu-navy);
	box-shadow: var(--sjpu-shadow);
}

.sjpu-home .sjpu-contact__item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 500;
}

.sjpu-home .sjpu-contact__item:hover {
	color: var(--sjpu-gold);
}

.sjpu-home .sjpu-contact__icon {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--sjpu-navy);
	font-size: 18px;
}

.sjpu-home .sjpu-contact__text {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ==========================================================================
   4. About
   ========================================================================== */
.sjpu-home .sjpu-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: 64px;
}

.sjpu-home .sjpu-about__media {
	position: relative;
	padding: 0 0 24px 24px;
}

.sjpu-home .sjpu-about__dots {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 160px;
	height: 160px;
	background-image: radial-gradient(var(--sjpu-gold) 2px, transparent 2.5px);
	background-size: 16px 16px;
	opacity: .55;
}

.sjpu-home .sjpu-about__img {
	position: relative;
	overflow: hidden;
	border-radius: var(--sjpu-radius);
	box-shadow: var(--sjpu-shadow);
}

.sjpu-home .sjpu-about__img img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.sjpu-home .sjpu-about__img--1 {
	width: 80%;
	aspect-ratio: 4 / 3;
}

.sjpu-home .sjpu-about__img--2 {
	width: 62%;
	aspect-ratio: 4 / 3;
	margin: -22% 0 0 auto;
	border: 8px solid #FFFFFF;
}

.sjpu-home .sjpu-about__badge {
	position: absolute;
	top: -18px;
	right: 14%;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border: 6px solid #FFFFFF;
	border-radius: 50%;
	background: var(--sjpu-gold);
	color: var(--sjpu-navy);
	font-size: 32px;
	box-shadow: var(--sjpu-shadow-sm);
}

.sjpu-home .sjpu-about__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 20px;
	margin: 26px 0 30px;
}

.sjpu-home .sjpu-checklist {
	display: grid;
	gap: 12px;
}

.sjpu-home .sjpu-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	font-weight: 500;
	color: var(--sjpu-navy);
	line-height: 1.45;
}

.sjpu-home .sjpu-checklist .sjpu-svg-icon {
	margin-top: 1px;
	font-size: 20px;
	color: var(--sjpu-royal);
}

.sjpu-home .sjpu-award {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--sjpu-navy), var(--sjpu-royal));
	color: #FFFFFF;
	box-shadow: var(--sjpu-shadow);
}

.sjpu-home .sjpu-award__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	border-radius: 14px;
	background: var(--sjpu-gold);
	color: var(--sjpu-navy);
	font-size: 26px;
}

.sjpu-home .sjpu-award__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .85);
}

.sjpu-home .sjpu-award__body strong {
	font-size: 18px;
	color: #FFFFFF;
}

/* ==========================================================================
   5. Stats
   ========================================================================== */
.sjpu-home .sjpu-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	overflow: hidden;
	border-radius: 22px;
	background: linear-gradient(120deg, var(--sjpu-navy) 0%, var(--sjpu-navy) 45%, var(--sjpu-royal) 100%);
	box-shadow: var(--sjpu-shadow);
}

.sjpu-home .sjpu-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 32px 16px;
	text-align: center;
}

.sjpu-home .sjpu-stat + .sjpu-stat {
	border-left: 1px solid rgba(255, 255, 255, .12);
}

.sjpu-home .sjpu-stat__num {
	font-family: var(--sjpu-font-head);
	font-size: clamp(32px, 3.4vw, 46px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--sjpu-gold);
}

.sjpu-home .sjpu-stat__label {
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, .85);
}

/* ==========================================================================
   6. Campus life + notice board
   ========================================================================== */
.sjpu-home .sjpu-campus__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 52px;
	border-radius: 28px;
	background: var(--sjpu-navy);
}

.sjpu-home .sjpu-campus__deco {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(600px 400px at 100% 0%, rgba(29, 78, 216, .55), transparent 70%),
		radial-gradient(380px 300px at 0% 100%, rgba(242, 184, 39, .22), transparent 70%);
	pointer-events: none;
}

.sjpu-home .sjpu-campus__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px 28px;
}

.sjpu-home .sjpu-campus__head .sjpu-title {
	margin-bottom: 0;
	max-width: 560px;
}

.sjpu-home .sjpu-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sjpu-home .sjpu-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.sjpu-home .sjpu-tab .sjpu-svg-icon {
	font-size: 17px;
	color: var(--sjpu-gold);
}

.sjpu-home .sjpu-tab:hover {
	border-color: var(--sjpu-gold);
}

.sjpu-home .sjpu-tab.is-active {
	border-color: var(--sjpu-gold);
	background: var(--sjpu-gold);
	color: var(--sjpu-navy);
}

.sjpu-home .sjpu-tab.is-active .sjpu-svg-icon {
	color: var(--sjpu-navy);
}

.sjpu-home .sjpu-campus__grid {
	display: grid;
	grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
	gap: 24px;
	margin-top: 34px;
}

.sjpu-home .sjpu-notice {
	display: flex;
	flex-direction: column;
	padding: 26px;
	border-radius: 20px;
	background: #FFFFFF;
}

.sjpu-home .sjpu-notice__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	font-family: var(--sjpu-font-head);
	font-size: 22px;
	font-weight: 700;
	color: var(--sjpu-navy);
}

.sjpu-home .sjpu-notice__title .sjpu-svg-icon {
	color: var(--sjpu-gold);
	font-size: 22px;
}

.sjpu-home .sjpu-notice__list {
	flex: 1 1 auto;
	margin-bottom: 20px;
}

.sjpu-home .sjpu-notice__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px dashed rgba(11, 31, 77, .15);
	color: var(--sjpu-navy);
}

.sjpu-home .sjpu-notice__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sjpu-home .sjpu-notice__text strong {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.sjpu-home .sjpu-notice__date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: #6B7690;
}

.sjpu-home .sjpu-notice__date .sjpu-svg-icon {
	color: var(--sjpu-gold);
}

.sjpu-home .sjpu-notice__file {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border-radius: 10px;
	background: var(--sjpu-sky);
	color: var(--sjpu-royal);
	font-size: 18px;
}

.sjpu-home .sjpu-notice__item:hover {
	color: var(--sjpu-royal);
}

.sjpu-home .sjpu-notice__item:hover .sjpu-notice__file {
	background: var(--sjpu-royal);
	color: #FFFFFF;
}

.sjpu-home .sjpu-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: minmax(220px, 1fr);
	gap: 18px;
	align-content: stretch;
}

.sjpu-home .sjpu-card {
	position: relative;
	overflow: hidden;
	min-height: 220px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .08);
	animation: sjpu-fade .5s ease both;
}

.sjpu-home .sjpu-card.is-hidden {
	display: none;
}

.sjpu-home .sjpu-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform .8s ease;
}

.sjpu-home .sjpu-card:hover img {
	transform: scale(1.06);
}

.sjpu-home .sjpu-card figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 40px 20px 18px;
	background: linear-gradient(180deg, transparent, rgba(11, 31, 77, .92));
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.sjpu-home .sjpu-card figcaption::before {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	margin-bottom: 8px;
	border-radius: 3px;
	background: var(--sjpu-gold);
}

@keyframes sjpu-fade {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   7. Name band (marquee) – two rows, scroll-reactive (see JS)
   ========================================================================== */
.sjpu-home .sjpu-marquee {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 26px 0;
	background-color: transparent;
}

.sjpu-home.sjpu-tint .sjpu-marquee {
	background-color: #F5F4EF;
}

.sjpu-home .sjpu-marquee__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	opacity: .35;
	pointer-events: none;
}

.sjpu-home .sjpu-marquee__row {
	overflow: hidden;
}

.sjpu-home .sjpu-marquee__row + .sjpu-marquee__row {
	margin-top: 4px;
}

.sjpu-home .sjpu-marquee__track {
	display: flex;
	width: max-content;
	animation: sjpu-marquee var(--sjpu-mq-dur, 45s) linear infinite;
	will-change: transform;
}

.sjpu-home .sjpu-marquee__row--outline .sjpu-marquee__track {
	animation-direction: reverse;
}

.sjpu-home .sjpu-marquee.is-js .sjpu-marquee__track {
	animation: none;
}

.sjpu-home .sjpu-marquee__group {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: clamp(22px, 3vw, 44px);
	padding-right: clamp(22px, 3vw, 44px);
}

.sjpu-home .sjpu-marquee__a,
.sjpu-home .sjpu-marquee__b {
	font-family: var(--sjpu-font-head);
	font-size: clamp(30px, 4.4vw, 68px);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-transform: uppercase;
	transition: color .35s ease;
}

.sjpu-home .sjpu-marquee__a {
	color: var(--sjpu-gold);
}

.sjpu-home .sjpu-marquee__b {
	color: var(--sjpu-navy);
}

.sjpu-home .sjpu-marquee__row--outline .sjpu-marquee__a,
.sjpu-home .sjpu-marquee__row--outline .sjpu-marquee__b {
	font-size: clamp(22px, 2.8vw, 42px);
	color: transparent;
	-webkit-text-stroke: 1.2px rgba(10, 26, 63, .4);
}

.sjpu-home .sjpu-marquee__row--outline .sjpu-marquee__a {
	-webkit-text-stroke-color: var(--sjpu-gold-deep);
}

.sjpu-home .sjpu-marquee__row--outline:hover .sjpu-marquee__b {
	color: var(--sjpu-navy);
}

.sjpu-home .sjpu-marquee__row--outline:hover .sjpu-marquee__a {
	color: var(--sjpu-gold);
}

.sjpu-home .sjpu-marquee__sep {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: clamp(48px, 5vw, 78px);
	height: clamp(48px, 5vw, 78px);
	color: var(--sjpu-royal);
	font-size: clamp(28px, 3vw, 44px);
	transition: transform .6s cubic-bezier(.3, 1.6, .5, 1);
}

.sjpu-home .sjpu-marquee__row--outline .sjpu-marquee__sep {
	width: clamp(30px, 3vw, 44px);
	height: clamp(30px, 3vw, 44px);
	font-size: clamp(20px, 2vw, 28px);
	opacity: .55;
}

.sjpu-home .sjpu-marquee__sep img {
	width: 100%;
	height: 100% !important;
	object-fit: contain;
}

.sjpu-home .sjpu-marquee__row:hover .sjpu-marquee__sep {
	transform: rotate(-12deg) scale(1.12);
}

@keyframes sjpu-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
   8. Events
   ========================================================================== */
.sjpu-home .sjpu-events {
	background: transparent;
}

.sjpu-home.sjpu-tint .sjpu-events {
	background: linear-gradient(180deg, #FFFFFF 0%, var(--sjpu-sky) 100%);
}

.sjpu-home .sjpu-events__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.sjpu-home .sjpu-event {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 20px;
	background: #FFFFFF;
	box-shadow: 0 14px 34px -20px rgba(11, 31, 77, .35);
	transition: transform .35s ease, box-shadow .35s ease;
}

.sjpu-home .sjpu-event:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 44px -22px rgba(11, 31, 77, .45);
}

.sjpu-home .sjpu-event__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--sjpu-sky);
}

.sjpu-home .sjpu-event__media img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform .8s ease;
}

.sjpu-home .sjpu-event:hover .sjpu-event__media img {
	transform: scale(1.06);
}

.sjpu-home .sjpu-event__date {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--sjpu-gold);
	color: var(--sjpu-navy);
	font-size: 12.5px;
	font-weight: 600;
}

.sjpu-home .sjpu-event__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 24px 26px;
	border-top: 4px solid var(--sjpu-royal);
}

.sjpu-home .sjpu-event__title {
	font-family: var(--sjpu-font-head);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
}

.sjpu-home .sjpu-event__title a {
	color: var(--sjpu-navy);
}

.sjpu-home .sjpu-event__title a:hover {
	color: var(--sjpu-royal);
}

.sjpu-home .sjpu-event__body p {
	font-size: 14.5px;
}

/* ==========================================================================
   9. Principal message
   ========================================================================== */
.sjpu-home .sjpu-principal {
	position: relative;
	padding: var(--sjpu-space) 0;
	background: transparent;
}

.sjpu-home.sjpu-tint .sjpu-principal {
	background: var(--sjpu-sky);
}

.sjpu-home .sjpu-events + .sjpu-principal {
	padding-top: 0;
}

.sjpu-home .sjpu-principal__card {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	overflow: hidden;
	border-radius: 26px;
	background: linear-gradient(135deg, var(--sjpu-navy) 0%, var(--sjpu-navy) 55%, var(--sjpu-royal) 130%);
	box-shadow: var(--sjpu-shadow);
}

.sjpu-home .sjpu-principal__media {
	position: relative;
	min-height: 340px;
	background: var(--sjpu-royal);
}

.sjpu-home .sjpu-principal__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.sjpu-home .sjpu-play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: var(--sjpu-gold);
	color: var(--sjpu-navy);
	font-size: 30px;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 12px rgba(255, 255, 255, .25);
}

.sjpu-home .sjpu-play:hover {
	transform: translate(-50%, -50%) scale(1.08);
}

.sjpu-home .sjpu-principal__quote {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	padding: 52px;
	border: 0;
	color: #FFFFFF;
	quotes: none;
}

.sjpu-home .sjpu-principal__quote::before,
.sjpu-home .sjpu-principal__quote::after {
	content: none;
}

.sjpu-home .sjpu-principal__mark {
	font-size: 44px;
	color: var(--sjpu-gold);
	line-height: 1;
}

.sjpu-home .sjpu-principal__quote p {
	font-family: var(--sjpu-font-head);
	font-size: clamp(19px, 1.9vw, 25px);
	font-style: italic;
	line-height: 1.55;
	color: #FFFFFF;
}

.sjpu-home .sjpu-principal__quote footer {
	display: flex;
	flex-direction: column;
	padding-left: 16px;
	border-left: 3px solid var(--sjpu-gold);
	line-height: 1.4;
}

.sjpu-home .sjpu-principal__quote footer strong {
	font-size: 18px;
	color: var(--sjpu-gold);
}

.sjpu-home .sjpu-principal__quote footer span {
	font-size: 14px;
	color: rgba(255, 255, 255, .75);
}

/* ==========================================================================
   10. Gallery
   ========================================================================== */
.sjpu-home .sjpu-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 230px;
	gap: 16px;
}

.sjpu-home .sjpu-gallery__grid--1{ grid-template-columns: minmax(0, 1fr); grid-auto-rows: 380px; }
.sjpu-home .sjpu-gallery__grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 300px; }
.sjpu-home .sjpu-gallery__grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sjpu-home .sjpu-gallery__grid--5{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sjpu-home .sjpu-gallery__grid--5 .sjpu-gallery__item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.sjpu-home .sjpu-gallery__item {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	background: var(--sjpu-sky);
}

.sjpu-home .sjpu-gallery__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform .8s ease;
}

.sjpu-home .sjpu-gallery__item:hover img {
	transform: scale(1.06);
}

.sjpu-home .sjpu-gallery__item figcaption {
	position: absolute;
	left: 12px;
	bottom: 12px;
	max-width: calc(100% - 24px);
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(11, 31, 77, .85);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
}

/* ==========================================================================
   11. CTA
   ========================================================================== */
.sjpu-home .sjpu-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: calc(var(--sjpu-space) * 1.05) 0;
	background: var(--sjpu-navy);
}

.sjpu-home .sjpu-cta__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.sjpu-home .sjpu-cta__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(11, 31, 77, .97) 0%, rgba(11, 31, 77, .9) 42%, rgba(11, 31, 77, .45) 100%);
}

.sjpu-home .sjpu-cta__content {
	max-width: 640px;
}

.sjpu-home .sjpu-cta__text {
	margin-bottom: 28px;
	font-size: 17px;
	color: rgba(255, 255, 255, .85);
}

.sjpu-home .sjpu-cta__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ==========================================================================
   12. Motion – ambient loops, entrance reveals, interactive effects
   (entrance reveals only run when JS has started → content is never hidden
   without JS; everything is disabled by prefers-reduced-motion)
   ========================================================================== */

/* ---- Ambient: hero ------------------------------------------------------ */
.sjpu-home .sjpu-hero__rays {
	animation: sjpu-spin 160s linear infinite;
}

.sjpu-home .sjpu-hero__glow--a {
	animation: sjpu-drift 16s ease-in-out infinite alternate;
}

.sjpu-home .sjpu-hero__glow--b {
	animation: sjpu-drift 20s ease-in-out infinite alternate-reverse;
}

.sjpu-home.sjpu-fx .sjpu-hero__glow {
	translate: 0 calc(var(--sjpu-sy, 0) * 120px);
}

.sjpu-home .sjpu-sparkles {
	position: absolute;
	inset: 0;
}

.sjpu-home .sjpu-sparkles i {
	position: absolute;
	width: 12px;
	height: 12px;
	background: var(--sjpu-gold);
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	opacity: 0;
	animation: sjpu-twinkle 4.2s ease-in-out infinite;
}

.sjpu-home .sjpu-sparkles i:nth-child(3n) {
	width: 8px;
	height: 8px;
	background: var(--sjpu-royal);
}

.sjpu-home .sjpu-sparkles i:nth-child(4n) {
	width: 16px;
	height: 16px;
	animation-duration: 5.4s;
}

.sjpu-home .sjpu-brand__emblem {
	position: relative;
}

.sjpu-home .sjpu-brand__emblem::after {
	content: "";
	position: absolute;
	inset: -7px;
	border: 1.5px dashed var(--sjpu-gold);
	border-radius: 50%;
	animation: sjpu-spin 18s linear infinite;
}

.sjpu-home .sjpu-pill-btn__icon {
	position: relative;
}

.sjpu-home .sjpu-pill-btn__icon::after {
	content: "";
	position: absolute;
	inset: -3px;
	border: 2px solid var(--sjpu-gold);
	border-radius: 11px;
	animation: sjpu-ping 2.6s cubic-bezier(.2, .6, .3, 1) infinite;
	pointer-events: none;
}

.sjpu-home .sjpu-pill-btn .sjpu-svg-icon {
	transition: transform .35s ease;
}

.sjpu-home .sjpu-pill-btn:hover .sjpu-pill-btn__icon .sjpu-svg-icon {
	transform: translateX(3px);
}

.sjpu-home .sjpu-eyebrow .sjpu-svg-icon {
	animation: sjpu-bob 3s ease-in-out infinite;
}

/* ---- Panels --------------------------------------------------------------- */
.sjpu-home .sjpu-panel__icon {
	animation: sjpu-bob 4.6s ease-in-out infinite;
	animation-delay: calc(var(--sjpu-i, 0) * -0.8s);
}

.sjpu-home .sjpu-panel__shine {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .38) 48%, rgba(255, 255, 255, .08) 56%, transparent 70%);
	translate: -130% 0;
	transition: translate 1s cubic-bezier(.2, .7, .2, 1);
	pointer-events: none;
}

.sjpu-home .sjpu-panel:hover .sjpu-panel__shine,
.sjpu-home .sjpu-panel:focus-visible .sjpu-panel__shine {
	translate: 130% 0;
}

.sjpu-home .sjpu-panel.is-visible .sjpu-panel__shine {
	animation: sjpu-sweep 1.5s ease calc(var(--sjpu-delay, 0ms) + 1.1s) 1 both;
}

.sjpu-home .sjpu-panel:hover .sjpu-panel__icon {
	animation-play-state: paused;
	transform: scale(1.12) rotate(-8deg);
	transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
}

@media (min-width: 1025px) {
	.sjpu-home .sjpu-panel {
		transform:
			rotateY(calc(var(--sjpu-off, 0) * var(--sjpu-tilt) * -1 + var(--sjpu-mx, 0) * 7deg))
			rotateX(calc(var(--sjpu-my, 0) * -5deg));
	}

	.sjpu-home .sjpu-panel.is-settled {
		transition: transform .7s cubic-bezier(.2, .7, .2, 1);
	}

	/* "Deal the cards": panels flip in from steep angles and settle into the arc */
	.sjpu-home.sjpu-anim.sjpu-js:not(.sjpu-nodeal) .sjpu-panel.sjpu-reveal:not(.is-visible) {
		opacity: 0;
		translate: 0 140px;
		transform: rotateY(calc(var(--sjpu-off, 0) * -75deg)) rotateX(35deg) scale(.82);
	}

	.sjpu-home.sjpu-anim.sjpu-js:not(.sjpu-nodeal) .sjpu-panel.sjpu-reveal {
		transition: opacity .8s ease, translate 1.2s cubic-bezier(.16, .9, .3, 1.05), transform 1.4s cubic-bezier(.16, .9, .3, 1.05);
		transition-delay: var(--sjpu-delay, 0ms);
	}

	.sjpu-home.sjpu-anim.sjpu-js:not(.sjpu-nodeal) .sjpu-panel.sjpu-reveal.is-settled {
		transition: transform .7s cubic-bezier(.2, .7, .2, 1);
		transition-delay: 0ms;
	}
}

@media (max-width: 1024px) {
	.sjpu-home.sjpu-anim.sjpu-js:not(.sjpu-nodeal) .sjpu-panel.sjpu-reveal:not(.is-visible) {
		opacity: 0;
		translate: 0 50px;
		rotate: x 35deg;
	}

	.sjpu-home.sjpu-anim.sjpu-js:not(.sjpu-nodeal) .sjpu-panel.sjpu-reveal {
		transition: opacity .7s ease, translate .9s cubic-bezier(.2, .8, .2, 1), rotate .9s cubic-bezier(.2, .8, .2, 1);
		transition-delay: calc(var(--sjpu-i, 0) * 90ms);
	}
}

/* ---- Landmark: rise + scroll parallax ---------------------------------- */
.sjpu-home.sjpu-fx .sjpu-landmark img {
	transform: translate3d(0, calc(var(--sjpu-sy, 0) * -40px), 0);
	will-change: transform;
}

/* ---- Contact bar --------------------------------------------------------- */
.sjpu-home .sjpu-contact__icon {
	transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), background-color .3s ease, color .3s ease;
}

.sjpu-home .sjpu-contact__item:hover .sjpu-contact__icon {
	transform: rotate(-10deg) scale(1.12);
	background: var(--sjpu-gold);
	color: var(--sjpu-navy);
}

/* ---- About -------------------------------------------------------------- */
.sjpu-home .sjpu-about__badge {
	animation: sjpu-float 5s ease-in-out infinite;
}

.sjpu-home .sjpu-about__badge::after {
	content: "";
	position: absolute;
	inset: -14px;
	border: 2px dashed var(--sjpu-gold);
	border-radius: 50%;
	opacity: .7;
	animation: sjpu-spin 14s linear infinite;
}

.sjpu-home .sjpu-about__dots {
	animation: sjpu-drift-sm 9s ease-in-out infinite alternate;
}

.sjpu-home .sjpu-award__icon {
	transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
}

.sjpu-home .sjpu-award:hover .sjpu-award__icon {
	transform: rotate(-12deg) scale(1.1);
}

.sjpu-home .sjpu-checklist li .sjpu-svg-icon {
	transition: transform .4s ease, color .3s ease;
}

.sjpu-home .sjpu-checklist li:hover .sjpu-svg-icon {
	transform: scale(1.2);
	color: var(--sjpu-gold-deep);
}

/* ---- Stats --------------------------------------------------------------- */
.sjpu-home .sjpu-stat {
	position: relative;
}

.sjpu-home .sjpu-stat::after {
	content: "";
	width: 0;
	height: 3px;
	margin-top: 8px;
	border-radius: 3px;
	background: var(--sjpu-gold);
	transition: width .9s cubic-bezier(.2, .7, .2, 1) .4s;
}

.sjpu-home .sjpu-stats.is-visible .sjpu-stat::after,
.sjpu-home:not(.sjpu-js) .sjpu-stat::after {
	width: 34px;
}

.sjpu-home .sjpu-stat__num {
	transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
}

.sjpu-home .sjpu-stat:hover .sjpu-stat__num {
	transform: scale(1.08);
}

/* ---- Campus cards (re-animate on every tab switch) ---------------------- */
.sjpu-home .sjpu-card {
	transform-origin: 50% 100%;
	animation: sjpu-card-in .75s cubic-bezier(.2, .8, .2, 1) both;
	animation-delay: calc(var(--sjpu-ci, 0) * 120ms);
}

.sjpu-home .sjpu-card figcaption {
	transition: padding-bottom .4s ease;
}

.sjpu-home .sjpu-card:hover figcaption {
	padding-bottom: 24px;
}

.sjpu-home .sjpu-tab {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

.sjpu-home .sjpu-tab:hover {
	transform: translateY(-2px);
}

.sjpu-home .sjpu-notice__item:hover .sjpu-notice__file {
	animation: sjpu-wiggle .5s ease;
}

.sjpu-home .sjpu-notice__title .sjpu-svg-icon {
	transform-origin: 50% 0;
	animation: sjpu-ring 4s ease-in-out infinite;
}

/* ---- Events: 3D tilt (JS) + glare ---------------------------------------- */
.sjpu-home .sjpu-event {
	transform-style: preserve-3d;
	will-change: transform;
}

.sjpu-home .sjpu-event.is-tilting {
	transition: transform .12s linear, box-shadow .35s ease;
}

.sjpu-home .sjpu-event__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at var(--sjpu-gx, 50%) var(--sjpu-gy, 50%), rgba(255, 255, 255, .35), transparent 55%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

.sjpu-home .sjpu-event:hover .sjpu-event__media::after {
	opacity: 1;
}

.sjpu-home .sjpu-event__date {
	transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
}

.sjpu-home .sjpu-event:hover .sjpu-event__date {
	transform: translateY(-4px) scale(1.05);
}

/* ---- Principal ----------------------------------------------------------- */
.sjpu-home .sjpu-play::before,
.sjpu-home .sjpu-play::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--sjpu-gold);
	border-radius: 50%;
	animation: sjpu-ripple 2.6s ease-out infinite;
	pointer-events: none;
}

.sjpu-home .sjpu-play::after {
	animation-delay: 1.3s;
}

.sjpu-home .sjpu-principal__media img {
	transition: transform 1.2s ease;
}

.sjpu-home .sjpu-principal__card:hover .sjpu-principal__media img {
	transform: scale(1.05);
}

.sjpu-home .sjpu-principal__mark {
	display: inline-block;
	transform-origin: 0 100%;
}

.sjpu-home .sjpu-principal__quote.is-visible .sjpu-principal__mark {
	animation: sjpu-pop .9s cubic-bezier(.3, 1.6, .5, 1) .4s both;
}

/* ---- Gallery --------------------------------------------------------------- */
.sjpu-home .sjpu-gallery__item figcaption {
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), background-color .3s ease;
}

.sjpu-home .sjpu-gallery__item:hover figcaption {
	transform: translateY(-6px);
	background: var(--sjpu-gold);
	color: var(--sjpu-navy);
}

/* ---- CTA ----------------------------------------------------------------- */
.sjpu-home .sjpu-cta__bg {
	animation: sjpu-kenburns 24s ease-in-out infinite alternate;
}

.sjpu-home .sjpu-cta__ring {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.sjpu-home .sjpu-cta__ring--a {
	top: -120px;
	right: -80px;
	width: 380px;
	height: 380px;
	border: 2px solid rgba(242, 184, 39, .35);
	animation: sjpu-float 9s ease-in-out infinite;
}

.sjpu-home .sjpu-cta__ring--b {
	bottom: -60px;
	right: 18%;
	width: 170px;
	height: 170px;
	border: 2px dashed rgba(255, 255, 255, .3);
	animation: sjpu-spin 30s linear infinite;
}

.sjpu-home .sjpu-btn--gold {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.sjpu-home .sjpu-btn--gold::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
	translate: -120% 0;
	animation: sjpu-btn-shine 4.5s ease-in-out infinite;
}

/* ---- Section labels: gold line draws in ---------------------------------- */
.sjpu-home.sjpu-anim.sjpu-js .sjpu-label.sjpu-reveal::before {
	width: 0;
	transition: width .8s cubic-bezier(.2, .7, .2, 1) .35s;
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-label.sjpu-reveal.is-visible::before {
	width: 28px;
}

/* ---- Entrance reveals (all values come from Style → Animations) --------- */
.sjpu-home {
	--rv-x: 0px;
	--rv-y: var(--sjpu-dist, 34px);
	--rv-s: 1;
	--rv-r: 0deg;
	--rv-b: 0px;
}

.sjpu-style-fade-up { --rv-x: 0px; --rv-y: var(--sjpu-dist, 34px); --rv-s: 1; --rv-r: 0deg; --rv-b: 0px; }
.sjpu-style-fade    { --rv-x: 0px; --rv-y: 0px; --rv-s: 1; --rv-r: 0deg; --rv-b: 0px; }
.sjpu-style-zoom    { --rv-x: 0px; --rv-y: 0px; --rv-s: .86; --rv-r: 0deg; --rv-b: 0px; }
.sjpu-style-slide   { --rv-x: calc(var(--sjpu-dist, 34px) * -1.6); --rv-y: 0px; --rv-s: 1; --rv-r: 0deg; --rv-b: 0px; }
.sjpu-style-flip    { --rv-x: 0px; --rv-y: var(--sjpu-dist, 34px); --rv-s: 1; --rv-r: 42deg; --rv-b: 0px; }
.sjpu-style-blur    { --rv-x: 0px; --rv-y: calc(var(--sjpu-dist, 34px) * .5); --rv-s: 1; --rv-r: 0deg; --rv-b: 12px; }

.sjpu-style-flip .sjpu-reveal:not(.sjpu-panel) {
	transform-origin: 50% 100%;
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal {
	opacity: 0;
	translate: var(--rv-x) var(--rv-y);
	scale: var(--rv-s);
	rotate: x var(--rv-r);
	filter: blur(var(--rv-b));
	transition:
		opacity var(--sjpu-dur, 900ms) ease,
		translate var(--sjpu-dur, 900ms) var(--sjpu-ease, ease),
		scale var(--sjpu-dur, 900ms) var(--sjpu-ease, ease),
		rotate var(--sjpu-dur, 900ms) var(--sjpu-ease, ease),
		filter var(--sjpu-dur, 900ms) ease;
	transition-delay: calc(var(--sjpu-base-delay, 0ms) + var(--sjpu-delay, 0ms));
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal.is-visible {
	opacity: 1;
	translate: 0 0;
	scale: 1;
	rotate: x 0deg;
	filter: none;
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal--zoom:not(.is-visible) {
	scale: .9;
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal--right:not(.is-visible) {
	translate: calc(var(--sjpu-dist, 34px) * 1.6) 0;
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal--rise {
	transition-duration: calc(var(--sjpu-dur, 900ms) * 1.4);
	transition-delay: calc(var(--sjpu-base-delay, 0ms) + 700ms);
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal--rise:not(.is-visible) {
	translate: 0 calc(var(--sjpu-dist, 34px) * 2.6);
	scale: .94;
}

/* Image curtain wipe. The image itself is NEVER hidden (safe with lazy-loading
   and optimisation plugins) – two colour panels slide away on top of it. */
.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal--clip,
.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal--clip:not(.is-visible) {
	opacity: 1;
	translate: none;
	scale: none;
	rotate: none;
	filter: none;
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal--clip .sjpu-frame__in::before,
.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal--clip .sjpu-frame__in::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 4;
	transform-origin: 50% 0;
	pointer-events: none;
	transition: transform calc(var(--sjpu-dur, 900ms) * 1.1) cubic-bezier(.77, 0, .18, 1);
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal--clip .sjpu-frame__in::before {
	background: var(--sjpu-frame-a, var(--sjpu-gold));
	transition-delay: calc(var(--sjpu-base-delay, 0ms) + var(--sjpu-delay, 0ms) + 200ms);
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal--clip .sjpu-frame__in::after {
	background: linear-gradient(160deg, var(--sjpu-navy), var(--sjpu-royal));
	transition-delay: calc(var(--sjpu-base-delay, 0ms) + var(--sjpu-delay, 0ms));
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal--clip.is-visible .sjpu-frame__in::before,
.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal--clip.is-visible .sjpu-frame__in::after {
	transform: scaleY(0);
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal--clip .sjpu-frame__in img {
	scale: 1.18;
	transition: scale calc(var(--sjpu-dur, 900ms) * 1.8) var(--sjpu-ease, ease), transform .8s ease;
	transition-delay: calc(var(--sjpu-base-delay, 0ms) + var(--sjpu-delay, 0ms) + 150ms), 0s;
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-reveal--clip.is-visible .sjpu-frame__in img {
	scale: 1;
}

/* Split heading: words rise out of a mask one by one */
.sjpu-home.sjpu-anim.sjpu-js .sjpu-split,
.sjpu-home.sjpu-anim.sjpu-js .sjpu-split:not(.is-visible) {
	opacity: 1;
	translate: none;
	scale: none;
	rotate: none;
	filter: none;
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-split .sjpu-word {
	overflow: hidden;
	padding: 0 .04em .14em;
	margin: 0 -.04em -.14em;
	vertical-align: top;
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-split .sjpu-word__in {
	display: inline-block;
	translate: 0 110%;
	rotate: 8deg;
	transform-origin: 0 100%;
	transition: translate var(--sjpu-dur, 900ms) cubic-bezier(.2, .85, .25, 1), rotate var(--sjpu-dur, 900ms) cubic-bezier(.2, .85, .25, 1);
	transition-delay: calc(var(--sjpu-base-delay, 0ms) + var(--sjpu-w, 0) * 85ms + 200ms);
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-split.is-visible .sjpu-word__in {
	translate: 0 0;
	rotate: 0deg;
}

/* Deal mode: panels use their own flip-in, not the global style */
.sjpu-home.sjpu-anim.sjpu-js:not(.sjpu-nodeal) .sjpu-panel.sjpu-reveal {
	scale: none;
	rotate: none;
	filter: none;
}

/* ---- Keyframes ----------------------------------------------------------- */
@keyframes sjpu-spin {
	to { rotate: 360deg; }
}

@keyframes sjpu-drift {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(60px, 40px) scale(1.15); }
}

@keyframes sjpu-drift-sm {
	from { transform: translate(0, 0); }
	to   { transform: translate(14px, -10px); }
}

@keyframes sjpu-twinkle {
	0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
	50%      { opacity: .85; transform: scale(1) rotate(90deg); }
}

@keyframes sjpu-bob {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -6px; }
}

@keyframes sjpu-float {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -12px; }
}

@keyframes sjpu-ping {
	0%   { transform: scale(1); opacity: .9; }
	80%, 100% { transform: scale(1.45); opacity: 0; }
}

@keyframes sjpu-ripple {
	0%   { transform: scale(1); opacity: .8; }
	100% { transform: scale(1.9); opacity: 0; }
}

@keyframes sjpu-sweep {
	from { translate: -130% 0; }
	to   { translate: 130% 0; }
}

@keyframes sjpu-btn-shine {
	0%, 60% { translate: -120% 0; }
	100%    { translate: 120% 0; }
}

@keyframes sjpu-kenburns {
	from { transform: scale(1) translate(0, 0); }
	to   { transform: scale(1.14) translate(-2%, -2%); }
}

@keyframes sjpu-card-in {
	from { opacity: 0; transform: perspective(900px) rotateX(-18deg) translateY(30px) scale(.95); }
	to   { opacity: 1; transform: none; }
}

@keyframes sjpu-pop {
	from { transform: scale(0) rotate(-20deg); opacity: 0; }
	to   { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes sjpu-wiggle {
	0%, 100% { transform: rotate(0); }
	25%      { transform: rotate(-12deg); }
	75%      { transform: rotate(12deg); }
}

@keyframes sjpu-ring {
	0%, 80%, 100% { transform: rotate(0); }
	84% { transform: rotate(16deg); }
	88% { transform: rotate(-14deg); }
	92% { transform: rotate(10deg); }
	96% { transform: rotate(-6deg); }
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */

/* Laptop */
@media (max-width: 1280px) {
	.sjpu-home {
		--sjpu-panel-h: 370px;
	}

	.sjpu-home .sjpu-panels {
		gap: 12px;
	}

	.sjpu-home .sjpu-panel__title {
		font-size: 17px;
	}

	.sjpu-home .sjpu-about__grid {
		gap: 48px;
	}
}

/* Tablet */
@media (max-width: 1024px) {
	.sjpu-home {
		--sjpu-space: 76px;
		--sjpu-panel-h: 330px;
	}

	.sjpu-home .sjpu-panels {
		flex-wrap: wrap;
		gap: 16px;
		perspective: none;
	}

	.sjpu-home .sjpu-panel {
		flex: 0 0 calc((100% - 32px) / 3);
		height: var(--sjpu-panel-h);
		margin-top: 0;
		transform: none;
		will-change: auto;
	}

	.sjpu-home .sjpu-landmark {
		margin-top: -40px;
	}

	.sjpu-home .sjpu-contact {
		margin-top: -10px;
	}

	.sjpu-home .sjpu-about__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 56px;
	}

	.sjpu-home .sjpu-about__media {
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
	}

	.sjpu-home .sjpu-campus__panel {
		padding: 40px 32px;
	}

	.sjpu-home .sjpu-campus__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sjpu-home .sjpu-cards {
		grid-auto-rows: auto;
	}

	.sjpu-home .sjpu-card {
		aspect-ratio: 4 / 3;
	}

	.sjpu-home .sjpu-events__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sjpu-home .sjpu-principal__card {
		grid-template-columns: minmax(0, 1fr);
	}

	.sjpu-home .sjpu-principal__media {
		min-height: 0;
		aspect-ratio: 16 / 8;
	}

	.sjpu-home .sjpu-principal__quote {
		padding: 40px 36px;
	}

	.sjpu-home .sjpu-gallery__grid,
	.sjpu-home .sjpu-gallery__grid--4,
	.sjpu-home .sjpu-gallery__grid--5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: 200px;
	}

	.sjpu-home .sjpu-gallery__grid--5 .sjpu-gallery__item:first-child {
		grid-row: span 1;
	}

	.sjpu-home .sjpu-gallery__grid--4 .sjpu-gallery__item:first-child {
		grid-column: span 3;
	}

	.sjpu-home .sjpu-cta__overlay {
		background: linear-gradient(90deg, rgba(11, 31, 77, .95) 0%, rgba(11, 31, 77, .8) 100%);
	}
}

/* Mobile */
@media (max-width: 767px) {
	.sjpu-home {
		--sjpu-space: 60px;
		--sjpu-panel-h: 250px;
		font-size: 15px;
	}

	.sjpu-home .sjpu-wrap,
	.sjpu-home .sjpu-stage {
		padding: 0 16px;
	}

	.sjpu-home .sjpu-hero {
		padding: 20px 0 40px;
	}

	.sjpu-home .sjpu-brand__name {
		font-size: 18px;
	}

	.sjpu-home .sjpu-brand__emblem {
		width: 44px;
		height: 44px;
		flex-basis: 44px;
		font-size: 22px;
	}

	.sjpu-home .sjpu-hero__head {
		margin-top: 26px;
	}

	.sjpu-home .sjpu-hero__sub {
		font-size: 15.5px;
	}

	.sjpu-home .sjpu-pill-btn {
		padding-right: 16px;
		font-size: 15px;
	}

	.sjpu-home .sjpu-stage {
		margin-top: 30px;
	}

	.sjpu-home .sjpu-panels {
		gap: 12px;
	}

	.sjpu-home .sjpu-panel {
		flex: 0 0 calc((100% - 12px) / 2);
	}

	.sjpu-home .sjpu-panel:last-child:nth-child(odd) {
		flex-basis: 100%;
		height: calc(var(--sjpu-panel-h) - 30px);
	}

	.sjpu-home .sjpu-panel__head {
		gap: 6px;
		padding: 18px 10px 0;
	}

	.sjpu-home .sjpu-panel__icon {
		width: 42px;
		height: 42px;
		font-size: 21px;
	}

	.sjpu-home .sjpu-panel__title {
		font-size: 15.5px;
	}

	.sjpu-home .sjpu-panel__text {
		font-size: 11.5px;
		-webkit-line-clamp: 2;
	}

	.sjpu-home .sjpu-landmark {
		margin-top: 8px;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 12%);
	}

	.sjpu-home .sjpu-contact {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-top: 0;
		padding: 18px;
		border-radius: 20px;
	}

	.sjpu-home .sjpu-contact__item {
		font-size: 14px;
	}

	.sjpu-home .sjpu-about__media {
		padding: 0 0 16px 16px;
	}

	.sjpu-home .sjpu-about__badge {
		width: 60px;
		height: 60px;
		font-size: 24px;
		border-width: 4px;
		top: -12px;
	}

	.sjpu-home .sjpu-about__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.sjpu-home .sjpu-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sjpu-home .sjpu-stat {
		padding: 24px 12px;
	}

	.sjpu-home .sjpu-stat:nth-child(odd) {
		border-left: 0;
	}

	.sjpu-home .sjpu-stat:nth-child(n + 3) {
		border-top: 1px solid rgba(255, 255, 255, .12);
	}

	.sjpu-home .sjpu-campus__panel {
		padding: 30px 18px;
		border-radius: 22px;
	}

	.sjpu-home .sjpu-tab {
		padding: 9px 14px;
		font-size: 13px;
	}

	.sjpu-home .sjpu-notice {
		padding: 20px;
	}

	.sjpu-home .sjpu-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.sjpu-home .sjpu-card {
		min-height: 200px;
		aspect-ratio: 16 / 10;
	}

	.sjpu-home .sjpu-section-head {
		margin-bottom: 30px;
	}

	.sjpu-home .sjpu-events__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.sjpu-home .sjpu-principal__media {
		aspect-ratio: 16 / 10;
	}

	.sjpu-home .sjpu-principal__quote {
		padding: 30px 22px;
	}

	.sjpu-home .sjpu-gallery__grid,
	.sjpu-home .sjpu-gallery__grid--2,
	.sjpu-home .sjpu-gallery__grid--4,
	.sjpu-home .sjpu-gallery__grid--5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 160px;
		gap: 12px;
	}

	.sjpu-home .sjpu-gallery__grid--5 .sjpu-gallery__item:first-child,
	.sjpu-home .sjpu-gallery__grid--4 .sjpu-gallery__item:first-child {
		grid-column: span 2;
		grid-row: span 1;
	}

	.sjpu-home .sjpu-gallery__grid--1 {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: 240px;
	}

	.sjpu-home .sjpu-cta__btns .sjpu-btn {
		flex: 1 1 100%;
	}
}

/* Small phones */
@media (max-width: 380px) {
	.sjpu-home {
		--sjpu-panel-h: 230px;
	}

	.sjpu-home .sjpu-panel__text {
		display: none;
	}

	.sjpu-home .sjpu-brand__site {
		font-size: 14px;
	}
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
	.sjpu-home:not(.sjpu-force-motion) *,
	.sjpu-home:not(.sjpu-force-motion) *::before,
	.sjpu-home:not(.sjpu-force-motion) *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* Elementor container reset for this widget */
.elementor-widget-sjpu-college-homepage > .elementor-widget-container {
	padding: 0;
	margin: 0;
}

/* ==========================================================================
   14. 3D icons
   ========================================================================== */
.sjpu-home .sjpu-3d {
	display: inline-block;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	object-fit: contain;
	vertical-align: middle;
	filter: drop-shadow(0 4px 6px rgba(10, 26, 63, .16));
}

.sjpu-home img.sjpu-3d {
	position: static !important;
	display: inline-block;
	width: 1em !important;
	height: 1em !important;
	max-width: none;
	inset: auto;
	transform-origin: 50% 50%;
}

.sjpu-home .sjpu-gallery__grid {
	gap: 24px;
}

.sjpu-home .sjpu-flat-icon {
	display: inline-grid;
	place-items: center;
	font-size: 28px;
	color: #FFFFFF;
}

.sjpu-home .sjpu-flat-icon svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

.sjpu-home .sjpu-brand__emblem {
	background: #FFFFFF;
	box-shadow: 0 0 0 4px rgba(242, 184, 39, .35), var(--sjpu-shadow-sm);
}

.sjpu-home .sjpu-brand__emblem .sjpu-3d{ font-size: 34px; }
.sjpu-home .sjpu-brand__site .sjpu-3d{ font-size: 24px; }
.sjpu-home .sjpu-eyebrow .sjpu-3d{ font-size: 20px; }

.sjpu-home .sjpu-panel__icon {
	width: 76px;
	height: 76px;
	border: 1.5px solid rgba(255, 255, 255, .5);
	background: rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 24px -12px rgba(0, 0, 0, .45);
}

.sjpu-home .sjpu-panel__icon .sjpu-3d {
	font-size: 50px;
	filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .28));
}

.sjpu-home .sjpu-contact__icon {
	width: 42px;
	height: 42px;
	flex-basis: 42px;
	border-radius: 12px;
}

.sjpu-home .sjpu-contact__icon .sjpu-3d{ font-size: 30px; }
.sjpu-home .sjpu-checklist .sjpu-3d{ font-size: 24px; }

.sjpu-home .sjpu-award__icon {
	width: 62px;
	height: 62px;
	flex-basis: 62px;
	background: #FFFFFF;
}

.sjpu-home .sjpu-award__icon .sjpu-3d{ font-size: 44px; }

.sjpu-home .sjpu-about__badge {
	width: 84px;
	height: 84px;
	background: #FFFFFF;
	box-shadow: 0 0 0 5px rgba(242, 184, 39, .35), var(--sjpu-shadow);
}

.sjpu-home .sjpu-about__badge .sjpu-3d{ font-size: 54px; }
.sjpu-home .sjpu-tab .sjpu-3d{ font-size: 24px; }
.sjpu-home .sjpu-notice__title .sjpu-3d{ font-size: 32px; transform-origin: 50% 0; }
.sjpu-home .sjpu-notice__date .sjpu-3d{ font-size: 16px; filter: none; }

.sjpu-home .sjpu-notice__file {
	width: 44px;
	height: 44px;
	flex-basis: 44px;
	border-radius: 12px;
}

.sjpu-home .sjpu-notice__file .sjpu-3d{ font-size: 32px; }
.sjpu-home .sjpu-event__date .sjpu-3d{ font-size: 18px; filter: none; }
.sjpu-home .sjpu-principal__mark .sjpu-3d{ font-size: 58px; }

.sjpu-home .sjpu-marquee__sep .sjpu-3d {
	width: 100%;
	height: 100%;
	font-size: inherit;
}

/* 3D icon motion */
.sjpu-home .sjpu-eyebrow .sjpu-3d{ animation: sjpu-bob calc(3s * var(--sjpu-amb, 1)) ease-in-out infinite; }
.sjpu-home .sjpu-notice__title .sjpu-3d{ animation: sjpu-ring calc(4s * var(--sjpu-amb, 1)) ease-in-out infinite; }
.sjpu-home .sjpu-checklist li .sjpu-3d,
.sjpu-home .sjpu-tab .sjpu-3d,
.sjpu-home .sjpu-contact__icon .sjpu-3d,
.sjpu-home .sjpu-notice__file .sjpu-3d{ transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.sjpu-home .sjpu-checklist li:hover .sjpu-3d{ transform: scale(1.18) rotate(-8deg); }
.sjpu-home .sjpu-tab:hover .sjpu-3d{ transform: translateY(-3px) rotate(-8deg) scale(1.1); }
.sjpu-home .sjpu-notice__item:hover .sjpu-notice__file .sjpu-3d{ transform: rotate(-10deg) scale(1.1); }
.sjpu-home .sjpu-notice__item:hover .sjpu-notice__file{ background: var(--sjpu-sky); animation: none; }
.sjpu-home .sjpu-contact__item:hover .sjpu-contact__icon{ background: #FFFFFF; }
.sjpu-home .sjpu-contact__item:hover .sjpu-contact__icon .sjpu-3d{ transform: scale(1.12); }

/* ==========================================================================
   15. Image frames (Style → Image Frames & Borders)
   ========================================================================== */
.sjpu-home {
	--sjpu-frame-a: var(--sjpu-gold);
	--sjpu-frame-b: var(--sjpu-royal);
	--sjpu-fr-r: 18px;
}

/* Containers no longer clip – the frame handles rounding/clipping. */
.sjpu-home .sjpu-about__img,
.sjpu-home .sjpu-card,
.sjpu-home .sjpu-gallery__item {
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.sjpu-home .sjpu-about__img--2 {
	border: 0;
	z-index: 2;
}

.sjpu-home .sjpu-event {
	overflow: visible;
}

.sjpu-home .sjpu-event__media {
	margin: 14px 14px 0;
	overflow: visible;
	border-radius: var(--sjpu-fr-r);
	background: none;
}

.sjpu-home .sjpu-event__media::after {
	z-index: 3;
	border-radius: var(--sjpu-fr-r);
}

.sjpu-home .sjpu-event__date {
	z-index: 5;
}

.sjpu-home .sjpu-event__body {
	border-top: 0;
}

.sjpu-home .sjpu-principal__media:not(.sjpu-principal__media--none) {
	margin: 24px 0 24px 24px;
	background: none;
}

.sjpu-home .sjpu-principal__media--none .sjpu-frame__in {
	border-radius: 0;
}

.sjpu-home .sjpu-card figcaption {
	z-index: 3;
	border-radius: 0 0 var(--sjpu-fr-r) var(--sjpu-fr-r);
}

.sjpu-home .sjpu-gallery__item figcaption {
	z-index: 3;
}

/* Base frame */
.sjpu-home .sjpu-frame {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 1;
}

.sjpu-home .sjpu-frame__in {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	overflow: hidden;
	border-radius: var(--sjpu-fr-r);
	background: var(--sjpu-sky);
	isolation: isolate;
}

.sjpu-home .sjpu-frame__in img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	transition: transform .8s ease;
}

.sjpu-home .sjpu-frame::before,
.sjpu-home .sjpu-frame::after {
	pointer-events: none;
	transition: transform .5s cubic-bezier(.2, .8, .2, 1), inset .5s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}

/* Rounded + shadow */
.sjpu-home .sjpu-frame--rounded .sjpu-frame__in {
	box-shadow: var(--sjpu-shadow);
}

/* None */
.sjpu-home .sjpu-frame--none .sjpu-frame__in {
	border-radius: 0;
}

/* Offset gold outline */
.sjpu-home .sjpu-frame--offset .sjpu-frame__in {
	box-shadow: var(--sjpu-shadow);
}

.sjpu-home .sjpu-frame--offset::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border: 2px solid var(--sjpu-frame-a);
	border-radius: var(--sjpu-fr-r);
	transform: translate(14px, 14px);
}

.sjpu-home .sjpu-frame--offset::after {
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	z-index: 2;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sjpu-frame-a);
	box-shadow: 0 0 0 5px #FFFFFF;
}

.sjpu-home *:hover > .sjpu-frame--offset::before {
	transform: translate(8px, 8px);
}

/* Double ring */
.sjpu-home .sjpu-frame--double .sjpu-frame__in {
	box-shadow: 0 0 0 6px #FFFFFF, 0 0 0 8px var(--sjpu-frame-a), var(--sjpu-shadow);
}

.sjpu-home .sjpu-frame--double::after {
	content: "";
	position: absolute;
	inset: 16px;
	z-index: 2;
	border: 1.5px solid rgba(255, 255, 255, .7);
	border-radius: calc(var(--sjpu-fr-r) - 8px);
}

.sjpu-home *:hover > .sjpu-frame--double::after {
	inset: 10px;
	opacity: .4;
}

/* Gradient border */
.sjpu-home .sjpu-frame--gradient {
	border-radius: var(--sjpu-fr-r);
	background: linear-gradient(135deg, var(--sjpu-navy) 0%, var(--sjpu-frame-b) 45%, var(--sjpu-frame-a) 100%);
	box-shadow: var(--sjpu-shadow);
}

.sjpu-home .sjpu-frame--gradient .sjpu-frame__in {
	inset: 5px;
	border-radius: calc(var(--sjpu-fr-r) - 4px);
}

/* Corner brackets */
.sjpu-home .sjpu-frame--brackets .sjpu-frame__in {
	border-radius: calc(var(--sjpu-fr-r) - 4px);
	box-shadow: var(--sjpu-shadow-sm);
}

.sjpu-home .sjpu-frame--brackets::before,
.sjpu-home .sjpu-frame--brackets::after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 44px;
	height: 44px;
}

.sjpu-home .sjpu-frame--brackets::before {
	top: -8px;
	left: -8px;
	border-top: 4px solid var(--sjpu-frame-a);
	border-left: 4px solid var(--sjpu-frame-a);
	border-top-left-radius: 12px;
}

.sjpu-home .sjpu-frame--brackets::after {
	right: -8px;
	bottom: -8px;
	border-right: 4px solid var(--sjpu-frame-a);
	border-bottom: 4px solid var(--sjpu-frame-a);
	border-bottom-right-radius: 12px;
}

.sjpu-home *:hover > .sjpu-frame--brackets::before {
	transform: translate(-4px, -4px);
}

.sjpu-home *:hover > .sjpu-frame--brackets::after {
	transform: translate(4px, 4px);
}

/* Layered cards */
.sjpu-home .sjpu-frame--layered .sjpu-frame__in {
	box-shadow: var(--sjpu-shadow);
}

.sjpu-home .sjpu-frame--layered::before,
.sjpu-home .sjpu-frame--layered::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: var(--sjpu-fr-r);
}

.sjpu-home .sjpu-frame--layered::before {
	background: var(--sjpu-frame-b);
	opacity: .22;
	transform: rotate(-4deg);
}

.sjpu-home .sjpu-frame--layered::after {
	background: var(--sjpu-frame-a);
	opacity: .35;
	transform: rotate(3deg);
}

.sjpu-home *:hover > .sjpu-frame--layered::before {
	transform: rotate(-7deg) translateX(-6px);
}

.sjpu-home *:hover > .sjpu-frame--layered::after {
	transform: rotate(6deg) translateX(6px);
}

/* Arch top */
.sjpu-home .sjpu-frame--arch .sjpu-frame__in {
	border-radius: 50% 50% var(--sjpu-fr-r) var(--sjpu-fr-r) / 32% 32% var(--sjpu-fr-r) var(--sjpu-fr-r);
	box-shadow: var(--sjpu-shadow);
}

.sjpu-home .sjpu-frame--arch::before {
	content: "";
	position: absolute;
	inset: -9px;
	z-index: 0;
	border: 2px solid var(--sjpu-frame-a);
	border-radius: 50% 50% calc(var(--sjpu-fr-r) + 8px) calc(var(--sjpu-fr-r) + 8px) / 32% 32% calc(var(--sjpu-fr-r) + 8px) calc(var(--sjpu-fr-r) + 8px);
}

/* Polaroid / photo print */
.sjpu-home .sjpu-frame--polaroid {
	border-radius: 6px;
	background: #FFFFFF;
	box-shadow: 0 18px 36px -16px rgba(10, 26, 63, .45), 0 2px 6px rgba(10, 26, 63, .08);
	transform: rotate(-1.4deg);
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.sjpu-home *:nth-child(even) > .sjpu-frame--polaroid {
	transform: rotate(1.4deg);
}

.sjpu-home *:hover > .sjpu-frame--polaroid {
	transform: rotate(0) scale(1.02);
}

.sjpu-home .sjpu-frame--polaroid .sjpu-frame__in {
	inset: 10px 10px 38px;
	border-radius: 2px;
}

.sjpu-home .sjpu-frame--polaroid::after {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	z-index: 2;
	width: 70px;
	height: 22px;
	background: rgba(242, 184, 39, .55);
	transform: translateX(-50%) rotate(-3deg);
}

.sjpu-home .sjpu-frame--polaroid + figcaption {
	left: 16px;
	right: 16px;
	bottom: 6px;
	max-width: none;
	padding: 6px 4px;
	border-radius: 0;
	background: none;
	color: var(--sjpu-navy);
	text-align: center;
	font-family: var(--sjpu-font-head);
	font-style: italic;
}

.sjpu-home .sjpu-card .sjpu-frame--polaroid + figcaption {
	padding: 6px 4px;
}

.sjpu-home .sjpu-card .sjpu-frame--polaroid + figcaption::before {
	display: none;
}

.sjpu-home .sjpu-gallery__item:hover .sjpu-frame--polaroid + figcaption {
	background: none;
	color: var(--sjpu-royal);
}

/* Frames on small screens: tighter decorations so nothing overflows */
@media (max-width: 767px) {
	.sjpu-home .sjpu-frame--offset::before {
		transform: translate(8px, 8px);
	}

	.sjpu-home .sjpu-frame--brackets::before,
	.sjpu-home .sjpu-frame--brackets::after {
		width: 32px;
		height: 32px;
	}

	.sjpu-home .sjpu-principal__media:not(.sjpu-principal__media--none) {
		margin: 16px 16px 0;
	}
}

@media (max-width: 1024px) {
	.sjpu-home .sjpu-principal__media:not(.sjpu-principal__media--none) {
		margin: 22px 22px 0;
	}
}

/* ==========================================================================
   16. Loop speed + on/off (Style → Animations → Looping Effects)
   ========================================================================== */
.sjpu-home .sjpu-hero__rays{ animation-duration: calc(160s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-hero__glow--a{ animation-duration: calc(16s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-hero__glow--b{ animation-duration: calc(20s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-sparkles i{ animation-duration: calc(4.2s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-sparkles i:nth-child(4n){ animation-duration: calc(5.4s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-brand__emblem::after{ animation-duration: calc(18s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-pill-btn__icon::after{ animation-duration: calc(2.6s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-panel__icon{ animation-duration: calc(4.6s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-about__badge{ animation-duration: calc(5s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-about__badge::after{ animation-duration: calc(14s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-about__dots{ animation-duration: calc(9s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-play::before,
.sjpu-home .sjpu-play::after{ animation-duration: calc(2.6s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-cta__bg{ animation-duration: calc(24s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-cta__ring--a{ animation-duration: calc(9s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-cta__ring--b{ animation-duration: calc(30s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-btn--gold::after{ animation-duration: calc(4.5s * var(--sjpu-amb, 1)); }
.sjpu-home .sjpu-hero__accent .sjpu-word__in{ animation-duration: calc(6s * var(--sjpu-amb, 1)); }

.sjpu-home.sjpu-noloop .sjpu-hero__rays,
.sjpu-home.sjpu-noloop .sjpu-hero__glow,
.sjpu-home.sjpu-noloop .sjpu-sparkles i,
.sjpu-home.sjpu-noloop .sjpu-brand__emblem::after,
.sjpu-home.sjpu-noloop .sjpu-pill-btn__icon::after,
.sjpu-home.sjpu-noloop .sjpu-eyebrow .sjpu-3d,
.sjpu-home.sjpu-noloop .sjpu-panel__icon,
.sjpu-home.sjpu-noloop .sjpu-about__badge,
.sjpu-home.sjpu-noloop .sjpu-about__badge::after,
.sjpu-home.sjpu-noloop .sjpu-about__dots,
.sjpu-home.sjpu-noloop .sjpu-notice__title .sjpu-3d,
.sjpu-home.sjpu-noloop .sjpu-play::before,
.sjpu-home.sjpu-noloop .sjpu-play::after,
.sjpu-home.sjpu-noloop .sjpu-cta__bg,
.sjpu-home.sjpu-noloop .sjpu-cta__ring,
.sjpu-home.sjpu-noloop .sjpu-btn--gold::after,
.sjpu-home.sjpu-noloop .sjpu-hero__accent .sjpu-word__in {
	animation: none !important;
}

.sjpu-home.sjpu-noloop .sjpu-sparkles,
.sjpu-home.sjpu-noloop .sjpu-pill-btn__icon::after,
.sjpu-home.sjpu-noloop .sjpu-play::before,
.sjpu-home.sjpu-noloop .sjpu-play::after {
	display: none;
}

@media (max-width: 767px) {
	.sjpu-home .sjpu-panel__icon {
		width: 58px;
		height: 58px;
	}

	.sjpu-home .sjpu-panel__icon .sjpu-3d {
		font-size: 38px;
	}

	.sjpu-home .sjpu-about__badge {
		width: 64px;
		height: 64px;
	}

	.sjpu-home .sjpu-about__badge .sjpu-3d {
		font-size: 40px;
	}

	.sjpu-home .sjpu-award__icon {
		width: 54px;
		height: 54px;
		flex-basis: 54px;
	}

	.sjpu-home .sjpu-award__icon .sjpu-3d {
		font-size: 38px;
	}

	.sjpu-home .sjpu-principal__mark .sjpu-3d {
		font-size: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sjpu-home.sjpu-anim:not(.sjpu-force-motion) .sjpu-reveal--clip .sjpu-frame__in::before,
	.sjpu-home.sjpu-anim:not(.sjpu-force-motion) .sjpu-reveal--clip .sjpu-frame__in::after {
		display: none;
	}
}

/* ==========================================================================
   17. v1.3 – theme integration, layout options, borders, captions, scroll modes
   ========================================================================== */

/* ---- Fonts: bundled fonts when "Use Theme Fonts" is off ---------------- */
.sjpu-home.sjpu-own-fonts {
	--sjpu-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sjpu-font-head: "Merriweather", Georgia, "Times New Roman", serif;
	--sjpu-font-ui: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---- Full page width (removes left/right gaps of boxed themes) --------- */
.sjpu-home.sjpu-fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.sjpu-home.sjpu-fullbleed.is-bled {
	width: var(--sjpu-bleed-w, 100vw);
	max-width: none;
	margin-left: var(--sjpu-bleed-l, 0px);
	margin-right: 0;
}

body:has(.sjpu-fullbleed) {
	overflow-x: clip;
}

/* ---- Hero ---------------------------------------------------------------- */
.sjpu-home .sjpu-hero--nocontact {
	padding-bottom: 24px;
}

.sjpu-home .sjpu-hero__accent {
	color: var(--sjpu-accent, var(--sjpu-gold-deep));
}

.sjpu-home .sjpu-hero__accent .sjpu-word__in {
	background-image: linear-gradient(100deg, var(--sjpu-accent, var(--sjpu-gold-deep)) 0%, var(--sjpu-gold) 30%, #FFE08A 45%, var(--sjpu-gold) 60%, var(--sjpu-accent, var(--sjpu-gold-deep)) 100%);
}

/* ---- Panels: gradient shader, opacity, radius, gap, icon size ---------- */
.sjpu-home .sjpu-panels {
	gap: var(--sjpu-panel-gap, 16px);
}

.sjpu-home .sjpu-panel {
	--sjpu-pc-a: color-mix(in srgb, var(--sjpu-pc) 55%, transparent);
}

.sjpu-home .sjpu-panel__inner {
	border-radius: var(--sjpu-panel-r, 14px);
}

.sjpu-home .sjpu-panel__img {
	opacity: var(--sjpu-pimg-op, 1);
}

.sjpu-home .sjpu-panel__shade {
	opacity: var(--sjpu-shade-op, 1);
	background: linear-gradient(180deg,
		var(--sjpu-pc) 0%,
		var(--sjpu-pc) var(--sjpu-shade-solid, 30%),
		var(--sjpu-pc-a) var(--sjpu-shade-mid, 52%),
		transparent var(--sjpu-shade-end, 80%));
}

.sjpu-home .sjpu-panel__icon {
	width: var(--sjpu-picon, 76px);
	height: var(--sjpu-picon, 76px);
	background: rgba(255, 255, 255, var(--sjpu-picon-bg, .16));
	border-color: rgba(255, 255, 255, calc(var(--sjpu-picon-bg, .16) * 3));
}

.sjpu-home .sjpu-panel__icon .sjpu-3d {
	font-size: var(--sjpu-picon-i, 50px);
}

.sjpu-home .sjpu-panel__head {
	width: 100%;
}

@media (max-width: 1024px) {
	.sjpu-home .sjpu-panels {
		gap: var(--sjpu-panel-gap, 16px);
	}

	.sjpu-home .sjpu-panel {
		flex: 0 0 calc((100% - 2 * var(--sjpu-panel-gap, 16px)) / 3);
	}
}

@media (max-width: 767px) {
	.sjpu-home .sjpu-panels {
		gap: var(--sjpu-panel-gap, 12px);
	}

	.sjpu-home .sjpu-panel {
		flex: 0 0 calc((100% - var(--sjpu-panel-gap, 12px)) / 2);
	}

	.sjpu-home .sjpu-panel:last-child:nth-child(odd) {
		flex-basis: 100%;
	}

	.sjpu-home .sjpu-panel__icon {
		width: var(--sjpu-picon, 58px);
		height: var(--sjpu-picon, 58px);
	}

	.sjpu-home .sjpu-panel__icon .sjpu-3d {
		font-size: var(--sjpu-picon-i, 38px);
	}
}

/* ---- Landmark: "below" (photo, no overlap) and "overlap" (cut-out) ------ */
.sjpu-home.sjpu-land-below .sjpu-landmark--below {
	position: relative;
	z-index: 1;
	max-width: calc(var(--sjpu-land-w, 1200px) + 48px);
	margin: var(--sjpu-land-gap, 32px) auto 0;
	-webkit-mask-image: none;
	mask-image: none;
	pointer-events: auto;
}

.sjpu-home .sjpu-landmark__box {
	position: relative;
	height: var(--sjpu-land-h, 460px);
}

.sjpu-home.sjpu-fx .sjpu-landmark--below .sjpu-frame__in img {
	transform: translate3d(0, calc(var(--sjpu-sy, 0) * -36px), 0) scale(1.1);
}

.sjpu-home.sjpu-land-below .sjpu-contact {
	margin-top: 28px;
}

.sjpu-home.sjpu-land-overlap .sjpu-landmark--overlap {
	max-width: var(--sjpu-land-w, 1180px);
	margin-top: calc(var(--sjpu-panel-h) * var(--sjpu-land-ov, .4) * -1);
}

@media (max-width: 1024px) {
	.sjpu-home .sjpu-landmark__box {
		height: var(--sjpu-land-h, 340px);
	}

	.sjpu-home.sjpu-land-overlap .sjpu-landmark--overlap {
		margin-top: calc(var(--sjpu-panel-h) * var(--sjpu-land-ov, .4) * -.35);
	}
}

@media (max-width: 767px) {
	.sjpu-home .sjpu-landmark__box {
		height: var(--sjpu-land-h, 230px);
	}

	.sjpu-home.sjpu-land-below .sjpu-landmark--below {
		margin-top: var(--sjpu-land-gap, 20px);
	}

	.sjpu-home.sjpu-land-below .sjpu-contact {
		margin-top: 20px;
	}

	.sjpu-home.sjpu-land-overlap .sjpu-landmark--overlap {
		margin-top: 8px;
	}
}

/* ---- Contact bar ---------------------------------------------------------- */
.sjpu-home .sjpu-contact {
	border-radius: var(--sjpu-contact-r, 999px);
}

@media (max-width: 767px) {
	.sjpu-home .sjpu-contact {
		border-radius: var(--sjpu-contact-r, 20px);
	}
}

/* ---- About: image layouts (no overlap by default) ----------------------- */
.sjpu-home.sjpu-about--stacked .sjpu-about__media,
.sjpu-home.sjpu-about--side .sjpu-about__media,
.sjpu-home.sjpu-about--single .sjpu-about__media {
	display: grid;
	gap: 28px;
	padding: 0;
}

.sjpu-home.sjpu-about--side .sjpu-about__media {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.sjpu-home.sjpu-about--stacked .sjpu-about__img,
.sjpu-home.sjpu-about--side .sjpu-about__img,
.sjpu-home.sjpu-about--single .sjpu-about__img {
	width: 100%;
	margin: 0;
	aspect-ratio: 16 / 10;
}

.sjpu-home.sjpu-about--side .sjpu-about__img {
	aspect-ratio: 3 / 4;
}

.sjpu-home.sjpu-about--single .sjpu-about__img {
	aspect-ratio: 4 / 3;
}

.sjpu-home.sjpu-about--single .sjpu-about__img--2 {
	display: none;
}

.sjpu-home.sjpu-about--stacked .sjpu-about__badge,
.sjpu-home.sjpu-about--side .sjpu-about__badge,
.sjpu-home.sjpu-about--single .sjpu-about__badge {
	top: -24px;
	right: -14px;
	z-index: 4;
}

.sjpu-home.sjpu-about--stacked .sjpu-about__dots,
.sjpu-home.sjpu-about--side .sjpu-about__dots,
.sjpu-home.sjpu-about--single .sjpu-about__dots {
	left: -26px;
	bottom: -26px;
	z-index: -1;
}

.sjpu-home .sjpu-about__media {
	isolation: isolate;
}

@media (max-width: 767px) {
	.sjpu-home.sjpu-about--stacked .sjpu-about__media {
		gap: 20px;
	}

	.sjpu-home.sjpu-about--side .sjpu-about__media {
		gap: 12px;
	}

	.sjpu-home.sjpu-about--stacked .sjpu-about__badge,
	.sjpu-home.sjpu-about--side .sjpu-about__badge,
	.sjpu-home.sjpu-about--single .sjpu-about__badge {
		top: -16px;
		right: -6px;
	}

	.sjpu-home.sjpu-about--stacked .sjpu-about__dots,
	.sjpu-home.sjpu-about--side .sjpu-about__dots,
	.sjpu-home.sjpu-about--single .sjpu-about__dots {
		left: -12px;
		bottom: -12px;
	}
}

/* ---- Theme border (matches the college website) ------------------------- */
.sjpu-home .sjpu-frame--theme {
	border-radius: var(--sjpu-fr-r, 24px);
	background: var(--sjpu-fb-c, #FFFFFF);
	box-shadow: var(--sjpu-fshadow, 0 18px 40px -24px rgba(10, 26, 63, .35));
}

.sjpu-home .sjpu-frame--theme .sjpu-frame__in {
	inset: var(--sjpu-fb-w, 6px);
	border-radius: max(0px, calc(var(--sjpu-fr-r, 24px) - var(--sjpu-fb-w, 6px)));
}

.sjpu-home .sjpu-campus__panel .sjpu-frame--theme,
.sjpu-home .sjpu-principal__card .sjpu-frame--theme,
.sjpu-home .sjpu-cta .sjpu-frame--theme {
	background: var(--sjpu-fb-dark, rgba(255, 255, 255, .12));
	box-shadow: none;
}

.sjpu-home .sjpu-frame--theme + figcaption {
	left: var(--sjpu-fb-w, 6px);
	right: var(--sjpu-fb-w, 6px);
	bottom: var(--sjpu-fb-w, 6px);
	border-radius: 0 0 max(0px, calc(var(--sjpu-fr-r, 24px) - var(--sjpu-fb-w, 6px))) max(0px, calc(var(--sjpu-fr-r, 24px) - var(--sjpu-fb-w, 6px)));
}

.sjpu-home .sjpu-frame--theme ~ .sjpu-event__shade {
	left: var(--sjpu-fb-w, 6px);
	right: var(--sjpu-fb-w, 6px);
	bottom: var(--sjpu-fb-w, 6px);
	border-radius: 0 0 max(0px, calc(var(--sjpu-fr-r, 24px) - var(--sjpu-fb-w, 6px))) max(0px, calc(var(--sjpu-fr-r, 24px) - var(--sjpu-fb-w, 6px)));
}

/* ---- Cards & gallery sizing ---------------------------------------------- */
.sjpu-home .sjpu-cards {
	grid-auto-rows: minmax(var(--sjpu-card-h, 220px), 1fr);
}

.sjpu-home .sjpu-card {
	min-height: var(--sjpu-card-h, 220px);
}

.sjpu-home .sjpu-gallery__grid {
	gap: var(--sjpu-gal-gap, 24px);
	grid-auto-rows: var(--sjpu-gal-row, 230px);
}

.sjpu-home .sjpu-gallery__grid--1{ grid-auto-rows: var(--sjpu-gal-row, 380px); }
.sjpu-home .sjpu-gallery__grid--2{ grid-auto-rows: var(--sjpu-gal-row, 300px); }

@media (max-width: 1024px) {
	.sjpu-home .sjpu-cards {
		grid-auto-rows: auto;
	}

	.sjpu-home .sjpu-gallery__grid,
	.sjpu-home .sjpu-gallery__grid--4,
	.sjpu-home .sjpu-gallery__grid--5 {
		grid-auto-rows: var(--sjpu-gal-row, 200px);
	}
}

@media (max-width: 767px) {
	.sjpu-home .sjpu-gallery__grid,
	.sjpu-home .sjpu-gallery__grid--2,
	.sjpu-home .sjpu-gallery__grid--4,
	.sjpu-home .sjpu-gallery__grid--5 {
		gap: var(--sjpu-gal-gap, 14px);
		grid-auto-rows: var(--sjpu-gal-row, 160px);
	}

	.sjpu-home .sjpu-gallery__grid--1 {
		grid-auto-rows: var(--sjpu-gal-row, 240px);
	}
}

/* ---- Captions: plain text on image (theme style, no coloured boxes) ----- */
.sjpu-home.sjpu-caption-plain .sjpu-card figcaption,
.sjpu-home.sjpu-caption-plain .sjpu-gallery__item figcaption {
	left: 0;
	right: 0;
	bottom: 0;
	max-width: none;
	padding: 72px 24px 22px;
	border-radius: 0 0 var(--sjpu-fr-r, 24px) var(--sjpu-fr-r, 24px);
	background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--sjpu-navy) calc(var(--sjpu-cap-op, .85) * 100%), transparent) 100%);
	color: #FFFFFF;
	font-family: var(--sjpu-font-head);
	font-size: clamp(19px, 1.9vw, 28px);
	font-style: normal;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
	transform: none;
}

.sjpu-home.sjpu-caption-plain .sjpu-gallery__item figcaption {
	padding: 56px 18px 16px;
	font-size: clamp(16px, 1.4vw, 20px);
}

.sjpu-home.sjpu-caption-plain .sjpu-card figcaption::before {
	display: none;
}

.sjpu-home.sjpu-caption-plain .sjpu-gallery__item:hover figcaption,
.sjpu-home.sjpu-caption-plain .sjpu-card:hover figcaption {
	background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--sjpu-navy) calc(var(--sjpu-cap-op, .85) * 100%), transparent) 100%);
	color: #FFFFFF;
	transform: none;
}

.sjpu-home.sjpu-caption-plain .sjpu-frame--theme + figcaption {
	left: var(--sjpu-fb-w, 6px);
	right: var(--sjpu-fb-w, 6px);
	bottom: var(--sjpu-fb-w, 6px);
	border-radius: 0 0 max(0px, calc(var(--sjpu-fr-r, 24px) - var(--sjpu-fb-w, 6px))) max(0px, calc(var(--sjpu-fr-r, 24px) - var(--sjpu-fb-w, 6px)));
}

.sjpu-home .sjpu-event__shade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	height: 55%;
	border-radius: 0 0 var(--sjpu-fr-r, 24px) var(--sjpu-fr-r, 24px);
	background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--sjpu-navy) 78%, transparent) 100%);
	pointer-events: none;
}

.sjpu-home.sjpu-caption-pill .sjpu-event__shade {
	display: none;
}

.sjpu-home.sjpu-caption-plain .sjpu-event__date {
	left: 22px;
	bottom: 18px;
	gap: 8px;
	padding: 0;
	border-radius: 0;
	background: none;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

@media (max-width: 767px) {
	.sjpu-home.sjpu-caption-plain .sjpu-card figcaption {
		padding: 56px 18px 16px;
		font-size: 20px;
	}

	.sjpu-home.sjpu-caption-plain .sjpu-gallery__item figcaption {
		padding: 40px 12px 10px;
		font-size: 14px;
	}
}

/* ---- Name band ------------------------------------------------------------ */
.sjpu-home .sjpu-marquee__sep {
	width: var(--sjpu-mq-sep, clamp(48px, 5vw, 78px));
	height: var(--sjpu-mq-sep, clamp(48px, 5vw, 78px));
}

.sjpu-home .sjpu-marquee__row--outline .sjpu-marquee__sep {
	width: calc(var(--sjpu-mq-sep, 64px) * .6);
	height: calc(var(--sjpu-mq-sep, 64px) * .6);
}

/* ---- CTA buttons follow the CTA alignment -------------------------------- */
.sjpu-home .sjpu-cta__btns {
	justify-content: var(--sjpu-justify, flex-start);
}

/* ---- Theme-proofing: stop theme heading/link/button styles leaking in ---- */
.sjpu-home :is(.sjpu-title, .sjpu-hero__title, .sjpu-event__title, .sjpu-notice__title, .sjpu-brand__name, .sjpu-panel__title, .sjpu-principal__quote p, .sjpu-card figcaption, .sjpu-gallery__item figcaption) {
	text-transform: none;
	letter-spacing: normal;
}

.sjpu-home .sjpu-hero__title {
	letter-spacing: -.005em;
}

.sjpu-home .sjpu-tab:focus:not(.is-active) {
	background-color: rgba(255, 255, 255, .06);
	color: #FFFFFF;
}

.sjpu-home .sjpu-tab:focus {
	outline: none;
}

.sjpu-home .sjpu-tab:focus-visible {
	outline: 3px solid var(--sjpu-gold);
	outline-offset: 3px;
}

/* ---- Per-section "No animation" ------------------------------------------- */
.sjpu-home.sjpu-anim.sjpu-js .sjpu-noanim .sjpu-reveal.sjpu-reveal:not(.sjpu-panel),
.sjpu-home.sjpu-anim.sjpu-js .sjpu-noanim .sjpu-reveal.sjpu-reveal.is-visible {
	opacity: 1;
	translate: none;
	scale: none;
	rotate: none;
	filter: none;
	transition: none;
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-noanim .sjpu-reveal--clip .sjpu-frame__in::before,
.sjpu-home.sjpu-anim.sjpu-js .sjpu-noanim .sjpu-reveal--clip .sjpu-frame__in::after {
	display: none;
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-noanim .sjpu-reveal--clip .sjpu-frame__in img {
	scale: none;
}

.sjpu-home.sjpu-anim.sjpu-js .sjpu-noanim .sjpu-split .sjpu-word__in {
	translate: none;
	rotate: none;
	transition: none;
}

/* ---- "Play with the scroll" mode (scrubbing; JS sets --sjpu-p 0→1) ------ */
.sjpu-home.sjpu-anim.sjpu-js.sjpu-scrub .sjpu-reveal.sjpu-reveal:not(.sjpu-reveal--clip):not(.sjpu-split) {
	--sjpu-q: calc(1 - var(--sjpu-p, 0));
	opacity: var(--sjpu-p, 0);
	translate: calc(var(--rv-x) * var(--sjpu-q)) calc(var(--rv-y) * var(--sjpu-q));
	scale: calc(1 - (1 - var(--rv-s)) * var(--sjpu-q));
	rotate: x calc(var(--rv-r) * var(--sjpu-q));
	filter: blur(calc(var(--rv-b) * var(--sjpu-q)));
	transition: none;
}

.sjpu-home.sjpu-anim.sjpu-js.sjpu-scrub .sjpu-reveal--rise.sjpu-reveal--rise {
	translate: 0 calc(var(--sjpu-dist, 34px) * 2.6 * (1 - var(--sjpu-p, 0)));
	scale: calc(1 - .06 * (1 - var(--sjpu-p, 0)));
}

.sjpu-home.sjpu-anim.sjpu-js.sjpu-scrub .sjpu-reveal--right.sjpu-reveal--right {
	translate: calc(var(--sjpu-dist, 34px) * 1.6 * (1 - var(--sjpu-p, 0))) 0;
}

.sjpu-home.sjpu-anim.sjpu-js.sjpu-scrub .sjpu-reveal--clip.sjpu-reveal--clip .sjpu-frame__in::after {
	transform: scaleY(max(0, calc(1 - var(--sjpu-p, 0) * 1.6)));
	transition: none;
}

.sjpu-home.sjpu-anim.sjpu-js.sjpu-scrub .sjpu-reveal--clip.sjpu-reveal--clip .sjpu-frame__in::before {
	transform: scaleY(calc(1 - var(--sjpu-p, 0)));
	transition: none;
}

.sjpu-home.sjpu-anim.sjpu-js.sjpu-scrub .sjpu-reveal--clip.sjpu-reveal--clip .sjpu-frame__in img {
	scale: calc(1 + .18 * (1 - var(--sjpu-p, 0)));
	transition: none;
}

.sjpu-home.sjpu-anim.sjpu-js.sjpu-scrub .sjpu-split.sjpu-split .sjpu-word__in {
	translate: 0 calc(110% * (1 - var(--sjpu-p, 0)));
	rotate: calc(8deg * (1 - var(--sjpu-p, 0)));
	transition: none;
}