/**
 * Story page.
 *
 * Loaded only on the page with slug "story". Figma frame "Story", 1512 wide.
 * Uses the theme design tokens from main.css. Section prefixes: shero, smarquee,
 * sintro, sfeature, stimeline, snews, sfranchise, ssocial, svalues.
 *
 *  1. Hero
 *  2. Marquee
 *  3. Intro
 *  4. Feature image + stats
 *  5. Timeline
 *  6. News
 *  7. Franchise
 *  8. Social
 *  9. Values
 * 10. Responsive
 */

/* -------------------------------------------------------------------------- */
/* 1. Hero                                                                     */
/* -------------------------------------------------------------------------- */

.shero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(560px, 52vw, 800px);
	padding-block: clamp(64px, 7vw, 120px);
	background: var(--c-purple);
	color: var(--c-white);
	isolation: isolate;
	text-align: center;
}

.shero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.shero__media img,
.shero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(87 61 167 / 55%) 0%, rgb(30 18 66 / 82%) 100%);
}

.shero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 1.6vw, 24px);
}

.shero__eyebrow {
	margin: 0;
	font-size: clamp(15px, 1.19vw, 18px);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
}

.shero__title {
	margin: 0;
	font-size: clamp(40px, 4.76vw, 72px); /* 72/1512 */
	font-weight: var(--fw-bold);
	letter-spacing: -0.02em;
	line-height: 1.02;
	text-transform: uppercase;
}

.shero__subtitle {
	max-width: 720px;
	margin: 0;
	font-size: clamp(16px, 1.32vw, 20px);
	font-weight: var(--fw-medium);
	line-height: 1.5;
}

.shero__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(28px, 3.5vw, 56px);
	margin: clamp(8px, 1vw, 16px) 0 0;
}

.shero__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.shero__stat-value {
	margin: 0;
	font-size: clamp(32px, 3.17vw, 48px);
	font-weight: var(--fw-semibold);
	line-height: 1;
}

.shero__stat-suffix {
	font-size: 0.66em;
	font-weight: var(--fw-medium);
}

.shero__stat-label {
	font-size: clamp(12px, 0.93vw, 14px);
	font-weight: var(--fw-medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.shero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: clamp(8px, 1vw, 16px);
}

/* -------------------------------------------------------------------------- */
/* 2. Marquee                                                                  */
/* -------------------------------------------------------------------------- */

.smarquee {
	overflow: hidden;
	padding-block: 16px;
	background: var(--c-purple);
	color: var(--c-white);
}

.smarquee__track {
	display: flex;
	width: max-content;
	animation: smarquee-scroll 26s linear infinite;
}

.smarquee__list {
	display: flex;
	align-items: center;
	gap: 48px;
	margin: 0;
	padding: 0 24px;
	list-style: none;
}

.smarquee__item {
	font-size: clamp(16px, 1.32vw, 20px);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}

.smarquee__item::after {
	content: "•";
	margin-left: 48px;
	opacity: 0.6;
}

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

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

/* -------------------------------------------------------------------------- */
/* 3. Intro                                                                    */
/* -------------------------------------------------------------------------- */

.sintro {
	padding-block: clamp(56px, 6.35vw, 96px);
	background: var(--c-white);
}

.sintro__grid {
	display: grid;
	grid-template-columns: minmax(0, 570fr) minmax(0, 806fr);
	gap: clamp(40px, 4.6vw, 70px);
	align-items: start;
}

.sintro__aside-inner {
	position: sticky;
	/* Clears the sticky site header, with a little breathing room. */
	top: calc(var(--header-h) + 24px);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sintro__eyebrow {
	margin: 0;
	color: var(--c-purple);
	font-size: 16px;
	font-weight: var(--fw-semibold);
	letter-spacing: 0.01em;
}

.sintro__title {
	margin: 0;
	color: var(--c-charcoal);
	font-size: clamp(30px, 3.17vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.sintro__title-accent {
	color: var(--c-purple);
}

.sintro__lead {
	margin: 0;
	color: var(--c-grey);
	font-size: clamp(16px, 1.32vw, 20px);
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.sintro__blocks {
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 4.2vw, 64px);
}

.sintro__block {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sintro__block-title {
	margin: 0;
	color: var(--c-charcoal);
	font-size: clamp(26px, 3.17vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.sintro__block-text {
	margin: 0;
	color: var(--c-grey);
	font-size: clamp(16px, 1.32vw, 20px);
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.sintro__block-media {
	overflow: hidden;
	border-radius: 16px;
	aspect-ratio: 806 / 540;
}

.sintro__block-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------------------------- */
/* 4. Feature image + stats                                                    */
/* -------------------------------------------------------------------------- */

.sfeature {
	padding-bottom: clamp(48px, 5.3vw, 80px);
	background: var(--c-white);
}

.sfeature__media {
	aspect-ratio: 1512 / 780;
	overflow: hidden;
}

.sfeature__media img,
.sfeature__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sfeature__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: clamp(40px, 4.6vw, 70px) 0 0;
	padding-top: clamp(28px, 3vw, 44px);
	border-top: 1px solid var(--c-cream);
}

.sfeature__stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sfeature__stat-value {
	margin: 0;
	color: var(--c-purple);
	font-size: clamp(40px, 4.76vw, 72px);
	font-weight: var(--fw-semibold);
	line-height: 1;
}

.sfeature__stat-suffix {
	font-size: 0.45em;
	font-weight: var(--fw-medium);
}

.sfeature__stat-label {
	color: var(--c-charcoal);
	font-size: clamp(14px, 1.19vw, 18px);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------- */
/* 5. Timeline                                                                 */
/* -------------------------------------------------------------------------- */

.stimeline {
	padding-block: clamp(56px, 6.35vw, 96px);
	background: var(--c-off-white);
	overflow: hidden;
}

.stimeline__head {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(32px, 3.6vw, 56px);
}

.stimeline__intro {
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.stimeline__eyebrow {
	margin: 0;
	color: var(--c-charcoal);
	font-size: 16px;
	font-weight: var(--fw-semibold);
}

.stimeline__title {
	margin: 0;
	color: var(--c-charcoal);
	font-size: clamp(28px, 3.17vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.stimeline__subtitle {
	margin: 0;
	color: var(--c-grey);
	font-size: clamp(15px, 1.19vw, 18px);
	font-weight: var(--fw-medium);
	line-height: 1.5;
}

.stimeline__nav {
	display: flex;
	gap: 12px;
}

.stimeline__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgb(51 51 51 / 20%);
	border-radius: var(--radius-pill);
	background: var(--c-white);
	color: var(--c-charcoal);
	cursor: pointer;
	transition:
		background-color var(--duration) var(--ease),
		color var(--duration) var(--ease),
		border-color var(--duration) var(--ease);
}

.stimeline__arrow:hover:not(:disabled) {
	border-color: var(--c-purple);
	background: var(--c-purple);
	color: var(--c-white);
}

.stimeline__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

.stimeline__arrow svg {
	width: 20px;
	height: 20px;
}

.stimeline__arrow-icon--prev {
	display: inline-flex;
	transform: scaleX(-1);
}

.stimeline__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Bleed the track to the viewport edges, but start the first card at the gutter. */
	padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
	scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
}

.stimeline__viewport::-webkit-scrollbar {
	display: none;
}

.stimeline__track {
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: max-content;
}

.stimeline__card {
	scroll-snap-align: start;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: clamp(300px, 24.6vw, 372px);
}

.stimeline__year {
	align-self: flex-start;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	background: var(--c-purple);
	color: var(--c-white);
	font-size: 14px;
	font-weight: var(--fw-semibold);
	line-height: 1;
}

.stimeline__card-media {
	aspect-ratio: 372 / 310;
	overflow: hidden;
	border-radius: 12px;
}

.stimeline__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stimeline__card-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.stimeline__card-eyebrow {
	margin: 0;
	color: var(--c-purple);
	font-size: 16px;
	font-weight: var(--fw-semibold);
}

.stimeline__card-title {
	margin: 0;
	color: var(--c-charcoal);
	font-size: clamp(26px, 2.65vw, 40px);
	font-weight: var(--fw-semibold);
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.stimeline__card-text {
	margin: 0;
	color: var(--c-grey);
	font-size: clamp(15px, 1.32vw, 20px);
	font-weight: var(--fw-medium);
	line-height: 1.55;
}

/* -------------------------------------------------------------------------- */
/* 6. News                                                                     */
/* -------------------------------------------------------------------------- */

.snews {
	padding-block: clamp(56px, 6.35vw, 96px);
	background: var(--c-white);
}

.snews__head {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(32px, 3.6vw, 56px);
}

.snews__intro {
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.snews__eyebrow {
	margin: 0;
	color: var(--c-purple);
	font-size: 16px;
	font-weight: var(--fw-semibold);
}

.snews__title {
	margin: 0;
	color: var(--c-charcoal);
	font-size: clamp(28px, 3.17vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.snews__subtitle {
	margin: 0;
	color: var(--c-grey);
	font-size: clamp(15px, 1.19vw, 18px);
	font-weight: var(--fw-medium);
	line-height: 1.5;
}

.snews__view {
	color: var(--c-purple);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	white-space: nowrap;
}

.snews__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.snews-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.snews-card__media {
	display: block;
	aspect-ratio: 339 / 270;
	overflow: hidden;
	border-radius: 12px;
}

.snews-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration) var(--ease);
}

.snews-card__media:hover img {
	transform: scale(1.04);
}

.snews-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.snews-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	font-size: 12px;
	font-weight: var(--fw-medium);
}

.snews-card__cat {
	color: var(--c-purple);
}

.snews-card__date {
	color: var(--c-charcoal);
}

.snews-card__title {
	margin: 0;
	font-size: clamp(18px, 1.59vw, 24px);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
}

.snews-card__title a {
	color: var(--c-charcoal);
	text-decoration: none;
}

.snews-card__title a:hover {
	color: var(--c-purple);
}

.snews-card__loc {
	margin: 0;
	color: var(--c-grey);
	font-size: 12px;
	font-weight: var(--fw-medium);
}

.snews-card__more {
	margin-top: 4px;
	color: var(--c-purple);
	font-size: 14px;
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/* 7. Franchise                                                                */
/* -------------------------------------------------------------------------- */

.sfranchise {
	position: relative;
	padding-block: clamp(56px, 6.35vw, 96px);
	background: var(--c-purple-dark);
	color: var(--c-white);
	isolation: isolate;
}

.sfranchise__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.28;
}

.sfranchise__bg img,
.sfranchise__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sfranchise__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(87 61 167 / 70%) 0%, rgb(87 61 167 / 92%) 100%);
}

.sfranchise__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 3.6vw, 56px);
}

.sfranchise__title {
	max-width: 20ch;
	margin: 0 auto;
	font-size: clamp(30px, 3.17vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-align: center;
}

.sfranchise__copy {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sfranchise__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(32px, 4vw, 64px);
	align-items: center;
}

.sfranchise__text {
	max-width: 520px;
	margin: 0;
	font-size: clamp(16px, 1.19vw, 18px);
	font-weight: var(--fw-medium);
	line-height: 1.6;
}

.sfranchise__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 8px;
}

.sfranchise__stats {
	display: flex;
	gap: clamp(24px, 3vw, 48px);
	margin: 0;
}

.sfranchise__stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sfranchise__stat-value {
	margin: 0;
	font-size: clamp(34px, 3.17vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1;
}

.sfranchise__stat-suffix {
	font-size: 0.6em;
}

.sfranchise__stat-label {
	font-size: 16px;
	font-weight: var(--fw-semibold);
}

/* -------------------------------------------------------------------------- */
/* 8. Social                                                                   */
/* -------------------------------------------------------------------------- */

.ssocial {
	position: relative;
	padding-block: clamp(56px, 6.35vw, 96px);
	background: var(--c-ink);
	color: var(--c-white);
	isolation: isolate;
	overflow: hidden;
}

.ssocial__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.22;
}

.ssocial__bg img,
.ssocial__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ssocial__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	margin-bottom: clamp(32px, 3.6vw, 56px);
}

.ssocial__title {
	margin: 0;
	font-size: clamp(28px, 3.17vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.ssocial__text {
	max-width: 560px;
	margin: 0;
	font-size: clamp(15px, 1.19vw, 18px);
	font-weight: var(--fw-medium);
	line-height: 1.55;
}

.ssocial__links {
	display: flex;
	gap: 16px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.ssocial__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: var(--radius-pill);
	color: var(--c-white);
	transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.ssocial__link:hover {
	background: var(--c-purple);
	border-color: var(--c-purple);
}

.ssocial__link svg {
	width: 22px;
	height: 22px;
}

.ssocial__wall {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	gap: clamp(12px, 1.4vw, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssocial__tile {
	width: clamp(150px, 18vw, 260px);
}

.ssocial__tile--1 { align-self: flex-start; }
.ssocial__tile--3 { align-self: flex-start; }

.ssocial__tile-inner {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 14px;
}

.ssocial__tile--2 .ssocial__tile-inner,
.ssocial__tile--4 .ssocial__tile-inner {
	aspect-ratio: 3 / 3.4;
}

.ssocial__tile-inner img,
.ssocial__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ssocial__handle {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	background: rgb(0 0 0 / 55%);
	color: var(--c-white);
	font-size: 12px;
	font-weight: var(--fw-semibold);
}

/* -------------------------------------------------------------------------- */
/* 9. Values                                                                   */
/* -------------------------------------------------------------------------- */

.svalues {
	padding-block: clamp(64px, 7.9vw, 120px);
	background: var(--c-purple);
	color: var(--c-white);
}

.svalues__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 720px;
	margin-bottom: clamp(40px, 4.6vw, 70px);
}

.svalues__eyebrow {
	margin: 0;
	font-size: 16px;
	font-weight: var(--fw-semibold);
}

.svalues__title {
	margin: 0;
	font-size: clamp(30px, 3.17vw, 48px);
	font-weight: var(--fw-bold);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.svalues__subtitle {
	margin: 0;
	font-size: clamp(15px, 1.19vw, 18px);
	font-weight: var(--fw-medium);
	line-height: 1.55;
	opacity: 0.85;
}

.svalues__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.svalue {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 16px;
	background: rgb(255 255 255 / 6%);
}

.svalue__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 14px;
	background: rgb(255 255 255 / 12%);
}

.svalue__icon img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.svalue__title {
	margin: 0;
	font-size: 20px;
	font-weight: var(--fw-semibold);
	line-height: 1.2;
}

.svalue__text {
	margin: 0;
	font-size: 14px;
	font-weight: var(--fw-medium);
	line-height: 1.5;
	opacity: 0.85;
}

/* -------------------------------------------------------------------------- */
/* 10. Responsive                                                              */
/* -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.snews__grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

	.sfeature__stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
}

@media (max-width: 900px) {
	.sintro__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.sintro__aside-inner {
		position: static;
	}

	.sfranchise__row {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.sfranchise__stats {
		flex-wrap: wrap;
	}
}

@media (max-width: 600px) {
	.snews__grid {
		grid-template-columns: 1fr;
	}

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

	.sfeature__stats {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.stimeline__head {
		align-items: flex-start;
	}

	.ssocial__tile {
		width: clamp(140px, 42vw, 200px);
	}
}