/*!
 * St. Joseph's School theme – reference card design, line icons, hover & idle effects,
 * extra entrance animations, banner title animations and the staggered photo mosaic.
 */

/* ==========================================================================
   1. Entrance animations (extends the reveal engine in sjbs-base.css)
   ========================================================================== */
.sjbs-home {
	--rv-ax: 1, 0, 0;
	--rv-clip: inset(-50% -50% -50% -50%);
	--rv-ease: var(--sjbs-ease, cubic-bezier(.2, .7, .2, 1));
	--rv-origin: 50% 50%;
}

.sjbs-style-side   { --rv-x: calc(var(--sjbs-dist, 34px) * 1.8); --rv-y: 0px; --rv-s: 1; --rv-r: 0deg; --rv-b: 0px; }
.sjbs-style-pop    { --rv-x: 0px; --rv-y: 0px; --rv-s: .55; --rv-r: 0deg; --rv-b: 0px; --rv-ease: cubic-bezier(.34, 1.7, .5, 1); }
.sjbs-style-swing  { --rv-x: 0px; --rv-y: 0px; --rv-s: 1; --rv-r: -80deg; --rv-b: 0px; --rv-ax: 0, 1, 0; --rv-origin: 0% 50%; --rv-ease: cubic-bezier(.25, 1.3, .45, 1); }
.sjbs-style-tilt   { --rv-x: 0px; --rv-y: calc(var(--sjbs-dist, 34px) * 2); --rv-s: .85; --rv-r: 38deg; --rv-b: 0px; --rv-ax: 1, -1, 0; }
.sjbs-style-spin   { --rv-x: 0px; --rv-y: 0px; --rv-s: .6; --rv-r: -18deg; --rv-b: 0px; --rv-ax: 0, 0, 1; --rv-ease: cubic-bezier(.3, 1.4, .5, 1); }
.sjbs-style-drop   { --rv-x: 0px; --rv-y: calc(var(--sjbs-dist, 34px) * -2.6); --rv-s: 1; --rv-r: 0deg; --rv-b: 0px; --rv-ease: cubic-bezier(.3, 1.6, .5, 1); }
.sjbs-style-rise   { --rv-x: 0px; --rv-y: calc(var(--sjbs-dist, 34px) * 3.4); --rv-s: .96; --rv-r: 0deg; --rv-b: 0px; --rv-ease: cubic-bezier(.16, 1, .3, 1); }
.sjbs-style-unfold { --rv-x: 0px; --rv-y: 0px; --rv-s: 1; --rv-r: -88deg; --rv-b: 0px; --rv-origin: 50% 0%; --rv-ease: cubic-bezier(.3, 1.3, .5, 1); }
.sjbs-style-wipe   { --rv-x: 0px; --rv-y: 0px; --rv-s: 1; --rv-r: 0deg; --rv-b: 0px; --rv-clip: inset(0 100% 0 0); }
.sjbs-style-iris   { --rv-x: 0px; --rv-y: 0px; --rv-s: 1.04; --rv-r: 0deg; --rv-b: 0px; --rv-clip: circle(0% at 50% 50%); }

.sjbs-home.sjbs-anim.sjbs-js .sjbs-reveal {
	rotate: var(--rv-ax) var(--rv-r);
	clip-path: var(--rv-clip);
	transform-origin: var(--rv-origin);
	transition:
		opacity var(--sjbs-dur, 900ms) ease,
		translate var(--sjbs-dur, 900ms) var(--rv-ease),
		scale var(--sjbs-dur, 900ms) var(--rv-ease),
		rotate var(--sjbs-dur, 900ms) var(--rv-ease),
		filter var(--sjbs-dur, 900ms) ease,
		clip-path calc(var(--sjbs-dur, 900ms) * 1.2) cubic-bezier(.65, 0, .35, 1);
	transition-delay: calc(var(--sjbs-base-delay, 0ms) + var(--sjbs-delay, 0ms));
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-reveal.is-visible {
	rotate: var(--rv-ax) 0deg;
	clip-path: inset(-50% -50% -50% -50%);
}

.sjbs-style-iris .sjbs-reveal.is-visible {
	--rv-done: circle(150% at 50% 50%);
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-style-iris .sjbs-reveal.is-visible,
.sjbs-home.sjbs-anim.sjbs-js.sjbs-style-iris .sjbs-reveal.is-visible {
	clip-path: circle(150% at 50% 50%);
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-letters,
.sjbs-home.sjbs-anim.sjbs-js .sjbs-letters:not(.is-visible),
.sjbs-home.sjbs-anim.sjbs-js .sjbs-ab-h.sjbs-reveal {
	clip-path: none;
}

/* Card entrance: wave & domino */
.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-wave > .sjbs-reveal:not(.is-visible) {
	translate: 0 calc(var(--sjbs-dist, 34px) * 2.2);
	rotate: 1, 0, 0 0deg;
	scale: .9;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-wave > .sjbs-reveal:nth-child(even):not(.is-visible) {
	translate: 0 calc(var(--sjbs-dist, 34px) * -2.2);
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-domino > .sjbs-reveal {
	transform-origin: 0% 100%;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-fx-domino > .sjbs-reveal:not(.is-visible) {
	translate: 0 0;
	scale: 1;
	rotate: 0, 1, 0 -95deg;
	opacity: 0;
}

/* ==========================================================================
   2. Banner title animations (Page Banner → Title Animation)
   ========================================================================== */
.sjbs-home.sjbs-anim.sjbs-js .sjbs-tfx-drop .sjbs-l {
	translate: 0 -1.4em;
	rotate: x 0deg;
	filter: none;
	transition-timing-function: ease, cubic-bezier(.3, 1.8, .5, 1), ease, ease;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-tfx-flip .sjbs-l {
	translate: 0 0;
	rotate: y 90deg;
	filter: none;
	transform-origin: 50% 50%;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-tfx-flip.is-visible .sjbs-l {
	rotate: y 0deg;
}

.sjbs-home.sjbs-anim.sjbs-js .sjbs-tfx-scale .sjbs-l {
	translate: 0 0;
	scale: 3;
	rotate: x 0deg;
	filter: blur(10px);
}

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

.sjbs-home.sjbs-anim.sjbs-js .sjbs-tfx-type .sjbs-l {
	translate: 0 0;
	rotate: x 0deg;
	filter: none;
	transition: opacity 1ms linear;
	transition-delay: calc(var(--sjbs-base-delay, 0ms) + var(--l, 0) * 55ms + 200ms);
}

.sjbs-home .sjbs-tfx-wave.is-visible .sjbs-l {
	animation: sjbs-tfx-wave 6s ease-in-out infinite;
	animation-delay: calc(2.4s + var(--l, 0) * 60ms);
}

@keyframes sjbs-tfx-wave {
	0%, 12%, 100% { transform: translateY(0); }
	5%            { transform: translateY(-.16em); color: var(--sjbs-royal); }
}

.sjbs-home .sjbs-tfx-shine .sjbs-l {
	background: linear-gradient(100deg, var(--sjbs-navy) 0 40%, #7FB1FF 50%, var(--sjbs-navy) 60% 100%);
	background-size: 400% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.sjbs-home .sjbs-tfx-shine.is-visible .sjbs-l {
	animation: sjbs-tfx-shine 5s ease-in-out infinite;
	animation-delay: calc(2.2s + var(--l, 0) * 25ms);
}

@keyframes sjbs-tfx-shine {
	0%   { background-position: 100% 0; }
	30%, 100% { background-position: 0% 0; }
}

/* ==========================================================================
   3. Line icons vs 3D icons in cards
   ========================================================================== */
.sjbs-home .sjbs-line-ic {
	display: none;
}

.sjbs-home.sjbs-icons-line :is(.sjbs-s-card__icon, .sjbs-s-tcard__icon, .sjbs-s-mini__icon, .sjbs-s-step__icon, .sjbs-s-stat__icon, .sjbs-ip-card__icon, .sjbs-ip-cc__icon, .sjbs-acc__icon, .sjbs-ip-tab__icon) img.sjbs-3d {
	display: none !important;
}

.sjbs-home.sjbs-icons-line :is(.sjbs-s-card__icon, .sjbs-s-tcard__icon, .sjbs-s-mini__icon, .sjbs-s-step__icon, .sjbs-s-stat__icon, .sjbs-ip-card__icon, .sjbs-ip-cc__icon, .sjbs-acc__icon, .sjbs-ip-tab__icon) .sjbs-line-ic {
	display: block;
	width: 1em;
	height: 1em;
	color: var(--sjbs-royal);
}

.sjbs-home.sjbs-icons-line :is(.sjbs-s-card__icon, .sjbs-s-tcard__icon, .sjbs-s-mini__icon, .sjbs-s-step__icon, .sjbs-ip-card__icon, .sjbs-ip-cc__icon) {
	--sjbs-card-icon: 20px !important;
	width: calc(var(--sjbs-card-icon) + 20px) !important;
	height: calc(var(--sjbs-card-icon) + 20px) !important;
	border: 0;
	border-radius: 50%;
	background: #FFFFFF !important;
	box-shadow: 0 6px 14px -6px rgba(47, 107, 255, .5), inset 0 0 0 1px rgba(47, 107, 255, .12) !important;
	font-size: var(--sjbs-card-icon) !important;
}

.sjbs-home.sjbs-icons-line .sjbs-s-stat__icon .sjbs-line-ic {
	color: var(--sjbs-gold);
}

.sjbs-home.sjbs-icons-line .sjbs-s-stat__icon {
	font-size: 26px;
}

/* ==========================================================================
   4. Reference card design – soft blue glow, centred, light type
   (every page except the Gallery photo mosaic)
   ========================================================================== */
.sjbs-home.sjbs-cards-ref {
	--ref-bg: #ECF1FF;
	--ref-glow: rgba(98, 140, 255, .62);
	--ref-line: rgba(150, 182, 255, .95);
	--ref-title: #1B2440;
	--ref-text: #6B7591;
}

.sjbs-home.sjbs-cards-ref :is(.sjbs-s-card:not(.sjbs-s--flip .sjbs-s-card), .sjbs-s-mini, .sjbs-s-tcard, .sjbs-s-step__card, .sjbs-ip-card:not(.sjbs-ip-xcard), .sjbs-ip-cc),
.sjbs-home.sjbs-cards-ref .sjbs-s--flip .sjbs-s-flip__back {
	border: 1px solid var(--ref-line) !important;
	border-radius: 8px;
	background: var(--ref-bg) !important;
	box-shadow: inset 0 0 30px 6px var(--ref-glow), 0 22px 40px -30px rgba(47, 107, 255, .7) !important;
	color: var(--ref-text);
	text-align: center;
}

/* Glass look over the banner (exactly like the reference) */
.sjbs-home.sjbs-cards-ref .sjbs-s--glass .sjbs-s-card {
	background: rgba(236, 241, 255, .72) !important;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

.sjbs-home.sjbs-cards-ref :is(.sjbs-s-card, .sjbs-s-tcard, .sjbs-s-step__card, .sjbs-ip-card:not(.sjbs-ip-xcard), .sjbs-ip-cc) {
	align-items: center;
}

.sjbs-home.sjbs-cards-ref .sjbs-s-card__body {
	display: flex !important;
	flex-direction: column;
	align-items: center !important;
	text-align: center;
}

.sjbs-home.sjbs-cards-ref .sjbs-s--glass .sjbs-s-card__body {
	grid-template-columns: none;
}

.sjbs-home.sjbs-cards-ref .sjbs-s-card__num {
	display: none;
}

.sjbs-home.sjbs-cards-ref :is(.sjbs-s-card__title, .sjbs-s-tcard__title, .sjbs-s-step__title, .sjbs-s-mini__title, .sjbs-ip-card__title, .sjbs-ip-cc__title) {
	margin: 16px 0 8px !important;
	font-family: var(--sjbs-font-ui) !important;
	font-size: clamp(18px, 1.5vw, 21px) !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--ref-title) !important;
}

.sjbs-home.sjbs-cards-ref :is(.sjbs-s-card__text, .sjbs-s-tcard__text, .sjbs-s-step__text, .sjbs-s-mini__text, .sjbs-ip-card__text, .sjbs-ip-cc__text) {
	max-width: 32ch;
	margin: 0 auto !important;
	font-size: 13.5px !important;
	line-height: 1.6 !important;
	color: var(--ref-text) !important;
}

.sjbs-home.sjbs-cards-ref .sjbs-s-card,
.sjbs-home.sjbs-cards-ref .sjbs-s-tcard {
	padding: 30px 26px 30px;
}

.sjbs-home.sjbs-cards-ref .sjbs-s--glass .sjbs-s-card__icon,
.sjbs-home.sjbs-cards-ref .sjbs-s--glass .sjbs-s-card__text {
	grid-row: auto;
	grid-column: auto;
}

/* Cards with a picture keep it at the top, rounded inside the glow */
.sjbs-home.sjbs-cards-ref :is(.sjbs-s--levels .sjbs-s-card, .sjbs-s-card--news) {
	padding: 10px 10px 28px;
}

.sjbs-home.sjbs-cards-ref :is(.sjbs-s-card__media, .sjbs-s-tcard__media, .sjbs-ip-card__media) {
	border-radius: 6px !important;
	overflow: hidden;
}

.sjbs-home.sjbs-cards-ref .sjbs-s--levels .sjbs-s-card::before {
	display: none;
}

.sjbs-home.sjbs-cards-ref .sjbs-s--levels .sjbs-s-card__media + .sjbs-s-card__body .sjbs-s-card__icon {
	margin-top: -26px;
	border: 0;
}

.sjbs-home.sjbs-cards-ref .sjbs-s-track--cards .sjbs-s-tcard__icon {
	margin: -24px auto 0;
}

.sjbs-home.sjbs-cards-ref .sjbs-s-track--cards .sjbs-s-tcard {
	align-items: center;
	text-align: center;
	padding: 10px 10px 24px;
}

.sjbs-home.sjbs-cards-ref .sjbs-s-track--chips .sjbs-s-tcard::after {
	display: none;
}

/* 2×2 cards next to the image (all the same, like the reference) */
.sjbs-home.sjbs-cards-ref .sjbs-s--cards .sjbs-s-mini {
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.sjbs-home.sjbs-cards-ref .sjbs-s--cards .sjbs-s-mini__body {
	align-items: center;
}

.sjbs-home.sjbs-cards-ref .sjbs-s-mini {
	text-align: center;
}

.sjbs-home.sjbs-cards-ref .sjbs-s-minis--chips .sjbs-s-mini {
	text-align: left;
	box-shadow: inset 0 0 16px 2px var(--ref-glow) !important;
	border-radius: 999px;
}

.sjbs-home.sjbs-cards-ref .sjbs-s-minis--chips .sjbs-s-mini__title {
	margin: 0 !important;
	font-size: 15px !important;
}

.sjbs-home.sjbs-cards-ref .sjbs-s-mini:not(.sjbs-s-minis--chips .sjbs-s-mini) {
	flex-direction: column;
	align-items: center;
	padding: 26px 20px;
}

/* Steps */
.sjbs-home.sjbs-cards-ref .sjbs-s-step__icon {
	float: none;
	margin: 0 auto 10px;
}

.sjbs-home.sjbs-cards-ref .sjbs-s-steps--vertical .sjbs-s-step__card::after {
	background: var(--ref-bg);
}

/* Houses */
.sjbs-home.sjbs-cards-ref .sjbs-s--houses .sjbs-s-card::before {
	display: none;
}

/* Flip cards: front keeps the photo, back is the reference card */
.sjbs-home.sjbs-cards-ref .sjbs-s--flip .sjbs-s-flip__back {
	align-items: center;
}

.sjbs-home.sjbs-cards-ref .sjbs-s--flip .sjbs-s-flip__back .sjbs-s-card__more {
	color: var(--sjbs-navy);
}

.sjbs-home.sjbs-cards-ref .sjbs-s--flip .sjbs-s-flip__front {
	border-radius: 8px;
}

.sjbs-home.sjbs-cards-ref .sjbs-s-flip__face {
	border-radius: 8px;
}

/* "More" link inside the reference card */
.sjbs-home.sjbs-cards-ref .sjbs-s-card__more {
	justify-content: center;
	font-weight: 700;
	font-size: 13.5px;
}

.sjbs-home.sjbs-cards-ref .sjbs-s-card__more i {
	width: 28px;
	height: 28px;
}

/* Reused pages (Mission priorities, Contact cards) */
.sjbs-home.sjbs-cards-ref .sjbs-ip-card__body {
	align-items: center;
	text-align: center;
}

.sjbs-home.sjbs-cards-ref .sjbs-ip-card .sjbs-ab-feat__line,
.sjbs-home.sjbs-cards-ref .sjbs-ip-cc .sjbs-ab-feat__line {
	display: none;
}

/* ==========================================================================
   5. Hover effects (Creative Effects → Card Hover Effect)
   ========================================================================== */
.sjbs-home :is(.sjbs-s-card, .sjbs-s-tcard, .sjbs-s-mini, .sjbs-s-step__card, .sjbs-ip-card, .sjbs-ip-cc) {
	transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease, background-color .3s ease, border-color .3s ease;
}

.sjbs-home.sjbs-hover-none :is(.sjbs-s-card, .sjbs-s-tcard, .sjbs-s-mini):hover {
	transform: none !important;
}

.sjbs-home.sjbs-hover-glow :is(.sjbs-s-card, .sjbs-s-tcard, .sjbs-s-mini, .sjbs-s-step__card, .sjbs-ip-card, .sjbs-ip-cc):hover {
	box-shadow: inset 0 0 30px 6px rgba(98, 140, 255, .55), 0 0 0 3px rgba(47, 107, 255, .35), 0 24px 48px -20px rgba(47, 107, 255, .8) !important;
}

.sjbs-home.sjbs-hover-pop :is(.sjbs-s-card, .sjbs-s-tcard, .sjbs-s-mini, .sjbs-ip-card, .sjbs-ip-cc):hover {
	transform: scale(1.05) !important;
}

.sjbs-home.sjbs-hover-tilt :is(.sjbs-s-card, .sjbs-s-tcard, .sjbs-s-mini, .sjbs-ip-card, .sjbs-ip-cc):hover {
	transform: perspective(700px) rotateX(8deg) rotateY(-10deg) translateY(-6px) !important;
}

.sjbs-home.sjbs-hover-shine :is(.sjbs-s-card:not(.sjbs-s--flip .sjbs-s-card), .sjbs-s-tcard, .sjbs-s-mini, .sjbs-s-step__card, .sjbs-ip-card, .sjbs-ip-cc) {
	overflow: hidden;
}

.sjbs-home.sjbs-hover-shine :is(.sjbs-s-card:not(.sjbs-s--flip .sjbs-s-card), .sjbs-s-tcard, .sjbs-s-mini, .sjbs-s-step__card, .sjbs-ip-cc)::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: -60%;
	z-index: 4;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
	transform: skewX(-18deg);
	pointer-events: none;
	transition: left .9s cubic-bezier(.2, .8, .2, 1);
}

.sjbs-home.sjbs-hover-shine :is(.sjbs-s-card, .sjbs-s-tcard, .sjbs-s-mini, .sjbs-s-step__card, .sjbs-ip-cc):hover::after {
	left: 130%;
}

.sjbs-home.sjbs-hover-shine .sjbs-s-steps--vertical .sjbs-s-step__card::after {
	transition: none;
}

/* ==========================================================================
   6. Icons while idle (Creative Effects → Icons While Idle)
   ========================================================================== */
.sjbs-home.sjbs-anim :is(.sjbs-s-card__icon, .sjbs-s-tcard__icon, .sjbs-s-mini__icon, .sjbs-s-step__icon, .sjbs-ip-card__icon, .sjbs-ip-cc__icon) {
	position: relative;
}

.sjbs-home.sjbs-anim.sjbs-idle-none :is(.sjbs-s-card__icon, .sjbs-s-tcard__icon) img {
	animation: none !important;
}

.sjbs-home.sjbs-anim.sjbs-idle-float :is(.sjbs-s-card__icon, .sjbs-s-tcard__icon, .sjbs-s-mini__icon, .sjbs-s-step__icon, .sjbs-ip-card__icon, .sjbs-ip-cc__icon) .sjbs-line-ic {
	animation: sjbs-bob 3.2s ease-in-out infinite;
	animation-delay: calc(var(--sjbs-i, 0) * -.5s);
}

.sjbs-home.sjbs-anim.sjbs-idle-pulse :is(.sjbs-s-card__icon, .sjbs-s-tcard__icon, .sjbs-s-mini__icon, .sjbs-s-step__icon, .sjbs-ip-card__icon, .sjbs-ip-cc__icon)::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--sjbs-royal);
	animation: sjbs-idle-pulse 2.4s ease-out infinite;
	animation-delay: calc(var(--sjbs-i, 0) * -.4s);
}

@keyframes sjbs-idle-pulse {
	from { transform: scale(1); opacity: .7; }
	to   { transform: scale(1.7); opacity: 0; }
}

.sjbs-home.sjbs-anim.sjbs-idle-flip :is(.sjbs-s-card__icon, .sjbs-s-tcard__icon, .sjbs-s-mini__icon, .sjbs-s-step__icon, .sjbs-ip-card__icon, .sjbs-ip-cc__icon) {
	animation: sjbs-idle-flip 5s ease-in-out infinite;
	animation-delay: calc(var(--sjbs-i, 0) * .6s);
}

@keyframes sjbs-idle-flip {
	0%, 70%, 100% { transform: perspective(300px) rotateY(0); }
	85%           { transform: perspective(300px) rotateY(180deg); }
}

.sjbs-home.sjbs-anim.sjbs-idle-wiggle :is(.sjbs-s-card__icon, .sjbs-s-tcard__icon, .sjbs-s-mini__icon, .sjbs-s-step__icon, .sjbs-ip-card__icon, .sjbs-ip-cc__icon) {
	animation: sjbs-idle-wiggle 4s ease-in-out infinite;
	animation-delay: calc(var(--sjbs-i, 0) * .5s);
}

@keyframes sjbs-idle-wiggle {
	0%, 80%, 100% { transform: rotate(0); }
	84%           { transform: rotate(-14deg); }
	88%           { transform: rotate(12deg); }
	92%           { transform: rotate(-8deg); }
	96%           { transform: rotate(4deg); }
}

/* ==========================================================================
   7. Reference heading (pill with wings, light + bold title) & photo mosaic
   ========================================================================== */
.sjbs-home .sjbs-xhead {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 760px;
	margin: 0 auto 54px;
	text-align: center;
}

.sjbs-home .sjbs-xhead__pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.sjbs-home .sjbs-xhead__wing {
	position: relative;
	display: block;
	width: 64px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, rgba(47, 107, 255, 0), var(--sjbs-royal));
}

.sjbs-home .sjbs-xhead__wing::after {
	content: "";
	position: absolute;
	right: -4px;
	top: -4px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--sjbs-royal);
	box-shadow: 0 0 0 4px rgba(47, 107, 255, .18);
}

.sjbs-home .sjbs-xhead__wing--r {
	transform: scaleX(-1);
}

.sjbs-home .sjbs-xhead__tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 14px;
	border: 1px solid rgba(47, 107, 255, .35);
	border-radius: 999px;
	background: rgba(255, 255, 255, .7);
	font-family: var(--sjbs-font-ui);
	font-size: 13px;
	font-weight: 600;
	color: var(--sjbs-royal);
}

.sjbs-home .sjbs-xhead__tag .sjbs-line-ic {
	display: block;
	width: 15px;
	height: 15px;
}

.sjbs-home .sjbs-xhead__title {
	margin: 0;
	font-size: clamp(36px, 4.6vw, 58px);
	line-height: 1;
	text-wrap: balance;
}

.sjbs-home .sjbs-xhead__light {
	font-family: var(--sjbs-font-ui);
	font-weight: 300;
	letter-spacing: -.02em;
	color: #5E6B8C;
}

.sjbs-home .sjbs-xhead__bold {
	font-family: var(--sjbs-font-head);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sjbs-navy);
}

.sjbs-home .sjbs-xhead__text {
	max-width: 620px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.75;
	color: #5E6B8C;
}

.sjbs-home .sjbs-xhead .sjbs-s-actions {
	justify-content: center;
	margin-top: 6px;
}

.sjbs-home .sjbs-s-quote--center {
	width: min(100%, 620px);
	margin-top: 6px;
	text-align: center;
}

.sjbs-home .sjbs-s-quote--center .sjbs-s-quote__dots {
	justify-content: center;
}

.sjbs-home .sjbs-s--center,
.sjbs-home .sjbs-ip-albums--mosaic {
	overflow: hidden;
	background:
		radial-gradient(900px 500px at 50% 0%, rgba(255, 255, 255, .95), transparent 70%),
		linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #DDE7FF 100%);
}

.sjbs-home .sjbs-ip-albums--mosaic {
	padding-bottom: 120px;
}

.sjbs-home .sjbs-ip-albums--mosaic .sjbs-ip-stars {
	display: none;
}

.sjbs-home .sjbs-mosaic {
	--gap: var(--sjbs-mt-gap, 16px);
	--th: var(--sjbs-mt-h, 230px);
	--offu: var(--sjbs-mt-off, 90px);
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--sjbs-mcols, 5), minmax(0, 1fr));
	align-items: start;
	gap: var(--gap);
	max-width: calc(var(--sjbs-max, 1240px) - 40px);
	margin: 0 auto;
	padding: calc(var(--offu) * .7) 28px 0;
}

.sjbs-home .sjbs-mosaic--edges {
	width: calc(100% + 16%);
	max-width: none;
	margin-left: -8%;
	padding-inline: 0;
}

.sjbs-home .sjbs-mosaic__col {
	display: grid;
	gap: var(--gap);
	translate: 0 calc(var(--off, 0) * var(--offu) + var(--cp, 0px));
	will-change: translate;
}

.sjbs-home .sjbs-mtile {
	position: relative;
	display: block;
	height: var(--th);
	overflow: hidden;
	border-radius: var(--sjbs-mt-r, 14px);
	background: linear-gradient(160deg, #3D7BFF, #1F55E0);
	box-shadow: 0 22px 40px -26px rgba(23, 52, 140, .8);
	text-decoration: none;
	color: #FFFFFF;
	isolation: isolate;
}

.sjbs-home .sjbs-mosaic__col:nth-child(3n + 2) .sjbs-mtile:nth-child(2),
.sjbs-home .sjbs-mosaic__col:nth-child(3n) .sjbs-mtile:nth-child(1) {
	background: linear-gradient(160deg, #2A63F0, #0F3FBF);
}

.sjbs-home .sjbs-mtile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform 1s cubic-bezier(.2, .8, .2, 1), filter .6s ease;
}

.sjbs-home .sjbs-mtile:hover img {
	transform: scale(1.08);
}

.sjbs-home .sjbs-mtile__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 40px 16px 15px;
	background: linear-gradient(180deg, transparent, var(--sjbs-mt-shade, rgba(11, 22, 48, .82)) 70%);
	text-align: left;
	transition: padding .4s ease;
}

.sjbs-home .sjbs-mtile__cap strong {
	font-family: var(--sjbs-font-head);
	font-size: 25px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #FFFFFF;
}

.sjbs-home .sjbs-mtile__cap em {
	font-size: 12.5px;
	font-style: normal;
	line-height: 1.45;
	color: rgba(255, 255, 255, .85);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sjbs-home .sjbs-mtile__badge {
	align-self: flex-start;
	margin-bottom: 4px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .22);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sjbs-home .sjbs-mtile__go {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--sjbs-royal);
	opacity: 0;
	transform: scale(.6) rotate(-90deg);
	transition: opacity .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.sjbs-home .sjbs-mtile__go .sjbs-svg-icon {
	transform: rotate(-45deg);
}

.sjbs-home .sjbs-mtile:hover .sjbs-mtile__go,
.sjbs-home .sjbs-mtile:focus-visible .sjbs-mtile__go {
	opacity: 1;
	transform: none;
}

.sjbs-home .sjbs-mtile:hover .sjbs-mtile__cap {
	padding-bottom: 22px;
}

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

.sjbs-home .sjbs-mtile__shine {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 45%, transparent 60%);
	background-size: 250% 100%;
	background-position: 120% 0;
	transition: background-position 1.1s ease;
	pointer-events: none;
}

.sjbs-home .sjbs-mtile:hover .sjbs-mtile__shine {
	background-position: -40% 0;
}

/* Mosaic tiles enter with a 3D flip from below, one after another */
.sjbs-home.sjbs-anim.sjbs-js .sjbs-mtile.sjbs-reveal:not(.is-visible) {
	translate: 0 80px;
	rotate: 1, 0, 0 -45deg;
	scale: .9;
	clip-path: inset(-50% -50% -50% -50%);
}

@media (max-width: 1024px) {
	.sjbs-home .sjbs-mosaic {
		--th: var(--sjbs-mt-h, 190px);
	}
}

/* Gallery on tablets: three staggered columns so every photo and caption fits the screen. */
@media (min-width: 768px) and (max-width: 1024px) {
	.sjbs-home .sjbs-ip-albums--mosaic .sjbs-mosaic {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: auto;
		max-width: none;
		margin: 0 auto;
		padding: 0 24px 40px;
	}

	.sjbs-home .sjbs-ip-albums--mosaic .sjbs-mosaic__col {
		display: contents;
	}

	.sjbs-home .sjbs-ip-albums--mosaic .sjbs-mtile:nth-child(odd) {
		translate: 0 28px;
	}
}

@media (max-width: 767px) {
	.sjbs-home .sjbs-mosaic,
	.sjbs-home .sjbs-mosaic--edges {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: auto;
		margin: 0 auto;
		padding: 0 18px;
		--th: 180px;
	}

	.sjbs-home .sjbs-mosaic__col {
		display: contents;
	}

	.sjbs-home .sjbs-mtile:nth-child(odd) {
		translate: 0 18px;
	}

	.sjbs-home .sjbs-xhead__wing {
		width: 34px;
	}

	.sjbs-home .sjbs-mtile__cap strong {
		font-size: 21px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sjbs-home:not(.sjbs-force-motion) .sjbs-mosaic__col {
		translate: 0 calc(var(--off, 0) * var(--offu));
	}
}

/* ==========================================================================
   8. Section widgets (each page section is its own Elementor widget)
   ========================================================================== */
.sjbs-home .sjbs-ip-body--empty {
	display: none;
}

.sjbs-home.sjbs-pull-up {
	position: relative;
	z-index: 3;
	margin-top: -110px;
}

.sjbs-home.sjbs-pull-up .sjbs-s--overlap {
	margin-top: 0;
}

.sjbs-home.sjbs-part-cards .sjbs-ip-contact {
	padding-bottom: 0;
}

.sjbs-home.sjbs-part-form .sjbs-ip-contact {
	padding-top: 0;
}

.elementor-widget-container > .sjbs-home.sjbs-sec-widget {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.sjbs-home.sjbs-pull-up {
		margin-top: 0;
	}
}

/* ==========================================================================
   9. Information tables, link anchors and longer texts (v1.4)
   ========================================================================== */
.sjbs-home .sjbs-anchor {
	display: block;
	position: relative;
	top: -120px;
	visibility: hidden;
}

.sjbs-home .sjbs-lead + .sjbs-lead--more,
.sjbs-home .sjbs-lead--more + .sjbs-lead--more {
	margin-top: var(--sjbs-p-gap, 16px);
}

.sjbs-home .sjbs-s-tablewrap {
	overflow: hidden;
	border: 1px solid var(--ref-line, rgba(150, 182, 255, .95));
	border-radius: 14px;
	background: #FFFFFF;
	box-shadow: inset 0 0 30px 6px rgba(98, 140, 255, .12), 0 22px 40px -30px rgba(47, 107, 255, .7);
}

.sjbs-home .sjbs-s-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ref-text, #6B7591);
}

.sjbs-home .sjbs-s-table thead th {
	padding: 16px 22px;
	background: var(--sjbs-c-navy, #0B1630);
	font-family: var(--sjbs-font-ui, inherit);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
	color: #FFFFFF;
}

.sjbs-home .sjbs-s-table tbody tr {
	border-top: 1px solid rgba(150, 182, 255, .45);
	transition: background-color .25s ease;
}

.sjbs-home .sjbs-s-table tbody tr:first-child {
	border-top: 0;
}

.sjbs-home .sjbs-s-table tbody tr:nth-child(even) {
	background: #F5F8FF;
}

.sjbs-home .sjbs-s-table tbody tr:hover {
	background: #ECF1FF;
}

.sjbs-home .sjbs-s-table :is(th, td) {
	padding: 15px 22px;
	vertical-align: top;
	text-align: left;
}

.sjbs-home .sjbs-s-table__title {
	width: 34%;
	font-weight: 600;
	color: var(--ref-title, #1B2440);
}

.sjbs-home .sjbs-s-table__tag,
.sjbs-home .sjbs-s-table__link {
	width: 1%;
	white-space: nowrap;
}

.sjbs-home .sjbs-s-table__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--sjbs-c-primary, #2F6BFF);
	font-size: 13px;
	font-weight: 700;
	color: #FFFFFF !important;
	text-decoration: none;
	transition: transform .25s ease, background-color .25s ease;
}

.sjbs-home .sjbs-s-table__btn:hover,
.sjbs-home .sjbs-s-table__btn:focus-visible {
	transform: translateX(3px);
	background: var(--sjbs-c-navy, #0B1630);
}

.sjbs-home .sjbs-s-table__btn .sjbs-svg-icon {
	width: 15px;
	height: 15px;
}

.sjbs-home .sjbs-s-actions--center {
	justify-content: center;
	margin-top: 30px;
}

@media (max-width: 700px) {
	.sjbs-home .sjbs-s-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.sjbs-home .sjbs-s-table,
	.sjbs-home .sjbs-s-table tbody,
	.sjbs-home .sjbs-s-table tr,
	.sjbs-home .sjbs-s-table :is(th, td) {
		display: block;
		width: auto !important;
	}

	.sjbs-home .sjbs-s-table tbody tr {
		padding: 14px 18px;
	}

	.sjbs-home .sjbs-s-table :is(th, td) {
		padding: 3px 0;
		white-space: normal;
	}

	.sjbs-home .sjbs-s-table__link {
		padding-top: 10px !important;
	}
}

/* Optional banner background video */
.sjbs-home .sjbs-banner__video {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.sjbs-home .sjbs-banner__video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sjbs-home .sjbs-banner__vshade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(238, 243, 255, .92) 0%, rgba(238, 243, 255, .72) 45%, rgba(238, 243, 255, .15) 100%);
}

.sjbs-home .sjbs-banner--video-only .sjbs-b3d {
	display: none;
}

@media (max-width: 767px) {
	.sjbs-home .sjbs-banner__vshade {
		background: linear-gradient(180deg, rgba(238, 243, 255, .9), rgba(238, 243, 255, .7));
	}
}

@media (prefers-reduced-motion: reduce) {
	.sjbs-home:not(.sjbs-force-motion) .sjbs-banner__video video {
		display: none;
	}
}

/* Contact form: robot check */
.sjbs-home .sjbs-ip-human.is-error,
.sjbs-home .sjbs-ip-human.is-error .sjbs-ip-check {
	color: #D93A40;
	border-color: #D93A40;
}

.sjbs-home .sjbs-ip-captcha {
	margin: 4px 0 6px;
}

/* ---------------------------------------------------------------- 10. Message with the photo on the right (optional) */
@media (min-width: 901px) {
	.sjbs-home .sjbs-s--quote.is-rev .sjbs-s-msg {
		grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	}

	.sjbs-home .sjbs-s--quote.is-rev .sjbs-s-msg__img {
		order: 2;
	}
}

/* ---------------------------------------------------------------- 11. A single card left on the last row sits in the middle */
@media (min-width: 901px) {
	.sjbs-home .sjbs-s-grid.sjbs-s-cols-3 > .sjbs-s-card:last-child:nth-child(3n+1) {
		grid-column: 2;
	}
}

/* ==========================================================================
   12. Banner title animations – played by CSS as soon as the page shows, so the
   heading always animates (also when a caching/optimisation plugin delays the
   theme script). Each page keeps its own effect; a soft light sweep follows.
   ========================================================================== */
@keyframes sjbs-tl-rise {
	0%   { opacity: 0; translate: 0 .5em; rotate: x 60deg; }
	60%  { opacity: 1; }
	100% { opacity: 1; translate: 0 0; rotate: x 0deg; }
}

@keyframes sjbs-tl-drop {
	0%   { opacity: 0; translate: 0 -1.4em; }
	55%  { opacity: 1; translate: 0 .14em; }
	75%  { translate: 0 -.06em; }
	100% { opacity: 1; translate: 0 0; }
}

@keyframes sjbs-tl-flip {
	0%   { opacity: 0; rotate: y 90deg; }
	100% { opacity: 1; rotate: y 0deg; }
}

@keyframes sjbs-tl-scale {
	0%   { opacity: 0; scale: 2.2; }
	100% { opacity: 1; scale: 1; }
}

@keyframes sjbs-tl-type {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

.sjbs-home.sjbs-anim .sjbs-banner__title.sjbs-letters .sjbs-l {
	display: inline-block;
	transform-origin: 50% 100%;
	transition: none;
	filter: none;
	backface-visibility: hidden;
	animation: sjbs-tl-rise calc(var(--sjbs-dur, 900ms) * 1.1) cubic-bezier(.22, .8, .3, 1) both;
	animation-delay: calc(var(--sjbs-base-delay, 0ms) + 150ms + var(--l, 0) * 40ms);
}

.sjbs-home.sjbs-anim .sjbs-banner__title.sjbs-tfx-drop .sjbs-l {
	animation-name: sjbs-tl-drop;
	animation-timing-function: ease-out;
}

.sjbs-home.sjbs-anim .sjbs-banner__title.sjbs-tfx-flip .sjbs-l {
	transform-origin: 50% 50%;
	animation-name: sjbs-tl-flip;
}

.sjbs-home.sjbs-anim .sjbs-banner__title.sjbs-tfx-scale .sjbs-l {
	animation-name: sjbs-tl-scale;
}

.sjbs-home.sjbs-anim .sjbs-banner__title.sjbs-tfx-type .sjbs-l {
	animation-name: sjbs-tl-type;
	animation-duration: 1ms;
	animation-timing-function: linear;
	animation-delay: calc(var(--sjbs-base-delay, 0ms) + 300ms + var(--l, 0) * 70ms);
}

/* Wave: rise in, then a gentle wave every few seconds. */
.sjbs-home.sjbs-anim .sjbs-banner__title.sjbs-tfx-wave .sjbs-l {
	animation: sjbs-tl-rise calc(var(--sjbs-dur, 900ms) * 1.1) cubic-bezier(.22, .8, .3, 1) both, sjbs-tfx-wave 6s ease-in-out infinite;
	animation-delay: calc(var(--sjbs-base-delay, 0ms) + 150ms + var(--l, 0) * 40ms), calc(2.4s + var(--l, 0) * 60ms);
}

/* Light sweep: each letter brightens in turn, so a soft light travels along the title.
   (Smooth on every device; keeps the title colour chosen in Elementor.) */
@keyframes sjbs-tl-glint {
	0%, 16%, 100% { -webkit-text-fill-color: currentColor; }
	7%            { -webkit-text-fill-color: #5A8DFF; }
}

.sjbs-home.sjbs-anim .sjbs-banner__title.sjbs-tfx-shine .sjbs-l {
	background: none;
	color: inherit;
	-webkit-text-fill-color: currentColor;
	animation: sjbs-tl-rise calc(var(--sjbs-dur, 900ms) * 1.1) cubic-bezier(.22, .8, .3, 1) both, sjbs-tl-glint 6s linear infinite;
	animation-delay: calc(var(--sjbs-base-delay, 0ms) + 150ms + var(--l, 0) * 40ms), calc(2.6s + var(--l, 0) * 45ms);
}

.sjbs-home.sjbs-anim .sjbs-banner__title.sjbs-tglint.sjbs-tfx-rise .sjbs-l {
	animation: sjbs-tl-rise calc(var(--sjbs-dur, 900ms) * 1.1) cubic-bezier(.22, .8, .3, 1) both, sjbs-tl-glint 6s linear infinite;
	animation-delay: calc(var(--sjbs-base-delay, 0ms) + 150ms + var(--l, 0) * 40ms), calc(2.6s + var(--l, 0) * 45ms);
}

.sjbs-home.sjbs-anim .sjbs-banner__title.sjbs-tglint.sjbs-tfx-drop .sjbs-l {
	animation: sjbs-tl-drop calc(var(--sjbs-dur, 900ms) * 1.1) ease-out both, sjbs-tl-glint 6s linear infinite;
	animation-delay: calc(var(--sjbs-base-delay, 0ms) + 150ms + var(--l, 0) * 40ms), calc(2.6s + var(--l, 0) * 45ms);
}

.sjbs-home.sjbs-anim .sjbs-banner__title.sjbs-tglint.sjbs-tfx-flip .sjbs-l {
	animation: sjbs-tl-flip calc(var(--sjbs-dur, 900ms) * 1.1) cubic-bezier(.22, .8, .3, 1) both, sjbs-tl-glint 6s linear infinite;
	animation-delay: calc(var(--sjbs-base-delay, 0ms) + 150ms + var(--l, 0) * 40ms), calc(2.6s + var(--l, 0) * 45ms);
}

.sjbs-home.sjbs-anim .sjbs-banner__title.sjbs-tglint.sjbs-tfx-scale .sjbs-l {
	animation: sjbs-tl-scale calc(var(--sjbs-dur, 900ms) * 1.1) cubic-bezier(.22, .8, .3, 1) both, sjbs-tl-glint 6s linear infinite;
	animation-delay: calc(var(--sjbs-base-delay, 0ms) + 150ms + var(--l, 0) * 40ms), calc(2.6s + var(--l, 0) * 45ms);
}

.sjbs-home.sjbs-anim .sjbs-banner__title.sjbs-tglint.sjbs-tfx-type .sjbs-l {
	animation: sjbs-tl-type 1ms linear both, sjbs-tl-glint 6s linear infinite;
	animation-delay: calc(var(--sjbs-base-delay, 0ms) + 300ms + var(--l, 0) * 70ms), calc(2.8s + var(--l, 0) * 45ms);
}

/* Sections set to "No animation", scroll-linked mode and "reduce motion" (when respected). */
.sjbs-home.sjbs-anim .sjbs-noanim .sjbs-banner__title.sjbs-letters[class] .sjbs-l,
.sjbs-home.sjbs-anim.sjbs-scrub .sjbs-banner__title.sjbs-letters[class] .sjbs-l {
	animation: none;
	opacity: 1;
	translate: none;
	rotate: none;
	scale: none;
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.sjbs-home.sjbs-anim[data-motion="respect"] .sjbs-banner__title.sjbs-letters[class] .sjbs-l {
		animation: none;
		opacity: 1;
		translate: none;
		rotate: none;
		scale: none;
		filter: none;
	}
}

/* Wait for the heading font before starting (no jump when the font swaps in). */
.sjbs-home.sjbs-anim.sjbs-tl-wait .sjbs-banner__title.sjbs-letters .sjbs-l {
	animation-play-state: paused;
}

/* ==========================================================================
   13. Watermark icons – soft page-related icons fill empty space beside a
   picture (or above a heading). Shown only when the theme script finds room.
   ========================================================================== */
.sjbs-home .sjbs-s-split,
.sjbs-home .sjbs-s-split__top {
	position: relative;
}

.sjbs-home .sjbs-wm {
	position: absolute;
	z-index: 0;
	display: none;
	pointer-events: none;
	color: var(--sjbs-royal);
	opacity: 0;
	transition: opacity .8s ease;
}

.sjbs-home .sjbs-wm.is-on {
	display: block;
	opacity: 1;
}

.sjbs-home .sjbs-wm--split {
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--sjbs-split-img-w, 48%);
}

.sjbs-home .is-rev .sjbs-wm--split {
	left: auto;
	right: 0;
}

.sjbs-home .sjbs-wm__zone {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: var(--wm-h, 0px);
	overflow: hidden;
}

.sjbs-home .sjbs-wm__zone--a {
	top: 0;
}

.sjbs-home .sjbs-wm__zone--b {
	bottom: 0;
}

.sjbs-home .sjbs-wm--top {
	top: 0;
	left: 0;
	width: 52%;
	height: var(--wm-h, 0px);
	overflow: hidden;
}

.sjbs-home .sjbs-wm--top.is-on {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.sjbs-home .sjbs-wm__ic {
	display: block;
	width: clamp(64px, 7vw, 116px);
	height: clamp(64px, 7vw, 116px);
	max-height: 80%;
	opacity: .13;
	transform: rotate(calc(-12deg + var(--i, 0) * 9deg));
	animation: sjbs-wm-float 9s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -2.2s);
}

.sjbs-home .sjbs-wm__ic:nth-child(even) {
	align-self: flex-end;
	width: clamp(48px, 5vw, 84px);
	height: clamp(48px, 5vw, 84px);
}

.sjbs-home .sjbs-wm .sjbs-line-ic {
	display: block;
	width: 100%;
	height: 100%;
	stroke-width: 1.2;
}

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

@media (max-width: 900px) {
	.sjbs-home .sjbs-wm,
	.sjbs-home .sjbs-wm.is-on {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sjbs-home:not(.sjbs-force-motion) .sjbs-wm__ic {
		animation: none;
	}
}