/* GSAP Scroll Blocks — front-end styles
   Default look: minimal light. Inherits typography/colour from theme tokens. */

.gsb-text-reveal {
	display: block;
}

.gsb-text-reveal__el {
	margin: 0;
	color: var(--gsb-color-heading);
	line-height: 1.15;
}

.gsb-text-reveal.gsb-font-heading .gsb-text-reveal__el {
	font-family: var(--gsb-font-heading);
}

.gsb-text-reveal.gsb-font-body .gsb-text-reveal__el {
	font-family: var(--gsb-font-body);
}

/* Word-spans hold chars together so words don't break mid-character at line
   boundaries. Char-spans are individually animated. */
.gsb-text-reveal__el .gsb-word {
	display: inline-block;
	white-space: nowrap;
}

.gsb-text-reveal__el .gsb-char {
	display: inline-block;
	will-change: transform, filter, opacity;
}

/* ---------- Parallax cards ---------- */

.gsb-parallax-cards {
	position: relative;
	overflow: visible;
	padding: 4rem 1rem;
}

.gsb-parallax-cards__row {
	display: grid;
	grid-template-columns: 1fr minmax(280px, 520px) 1fr;
	align-items: center;
	gap: 2rem;
	max-width: 1280px;
	margin: 0 auto;
}

.gsb-parallax-cards__card {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #f0f0f2;
	will-change: transform;
}

.gsb-parallax-cards__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gsb-parallax-cards--shadow .gsb-parallax-cards__card {
	box-shadow: 0 30px 60px -20px rgba(15, 17, 26, 0.25);
}

.gsb-parallax-cards__center {
	text-align: center;
}

.gsb-parallax-cards__centermedia {
	display: block;
	margin: 0 auto 1.25rem;
	line-height: 0; /* removes inline-image baseline gap */
}

.gsb-parallax-cards__centermedia img,
.gsb-parallax-cards__centermedia svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* When centre media sits BELOW the body text, flip the spacing. */
.gsb-parallax-cards__center > .gsb-parallax-cards__centermedia:last-child {
	margin: 1.5rem auto 0;
}

.gsb-parallax-cards__heading {
	font-family: var(--gsb-font-heading);
	color: var(--gsb-color-heading);
	font-size: clamp(1.75rem, 3.5vw, 3rem);
	line-height: 1.1;
	margin: 0 0 1rem;
}

.gsb-parallax-cards__body {
	font-family: var(--gsb-font-body);
	color: var(--gsb-color-body);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
	opacity: 0.85;
}

/* Stack on small screens. We still apply the GSAP transforms, but on a
   smaller scale the visual is forgiving. */
@media ( max-width: 768px ) {
	.gsb-parallax-cards__row {
		grid-template-columns: 1fr;
	}
	.gsb-parallax-cards__card {
		aspect-ratio: 4 / 3;
		max-width: 100%;
	}
}

/* ---------- Image Expand ---------- */

.gsb-image-expand {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4rem 1rem;
	min-height: 100vh;
}

.gsb-image-expand__frame {
	position: relative;
	overflow: hidden;
	background: #f0f0f2;
	max-width: 100%;
	will-change: width, height, border-radius;
}

.gsb-image-expand__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gsb-image-expand__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem;
	z-index: 1;
	pointer-events: none;
}

.gsb-image-expand__overlay--darken::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45) );
	z-index: -1;
}

.gsb-image-expand__heading {
	font-family: var(--gsb-font-heading);
	font-size: clamp(1.75rem, 4vw, 3.25rem);
	line-height: 1.1;
	margin: 0 0 1rem;
	color: inherit;
}

.gsb-image-expand__body {
	font-family: var(--gsb-font-body);
	font-size: 1rem;
	line-height: 1.55;
	margin: 0;
	max-width: 36rem;
	color: inherit;
	opacity: 0.92;
}

/* ---------- Horizontal Cards ---------- */

.gsb-horizontal-cards {
	/* Break out of any theme content container — horizontal pinned scroll
	   needs full viewport width to work. Negative-margin trick spans the
	   full viewport regardless of parent width constraints. */
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
	background: var(--gsb-color-bg);
}

.gsb-horizontal-cards__pinned {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding: 4rem 0 0;
}

.gsb-horizontal-cards__header {
	max-width: 1280px;
	margin: 0 auto 2.5rem;
	padding: 0 2rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: end;
}

.gsb-horizontal-cards__heading {
	font-family: var(--gsb-font-heading);
	color: var(--gsb-color-heading);
	font-size: clamp(1.75rem, 3.5vw, 3rem);
	line-height: 1.1;
	margin: 0;
}

.gsb-horizontal-cards__body {
	font-family: var(--gsb-font-body);
	color: var(--gsb-color-body);
	font-size: 1rem;
	line-height: 1.55;
	margin: 0;
	max-width: 36rem;
	opacity: 0.85;
}

.gsb-horizontal-cards__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.5rem;
	padding: 0 2rem;
	will-change: transform;
}

/* Defensive: if rogue inline elements (e.g. stray <strong> from malformed user
   HTML in items) end up as direct children of the track, hide them so they
   can't disrupt the horizontal flex layout. The force_balance_tags() call in
   PHP should prevent these from ever appearing, but belt-and-braces. */
.gsb-horizontal-cards__track > strong,
.gsb-horizontal-cards__track > em,
.gsb-horizontal-cards__track > span,
.gsb-horizontal-cards__track > b,
.gsb-horizontal-cards__track > i,
.gsb-horizontal-cards__track > a {
	display: none;
}

.gsb-horizontal-cards__card {
	flex: 0 0 clamp(280px, 28vw, 420px);
	position: relative;
	overflow: hidden;
	background: #f0f0f2;
	display: flex;
	flex-direction: column;
}

.gsb-horizontal-cards__card--shadow {
	box-shadow: 0 20px 40px -20px rgba(15, 17, 26, 0.25);
}

.gsb-horizontal-cards__media {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.gsb-horizontal-cards__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.gsb-horizontal-cards__card:hover .gsb-horizontal-cards__media img {
	transform: scale(1.04);
}

.gsb-horizontal-cards__meta {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 1.25rem;
	color: #fff;
	z-index: 1;
}

.gsb-horizontal-cards__meta::before {
	content: "";
	position: absolute;
	inset: -2rem -1.25rem -1.25rem -1.25rem;
	background: linear-gradient( 180deg, transparent, rgba(0,0,0,0.55) );
	z-index: -1;
	pointer-events: none;
}

.gsb-horizontal-cards__title {
	font-family: var(--gsb-font-heading);
	font-size: 1.4rem;
	line-height: 1.15;
	margin: 0 0 0.5rem;
}

.gsb-horizontal-cards__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.gsb-horizontal-cards__tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 0.2rem 0.6rem;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	backdrop-filter: blur(6px);
}

@media (max-width: 768px) {
	.gsb-horizontal-cards__header {
		grid-template-columns: 1fr;
	}
}

/* ---------- Card Spread ---------- */

.gsb-card-spread {
	position: relative;
	padding: 4rem 1rem;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gsb-card-spread__stage {
	position: relative;
	width: 100%;
	max-width: 1280px;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gsb-card-spread__card {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	background: #f0f0f2;
	aspect-ratio: 4 / 5;
	will-change: transform, opacity;
}

.gsb-card-spread__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gsb-card-spread--shadow .gsb-card-spread__card {
	box-shadow: 0 30px 60px -20px rgba(15, 17, 26, 0.35);
}

.gsb-card-spread__label {
	position: absolute;
	top: -14px;
	left: -8px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.3rem 0.7rem;
	color: #fff;
	background: var(--gsb-color-accent, #2255ee);
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35);
	transform: rotate(-3deg);
}

/* The first card uses a centred transform; subsequent cards get this same
   centring as a base and GSAP applies translate/rotate on top. */
.gsb-card-spread__card {
	transform: translate(-50%, -50%);
}

/* ---------- Section Background Colour marker ---------- */

.gsb-section-bg-marker {
	display: block;
	width: 100%;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	pointer-events: none;
}

/* ---------- Scatter to Align ---------- */

.gsb-scatter-align {
	padding: 4rem 1rem;
}

.gsb-scatter-align__row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	max-width: 1280px;
	margin: 0 auto;
}

.gsb-scatter-align__item {
	flex: 1 1 0;
	min-width: 0;
	will-change: transform, opacity;
}

.gsb-scatter-align__item img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

@media ( max-width: 768px ) {
	.gsb-scatter-align__row {
		flex-wrap: wrap;
		gap: 1rem !important;
	}
	.gsb-scatter-align__item {
		flex: 0 0 calc(50% - 0.5rem);
	}
}

/* ---------- Floating Pills ---------- */

.gsb-floating-pills {
	position: relative;
	padding: 4rem 1rem;
	min-height: 70vh;
}

.gsb-floating-pills__stage {
	position: relative;
	width: 100%;
	max-width: 1280px;
	min-height: 60vh;
	margin: 0 auto;
}

.gsb-floating-pills__center {
	position: relative;
	z-index: 1;
	max-width: 36rem;
	margin: 0 auto;
	text-align: center;
	padding: 6rem 1rem;
}

.gsb-floating-pills__centerimage {
	display: block;
	margin: 0 auto 1.5rem;
	max-width: 60%;
	height: auto;
}

.gsb-floating-pills__centerheading {
	font-family: var(--gsb-font-heading);
	color: var(--gsb-color-heading);
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.1;
	margin: 0 0 1rem;
}

.gsb-floating-pills__centerbody {
	font-family: var(--gsb-font-body);
	color: var(--gsb-color-body);
	font-size: 1rem;
	line-height: 1.55;
	margin: 0;
	opacity: 0.85;
}

.gsb-floating-pills__pill {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	font-size: 0.85rem;
	font-weight: 500;
	border-radius: 999px;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(8px);
	z-index: 2;
	will-change: transform, opacity;
}

.gsb-floating-pills__icon {
	display: inline-block;
	line-height: 1;
}

.gsb-floating-pills__text {
	line-height: 1.2;
}

@media ( max-width: 768px ) {
	/* On narrow screens, pills can stack on top of the centre. Reduce their
	   visual weight rather than try to reposition. */
	.gsb-floating-pills__pill {
		font-size: 0.75rem;
		padding: 0.35rem 0.7rem;
	}
}

/* ---------- Image Row (Scroll Pan) ---------- */

.gsb-image-row {
	/* Break out of any theme content container — the pan needs to feel like
	   it extends past the viewport. */
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
	padding: 1rem 0;
}

.gsb-image-row__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	will-change: transform;
	padding: 0 1rem;
}

.gsb-image-row__item {
	flex: 0 0 auto;
	overflow: hidden;
	background: #f0f0f2;
}

.gsb-image-row__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Stacking Cards ---------- */

.gsb-stacking-cards {
	/* Edge-to-edge so cards feel like a full-bleed section. */
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 2rem 1.5rem 8rem;
	display: flex;
	flex-direction: column;
	/* Default gap: none — cards stack flush. The "sliver" effect comes from
	   each card's sticky top being offset progressively, not from gaps. */
}

.gsb-stacking-cards__card {
	position: sticky;
	top: calc( var(--gsb-stick-top, 80px) + var(--i, 0) * var(--gsb-stack-offset, 32px) );
	/* z-index ensures later cards visually sit on top of earlier ones. */
	z-index: calc( var(--i, 0) + 1 );
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	padding: 2rem 2.5rem;
	margin-bottom: 1.5rem;
	overflow: hidden;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.4);
	transform-origin: center top;
	will-change: transform;
}

.gsb-stacking-cards__card--image-right .gsb-stacking-cards__media { order: 2; }
.gsb-stacking-cards__card--image-right .gsb-stacking-cards__body  { order: 1; }

.gsb-stacking-cards__media {
	overflow: hidden;
	border-radius: 16px;
	min-height: 280px;
}

.gsb-stacking-cards__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gsb-stacking-cards__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
	padding: 1rem 0;
}

.gsb-stacking-cards__label {
	margin: 0;
	font-family: var(--gsb-sc-label-family, inherit);
	font-size: var(--gsb-sc-label-size, 0.85rem);
	line-height: var(--gsb-sc-label-line, 1.4);
	color: var(--gsb-sc-label-color, inherit);
	letter-spacing: 0.05em;
	opacity: 0.85;
}

.gsb-stacking-cards__heading {
	margin: 0 0 0.5rem;
	font-family: var(--gsb-sc-heading-family, var(--gsb-font-heading));
	font-size: var(--gsb-sc-heading-size, clamp(1.75rem, 3vw, 2.75rem));
	line-height: var(--gsb-sc-heading-line, 1.1);
	color: var(--gsb-sc-heading-color, inherit);
}

.gsb-stacking-cards__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.gsb-stacking-cards__list li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-family: var(--gsb-sc-bullets-family, inherit);
	font-size: var(--gsb-sc-bullets-size, 0.95rem);
	line-height: var(--gsb-sc-bullets-line, 1.45);
	color: var(--gsb-sc-bullets-color, inherit);
}

.gsb-stacking-cards__list-icon {
	flex-shrink: 0;
	font-weight: 600;
	opacity: 0.9;
	/* Font Awesome icons inherit their own size from FA's CSS but respect the
	   list's color via 'currentColor'. For literal characters we just inherit. */
}

.gsb-stacking-cards__list-text {
	flex: 1;
}

/* When no icon is shown, drop the gap so spacing is tighter. */
.gsb-stacking-cards__list--no-icon li {
	gap: 0;
}

.gsb-stacking-cards__cta {
	align-self: flex-start;
	margin-top: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1.1rem;
	background: rgba(255, 255, 255, 0.95);
	color: var(--gsb-sc-cta-color, #111);
	border-radius: 999px;
	font-weight: 500;
	font-family: var(--gsb-sc-cta-family, inherit);
	font-size: var(--gsb-sc-cta-size, 0.9rem);
	line-height: var(--gsb-sc-cta-line, 1.2);
	text-decoration: none;
	transition: transform 0.2s ease;
}

.gsb-stacking-cards__cta:hover {
	transform: translateY(-1px);
}

.gsb-stacking-cards__cta::after {
	content: "↗";
	font-weight: 600;
	display: inline-block;
}

/* On mobile, each card collapses to single column (image on top, text below)
   AND the stack offset is reduced so on a phone you see slimmer slivers. */
@media ( max-width: 768px ) {
	.gsb-stacking-cards {
		padding: 1rem 1rem 4rem;
	}
	.gsb-stacking-cards__card {
		grid-template-columns: 1fr;
		padding: 1.5rem;
		gap: 1.25rem;
		top: calc( var(--gsb-stick-top, 80px) + var(--i, 0) * 18px );
	}
	.gsb-stacking-cards__card--image-right .gsb-stacking-cards__media,
	.gsb-stacking-cards__card--image-right .gsb-stacking-cards__body {
		order: unset;
	}
	.gsb-stacking-cards__media { min-height: 200px; }
	.gsb-stacking-cards__heading { font-size: 1.5rem; }
}

/* ---------- Sticky Side ---------- */

.gsb-sticky-side {
	position: relative;
	width: 100%;
	padding: 4rem 1.5rem;
}

.gsb-sticky-side__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	max-width: 1280px;
	margin: 0 auto;
	align-items: start;
}

.gsb-sticky-side__left {
	position: sticky;
	top: var(--gsb-sticky-top, 80px);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-bottom: 2rem;
	/* No overflow constraint — if content is taller than viewport, sticky
	   pins for as long as there's room and then scrolls naturally. */
}

.gsb-sticky-side__eyebrow {
	margin: 0;
	font-family: var(--gsb-ss-eyebrow-family, inherit);
	font-size: var(--gsb-ss-eyebrow-size, 0.95rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--gsb-ss-eyebrow-color, var(--gsb-accent, #e3501c));
	text-align: var(--gsb-ss-eyebrow-align, left);
}

.gsb-sticky-side__heading {
	margin: 0;
	font-family: var(--gsb-ss-heading-family, var(--gsb-font-heading));
	font-size: var(--gsb-ss-heading-size, clamp(1.75rem, 3.5vw, 3rem));
	line-height: 1.05;
	color: var(--gsb-ss-heading-color, var(--gsb-color-heading));
	text-align: var(--gsb-ss-heading-align, left);
}

/* Heading media: outer wrapper handles alignment via flex justify-content
   so the inner element's padding/margin never fights with alignment margins. */
.gsb-sticky-side__heading-media-wrap {
	display: flex;
	width: 100%;
}

.gsb-sticky-side__heading-media-wrap--align-left   { justify-content: flex-start; }
.gsb-sticky-side__heading-media-wrap--align-center { justify-content: center; }
.gsb-sticky-side__heading-media-wrap--align-right  { justify-content: flex-end; }

.gsb-sticky-side__heading-media {
	display: block;
	line-height: 0; /* removes inline-image baseline gap */
	margin: 0 0 1rem; /* default; overridden by inline style if user sets margin */
}

.gsb-sticky-side__heading-media img,
.gsb-sticky-side__heading-media svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* When the media sits BELOW the heading, flip the default margin direction.
   Only applies if the user hasn't overridden margin via the inspector. */
.gsb-sticky-side__heading + .gsb-sticky-side__heading-media-wrap .gsb-sticky-side__heading-media {
	margin: 1rem 0 0;
}

.gsb-sticky-side__body {
	margin: 0;
	color: var(--gsb-ss-body-color, var(--gsb-color-body));
	font-family: var(--gsb-ss-body-family, inherit);
	font-size: var(--gsb-ss-body-size, 1rem);
	line-height: 1.55;
	text-align: var(--gsb-ss-body-align, left);
}

.gsb-sticky-side__person {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.gsb-sticky-side__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.gsb-sticky-side__avatar--placeholder {
	background: linear-gradient(135deg, #e0e0e0, #c0c0c0);
}

.gsb-sticky-side__name {
	margin: 0;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--gsb-color-heading);
}

.gsb-sticky-side__role {
	margin: 0;
	font-size: 0.85rem;
	color: var(--gsb-color-body);
	opacity: 0.75;
}

.gsb-sticky-side__ctas {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}

.gsb-sticky-side__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.65rem 1.25rem;
	border-radius: 999px;
	font-weight: 500;
	font-size: 0.95rem;
	text-decoration: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.gsb-sticky-side__btn::after {
	content: "→";
}

.gsb-sticky-side__btn--filled {
	color: #fff;
	border: 1px solid transparent;
}

.gsb-sticky-side__btn--outline {
	background: transparent;
	border: 1px solid currentColor;
}

.gsb-sticky-side__btn:hover {
	transform: translateY(-1px);
}

.gsb-sticky-side__right {
	display: flex;
	flex-direction: column;
}

/* Mirror variant: cards scroll on the left, narrative is pinned on the right.
   The narrative element stays sticky (it's always the pinned side); we just
   flip the grid order so it visually sits on the right. */
.gsb-sticky-side--pin-right .gsb-sticky-side__left  { order: 2; }
.gsb-sticky-side--pin-right .gsb-sticky-side__right { order: 1; }

/* Vertical alignment of the pinned column's content. Non-top alignments
   need an explicit min-height so flexbox has actual space to distribute
   children into. */
.gsb-sticky-side--align-center        .gsb-sticky-side__left,
.gsb-sticky-side--align-space-between .gsb-sticky-side__left,
.gsb-sticky-side--align-space-around  .gsb-sticky-side__left,
.gsb-sticky-side--align-space-evenly  .gsb-sticky-side__left {
	min-height: calc( 100vh - var(--gsb-sticky-top, 80px) - 2rem );
}
.gsb-sticky-side--align-center        .gsb-sticky-side__left { justify-content: center; }
.gsb-sticky-side--align-space-between .gsb-sticky-side__left { justify-content: space-between; }
.gsb-sticky-side--align-space-around  .gsb-sticky-side__left { justify-content: space-around; }
.gsb-sticky-side--align-space-evenly  .gsb-sticky-side__left { justify-content: space-evenly; }


.gsb-sticky-side__card {
	position: relative;
	overflow: hidden;
	background-color: #1f1f23;
	background-size: cover;
	background-position: center;
	color: #fff;
	min-height: 60vh;
	display: flex;
}

.gsb-sticky-side__card-overlay {
	position: absolute;
	inset: 0;
	background: var(--gsb-ss-overlay, rgba(0, 0, 0, 0.65));
	pointer-events: none;
}

.gsb-sticky-side__card-content {
	position: relative;
	z-index: 1;
	padding: 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
}

.gsb-sticky-side__card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.gsb-sticky-side__card-heading {
	margin: 0;
	font-family: var(--gsb-ss-card-heading-family, var(--gsb-font-heading));
	font-size: var(--gsb-ss-card-heading-size, clamp(1.25rem, 2vw, 1.75rem));
	line-height: 1.15;
	color: var(--gsb-ss-card-heading-color, #fff);
	text-align: var(--gsb-ss-card-heading-align, left);
}

.gsb-sticky-side__card-num {
	font-size: 0.85rem;
	opacity: 0.7;
	letter-spacing: 0.05em;
	flex: 0 0 auto;
}

.gsb-sticky-side__card-body {
	margin: 0.5rem 0 0;
	font-family: var(--gsb-ss-card-body-family, inherit);
	font-size: var(--gsb-ss-card-body-size, 0.95rem);
	line-height: 1.45;
	max-width: 32ch;
	opacity: 0.9;
	text-align: var(--gsb-ss-card-body-align, left);
	color: var(--gsb-ss-card-body-color, inherit);
}

.gsb-sticky-side__card-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1.5rem;
}

.gsb-sticky-side__card-cta-text {
	font-weight: 500;
}

.gsb-sticky-side__card-cta-arrow {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 600;
}

/* Mobile: drop the pin entirely, render as single-column flow.
   Left content first, then right cards stacked vertically. */
@media ( max-width: 768px ) {
	.gsb-sticky-side {
		padding: 2rem 1rem;
	}
	.gsb-sticky-side__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.gsb-sticky-side__left {
		position: static;
		max-height: none;
		overflow: visible;
		padding-bottom: 0;
	}
	/* Reset alignment-driven heights/justification on mobile so the single
	   column flows naturally instead of stretching to viewport height. */
	.gsb-sticky-side[class*="--align-"] .gsb-sticky-side__left {
		min-height: auto !important;
		justify-content: flex-start !important;
	}
	.gsb-sticky-side__card {
		min-height: 50vh;
	}
}

/* ---------- Horizontal Content Cards ---------- */

/* Inherits the pinned + track behaviour from .gsb-horizontal-cards (which the
   existing JS init drives). This block overrides the card visual styling. */

.gsb-horizontal-content-cards__intro {
	max-width: 60ch;
	margin: 0 auto 2.5rem;
	padding: 0 1.5rem;
	text-align: center;
}

.gsb-horizontal-content-cards__intro-heading {
	margin: 0 0 0.75rem;
	font-family: var(--gsb-font-heading);
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	line-height: 1.1;
	color: var(--gsb-color-heading);
}

.gsb-horizontal-content-cards__intro-body {
	margin: 0;
	color: var(--gsb-color-body);
	font-size: 1rem;
	line-height: 1.55;
}

/* The card itself — a full-bleed image with overlay and text. */
.gsb-horizontal-content-cards__card {
	flex: 0 0 var(--gsb-hcc-card-width, 70vw);
	max-width: var(--gsb-hcc-card-width, 70vw);
	aspect-ratio: var(--gsb-hcc-card-aspect, 4/5);
	position: relative;
	overflow: hidden;
	border-radius: var(--gsb-hcc-card-radius, 20px);
	background-color: #1f1f23;
	background-size: cover;
	background-position: center;
	box-shadow: 0 20px 40px -20px rgba(15, 17, 26, 0.35);
	display: flex;
}

.gsb-horizontal-content-cards__overlay {
	position: absolute;
	inset: 0;
	background: var(--gsb-hcc-overlay, rgba(0, 0, 0, 0.4));
	pointer-events: none;
}

.gsb-horizontal-content-cards__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	/* gap: 0 — using explicit per-element margins for the eyebrow → heading
	   (tight) → subheader (loose) hierarchy. */
	gap: 0;
	width: 100%;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	color: #fff;
}

/* Vertical placement of the content block inside the card. */
.gsb-horizontal-content-cards--va-top    .gsb-horizontal-content-cards__content { justify-content: flex-start; }
.gsb-horizontal-content-cards--va-center .gsb-horizontal-content-cards__content { justify-content: center; }
.gsb-horizontal-content-cards--va-bottom .gsb-horizontal-content-cards__content { justify-content: flex-end; }

.gsb-horizontal-content-cards__eyebrow {
	margin: 0 0 0.4rem;
	font-family: var(--gsb-hcc-eyebrow-family, inherit);
	font-size: var(--gsb-hcc-eyebrow-size, 0.85rem);
	line-height: var(--gsb-hcc-eyebrow-line, 1.4);
	color: var(--gsb-hcc-eyebrow-color, rgba(255, 255, 255, 0.85));
	text-align: var(--gsb-hcc-eyebrow-align, left);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.gsb-horizontal-content-cards__heading {
	margin: 0 0 1.75rem;
	font-family: var(--gsb-hcc-heading-family, var(--gsb-font-heading));
	font-size: var(--gsb-hcc-heading-size, clamp(1.5rem, 2.5vw, 2.25rem));
	line-height: var(--gsb-hcc-heading-line, 1.1);
	color: var(--gsb-hcc-heading-color, #fff);
	text-align: var(--gsb-hcc-heading-align, left);
}

.gsb-horizontal-content-cards__subheader {
	margin: 0 0 0.75rem;
	font-family: var(--gsb-hcc-subheader-family, inherit);
	font-size: var(--gsb-hcc-subheader-size, 1.1rem);
	line-height: var(--gsb-hcc-subheader-line, 1.4);
	color: var(--gsb-hcc-subheader-color, rgba(255, 255, 255, 0.95));
	text-align: var(--gsb-hcc-subheader-align, left);
	font-weight: 600;
}

.gsb-horizontal-content-cards__body {
	margin: 0 0 0.75rem;
	font-family: var(--gsb-hcc-body-family, inherit);
	font-size: var(--gsb-hcc-body-size, 1rem);
	line-height: var(--gsb-hcc-body-line, 1.55);
	color: var(--gsb-hcc-body-color, rgba(255, 255, 255, 0.9));
	text-align: var(--gsb-hcc-body-align, left);
	max-width: 45ch;
}

.gsb-horizontal-content-cards__items {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--gsb-hcc-items-family, inherit);
	font-size: var(--gsb-hcc-items-size, 0.95rem);
	line-height: var(--gsb-hcc-items-line, 1.5);
	color: var(--gsb-hcc-items-color, rgba(255, 255, 255, 0.9));
	text-align: var(--gsb-hcc-items-align, left);
}

.gsb-horizontal-content-cards__items li {
	margin: 0 0 0.4rem;
}

.gsb-horizontal-content-cards__items li:last-child {
	margin-bottom: 0;
}

/* Inline HTML inside items (e.g. <strong>Title:</strong>) inherits naturally. */
.gsb-horizontal-content-cards__items a {
	color: inherit;
	text-decoration: underline;
}

@media ( max-width: 768px ) {
	.gsb-horizontal-content-cards__card {
		flex: 0 0 85vw;
		max-width: 85vw;
	}
	.gsb-horizontal-content-cards__intro {
		margin-bottom: 1.5rem;
	}
}


@media ( prefers-reduced-motion: reduce ) {
	.gsb-parallax-cards__card,
	.gsb-text-reveal__el .gsb-char,
	.gsb-image-expand__frame,
	.gsb-horizontal-cards__track,
	.gsb-card-spread__card,
	.gsb-scatter-align__item,
	.gsb-floating-pills__pill,
	.gsb-image-row__track,
	.gsb-stacking-cards__card {
		transform: none !important;
		filter: none !important;
		opacity: 1 !important;
	}
	/* Reset the centred card to remain in place rather than vanish. */
	.gsb-card-spread__card { transform: translate(-50%, -50%) !important; }
	.gsb-floating-pills__pill { transform: translate(-50%, -50%) !important; }
}

/* ============================================================
 * Parallax Cards Fan
 * Three-column layout on desktop with sides that can extend beyond
 * the viewport edges (no overflow clip). Cards are absolutely
 * positioned within their side container and animate independently.
 * On mobile (≤768px), layout flips to: top fan → centre → bottom fan.
 *
 * KEY DESIGN: The wrapper does NOT clip overflow. Sides have negative
 * margins to extend into the page gutters. This lets cards travel
 * fully off-screen during animation without being cut off. If host
 * theme containers add their own overflow-x:hidden, the animation
 * still works horizontally because the cards only need vertical
 * overflow to not be clipped.
 * ============================================================ */

.gsb-parallax-cards-fan {
	position: relative;
	padding: 4rem 0;
	/* No overflow clip — cards must be able to extend beyond the section. */
	--gsb-pcf-card-width: 280px;
	--gsb-pcf-card-aspect: 3/4;
	--gsb-pcf-card-radius: 20px;
	--gsb-pcf-side-overflow: 200px;
}

/* The row spans the full width of the wrapper, edge to edge. The
   side columns are flexible (1fr each) and host the cards which sit
   absolutely positioned. Negative margins on the sides push them
   outward so cards have room to fly off-screen. */
.gsb-parallax-cards-fan__row {
	display: grid;
	grid-template-columns: 1fr minmax(0, 520px) 1fr;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	max-width: none;
	margin: 0;
	min-height: 70vh;
	padding: 0 2rem;
	box-sizing: border-box;
}

.gsb-parallax-cards-fan__side {
	position: relative;
	min-height: calc( var(--gsb-pcf-card-width) * 1.4 );
	/* Extend sides outward to give cards room to travel off-screen. */
	margin-left:  calc( var(--gsb-pcf-side-overflow) * -1 );
	margin-right: calc( var(--gsb-pcf-side-overflow) * -1 );
}

/* Centre content — vertical distribution + typography */
.gsb-parallax-cards-fan__center {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: calc( var(--gsb-pcf-card-width) * 1.4 );
}

.gsb-parallax-cards-fan--valign-top    .gsb-parallax-cards-fan__center { justify-content: flex-start; }
.gsb-parallax-cards-fan--valign-center .gsb-parallax-cards-fan__center { justify-content: center; }
.gsb-parallax-cards-fan--valign-space-between .gsb-parallax-cards-fan__center { justify-content: space-between; }
.gsb-parallax-cards-fan--valign-space-around  .gsb-parallax-cards-fan__center { justify-content: space-around; }
.gsb-parallax-cards-fan--valign-space-evenly  .gsb-parallax-cards-fan__center { justify-content: space-evenly; }

.gsb-parallax-cards-fan__centermedia {
	display: block;
	margin: 0 auto;
	line-height: 0;
}

.gsb-parallax-cards-fan__centermedia img,
.gsb-parallax-cards-fan__centermedia svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.gsb-parallax-cards-fan__eyebrow {
	margin: 0;
	font-family: var(--gsb-pcf-eyebrow-family, inherit);
	font-size: var(--gsb-pcf-eyebrow-size, 0.95rem);
	line-height: var(--gsb-pcf-eyebrow-line, 1.4);
	color: var(--gsb-pcf-eyebrow-color, var(--gsb-accent, #e3501c));
	text-align: var(--gsb-pcf-eyebrow-align, center);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.gsb-parallax-cards-fan__heading {
	margin: 0;
	font-family: var(--gsb-pcf-heading-family, var(--gsb-font-heading));
	font-size: var(--gsb-pcf-heading-size, clamp(1.75rem, 3.5vw, 3rem));
	line-height: var(--gsb-pcf-heading-line, 1.1);
	color: var(--gsb-pcf-heading-color, var(--gsb-color-heading));
	text-align: var(--gsb-pcf-heading-align, center);
}

.gsb-parallax-cards-fan__body {
	margin: 0;
	font-family: var(--gsb-pcf-body-family, var(--gsb-font-body));
	font-size: var(--gsb-pcf-body-size, 1rem);
	line-height: var(--gsb-pcf-body-line, 1.6);
	color: var(--gsb-pcf-body-color, var(--gsb-color-body));
	text-align: var(--gsb-pcf-body-align, center);
	opacity: 0.95;
}

.gsb-parallax-cards-fan__card {
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: center center;
	margin: calc( var(--gsb-pcf-card-width) * -0.5 ) 0 0 calc( var(--gsb-pcf-card-width) * -0.5 );
	width: var(--gsb-pcf-card-width);
	aspect-ratio: var(--gsb-pcf-card-aspect);
	border-radius: var(--gsb-pcf-card-radius);
	overflow: hidden;
	background: #f0f0f2;
	will-change: transform;
}

.gsb-parallax-cards-fan__card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gsb-parallax-cards-fan--shadow .gsb-parallax-cards-fan__card {
	box-shadow: 0 20px 40px -20px rgba(15, 17, 26, 0.35);
}

/* Mobile: stack vertically with fan layout for each side. */
@media ( max-width: 768px ) {
	.gsb-parallax-cards-fan {
		padding: 3rem 0;
	}
	.gsb-parallax-cards-fan__row {
		display: flex;
		flex-direction: column;
		gap: 2.5rem;
		min-height: 0;
		padding: 0 1rem;
	}
	/* On mobile drop the negative side margins — sides are full width
	   blocks stacked vertically; the fan happens within them. */
	.gsb-parallax-cards-fan__side {
		margin: 0;
		justify-content: center;
		min-height: calc( var(--gsb-pcf-card-width) * 1.5 );
		width: 100%;
		/* But still let cards extend beyond the section's bounds via the
		   ancestor wrapper having no overflow clip. */
	}
	.gsb-parallax-cards-fan__center {
		min-height: 0;
		order: 0;
	}
	/* Order: left side (top fan) → centre → right side (bottom fan) */
	.gsb-parallax-cards-fan__side--left  { order: -1; }
	.gsb-parallax-cards-fan__side--right { order: 1; }
	/* Shrink cards on mobile so the fan spread fits in the viewport. */
	.gsb-parallax-cards-fan {
		--gsb-pcf-card-width: clamp(160px, 45vw, 220px);
	}
}

/* Honour reduced motion for the new block too. */
@media ( prefers-reduced-motion: reduce ) {
	.gsb-parallax-cards-fan__card {
		transition: none !important;
	}
}