/**
 * Homepage sections — hero, journey, loyalty bento, partnerships, services
 * header, team, testimonials.
 */

/* Page loader ------------------------------------------------------------
   Covers the page while the hero's 124 scroll-scrubbed frames preload (see
   hero-frames-scroll.js) — without this, the hero canvas is blank until
   every frame finishes fetching. JS-only: without JS the frame sequence
   never runs anyway, so the loader would just sit there forever — the
   .js class (set by the inline script in header.php, mirroring the same
   no-js/js pattern used for the hero heading) gates it so it only shows
   when JS is actually running and can hide it again. */

.page-loader {
	display: none;
}

.js .page-loader {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 999;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	background: var(--color-white);
	transition: opacity 0.5s ease;
}

.page-loader.is-done {
	opacity: 0;
	pointer-events: none;
}

.page-loader__logo {
	width: 120px;
	height: auto;
}

.page-loader__bar {
	width: 200px;
	height: 4px;
	border-radius: var(--radius-pill);
	background: var(--color-gray-100);
	overflow: hidden;
}

.page-loader__bar-fill {
	width: 3%;
	height: 100%;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	transition: width 0.2s ease;
}

/* Hero ------------------------------------------------------------------ */

.hero {
	position: relative;
	/* Extra scroll distance the video plays across while the visual layer
	   below stays pinned to the viewport (300vh = 3 screens of scrolling).
	   Plain vh (not dvh) on purpose: dvh recalculates live as mobile browser
	   chrome shows/hides, which both visibly resizes this section mid-scroll
	   and destabilizes the scroll-progress math in hero-frames-scroll.js. */
	height: 300vh;
}

.hero__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.hero__frames {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-11) var(--container-padding) var(--space-13);
}

.hero__heading-stack {
	display: grid;
}

.hero__heading-stack > * {
	grid-area: 1 / 1;
}

.hero__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-display);
	line-height: var(--text-display-lh);
	color: var(--color-black);
	max-width: 16ch;
}

/* Visibility only — opacity/motion for both headings' split lines/words is
   driven entirely by hero-heading-motion.js (GSAP); these just gate whether
   the (always-present) DOM content can be seen/hit-tested at all. */

.hero__heading-reveal {
	visibility: hidden;
}

.hero__heading-stack.is-revealed .hero__heading-reveal {
	visibility: visible;
}

/* Primary heading is visible by default and only hidden once JS has split it
   and is ready to animate it in — see the no-js/js swap in header.php — so it
   still shows immediately if JS is blocked. */
.js .hero__heading-primary {
	visibility: hidden;
}

.js .hero__heading-primary.is-split-ready {
	visibility: visible;
}

.hero__heading-stack.is-primary-hidden .hero__heading-primary {
	visibility: hidden;
}

.hero__cta {
	margin-top: var(--space-9);
}

.hero__mark {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(1600px, 130vw);
	mix-blend-mode: soft-light;
	pointer-events: none;
}

/* Journey ----------------------------------------------------------------- */

.journey {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-13) var(--container-padding);
	display: flex;
	gap: var(--space-11);
	align-items: center;
}

.journey__left {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}

.journey__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.journey__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-h1);
	line-height: var(--text-h1-lh);
	color: var(--color-gray-800);
}

.journey__intro {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
	color: var(--color-gray-900);
}

.accordion__row {
	border-bottom: 1px solid var(--color-border);
}

.accordion__trigger {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	width: 100%;
	padding: var(--space-5) 0;
}

.accordion__number {
	font-family: var(--font-heading);
	font-weight: var(--weight-regular);
	font-size: var(--text-h2);
	line-height: var(--text-h2-lh);
	color: var(--color-gray-200);
	width: 63px;
	flex-shrink: 0;
	text-align: left;
	transition: color 0.3s ease;
}

.accordion__row.is-open .accordion__number {
	color: var(--color-primary-text);
}

.accordion__title-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	flex: 1;
	min-width: 0;
}

.accordion__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-regular);
	font-size: var(--text-body-lg);
	color: var(--color-gray-900);
	white-space: nowrap;
	transition: font-size 0.3s ease;
}

.accordion__row.is-open .accordion__title {
	font-weight: var(--weight-medium);
	font-size: var(--text-subtitle);
}

.accordion__description {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
	color: var(--color-gray-900);
	flex: 1;
	min-width: 200px;
}

.journey__card {
	flex: 1;
	min-width: 0;
	align-self: stretch;
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 560px;
}

.journey__card-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.journey__card-overlay {
	position: relative;
	margin-top: auto;
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.journey__card-title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-h4);
	line-height: var(--text-h1-lh);
}

.journey__card-text {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
}

/* Mobile-only full-bleed presentation — shown instead of .journey__left /
   .journey__card below 700px (see media query). Hidden by default. */
.journey-mobile {
	display: none;
}

/* Opaque filler stacked directly below .journey__card on mobile, so lifting
   the card off the true screen edge doesn't expose the list scrolling
   behind it (padding/margin on the card itself would leave a transparent
   gap). Hidden on desktop, where the card isn't pinned to the bottom edge
   at all. */
.journey__spacer {
	display: none;
}

/* Transparent on desktop (display: contents removes it from layout
   entirely, so .journey__card still participates directly as .journey's
   flex child, unchanged). On mobile this wrapper becomes the single sticky
   element — see media query — so the card and its spacer are laid out as
   plain stacked children and always move together as one unit, instead of
   each being sticky independently and drifting out of sync. */
.journey__card-wrap {
	display: contents;
}

/* Loyalty bento ------------------------------------------------------------ */

.loyalty {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-12) var(--container-padding);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-9);
}

.loyalty__header {
	display: flex;
	align-items: flex-end;
	gap: var(--space-7);
	width: 100%;
}

.loyalty__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-h1);
	line-height: var(--text-h1-lh);
	color: var(--color-black);
	max-width: 480px;
	flex-shrink: 0;
}

.loyalty__intro {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
	color: var(--color-gray-900);
	flex: 1;
}

.loyalty__grid {
	display: flex;
	gap: var(--space-5);
	width: 100%;
	align-items: stretch;
}

.loyalty__card--main {
	flex: 1;
	min-width: 0;
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 584px;
}

.loyalty__card-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.loyalty__card-overlay {
	position: relative;
	margin-top: auto;
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	color: var(--color-white);
}

.loyalty__card-title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-h4);
	line-height: var(--text-h4-lh);
}

.loyalty__card-text {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
}

.loyalty__column {
	width: 379px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.loyalty__support-image {
	flex: 1;
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.loyalty__support-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.loyalty__card--highlight {
	background: var(--color-primary);
	/* Was white text on the old dark indigo — the lighter brand teal needs
	   dark text instead (white would be ~2.1:1, well under WCAG AA).
	   Inherited by .loyalty__card-title/-text inside, both unset here. */
	color: var(--color-gray-900);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-4);
	min-height: 280px;
}

.loyalty__card--highlight .loyalty__card-title {
	font-weight: var(--weight-medium);
	font-size: var(--text-subtitle);
	line-height: var(--text-subtitle-lh);
}

/* Partnerships (black panel) ------------------------------------------------ */

.loyalty--partnerships-wrap {
	padding-top: 0;
}

.partnerships {
	width: 100%;
	background: var(--color-black);
	border-radius: var(--radius-2xl);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	color: var(--color-white);
}

.partnerships__header {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-7);
	padding-block: var(--space-7);
}

.partnerships__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-regular);
	font-size: var(--text-h3);
	line-height: var(--text-h3-lh);
	color: var(--color-white);
}

.partnerships__intro {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
	color: var(--color-gray-300);
}

.partnerships__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 382px);
	gap: var(--space-5);
}

.partnership-card {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.partnership-card:nth-child(1) { grid-column: 1; grid-row: 1; }
.partnership-card:nth-child(2) { grid-column: 1; grid-row: 2; }
.partnership-card:nth-child(3) { grid-column: 2; grid-row: 1; }
.partnership-card:nth-child(4) { grid-column: 2; grid-row: 2; }
.partnership-card:nth-child(5) { grid-column: 3; grid-row: 1 / 3; }

.partnership-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.partnership-card--text-light,
.partnership-card--image-only {
	background: var(--color-gray-100);
}

.partnership-card--text-purple {
	background: var(--color-primary);
}

.partnership-card__content {
	position: relative;
	margin-top: auto;
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.partnership-card--text-light .partnership-card__content,
.partnership-card--text-purple .partnership-card__content {
	height: 100%;
	justify-content: center;
}

.partnership-card--image-overlay .partnership-card__content {
	backdrop-filter: blur(13px);
	background: rgba(81, 94, 101, 0.09);
	justify-content: center;
	height: 387px;
}

.partnership-card__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-h4);
	line-height: var(--text-h4-lh);
	color: var(--color-white);
}

.partnership-card--text-light .partnership-card__title,
.partnership-card--text-purple .partnership-card__title {
	/* --text-purple used to sit on a dark indigo background, where the base
	   white title color worked fine — the lighter brand teal needs the
	   same dark override --text-light already uses. */
	color: var(--color-gray-900);
}

.partnership-card__text {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	line-height: var(--text-paragraph-lh);
	color: var(--color-gray-300);
}

.partnership-card--text-light .partnership-card__text {
	color: var(--color-gray-500);
}

.partnership-card--text-purple .partnership-card__text {
	/* Matches the black/gray-900 treatment used everywhere else text sits
	   on the primary-color background (CTA card, pricing sidebar, contact
	   pill, loyalty highlight) — gray-500 (shared with text-light's pale
	   gray card) was too light against the teal. */
	color: var(--color-gray-900);
}

/* Services header ---------------------------------------------------------- */

.services {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-12) var(--container-padding);
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"header link"
		"grid   grid";
	align-items: end;
	gap: var(--space-10) var(--space-6);
}

.services__header {
	grid-area: header;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.services__eyebrow {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-tag);
	letter-spacing: var(--text-tag-ls);
	text-transform: uppercase;
	color: var(--color-gray-600);
}

.services__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-regular);
	font-size: var(--text-h2);
	line-height: var(--text-h2-lh);
	color: var(--color-gray-900);
}

.services .services__grid {
	grid-area: grid;
}

.services__all-link {
	grid-area: link;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
	background: var(--color-gray-100);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	padding: var(--space-3) var(--space-5);
	font-family: var(--font-heading);
	font-weight: var(--weight-regular);
	font-size: var(--text-caption);
	color: var(--color-gray-900);
}

.services__all-link svg {
	width: 16px;
	height: 16px;
}

/* Team ---------------------------------------------------------------------- */

.team {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-13) var(--container-padding);
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
}

.team__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.team__eyebrow {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-tag);
	letter-spacing: var(--text-tag-ls);
	text-transform: uppercase;
	color: var(--color-gray-600);
	text-align: center;
}

.team__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-h1);
	line-height: var(--text-h1-lh);
	color: var(--color-black);
}

.team__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}

.team-card {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-gray-100);
	min-height: 663px;
	display: flex;
	flex-direction: column;
}

.team-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-card__overlay {
	position: relative;
	margin-top: auto;
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.team-card__name {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-h4);
	line-height: var(--text-h4-lh);
	color: var(--color-white);
}

.team-card__role {
	font-family: var(--font-body);
	font-size: var(--text-paragraph);
	color: var(--color-gray-300);
	margin-top: calc(var(--space-1) * -1);
}

.team-card__quote {
	font-family: var(--font-heading);
	font-weight: var(--weight-regular);
	font-size: var(--text-body);
	color: var(--color-white);
}

/* Team — 2-person layout: side-by-side split card (photo left, plain panel
   right) instead of the 3-up vertical overlay card, since a lone empty third
   grid slot looks unfinished rather than intentional. */
.team__grid--pair {
	grid-template-columns: repeat(2, 1fr);
}

.team-card--pair {
	flex-direction: row;
	min-height: 480px;
}

.team-card--pair .team-card__image {
	position: relative;
	inset: auto;
	width: 42%;
	flex-shrink: 0;
}

.team-card--pair .team-card__panel {
	flex: 1;
	min-width: 0;
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.team-card--pair .team-card__name {
	color: var(--color-gray-900);
}

.team-card--pair .team-card__role {
	color: var(--color-primary-text);
}

.team-card--pair .team-card__quote {
	color: var(--color-gray-900);
	margin-top: auto;
	padding-top: var(--space-6);
}

/* Testimonials --------------------------------------------------------------- */

.testimonials {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--space-13) var(--container-padding);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-10);
}

.testimonials__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	text-align: center;
}

.testimonials__eyebrow {
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-label);
	letter-spacing: var(--text-label-ls);
	text-transform: uppercase;
	color: var(--color-gray-400);
}

.testimonials__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-light);
	font-size: var(--text-h1);
	line-height: var(--text-h1-lh);
	color: var(--color-gray-800);
}

/* Testimonial wall — 2 columns, each auto-scrolling vertically on a seamless
   loop (track content is rendered twice back-to-back; the keyframe scrolls
   exactly -50%, i.e. one full copy, then repeats). Column 2 runs slower and
   in reverse for visual variety. White gradients mask the top/bottom edges
   so cards fade in/out instead of clipping. */
.testimonial-wall {
	position: relative;
	width: 100%;
	max-width: 1200px;
	display: flex;
	gap: var(--space-5);
	height: 700px;
	overflow: hidden;
}

.testimonial-wall::before,
.testimonial-wall::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 140px;
	pointer-events: none;
	z-index: 2;
}

.testimonial-wall::before {
	top: 0;
	background: linear-gradient(to bottom, var(--color-white), transparent);
}

.testimonial-wall::after {
	bottom: 0;
	background: linear-gradient(to top, var(--color-white), transparent);
}

.testimonial-wall__column {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.testimonial-wall__track {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	animation: testimonial-scroll 50s linear infinite;
}

.testimonial-wall__column--alt .testimonial-wall__track {
	animation-duration: 70s;
	animation-direction: reverse;
}

.testimonial-wall:hover .testimonial-wall__track {
	animation-play-state: paused;
}

@keyframes testimonial-scroll {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.testimonial-wall__track {
		animation: none;
	}
}

.testimonial-card {
	padding: var(--space-6);
	border-radius: var(--radius-xl);
	background: var(--color-gray-100);
}

.testimonial-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

.testimonial-card__source {
	font-family: var(--font-heading);
	font-weight: var(--weight-medium);
	font-size: var(--text-caption);
	letter-spacing: var(--text-tag-ls);
	color: var(--color-gray-400);
}

a.testimonial-card__source:hover {
	color: var(--color-primary-text);
}

.testimonial-card__header svg {
	width: 24px;
	height: 24px;
	color: var(--color-gray-300);
	flex-shrink: 0;
}

.testimonial-card__quote {
	font-family: var(--font-heading);
	font-weight: var(--weight-regular);
	font-size: var(--text-body);
	line-height: var(--text-body-lh);
	color: var(--color-gray-900);
}

/* Responsive ------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.journey,
	.loyalty__grid,
	.testimonial-slide {
		flex-direction: column;
	}

	.loyalty__column {
		width: 100%;
	}

	.team__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.partnerships__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 300px);
	}

	.partnership-card:nth-child(5) {
		grid-column: 1 / 3;
		grid-row: 3;
	}

	.testimonial-slide__stack {
		width: 100%;
		max-width: 340px;
		height: 380px;
	}
}

@media (max-width: 700px) {
	.hero__inner {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}

	/* Starts invisible and fades in at the same scroll moment the hero's
	   second/reveal text appears (.is-revealed, toggled by
	   hero-heading-motion.js) instead of being visible from the start — a
	   bottom-anchored version was tried earlier and didn't work here. */
	.hero__cta {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.6s ease;
	}

	.hero__heading-stack.is-revealed + .hero__cta {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.loyalty__header,
	.partnerships__header {
		flex-direction: column;
		align-items: flex-start;
	}
	.partnerships__header{
		display:flex;
	}

	/* header (own row) → grid → all-services link, instead of the link
	   sitting next to the heading like it does on desktop. */
	.services {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"grid"
			"link";
		align-items: start;
	}

	.services__all-link {
		justify-self: start;
	}

	.team__grid {
		grid-template-columns: 1fr;
	}

	/* The 2-person split card is too cramped as a side-by-side row on a
	   phone-width screen — collapse it back to the same vertical
	   image-with-overlay look the 3-up cards use (replicating .glass-overlay
	   here since the pair card's panel doesn't carry that class). */
	.team-card--pair {
		flex-direction: column;
		min-height: 663px;
		position: relative;
	}

	.team-card--pair .team-card__image {
		position: absolute;
		inset: 0;
		width: 100%;
	}

	.team-card--pair .team-card__panel {
		position: relative;
		margin-top: 100%;
		padding: var(--space-5);
		backdrop-filter: blur(13px);
		background: rgba(81, 94, 101, 0.09);
	}

	.team-card--pair .team-card__name,
	.team-card--pair .team-card__quote {
		color: var(--color-white);
		margin-top: 0;
		padding-top: 0;
	}

	.team-card--pair .team-card__role {
		color: var(--color-gray-300);
	}

	/* Bento (loyalty) cards had no mobile sizing at all — the desktop pixel
	   values (584px main card, 379px fixed column, 280px highlight card)
	   were leaking straight through, making the section render far taller
	   and wider than the ~350px content width and causing it to overflow. */
	.loyalty__card--main {
		min-height: 480px;
	}

	.loyalty__column {
		width: 100%;
	}

	.loyalty__support-image {
		flex: none;
		height: 240px;
	}

	.loyalty__card--highlight {
		min-height: 0;
	}

	.partnerships__grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.partnership-card {
		grid-column: 1;
		grid-row: auto;
		min-height: 320px;
	}

	.partnership-card:nth-child(1) {
	grid-column: 1;
    grid-row: 1;
	}
	
	.partnership-card:nth-child(2) {
	grid-column: 1;
    grid-row: 2;
	}

	.partnership-card:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
	}

	.partnership-card:nth-child(4) {
    grid-column: 1;
    grid-row: 4;
	}
	.partnership-card:nth-child(5) {
	grid-column: 1;
    grid-row: 5;

	} 
	/* Same issue: the "Flexible financing" overlay text box had a hardcoded
	   desktop height (387px) baked in with no mobile override. */
	.partnership-card--image-overlay .partnership-card__content {
		height: auto;
	}

	.accordion__title-group {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}

	/* Normal block flow: header+list+cta (.journey__left) first, then the
	   same single card element reused from desktop, stuck to the bottom of
	   the screen as you scroll through the list above it. */
	.journey {
		display: block;
		padding: var(--space-9) var(--container-padding);
	}

	.journey__header {
		/* Forces its own compositing layer so it repaints cleanly as it
		   scrolls past the sticky site nav above it — without this, some
		   browsers leave a stale "ghost" of the heading visible near the
		   nav after it should have scrolled away. */
		transform: translateZ(0);
	}

	.journey__card-wrap {
		display: block;
		position: sticky;
		bottom: 0;
		z-index: 2;
		margin-top: 140px;
	}

	.journey__card {
		height: 55vh;
		min-height: 0;
		background: var(--color-white);
	}

	.journey__spacer {
		display: block;
		height: 32px;
		background: var(--color-white);
	}

	.accordion__trigger {
		padding: var(--space-9) 0;
	}

	.journey__intro {
		display: none;
	}

	.testimonial-wall__column--alt {
		display: none;
	}
}

@media (max-width: 560px) {
	/* Matches the Figma mobile frame's centered link, once the services
	   grid switches to the single-column card list (see .services__grid
	   in components.css) — the ≤700px rule above still left-aligns it for
	   the wider mobile/tablet range. */
	.services__all-link {
		justify-self: center;
	}

	/* Homepage shows only the first 4 services on mobile, then the "All
	   services" link for the rest — scoped to the homepage's .services
	   section specifically (not the /services/ archive's .services__grid,
	   which should keep showing everything it queries). */
	.services .service-card:nth-child(n + 5) {
		display: none;
	}
}