:root {
	--sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.6 5.4 11.4 12 12-6.6.6-11.4 5.4-12 12-.6-6.6-5.4-11.4-12-12C6.6 11.4 11.4 6.6 12 0Z'/%3E%3C/svg%3E");
}
.split-char { display: inline; }


.hero--brand { background: #E9DDE0; }
.hero--brand .hero__media { --focus: 56% 50%; background-image: url("../img/brand/hero-poster.webp"); }
.hero--brand .hero__haze {
	background:
		radial-gradient(56% 74% at 17% 52%, rgba(255, 248, 248, .74), rgba(255, 248, 248, 0) 72%),
		linear-gradient(180deg, rgba(255, 248, 248, .42) 0, rgba(255, 248, 248, 0) 22%),
		linear-gradient(0deg, rgba(255, 248, 248, .55) 0, rgba(255, 248, 248, 0) 20%);
}
.hero--brand .hero__content { width: min(620px, 46vw); transform: translateY(-46%); }
.bhero__display {
	display: block; margin-top: 24px;
	font: 500 clamp(2.1rem, 1.1rem + 3.1vw, 4.1rem)/1.45 var(--font-serif);
	letter-spacing: .14em;
	color: var(--ink);
}
.js .bhero__display .split-char {
	opacity: 0; filter: blur(8px);
	transition: opacity 1s var(--ease), filter 1.3s var(--ease);
	transition-delay: calc(var(--i) * 60ms + .25s);
}
.js.is-ready .bhero__display .split-char { opacity: 1; filter: blur(0); }
.hero--brand .hero__lead {
	margin-top: 22px;
	font: italic 400 clamp(1.15rem, 1rem + .6vw, 1.6rem)/1.5 var(--font-en);
	letter-spacing: .05em;
	color: var(--warm);
}


.origin { background: var(--pearl); }
.origin__layout { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.origin__media {
	position: relative; overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 999px 999px var(--r-lg) var(--r-lg);
	background: var(--powder);
	box-shadow: var(--shadow);
}
.origin__media img { width: 100%; height: 112%; margin-top: -6%; object-fit: cover; transform: translate3d(0, var(--drift, 0px), 0); }
.origin__en { margin-top: 16px; font: italic 400 clamp(1.3rem, 1.05rem + .9vw, 1.95rem)/1.3 var(--font-en); color: var(--rose-ink); }
.origin__copy .title { margin-top: 10px; }
.origin__copy > p:not(.eyebrow):not(.origin__en) { margin-top: 18px; max-width: 31em; font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); line-height: 2; }
.origin__quote {
	margin-top: 30px; padding-left: 22px;
	border-left: 2px solid var(--rose);
	font: 500 1.05rem/1.95 var(--font-serif); letter-spacing: .1em;
	color: var(--ink);
}


.belief {
	position: relative; height: 220vh;
	background: linear-gradient(180deg, var(--pearl) 0, var(--powder) 22%, var(--powder) 78%, var(--pearl) 100%);
}
.belief__pin {
	position: sticky; top: 0;
	height: 100vh; height: 100svh;
	display: grid; place-items: center;
	overflow: hidden;
}
.belief__ribbon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.belief__ribbon path { fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; opacity: .9; filter: drop-shadow(0 6px 12px rgba(216, 154, 174, .45)); }
.belief__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.belief__text {
	max-width: 14.5em; margin-top: 26px;
	font: 500 clamp(1.75rem, .95rem + 3vw, 3.5rem)/1.75 var(--font-serif);
	letter-spacing: .12em;
	color: var(--ink);
}
.js .belief__text .split-char { opacity: .13; transition: opacity .45s ease; }
.js .belief__text .split-char.is-lit { opacity: 1; }
.belief__sign { margin-top: 30px; font: italic 500 1rem/1 var(--font-en); letter-spacing: .32em; color: var(--warm); }


.logic { background: var(--pearl); }
.logic__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); align-items: start; }
.logic__item:nth-child(2) { margin-top: clamp(40px, 6vw, 96px); }
.logic__media {
	aspect-ratio: 3 / 4; overflow: hidden;
	border-radius: 999px 999px var(--r-md) var(--r-md);
	background: var(--powder);
	box-shadow: var(--shadow);
}
.logic__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 2.4s var(--ease); }
.js .logic__item .logic__media {
	clip-path: inset(46% 0 46% 0 round 999px 999px 18px 18px);
	transition: clip-path 1.5s var(--ease-io) .1s;
}
.js .logic__item.is-in .logic__media { clip-path: inset(0 0 0 0 round 999px 999px 18px 18px); }
.js .logic__item.is-in .logic__media img { transform: scale(1); }
.logic__no { margin-top: 22px; font: italic 500 1.35rem/1 var(--font-en); color: var(--rose-ink); }
.logic__item h3 { margin-top: 10px; font: 500 1.25rem/1.5 var(--font-serif); letter-spacing: .14em; color: var(--ink); }
.logic__item p:last-child { margin-top: 8px; max-width: 22em; font-size: .92rem; line-height: 1.9; color: var(--warm); }


.bfilm { padding-bottom: clamp(88px, 10vw, 150px); background: var(--pearl); }
.bfilm__card {
	position: relative; isolation: isolate; overflow: hidden;
	aspect-ratio: 21 / 9;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow);
}
.bfilm__poster { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 2s var(--ease); }
@media (hover: hover) {
	.bfilm__card:hover .bfilm__poster { transform: scale(1); }
}
.bfilm__card::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(255, 248, 248, .86) 0, rgba(255, 248, 248, .5) 38%, rgba(255, 248, 248, 0) 66%);
}
.bfilm__copy { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: clamp(28px, 5vw, 72px); }
.bfilm__title { font: 500 clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem)/1.45 var(--font-serif); letter-spacing: .14em; color: var(--ink); }


.frags { position: relative; background: linear-gradient(180deg, var(--pearl), #F7EAEE); }
.frags__pin { padding-block: clamp(72px, 9vw, 120px) clamp(56px, 7vw, 96px); }
.frags__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px 48px; margin-bottom: clamp(32px, 4vw, 52px); }
.frags__head .lead { max-width: 24em; }
.frags__viewport {
	overflow-x: auto; scroll-snap-type: x mandatory;
	padding-inline: var(--edge); scroll-padding-inline: var(--edge);
	scrollbar-width: none;
}
.frags__viewport::-webkit-scrollbar { display: none; }
.frags__track { display: flex; gap: clamp(16px, 2vw, 28px); width: max-content; }
.frag { flex: 0 0 clamp(240px, 26vw, 380px); scroll-snap-align: start; }
.frag__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-lg); background: var(--powder); }
.frag__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
@media (hover: hover) {
	.frag:hover .frag__img img { transform: scale(1.05); }
}
.frag figcaption { margin-top: 16px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; font-size: .9rem; line-height: 1.8; color: var(--warm); }
.frag__no { grid-row: span 2; font: italic 500 1.3rem/1.35 var(--font-en); color: var(--rose-ink); }
.frag figcaption strong { font: 500 1.02rem/1.6 var(--font-serif); letter-spacing: .14em; color: var(--ink); }
.frags__foot { margin-top: clamp(24px, 3vw, 36px); }
.frags__progress { position: relative; display: block; height: 1px; overflow: hidden; background: var(--line-strong); }
.frags__progress i { position: absolute; inset: 0; background: var(--warm); transform-origin: left; transform: scaleX(var(--p, 0)); }

.frags.is-pinned { height: var(--frags-h, auto); }
.frags.is-pinned .frags__pin {
	position: sticky; top: 0;
	height: 100vh; height: 100svh;
	display: flex; flex-direction: column; justify-content: center;
	overflow: hidden;
	padding-block: calc(var(--bar-h) + 16px) 36px;
}
.frags.is-pinned .frags__viewport { overflow: visible; scroll-snap-type: none; }
.frags.is-pinned .frags__track { transform: translate3d(calc(var(--x, 0) * -1px), 0, 0); will-change: transform; }
.frags.is-pinned .frag { flex-basis: min(26vw, (100svh - 340px) * .8); }


.promise { background: linear-gradient(180deg, #F7EAEE, var(--powder)); color: var(--ink); }
.promise .lead { color: var(--ink); }
.promise__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 36px); }
.promise__item {
	padding: clamp(26px, 3vw, 40px);
	border-radius: var(--r-lg);
	background: rgba(255, 248, 248, .7);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: 0 24px 48px -36px rgba(77, 71, 75, .42);
}
.promise__no { display: block; font: italic 500 clamp(2.6rem, 2rem + 2vw, 3.6rem)/1 var(--font-en); color: var(--rose); }
.promise__item h3 { margin-top: 18px; font: 500 1.2rem/1.5 var(--font-serif); letter-spacing: .14em; }
.promise__item p { margin-top: 10px; font-size: .92rem; line-height: 1.95; }


.looks { background: var(--pearl); }
.looks__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.looks__list li:nth-child(even) { margin-top: clamp(28px, 4vw, 64px); }
.look { display: flex; flex-direction: column; align-items: center; text-align: center; }
.look__arch {
	display: block; width: 100%; aspect-ratio: 3 / 4.3; overflow: hidden;
	border-radius: 999px 999px 18px 18px;
	border: 4px solid rgba(255, 255, 255, .95);
	box-shadow: 0 22px 40px -26px rgba(77, 71, 75, .6);
	background: var(--powder);
	transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.look__arch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
@media (hover: hover) {
	.look:hover .look__arch { transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(77, 71, 75, .65); }
	.look:hover .look__arch img { transform: scale(1.06); }
}
.look__name { margin-top: 16px; display: flex; flex-direction: column; gap: 2px; font: 500 1.05rem/1.4 var(--font-serif); letter-spacing: .16em; color: var(--ink); }
.look__name em { font: italic 400 .95rem/1.2 var(--font-en); letter-spacing: .02em; color: var(--warm); }
.look__family { margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; letter-spacing: .2em; color: var(--warm-soft); }
.look__family::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: var(--dot);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 22%, transparent);
}


.bcta {
	position: relative; overflow: hidden;
	min-height: clamp(620px, 92vh, 900px);
	display: grid; align-items: center;
	background: #DDE8F0;
}
.bcta__media { position: absolute; inset: -6% 0; transform: translate3d(0, var(--drift, 0px), 0); }
.bcta__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.bcta__media::after {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(58% 80% at 18% 50%, rgba(255, 248, 248, .76), rgba(255, 248, 248, 0) 70%);
}
.bcta__sparkles i {
	position: absolute; z-index: 1;
	width: 14px; height: 14px;
	background: #FFFFFF;
	-webkit-mask: var(--sparkle) center / contain no-repeat;
	mask: var(--sparkle) center / contain no-repeat;
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9));
	animation: bcta-twinkle 5s var(--ease) infinite;
}
.bcta__sparkles i:nth-child(1) { left: 58%; top: 18%; }
.bcta__sparkles i:nth-child(2) { left: 71%; top: 28%; width: 10px; height: 10px; animation-delay: -1.2s; }
.bcta__sparkles i:nth-child(3) { left: 83%; top: 14%; width: 18px; height: 18px; animation-delay: -2.4s; }
.bcta__sparkles i:nth-child(4) { left: 64%; top: 40%; width: 8px; height: 8px; animation-delay: -3.1s; }
.bcta__sparkles i:nth-child(5) { left: 90%; top: 36%; width: 12px; height: 12px; animation-delay: -.6s; }
.bcta__sparkles i:nth-child(6) { left: 76%; top: 8%; width: 9px; height: 9px; animation-delay: -4s; }
.bcta__sparkles i:nth-child(7) { left: 52%; top: 30%; width: 11px; height: 11px; animation-delay: -1.8s; }
@keyframes bcta-twinkle {
	0%, 100% { opacity: .15; transform: scale(.6) rotate(0); }
	50% { opacity: 1; transform: scale(1) rotate(45deg); }
}
.bcta__copy { position: relative; z-index: 2; margin-left: var(--edge); width: min(560px, 44vw); display: flex; flex-direction: column; align-items: flex-start; }
.bcta__logo { width: 168px; height: 83px; color: var(--ink); }
.bcta__en { margin-top: 18px; font: italic 400 clamp(1.3rem, 1rem + 1vw, 2rem)/1.3 var(--font-en); color: var(--rose-ink); }
.bcta__title { margin-top: 12px; font: 500 clamp(1.9rem, 1.2rem + 2.3vw, 3.2rem)/1.45 var(--font-serif); letter-spacing: .14em; color: var(--ink); }
.bcta__text { margin-top: 16px; max-width: 26em; line-height: 1.95; color: var(--ink); }
.bcta__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }


@media (max-width: 1099px) {
	.looks__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
	.looks__list li:nth-child(even) { margin-top: 0; }
	.looks__list li:nth-child(3n+2) { margin-top: clamp(28px, 4vw, 48px); }
}


@media (max-width: 899px) {
	.origin__layout { grid-template-columns: 1fr; }
	.origin__media { width: min(440px, 100%); margin-inline: auto; }
	.logic__list { grid-template-columns: 1fr; gap: 56px; width: min(460px, 100%); margin-inline: auto; }
	.logic__item:nth-child(2) { margin-top: 0; }
	.bfilm__card { aspect-ratio: 16 / 9; }
	.promise__list { grid-template-columns: 1fr; }
}


@media (max-aspect-ratio: 3 / 4), (max-width: 759px) and (orientation: portrait) {
	.hero--brand .hero__media { --focus: 66% 50%; }
	.hero--brand .hero__haze {
		background:
			linear-gradient(180deg, rgba(255, 248, 248, .4) 0, rgba(255, 248, 248, 0) 16%),
			linear-gradient(0deg, rgba(255, 248, 248, .97) 0, rgba(255, 248, 248, .9) 22%, rgba(255, 248, 248, .55) 34%, rgba(255, 248, 248, 0) 48%);
	}
	.hero--brand .hero__content { width: auto; transform: none; }
	.bhero__display { margin-top: 14px; font-size: clamp(1.9rem, 8.4vw, 3rem); letter-spacing: .1em; }
	.hero--brand .hero__lead { margin-top: 12px; font-size: 1.1rem; }

	.bcta { display: flex; flex-direction: column; min-height: 0; background: linear-gradient(180deg, var(--pearl), #E3EDF3); }
	.bcta__media { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 5; max-height: 88svh; transform: none; }
	.bcta__media::after { background: linear-gradient(180deg, rgba(255, 248, 248, .9) 0, rgba(255, 248, 248, 0) 26%); }
	.bcta__copy { order: -1; width: auto; margin: 0; padding: 72px var(--gutter) 28px; align-items: center; text-align: center; }
	.bcta__logo { width: 150px; height: 74px; }
	.bcta__actions { justify-content: center; }
}


@media (max-width: 759px) {
	.belief { height: 180vh; }
	.belief__text { font-size: clamp(1.5rem, 6.4vw, 2rem); letter-spacing: .08em; }
	.logic__list { gap: 48px; }
	.bfilm__card { aspect-ratio: 4 / 5; }
	.bfilm__card::after { background: linear-gradient(0deg, rgba(255, 248, 248, .92) 0, rgba(255, 248, 248, .6) 34%, rgba(255, 248, 248, 0) 60%); }
	.bfilm__copy { justify-content: flex-end; }
	.frag { flex-basis: 72vw; }
	.frag figcaption { font-size: .84rem; }
	.promise__item { padding: 24px 22px; }
	.looks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
	.looks__list li:nth-child(3n+2) { margin-top: 0; }
	.looks__list li:nth-child(even) { margin-top: 32px; }
	.look__name { font-size: .98rem; letter-spacing: .1em; }
	.bcta__actions .btn { flex: 1 1 100%; }
}


@media (prefers-reduced-motion: reduce) {
	.belief { height: auto; }
	.belief__pin { position: relative; height: auto; padding-block: 120px; }
	.js .belief__text .split-char { opacity: 1; }
	.js .logic__item .logic__media { clip-path: none; }
	.logic__media img, .js .logic__item.is-in .logic__media img { transform: none; }
	.bcta__sparkles i { animation: none; opacity: .7; }
}