@layer pages {
	/*
	 * Shared premium page components for cooperation, franchise and city pages.
	 * Loaded together with the page-specific stylesheet for those templates.
	 */

	/* ==== Immersive dark page hero ==== */
	.haf-page-hero {
		position: relative;
		overflow: hidden;
		color: var(--haf-color-base);
		background:
		radial-gradient(120% 90% at 85% -10%, rgb(var(--haf-color-accent-rgb) / 0.18), transparent 55%),
		radial-gradient(90% 80% at -10% 110%, rgb(var(--haf-color-primary-rgb) / 0.28), transparent 55%),
			linear-gradient(160deg, #0d151b 0%, #142128 55%, #0a1218 100%);
		padding: clamp(5rem, 12vh, 9rem) 0 clamp(4rem, 9vh, 7rem);
	}

	.haf-page-hero__backdrop {
		position: absolute;
		inset: 0;
		pointer-events: none;
	}

	.haf-page-hero__orb {
		position: absolute;
		border-radius: 50%;
		filter: blur(70px);
		opacity: 0.55;
	}

	.haf-page-hero__orb--one {
		width: 34rem;
		height: 34rem;
		top: -9rem;
		right: -7rem;
		background: radial-gradient(circle, rgb(var(--haf-color-accent-rgb) / 0.5), transparent 65%);
	}

	.haf-page-hero__orb--two {
		width: 26rem;
		height: 26rem;
		bottom: -11rem;
		left: -7rem;
		background: radial-gradient(circle, rgb(var(--haf-color-primary-rgb) / 0.26), transparent 65%);
	}

	.haf-page-hero__rule {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background: linear-gradient(90deg, var(--haf-color-accent), var(--haf-color-brand-red) 62%, transparent);
		opacity: 0.7;
	}

	.haf-page-hero__inner {
		position: relative;
	}

	.haf-page-hero__eyebrow {
		margin: 0 0 var(--haf-space-4);
		font-size: var(--haf-font-size-sm);
		font-weight: 750;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: var(--haf-color-accent) !important;
	}

	.haf-page-hero__title {
		margin: 0;
		max-width: 16ch;
		font-size: var(--haf-font-size-display);
		font-weight: 800;
		line-height: 1.04;
		letter-spacing: -0.02em;
		color: var(--haf-color-base) !important;
		text-wrap: balance;
	}

	.haf-page-hero__lead {
		margin: var(--haf-space-6) 0 0;
		max-width: 42rem;
		font-size: var(--haf-font-size-lg);
		line-height: 1.7;
		color: rgb(255 255 255 / 0.78) !important;
	}

	.haf-page-hero__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--haf-space-4);
		margin-top: var(--haf-space-7);
	}

	.haf-page-hero__actions .haf-button--secondary,
	.haf-page-hero__actions .haf-button--secondary:hover {
		color: var(--haf-color-base) !important;
	}

	.haf-page-hero__actions .haf-button--secondary {
		border-color: rgb(255 255 255 / 0.35);
	}

	.haf-page-hero__actions .haf-button--secondary:hover {
		border-color: var(--haf-color-accent);
			background: rgb(var(--haf-color-primary-rgb) / 0.14);
	}

	.haf-page-hero .haf-breadcrumb {
		margin: 0 0 var(--haf-space-5);
		color: rgb(255 255 255 / 0.6) !important;
	}

	.haf-page-hero .haf-breadcrumb a {
		color: var(--haf-color-base) !important;
	}

	/* ==== Kinetic marquee band ==== */
	.haf-marquee {
		overflow: hidden;
		background: var(--haf-color-ink);
		color: var(--haf-color-base);
		border-block: 1px solid rgb(255 255 255 / 0.08);
		padding-block: var(--haf-space-5);
	}

	.haf-marquee__track {
		display: flex;
		width: max-content;
		animation: haf-marquee-scroll 30s linear infinite;
	}

	.haf-marquee__group {
		display: flex;
		align-items: center;
	}

	.haf-marquee__item {
		font-size: var(--haf-font-size-xl);
		font-weight: 800;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.haf-marquee__dot {
		width: 0.5rem;
		height: 0.5rem;
		margin-inline: var(--haf-space-5);
		border-radius: 50%;
		background: var(--haf-color-accent);
	}

	.haf-marquee:hover .haf-marquee__track {
		animation-play-state: paused;
	}

	@keyframes haf-marquee-scroll {
		to {
			transform: translateX(-50%);
		}
	}

	/* ==== Light sections ==== */
	.haf-section {
		padding-block: clamp(4rem, 9vw, 7rem);
	}

	.haf-section--alt {
		background: var(--haf-color-surface);
	}

	.haf-section--prose {
		background: var(--haf-color-base);
	}

	.haf-section__header {
		display: grid;
		gap: var(--haf-space-4);
		align-items: end;
		margin-bottom: var(--haf-space-8);
	}

	.haf-section__index {
		font-size: clamp(2.5rem, 6vw, 4.5rem);
		font-weight: 800;
		line-height: 1;
		letter-spacing: -0.02em;
		color: transparent;
		-webkit-text-stroke: 1px var(--haf-color-primary);
	}

	.haf-section__title {
		margin: 0;
		font-size: var(--haf-font-size-2xl);
	}

	.haf-section__intro {
		margin: var(--haf-space-2) 0 0;
		color: var(--haf-color-muted);
	}

	.haf-section__all {
		justify-self: start;
		display: inline-flex;
		align-items: center;
		gap: var(--haf-space-2);
		font-weight: 750;
		color: var(--haf-color-primary);
	}

	.haf-section__all svg {
		transition: transform var(--haf-transition-fast);
	}

	.haf-section__all:hover svg {
		transform: translateX(4px);
	}

	/* ==== Link cards ==== */
	.haf-link-card {
		position: relative;
		overflow: hidden;
		display: block;
		padding: var(--haf-space-6);
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-lg);
		background: var(--haf-color-base);
		transition: transform var(--haf-transition-base), box-shadow var(--haf-transition-base), border-color var(--haf-transition-base);
	}

	.haf-link-card:hover {
		transform: translateY(-4px);
		border-color: var(--haf-color-primary);
		box-shadow: var(--haf-shadow-md);
	}

	.haf-link-card__icon {
		display: grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		margin-bottom: var(--haf-space-5);
		border-radius: 50%;
		background: var(--haf-color-primary-soft);
		color: var(--haf-color-primary);
		transition: transform var(--haf-transition-base);
	}

	.haf-link-card:hover .haf-link-card__icon {
		transform: rotate(-45deg);
	}

	.haf-link-card__title {
		margin: 0 0 var(--haf-space-3);
		font-size: var(--haf-font-size-xl);
	}

	.haf-link-card__text {
		margin: 0;
		color: var(--haf-color-muted);
	}

	.haf-link-card__cta {
		display: inline-flex;
		align-items: center;
		margin-top: var(--haf-space-4);
		font-weight: 750;
		color: var(--haf-color-primary);
	}

	/* ==== Store evidence tiles ==== */
	.haf-coop-stores {
		display: grid;
		gap: var(--haf-space-5);
	}

	.haf-coop-store {
		display: block;
		padding: var(--haf-space-6);
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-lg);
		background: var(--haf-color-base);
		transition: transform var(--haf-transition-base), box-shadow var(--haf-transition-base), border-color var(--haf-transition-base);
	}

	.haf-coop-store:hover {
		transform: translateY(-4px);
		border-color: var(--haf-color-primary);
		box-shadow: var(--haf-shadow-md);
	}

	.haf-coop-store--secondary {
		border-color: var(--haf-color-ink);
		background: var(--haf-color-ink);
		color: var(--haf-color-base) !important;
	}

	.haf-coop-store--secondary:hover {
		border-color: var(--haf-color-ink);
	}

	.haf-coop-store__label {
		font-size: var(--haf-font-size-xs);
		font-weight: 750;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--haf-color-muted) !important;
	}

	.haf-coop-store--secondary .haf-coop-store__label {
		color: rgb(255 255 255 / 0.55) !important;
	}

	.haf-coop-store__name {
		display: block;
		margin-block: var(--haf-space-2) var(--haf-space-3);
		font-size: var(--haf-font-size-xl);
		font-weight: 800;
	}

	.haf-coop-store__cta {
		display: inline-flex;
		align-items: center;
		gap: var(--haf-space-2);
		font-weight: 750;
		color: var(--haf-color-primary);
	}

	.haf-coop-store--secondary .haf-coop-store__cta {
		color: var(--haf-color-accent);
	}

	.haf-coop-store__cta svg {
		transition: transform var(--haf-transition-fast);
	}

	.haf-coop-store:hover .haf-coop-store__cta svg {
		transform: translateX(4px);
	}

	/* ==== Closing call to action ==== */
	.haf-page-cta {
		position: relative;
		overflow: hidden;
		color: var(--haf-color-base);
		background: linear-gradient(150deg, #0d151b 0%, #14242b 100%);
		padding-block: clamp(4rem, 9vw, 7rem);
	}

	.haf-page-cta__backdrop {
		position: absolute;
		inset: 0;
		background: radial-gradient(60% 90% at 15% 0%, rgb(var(--haf-color-primary-rgb) / 0.24), transparent 60%);
	}

	.haf-page-cta__inner {
		position: relative;
		text-align: center;
	}

	.haf-page-cta__title {
		margin: 0 0 var(--haf-space-4);
		font-size: var(--haf-font-size-display);
		letter-spacing: -0.02em;
		color: var(--haf-color-base) !important;
		text-wrap: balance;
	}

	.haf-page-cta__text {
		margin: 0 auto var(--haf-space-7);
		max-width: 40rem;
		color: rgb(255 255 255 / 0.78) !important;
	}

	.haf-page-cta__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--haf-space-4);
		justify-content: center;
	}

	.haf-page-cta__actions .haf-button--secondary,
	.haf-page-cta__actions .haf-button--secondary:hover {
		color: var(--haf-color-base) !important;
	}

	.haf-page-cta__actions .haf-button--secondary {
		border-color: rgb(255 255 255 / 0.35);
	}

	.haf-page-cta__actions .haf-button--secondary:hover {
		border-color: var(--haf-color-accent);
			background: rgb(var(--haf-color-primary-rgb) / 0.14);
	}

	/* ==== Scroll reveal (only when JS enables animation) ==== */
	html.haf-dynamic-js [data-reveal] {
		opacity: 0;
		transform: translateY(1.5rem);
		transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: var(--haf-reveal-delay, 0ms);
	}

	html.haf-dynamic-js [data-reveal].is-visible {
		opacity: 1;
		transform: none;
	}

	@media (max-width: 47.99rem) {
		.haf-page-hero__title {
			font-size: clamp(2rem, 11vw, 3rem);
		}

		.haf-section__header {
			gap: var(--haf-space-3);
		}
	}

	@media (min-width: 48rem) {
		.haf-section__header {
			grid-template-columns: auto 1fr auto;
			column-gap: var(--haf-space-6);
		}

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

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