:root {
	--bg: #ead38d;
	--bg-soft: #d8b861;
	--section-gold-end: #cfa44c;
	--panel: rgba(0, 0, 0, 0.06);
	--line: rgba(0, 0, 0, 0.12);
	--text: #15110a;
	--muted: rgba(21, 17, 10, 0.78);
	--teal: #c59b33;
	--ice: #d4ddd8;
	--rose: #d8b861;
	--gold: #d8b861;
	--amber: #9f7316;
	--shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	overflow-x: hidden;
	font-family: "Manrope", sans-serif;
	color: var(--text);
	background:
		radial-gradient(circle at 20% 20%, rgba(255, 243, 202, 0.34), transparent 30%),
		radial-gradient(circle at 80% 18%, rgba(159, 115, 22, 0.14), transparent 28%),
		linear-gradient(180deg, #efe0a8 0%, #e3c97d 52%, #cca24b 100%);
}

img,
video {
	display: block;
	max-width: 100%;
}

.page-shell {
	position: relative;
	isolation: isolate;
}

.page-shell::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: 0.16;
	mix-blend-mode: soft-light;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
	background-size: 90px 90px;
}

.hero {
	position: relative;
	z-index: 4;
	isolation: isolate;
	min-height: 100svh;
	overflow: clip;
	background:
		radial-gradient(circle at 18% 88%, rgba(255, 239, 192, 0.28), transparent 26%),
		radial-gradient(circle at 82% 18%, rgba(159, 115, 22, 0.18), transparent 24%),
		linear-gradient(180deg, #ecd694 0%, #dbbc67 48%, #bf933e 100%);
}

.hero__meta {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
	width: 100%;
	padding: max(1.35rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) 1.35rem max(1.5rem, env(safe-area-inset-left));
	pointer-events: none;
}

.hero__meta::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: min(28rem, 56vw);
	height: 100%;
	background: linear-gradient(90deg, rgba(245, 230, 180, 0.68) 0%, rgba(245, 230, 180, 0.18) 72%, transparent 100%);
	filter: blur(2px);
	z-index: -1;
	pointer-events: none;
}

.hero__edition {
	font-family: "Oxanium", sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.42rem;
	text-transform: uppercase;
	color: #130f09;
	text-shadow: 0 1px 0 rgba(255, 245, 214, 0.36);
}

.hero__backdrop,
.hero__wordmark,
.hero__grid,
.hero__vignette,
.hero__glow,
.hero__beam {
	position: absolute;
	inset: 0;
}

.hero__backdrop {
	background:
		linear-gradient(90deg, rgba(236, 214, 148, 0.54) 0%, rgba(219, 188, 103, 0.22) 36%, rgba(191, 147, 62, 0.14) 68%, rgba(108, 78, 21, 0.32) 100%),
		linear-gradient(180deg, rgba(255, 247, 220, 0.08) 0%, rgba(88, 63, 13, 0.2) 100%),
		url("img_hero/hero.png") center 10% / 102% auto no-repeat;
	transform: scale(1);
	filter: saturate(0.9) contrast(1) brightness(0.74);
	opacity: 0.78;
}

.hero__wordmark {
	z-index: 1;
	display: grid;
	place-items: center;
	font-family: "Oxanium", sans-serif;
	font-size: clamp(8rem, 27vw, 20rem);
	font-weight: 800;
	letter-spacing: -0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.06);
	text-shadow: 0 0 40px rgba(0, 0, 0, 0.16);
}

.hero__grid {
	inset: auto -10% -14%;
	height: 56%;
	background:
		linear-gradient(transparent 0%, rgba(0, 0, 0, 0.18) 88%),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 10vw),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 6vh);
	transform-origin: center bottom;
	transform: rotateX(78deg) translateY(24%);
	opacity: 0.12;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 20%, black 45%);
	mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 20%, black 45%);
}

.hero__glow--left {
	background: radial-gradient(circle at 20% 58%, rgba(240, 194, 75, 0.24), transparent 26%);
	filter: blur(28px);
	mix-blend-mode: screen;
}

.hero__glow--right {
	background: radial-gradient(circle at 80% 40%, rgba(186, 132, 22, 0.18), transparent 28%);
	filter: blur(24px);
	mix-blend-mode: screen;
}

.hero__beam {
	inset: 10% auto auto;
	width: 40vw;
	height: 90vh;
	border-radius: 999px;
	filter: blur(10px);
	opacity: 0.16;
	mix-blend-mode: screen;
}

.hero__beam--one {
	left: -6vw;
	background: linear-gradient(120deg, rgba(240, 194, 75, 0.24), transparent 60%);
	transform: rotate(-14deg) translateZ(50px);
}

.hero__beam--two {
	right: -8vw;
	background: linear-gradient(240deg, rgba(186, 132, 22, 0.24), transparent 62%);
	transform: rotate(18deg) translateZ(90px);
}

.hero__vignette {
	background:
		radial-gradient(circle at center, transparent 36%, rgba(3, 4, 8, 0.2) 58%, rgba(2, 3, 7, 0.86) 100%),
		linear-gradient(180deg, rgba(2, 4, 8, 0.26) 0%, transparent 22%, transparent 72%, rgba(2, 3, 7, 0.72) 100%);
}

.hero__scene {
	position: relative;
	z-index: 2;
	min-height: 100svh;
	padding: clamp(5.5rem, 8vw, 7rem) clamp(1.2rem, 3vw, 3rem) clamp(1.2rem, 3vw, 2rem);
	display: grid;
	grid-template-columns: minmax(260px, 1fr);
	align-items: stretch;
}

.hero__caption-block {
	position: absolute;
	left: clamp(1.2rem, 3vw, 3rem);
	bottom: clamp(1rem, 2.4vw, 1.6rem);
	z-index: 6;
	display: grid;
	gap: 0.2rem;
	padding: 0.45rem 0.7rem 0.45rem 0;
}

.hero__caption-block::before {
	content: "";
	position: absolute;
	inset: -0.55rem -0.8rem -0.55rem -0.8rem;
	border-radius: 1.2rem;
	background: linear-gradient(90deg, rgba(241, 224, 171, 0.54) 0%, rgba(241, 224, 171, 0.16) 68%, transparent 100%);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	z-index: -1;
}

.hero__kicker {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18rem;
	text-transform: uppercase;
	color: rgba(19, 15, 9, 0.8);
	text-shadow: 0 1px 0 rgba(255, 244, 210, 0.4);
}

.hero__caption-name {
	font-family: "Oxanium", sans-serif;
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	font-weight: 600;
	letter-spacing: 0.08rem;
	text-transform: uppercase;
	background: linear-gradient(90deg, #f1ede3 0%, #d7c4a8 52%, #ef79af 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: 0.6px rgba(44, 28, 5, 0.22);
	text-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), 0 0 2px rgba(255, 248, 230, 0.12);
}

.hero__selector {
	position: absolute;
	right: clamp(1rem, 3vw, 2.4rem);
	bottom: clamp(1rem, 2.2vw, 1.9rem);
	z-index: 6;
	display: flex;
	gap: 1rem;
	align-items: flex-end;
	perspective: 1000px;
}

.hero__option {
	display: grid;
	place-items: center;
	width: clamp(4.2rem, 6vw, 5.8rem);
	height: clamp(2rem, 3vw, 2.6rem);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: rgba(19, 15, 9, 0.92);
	cursor: pointer;
	position: relative;
	transform-origin: 50% 70%;
	transition: opacity 0.24s ease, filter 0.24s ease;
	text-shadow: 0 1px 0 rgba(255, 244, 210, 0.35);
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}

.hero__option:hover,
.hero__option:focus-visible,
.hero__option.is-active {
	opacity: 1;
	filter: brightness(1.14) saturate(1.02);
	outline: none;
}

.hero__option:not(.is-active) {
	opacity: 0.72;
	filter: none;
}

.hero__selector:hover .hero__option:not(:hover):not(.is-active) {
	opacity: 0.56;
}

.hero__option-thumb {
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.16));
}

.hero__option.is-active .hero__option-thumb {
	filter:
		drop-shadow(0 8px 12px rgba(0, 0, 0, 0.16))
		drop-shadow(0 0 10px rgba(255, 255, 255, 0.18));
}

.hero__showcase {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 34px 56px rgba(0, 0, 0, 0.34));
}

.hero__showcase::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 23%;
	width: clamp(220px, 42vw, 560px);
	height: clamp(20px, 3.4vw, 40px);
	border-radius: 999px;
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--hero-shadow-color, rgba(52, 132, 121, 0.44)) 70%, rgba(0, 0, 0, 0.36)) 0%, color-mix(in srgb, var(--hero-shadow-color, rgba(52, 132, 121, 0.44)) 38%, transparent) 48%, transparent 78%);
	transform: translateX(calc(-50% + var(--hero-shoe-x, 0px))) rotate(-5deg) scaleY(0.72);
	filter: blur(20px);
	opacity: 0.7;
	pointer-events: none;
	transition: background 0.3s ease, transform 0.3s ease;
}

.hero__showcase-image {
	width: auto;
	height: clamp(205px, 23vw, 292px);
	object-fit: contain;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
	transform: translate3d(var(--hero-shoe-x, 0px), calc(var(--hero-shoe-y, 22px) + var(--hero-scroll-offset, 0px)), 0) rotate(calc(var(--hero-shoe-rotate, 8deg) + var(--hero-scroll-rotate, 0deg))) scale(var(--hero-shoe-scale, 1));
	transform-origin: 50% 60%;
	will-change: transform;
	filter:
		drop-shadow(0 18px 24px rgba(0, 0, 0, 0.28))
		drop-shadow(0 26px 20px color-mix(in srgb, var(--hero-shadow-color, rgba(52, 132, 121, 0.44)) 48%, rgba(0, 0, 0, 0.14)))
		drop-shadow(0 8px 10px color-mix(in srgb, var(--hero-shadow-color, rgba(52, 132, 121, 0.44)) 24%, transparent));
}

.feature-story {
	position: relative;
	z-index: 6;
	isolation: isolate;
	padding: clamp(2rem, 4vw, 4rem) clamp(1.2rem, 3vw, 3rem) 0;
	background:
		linear-gradient(180deg, rgba(240, 221, 162, 0.94) 0%, rgba(226, 197, 119, 0.98) 18%, var(--section-gold-end) 100%);
	overflow: visible;
}

.feature-story__layout {
	position: relative;
	display: grid;
	grid-template-columns: minmax(320px, 0.95fr) minmax(320px, 0.9fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
	max-width: 1380px;
	margin: 0 auto;
}

.feature-story__visual {
	position: sticky;
	top: 10vh;
	height: 80vh;
	display: grid;
	place-items: center;
	perspective: 1600px;
	overflow: visible;
	isolation: isolate;
	z-index: 7;
}

.feature-story__visual::before {
	content: "";
	position: absolute;
	inset: 12% 6%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 0, 0, 0.08), transparent 62%);
	filter: blur(28px);
	opacity: 0.72;
}

.feature-story__ray {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(62vw, 740px);
	height: clamp(3.8rem, 8vw, 6rem);
	border-radius: 999px;
	background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.16) 18%, rgba(0, 0, 0, 0.04) 50%, transparent 100%);
	filter: blur(18px);
	opacity: 0.36;
	transform-origin: 50% 50%;
	pointer-events: none;
}

.feature-story__ray--one {
	transform: translate(-50%, -50%) rotate(-18deg);
}

.feature-story__ray--two {
	width: min(54vw, 640px);
	height: clamp(2.8rem, 5vw, 4rem);
	opacity: 0.28;
	transform: translate(-50%, -50%) rotate(8deg);
}

.feature-story__ray--three {
	width: min(48vw, 560px);
	height: clamp(2.2rem, 4vw, 3rem);
	opacity: 0.22;
	transform: translate(-50%, -50%) rotate(26deg);
}

.feature-story__orb {
	position: absolute;
	width: 28vw;
	height: 28vw;
	max-width: 340px;
	max-height: 340px;
	border-radius: 50%;
	filter: blur(40px);
	opacity: 0.2;
	mix-blend-mode: screen;
	pointer-events: none;
}

.feature-story__orb--pink {
	top: 8%;
	left: -8%;
	background: radial-gradient(circle, rgba(240, 194, 75, 0.64), transparent 68%);
}

.feature-story__orb--teal {
	right: -10%;
	bottom: 4%;
	background: radial-gradient(circle, rgba(186, 132, 22, 0.68), transparent 68%);
}

.feature-story__shoe-wrap {
	position: relative;
	z-index: 8;
	width: min(88%, 600px);
	max-width: 100%;
	transform-style: preserve-3d;
	filter: drop-shadow(0 38px 72px rgba(0, 0, 0, 0.34));
}

.feature-story__shoe {
	width: 100%;
	object-fit: contain;
	transform: rotate(-10deg) rotateX(12deg) rotateY(-10deg) translate3d(0, 0, 80px);
	transform-origin: 50% 50%;
}

.feature-story__content {
	position: relative;
	z-index: 12;
	display: grid;
	gap: 1.5rem;
	padding-block: 10vh;
}

.feature-story__heading {
	position: sticky;
	top: 0;
	padding-block: 0.6rem 1rem;
	background: linear-gradient(180deg, rgba(239, 193, 71, 0.98) 72%, rgba(239, 193, 71, 0));
	z-index: 2;
}

.feature-story__eyebrow {
	margin-bottom: 0.8rem;
	font-size: 0.72rem;
	letter-spacing: 0.28rem;
	text-transform: uppercase;
	color: rgba(19, 15, 9, 0.82);
	text-shadow: 0 1px 0 rgba(255, 244, 210, 0.32);
}

.feature-story__title {
	max-width: 18ch;
	font-family: "Oxanium", sans-serif;
	font-size: clamp(2rem, 4.2vw, 4.8rem);
	line-height: 0.94;
	text-transform: uppercase;
	letter-spacing: -0.04em;
	background: linear-gradient(90deg, #59a79a 0%, #f1ede3 28%, #c6b16d 62%, #f05aa2 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: 0.8px rgba(67, 47, 9, 0.22);
	text-shadow: 0 12px 30px rgba(0, 0, 0, 0.22), 0 2px 4px rgba(91, 63, 10, 0.18);
}

.feature-step {
	position: relative;
	min-height: 72vh;
	display: grid;
	align-content: center;
	gap: 1rem;
	padding-right: min(10vw, 5rem);
	opacity: 0.28;
	transform: translateY(40px);
	transition: opacity 0.45s ease, transform 0.45s ease;
}

.feature-step.is-active {
	opacity: 1;
	transform: translateY(0);
}

.feature-step::before {
	content: "";
	position: absolute;
	left: -1.4rem;
	top: 50%;
	width: 1px;
	height: 58%;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.26), transparent);
	transform: translateY(-50%);
}

.feature-step__index {
	font-family: "Oxanium", sans-serif;
	font-size: 0.88rem;
	letter-spacing: 0.34rem;
	text-transform: uppercase;
	color: rgba(19, 15, 9, 0.72);
}

.feature-step__title {
	font-family: "Oxanium", sans-serif;
	font-size: clamp(1.7rem, 2.2vw, 2.7rem);
	line-height: 0.94;
	text-transform: uppercase;
	letter-spacing: -0.04em;
	color: #130f09;
}

.feature-step__text {
	max-width: 32rem;
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	line-height: 1.8;
	color: var(--muted);
}

.film {
	position: relative;
	z-index: 3;
	isolation: isolate;
	padding: clamp(0.45rem, 1.4vw, 0.9rem) 0 0;
	margin-top: 0;
	background: var(--section-gold-end);
	overflow: clip;
}

.film::after {
	content: none;
	position: absolute;
	top: 0;
	left: 50%;
	width: min(54rem, 78vw);
	height: clamp(10rem, 22vw, 16rem);
	background: none;
	transform: translateX(-50%);
	filter: blur(12px);
	pointer-events: none;
	z-index: 1;
}

.film__title {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	margin: -0.15rem auto 0;
	padding: 0 clamp(1.2rem, 3vw, 3rem);
	font-family: "Oxanium", sans-serif;
	font-size: clamp(3.2rem, 6.2vw, 6.8rem);
	line-height: 0.92;
	text-transform: uppercase;
	letter-spacing: -0.04em;
	text-align: center;
	background: linear-gradient(90deg, #3f7c74 0%, #dad4c4 28%, #a98f4a 62%, #b84c81 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: 0.9px rgba(52, 37, 8, 0.28);
	text-shadow: 0 12px 26px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(52, 37, 8, 0.22);
}

.film__arrow {
	position: relative;
	width: 3.2rem;
	height: 5.6rem;
	margin: clamp(0.7rem, 1.8vw, 1.1rem) auto clamp(1.3rem, 2.8vw, 2rem);
	opacity: 0.9;
	filter: drop-shadow(0 0 14px rgba(241, 237, 227, 0.34)) drop-shadow(0 0 26px rgba(239, 105, 168, 0.18));
	animation: film-arrow-blink 1.5s ease-in-out infinite;
}

.film__arrow::before,
.film__arrow::after {
	content: "";
	position: absolute;
	left: 50%;
	border-radius: 999px;
	transform-origin: center center;
}

.film__arrow::before {
	top: 0;
	width: 3px;
	height: 3.7rem;
	background: linear-gradient(180deg, #5eb1a5 0%, #f1ede3 38%, #d9ad63 68%, #ef69a8 100%);
	transform: translateX(-50%);
	box-shadow: 0 0 18px rgba(255, 241, 196, 0.38), 0 0 24px rgba(94, 177, 165, 0.28), 0 0 30px rgba(239, 105, 168, 0.18);
}

.film__arrow::after {
	bottom: 0.35rem;
	width: 1.3rem;
	height: 1.3rem;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-image: linear-gradient(135deg, #5eb1a5 0%, #f1ede3 34%, #d9ad63 68%, #ef69a8 100%) 1;
	background: transparent;
	border-radius: 0.1rem;
	transform: translateX(-50%) rotate(45deg);
	box-shadow: 4px 4px 20px rgba(255, 241, 196, 0.24), 0 0 18px rgba(239, 105, 168, 0.16), 0 0 16px rgba(94, 177, 165, 0.18);
}

@keyframes film-arrow-blink {
	0%,
	100% {
		opacity: 0.28;
		transform: translateY(0);
	}
	50% {
		opacity: 1;
		transform: translateY(10px);
	}
}

.film::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 42%, #17120a 100%);
}

.film__stage {
	position: relative;
	width: 100%;
	margin: 0 auto;
	height: min(92vh, 1040px);
	background: #17120a;
	border-radius: 40%;
	overflow: clip;
}

.film__stage::before {
	content: none;
	position: absolute;
	left: 0;
	bottom: 0;
	width: clamp(7rem, 12vw, 10rem);
	height: clamp(2.8rem, 5vw, 4.2rem);
	background: none;
	pointer-events: none;
	filter: none;
	z-index: 1;
}

.film__stage::after {
	content: none;
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(7rem, 12vw, 10rem);
	height: clamp(2.8rem, 5vw, 4.2rem);
	background: none;
	pointer-events: none;
	filter: none;
	z-index: 2;
}

.film__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transform: scale(1.14);
	filter: saturate(1.02) contrast(1.1) brightness(0.88);
}

/* ============================================================
   RESPONSIVE — Tablet landscape → small phones + orientation.
   Mobile-first refinements layered from widest to narrowest.
   ============================================================ */

/* Large tablets / small laptops (landscape iPad ~1024–1180) */
@media (max-width: 1180px) {
	.feature-story__layout {
		gap: clamp(1.6rem, 4vw, 4rem);
	}

	.feature-step {
		min-height: 64vh;
	}
}

/* Tablet portrait & below — story stacks to a single column */
@media (max-width: 980px) {
	.hero__scene {
		padding-top: 5rem;
	}

	.hero__wordmark {
		font-size: clamp(6rem, 30vw, 13rem);
	}

	.hero__selector {
		right: max(1rem, env(safe-area-inset-right));
		bottom: max(1rem, env(safe-area-inset-bottom));
		gap: 0.8rem;
	}

	/* Comfortable touch targets on tablets without resizing the artwork */
	.hero__option {
		min-height: 44px;
		min-width: 44px;
	}

	.hero__showcase {
		inset: 0;
	}

	.hero__showcase-image {
		width: auto;
		height: clamp(178px, 22vw, 248px);
	}

	.feature-story__layout {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.feature-story__visual {
		position: relative;
		top: auto;
		height: min(72vh, 640px);
	}

	.feature-story__content {
		padding-block: 1rem 0;
	}

	.feature-story__heading {
		position: relative;
		background: none;
		padding-bottom: 0;
	}

	.feature-step {
		min-height: 42vh;
		padding-right: 0;
	}

	.film__stage {
		border-radius: clamp(1.5rem, 8vw, 4rem);
	}
}

/* Phones — bottom UI re-stacked as a centered cinematic cluster */
@media (max-width: 720px) {
	.hero__scene {
		padding-top: 4.8rem;
		/* leave room for the centered caption + selector stack */
		padding-bottom: calc(7rem + env(safe-area-inset-bottom));
	}

	.hero__meta {
		padding: max(1rem, env(safe-area-inset-top)) max(0.9rem, env(safe-area-inset-right)) 1rem max(0.9rem, env(safe-area-inset-left));
	}

	.hero__edition {
		font-size: 0.68rem;
		letter-spacing: 0.28rem;
	}

	.hero__backdrop {
		background-position: center 12%;
		background-size: 130% auto;
		transform: scale(1);
	}

	.hero__wordmark {
		font-size: clamp(4.8rem, 36vw, 8rem);
	}

	.hero__showcase {
		align-items: center;
	}

	.hero__showcase-image {
		width: auto;
		/* smaller so it never collides with the bottom caption + selector cluster */
		height: clamp(150px, 30vw, 200px);
	}

	/* Selector: centered row pinned to the bottom safe area */
	.hero__selector {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		gap: 0.5rem;
		bottom: max(0.9rem, env(safe-area-inset-bottom));
		justify-content: center;
	}

	.hero__option {
		width: 3.4rem;
		height: auto;
		min-height: 44px;
		padding-block: 0.4rem;
	}

	.hero__option-thumb {
		height: 1.45rem;
	}

	/* Caption: centered, sitting directly above the selector row */
	.hero__caption-block {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		bottom: calc(max(0.9rem, env(safe-area-inset-bottom)) + 3.4rem);
		justify-items: center;
		text-align: center;
		padding: 0;
	}

	.hero__caption-block::before {
		inset: -0.5rem -1rem;
		background: linear-gradient(90deg, transparent 0%, rgba(241, 224, 171, 0.42) 50%, transparent 100%);
	}

	.hero__kicker {
		font-size: 0.66rem;
		letter-spacing: 0.12rem;
	}

	.hero__caption-name {
		font-size: 0.96rem;
	}

	.feature-story {
		padding-inline: max(0.9rem, env(safe-area-inset-left));
	}

	.feature-story__visual {
		height: min(58vh, 480px);
		border-radius: 1.3rem;
	}

	.feature-story__shoe-wrap {
		width: min(120%, 560px);
	}

	.feature-story__title {
		max-width: 14ch;
	}

	.feature-step {
		min-height: 0;
		padding-block: 2rem;
	}

	.feature-step::before {
		left: -0.4rem;
	}

	.film {
		margin-top: 0;
		padding-inline: 0;
	}

	.film__arrow {
		width: 2.2rem;
		height: 4.1rem;
		margin: 0.7rem auto 1.4rem;
	}

	.film__stage {
		height: min(70vh, 620px);
		border-radius: clamp(1.2rem, 6vw, 2.4rem);
	}

	.film__video {
		object-position: center 44%;
		transform: scale(1.2);
	}
}

/* Small phones (iPhone SE / Android compact, ≤400px) */
@media (max-width: 400px) {
	.hero__edition {
		font-size: 0.62rem;
		letter-spacing: 0.22rem;
	}

	.hero__showcase-image {
		height: clamp(132px, 38vw, 168px);
	}

	.hero__selector {
		gap: 0.4rem;
	}

	.hero__option {
		width: 2.9rem;
	}

	.hero__option-thumb {
		height: 1.25rem;
	}

	.hero__caption-name {
		font-size: 0.88rem;
	}

	.feature-story__title {
		font-size: clamp(1.85rem, 9vw, 2.6rem);
	}

	.film__title {
		font-size: clamp(2.6rem, 13vw, 3.4rem);
	}
}

/* Phones in landscape — short viewports need a flatter, tighter hero */
@media (max-height: 540px) and (orientation: landscape) {
	.hero__scene {
		padding-top: 3.4rem;
		padding-bottom: calc(4.2rem + env(safe-area-inset-bottom));
	}

	.hero__showcase-image {
		height: clamp(120px, 34vh, 196px);
	}

	/* Side-by-side again: caption left, selector right (room is horizontal, not vertical) */
	.hero__caption-block {
		left: max(1rem, env(safe-area-inset-left));
		right: auto;
		transform: none;
		bottom: max(0.7rem, env(safe-area-inset-bottom));
		justify-items: start;
		text-align: left;
	}

	.hero__caption-block::before {
		inset: -0.55rem -0.8rem;
		background: linear-gradient(90deg, rgba(241, 224, 171, 0.54) 0%, rgba(241, 224, 171, 0.16) 68%, transparent 100%);
	}

	.hero__selector {
		left: auto;
		right: max(1rem, env(safe-area-inset-right));
		transform: none;
		bottom: max(0.7rem, env(safe-area-inset-bottom));
	}

	.feature-story__visual {
		height: min(86vh, 520px);
	}

	.film__stage {
		height: min(120vh, 560px);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.hero__backdrop,
	.hero__showcase,
	.hero__showcase-image,
	.film__stage {
		transition: none !important;
		animation: none !important;
	}
}