/*!
 * St. Joseph's School theme – base styles for the page designs (tokens, reveals, frames, icons).
 * All selectors are prefixed with .sjbs- to avoid theme conflicts.
 * Version 1.0.0
 */

/* ==========================================================================
   1. Tokens & reset
   ========================================================================== */
.sjbs-home {
	--sjbs-navy: #0A1A3F;
	--sjbs-royal: #1D4ED8;
	--sjbs-gold: #F2B827;
	--sjbs-gold-deep: #C8921A;
	--sjbs-white: #FFFFFF;
	--sjbs-sky: #EAF2FF;
	--sjbs-text: #42506B;
	--sjbs-max: 1200px;
	--sjbs-space: 96px;
	--sjbs-panel-h: 400px;
	--sjbs-tilt: 18deg;
	--sjbs-radius: 18px;
	/* Theme (Elementor Global) fonts first, bundled fonts as fallback */
	--sjbs-font: var(--e-global-typography-text-font-family, "Poppins"), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sjbs-font-head: var(--e-global-typography-primary-font-family, "Merriweather"), Georgia, "Times New Roman", serif;
	--sjbs-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;
	--sjbs-shadow: 0 18px 40px -18px rgba(11, 31, 77, .35);
	--sjbs-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(--sjbs-font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--sjbs-text);
	background: transparent;
	-webkit-font-smoothing: antialiased;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Buttons ----------------------------------------------------------------- */
.sjbs-home .sjbs-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sjbs-home .sjbs-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%);
}

.sjbs-home .sjbs-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%);
}

.sjbs-home .sjbs-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 */
.sjbs-home .sjbs-brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
}

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

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

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

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

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

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

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

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

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

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

.sjbs-home .sjbs-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(--sjbs-royal);
	background: rgba(255, 255, 255, .85);
}

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

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

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

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

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

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

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

.sjbs-home .sjbs-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(--sjbs-shadow);
	color: var(--sjbs-navy);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
}

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

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

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

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

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

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

.sjbs-home .sjbs-panel__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 14px;
	background: var(--sjbs-pc, var(--sjbs-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;
}

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

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

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

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

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

.sjbs-home .sjbs-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);
}

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

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

.sjbs-home .sjbs-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;
}

.sjbs-home .sjbs-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;
}

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

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

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

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

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

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

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

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

/* Landmark image overlapping panel bottoms */
.sjbs-home .sjbs-landmark {
	position: relative;
	z-index: 3;
	max-width: 1180px;
	margin: calc(var(--sjbs-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%);
}

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

/* Contact pill bar */
.sjbs-home .sjbs-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(--sjbs-navy);
	box-shadow: var(--sjbs-shadow);
}

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

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

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

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

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

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

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

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

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

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

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

.sjbs-home .sjbs-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(--sjbs-gold);
	color: var(--sjbs-navy);
	font-size: 32px;
	box-shadow: var(--sjbs-shadow-sm);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sjbs-home .sjbs-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;
}

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

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

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

.sjbs-home .sjbs-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;
}

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

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

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

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

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

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

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

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

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

.sjbs-home .sjbs-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(--sjbs-navy);
}

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

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

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

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

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

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

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

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

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

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

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

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

.sjbs-home .sjbs-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;
}

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

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

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

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

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

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

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

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

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

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

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

.sjbs-home .sjbs-marquee__a,
.sjbs-home .sjbs-marquee__b {
	font-family: var(--sjbs-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sjbs-home .sjbs-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sjbs-home .sjbs-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
   ========================================================================== */
.sjbs-home .sjbs-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: calc(var(--sjbs-space) * 1.05) 0;
	background: var(--sjbs-navy);
}

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

.sjbs-home .sjbs-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%);
}

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

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

.sjbs-home .sjbs-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 ------------------------------------------------------ */
.sjbs-home .sjbs-hero__rays {
	animation: sjbs-spin 160s linear infinite;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sjbs-home .sjbs-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;
}

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

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

.sjbs-home .sjbs-panel:hover .sjbs-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) {
	.sjbs-home .sjbs-panel {
		transform:
			rotateY(calc(var(--sjbs-off, 0) * var(--sjbs-tilt) * -1 + var(--sjbs-mx, 0) * 7deg))
			rotateX(calc(var(--sjbs-my, 0) * -5deg));
	}

	.sjbs-home .sjbs-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 */
	.sjbs-home.sjbs-anim.sjbs-js:not(.sjbs-nodeal) .sjbs-panel.sjbs-reveal:not(.is-visible) {
		opacity: 0;
		translate: 0 140px;
		transform: rotateY(calc(var(--sjbs-off, 0) * -75deg)) rotateX(35deg) scale(.82);
	}

	.sjbs-home.sjbs-anim.sjbs-js:not(.sjbs-nodeal) .sjbs-panel.sjbs-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(--sjbs-delay, 0ms);
	}

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

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

	.sjbs-home.sjbs-anim.sjbs-js:not(.sjbs-nodeal) .sjbs-panel.sjbs-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(--sjbs-i, 0) * 90ms);
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sjbs-home .sjbs-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: sjbs-btn-shine 4.5s ease-in-out infinite;
}

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

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

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

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

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

.sjbs-home.sjbs-anim.sjbs-js .sjbs-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(--sjbs-dur, 900ms) ease,
		translate var(--sjbs-dur, 900ms) var(--sjbs-ease, ease),
		scale var(--sjbs-dur, 900ms) var(--sjbs-ease, ease),
		rotate var(--sjbs-dur, 900ms) var(--sjbs-ease, ease),
		filter var(--sjbs-dur, 900ms) ease;
	transition-delay: calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-delay, 0ms));
}

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

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

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

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

.sjbs-home.sjbs-anim.sjbs-js .sjbs-reveal--rise:not(.is-visible) {
	translate: 0 calc(var(--sjbs-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. */
.sjbs-home.sjbs-anim.sjbs-js .sjbs-reveal--clip,
.sjbs-home.sjbs-anim.sjbs-js .sjbs-reveal--clip:not(.is-visible) {
	opacity: 1;
	translate: none;
	scale: none;
	rotate: none;
	filter: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes sjbs-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) {
	.sjbs-home {
		--sjbs-panel-h: 370px;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Elementor container reset for this widget */
:is(.elementor-widget-sjbs-home, .elementor-widget-sjbs-about, .elementor-widget-sjbs-mission, .elementor-widget-sjbs-campus-map, .elementor-widget-sjbs-nursery, .elementor-widget-sjbs-facilities, .elementor-widget-sjbs-faq, .elementor-widget-sjbs-campus-life, .elementor-widget-sjbs-contact, .elementor-widget-sjbs-gallery) > .elementor-widget-container {
	padding: 0;
	margin: 0;
}

/* ==========================================================================
   14. 3D icons
   ========================================================================== */
.sjbs-home .sjbs-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));
}

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

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

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

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

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

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

.sjbs-home .sjbs-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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sjbs-home .sjbs-frame::before,
.sjbs-home .sjbs-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 */
.sjbs-home .sjbs-frame--rounded .sjbs-frame__in {
	box-shadow: var(--sjbs-shadow);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Polaroid / photo print */
.sjbs-home .sjbs-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);
}

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

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

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

.sjbs-home .sjbs-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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
	.sjbs-home.sjbs-anim:not(.sjbs-force-motion) .sjbs-reveal--clip .sjbs-frame__in::before,
	.sjbs-home.sjbs-anim:not(.sjbs-force-motion) .sjbs-reveal--clip .sjbs-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 ---------------- */
.sjbs-home.sjbs-own-fonts {
	--sjbs-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sjbs-font-head: "Merriweather", Georgia, "Times New Roman", serif;
	--sjbs-font-ui: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---- Captions: plain text on image (theme style, no coloured boxes) ----- */
.sjbs-home.sjbs-caption-plain .sjbs-card figcaption,
.sjbs-home.sjbs-caption-plain .sjbs-gallery__item figcaption {
	left: 0;
	right: 0;
	bottom: 0;
	max-width: none;
	padding: 72px 24px 22px;
	border-radius: 0 0 var(--sjbs-fr-r, 24px) var(--sjbs-fr-r, 24px);
	background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--sjbs-navy) calc(var(--sjbs-cap-op, .85) * 100%), transparent) 100%);
	color: #FFFFFF;
	font-family: var(--sjbs-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;
}

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

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

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

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

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

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

.sjbs-home.sjbs-caption-plain .sjbs-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) {
	.sjbs-home.sjbs-caption-plain .sjbs-card figcaption {
		padding: 56px 18px 16px;
		font-size: 20px;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
   18. Image-reveal overlay (independent per image; values set by Elementor)
   Layers only exist once JS is ready (.sjbs-ov-ready) – images are never
   hidden without JavaScript, and nothing remains visible after the reveal.
   ========================================================================== */
.sjbs-home .sjbs-ov {
	display: none;
}

.sjbs-home.sjbs-ov-ready .sjbs-ov {
	--sjbs-op-p: var(--ov-p1, 0);
	position: absolute;
	inset: -1px;
	z-index: 6;
	display: var(--ov-hide, block);
	background: var(--ov-c, var(--sjbs-navy));
	opacity: var(--ov-op, 1);
	transform-origin: var(--ov-origin, 50% 0%);
	transform: scale(
		calc(1 - var(--ov-mx, 0) + var(--ov-mx, 0) * var(--ov-size, 1) * (1 - var(--sjbs-op-p))),
		calc(1 - var(--ov-my, 1) + var(--ov-my, 1) * var(--ov-size, 1) * (1 - var(--sjbs-op-p)))
	);
	transition: transform var(--ov-dur, 1000ms) var(--ov-ease, cubic-bezier(.77, 0, .18, 1)) calc(var(--ov-delay, 0ms) + var(--ov-i, 0) * var(--ov-stagger, 0ms));
	pointer-events: none;
	will-change: transform;
}

.sjbs-home.sjbs-ov-ready .sjbs-ov--1 {
	z-index: 7;
}

.sjbs-home.sjbs-ov-ready .sjbs-ov--2 {
	--sjbs-op-p: var(--ov-p2, 0);
	display: var(--ov-hide, var(--ov-l2, block));
	background: var(--ov-c2, var(--sjbs-gold));
	transition-delay: calc(var(--ov-delay, 0ms) + var(--ov-i, 0) * var(--ov-stagger, 0ms) + var(--ov-dur, 1000ms) * var(--ov-seq, .4));
}

/* Image zoom while the layers slide away */
.sjbs-home.sjbs-ov-ready [data-ov] .sjbs-frame__in img {
	scale: calc(1 + var(--ov-zoom, .14) * (1 - var(--ov-p2, 0)));
	transition: scale calc(var(--ov-dur, 1000ms) * 1.7) cubic-bezier(.2, .7, .2, 1) calc(var(--ov-delay, 0ms) + var(--ov-i, 0) * var(--ov-stagger, 0ms)), transform .8s ease;
}

/* Revealed */
.sjbs-home [data-ov].ov-in {
	--ov-p1: 1;
	--ov-p2: 1;
}

/* Finished → layers removed completely (no visible overlay, no hairlines) */
.sjbs-home.sjbs-ov-ready [data-ov].ov-done .sjbs-ov {
	visibility: hidden;
}

/* Scroll-linked mode: JS drives --ov-p1 / --ov-p2 directly */
.sjbs-home.sjbs-ov-ready [data-ov].ov-scrub .sjbs-ov,
.sjbs-home.sjbs-ov-ready [data-ov].ov-scrub .sjbs-frame__in img {
	transition: none;
}

/* Instant reset when replaying (layers jump back while off-screen) */
.sjbs-home.sjbs-ov-ready [data-ov].ov-reset .sjbs-ov,
.sjbs-home.sjbs-ov-ready [data-ov].ov-reset .sjbs-frame__in img {
	transition: none;
}

/* ---- Theme-proofing: typography, buttons ---------------------------------- */
.sjbs-home.sjbs-home :where(p, li, blockquote, figcaption) {
	font-family: var(--sjbs-font);
	text-transform: none;
	letter-spacing: normal;
}

.sjbs-home .sjbs-reset-btn {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background-image: none;
	box-shadow: none;
	font-family: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
}