/*!
 * St. Joseph's School theme – page banner, 3D layer and shared creative effects (extends sjbs-base.css)
 * Version 1.1.0
 */

/* ==========================================================================
   1. Page banner
   ========================================================================== */
.sjbs-home .sjbs-banner {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 380px;
	padding: 88px 0 96px;
	overflow: hidden;
	background: linear-gradient(118deg, var(--sjbs-navy) 0%, #0D2A66 52%, #1340A8 120%);
	color: #FFFFFF;
}

.sjbs-home .sjbs-banner--has-divider {
	padding-bottom: 130px;
}

.sjbs-home .sjbs-banner__bgimg {
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	animation: sjbs-kenburns calc(26s * var(--sjbs-amb, 1)) ease-in-out infinite alternate;
}

.sjbs-home .sjbs-banner__shade {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(95deg, rgba(10, 26, 63, .96) 0%, rgba(10, 26, 63, .82) 50%, rgba(10, 26, 63, .55) 100%);
}

.sjbs-home .sjbs-banner__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(520px 380px at 88% 18%, rgba(29, 78, 216, .55), transparent 70%),
		radial-gradient(420px 300px at 6% 110%, rgba(242, 184, 39, .2), transparent 70%);
	animation: sjbs-banner-glow calc(14s * var(--sjbs-amb, 1)) ease-in-out infinite alternate;
	pointer-events: none;
}

.sjbs-home .sjbs-banner__pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .16) 1.4px, transparent 1.6px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 45%, #000 80%);
	mask-image: linear-gradient(100deg, transparent 0%, transparent 45%, #000 80%);
	animation: sjbs-banner-dots calc(40s * var(--sjbs-amb, 1)) linear infinite;
	pointer-events: none;
}

.sjbs-home .sjbs-banner__sweep {
	position: absolute;
	top: -50%;
	bottom: -50%;
	left: -30%;
	z-index: 0;
	width: 22%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
	transform: rotate(18deg);
	animation: sjbs-banner-sweep calc(9s * var(--sjbs-amb, 1)) ease-in-out infinite;
	pointer-events: none;
}

.sjbs-home .sjbs-banner__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
	align-items: center;
	gap: 48px;
}

.sjbs-home .sjbs-banner--none .sjbs-banner__inner {
	grid-template-columns: minmax(0, 1fr);
}

.sjbs-home .sjbs-banner__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	min-width: 0;
}

/* Breadcrumb */
.sjbs-home .sjbs-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sjbs-home .sjbs-crumbs li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sjbs-font-ui);
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, .85);
}

.sjbs-home .sjbs-crumbs a {
	color: #FFFFFF;
	background-image: linear-gradient(var(--sjbs-gold), var(--sjbs-gold));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1.5px;
	transition: color .3s ease, background-size .35s ease;
}

.sjbs-home .sjbs-crumbs a:hover,
.sjbs-home .sjbs-crumbs a:focus-visible {
	color: var(--sjbs-gold);
	background-size: 100% 1.5px;
}

.sjbs-home .sjbs-crumbs__sep {
	display: inline-grid;
	color: var(--sjbs-gold);
	font-size: 12px;
}

.sjbs-home .sjbs-crumbs [aria-current="page"] {
	color: rgba(255, 255, 255, .78);
}

/* Title */
.sjbs-home .sjbs-banner__title {
	margin: 16px 0 0;
	font-family: var(--sjbs-font-head);
	font-size: clamp(36px, 5.2vw, 66px);
	font-weight: 700;
	line-height: 1.08;
	color: #FFFFFF;
	overflow-wrap: anywhere;
}

.sjbs-home .sjbs-lw {
	display: inline-block;
	white-space: nowrap;
}

.sjbs-home .sjbs-l {
	display: inline-block;
}

.sjbs-home .sjbs-banner__line {
	display: block;
	width: min(260px, 60%);
	height: 2px;
	margin: 20px 0 22px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--sjbs-gold) 0%, var(--sjbs-gold) 30%, rgba(255, 255, 255, .35) 30.5%, rgba(255, 255, 255, 0) 100%);
	transform-origin: 0 50%;
}

.sjbs-home .sjbs-banner__desc {
	max-width: 580px;
	font-size: 16.5px;
	line-height: 1.75;
	color: rgba(255, 255, 255, .86);
}

.sjbs-home .sjbs-banner__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

/* Right-side visual */
.sjbs-home .sjbs-banner__visual {
	position: relative;
	justify-self: end;
	width: var(--sjbs-bn-vis, 300px);
	max-width: 100%;
	aspect-ratio: 1 / 1;
}

.sjbs-home .sjbs-emblem {
	position: absolute;
	inset: 0;
	display: block;
}

.sjbs-home .sjbs-emblem__ring {
	position: absolute;
	border-radius: 50%;
}

.sjbs-home .sjbs-emblem__ring--1 {
	inset: 0;
	border: 1.5px dashed rgba(255, 255, 255, .28);
	animation: sjbs-spin calc(40s * var(--sjbs-amb, 1)) linear infinite;
}

.sjbs-home .sjbs-emblem__ring--2 {
	inset: 12%;
	border: 1px solid rgba(242, 184, 39, .45);
	animation: sjbs-spin calc(28s * var(--sjbs-amb, 1)) linear infinite reverse;
}

.sjbs-home .sjbs-emblem__ring--3 {
	inset: 24%;
	border: 1px dashed rgba(255, 255, 255, .22);
	animation: sjbs-spin calc(18s * var(--sjbs-amb, 1)) linear infinite;
}

.sjbs-home .sjbs-emblem__orbit {
	position: absolute;
	inset: 6%;
	animation: sjbs-spin calc(12s * var(--sjbs-amb, 1)) linear infinite;
}

.sjbs-home .sjbs-emblem__orbit i {
	position: absolute;
	top: -6px;
	left: 50%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 50%;
	background: var(--sjbs-gold);
	box-shadow: 0 0 18px 4px rgba(242, 184, 39, .55);
}

.sjbs-home .sjbs-emblem__core {
	position: absolute;
	inset: 31%;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06) 70%);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
	animation: sjbs-float calc(6s * var(--sjbs-amb, 1)) ease-in-out infinite;
}

.sjbs-home .sjbs-emblem__core .sjbs-3d {
	font-size: calc(var(--sjbs-bn-vis, 300px) * .24);
	filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35));
}

.sjbs-home .sjbs-emblem__tile {
	position: absolute;
	border: 2px solid rgba(255, 255, 255, .35);
	border-radius: 6px;
}

.sjbs-home .sjbs-emblem__tile--a {
	top: 8%;
	right: 4%;
	width: 18%;
	height: 18%;
	border-color: rgba(242, 184, 39, .6);
	transform: rotate(18deg);
	animation: sjbs-tile calc(7s * var(--sjbs-amb, 1)) ease-in-out infinite;
}

.sjbs-home .sjbs-emblem__tile--b {
	bottom: 6%;
	left: 2%;
	width: 12%;
	height: 12%;
	background: rgba(255, 255, 255, .08);
	transform: rotate(-12deg);
	animation: sjbs-tile calc(9s * var(--sjbs-amb, 1)) ease-in-out infinite reverse;
}

.sjbs-home .sjbs-banner__photo {
	position: absolute;
	inset: 8% 0;
	display: block;
	transform: rotate(-3deg);
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.sjbs-home .sjbs-banner__visual:hover .sjbs-banner__photo {
	transform: rotate(0) scale(1.02);
}

.sjbs-home .sjbs-banner__photo .sjbs-frame--theme {
	background: rgba(255, 255, 255, .9);
}

.sjbs-home .sjbs-banner__logo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: contain;
	filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35));
	animation: sjbs-float calc(6s * var(--sjbs-amb, 1)) ease-in-out infinite;
}

.sjbs-home .sjbs-banner__divider {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 2;
	display: block;
	height: 72px;
	color: #F5F4EF;
	pointer-events: none;
}

.sjbs-home .sjbs-banner__divider svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Banner animations: letters, underline draw */
.sjbs-home.sjbs-anim.sjbs-js .sjbs-letters,
.sjbs-home.sjbs-anim.sjbs-js .sjbs-letters:not(.is-visible) {
	opacity: 1;
	translate: none;
	scale: none;
	rotate: none;
	filter: none;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-letters .sjbs-l {
	opacity: 0;
	translate: 0 .55em;
	rotate: x 70deg;
	filter: blur(6px);
	transform-origin: 50% 100%;
	transition: opacity calc(var(--sjbs-dur, 900ms) * .7) ease, translate var(--sjbs-dur, 900ms) cubic-bezier(.2, .85, .25, 1), rotate var(--sjbs-dur, 900ms) cubic-bezier(.2, .85, .25, 1), filter calc(var(--sjbs-dur, 900ms) * .7) ease;
	transition-delay: calc(var(--sjbs-base-delay, 0ms) + var(--l, 0) * 45ms + 150ms);
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-letters.is-visible .sjbs-l {
	opacity: 1;
	translate: 0 0;
	rotate: x 0deg;
	filter: none;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-banner__line {
	opacity: 1;
	translate: none;
	scale: 0 1;
	transition: scale calc(var(--sjbs-dur, 900ms) * 1.4) cubic-bezier(.65, 0, .35, 1) calc(var(--sjbs-base-delay, 0ms) + 500ms);
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-banner__line.is-visible {
	scale: 1 1;
}

/* No animation / scroll-linked mode: show letters and line directly */
.sjbs-home.sjbs-anim.sjbs-js .sjbs-noanim .sjbs-letters .sjbs-l,
.sjbs-home.sjbs-anim.sjbs-js.sjbs-scrub .sjbs-letters .sjbs-l {
	opacity: 1;
	translate: none;
	rotate: none;
	filter: none;
	transition: none;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-noanim .sjbs-banner__line,
.sjbs-home.sjbs-anim.sjbs-js.sjbs-scrub .sjbs-banner__line {
	scale: 1 1;
	transition: none;
}

/* ==========================================================================
   2. About layout + sticky sidebar
   ========================================================================== */
.sjbs-home .sjbs-ab {
	position: relative;
}

.sjbs-home .sjbs-ab__grid {
	display: grid;
	grid-template-columns: var(--sjbs-side-w, 290px) minmax(0, 1fr);
	align-items: start;
	gap: var(--sjbs-ab-gap, 56px);
}

.sjbs-home.sjbs-ab--side-right .sjbs-ab__grid {
	grid-template-columns: minmax(0, 1fr) var(--sjbs-side-w, 290px);
}

.sjbs-home.sjbs-ab--side-right .sjbs-ab__side {
	order: 2;
}

.sjbs-home.sjbs-ab--side-none .sjbs-ab__grid {
	grid-template-columns: minmax(0, 1fr);
	max-width: 980px;
}

.sjbs-home .sjbs-ab__side {
	min-width: 0;
	align-self: stretch;
}

.sjbs-home .sjbs-ab__sticky {
	position: sticky;
	top: var(--sjbs-sticky, 110px);
	display: grid;
	gap: 20px;
}

.sjbs-home .sjbs-ab-card {
	padding: 24px;
	border: 1px solid rgba(10, 26, 63, .06);
	border-radius: 22px;
	background: #FFFFFF;
	box-shadow: 0 24px 50px -32px rgba(10, 26, 63, .35);
}

.sjbs-home .sjbs-ab-card__title {
	position: relative;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(10, 26, 63, .1);
	font-family: var(--sjbs-font-head);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sjbs-navy);
}

.sjbs-home .sjbs-ab-card__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 56px;
	height: 3px;
	border-radius: 3px;
	background: var(--sjbs-gold);
}

.sjbs-home .sjbs-ab-nav {
	display: grid;
	gap: 10px;
}

.sjbs-home .sjbs-ab-nav__link {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	overflow: hidden;
	padding: 13px 16px;
	border-radius: 12px;
	background-color: #F3F5FA;
	color: var(--sjbs-navy);
	font-family: var(--sjbs-font-ui);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	transition: color .35s ease, background-color .35s ease, translate .6s cubic-bezier(.2, .8, .2, 1), opacity .6s ease;
}

.sjbs-home .sjbs-ab-nav__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, var(--sjbs-navy), #13306E);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.sjbs-home .sjbs-ab-nav__link .sjbs-svg-icon {
	font-size: 16px;
	transition: transform .35s ease, color .35s ease;
}

.sjbs-home .sjbs-ab-nav__link:hover,
.sjbs-home .sjbs-ab-nav__link:focus-visible,
.sjbs-home .sjbs-ab-nav__link.is-current {
	color: #FFFFFF;
}

.sjbs-home .sjbs-ab-nav__link:hover::before,
.sjbs-home .sjbs-ab-nav__link:focus-visible::before,
.sjbs-home .sjbs-ab-nav__link.is-current::before {
	transform: scaleX(1);
}

.sjbs-home .sjbs-ab-nav__link:hover .sjbs-svg-icon,
.sjbs-home .sjbs-ab-nav__link.is-current .sjbs-svg-icon {
	color: var(--sjbs-gold);
	transform: translateX(4px);
}

.sjbs-home .sjbs-ab-nav__link.is-static {
	cursor: default;
}

/* Menu items slide in one after another */
.sjbs-home.sjbs-anim.sjbs-js .sjbs-ab-card .sjbs-ab-nav__link {
	opacity: 0;
	translate: -18px 0;
	transition-delay: 0s, 0s, calc(var(--sjbs-base-delay, 0ms) + 250ms + var(--sjbs-i, 0) * 90ms), calc(var(--sjbs-base-delay, 0ms) + 250ms + var(--sjbs-i, 0) * 90ms);
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-ab-card.is-visible .sjbs-ab-nav__link,
.sjbs-home.sjbs-anim.sjbs-js.sjbs-scrub .sjbs-ab-card .sjbs-ab-nav__link,
.sjbs-home.sjbs-anim.sjbs-js .sjbs-noanim .sjbs-ab-card .sjbs-ab-nav__link {
	opacity: 1;
	translate: 0 0;
}

.sjbs-home .sjbs-ab-card__img {
	position: relative;
	height: var(--sjbs-side-img-h, 170px);
	margin: 20px 0 0;
}

.sjbs-home .sjbs-ab-help {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 24px;
	border-radius: 22px;
	background: linear-gradient(140deg, var(--sjbs-navy), #13306E 70%, var(--sjbs-royal) 140%);
	color: rgba(255, 255, 255, .85);
	box-shadow: 0 24px 50px -30px rgba(10, 26, 63, .55);
}

.sjbs-home .sjbs-ab-help__icon .sjbs-3d {
	font-size: 46px;
}

.sjbs-home .sjbs-ab-help__title {
	font-family: var(--sjbs-font-head);
	font-size: 19px;
	color: #FFFFFF;
}

.sjbs-home .sjbs-ab-help__text {
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.6;
}

/* ==========================================================================
   3. Main content blocks
   ========================================================================== */
.sjbs-home .sjbs-ab__main {
	display: grid;
	gap: var(--sjbs-main-gap, 56px);
	min-width: 0;
}

.sjbs-home .sjbs-ab-block {
	min-width: 0;
	scroll-margin-top: 120px;
}

.sjbs-home .sjbs-ab-block .sjbs-lead {
	max-width: var(--sjbs-p-max, none);
	margin-top: var(--sjbs-p-gap, 16px);
	font-size: 16px;
	line-height: 1.85;
}

.sjbs-home .sjbs-ab .sjbs-title {
	margin: 8px 0 0;
}

.sjbs-home .sjbs-ab-h::after {
	content: "";
	display: block;
	width: var(--sjbs-uline-w, 64px);
	height: var(--sjbs-uline-h, 3px);
	margin: 14px var(--sjbs-uline-mr, auto) 0 var(--sjbs-uline-ml, 0);
	border-radius: 3px;
	background: var(--sjbs-gold);
	transform-origin: 0 50%;
	transition: transform calc(var(--sjbs-dur, 900ms) * 1.2) cubic-bezier(.65, 0, .35, 1) calc(var(--sjbs-base-delay, 0ms) + 350ms);
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-ab-h.sjbs-reveal:not(.is-visible):not(.sjbs-ab-h--still)::after {
	transform: scaleX(0);
}

/* Two images */
.sjbs-home .sjbs-ab-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sjbs-pair-gap, 24px);
}

.sjbs-home .sjbs-ab-pair__item {
	position: relative;
	height: var(--sjbs-pair-h, 300px);
	margin: 0;
}

/* Vision panel */
.sjbs-home .sjbs-ab-vision {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 34px;
	padding: 44px;
	overflow: hidden;
	border-radius: 26px;
	background: linear-gradient(135deg, var(--sjbs-navy) 0%, #13306E 60%, var(--sjbs-royal) 140%);
	color: rgba(255, 255, 255, .86);
	scroll-margin-top: 120px;
}

.sjbs-home .sjbs-ab-vision__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(380px 260px at 100% 0%, rgba(242, 184, 39, .22), transparent 70%),
		radial-gradient(300px 220px at 0% 100%, rgba(29, 78, 216, .45), transparent 70%);
	pointer-events: none;
}

.sjbs-home .sjbs-ab-vision__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--sjbs-vis-icon, 124px);
	height: var(--sjbs-vis-icon, 124px);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
	animation: sjbs-float calc(6s * var(--sjbs-amb, 1)) ease-in-out infinite;
}

.sjbs-home .sjbs-ab-vision__icon::after {
	content: "";
	position: absolute;
	inset: -10px;
	border: 1.5px dashed rgba(242, 184, 39, .55);
	border-radius: 50%;
	animation: sjbs-spin calc(20s * var(--sjbs-amb, 1)) linear infinite;
}

.sjbs-home .sjbs-ab-vision__icon .sjbs-3d {
	font-size: calc(var(--sjbs-vis-icon, 124px) * .62);
}

.sjbs-home .sjbs-ab-vision__body p {
	margin-top: 14px;
	font-size: 15.5px;
	line-height: 1.85;
	color: rgba(255, 255, 255, .86);
}

/* Feature cards */
.sjbs-home .sjbs-ab-feats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sjbs-feat-gap, 26px);
	padding-top: calc(var(--sjbs-feat-icon, 84px) / 2);
}

.sjbs-home .sjbs-ab-feat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: calc(var(--sjbs-feat-icon, 84px) / 2 + 18px) 24px 30px;
	border: 1px solid rgba(10, 26, 63, .06);
	border-radius: 20px;
	background-color: #FFFFFF;
	text-align: center;
	box-shadow: 0 20px 44px -32px rgba(10, 26, 63, .4);
	transition: box-shadow .4s ease, transform .4s ease;
}

.sjbs-home .sjbs-ab-feat:hover {
	transform: translateY(calc(var(--sjbs-lift, 8px) * -1));
	box-shadow: 0 30px 56px -30px rgba(10, 26, 63, .5);
}

.sjbs-home .sjbs-ab-feat__icon {
	position: absolute;
	top: 0;
	left: 50%;
	display: grid;
	place-items: center;
	width: var(--sjbs-feat-icon, 84px);
	height: var(--sjbs-feat-icon, 84px);
	border-radius: 50%;
	background-color: #FFFFFF;
	box-shadow: 0 14px 30px -14px rgba(10, 26, 63, .45);
	transform: translate(-50%, -50%);
	transition: transform .5s cubic-bezier(.3, 1.6, .5, 1);
}

.sjbs-home .sjbs-ab-feat__icon::before {
	content: "";
	position: absolute;
	inset: -7px;
	border: 1.5px dashed rgba(242, 184, 39, .7);
	border-radius: 50%;
	opacity: 0;
	transition: opacity .3s ease;
	animation: sjbs-spin calc(14s * var(--sjbs-amb, 1)) linear infinite;
}

.sjbs-home .sjbs-ab-feat:hover .sjbs-ab-feat__icon {
	transform: translate(-50%, -58%) rotate(-6deg);
}

.sjbs-home .sjbs-ab-feat:hover .sjbs-ab-feat__icon::before {
	opacity: 1;
}

.sjbs-home .sjbs-ab-feat__icon .sjbs-3d {
	font-size: calc(var(--sjbs-feat-icon, 84px) * var(--sjbs-feat-icon-in, 60) / 100);
}

.sjbs-home .sjbs-ab-feat__title {
	margin: 0;
	font-family: var(--sjbs-font-head);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sjbs-navy);
}

.sjbs-home .sjbs-ab-feat__text {
	margin-top: 10px;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--sjbs-text);
}

.sjbs-home .sjbs-ab-feat__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
}

/* Campus video */
.sjbs-home .sjbs-ab-video {
	position: relative;
	height: var(--sjbs-video-h, 470px);
	margin: 26px 0 0;
}

.sjbs-home .sjbs-ab-video .sjbs-play {
	z-index: 8;
	width: var(--sjbs-play, 84px);
	height: var(--sjbs-play, 84px);
	border-radius: 50%;
	background-color: var(--sjbs-gold);
	color: var(--sjbs-navy);
	font-size: calc(var(--sjbs-play, 84px) * .36);
	box-shadow: 0 0 0 12px rgba(255, 255, 255, .28);
	transition: opacity .5s ease, scale .5s cubic-bezier(.3, 1.6, .5, 1), transform .35s ease;
}

.sjbs-home .sjbs-ab-video .sjbs-play:hover,
.sjbs-home .sjbs-ab-video .sjbs-play:focus-visible {
	background-color: #FFFFFF;
	color: var(--sjbs-navy);
}

.sjbs-home .sjbs-ab-video .sjbs-play.is-static {
	cursor: default;
}

.sjbs-home.sjbs-ov-ready .sjbs-ab-video:has([data-ov]:not(.ov-done)) .sjbs-play {
	opacity: 0;
	scale: .5;
}

.sjbs-home .sjbs-ab-video__cap {
	position: absolute;
	left: var(--sjbs-fb-w, 6px);
	right: var(--sjbs-fb-w, 6px);
	bottom: var(--sjbs-fb-w, 6px);
	z-index: 7;
	padding: 70px 26px 22px;
	border-radius: 0 0 calc(var(--sjbs-fr-r, 24px) - var(--sjbs-fb-w, 6px)) calc(var(--sjbs-fr-r, 24px) - var(--sjbs-fb-w, 6px));
	background: linear-gradient(transparent, rgba(10, 26, 63, .85));
	color: #FFFFFF;
	font-family: var(--sjbs-font-head);
	font-size: 22px;
	font-weight: 700;
	pointer-events: none;
}

/* ==========================================================================
   4. Pop-up (video / image) – appended to <body>
   ========================================================================== */
body .sjbs-lb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(5, 12, 30, .9);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}

body .sjbs-lb.is-open {
	opacity: 1;
	visibility: visible;
}

body .sjbs-lb__box {
	position: relative;
	width: min(1100px, 100%);
	transform: scale(.94);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

body .sjbs-lb.is-open .sjbs-lb__box {
	transform: none;
}

body .sjbs-lb__media {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	background: #000000;
}

body .sjbs-lb__media--video {
	aspect-ratio: 16 / 9;
}

body .sjbs-lb__media iframe,
body .sjbs-lb__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

body .sjbs-lb__media img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 86vh;
	margin: 0 auto;
}

body .sjbs-lb .sjbs-lb__close {
	position: absolute;
	top: -54px;
	right: 0;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #FFFFFF;
	color: #0A1A3F;
	font-size: 24px;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
}

body .sjbs-lb .sjbs-lb__close:hover,
body .sjbs-lb .sjbs-lb__close:focus-visible {
	background: #F2B827;
	color: #0A1A3F;
}

html.sjbs-lb-open {
	overflow: hidden;
}

/* ==========================================================================
   5. Keyframes
   ========================================================================== */
@keyframes sjbs-banner-glow {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(-40px, 20px) scale(1.08); }
}

@keyframes sjbs-banner-dots {
	from { background-position: 0 0; }
	to   { background-position: 220px 110px; }
}

@keyframes sjbs-banner-sweep {
	0%, 55% { left: -30%; }
	100%    { left: 130%; }
}

@keyframes sjbs-tile {
	0%, 100% { translate: 0 0; rotate: 0deg; }
	50%      { translate: 0 -12px; rotate: 8deg; }
}

/* Looping effects off */
.sjbs-home.sjbs-noloop .sjbs-banner__bgimg,
.sjbs-home.sjbs-noloop .sjbs-banner__glow,
.sjbs-home.sjbs-noloop .sjbs-banner__pattern,
.sjbs-home.sjbs-noloop .sjbs-banner__sweep,
.sjbs-home.sjbs-noloop .sjbs-emblem__ring,
.sjbs-home.sjbs-noloop .sjbs-emblem__orbit,
.sjbs-home.sjbs-noloop .sjbs-emblem__core,
.sjbs-home.sjbs-noloop .sjbs-emblem__tile,
.sjbs-home.sjbs-noloop .sjbs-banner__logo,
.sjbs-home.sjbs-noloop .sjbs-ab-vision__icon,
.sjbs-home.sjbs-noloop .sjbs-ab-vision__icon::after,
.sjbs-home.sjbs-noloop .sjbs-ab-feat__icon::before {
	animation: none !important;
}

/* ==========================================================================
   6. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.sjbs-home .sjbs-banner {
		min-height: 320px;
		padding: 70px 0 78px;
	}

	.sjbs-home .sjbs-banner__inner {
		gap: 30px;
	}

	.sjbs-home .sjbs-banner__visual {
		width: min(var(--sjbs-bn-vis, 230px), 230px);
	}

	.sjbs-home .sjbs-ab__grid,
	.sjbs-home.sjbs-ab--side-right .sjbs-ab__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.sjbs-home.sjbs-ab--side-right .sjbs-ab__side {
		order: 0;
	}

	.sjbs-home .sjbs-ab__sticky {
		position: static;
	}

	.sjbs-home .sjbs-ab-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: 0 24px;
	}

	.sjbs-home .sjbs-ab-card__title {
		grid-column: 1 / -1;
	}

	.sjbs-home .sjbs-ab-card__img {
		margin: 0;
		height: 100%;
		min-height: var(--sjbs-side-img-h, 180px);
	}

	.sjbs-home .sjbs-ab-vision {
		padding: 34px;
		gap: 26px;
	}

	.sjbs-home .sjbs-ab-video {
		height: var(--sjbs-video-h, 380px);
	}


}

@media (max-width: 767px) {
	.sjbs-home .sjbs-banner {
		min-height: 260px;
		padding: 54px 0 60px;
	}

	.sjbs-home .sjbs-banner--has-divider {
		padding-bottom: 86px;
	}

	.sjbs-home .sjbs-banner__divider {
		height: 40px;
	}

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

	.sjbs-home .sjbs-banner__visual {
		display: none;
	}

	.sjbs-home .sjbs-banner__desc {
		font-size: 15px;
	}

	.sjbs-home .sjbs-ab-card {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px;
	}

	.sjbs-home .sjbs-ab-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.sjbs-home .sjbs-ab-nav__link {
		padding: 11px 12px;
		font-size: 14px;
	}

	.sjbs-home .sjbs-ab-card__img {
		margin-top: 16px;
		height: var(--sjbs-side-img-h, 160px);
		min-height: 0;
	}

	.sjbs-home .sjbs-ab__main {
		gap: var(--sjbs-main-gap, 40px);
	}



	.sjbs-home .sjbs-ab-pair {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.sjbs-home .sjbs-ab-pair__item {
		height: var(--sjbs-pair-h, 220px);
	}

	.sjbs-home .sjbs-ab-vision {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
		padding: 28px 22px;
	}

	.sjbs-home .sjbs-ab-vision__icon {
		width: var(--sjbs-vis-icon, 90px);
		height: var(--sjbs-vis-icon, 90px);
	}

	.sjbs-home .sjbs-ab-vision__icon .sjbs-3d {
		font-size: calc(var(--sjbs-vis-icon, 90px) * .62);
	}

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

	.sjbs-home .sjbs-ab-video {
		height: var(--sjbs-video-h, 240px);
	}

	.sjbs-home .sjbs-ab-video .sjbs-play {
		width: var(--sjbs-play, 64px);
		height: var(--sjbs-play, 64px);
		font-size: calc(var(--sjbs-play, 64px) * .36);
	}





	body .sjbs-lb .sjbs-lb__close {
		top: -50px;
	}
}

/* ==========================================================================
   7. 3D banner background (grid floor, glass cube, orbit rings, particles)
   All sizes / colours come from Style → Page Banner – 3D Background.
   ========================================================================== */
.sjbs-home .sjbs-banner--bg-3d {
	background: radial-gradient(120% 90% at var(--b3d-x, 76%) 30%, #15378A 0%, #0D2560 38%, var(--sjbs-navy) 75%);
}

.sjbs-home .sjbs-banner--bg-3d.sjbs-banner--none .sjbs-banner__text {
	max-width: var(--sjbs-bn-text-w, 60%);
}

.sjbs-home .sjbs-b3d {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

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

/* Grid floor */
.sjbs-home .sjbs-b3d__world {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--b3d-floor-h, 58%);
	overflow: hidden;
	perspective: 380px;
	perspective-origin: calc(var(--b3d-x, 76%) + var(--bx, 0) * 8%) 0%;
	-webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .85) 45%, transparent 100%);
	mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .85) 45%, transparent 100%);
}

.sjbs-home .sjbs-b3d__floor {
	position: absolute;
	top: 0;
	left: -120%;
	right: -120%;
	height: 420%;
	background-image:
		linear-gradient(var(--b3d-grid, rgba(122, 170, 255, .38)) 1.5px, transparent 1.5px),
		linear-gradient(90deg, var(--b3d-grid, rgba(122, 170, 255, .38)) 1.5px, transparent 1.5px);
	background-size: var(--b3d-cell, 64px) var(--b3d-cell, 64px);
	background-position: 50% 0;
	transform-origin: 50% 0;
	transform: rotateX(78deg);
	animation: sjbs-b3d-grid calc(var(--b3d-grid-dur, 3s) * var(--sjbs-amb, 1)) linear infinite;
}

.sjbs-home .sjbs-b3d__horizon {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--b3d-floor-h, 58%);
	height: 220px;
	transform: translateY(50%);
	background: radial-gradient(ellipse 34% 50% at var(--b3d-x, 76%) 50%, var(--b3d-glow, rgba(242, 184, 39, .30)), transparent 70%);
	animation: sjbs-b3d-breathe calc(6s * var(--sjbs-amb, 1)) ease-in-out infinite;
}

/* Cube stage */
.sjbs-home .sjbs-b3d__stage {
	position: absolute;
	left: var(--b3d-x, 76%);
	top: var(--b3d-y, 44%);
	width: var(--b3d-size, 150px);
	height: var(--b3d-size, 150px);
	margin: calc(var(--b3d-size, 150px) / -2) 0 0 calc(var(--b3d-size, 150px) / -2);
	perspective: 1100px;
	opacity: var(--b3d-ro, 1);
	scale: var(--b3d-rs, 1);
}

.sjbs-home .sjbs-b3d__float {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	animation: sjbs-float calc(7s * var(--sjbs-amb, 1)) ease-in-out infinite;
}

.sjbs-home .sjbs-b3d__tilt {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform: rotateX(calc(var(--b3d-tilt, -16deg) + var(--by, 0) * -16deg * var(--b3d-mouse, 1))) rotateY(calc(var(--bx, 0) * 26deg * var(--b3d-mouse, 1)));
}

.sjbs-home .sjbs-b3d__cube {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	animation: sjbs-b3d-spin calc(var(--b3d-spin, 18s) * var(--sjbs-amb, 1)) linear infinite;
}

.sjbs-home .sjbs-b3d__face {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border: 1.5px solid var(--b3d-edge, rgba(255, 255, 255, .6));
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 45%),
		var(--b3d-face, rgba(46, 102, 230, .22));
	box-shadow: inset 0 0 26px rgba(255, 255, 255, .16), 0 0 30px rgba(29, 78, 216, .35);
	backface-visibility: visible;
}

.sjbs-home .sjbs-b3d__face .sjbs-3d {
	font-size: calc(var(--b3d-size, 150px) * .5);
	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35));
}

.sjbs-home .sjbs-b3d__face--front  { transform: translateZ(calc(var(--b3d-size, 150px) / 2)); }
.sjbs-home .sjbs-b3d__face--right  { transform: rotateY(90deg) translateZ(calc(var(--b3d-size, 150px) / 2)); }
.sjbs-home .sjbs-b3d__face--back   { transform: rotateY(180deg) translateZ(calc(var(--b3d-size, 150px) / 2)); }
.sjbs-home .sjbs-b3d__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--b3d-size, 150px) / 2)); }
.sjbs-home .sjbs-b3d__face--top    { transform: rotateX(90deg) translateZ(calc(var(--b3d-size, 150px) / 2)); background-color: rgba(255, 255, 255, .06); }
.sjbs-home .sjbs-b3d__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--b3d-size, 150px) / 2)); background-color: rgba(242, 184, 39, .10); }

.sjbs-home .sjbs-b3d__core {
	position: absolute;
	inset: 34%;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 38%, #FFFFFF 0%, var(--sjbs-gold) 38%, rgba(242, 184, 39, 0) 72%);
	opacity: .55;
	filter: blur(3px);
	animation: sjbs-b3d-breathe calc(3.4s * var(--sjbs-amb, 1)) ease-in-out infinite;
}

/* Orbit rings */
.sjbs-home .sjbs-b3d__ring {
	position: absolute;
	inset: -46%;
	border: 1.5px solid var(--b3d-ring, rgba(242, 184, 39, .75));
	border-radius: 50%;
	transform-style: preserve-3d;
	animation: sjbs-b3d-ring calc(10s * var(--sjbs-amb, 1)) linear infinite;
}

.sjbs-home .sjbs-b3d__ring i {
	position: absolute;
	top: -6px;
	left: calc(50% - 6px);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--b3d-ring, var(--sjbs-gold));
	box-shadow: 0 0 16px 4px rgba(242, 184, 39, .65);
}

.sjbs-home .sjbs-b3d__ring--2 {
	inset: -70%;
	border: 1px dashed rgba(255, 255, 255, .32);
	animation: sjbs-b3d-ring2 calc(16s * var(--sjbs-amb, 1)) linear infinite;
}

.sjbs-home .sjbs-b3d__ring--2 i {
	top: -4px;
	left: calc(50% - 4px);
	width: 8px;
	height: 8px;
	background: #FFFFFF;
	box-shadow: 0 0 12px 3px rgba(255, 255, 255, .6);
}

.sjbs-home .sjbs-b3d__shadow {
	position: absolute;
	left: 8%;
	right: 8%;
	top: 150%;
	height: 22%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(242, 184, 39, .12) 60%, transparent);
	filter: blur(6px);
	animation: sjbs-b3d-shadow calc(7s * var(--sjbs-amb, 1)) ease-in-out infinite;
}

/* Small tumbling cubes */
.sjbs-home .sjbs-b3d__mini {
	--m: 26px;
	position: absolute;
	width: var(--m);
	height: var(--m);
	perspective: 500px;
	translate: calc(var(--bx, 0) * var(--d, 20px)) calc(var(--by, 0) * var(--d, 20px));
	animation: sjbs-b3d-drift calc(9s * var(--sjbs-amb, 1)) ease-in-out infinite;
}

.sjbs-home .sjbs-b3d__mini--1 { --m: 30px; --d: 30px; left: 58%; top: 16%; }
.sjbs-home .sjbs-b3d__mini--2 { --m: 20px; --d: -24px; left: 93%; top: 20%; animation-delay: -3s; }
.sjbs-home .sjbs-b3d__mini--3 { --m: 24px; --d: 36px; left: 63%; top: 72%; animation-delay: -5s; }
.sjbs-home .sjbs-b3d__mini--4 { --m: 16px; --d: -40px; left: 90%; top: 80%; animation-delay: -1.5s; }

.sjbs-home .sjbs-b3d__mcube {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	animation: sjbs-b3d-tumble calc(14s * var(--sjbs-amb, 1)) linear infinite;
}

.sjbs-home .sjbs-b3d__mini--2 .sjbs-b3d__mcube,
.sjbs-home .sjbs-b3d__mini--4 .sjbs-b3d__mcube {
	animation-direction: reverse;
	animation-duration: calc(10s * var(--sjbs-amb, 1));
}

.sjbs-home .sjbs-b3d__mcube i {
	position: absolute;
	inset: 0;
	border: 1px solid var(--b3d-mini, rgba(242, 184, 39, .85));
	background: rgba(242, 184, 39, .12);
}

.sjbs-home .sjbs-b3d__mcube i:nth-child(1) { transform: translateZ(calc(var(--m) / 2)); }
.sjbs-home .sjbs-b3d__mcube i:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--m) / 2)); }
.sjbs-home .sjbs-b3d__mcube i:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--m) / 2)); }
.sjbs-home .sjbs-b3d__mcube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--m) / 2)); }
.sjbs-home .sjbs-b3d__mcube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--m) / 2)); }
.sjbs-home .sjbs-b3d__mcube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--m) / 2)); }

/* Rising particles */
.sjbs-home .sjbs-b3d__particles {
	position: absolute;
	inset: 0;
}

.sjbs-home .sjbs-b3d__particles i {
	position: absolute;
	left: var(--px, 50%);
	bottom: -12px;
	width: var(--ps, 3px);
	height: var(--ps, 3px);
	border-radius: 50%;
	background: var(--b3d-pc, rgba(255, 216, 120, .95));
	box-shadow: 0 0 8px 2px var(--b3d-pc, rgba(242, 184, 39, .55));
	opacity: 0;
	animation: sjbs-b3d-rise calc(var(--pd, 8s) * var(--sjbs-amb, 1)) linear var(--pdl, 0s) infinite;
}

/* Scene entrance */
.sjbs-home.sjbs-anim .sjbs-b3d__stage {
	animation: sjbs-b3d-in 1.6s cubic-bezier(.2, .85, .25, 1) .2s both;
}

.sjbs-home.sjbs-anim .sjbs-b3d__world {
	animation: sjbs-b3d-fade 1.4s ease .1s both;
}

/* Looping effects off / device "reduce motion" */
.sjbs-home.sjbs-noloop .sjbs-b3d *:not(.sjbs-b3d__stage):not(.sjbs-b3d__world) {
	animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
	.sjbs-home:not(.sjbs-force-motion) .sjbs-b3d *:not(.sjbs-b3d__stage):not(.sjbs-b3d__world) {
		animation-play-state: paused !important;
	}
}

@keyframes sjbs-b3d-grid {
	from { background-position: 50% 0; }
	to   { background-position: 50% var(--b3d-cell, 64px); }
}

@keyframes sjbs-b3d-spin {
	from { transform: rotateY(0deg); }
	to   { transform: rotateY(360deg); }
}

@keyframes sjbs-b3d-ring {
	from { transform: rotateX(76deg) rotateZ(0deg); }
	to   { transform: rotateX(76deg) rotateZ(360deg); }
}

@keyframes sjbs-b3d-ring2 {
	from { transform: rotateX(68deg) rotateY(-16deg) rotateZ(360deg); }
	to   { transform: rotateX(68deg) rotateY(-16deg) rotateZ(0deg); }
}

@keyframes sjbs-b3d-tumble {
	from { transform: rotateX(0deg) rotateY(0deg); }
	to   { transform: rotateX(360deg) rotateY(720deg); }
}

@keyframes sjbs-b3d-drift {
	0%, 100% { margin-top: 0; }
	50%      { margin-top: -18px; }
}

@keyframes sjbs-b3d-shadow {
	0%, 100% { scale: 1; opacity: 1; }
	50%      { scale: .78; opacity: .6; }
}

@keyframes sjbs-b3d-breathe {
	0%, 100% { opacity: .55; }
	50%      { opacity: 1; }
}

@keyframes sjbs-b3d-rise {
	0%   { transform: translate(0, 0); opacity: 0; }
	12%  { opacity: .95; }
	80%  { opacity: .55; }
	100% { transform: translate(var(--pw, 20px), -520px); opacity: 0; }
}

@keyframes sjbs-b3d-in {
	from { opacity: 0; scale: calc(var(--b3d-rs, 1) * .35); rotate: -25deg; }
	to   { opacity: var(--b3d-ro, 1); scale: var(--b3d-rs, 1); rotate: 0deg; }
}

@keyframes sjbs-b3d-fade {
	from { opacity: 0; translate: 0 40px; }
	to   { opacity: var(--b3d-wo, 1); translate: 0 0; }
}

/* ==========================================================================
   8. Creative page effects (Style → Creative Effects)
   ========================================================================== */

/* ---- Section titles ------------------------------------------------------- */
.sjbs-home .sjbs-ab-h__t {
	position: relative;
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}

.sjbs-home .sjbs-ab-h__in {
	display: inline-block;
}

/* Gold block wipe: a block sweeps across, the title appears behind it */
.sjbs-home.sjbs-anim.sjbs-js .sjbs-ab-h.sjbs-fxt-mask.sjbs-reveal {
	opacity: 1;
	translate: none;
	scale: none;
	rotate: none;
	filter: none;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-ab-h.sjbs-fxt-mask .sjbs-ab-h__in {
	clip-path: inset(-.2em 100% -.35em -.1em);
	transition: clip-path calc(var(--sjbs-dur, 900ms) * .62) cubic-bezier(.77, 0, .18, 1) calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-dur, 900ms) * .58);
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-ab-h.sjbs-fxt-mask.is-visible .sjbs-ab-h__in {
	clip-path: inset(-.2em -.1em -.35em -.1em);
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-ab-h.sjbs-fxt-mask .sjbs-ab-h__t::after {
	content: "";
	position: absolute;
	inset: -.04em -.06em -.1em;
	z-index: 2;
	border-radius: 2px;
	background: var(--sjbs-wipe, var(--sjbs-gold));
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-ab-h.sjbs-fxt-mask.is-visible .sjbs-ab-h__t::after {
	animation: sjbs-wipe calc(var(--sjbs-dur, 900ms) * 1.3) cubic-bezier(.77, 0, .18, 1) var(--sjbs-base-delay, 0ms) both;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-ab-h.sjbs-fxt-mask::after {
	transition-delay: calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-dur, 900ms) * 1.1);
}

@keyframes sjbs-wipe {
	0%   { transform: scaleX(0); transform-origin: 0 50%; }
	46%  { transform: scaleX(1); transform-origin: 0 50%; }
	54%  { transform: scaleX(1); transform-origin: 100% 50%; }
	100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

/* Words: base "split" style (rise from a mask); the underline follows the last word */
.sjbs-home.sjbs-anim.sjbs-js .sjbs-ab-h.sjbs-fxt-words::after {
	transition-delay: calc(var(--sjbs-base-delay, 0ms) + 650ms);
}

/* ---- Paragraphs: ink reveal ---------------------------------------------- */
.sjbs-home.sjbs-anim.sjbs-js .sjbs-fxp-ink.sjbs-reveal {
	translate: none;
	scale: none;
	rotate: none;
	transition:
		opacity calc(var(--sjbs-dur, 900ms) * 1.2) ease,
		filter calc(var(--sjbs-dur, 900ms) * 1.4) ease,
		-webkit-mask-position calc(var(--sjbs-dur, 900ms) * 1.6) cubic-bezier(.6, 0, .2, 1),
		mask-position calc(var(--sjbs-dur, 900ms) * 1.6) cubic-bezier(.6, 0, .2, 1);
	-webkit-mask-image: linear-gradient(#000 0%, #000 46%, transparent 54%);
	mask-image: linear-gradient(#000 0%, #000 46%, transparent 54%);
	-webkit-mask-size: 100% 220%;
	mask-size: 100% 220%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition-delay: calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-delay, 0ms));
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fxp-ink.sjbs-reveal:not(.is-visible) {
	opacity: .15;
	filter: blur(8px);
	-webkit-mask-position: 0 100%;
	mask-position: 0 100%;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fxp-ink.sjbs-reveal.is-visible {
	opacity: 1;
	filter: none;
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}

.sjbs-home.sjbs-anim.sjbs-js.sjbs-scrub .sjbs-fxp-ink.sjbs-reveal.sjbs-reveal {
	-webkit-mask-image: none;
	mask-image: none;
}

/* ---- Paragraphs: highlight while scrolling (JS sets --sjbs-hl 0→1) ------ */
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.sjbs-home.sjbs-anim.sjbs-js .sjbs-fxp-highlight {
		background-image: linear-gradient(180deg, currentColor 0%, currentColor calc(var(--sjbs-hl, 1) * 100%), color-mix(in srgb, currentColor 22%, transparent) calc(var(--sjbs-hl, 1) * 100% + 1.8em));
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

/* ---- Two images: 3D swing-in --------------------------------------------- */
.sjbs-home .sjbs-ab-pair {
	perspective: 1400px;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-swing.sjbs-reveal {
	translate: none;
	scale: none;
	rotate: none;
	filter: none;
	transform-origin: 0 50%;
	transition: opacity calc(var(--sjbs-dur, 900ms) * .9) ease, transform calc(var(--sjbs-dur, 900ms) * 1.6) cubic-bezier(.2, .85, .25, 1);
	transition-delay: calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-delay, 0ms));
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-ab-pair__item--2.sjbs-fx-swing.sjbs-reveal {
	transform-origin: 100% 50%;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-swing.sjbs-reveal:not(.is-visible) {
	opacity: 0;
	transform: rotateY(42deg) translateZ(-60px);
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-ab-pair__item--2.sjbs-fx-swing.sjbs-reveal:not(.is-visible) {
	transform: rotateY(-42deg) translateZ(-60px);
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-swing.sjbs-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ---- Scroll parallax inside image frames (JS sets --sjbs-par -1→1) ------ */
.sjbs-home.sjbs-fx [data-sjbs-par] .sjbs-frame__in img {
	top: calc(var(--sjbs-par-amt, 8%) * -1);
	bottom: auto;
	height: calc(100% + var(--sjbs-par-amt, 8%) * 2) !important;
	translate: 0 calc(var(--sjbs-par, 0) * var(--sjbs-par-amt, 8%) * .8);
}

/* ---- Vision: 3D door opening + rotating glow border ---------------------- */
.sjbs-home .sjbs-ab-vision-wrap {
	min-width: 0;
	perspective: 1800px;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-door.sjbs-reveal {
	translate: none;
	scale: none;
	rotate: none;
	filter: none;
	transform-origin: 0 50%;
	transition: opacity calc(var(--sjbs-dur, 900ms) * .7) ease, transform calc(var(--sjbs-dur, 900ms) * 1.7) cubic-bezier(.2, .85, .25, 1);
	transition-delay: calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-delay, 0ms));
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-door.sjbs-reveal:not(.is-visible) {
	opacity: 0;
	transform: rotateY(58deg) translateX(-20px);
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-door.sjbs-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-door .sjbs-ab-vision__icon,
.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-door .sjbs-ab-vision__body > * {
	transition: opacity .7s ease, translate .9s cubic-bezier(.2, .85, .25, 1), scale .9s cubic-bezier(.34, 1.56, .64, 1);
	transition-delay: calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-dur, 900ms) * .7 + var(--sjbs-k, 0) * 120ms);
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-door .sjbs-ab-vision__body > :nth-child(2) { --sjbs-k: 1; }
.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-door .sjbs-ab-vision__body > :nth-child(3) { --sjbs-k: 2; }

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-door:not(.is-visible) .sjbs-ab-vision__body > * {
	opacity: 0;
	translate: 30px 0;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-door:not(.is-visible) .sjbs-ab-vision__icon {
	opacity: 0;
	scale: .4;
}

.sjbs-home .sjbs-ab-vision__ring {
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: var(--sjbs-vglow-w, 2px);
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.sjbs-home .sjbs-ab-vision__ring::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 160%;
	aspect-ratio: 1 / 1;
	translate: -50% -50%;
	background: conic-gradient(from 0deg, transparent 0deg, transparent 200deg, var(--sjbs-vglow, var(--sjbs-gold)) 290deg, #FFFFFF 312deg, var(--sjbs-vglow, var(--sjbs-gold)) 330deg, transparent 360deg);
	animation: sjbs-spin calc(var(--sjbs-vglow-dur, 7s) * var(--sjbs-amb, 1)) linear infinite;
}

/* ---- Feature cards ------------------------------------------------------- */
.sjbs-home .sjbs-ab-feats {
	perspective: 1400px;
}

.sjbs-home .sjbs-ab-feat__title,
.sjbs-home .sjbs-ab-feat__text {
	position: relative;
	z-index: 1;
}

.sjbs-home.sjbs-nolift .sjbs-ab-feat:hover {
	transform: none;
}

/* 3D flip-up cascade */
.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-flip .sjbs-ab-feat.sjbs-reveal {
	transform-origin: 50% 100%;
	transition:
		opacity calc(var(--sjbs-dur, 900ms) * .8) ease,
		translate calc(var(--sjbs-dur, 900ms) * 1.3) cubic-bezier(.2, .85, .25, 1),
		rotate calc(var(--sjbs-dur, 900ms) * 1.3) cubic-bezier(.2, .85, .25, 1),
		scale calc(var(--sjbs-dur, 900ms) * 1.3) cubic-bezier(.2, .85, .25, 1),
		filter var(--sjbs-dur, 900ms) ease,
		box-shadow .4s ease,
		transform .45s ease;
	transition-delay:
		calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-delay, 0ms)),
		calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-delay, 0ms)),
		calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-delay, 0ms)),
		calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-delay, 0ms)),
		calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-delay, 0ms)),
		0s,
		0s;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-flip .sjbs-ab-feat.sjbs-reveal:not(.is-visible) {
	opacity: 0;
	translate: 0 50px;
	rotate: x 80deg;
	scale: .94;
	filter: none;
}

/* Icon pops in after its card */
.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-pop .sjbs-ab-feat.sjbs-reveal .sjbs-ab-feat__icon {
	transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), scale .8s cubic-bezier(.34, 1.8, .5, 1), rotate .9s cubic-bezier(.34, 1.56, .64, 1);
	transition-delay: 0s, calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-delay, 0ms) + var(--sjbs-dur, 900ms) * .55), calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-delay, 0ms) + var(--sjbs-dur, 900ms) * .55);
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-pop .sjbs-ab-feat.sjbs-reveal:not(.is-visible) .sjbs-ab-feat__icon {
	scale: 0;
	rotate: -140deg;
}

/* Bottom line (Style → Creative Effects → Bottom Line Animation) */
.sjbs-home .sjbs-ab-feat__line {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 0;
	z-index: 1;
	display: block;
	overflow: hidden;
	height: var(--sjbs-line-h, 3px);
	border-radius: 3px 3px 0 0;
	background: linear-gradient(90deg, var(--sjbs-line-a, var(--sjbs-gold)), var(--sjbs-line-b, var(--sjbs-royal)));
	transform-origin: 0 50%;
	transition: transform var(--sjbs-line-dur, 900ms) cubic-bezier(.65, 0, .35, 1);
}

.sjbs-home .sjbs-ab-feat__line::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 30%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
	translate: -110% 0;
	animation: sjbs-line-shine calc(3.6s * var(--sjbs-amb, 1)) ease-in-out infinite;
}

.sjbs-home.sjbs-anim.sjbs-js.sjbs-cl-appear .sjbs-ab-feat.sjbs-reveal .sjbs-ab-feat__line {
	transition-delay: calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-delay, 0ms) + var(--sjbs-dur, 900ms) * .75);
}

.sjbs-home.sjbs-anim.sjbs-js.sjbs-cl-appear .sjbs-ab-feat.sjbs-reveal:not(.is-visible) .sjbs-ab-feat__line {
	transform: scaleX(0);
	transition-delay: 0s;
}

.sjbs-home.sjbs-cl-hover .sjbs-ab-feat__line {
	transform: scaleX(0);
}

.sjbs-home.sjbs-cl-hover .sjbs-ab-feat:hover .sjbs-ab-feat__line,
.sjbs-home.sjbs-cl-hover .sjbs-ab-feat:focus-within .sjbs-ab-feat__line {
	transform: scaleX(1);
}

.sjbs-home.sjbs-cl-none .sjbs-ab-feat__line {
	display: none;
}

/* Cursor spotlight */
.sjbs-home .sjbs-ab-feat__spot {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s ease;
}

.sjbs-home .sjbs-ab-feat__spot::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 30%), var(--sjbs-spot, rgba(242, 184, 39, .2)), transparent 70%);
}

.sjbs-home .sjbs-fx-spot .sjbs-ab-feat:hover .sjbs-ab-feat__spot {
	opacity: 1;
}

/* ---- Campus video: cinema expand while scrolling (JS sets --sjbs-vp 0→1) - */
.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-expand {
	clip-path: inset(calc((1 - var(--sjbs-vp, 1)) * var(--sjbs-vx, 9%)) calc((1 - var(--sjbs-vp, 1)) * var(--sjbs-vx, 9%) * 1.6) round calc(var(--sjbs-fr-r, 24px) + (1 - var(--sjbs-vp, 1)) * 40px));
}

.sjbs-home .sjbs-ab-video .sjbs-play::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--sjbs-play-ring, rgba(255, 255, 255, .85));
	border-radius: 50%;
	pointer-events: none;
	animation: sjbs-pulse-ring calc(2.4s * var(--sjbs-amb, 1)) ease-out infinite;
}

.sjbs-home.sjbs-nopulse .sjbs-ab-video .sjbs-play::after {
	display: none;
}

/* ---- Floating background shapes ------------------------------------------ */
.sjbs-home .sjbs-ab {
	isolation: isolate;
}

.sjbs-home .sjbs-ab-blobs {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.sjbs-home .sjbs-ab-blobs i {
	position: absolute;
	display: block;
	width: 520px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--sjbs-blob1, rgba(29, 78, 216, .11)), transparent 68%);
	animation: sjbs-blob calc(24s * var(--sjbs-amb, 1)) ease-in-out infinite alternate;
}

.sjbs-home .sjbs-ab-blobs i:nth-child(1) { top: -160px; left: -180px; }
.sjbs-home .sjbs-ab-blobs i:nth-child(2) { top: 28%; right: -220px; width: 640px; background: radial-gradient(circle, var(--sjbs-blob2, rgba(242, 184, 39, .13)), transparent 68%); animation-duration: calc(30s * var(--sjbs-amb, 1)); animation-delay: -8s; }
.sjbs-home .sjbs-ab-blobs i:nth-child(3) { bottom: -200px; left: 18%; width: 560px; animation-delay: -14s; }
.sjbs-home .sjbs-ab-blobs i:nth-child(4) { top: 58%; left: -120px; width: 300px; border: 1.5px dashed rgba(29, 78, 216, .16); background: none; animation: sjbs-spin calc(50s * var(--sjbs-amb, 1)) linear infinite; }

/* ---- Reading progress bar ------------------------------------------------ */
.sjbs-home .sjbs-progress {
	position: fixed;
	top: var(--sjbs-prog-top, 0px);
	left: 0;
	right: 0;
	z-index: 99990;
	display: block;
	height: var(--sjbs-prog-h, 4px);
	pointer-events: none;
}

.sjbs-home .sjbs-progress i {
	display: block;
	height: 100%;
	background: var(--sjbs-prog-c, linear-gradient(90deg, var(--sjbs-gold), var(--sjbs-royal)));
	box-shadow: 0 0 10px rgba(242, 184, 39, .6);
	transform: scaleX(var(--sjbs-prog, 0));
	transform-origin: 0 50%;
}

/* ---- Sticky sidebar off --------------------------------------------------- */
.sjbs-home.sjbs-ab--nosticky .sjbs-ab__sticky {
	position: static;
}

/* ---- Keyframes ----------------------------------------------------------- */
@keyframes sjbs-line-shine {
	0%, 55% { translate: -110% 0; }
	100%    { translate: 420% 0; }
}

@keyframes sjbs-pulse-ring {
	from { scale: 1; opacity: .9; }
	to   { scale: 1.9; opacity: 0; }
}

@keyframes sjbs-blob {
	0%   { translate: 0 0; scale: 1; }
	50%  { translate: 70px -50px; scale: 1.12; }
	100% { translate: -50px 60px; scale: .92; }
}

.sjbs-home.sjbs-noloop .sjbs-ab-blobs i,
.sjbs-home.sjbs-noloop .sjbs-ab-vision__ring::before,
.sjbs-home.sjbs-noloop .sjbs-ab-feat__line::after,
.sjbs-home.sjbs-noloop .sjbs-ab-video .sjbs-play::after {
	animation: none !important;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.sjbs-home .sjbs-banner--bg-3d.sjbs-banner--none .sjbs-banner__text {
		max-width: var(--sjbs-bn-text-w, 66%);
	}

	.sjbs-home .sjbs-b3d__stage {
		--b3d-rs: .8;
	}

	.sjbs-home .sjbs-b3d__mini--1 {
		left: 66%;
	}
}

@media (max-width: 767px) {
	.sjbs-home .sjbs-banner--bg-3d.sjbs-banner--none .sjbs-banner__text {
		max-width: var(--sjbs-bn-text-w, 100%);
	}

	.sjbs-home .sjbs-b3d-m-soft .sjbs-b3d__stage {
		--b3d-rs: .42;
		--b3d-ro: .55;
		left: 86%;
		top: 86%;
	}

	.sjbs-home .sjbs-b3d-m-soft .sjbs-b3d__mini,
	.sjbs-home .sjbs-b3d-m-soft .sjbs-b3d__ring--2 {
		display: none;
	}

	.sjbs-home .sjbs-b3d-m-soft .sjbs-b3d__world {
		--b3d-wo: .7;
		height: 45%;
		opacity: var(--b3d-wo);
	}

	.sjbs-home .sjbs-b3d-m-hide .sjbs-b3d {
		display: none;
	}

	.sjbs-home .sjbs-ab-blobs i {
		width: 320px;
	}

	.sjbs-home .sjbs-ab-blobs i:nth-child(2) {
		width: 380px;
	}

	.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-swing.sjbs-reveal:not(.is-visible),
	.sjbs-home.sjbs-anim.sjbs-js .sjbs-ab-pair__item--2.sjbs-fx-swing.sjbs-reveal:not(.is-visible) {
		transform: rotateX(28deg) translateZ(-40px);
		transform-origin: 50% 100%;
	}

	.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-door.sjbs-reveal:not(.is-visible) {
		transform: rotateY(40deg);
	}
}

/* ==========================================================================
   9. Theme-proofing for every heading in these widgets
   ========================================================================== */
.sjbs-home :is(h1, h2, h3, h4, h5, h6, .sjbs-banner__title, .sjbs-ab-card__title, .sjbs-ab-feat__title, .sjbs-title, .sjbs-crumbs, .sjbs-ab-nav__link) {
	text-transform: none;
	letter-spacing: normal;
}