.coffee-page {
	--coffee-hero-scroll-distance: 1150px;
	--coffee-record-size: 634px;
	--coffee-hero-frame-top: 133px;
	--coffee-gallery-card-width: 361px;
	--coffee-gallery-card-height: 465px;
	--coffee-gallery-side-width: 436px;
	--coffee-gallery-side-height: 521px;
	--coffee-gallery-area-height: 552px;
	--coffee-story-gallery-gap: 32px;
	--coffee-story-action-overlap: 44px;
	--coffee-story-padding-top: 82px;
	--coffee-community-media-gap: 75px;
	background: var(--color-secondary-cream);
}

.coffee-page main {
	overflow: clip;
}

.coffee-shell {
	width: calc(100% - (var(--page-gutter) * 2));
	max-width: var(--page-container);
	margin-right: auto;
	margin-left: auto;
}

.coffee-hero {
	position: relative;
	/* A dynamic viewport unit is required for the pinned, viewport-filling hero scene. */
	height: 100svh;
	min-height: 640px;
}

.coffee-hero__stage {
	position: relative;
	height: 100svh;
	min-height: 640px;
	overflow: hidden;
	background: var(--color-secondary-cream);
	contain: paint;
	isolation: isolate;
}

.coffee-hero__intro,
.coffee-hero__final {
	position: absolute;
	inset: 0;
}

.coffee-hero__intro {
	z-index: var(--z-content);
	overflow: hidden;
	background: var(--color-secondary-cream);
}

.coffee-hero__final {
	z-index: var(--z-record);
	opacity: 0;
	visibility: hidden;
	clip-path: circle(0px at 50% var(--coffee-hero-focal-center-y, 50%));
	backface-visibility: hidden;
	contain: paint;
	pointer-events: none;
	transform: translateZ(0);
	will-change: clip-path, opacity;
	background: var(--color-secondary-cream);
}

.coffee-hero__final-frame {
	position: absolute;
	top: var(--coffee-hero-frame-top);
	left: 50%;
	width: 1240px;
	max-width: calc(100% - 40px);
	overflow: hidden;
	border-radius: 2px;
	background: var(--color-secondary-cream);
	/* The ratio preserves the exact 1240 × 661 Figma media frame. */
	aspect-ratio: 1240 / 661;
	transform: translateX(-50%);
}

.coffee-hero__final-image {
	position: absolute;
	top: -19.16%;
	left: -4.62%;
	width: 109.11%;
	max-width: none;
	height: 138.11%;
	object-fit: fill;
	mix-blend-mode: darken;
}

.coffee-hero__lines {
	position: absolute;
	top: 344px;
	left: 0;
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 16px;
	pointer-events: none;
}

.coffee-hero__line {
	position: relative;
	left: -200px;
	/* Extra inline coverage keeps the moving marquee viewport filled while its wrapper shifts during the hero transition. */
	width: calc(100% + 400px);
	overflow: hidden;
	white-space: nowrap;
}

.coffee-hero__line-track,
.coffee-hero__line-group {
	display: flex;
	flex: none;
}

.coffee-hero__line-track {
	width: max-content;
	will-change: transform;
}

.coffee-hero__line-group {
	/* Trailing padding becomes a visible blank seam between repeated marquee groups. */
	padding-right: 0;
}

.coffee-hero__line--outline {
	color: transparent;
	-webkit-text-stroke: 1px var(--color-primary-orange);
}

.coffee-hero__line--solid {
	color: var(--color-primary-orange);
	font-weight: var(--font-weight-bold);
}

.coffee-record {
	position: absolute;
	top: 180px;
	left: 50%;
	z-index: var(--z-record);
	width: var(--coffee-record-size);
	height: var(--coffee-record-size);
	transform: translateX(-50%);
	transform-origin: 50% 50%;
	pointer-events: none;
	will-change: transform;
}

.coffee-record__layer {
	position: absolute;
	max-width: none;
	pointer-events: none;
}

.coffee-record__layer--grooves-inner,
.coffee-record__layer--grooves-outer {
	inset: 0;
	width: 100%;
	height: 100%;
}

.coffee-record__layer--base {
	top: 27.29%;
	left: 27.13%;
	width: 45.74%;
	height: 45.74%;
}

.coffee-record__layer--van {
	top: 3.63%;
	left: 3.63%;
	width: 92.74%;
	height: 92.74%;
}

.coffee-record__layer--gradient {
	top: 32.65%;
	left: 32.49%;
	width: 35.17%;
	height: 35.17%;
}

.coffee-record__layer--highlight {
	top: 38.64%;
	left: 38.49%;
	width: 22.87%;
	height: 22.87%;
}

.coffee-record__layer--ring-1 {
	top: 40.85%;
	left: 40.85%;
	width: 18.45%;
	height: 18.45%;
}

.coffee-record__layer--ring-2 {
	top: 43.06%;
	left: 43.06%;
	width: 14.04%;
	height: 14.04%;
}

.coffee-record__layer--play {
	top: 45.58%;
	left: 45.58%;
	width: 9.15%;
	height: 9.15%;
}

.coffee-story {
	position: relative;
/* 	padding-top: var(--coffee-story-padding-top); */
	padding-bottom: 15px;
	overflow: hidden;
	background: var(--color-secondary-cream);
	isolation: isolate;
}

.coffee-story__pattern {
	position: absolute;
	top: var(--coffee-story-padding-top);
	left: 50%;
	z-index: var(--z-behind);
	/* Percentage sizing is required so decorative backgrounds remain full-bleed beyond the Figma canvas. */
	width: 100%;
	min-width: 1000px;
	max-width: none;
	transform: translateX(-50%);
	pointer-events: none;
}

.coffee-story__fade {
	position: absolute;
	z-index: var(--z-base);
	display: block;
	pointer-events: none;
}

.coffee-story__fade--top,
.coffee-story__fade--bottom {
	left: 0;
	width: 100%;
	height: 269px;
}

.coffee-story__fade--top {
	top: 0;
	background: linear-gradient(to bottom, var(--color-secondary-cream), rgba(244, 241, 235, 0));
}

.coffee-story__fade--bottom {
	bottom: 0;
	background: linear-gradient(to top, var(--color-secondary-cream), rgba(244, 241, 235, 0));
}

.coffee-story__fade--left,
.coffee-story__fade--right {
	top: 0;
	width: 269px;
	height: 100%;
}

.coffee-story__fade--left {
	left: 0;
	background: linear-gradient(to right, var(--color-secondary-cream), rgba(244, 241, 235, 0));
}

.coffee-story__fade--right {
	right: 0;
	background: linear-gradient(to left, var(--color-secondary-cream), rgba(244, 241, 235, 0));
}

.coffee-story__header,
.coffee-story__gallery,
.coffee-story__action {
	position: relative;
	z-index: var(--z-content);
}

.coffee-story .coffee-shell {
	max-width: 1240px;
}

.coffee-story__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--component-gap);
	text-align: center;
}

.coffee-story__title {
	max-width: 661px;
	color: var(--color-primary-orange);
}

.coffee-story__copy {
	max-width: 345px;
	color: var(--color-secondary-ink);
}

.coffee-story__gallery {
	display: flex;
	height: var(--coffee-gallery-area-height);
	align-items: flex-start;
	justify-content: center;
	margin-top: var(--coffee-story-gallery-gap);
}

.coffee-story__card {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	margin: 0;
	overflow: visible;
	transform-origin: 50% 50%;
}

.coffee-story__card--left,
.coffee-story__card--right {
	width: var(--coffee-gallery-side-width);
	height: var(--coffee-gallery-side-height);
}

.coffee-story__card--center {
	z-index: var(--z-content);
	width: var(--coffee-gallery-card-width);
	height: var(--coffee-gallery-card-height);
}

.coffee-story__card-frame {
	width: var(--coffee-gallery-card-width);
	height: var(--coffee-gallery-card-height);
	overflow: hidden;
	border-radius: 16px;
	background: var(--color-primary-orange);
	transform-origin: 50% 50%;
}

.coffee-story__card--left .coffee-story__card-frame {
	box-shadow: 1px 4px 0 var(--color-primary-orange);
	transform: rotate(-10deg);
}

.coffee-story__card--right .coffee-story__card-frame {
	box-shadow: 3px 5px 0 var(--color-primary-orange);
	transform: rotate(10deg);
}

.coffee-story__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.coffee-story__action {
	display: flex;
	justify-content: center;
	margin-top: calc(-1 * var(--coffee-story-action-overlap));
}

.coffee-story__van {
	position: absolute;
	top: calc(105px + var(--coffee-story-padding-top));
	right: -67px;
	z-index: var(--z-content);
	width: 225px;
	height: auto;
	max-width: none;
	pointer-events: none;
}

.coffee-values {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
	margin-top: var(--section-space-xlarge);
}

.coffee-values__panel,
.coffee-values__media {
	overflow: hidden;
	border-radius: 12px;
}

.coffee-values__panel {
	display: flex;
	min-width: 0;
	flex-direction: column;
	padding: 36px 59px 36px 71px;
	background: var(--color-secondary-sand);
}

.coffee-values__heading {
	position: relative;
	width: 100%;
	max-width: 554px;
	min-width: 0;
	padding-top: 54px;
}

.coffee-values__title {
	max-width: 100%;
	overflow-wrap: break-word;
	color: var(--color-primary-orange);
}

.coffee-values__badge {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	color: var(--color-primary-orange);
	filter: drop-shadow(0 4px 0 rgba(222, 218, 205, 0.72));
	transform: rotate(-6.7deg);
}

/* Keep SplitText's reveal mask while allowing the script stroke and shadow to render fully. */
.coffee-values__badge > .text-reveal__line-mask {
	width: auto;
	margin: calc(var(--text-stroke-reveal-buffer) * -1);
	padding: var(--text-stroke-reveal-buffer);
}

.coffee-values__copy {
	max-width: 436px;
	margin-top: var(--component-gap);
}

.coffee-values__tickers {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 11px;
	/* The ticker rows intentionally span the complete panel width in Figma. */
	width: calc(100% + 130px);
	margin-top: 188px;
	margin-left: -71px;
}

.coffee-ticker,
.coffee-partners__viewport {
	overflow: hidden;
}

.coffee-ticker {
	height: 56px;
}

.coffee-ticker[data-direction="reverse"] {
	height: 57px;
}

.coffee-ticker__track,
.coffee-partners__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.coffee-partners__track {
	background: var(--color-secondary-cream);
}

.coffee-ticker__group {
	display: flex;
	flex: none;
	gap: 12px;
	padding-right: 12px;
}

.coffee-ticker__item {
	display: inline-flex;
	align-items: center;
	padding: 12.7px 10px;
	border-radius: 32px;
	background: var(--color-secondary-cream);
	box-shadow: 0 4px 2px rgba(222, 218, 205, 0.2);
	white-space: nowrap;
}

.coffee-values__media {
	position: relative;
	min-height: 0;
	align-self: stretch;
}

.coffee-values__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 54%;
}

.coffee-experience {
	position: relative;
	display: flex;
	min-height: 680px;
	flex-direction: column;
	justify-content: center;
	margin-top: var(--section-space-xlarge);
	padding: 0 var(--content-gutter);
	overflow: visible;
	border-radius: 20px;
	color: var(--color-secondary-cream);
	background-color: var(--color-secondary-ink);
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
		url("../../src/assets/images/coffee/coffee-experience-bg.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	isolation: isolate;
}

.coffee-experience__record {
	position: absolute;
	top: -68px;
	left: 50%;
	z-index: var(--z-content);
	width: 136px;
	height: 136px;
	transform: translateX(-50%);
	pointer-events: none;
}

.coffee-experience__header,
.coffee-experience__stats {
	position: relative;
	z-index: var(--z-content);
}

.coffee-experience__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--component-gap);
	text-align: center;
}

.coffee-experience__copy {
	max-width: 628px;
}

.coffee-experience__stats {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 9px;
	padding: 0;
	margin-top: var(--section-space-medium);
	margin-bottom: 0;
	list-style: none;
}

.coffee-partners {
	width: 100%;
	max-width: none;
	margin-top: var(--section-space-xlarge);
	margin-bottom: var(--section-space-large);
}

.coffee-partners__title {
	padding-inline: var(--page-gutter);
	color: var(--color-primary-orange);
	text-align: center;
}

.coffee-partners__viewport {
	margin-top: var(--section-space-small);
}

.coffee-partners__group {
	display: flex;
	flex: none;
	width: 1434.333px;
	align-items: center;
	justify-content: space-between;
	padding-right: 54.333px;
}

.coffee-partners__logo {
	position: relative;
	display: block;
	flex: none;
	overflow: hidden;
	mix-blend-mode: darken;
}

.coffee-partners__logo img {
	position: absolute;
	max-width: none;
	pointer-events: none;
}

.coffee-partners__logo--1 {
	width: 101px;
	height: 66px;
}

.coffee-partners__logo--1 img {
	top: -233.9%;
	left: -24.45%;
	width: 430.89%;
	height: 441.45%;
}

.coffee-partners__logo--2 {
	width: 274px;
	height: 37.793px;
}

.coffee-partners__logo--2 img {
	top: -1337.48%;
	left: -108.88%;
	width: 322.18%;
	height: 1560.38%;
}

.coffee-partners__logo--3 {
	width: 145px;
	height: 46px;
}

.coffee-partners__logo--3 img {
	top: -54.83%;
	left: -122.56%;
	width: 323.86%;
	height: 682.67%;
}

.coffee-partners__logo--4 {
	width: 110px;
	height: 58px;
}

.coffee-partners__logo--4 img {
	top: -43.95%;
	left: -345.28%;
	width: 463.91%;
	height: 592.19%;
}

.coffee-partners__logo--5 {
	width: 164px;
	height: 34px;
}

.coffee-partners__logo--5 img {
	top: -349.4%;
	left: -109.07%;
	width: 307.28%;
	height: 998.76%;
}

.coffee-partners__logo--6 {
	width: 143px;
	height: 45px;
}

.coffee-partners__logo--6 img {
	top: -72.68%;
	left: -16.96%;
	width: 376.88%;
	height: 790.59%;
}

.coffee-partners__logo--7 {
	width: 117px;
	height: 76px;
}

.coffee-partners__logo--7 img {
	top: -277.97%;
	left: -367.97%;
	width: 502.32%;
	height: 512.65%;
}

@media (max-width: 1366px) {
	.coffee-page {
		--coffee-hero-scroll-distance: 1045px;
		--coffee-record-size: 590px;
		--coffee-hero-frame-top: 120px;
		--coffee-gallery-card-width: 330px;
		--coffee-gallery-card-height: 425px;
		--coffee-gallery-side-width: 398px;
		--coffee-gallery-side-height: 476px;
		--coffee-gallery-area-height: 505px;
		--coffee-story-gallery-gap: 30px;
		--coffee-story-action-overlap: 40px;
		--coffee-story-padding-top: 66px;
	}

	.coffee-record {
		top: 168px;
	}


	.coffee-hero__lines {
		top: 330px;
		gap: 14px;
	}

	.coffee-experience {
		min-height: 620px;
	}

	.coffee-values__image {
		object-position: 50% 28%;
	}

}

@media (max-width: 1166px) {
	.coffee-page {
		--coffee-hero-scroll-distance: 945px;
		--coffee-record-size: 520px;
		--coffee-hero-frame-top: 112px;
		--coffee-gallery-card-width: 282px;
		--coffee-gallery-card-height: 364px;
		--coffee-gallery-side-width: 340px;
		--coffee-gallery-side-height: 408px;
		--coffee-gallery-area-height: 432px;
		--coffee-story-gallery-gap: 28px;
		--coffee-story-action-overlap: 36px;
		--coffee-story-padding-top: 60px;
		--coffee-community-media-gap: 68px;
	}

	.coffee-record {
		top: 170px;
	}

	.coffee-hero__lines {
		top: 322px;
	}

	.coffee-hero__final-frame {
		width: calc(100% - 160px);
	}

	.coffee-values__panel {
		padding: var(--section-space-small);
	}

	.coffee-values__heading {
		width: auto;
		padding-top: 48px;
	}

	.coffee-values__tickers {
		width: calc(100% + (var(--section-space-small) * 2));
		margin-top: 132px;
		margin-left: calc(-1 * var(--section-space-small));
	}

	.coffee-experience {
		min-height: 0;
		padding-top: var(--section-space-large);
		padding-bottom: var(--section-space-large);
	}

	.coffee-experience__stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 42px;
	}
}

@media (max-width: 1100px) {
	.coffee-story__van {
		display: none;
	}
}

@media (max-width: 1024px) {
	.coffee-page {
		--coffee-hero-scroll-distance: 840px;
		--coffee-record-size: 460px;
		--coffee-hero-frame-top: 104px;
		--coffee-gallery-card-width: 240px;
		--coffee-gallery-card-height: 310px;
		--coffee-gallery-side-width: 290px;
		--coffee-gallery-side-height: 348px;
		--coffee-gallery-area-height: 368px;
		--coffee-story-gallery-gap: 28px;
		--coffee-story-action-overlap: 32px;
		--coffee-story-padding-top: 54px;
		--coffee-community-media-gap: 60px;
	}

	.coffee-record {
		top: 175px;
	}

	.coffee-hero__lines {
		top: 316px;
		gap: 12px;
	}

	.coffee-hero__final-frame {
		width: calc(100% - 112px);
	}

	.coffee-values {
		grid-template-columns: 1fr;
	}

	.coffee-values__panel {
		padding: var(--section-space-medium) var(--content-gutter);
	}

	.coffee-values__heading {
		padding-top: 46px;
	}

	.coffee-values__tickers {
		width: calc(100% + (var(--content-gutter) * 2));
		margin-top: var(--section-space-large);
		margin-left: calc(-1 * var(--content-gutter));
	}

	.coffee-values__media {
		aspect-ratio: 16 / 10;
	}
}

@media (min-width: 901px) and (max-width: 1024px) {
	.coffee-values {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.coffee-values__media {
		aspect-ratio: auto;
	}
}

@media (max-width: 768px) {
	.coffee-page {
		--coffee-hero-scroll-distance: 605px;
		--coffee-record-size: 390px;
		--coffee-hero-focal-center-y: 353px;
		--coffee-gallery-card-width: 260px;
		--coffee-gallery-card-height: 335px;
		--coffee-gallery-side-width: 196px;
		--coffee-gallery-side-height: 268px;
		--coffee-gallery-area-height: 382px;
		--coffee-story-gallery-gap: 36px;
		--coffee-story-action-overlap: 26px;
		--coffee-story-padding-top: 48px;
		--coffee-community-media-gap: 52px;
	}

	.coffee-hero,
	.coffee-hero__stage {
		min-height: 560px;
	}

	.coffee-hero__final {
		/* Keep the same top-layer circular reveal used by the desktop composition. */
		clip-path: circle(0px at 50% 50%);
	}

	.coffee-record {
		top: 158px;
	}

	.coffee-hero__lines {
		top: 300px;
		gap: 10px;
	}

	.coffee-hero__final-frame {
		top: var(--coffee-hero-focal-center-y);
		width: calc(100% - 48px);
		/* A taller ratio keeps the illustration legible on tablet and phone screens. */
		aspect-ratio: 4 / 3;
		transform: translate(-50%, -50%);
	}

	.coffee-hero__final-image {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
	}

	.coffee-story__gallery {
		position: relative;
		display: block;
		height: var(--coffee-gallery-area-height);
		margin-top: var(--coffee-story-gallery-gap);
	}

	.coffee-story__card {
		position: absolute;
		margin-left: 0;
	}

	.coffee-story__card-frame {
		width: 100%;
		height: 100%;
	}

	.coffee-story__card--left,
	.coffee-story__card--right {
		top: 44px;
		width: var(--coffee-gallery-side-width);
		height: var(--coffee-gallery-side-height);
		margin-left: calc(var(--coffee-gallery-side-width) / -2);
	}

	.coffee-story__card--center {
		top: 0;
		left: 50%;
		width: var(--coffee-gallery-card-width);
		height: var(--coffee-gallery-card-height);
		margin-left: calc(var(--coffee-gallery-card-width) / -2);
	}

	.coffee-story__card--left {
		left: calc(50% - 150px);
	}

	.coffee-story__card--right {
		left: calc(50% + 150px);
	}

	.coffee-values__media {
		aspect-ratio: 4 / 3;
	}

	.coffee-values__heading {
		width: auto;
		padding-top: 42px;
	}

	.coffee-values__tickers {
		margin-top: var(--section-space-medium);
	}

	.coffee-experience__stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: var(--section-space-medium);
	}

	.coffee-experience {
		margin-top: calc(var(--section-space-xlarge) + var(--section-space-small));
	}


	.coffee-experience__record {
		top: -54px;
		width: 108px;
		height: 108px;
	}

}

@media (max-width: 576px) {
	.coffee-page {
		--coffee-record-size: 330px;
		--coffee-hero-focal-center-y: 337px;
		--coffee-gallery-card-width: 228px;
		--coffee-gallery-card-height: 294px;
		--coffee-gallery-side-width: 176px;
		--coffee-gallery-side-height: 241px;
		--coffee-gallery-area-height: 340px;
		--coffee-story-gallery-gap: 34px;
		--coffee-story-action-overlap: 22px;
	}

	.coffee-record {
		top: 172px;
	}

	.coffee-hero__lines {
		top: 302px;
	}

	.coffee-story__card--left {
		left: calc(50% - 130px);
	}

	.coffee-story__card--right {
		left: calc(50% + 130px);
	}

	.coffee-values__panel {
		padding: var(--section-space-medium) var(--content-gutter);
	}

	.coffee-values__badge {
		position: static;
		align-self: center;
		margin-bottom: var(--component-gap);
	}

	.coffee-values__heading {
		display: flex;
		flex-direction: column;
		padding-top: 0;
	}

	.coffee-values__title,
	.coffee-values__copy {
		text-align: center;
	}

	.coffee-experience__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.coffee-page {
		--coffee-hero-scroll-distance: 510px;
		--coffee-record-size: 290px;
		--coffee-hero-focal-center-y: 325px;
		--coffee-gallery-card-width: 205px;
		--coffee-gallery-card-height: 264px;
		--coffee-gallery-side-width: 158px;
		--coffee-gallery-side-height: 216px;
		--coffee-gallery-area-height: 306px;
		--coffee-story-gallery-gap: 32px;
		--coffee-story-action-overlap: 20px;
		--coffee-story-padding-top: 40px;
		--coffee-community-media-gap: 52px;
	}

	.coffee-record {
		top: 180px;
	}

	.coffee-hero__lines {
		top: 300px;
		gap: 8px;
	}

	.coffee-hero__line--solid {
		transform: translateX(-8px);
	}

	.coffee-hero__final-frame {
		width: calc(100% - 32px);
	}


	.coffee-story__card--left,
	.coffee-story__card--right {
		top: 40px;
	}

	.coffee-story__card--left {
		left: calc(50% - 112px);
	}

	.coffee-story__card--right {
		left: calc(50% + 112px);
	}

	.coffee-values {
		gap: 8px;
	}

	.coffee-values__media {
		aspect-ratio: 1 / 1;
	}

	.coffee-ticker__item {
		padding: 8px 10px;
	}

	.coffee-experience {
		padding-top: 78px;
		border-radius: 16px;
	}

	.coffee-experience__stats {
		grid-template-columns: 1fr;
	}

	.coffee-experience .stat-card__copy {
		max-width: 100%;
	}

}

@media (max-width: 360px) {
	.coffee-page {
		--coffee-record-size: 268px;
		--coffee-hero-focal-center-y: 318px;
		--coffee-gallery-card-width: 184px;
		--coffee-gallery-card-height: 237px;
		--coffee-gallery-side-width: 142px;
		--coffee-gallery-side-height: 194px;
		--coffee-gallery-area-height: 278px;
		--coffee-story-gallery-gap: 30px;
		--coffee-story-action-overlap: 18px;
		--coffee-community-media-gap: 48px;
	}

	.coffee-record {
		top: 184px;
	}


	.coffee-story__card--left {
		left: calc(50% - 94px);
	}

	.coffee-story__card--right {
		left: calc(50% + 94px);
	}
}

/*
* Pinned scenes must respond to viewport height as well as width. These
* short-laptop variants preserve the Figma composition while keeping the focal
* record, story fan, and card section inside usable 620px/720px viewports.
*/
@media (min-width: 769px) and (max-height: 720px) {
	.coffee-page {
		--coffee-hero-scroll-distance: 720px;
		--coffee-record-size: 480px;
		--coffee-hero-frame-top: 74px;
		--coffee-gallery-card-width: 254px;
		--coffee-gallery-card-height: 327px;
		--coffee-gallery-side-width: 306px;
		--coffee-gallery-side-height: 367px;
		--coffee-gallery-area-height: 388px;
		--coffee-story-gallery-gap: 22px;
		--coffee-story-action-overlap: 32px;
	}

	.coffee-hero,
	.coffee-hero__stage {
		min-height: 0;
	}

	.coffee-record {
		top: 130px;
	}

	.coffee-hero__lines {
		top: 292px;
		gap: 10px;
	}

	.coffee-hero__final-frame {
		width: 1000px;
		max-width: calc(100% - 120px);
	}

	.coffee-values {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.coffee-values__panel {
		padding: 30px 46px;
	}

	.coffee-values__heading {
		padding-top: 44px;
	}

	.coffee-values__tickers {
		width: calc(100% + 92px);
		margin-top: 100px;
		margin-left: -46px;
	}

	.coffee-values__media {
		aspect-ratio: auto;
	}

	.coffee-experience {
		min-height: 540px;
	}

	.coffee-experience__stats {
		row-gap: var(--section-space-small);
	}
}

@media (min-width: 769px) and (max-height: 620px) {
	.coffee-page {
		--coffee-hero-scroll-distance: 555px;
		--coffee-record-size: 420px;
		--coffee-hero-frame-top: 62px;
		--coffee-gallery-card-width: 230px;
		--coffee-gallery-card-height: 296px;
		--coffee-gallery-side-width: 278px;
		--coffee-gallery-side-height: 333px;
		--coffee-gallery-area-height: 352px;
		--coffee-story-gallery-gap: 18px;
		--coffee-story-action-overlap: 28px;
	}

	.coffee-record {
		top: 112px;
	}

	.coffee-hero__lines {
		top: 262px;
		gap: 8px;
	}

	.coffee-hero__final-frame {
		width: 900px;
		max-width: calc(100% - 140px);
	}

	.coffee-values__panel {
		padding: 26px 40px;
	}

	.coffee-values__heading {
		padding-top: 40px;
	}

	.coffee-values__tickers {
		width: calc(100% + 80px);
		margin-top: 78px;
		margin-left: -40px;
	}

	.coffee-experience {
		min-height: 480px;
	}
}

@media (min-width: 481px) and (max-width: 768px) and (max-height: 650px) {
	.coffee-hero__final-frame {
		width: calc(100% - 100px);
	}
}

@media (max-width: 768px) and (max-height: 560px) and (orientation: landscape) {
	.coffee-page {
		--coffee-hero-scroll-distance: 370px;
		--coffee-record-size: 260px;
		--coffee-hero-focal-center-y: 215px;
	}

	.coffee-hero,
	.coffee-hero__stage {
		min-height: 0;
	}

	.coffee-record {
		top: 85px;
	}

	.coffee-hero__lines {
		top: 190px;
		gap: 6px;
	}

	.coffee-hero__final-frame {
		width: 450px;
		max-width: calc(100% - 80px);
		aspect-ratio: 4 / 3;
	}

}

@media (max-width: 480px) and (max-height: 560px) and (orientation: landscape) {
	.coffee-page {
		--coffee-hero-scroll-distance: 325px;
		--coffee-record-size: 220px;
		--coffee-hero-focal-center-y: 190px;
	}

	.coffee-record {
		top: 80px;
	}

	.coffee-hero__lines {
		top: 170px;
	}

	.coffee-hero__final-frame {
		width: 320px;
		max-width: calc(100% - 48px);
	}
}

@media (max-width: 1024px) {
	.coffee-page {
		--coffee-hero-focal-center-y: 50%;
	}

	.coffee-record {
		top: var(--coffee-hero-focal-center-y);
		transform: translate(-50%, -50%);
	}

	.coffee-hero__lines {
		top: var(--coffee-hero-focal-center-y);
		transform: translateY(-50%);
	}

	.coffee-hero__final-frame {
		top: var(--coffee-hero-focal-center-y);
		transform: translate(-50%, -50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.coffee-hero {
		height: auto;
	}

	.coffee-hero__stage {
		position: relative;
		height: auto;
		min-height: 0;
		overflow: visible;
	}

	.coffee-hero__intro,
	.coffee-hero__final {
		position: relative;
		inset: auto;
	}

	.coffee-hero__final {
		opacity: 1;
		visibility: visible;
		clip-path: none;
	}

	.coffee-hero__intro {
		min-height: 640px;
	}

	.coffee-hero__final-frame {
		position: relative;
		top: auto;
		left: auto;
		margin: var(--section-space-small) auto 0;
		transform: none;
	}

	.coffee-ticker,
	.coffee-partners__viewport {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.coffee-ticker__group[aria-hidden="true"],
	.coffee-partners__group[aria-hidden="true"] {
		display: none;
	}

	.coffee-ticker__track,
	.coffee-partners__track,
	.coffee-hero__line-track {
		transform: none;
		will-change: auto;
	}

	.coffee-hero__line-group[aria-hidden="true"] {
		display: none;
	}
}

/* Coffee testimonials */
.coffee-testimonials {
	position: relative;
	margin-top: var(--section-space-xlarge);
	isolation: isolate;
}

.coffee-testimonials__stage {
	position: relative;
	display: grid;
}

.coffee-testimonials__title,
.coffee-testimonials__list {
	grid-area: 1 / 1;
}

.coffee-testimonials__title {
	position: relative;
	z-index: var(--z-base);
	display: flex;
	align-self: start;
	justify-content: space-between;
	margin-top: 132px;
	padding-inline: 114px;
	color: var(--color-primary-orange);
	pointer-events: none;
}

.coffee-testimonials__title-part {
	flex: 0 0 auto;
	white-space: nowrap;
}

.coffee-testimonials__title-mask,
.coffee-follow__title-mask {
	display: block;
	overflow: hidden;
}

.coffee-testimonials__title-line,
.coffee-follow__title-line {
	display: block;
}

.coffee-testimonials__list {
	z-index: var(--z-content);
	display: grid;
	gap: 24px;
	width: 540px;
	margin-inline: auto;
}

.coffee-testimonial {
	display: flex;
	min-height: 325px;
	padding: 6px;
	color: var(--color-secondary-cream);
	background: var(--color-primary-orange);
	border: 1px solid var(--color-secondary-cream);
	border-radius: 14px;
	will-change: transform, opacity;
}

.coffee-testimonial--long {
	min-height: 354px;
}

.coffee-testimonial__inner {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 24px;
	padding: 27px 34px 24px 22px;
	border: 1px solid var(--color-secondary-cream);
	border-radius: 8px;
}

.coffee-testimonial__stars {
	width: 91px;
	height: 15px;
}

.coffee-testimonial__quote {
	margin: 0;
}

.coffee-testimonial__quote p {
	margin: 0;
}

.coffee-testimonial__author {
	margin-top: auto;
}

/* This structural scene follows the active viewport so the pinned reference motion stays centered. */
.coffee-testimonials.is-scroll-scene .coffee-testimonials__stage {
	display: block;
	/* The reference motion is a viewport-bound scene; viewport units are required here. */
	height: 100svh;
	overflow: hidden;
}

.coffee-testimonials.is-scroll-scene {
	height: var(--testimonial-scene-height);
	margin-bottom: calc(0px - var(--testimonial-tail-trim, 0px));
}

.coffee-testimonials.is-scroll-scene .coffee-testimonials__title {
	position: absolute;
	top: calc(50% - clamp(28px, 4vh, 40px));
	left: 0;
	width: 100%;
	margin-top: 0;
	transform: translateY(-50%);
}

.coffee-testimonials.is-scroll-scene .coffee-testimonials__title span {
	will-change: transform;
}

.coffee-testimonials.is-scroll-scene .coffee-testimonials__list {
	position: absolute;
	top: 0;
	left: 50%;
	margin-inline: 0;
	transform: translateX(-50%);
	will-change: transform;
}

/* More Than a Coffee Run */
.coffee-community {
	position: relative;
	z-index: var(--z-content);
	margin-top: var(--section-space-xlarge);
	overflow: clip;
	text-align: center;
	background: var(--color-secondary-cream);
}

.coffee-community__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--coffee-community-media-gap);
	width: 100%;
}

.coffee-community__header {
	display: grid;
	justify-items: center;
	gap: var(--component-gap);
	width: 100%;
}

.coffee-community__title {
	color: var(--color-primary-orange);
}

.coffee-community__copy {
	width: 100%;
	max-width: 628px;
}

.coffee-community__visual {
	display: flex;
	justify-content: center;
	width: 100%;
}

.coffee-community__media {
	position: relative;
	width: 914px;
	max-width: 100%;
}

.coffee-community__image {
	display: block;
	width: 100%;
	height: auto;
}

.coffee-community__orbit {
	position: absolute;
	inset: 0;
	z-index: var(--z-record);
	margin: 0;
	color: var(--color-primary-orange);
	pointer-events: none;
	backface-visibility: hidden;
	transform-origin: var(--orbit-center-x) var(--orbit-center-y);
	will-change: transform, opacity;
}

.coffee-community__orbit-glyphs {
	position: absolute;
	inset: 0;
}

.coffee-community__orbit-character {
	position: absolute;
	top: var(--orbit-center-y);
	left: var(--orbit-center-x);
	display: block;
	transform: rotate(var(--orbit-angle)) translateY(calc(var(--orbit-radius) * -1));
	transform-origin: 0 0;
}

.coffee-community__orbit-character > span {
	display: block;
	transform: translate(-50%, -50%) scale(var(--orbit-scale));
}

/* Coffee menu slider */
.coffee-menu {
	position: relative;
	z-index: var(--z-base);
	margin-top: 0;
	overflow: hidden;
	background: var(--color-secondary-cream);
	isolation: isolate;
}

.coffee-menu__pattern {
	position: absolute;
	top: -276px;
	left: 50%;
	z-index: var(--z-behind);
	/* Percentage sizing is required so the vinyl background fills every desktop canvas. */
	width: 100%;
	min-width: 1000px;
	max-width: none;
	height: auto;
	aspect-ratio: 1;
	transform: translateX(-50%);
}

.coffee-menu__fade {
	position: absolute;
	z-index: var(--z-base);
	pointer-events: none;
}

.coffee-menu__fade--top,
.coffee-menu__fade--bottom {
	left: 0;
	width: 100%;
	height: 291px;
}

.coffee-menu__fade--top {
	top: 0;
	background: linear-gradient(to bottom, var(--color-secondary-cream), rgba(238, 236, 229, 0));
}

.coffee-menu__fade--bottom {
	bottom: 0;
	background: linear-gradient(to top, var(--color-secondary-cream), rgba(238, 236, 229, 0));
}

.coffee-menu__fade--left,
.coffee-menu__fade--right {
	top: 0;
	width: 243px;
	height: 100%;
}

.coffee-menu__fade--left {
	left: 0;
	background: linear-gradient(to right, var(--color-secondary-cream), rgba(238, 236, 229, 0));
}

.coffee-menu__fade--right {
	right: 0;
	background: linear-gradient(to left, var(--color-secondary-cream), rgba(238, 236, 229, 0));
}

.coffee-menu__content {
	position: relative;
	z-index: var(--z-content);
	display: grid;
	gap: 32px;
	min-width: 0;
	padding: 295px 54px 294px;
}

.coffee-menu__header {
	display: grid;
	justify-items: center;
	gap: 12px;
	min-width: 0;
	text-align: center;
}

.coffee-menu__eyebrow,
.coffee-menu__title {
	color: var(--color-primary-orange);
}

.coffee-menu-slider {
	--coffee-menu-active-width: 389px;
	--coffee-menu-active-offset: -70px;
	position: relative;
	width: 100%;
	min-width: 0;
	height: 86px;
}

.coffee-menu-slider__viewport {
	width: 100%;
	min-width: 0;
	overflow-x: clip;
	overflow-y: visible;
	outline-offset: 12px;
}

.coffee-menu-slider__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.coffee-menu-slider__group {
	display: flex;
	align-items: center;
	gap: 22px;
	width: max-content;
	height: 86px;
	margin: 0;
	padding: 0 22px 0 0;
	list-style: none;
}

.coffee-menu-slider__item {
	position: relative;
	display: grid;
	flex: 0 0 249px;
	place-items: center;
	justify-items: center;
	width: 249px;
	height: 86px;
	transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.coffee-menu-slider__item.is-active {
	z-index: var(--z-content);
}

.coffee-menu-slider__item.is-before-active {
	transform: translateX(-28px);
}

.coffee-menu-slider__item.is-after-active {
	transform: translateX(28px);
}

/*
* Wide canvases expose more neighboring labels at once. Give the item before
* the active card extra transform-only clearance so long titles cannot enter
* the expanding orange card while the seamless track keeps its fixed geometry.
*/
@media (min-width: 1441px) {
	.coffee-menu-slider__group {
		gap: 54px;
		padding-right: 54px;
	}

	.coffee-menu-slider__item.is-before-active {
		transform: translateX(-44px);
	}
}

.coffee-menu-card {
	position: relative;
	justify-self: center;
	display: flex;
	height: 86px;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 15px;
	color: var(--color-secondary-ink);
	background: var(--color-secondary-cream);
	border-radius: 8px;
	backface-visibility: hidden;
	transform-origin: center;
	will-change: transform;
	transition:
		color 420ms cubic-bezier(0.22, 1, 0.36, 1),
		background-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.coffee-menu-slider__item--sweet .coffee-menu-card {
	width: 273px;
}

.coffee-menu-slider__item--ham .coffee-menu-card {
	width: 163px;
}

.coffee-menu-slider__item--salmon .coffee-menu-card {
	width: 193px;
}

.coffee-menu-slider__item--smash .coffee-menu-card {
	width: 229px;
}

.coffee-menu-slider__item.is-active .coffee-menu-card {
	justify-self: center;
	left: var(--coffee-menu-active-offset);
	width: var(--coffee-menu-active-width);
	padding: 0 16px 0 0;
	color: var(--color-secondary-cream);
	background: var(--color-primary-orange);
}

.coffee-menu-card__media {
	position: relative;
	display: grid;
	flex: 0 0 59px;
	place-items: center;
	width: 59px;
	height: 59px;
}

.coffee-menu-slider__item--sweet .coffee-menu-card__media {
	flex-basis: 65px;
	width: 65px;
	height: 58px;
	overflow: hidden;
	mix-blend-mode: multiply;
}

.coffee-menu-card__image {
	width: 59px;
	height: 59px;
	object-fit: cover;
	border-radius: 50%;
	transform-origin: 50% 50%;
	will-change: transform;
}

.coffee-menu-slider__item--sweet .coffee-menu-card__image {
	position: absolute;
	top: -20.44px;
	left: -13.14px;
	width: 93.77px;
	max-width: none;
	height: 95.04px;
	border-radius: 0;
	object-fit: fill;
}

.coffee-menu-slider__item.is-active .coffee-menu-card__media {
	flex-basis: 180px;
	width: 180px;
	height: 180px;
}

.coffee-menu-slider__item.is-active .coffee-menu-card__image {
	width: 180px;
	height: 180px;
	transform: scale(1);
}

.coffee-menu-card__title {
	flex: none;
	white-space: nowrap;
}

.motion-unavailable .coffee-menu-slider__viewport {
	overflow-x: auto;
	scrollbar-width: none;
}

/* Events */
.coffee-events {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 0;
	margin-bottom: var(--section-space-xlarge);
}

.coffee-events__panel,
.coffee-events__map {
	overflow: hidden;
	border-radius: 12px;
}

.coffee-events__panel {
	display: grid;
	align-content: start;
	gap: 36px;
	padding: 37px 60px 36px 70px;
	background: var(--color-secondary-sand);
}

.coffee-events__header {
	display: grid;
	justify-items: start;
	gap: 20px;
}

.coffee-events__title {
	width: 368px;
	max-width: 100%;
	color: var(--color-primary-orange);
}

.coffee-events__copy {
	margin-top: -4px;
}

.coffee-events__instagram {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 9999px;
}

.coffee-events__instagram-icon {
	width: 16px;
	height: 16px;
	-webkit-mask: url("../../src/assets/images/coffee/coffee-instagram.svg") center / contain no-repeat;
	mask: url("../../src/assets/images/coffee/coffee-instagram.svg") center / contain no-repeat;
}

.coffee-events__upcoming {
	display: grid;
	gap: 16px;
}

.coffee-events__list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.coffee-event {
	display: grid;
	grid-template-columns: 35px minmax(0, 1fr) 35px;
	align-items: center;
	gap: 13px;
	width: 100%;
	padding: 11px 16px;
	color: var(--color-secondary-ink);
	text-align: left;
	background: var(--color-secondary-cream);
	border: 2px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	transition:
		color 220ms ease,
		background-color 220ms ease,
		border-color 220ms ease,
		transform 220ms ease;
}

.coffee-event:hover,
.coffee-event:focus-visible {
	transform: translateX(4px);
}

.coffee-event.is-active {
	border-color: var(--color-primary-orange);
}

.coffee-event__pin {
	display: grid;
	place-items: center;
	width: 35px;
	height: 35px;
	background: var(--color-secondary-sand);
	border-radius: 50%;
}

.coffee-event__content {
	display: grid;
	gap: 9px;
	min-width: 0;
}

.coffee-event__meta,
.coffee-event__time {
	display: flex;
	align-items: center;
}

.coffee-event__meta {
	flex-wrap: wrap;
	gap: 8px 26px;
}

.coffee-event__time {
	gap: 7px;
	color: #676767;
}

.coffee-event__arrow {
	transition: transform 260ms ease;
}

.coffee-event.is-active .coffee-event__arrow {
	transform: rotate(45deg);
}

.coffee-events__map {
	position: relative;
	padding: 8px;
	background: var(--color-secondary-sand);
}

.coffee-events__map-state {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	aspect-ratio: 668 / 601;
	border-radius: 12px;
}

.coffee-events__map-state[hidden] {
	display: none;
}

.coffee-events__map-embed {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.coffee-events__map-details {
	display: none;
	position: absolute;
	top: 12px;
	left: 12px;
	gap: 4px;
	max-width: calc(100% - 24px);
	padding: 10px 12px;
	color: var(--color-secondary-ink);
	background: rgba(255, 255, 255, 0.94);
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.coffee-events__map-details h3,
.coffee-events__map-details p {
	margin: 0;
}

.coffee-events__map-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	width: fit-content;
	margin-left: -10px;
	padding: 10px;
	color: inherit;
	text-underline-offset: 3px;
}

/* Song of The Day */
.coffee-song {
	--song-foreground: var(--color-primary-orange);
	--song-button-background: var(--color-primary-orange);
	--song-button-color: var(--color-secondary-cream);
	--coffee-song-viewport-height: 100svh;
	position: relative;
	margin-top: 0;
	background: var(--color-secondary-cream);
	isolation: isolate;
}

.coffee-song__stage {
	--song-foreground: var(--color-primary-orange);
	--song-button-background: var(--color-primary-orange);
	--song-button-color: var(--color-secondary-cream);
	position: relative;
	display: grid;
	width: 100%;
	height: 100vh;
	height: var(--coffee-song-viewport-height, 100svh);
	min-height: 0;
	align-content: center;
	justify-items: center;
	box-sizing: border-box;
	padding-block: var(--section-space-small);
	overflow: hidden;
	background: var(--color-secondary-cream);
	isolation: isolate;
}

.coffee-song__title-mask {
	position: relative;
	z-index: var(--z-overlay);
	width: 100%;
	overflow: hidden;
}

.coffee-song__title {
	width: 100%;
	color: var(--song-foreground);
	text-align: center;
}

.coffee-song__title-line {
	display: block;
	will-change: transform;
}

.coffee-song__scene {
	--song-record-top: 48px;
	position: relative;
	width: 100%;
	height: 578px;
	isolation: isolate;
}

.coffee-song__expanding-circle {
	position: absolute;
	top: var(--song-record-top);
	left: 50%;
	z-index: var(--z-behind);
	display: block;
	width: 436px;
	height: 436px;
	border-radius: 50%;
	background: var(--color-primary-orange);
	opacity: 0;
	visibility: hidden;
	transform-origin: 50% 50%;
	backface-visibility: hidden;
	pointer-events: none;
	will-change: transform, opacity;
}

.coffee-song__marquees {
	position: absolute;
	top: 117px;
	left: 0;
	z-index: 1;
	display: grid;
	gap: 35px;
	width: 100%;
	overflow: hidden;
}

.coffee-song__marquee {
	width: 100%;
	overflow: hidden;
	color: var(--song-foreground);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-heading-1);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading-1);
	text-transform: uppercase;
}

.coffee-song__marquee--outline {
	color: transparent;
	font-weight: var(--font-weight-medium);
	-webkit-text-stroke: 1px var(--song-foreground);
}

.coffee-song__marquee-track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.coffee-song__marquee-group {
	display: flex;
	flex: none;
	gap: 48px;
	padding-right: 48px;
	white-space: nowrap;
}

.coffee-song__photo {
	position: absolute;
	z-index: var(--z-content);
	width: 252px;
	height: 420px;
	overflow: hidden;
	border-radius: 20px;
	backface-visibility: hidden;
	object-fit: cover;
	will-change: transform, opacity;
}

.coffee-song__photo--portrait {
	top: 0;
	left: calc(50% - 620px);
}

.coffee-song__photo--cup {
	top: 158px;
	left: calc(50% + 369px);
}

.coffee-song__record {
	position: absolute;
	top: var(--song-record-top);
	left: 50%;
	z-index: var(--z-record);
	width: 436px;
	height: 436px;
	transform: translateX(-50%);
	backface-visibility: hidden;
	transform-origin: 50% 50%;
	will-change: transform;
}

.coffee-song__record-layer {
	position: absolute;
	display: block;
	max-width: none;
	height: auto;
	pointer-events: none;
}

.coffee-song__record-layer--base {
	inset: 0;
	width: 100%;
}

.coffee-song__record-layer--grooves,
.coffee-song__record-layer--rings {
	top: 1.47%;
	left: 1.47%;
	width: 97.06%;
}

.coffee-song__record-layer--ring {
	top: 27.83%;
	left: 27.83%;
	width: 44.34%;
}

.coffee-song__record-layer--label {
	top: 32.95%;
	left: 32.95%;
	width: 34.1%;
}

.coffee-song__record-layer--center {
	top: 38.91%;
	left: 38.91%;
	width: 22.18%;
}

.coffee-song__button {
	position: relative;
	z-index: var(--z-content);
	justify-self: center;
	margin-inline: auto;
	color: var(--song-button-color);
	background: var(--song-button-background);
}

/* Book the Van */
.coffee-booking {
	position: relative;
	display: grid;
	place-items: center;
	margin-top: var(--section-space-xlarge);
	padding: 300px 20px;
	overflow: hidden;
	text-align: center;
	background: var(--color-secondary-cream);
	isolation: isolate;
}

.coffee-booking__pattern {
	position: absolute;
	top: -276px;
	left: 50%;
	z-index: var(--z-behind);
	/* Percentage sizing is required so the vinyl background fills every desktop canvas. */
	width: 100%;
	min-width: 1000px;
	max-width: none;
	height: auto;
	aspect-ratio: 1;
	transform: translateX(-50%);
	transform-origin: 50% 50%;
	will-change: transform;
}

.coffee-booking__fade {
	position: absolute;
	z-index: var(--z-base);
	display: block;
	pointer-events: none;
}

.coffee-booking__fade--top,
.coffee-booking__fade--bottom {
	left: 0;
	width: 100%;
	height: 220px;
}

.coffee-booking__fade--top {
	top: 0;
	background: linear-gradient(to bottom, var(--color-secondary-cream), rgba(238, 236, 229, 0));
}

.coffee-booking__fade--bottom {
	bottom: 0;
	background: linear-gradient(to top, var(--color-secondary-cream), rgba(238, 236, 229, 0));
}

.coffee-booking__fade--left,
.coffee-booking__fade--right {
	top: 0;
	width: 180px;
	height: 100%;
}

.coffee-booking__fade--left {
	left: 0;
	background: linear-gradient(to right, var(--color-secondary-cream), rgba(238, 236, 229, 0));
}

.coffee-booking__fade--right {
	right: 0;
	background: linear-gradient(to left, var(--color-secondary-cream), rgba(238, 236, 229, 0));
}

.coffee-booking__content {
	position: relative;
	z-index: var(--z-content);
	display: grid;
	justify-items: center;
	gap: var(--component-gap);
	width: 100%;
	max-width: 619px;
}

.coffee-booking__title {
	color: var(--color-primary-orange);
}

.coffee-booking__copy {
	max-width: 619px;
}

.coffee-booking__button {
	margin-top: var(--component-gap);
}

/* Follow the Rhythm */
.coffee-follow {
	display: grid;
	justify-items: center;
	margin-bottom: var(--section-footer-gap);
	overflow: hidden;
	background: var(--color-secondary-cream);
}

.coffee-follow__title {
	width: 100%;
	color: var(--color-primary-orange);
	text-align: center;
}

.coffee-follow__viewport {
	width: 100%;
	margin-top: var(--section-space-small);
	overflow: hidden;
}

.coffee-follow__gallery {
	display: flex;
	gap: 10px;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

.coffee-follow__item {
	position: relative;
	flex: none;
	width: 216px;
	height: 216px;
	overflow: hidden;
	border-radius: 6px;
}

.coffee-follow__item--edge {
	width: 170px;
}

.coffee-follow__item:first-child {
	border-radius: 0 6px 6px 0;
}

.coffee-follow__item:last-child {
	width: 130px;
	border-radius: 6px 0 0 6px;
}

.coffee-follow__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform, opacity;
}

.coffee-follow__item:first-child img,
.coffee-follow__item:last-child img {
	position: absolute;
	top: -36px;
	width: 216px;
	max-width: none;
	height: 288px;
}

.coffee-follow__item:first-child img {
	left: -46px;
}

.coffee-follow__item:last-child img {
	left: 0;
}

.coffee-follow__button {
	gap: 10px;
	margin-top: var(--section-space-small);
}

.coffee-follow__icon {
	width: 18px;
	height: 18px;
	-webkit-mask: url("../../src/assets/images/coffee/coffee-instagram.svg") center / contain no-repeat;
	mask: url("../../src/assets/images/coffee/coffee-instagram.svg") center / contain no-repeat;
}

@media (max-width: 1366px) {
	.coffee-testimonials__title {
		margin-top: 118px;
		padding-inline: 48px;
	}

	.coffee-testimonials__list {
		width: 520px;
	}

	.coffee-community__content {
		gap: var(--coffee-community-media-gap);
	}

	.coffee-community__media {
		width: 840px;
	}

	.coffee-menu__content {
		gap: 32px;
		padding: 248px 44px;
	}

	.coffee-events__panel {
		padding: 34px 48px;
	}
}

@media (min-width: 769px) and (max-width: 1366px) {
	.coffee-testimonials.is-scroll-scene {
		--coffee-testimonials-active-list-width: 520px;
		--coffee-testimonials-title-gap: 36px;
	}

	.coffee-testimonials.is-scroll-scene .coffee-testimonials__title {
		display: grid;
		grid-template-columns:
			minmax(0, 1fr)
			var(--coffee-testimonials-active-list-width)
			minmax(0, 1fr);
		column-gap: var(--coffee-testimonials-title-gap);
		justify-content: normal;
		padding-inline: 0;
	}

	.coffee-testimonials.is-scroll-scene .coffee-testimonials__title-part:first-child {
		grid-column: 1;
		justify-self: end;
	}

	.coffee-testimonials.is-scroll-scene .coffee-testimonials__title-part:last-child {
		grid-column: 3;
		justify-self: start;
	}
}

@media (max-width: 1166px) {
	.coffee-community__media {
		width: 780px;
	}

	.coffee-menu-slider {
		--coffee-menu-active-width: 370px;
		--coffee-menu-active-offset: -72.5px;
	}

	.coffee-testimonials__title {
		margin-top: 106px;
		padding-inline: 28px;
	}

	.coffee-testimonials__list {
		width: 490px;
	}

	.coffee-testimonial__inner {
		padding: 24px;
	}

	.coffee-menu__content {
		gap: 32px;
		padding: 210px 36px;
	}

	.coffee-menu-slider__group {
		gap: 18px;
		padding-right: 18px;
	}

	.coffee-menu-slider__item {
		flex-basis: 225px;
		width: 225px;
	}

	.coffee-menu-slider__item.is-before-active {
		transform: translateX(-52px);
	}

	.coffee-menu-slider__item.is-after-active {
		transform: translateX(52px);
	}

	.coffee-menu-slider__item.is-active .coffee-menu-card__media,
	.coffee-menu-slider__item.is-active .coffee-menu-card__image {
		width: 170px;
		height: 170px;
	}

	.coffee-menu-slider__item.is-active .coffee-menu-card__media {
		flex-basis: 170px;
	}

	.coffee-events__panel {
		gap: 28px;
		padding: 30px 34px;
	}

	.coffee-event {
		padding-inline: 12px;
	}

	.coffee-event__meta {
		gap: 6px 16px;
	}
}

@media (max-width: 1024px) {
	.coffee-community__media {
		width: 720px;
		max-width: calc(100% - 64px);
	}

	.coffee-menu-slider {
		--coffee-menu-active-width: 350px;
		--coffee-menu-active-offset: -62.5px;
	}

	.coffee-testimonials__title {
		margin-top: 94px;
		padding-inline: 20px;
	}

	.coffee-testimonials__list {
		width: 460px;
	}

	.coffee-menu__content {
		padding: 172px 24px;
	}

	.coffee-menu__fade--top,
	.coffee-menu__fade--bottom {
		height: 210px;
	}

	.coffee-menu__fade--left,
	.coffee-menu__fade--right {
		width: 150px;
	}

	.coffee-menu-slider__item.is-active .coffee-menu-card__media,
	.coffee-menu-slider__item.is-active .coffee-menu-card__image {
		width: 160px;
		height: 160px;
	}

	.coffee-menu-slider__item.is-active .coffee-menu-card__media {
		flex-basis: 160px;
	}

	.coffee-events {
		grid-template-columns: 1fr;
		gap: var(--component-gap);
	}

	.coffee-events__panel {
		grid-template-columns: minmax(240px, 0.82fr) minmax(0, 1.18fr);
		align-items: start;
		gap: 32px;
		padding: 34px;
	}

	.coffee-events__panel > *,
	.coffee-events__header,
	.coffee-events__upcoming,
	.coffee-events__list {
		min-width: 0;
	}

	.coffee-events__map {
		width: 100%;
	}

	.coffee-events__map-state {
		height: 360px;
	}
}

@media (max-width: 768px) {
	.coffee-community__media {
		width: 620px;
		max-width: calc(100% - 48px);
	}

	.coffee-menu-slider {
		--coffee-menu-active-width: 326px;
		--coffee-menu-active-offset: 7px;
	}

	.coffee-testimonial__inner {
		gap: 20px;
		padding: 22px 20px;
	}

	.coffee-testimonial,
	.coffee-testimonial--long {
		min-height: 0;
	}

	.coffee-testimonial__author {
		margin-top: 0;
	}

	.coffee-menu__content {
		gap: 24px;
		padding: 132px 20px;
	}

	.coffee-menu__pattern {
		top: -170px;
		width: 100%;
		min-width: 980px;
		height: auto;
	}

	.coffee-menu__fade--top,
	.coffee-menu__fade--bottom {
		height: 150px;
	}

	.coffee-menu__fade--left,
	.coffee-menu__fade--right {
		width: 90px;
	}

	.coffee-menu-slider__group {
		gap: 14px;
		padding-right: 14px;
	}

	.coffee-menu-slider__item {
		flex-basis: 340px;
		width: 340px;
	}

	.coffee-menu-slider__item.is-before-active {
		transform: none;
	}

	.coffee-menu-slider__item.is-after-active {
		transform: none;
	}

	.coffee-menu-slider__item.is-active .coffee-menu-card__media {
		flex-basis: 144px;
		width: 144px;
		height: 144px;
	}

	.coffee-menu-slider__item.is-active .coffee-menu-card__image {
		width: 144px;
		height: 144px;
	}

	.coffee-events__panel {
		grid-template-columns: 1fr;
		gap: var(--section-space-medium);
		padding: var(--content-gutter);
	}

	.coffee-events__panel > *,
	.coffee-events__header,
	.coffee-events__upcoming,
	.coffee-events__list {
		width: 100%;
		min-width: 0;
	}

	.coffee-events__header {
		gap: var(--component-gap);
	}

	.coffee-events__title {
		width: 100%;
	}

	.coffee-events__map-state {
		height: 320px;
	}
}

@media (max-width: 576px) {
	.coffee-community__media {
		width: calc(100% - 32px);
		max-width: 410px;
	}

	.coffee-menu-slider {
		--coffee-menu-active-width: 292px;
		--coffee-menu-active-offset: 7px;
	}

	.coffee-testimonials__list {
		gap: 18px;
	}

	.coffee-menu__content {
		padding: 110px 16px;
	}

	.coffee-menu-slider__item {
		flex-basis: 306px;
		width: 306px;
	}

	.coffee-menu-slider__item.is-active .coffee-menu-card__media {
		flex-basis: 124px;
		width: 124px;
		height: 124px;
	}

	.coffee-menu-slider__item.is-active .coffee-menu-card__image {
		width: 124px;
		height: 124px;
	}

	.coffee-event {
		grid-template-columns: 35px minmax(0, 1fr);
	}

	.coffee-event__arrow {
		display: none;
	}

	.coffee-event__meta {
		display: grid;
		gap: 6px;
	}

	.coffee-events__map-state {
		height: 280px;
	}
}

@media (min-width: 769px) and (max-height: 640px) {
	.coffee-community__content {
		gap: 64px;
	}

	.coffee-community__media {
		width: 720px;
	}
}

@media (max-width: 480px) {
	.coffee-menu-slider {
		--coffee-menu-active-width: 256px;
		--coffee-menu-active-offset: 7px;
	}

	.coffee-testimonial {
		padding: 4px;
	}

	.coffee-testimonial__inner {
		gap: 16px;
		padding: 20px 16px;
	}

	.coffee-menu__content {
		padding: 92px 16px;
	}

	.coffee-menu__pattern {
		min-width: 760px;
	}

	.coffee-menu-slider__item {
		flex-basis: 270px;
		width: 270px;
	}

	.coffee-menu-slider__item.is-active .coffee-menu-card__media {
		flex-basis: 104px;
		width: 104px;
		height: 104px;
	}

	.coffee-menu-slider__item.is-active .coffee-menu-card__image {
		width: 104px;
		height: 104px;
	}

	.coffee-events__panel {
		padding: 24px 18px;
	}

	.coffee-event {
		gap: 10px;
		padding: 10px;
	}

	.coffee-events__map {
		padding: 4px;
	}

	.coffee-events__map-state {
		height: 250px;
	}

	.coffee-events__map-details {
		top: 8px;
		left: 8px;
		max-width: calc(100% - 16px);
		padding: 8px 10px;
	}
}

@media (max-width: 360px) {
	.coffee-menu-slider {
		--coffee-menu-active-width: 236px;
		--coffee-menu-active-offset: 6px;
	}

	.coffee-menu-slider__item {
		flex-basis: 248px;
		width: 248px;
	}

	.coffee-menu-slider__item.is-active .coffee-menu-card__media {
		flex-basis: 92px;
		width: 92px;
		height: 92px;
	}

	.coffee-menu-slider__item.is-active .coffee-menu-card__image {
		width: 92px;
		height: 92px;
	}

	.coffee-events__instagram {
		width: 100%;
		padding-inline: 12px;
	}

	.coffee-events__map-state {
		height: 220px;
	}
}

@media (min-width: 769px) and (max-height: 720px) {
	.coffee-testimonials__title {
		margin-top: 92px;
	}

	.coffee-menu__content {
		gap: 32px;
		padding-block: 148px;
	}

	.coffee-events__panel {
		gap: 24px;
		padding-block: 26px;
	}
}

@media (min-width: 769px) and (max-height: 620px) {
	.coffee-testimonials__title {
		margin-top: 72px;
	}

	.coffee-menu__content {
		gap: 32px;
		padding-block: 112px;
	}

}

/* Fresh, Fast & Made to Order: auto-advancing center-stage carousel. */
.coffee-menu-carousel {
	position: relative;
	width: 100%;
	min-width: 0;
}

.coffee-menu-carousel__viewport {
	--coffee-menu-active-size: 160px;
	--coffee-menu-active-offset: 75px;
	position: relative;
	width: 100%;
	height: 190px;
	overflow: hidden;
	isolation: isolate;
}

.coffee-menu-carousel__track {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.coffee-menu-carousel__item {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 390px;
	height: 180px;
	margin-top: -90px;
	margin-left: -195px;
	opacity: 0;
	visibility: hidden;
	transform-origin: center;
	pointer-events: none;
	will-change: transform, opacity;
}

.coffee-menu-carousel__item.is-active {
	z-index: 6;
	opacity: 1;
	visibility: visible;
}

.coffee-menu-product {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 249px;
	height: 86px;
	padding: 12px 15px;
	border-radius: 8px;
	color: var(--color-black, #1a1a1a);
	background: rgba(234, 230, 217, 0.96);
	transform: translate(-50%, -50%);
	transform-origin: center;
	pointer-events: none;
}

.coffee-menu-product--sweet {
	width: 273px;
}

.coffee-menu-product--ham {
	width: 163px;
}

.coffee-menu-product--salmon {
	width: 193px;
}

.coffee-menu-product--smash,
.coffee-menu-product--stellar {
	width: 229px;
}

.coffee-menu-product__media {
	position: relative;
	display: block;
	flex: 0 0 59px;
	width: 59px;
	height: 59px;
	overflow: hidden;
	border-radius: 100%;
	transform-origin: center;
	backface-visibility: hidden;
	will-change: transform;
}

.coffee-menu-product--sweet .coffee-menu-product__media {
	overflow: hidden;
	border-radius: 100%;
}

.coffee-menu-product__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 100%;
	backface-visibility: hidden;
	transform-origin: center;
	will-change: transform;
}

.coffee-menu-product__title {
	margin: 0;
	color: inherit;
	opacity: 1;
	white-space: nowrap;
	transition:
		color 420ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.coffee-menu-carousel__item.is-active .coffee-menu-product {
	left: calc(50% - var(--coffee-menu-active-offset));
	width: var(--coffee-menu-active-size);
	height: var(--coffee-menu-active-size);
	padding: 0;
	color: var(--color-secondary-cream);
	background: transparent;
}

.coffee-menu-carousel__item.is-active .coffee-menu-product__media {
	flex-basis: var(--coffee-menu-active-size);
	width: var(--coffee-menu-active-size);
	height: var(--coffee-menu-active-size);
}

.coffee-menu-carousel__item.is-active .coffee-menu-product__title {
	opacity: 0;
}

.coffee-menu.is-carousel-ready .coffee-menu-product,
.coffee-menu.is-carousel-ready .coffee-menu-product__media {
	transition:
		left 920ms cubic-bezier(0.645, 0.045, 0.355, 1),
		width 920ms cubic-bezier(0.645, 0.045, 0.355, 1),
		height 920ms cubic-bezier(0.645, 0.045, 0.355, 1),
		flex-basis 920ms cubic-bezier(0.645, 0.045, 0.355, 1),
		padding 920ms cubic-bezier(0.645, 0.045, 0.355, 1),
		color 420ms cubic-bezier(0.22, 1, 0.36, 1),
		background-color 360ms ease;
}

/*
 * Keep the card surface out of the center-stage handoff.
 * The incoming active card becomes transparent immediately; the outgoing
 * card restores its inactive surface only after its 920ms move completes.
 */
@media (prefers-reduced-motion: no-preference) {
	.coffee-menu.is-carousel-ready .coffee-menu-carousel__item.is-active .coffee-menu-product {
		transition:
			left 920ms cubic-bezier(0.645, 0.045, 0.355, 1),
			width 920ms cubic-bezier(0.645, 0.045, 0.355, 1),
			height 920ms cubic-bezier(0.645, 0.045, 0.355, 1),
			flex-basis 920ms cubic-bezier(0.645, 0.045, 0.355, 1),
			padding 920ms cubic-bezier(0.645, 0.045, 0.355, 1),
			color 420ms cubic-bezier(0.22, 1, 0.36, 1),
			background-color 0ms linear;
	}

	.coffee-menu.is-carousel-ready .coffee-menu-carousel__item:not(.is-active) .coffee-menu-product {
		transition:
			left 920ms cubic-bezier(0.645, 0.045, 0.355, 1),
			width 920ms cubic-bezier(0.645, 0.045, 0.355, 1),
			height 920ms cubic-bezier(0.645, 0.045, 0.355, 1),
			flex-basis 920ms cubic-bezier(0.645, 0.045, 0.355, 1),
			padding 920ms cubic-bezier(0.645, 0.045, 0.355, 1),
			color 420ms cubic-bezier(0.22, 1, 0.36, 1),
			background-color 0ms linear 920ms;
	}
}

.coffee-menu-carousel__label {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 430px;
	height: 86px;
	margin-top: -43px;
	margin-left: -215px;
	padding: 0;
	overflow: hidden;
	border-radius: 11px;
	color: var(--color-cream, #eae6d9);
	background: var(--color-orange, #ff6b1a);
	pointer-events: none;
}

.coffee-menu-carousel__label::before {
	flex: 0 0 var(--coffee-menu-label-spacer, 50%);
	content: "";
}

.coffee-menu-carousel__label-text {
	display: block;
	margin-left: clamp(14px, 1.25vw, 22px);
	white-space: nowrap;
	will-change: transform, opacity;
}

@media (max-width: 1366px) {
	.coffee-menu-carousel__viewport {
		height: 184px;
	}
}

@media (max-width: 1166px) {
	.coffee-menu-carousel__viewport {
		height: 174px;
	}

	.coffee-menu-carousel__label {
		width: 400px;
		height: 82px;
		margin-top: -41px;
		margin-left: -200px;
	}

	.coffee-menu-product {
		gap: 10px;
		height: 80px;
		padding: 10px 13px;
	}

	.coffee-menu-product__media {
		flex-basis: 54px;
		width: 54px;
		height: 54px;
	}
}

@media (max-width: 1090px) {
	.coffee-menu-carousel__viewport {
		height: 162px;
	}

	.coffee-menu-carousel__label {
		width: 360px;
		height: 76px;
		margin-top: -38px;
		margin-left: -180px;
	}

	.coffee-menu-product {
		width: 220px;
		height: 72px;
		gap: 10px;
		padding: 10px 12px;
	}

	.coffee-menu-product--sweet {
		width: 235px;
	}

	.coffee-menu-product--ham {
		width: 145px;
	}

	.coffee-menu-product--salmon {
		width: 170px;
	}

	.coffee-menu-product--smash,
	.coffee-menu-product--stellar {
		width: 205px;
	}

	.coffee-menu-product__media {
		flex-basis: 48px;
		width: 48px;
		height: 48px;
	}

	.coffee-menu-product__title,
	.coffee-menu-carousel__label-text {
		font-size: 18px;
		line-height: 1.15;
	}
}

@media (max-width: 1024px) {
	.coffee-menu-carousel__viewport {
		height: 162px;
	}

	.coffee-menu-carousel__label {
		width: 360px;
		height: 76px;
		margin-top: -38px;
		margin-left: -180px;
	}

	.coffee-menu-product {
		height: 72px;
		padding: 10px 12px;
	}

	.coffee-menu-product__media {
		flex-basis: 48px;
		width: 48px;
		height: 48px;
	}
}

@media (max-width: 768px) {
	.coffee-menu-carousel__viewport {
		height: 154px;
	}

	.coffee-menu-carousel__label {
		width: 350px;
		height: 74px;
		margin-top: -37px;
		margin-left: -175px;
	}
}

@media (max-width: 576px) {
	.coffee-menu-carousel__viewport {
		height: 144px;
	}

	.coffee-menu-carousel__label {
		width: 330px;
		height: 70px;
		margin-top: -35px;
		margin-left: -165px;
	}
}

@media (max-width: 480px) {
	.coffee-menu-carousel__viewport {
		height: 134px;
	}

	.coffee-menu-carousel__label {
		right: auto;
		left: 50%;
		width: min(330px, calc(100% - 24px));
		height: 66px;
		margin-top: -33px;
		margin-left: 0;
		transform: translateX(-50%);
	}
}

@media (max-width: 375px) {
	.coffee-menu-carousel__viewport {
		height: 124px;
	}

	.coffee-menu-carousel__label {
		right: auto;
		left: 50%;
		width: min(330px, calc(100% - 16px));
		height: 62px;
		margin-top: -31px;
	}

	.coffee-menu-carousel__label-text {
		margin-right: 12px;
		margin-left: 12px;
		font-size: 16px;
		line-height: 1.15;
	}
}

@media (min-width: 769px) and (max-height: 700px) {
	.coffee-menu__content {
		gap: 32px;
		padding-top: var(--section-space-large);
		padding-bottom: var(--section-space-large);
	}

	.coffee-menu-carousel__viewport {
		height: 180px;
	}
}

@media (max-width: 768px) and (max-height: 560px) and (orientation: landscape) {
	.coffee-menu-carousel__viewport {
		height: 140px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.coffee-menu-carousel__item,
	.coffee-menu-product,
	.coffee-menu-product__media,
	.coffee-menu-product__image,
	.coffee-menu-carousel__label-text {
		transition: none;
		will-change: auto;
	}

	.coffee-menu-carousel__item:not(.is-active) {
		display: none;
	}
}

@media (min-width: 1167px) and (max-height: 720px) {
	.coffee-menu-slider {
		--coffee-menu-active-width: 350px;
		--coffee-menu-active-offset: -50px;
	}

	.coffee-menu-slider__item.is-active .coffee-menu-slider__media,
	.coffee-menu-slider__item.is-active .coffee-menu-slider__image {
		width: 160px;
		height: 160px;
		flex-basis: 160px;
	}

	.coffee-menu-carousel__viewport {
		height: 170px;
	}

	.coffee-menu-carousel__label {
		width: 360px;
		height: 72px;
		margin-top: -36px;
		margin-left: -180px;
	}

	.coffee-menu-product {
		width: 220px;
		height: 72px;
		gap: 10px;
		padding: 10px 12px;
	}

	.coffee-menu-product--sweet {
		width: 235px;
	}

	.coffee-menu-product--ham {
		width: 145px;
	}

	.coffee-menu-product--salmon {
		width: 170px;
	}

	.coffee-menu-product--smash,
	.coffee-menu-product--stellar {
		width: 205px;
	}

	.coffee-menu-product__media {
		flex-basis: 48px;
		width: 48px;
		height: 48px;
	}

	.coffee-menu-product__title,
	.coffee-menu-carousel__label-text {
		font-size: 18px;
		line-height: 1.15;
	}
}

@media (min-width: 769px) and (max-width: 1166px) and (max-height: 720px) {
	.coffee-menu-slider {
		--coffee-menu-active-width: 330px;
		--coffee-menu-active-offset: -52px;
	}

	.coffee-menu-slider__item.is-active .coffee-menu-slider__media,
	.coffee-menu-slider__item.is-active .coffee-menu-slider__image {
		width: 150px;
		height: 150px;
		flex-basis: 150px;
	}

	.coffee-menu-carousel__viewport {
		height: 140px;
	}

	.coffee-menu-carousel__label {
		width: 330px;
		height: 66px;
		margin-top: -33px;
		margin-left: -165px;
	}

	.coffee-menu-product {
		width: 205px;
		height: 66px;
		gap: 9px;
		padding: 9px 11px;
	}

	.coffee-menu-product--sweet {
		width: 220px;
	}

	.coffee-menu-product--ham {
		width: 135px;
	}

	.coffee-menu-product--salmon {
		width: 155px;
	}

	.coffee-menu-product--smash,
	.coffee-menu-product--stellar {
		width: 190px;
	}

	.coffee-menu-product__media {
		flex-basis: 44px;
		width: 44px;
		height: 44px;
	}

	.coffee-menu-product__title,
	.coffee-menu-carousel__label-text {
		font-size: 17px;
		line-height: 1.15;
	}
}

@media (max-width: 1366px) {
	.coffee-song__scene {
		--song-record-top: 46px;
		height: 550px;
	}

	.coffee-song__photo {
		width: 240px;
		height: 400px;
	}

	.coffee-song__photo--portrait {
		left: calc(50% - 580px);
	}

	.coffee-song__photo--cup {
		top: 150px;
		left: calc(50% + 340px);
	}

	.coffee-song__record {
		width: 410px;
		height: 410px;
	}

	.coffee-song__expanding-circle {
		width: 410px;
		height: 410px;
	}

	.coffee-booking {
		padding-block: 270px;
	}

	.coffee-booking__pattern {
		top: -250px;
	}
}

@media (max-width: 1166px) {
	.coffee-song__scene {
		--song-record-top: 44px;
		height: 520px;
	}

	.coffee-song__marquees {
		top: 108px;
		gap: 30px;
	}

	.coffee-song__photo {
		width: 210px;
		height: 350px;
	}

	.coffee-song__photo--portrait {
		left: calc(50% - 500px);
	}

	.coffee-song__photo--cup {
		top: 145px;
		left: calc(50% + 290px);
	}

	.coffee-song__record {
		width: 360px;
		height: 360px;
	}

	.coffee-song__expanding-circle {
		width: 360px;
		height: 360px;
	}

	.coffee-booking {
		padding-block: 230px;
	}

	.coffee-booking__pattern {
		top: -205px;
	}
}

@media (max-width: 1024px) {
	.coffee-song__scene {
		height: 500px;
	}

	.coffee-song__photo {
		width: 190px;
		height: 317px;
	}

	.coffee-song__photo--portrait {
		left: calc(50% - 430px);
	}

	.coffee-song__photo--cup {
		top: 140px;
		left: calc(50% + 240px);
	}

	.coffee-song__record {
		width: 340px;
		height: 340px;
	}

	.coffee-song__expanding-circle {
		width: 340px;
		height: 340px;
	}

	.coffee-booking {
		padding-block: 200px;
	}

	.coffee-booking__pattern {
		top: -170px;
	}

	.coffee-booking__fade--left,
	.coffee-booking__fade--right {
		width: 130px;
	}
}

@media (max-width: 768px) {
	.coffee-song__stage {
		height: var(--coffee-song-viewport-height, 100dvh);
		min-height: var(--coffee-song-viewport-height, 100dvh);
	}

	.coffee-song__scene {
		--song-record-top: 48px;
		height: 460px;
	}

	.coffee-song__marquees {
		top: 96px;
		gap: 24px;
	}

	.coffee-song__marquee-group {
		gap: 32px;
		padding-right: 32px;
	}

	.coffee-song__photo {
		width: 150px;
		height: 250px;
		border-radius: 14px;
	}

	.coffee-song__photo--portrait {
		top: 14px;
		left: 24px;
	}

	.coffee-song__photo--cup {
		top: 156px;
		right: 24px;
		left: auto;
	}

	.coffee-song__record {
		width: 300px;
		height: 300px;
	}

	.coffee-song__expanding-circle {
		width: 300px;
		height: 300px;
	}

	.coffee-booking {
		padding: 160px 24px;
	}

	.coffee-booking__pattern {
		top: -90px;
		min-width: 960px;
	}

	.coffee-booking__fade--top,
	.coffee-booking__fade--bottom {
		height: 150px;
	}

	.coffee-booking__fade--left,
	.coffee-booking__fade--right {
		width: 80px;
	}

	.coffee-follow__viewport {
		overflow-x: auto;
		scroll-padding-inline: var(--page-gutter);
		scrollbar-width: none;
	}

	.coffee-follow__gallery {
		padding-inline: var(--page-gutter);
	}

	.coffee-follow__item,
	.coffee-follow__item--edge,
	.coffee-follow__item:last-child {
		width: 180px;
		height: 216px;
		scroll-snap-align: start;
	}

	.coffee-follow__item:first-child,
	.coffee-follow__item:last-child {
		border-radius: 6px;
	}

	.coffee-follow__item:first-child img,
	.coffee-follow__item:last-child img {
		position: static;
		width: 100%;
		max-width: 100%;
		height: 100%;
	}
}

@media (max-width: 576px) {
	.coffee-song__scene {
		--song-record-top: 52px;
		height: 420px;
	}

	.coffee-song__marquees {
		top: 90px;
		gap: 20px;
	}

	.coffee-song__photo {
		width: 120px;
		height: 200px;
	}

	.coffee-song__photo--portrait {
		top: 18px;
		left: 12px;
	}

	.coffee-song__photo--cup {
		top: 150px;
		right: 12px;
	}

	.coffee-song__record {
		width: 270px;
		height: 270px;
	}

	.coffee-song__expanding-circle {
		width: 270px;
		height: 270px;
	}

	.coffee-booking {
		padding: 140px 18px;
	}

	.coffee-booking__pattern {
		top: -20px;
		min-width: 800px;
	}

	.coffee-follow__item,
	.coffee-follow__item--edge,
	.coffee-follow__item:last-child {
		width: 168px;
		height: 196px;
	}
}

@media (max-width: 480px) {
	.coffee-song__stage {
		align-content: center;
		padding-block: clamp(32px, 6vh, 52px);
	}

	.coffee-song__scene {
		height: 390px;
	}

	.coffee-song__photo {
		width: 108px;
		height: 180px;
	}

	.coffee-song__photo--portrait {
		top: 20px;
		left: 8px;
	}

	.coffee-song__photo--cup {
		top: 158px;
		right: 8px;
	}

	.coffee-song__record {
		width: 240px;
		height: 240px;
	}

	.coffee-song__expanding-circle {
		width: 240px;
		height: 240px;
	}

	.coffee-booking {
		padding: 120px 16px;
	}

	.coffee-booking__pattern {
		top: 0;
		min-width: 680px;
	}

	.coffee-booking__fade--left,
	.coffee-booking__fade--right {
		width: 50px;
	}

	.coffee-booking__fade--bottom {
		height: 48px;
	}

	.coffee-follow__item,
	.coffee-follow__item--edge,
	.coffee-follow__item:last-child {
		width: 156px;
		height: 182px;
	}

	.coffee-follow__button {
		max-width: calc(100% - 32px);
		padding-inline: 14px;
	}
}

@media (max-width: 360px) {
	.coffee-song__scene {
		height: 370px;
	}

	.coffee-song__photo {
		width: 94px;
		height: 157px;
	}

	.coffee-song__photo--cup {
		top: 150px;
	}

	.coffee-song__record {
		width: 220px;
		height: 220px;
	}

	.coffee-song__expanding-circle {
		width: 220px;
		height: 220px;
	}

	.coffee-events__instagram {
		gap: 3px;
		padding-inline: 12px;
		font-size: 15px;
	}

	.coffee-follow__item,
	.coffee-follow__item--edge,
	.coffee-follow__item:last-child {
		width: 146px;
		height: 170px;
	}
}

@media (min-width: 769px) and (max-height: 720px) {
	.coffee-song__stage {
		align-content: start;
		padding-top: 90px;
	}

	.coffee-song__scene {
		height: 420px;
	}

	.coffee-song__photo {
		width: 180px;
		height: 300px;
	}

	.coffee-song__photo--portrait {
		left: calc(50% - 400px);
	}

	.coffee-song__photo--cup {
		top: 110px;
		left: calc(50% + 210px);
	}

	.coffee-song__record {
		width: 344px;
		height: 344px;
	}

	.coffee-song__expanding-circle {
		width: 344px;
		height: 344px;
	}

	.coffee-booking {
		padding-block: 190px;
	}
}

@media (min-width: 769px) and (max-height: 620px) {
	.coffee-song__stage {
		padding-top: 86px;
		padding-bottom: var(--section-space-small);
	}

	.coffee-song__scene {
		height: 360px;
	}

	.coffee-song__photo {
		width: 160px;
		height: 267px;
	}

	.coffee-song__photo--portrait {
		left: calc(50% - 380px);
	}

	.coffee-song__photo--cup {
		top: 92px;
		left: calc(50% + 220px);
	}

	.coffee-song__record {
		width: 280px;
		height: 280px;
	}

	.coffee-song__expanding-circle {
		width: 280px;
		height: 280px;
	}

	.coffee-booking {
		padding-block: 150px;
	}
}

@media (min-width: 769px) and (max-width: 1166px) {
	.coffee-testimonials.is-scroll-scene {
		--coffee-testimonials-active-list-width: 440px;
	}

	.coffee-testimonials.is-scroll-scene .coffee-testimonials__title {
		padding-inline: 0;
	}

	.coffee-testimonials.is-scroll-scene .coffee-testimonials__list {
		width: 440px;
	}

	.coffee-testimonials.is-scroll-scene .coffee-testimonial {
		min-height: 280px;
	}

	.coffee-testimonials.is-scroll-scene .coffee-testimonial--long {
		min-height: 310px;
	}
}

@media (min-width: 769px) and (max-width: 900px) {
	.coffee-testimonials.is-scroll-scene {
		--coffee-testimonials-active-list-width: 300px;
	}

	.coffee-testimonials.is-scroll-scene .coffee-testimonials__title {
		padding-inline: 0;
	}

	.coffee-testimonials.is-scroll-scene .coffee-testimonials__list {
		width: 300px;
	}

	.coffee-testimonials.is-scroll-scene .coffee-testimonial {
		min-height: 260px;
	}

	.coffee-testimonials.is-scroll-scene .coffee-testimonial--long {
		min-height: 292px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) and (max-height: 720px) {
	.coffee-song__photo--portrait {
		left: calc(50% - 360px);
	}

	.coffee-song__photo--cup {
		left: calc(50% + 145px);
	}
}

@media (max-width: 768px) {
	.coffee-testimonials__stage {
		gap: var(--section-space-medium);
	}

	.coffee-testimonials__title,
	.coffee-testimonials__list {
		grid-area: auto;
	}

	.coffee-testimonials__title {
		position: static;
		display: block;
		margin-top: 0;
		padding-inline: 0;
		text-align: center;
	}

	/*
	 * Preserve the inline sentence layout without turning the animated line
	 * and its clipping mask into non-transformable inline boxes.
	 */
	.coffee-testimonials__title-part {
		display: inline;
	}

	.coffee-testimonials__title-mask,
	.coffee-testimonials__title-line {
		display: inline-block;
		vertical-align: top;
	}

	.coffee-testimonials__list {
		width: 100%;
		max-width: 540px;
	}
}

@media (max-width: 1024px) and (max-height: 560px) and (orientation: landscape) {
	.coffee-song__stage {
		height: var(--coffee-song-viewport-height, 100dvh);
		min-height: var(--coffee-song-viewport-height, 100dvh);
		align-content: center;
		padding-block: 20px;
	}

	.coffee-song__scene {
		--song-record-top: 18px;
		height: 230px;
	}

	.coffee-song__marquees {
		top: 58px;
		gap: 10px;
	}

	.coffee-song__marquee-group {
		gap: 22px;
		padding-right: 22px;
	}

	.coffee-song__photo {
		width: 84px;
		height: 140px;
		border-radius: 10px;
	}

	.coffee-song__photo--portrait {
		top: 18px;
		left: 24px;
	}

	.coffee-song__photo--cup {
		top: 72px;
		right: 24px;
		left: auto;
	}

	.coffee-song__record,
	.coffee-song__expanding-circle {
		width: 200px;
		height: 200px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.coffee-testimonial,
	.coffee-community__orbit,
	.coffee-song__marquee-track,
	.coffee-song__photo,
	.coffee-song__record,
	.coffee-booking__pattern,
	.coffee-follow__item img,
	.coffee-menu-slider__track,
	.coffee-menu-card__image,
	.coffee-events__map-state,
	.coffee-events__map-embed {
		will-change: auto;
	}

	.coffee-menu-slider__viewport {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.coffee-menu-slider__group[aria-hidden="true"] {
		display: none;
	}

}

/* Testimonial edge safety: keep split headings inside intermediate viewports. */
@media (min-width: 769px) and (max-width: 1166px) {
  .coffee-testimonials.is-scroll-scene {
    --coffee-testimonials-active-list-width: clamp(300px, 38vw, 440px);
  }

  .coffee-testimonials.is-scroll-scene .coffee-testimonials__title {
    padding-inline: 0;
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1.15;
  }

  .coffee-testimonials.is-scroll-scene .coffee-testimonials__list {
    width: var(--coffee-testimonials-active-list-width);
  }
}