/**
 * Ecoleas — Home artboard
 *
 * Every value in this file is lifted from the supplied Home design, which was
 * authored at a fixed 1440px width. At 1440px and above the page renders
 * exactly as drawn. The responsive block at the bottom of the file only ever
 * applies BELOW that width, and it adapts the layout using the conventions the
 * About artboard already established — clamp() gutters, auto-fit grids — so
 * nothing outside the design system is introduced.
 *
 * The one deliberate substitution: the Home artboard's hard-coded `56px`
 * gutters are expressed as var(--ec-gutter), which resolves to exactly 56px at
 * 1440px and steps down below it.
 *
 * CONTENTS
 *   01  Hero
 *   02  New in — product rail
 *   03  Editorial trio
 *   04  Lookbook
 *   05  Impact band
 *   06  The atelier
 *   07  The cloth
 *   08  Values row
 *   09  Worn by you
 *   10  Newsletter
 *   11  Responsive layer
 *   12  Cinematic motion system
 *   13  Display line reveal
 */

/* =============================================================================
   01  HERO
   Full-bleed photograph, 760px tall, with a left-to-right scrim so the copy
   holds contrast over the image. The scrim is the only gradient in the system
   and it exists for legibility, not decoration.
   ============================================================================= */

.ec-hero {
	position: relative;
	height: 760px;
	background: var(--ec-ink);
	overflow: hidden;
}
.ec-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58% 50%;
}
.ec-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, .78) 0%,
		rgba(0, 0, 0, .6) 30%,
		rgba(0, 0, 0, .18) 58%,
		rgba(0, 0, 0, 0) 78%
	);
}
.ec-hero__copy {
	position: absolute;
	left: var(--ec-gutter);
	bottom: 72px;
	max-width: 620px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}
.ec-hero__eyebrow {
	font: 400 10px / 14px var(--ec-font-text);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--ec-cream-82);
	margin: 0 0 22px;
}
.ec-hero__title {
	font: 300 76px / 78px var(--ec-font-display);
	letter-spacing: var(--ec-track-display);
	color: var(--ec-cream);
	margin: 0;
}
.ec-hero__lede {
	font: 400 16px / 26px var(--ec-font-text);
	color: var(--ec-cream-88);
	margin: 20px 0 0;
	max-width: 400px;
}
.ec-hero .ec-btn { margin-top: 30px; }

/* =============================================================================
   02  NEW IN — PRODUCT RAIL
   A horizontal scroller of 320px cards with snap points, driven by two square
   arrow buttons. The scrollbar is hidden because the arrows and the native
   swipe are the interface; keyboard users get the rail itself as a focus stop.
   ============================================================================= */

.ec-newin { padding: 88px 0 96px; background: var(--ec-page); }
.ec-newin__head { padding-inline: var(--ec-gutter); margin-bottom: 34px; }
.ec-newin__arrows { display: flex; gap: 8px; }

.ec-rail {
	padding-inline: var(--ec-gutter);
	scroll-padding-left: var(--ec-gutter);
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	outline-offset: 4px;
	scroll-behavior: smooth;
}
.ec-rail::-webkit-scrollbar { display: none; }

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

/* --- Product card --- */
.ec-card {
	flex: 0 0 320px;
	scroll-snap-align: start;
	text-decoration: none;
	color: var(--ec-ink);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ec-card:hover { color: var(--ec-ink); }
.ec-card__media { background: var(--ec-ivory); }
.ec-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	white-space: nowrap;
	background: var(--ec-page);
	color: var(--ec-ink);
	font: 500 9px / 1 var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	padding: 8px 10px;
}
/* Quick view rides on the image, fading in on hover or keyboard focus. */
.ec-card__quick {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ec-page);
	color: var(--ec-ink);
	font: 500 10px / 1 var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	opacity: 0;
	transition: opacity var(--ec-dur-hover) ease;
}
.ec-card:hover .ec-card__quick,
.ec-card:focus-visible .ec-card__quick { opacity: 1; }

.ec-card__text { display: flex; flex-direction: column; gap: 5px; }
.ec-card__title {
	font: 400 17px / 22px var(--ec-font-display);
	letter-spacing: -.01em;
}
.ec-card:hover .ec-card__title,
.ec-card:focus-visible .ec-card__title {
	text-decoration: underline;
	text-underline-offset: 5px;
}
.ec-card__colour {
	font: 400 12px / 18px var(--ec-font-text);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ec-ink-muted);
}
.ec-card__price {
	font: 400 14px / 20px var(--ec-font-text);
	margin-top: 2px;
}

/* =============================================================================
   03  EDITORIAL TRIO
   Three 3:4 portraits. The caption plate fades up from the bottom on hover —
   it sits inside the tile, but beneath the subject, never across a face.
   ============================================================================= */

.ec-trio {
	padding: 0 var(--ec-gutter) 96px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.ec-trio__item {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--ec-ivory);
	text-decoration: none;
	display: block;
	overflow: hidden;
}
.ec-trio__item > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ec-trio__cap {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	background: var(--ec-page);
	color: var(--ec-ink);
	padding: 14px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	opacity: 0;
	transition: opacity var(--ec-dur-hover) ease;
}
.ec-trio__item:hover .ec-trio__cap,
.ec-trio__item:focus-visible .ec-trio__cap { opacity: 1; }
.ec-trio__name { font: 400 14px / 20px var(--ec-font-display); }
.ec-trio__price {
	font: 400 12px / 20px var(--ec-font-text);
	color: var(--ec-ink-muted);
	white-space: nowrap;
}

/* =============================================================================
   04  LOOKBOOK
   Ivory band. Three 4:5 plates, each with a page chip and a zoom control.
   ============================================================================= */

.ec-lookbook { padding: 80px var(--ec-gutter); }
.ec-lookbook__head { margin-bottom: 30px; }
.ec-lookbook__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.ec-lookbook__item {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--ec-ivory);
	overflow: hidden;
}
.ec-lookbook__item > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ec-lookbook__page {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-flex;
	white-space: nowrap;
	font: 400 9px / 12px var(--ec-font-text);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ec-ink);
	background: rgba(255, 248, 236, .9);
	padding: 6px 9px;
}
.ec-lookbook__zoom {
	position: absolute;
	right: 14px;
	bottom: 14px;
	height: 38px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ec-page);
	border: 0;
	border-radius: var(--ec-radius);
	color: var(--ec-ink);
	font: 500 9px / 1 var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--ec-dur-hover) ease, color var(--ec-dur-hover) ease;
}
.ec-lookbook__zoom:hover,
.ec-lookbook__zoom:focus {
	background: var(--ec-ink);
	color: var(--ec-cream);
}

/* --- Lightbox opened by the zoom controls. Square, black, no chrome. --- */
.ec-lightbox {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 56px);
	background: rgba(0, 0, 0, .92);
}
.ec-lightbox.is-open { display: flex; }
.ec-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.ec-lightbox__close {
	position: absolute;
	top: clamp(12px, 2vw, 24px);
	right: clamp(12px, 2vw, 24px);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: none;
	border: 1px solid var(--ec-cream-24);
	color: var(--ec-cream);
	cursor: pointer;
	transition: border-color var(--ec-dur-hover) ease;
}
.ec-lightbox__close:hover,
.ec-lightbox__close:focus { border-color: var(--ec-cream); }

/* =============================================================================
   05  IMPACT BAND
   Black ground, one display line, and a boxed pair of figures on the right.
   ============================================================================= */

.ec-impact { background: var(--ec-black); padding: 64px var(--ec-gutter); }
.ec-impact__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: center;
}
.ec-impact__eyebrow {
	font: 400 10px / 14px var(--ec-font-text);
	letter-spacing: var(--ec-track-head);
	text-transform: uppercase;
	color: var(--ec-cream-70);
	margin: 0 0 16px;
}
.ec-impact__line {
	font: 300 40px / 46px var(--ec-font-display);
	letter-spacing: -.025em;
	color: var(--ec-cream);
	margin: 0;
	max-width: 660px;
}
.ec-impact__figures {
	display: flex;
	gap: 0;
	border: 1px solid var(--ec-cream-24);
}
.ec-impact__figure {
	padding: 26px 32px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-left: 1px solid var(--ec-cream-24);
}
.ec-impact__figure:first-child { border-left-color: transparent; }
.ec-impact__value {
	font: 300 34px / 1 var(--ec-font-display);
	color: var(--ec-cream);
}
.ec-impact__key {
	font: 400 9px / 14px var(--ec-font-text);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--ec-cream-70);
	white-space: nowrap;
}

/* =============================================================================
   06  THE ATELIER  (copy left, 4:3 photograph right)
   ============================================================================= */

.ec-split {
	padding: 104px var(--ec-gutter);
	display: grid;
	gap: 64px;
	align-items: center;
}
.ec-split--5-7 { grid-template-columns: 5fr 7fr; }
.ec-split--7-5 { grid-template-columns: 7fr 5fr; }

.ec-split__title {
	font: 300 46px / 50px var(--ec-font-display);
	letter-spacing: -.03em;
	margin: 0;
}
.ec-split__body {
	font: 400 16px / 26px var(--ec-font-text);
	color: var(--ec-ink-muted);
	margin: 22px 0 0;
	max-width: 400px;
	text-wrap: pretty;
}
.ec-split__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}
.ec-split__actions .ec-btn { flex: 0 0 auto; }

/* =============================================================================
   07  THE CLOTH  (16:10 photograph left, copy and a spec list right)
   ============================================================================= */

.ec-spec {
	margin: 32px 0 0;
	padding: 0;
	border-top: 1px solid var(--ec-hairline);
}
.ec-spec__row {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: 18px;
	padding: 14px 0;
	border-bottom: 1px solid var(--ec-hairline);
}
.ec-spec__key {
	font: 400 11px / 18px var(--ec-font-text);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ec-ink-muted);
}
.ec-spec__val {
	font: 400 14px / 20px var(--ec-font-text);
	margin: 0;
}
.ec-spec + .ec-link-quiet { margin-top: 26px; }

/* =============================================================================
   08  VALUES ROW
   Three cells divided by hairlines, closed by a hairline underneath. The
   first cell has no left rule, so the row opens flush with the gutter.
   ============================================================================= */

.ec-values { padding-inline: var(--ec-gutter); }
.ec-values__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-bottom: 1px solid var(--ec-hairline);
}
.ec-values__item {
	padding: 44px 32px 44px 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-left: 1px solid var(--ec-hairline);
}
.ec-values__item:first-child {
	border-left-color: transparent;
	padding-left: 0;
}
.ec-values__title {
	font: 400 11px / 16px var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	color: var(--ec-ink);
}
.ec-values__desc {
	font: 400 15px / 24px var(--ec-font-text);
	color: var(--ec-ink-muted);
}

/* =============================================================================
   09  WORN BY YOU
   Three 4:5 customer photographs. The credit fades in over the whole tile.
   ============================================================================= */

.ec-ugc { padding: 88px var(--ec-gutter) 96px; }
.ec-ugc__head { margin-bottom: 30px; }
.ec-ugc__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.ec-ugc__item {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--ec-ivory);
	text-decoration: none;
	display: block;
	overflow: hidden;
}
.ec-ugc__item > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ec-ugc__credit {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 12px;
	background: rgba(0, 0, 0, .62);
	color: var(--ec-cream);
	font: 400 11px / 16px var(--ec-font-text);
	opacity: 0;
	transition: opacity var(--ec-dur-hover) ease;
}
.ec-ugc__item:hover .ec-ugc__credit,
.ec-ugc__item:focus-visible .ec-ugc__credit { opacity: 1; }

/* =============================================================================
   10  NEWSLETTER
   Ivory band. Copy left, an underline field and a 46px submit right.
   ============================================================================= */

.ec-newsletter { padding: 80px var(--ec-gutter); }
.ec-newsletter__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.ec-newsletter__title {
	font: 300 34px / 40px var(--ec-font-display);
	letter-spacing: -.025em;
	margin: 0;
}
.ec-newsletter__body {
	font: 400 15px / 24px var(--ec-font-text);
	color: var(--ec-ink-muted);
	margin: 14px 0 0;
	max-width: 380px;
}
.ec-newsletter__row {
	display: flex;
	gap: 16px;
	align-items: flex-end;
}
.ec-newsletter__row .ec-btn {
	height: 46px;
	min-height: 46px;
	padding: 0 28px;
	min-width: 150px;
	justify-content: center;
}

/* On a touch screen the zoom control is padded to the 44px minimum. The
   drawn button is unchanged on pointer devices. */
@media (hover: none) and (pointer: coarse) {
	.ec-lookbook__zoom { height: 44px; }
}

/* =============================================================================
   11  RESPONSIVE LAYER
   Nothing below applies at 1440px or above.
   ============================================================================= */

/* The hero's fixed 760px and 76px headline start yielding as the canvas does. */
@media (max-width: 1400px) {
	.ec-hero { height: clamp(520px, 54vw, 760px); }
	.ec-hero__title { font-size: clamp(42px, 5.3vw, 76px); line-height: 1.03; }
	.ec-hero__copy { bottom: clamp(40px, 5vw, 72px); }

	.ec-impact__line  { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.15; }
	.ec-split__title  { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.1; }
	.ec-newsletter__title { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.18; }

	.ec-newin      { padding-block: clamp(56px, 6.5vw, 88px) clamp(60px, 7vw, 96px); }
	.ec-split      { padding-block: clamp(64px, 7.5vw, 104px); }
	.ec-lookbook,
	.ec-newsletter { padding-block: clamp(56px, 6vw, 80px); }
	.ec-impact     { padding-block: clamp(48px, 4.8vw, 64px); }
	.ec-ugc        { padding-block: clamp(56px, 6.5vw, 88px) clamp(60px, 7vw, 96px); }
	.ec-trio       { padding-bottom: clamp(60px, 7vw, 96px); }
}

/* Two columns: the trio, lookbook and UGC rows drop to a pair; the two split
   sections and the newsletter stack. The values row keeps its rules by
   resetting the first-child exception on each new visual row. */
@media (max-width: 1000px) {
	.ec-trio,
	.ec-lookbook__grid,
	.ec-ugc__grid { grid-template-columns: repeat(2, 1fr); }

	.ec-split--5-7,
	.ec-split--7-5 { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 48px); }
	/* Keep the photograph after the copy on the section that leads with it. */
	.ec-split--7-5 > :first-child { order: 2; }

	.ec-impact__inner { grid-template-columns: 1fr; gap: 32px; }
	.ec-impact__figures { align-self: flex-start; }

	.ec-newsletter__inner { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px); }

	.ec-values__list { grid-template-columns: repeat(2, 1fr); }
	.ec-values__item { padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 32px); }
	.ec-values__item:first-child { padding-left: 0; }
	.ec-values__item:nth-child(odd) { border-left-color: transparent; padding-left: 0; }
}

/* One column. The rail keeps its horizontal scroll — it is the component. */
@media (max-width: 680px) {
	.ec-trio,
	.ec-lookbook__grid,
	.ec-ugc__grid { grid-template-columns: 1fr; gap: 16px; }

	.ec-values__list { grid-template-columns: 1fr; }
	.ec-values__item,
	.ec-values__item:nth-child(odd) {
		border-left: 0;
		border-top: 1px solid var(--ec-hairline);
		padding: clamp(24px, 6vw, 32px) 0;
	}
	.ec-values__item:first-child { border-top: 0; padding-top: 0; }

	.ec-card { flex-basis: 264px; }

	.ec-impact__figures { flex-direction: column; }
	.ec-impact__figure { border-left: 0; border-top: 1px solid var(--ec-cream-24); }
	.ec-impact__figure:first-child { border-top: 0; }

	/* Stacking the row turns the field's `flex: 1` into a vertical flex-grow,
	   which collapses its height to the flex-basis of 0. Reset it so the
	   46px field survives the change of axis. */
	.ec-newsletter__row { flex-direction: column; align-items: stretch; gap: 20px; }
	.ec-newsletter__row .ec-field { flex: 0 0 auto; width: 100%; }
	.ec-newsletter__row .ec-btn { width: 100%; justify-content: center; }

	/* Below 680px the hero copy needs the full gutter width to breathe. */
	.ec-hero__copy { right: var(--ec-gutter); max-width: none; }
	.ec-hero__lede { max-width: none; }
}

/* =============================================================================
   12  CINEMATIC MOTION SYSTEM
   Progressive, GPU-friendly movement layered over the existing artboard.
   The `ec-motion` class is added only when the dedicated Home script loads
   and the visitor has not requested reduced motion.
   ============================================================================= */

/* --- Immersive hero ------------------------------------------------------- */
.ec-home { overflow-x: clip; }
.ec-hero {
	height: 100svh;
	min-height: 700px;
	max-height: 980px;
}
.ec-hero__media {
	position: absolute;
	inset: -2.5%;
	overflow: hidden;
	transform:
		translate3d(
			var(--ec-hero-pointer-x, 0px),
			calc(var(--ec-hero-pointer-y, 0px) + var(--ec-hero-scroll-y, 0px)),
			0
		)
		scale(var(--ec-hero-scroll-scale, 1));
	transform-origin: center center;
	will-change: transform, clip-path, opacity;
}
.ec-hero__media .ec-hero__img {
	inset: 0;
	width: 100%;
	height: 100%;
	transform: scale(1);
	transform-origin: center center;
	will-change: transform, filter, opacity;
}
.ec-hero__media .ec-hero__scrim { z-index: 1; }
.ec-hero__copy {
	z-index: 2;
	opacity: var(--ec-hero-copy-opacity, 1);
	transform:
		translate3d(
			var(--ec-hero-text-pointer-x, 0px),
			calc(var(--ec-hero-copy-y, 0px) + var(--ec-hero-text-pointer-y, 0px)),
			0
		);
	will-change: transform, opacity;
}

.ec-motion .ec-hero__media {
	opacity: 0;
	clip-path: polygon(0 100%, 0 96%, 100% 68%, 100% 100%);
	transition:
		opacity 1.35s cubic-bezier(.76, 0, .24, 1),
		clip-path 1.85s cubic-bezier(.76, 0, .24, 1);
}
.ec-motion .ec-hero__img {
	opacity: 0;
	filter: blur(14px);
	transform: scale(1.1);
	transition:
		opacity 1.35s cubic-bezier(.76, 0, .24, 1),
		filter 1.9s cubic-bezier(.76, 0, .24, 1),
		transform 2.35s cubic-bezier(.76, 0, .24, 1);
}
.ec-motion .ec-hero.is-cinematic-ready .ec-hero__media {
	opacity: 1;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.ec-motion .ec-hero.is-cinematic-ready .ec-hero__img {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
}

.ec-hero__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.ec-hero__line-mask {
	display: block;
	overflow: clip;
	padding-bottom: .08em;
	margin-bottom: -.08em;
}
.ec-motion .ec-hero__line {
	display: block;
	opacity: 0;
	filter: blur(9px);
	transform: translate3d(0, 58px, 0);
	transition:
		opacity 1s cubic-bezier(.76, 0, .24, 1) var(--ec-hero-line-delay, 570ms),
		filter 1s cubic-bezier(.76, 0, .24, 1) var(--ec-hero-line-delay, 570ms),
		transform 1.15s cubic-bezier(.76, 0, .24, 1) var(--ec-hero-line-delay, 570ms);
}
.ec-motion .ec-hero.is-cinematic-ready .ec-hero__line {
	opacity: 1;
	filter: blur(0);
	transform: translate3d(0, 0, 0);
}

.ec-motion .ec-hero__eyebrow,
.ec-motion .ec-hero__lede,
.ec-motion .ec-hero__copy > .ec-btn {
	opacity: 0;
	filter: blur(7px);
	clip-path: inset(100% 0 0 0);
	transform: translate3d(0, 38px, 0);
	transition:
		opacity .9s cubic-bezier(.76, 0, .24, 1),
		filter .9s cubic-bezier(.76, 0, .24, 1),
		clip-path 1s cubic-bezier(.76, 0, .24, 1),
		transform 1s cubic-bezier(.76, 0, .24, 1);
}
.ec-motion .ec-hero__copy > .ec-btn {
	transition:
		opacity .9s cubic-bezier(.76, 0, .24, 1),
		filter .9s cubic-bezier(.76, 0, .24, 1),
		clip-path 1s cubic-bezier(.76, 0, .24, 1),
		transform 1s cubic-bezier(.76, 0, .24, 1),
		background-color 420ms ease,
		color 420ms ease;
}
.ec-motion .ec-hero.is-cinematic-ready .ec-hero__eyebrow,
.ec-motion .ec-hero.is-cinematic-ready .ec-hero__lede,
.ec-motion .ec-hero.is-cinematic-ready .ec-hero__copy > .ec-btn {
	opacity: 1;
	filter: blur(0);
	clip-path: inset(0 0 0 0);
	transform: translate3d(0, 0, 0);
}
.ec-hero__eyebrow {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
}
.ec-hero__eyebrow::after {
	content: '';
	display: block;
	width: 46px;
	height: 1px;
	margin-top: 13px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 850ms cubic-bezier(.76, 0, .24, 1) 470ms;
}
.ec-motion .ec-hero.is-cinematic-ready .ec-hero__eyebrow::after { transform: scaleX(1); }
.ec-motion .ec-hero.is-cinematic-ready .ec-hero__eyebrow { transition-delay: 330ms; }
.ec-motion .ec-hero.is-cinematic-ready .ec-hero__lede { transition-delay: 880ms; }
.ec-motion .ec-hero.is-cinematic-ready .ec-btn { transition-delay: 1060ms; }
.ec-motion .ec-hero.is-cinematic-complete .ec-btn { transition-delay: 0ms; }

/* --- Header transition --------------------------------------------------- */
body.ec-has-hero-header .ec-header {
	transition:
		background-color 520ms cubic-bezier(.22, 1, .36, 1),
		border-color 520ms cubic-bezier(.22, 1, .36, 1),
		backdrop-filter 520ms cubic-bezier(.22, 1, .36, 1),
		text-shadow 520ms cubic-bezier(.22, 1, .36, 1);
}
body.ec-has-hero-header .ec-header__inner {
	transition:
		min-height 520ms cubic-bezier(.22, 1, .36, 1),
		padding 520ms cubic-bezier(.22, 1, .36, 1);
}
body.ec-has-hero-header .ec-brand {
	transform: scale(1);
	transition:
		transform 520ms cubic-bezier(.22, 1, .36, 1),
		color 420ms ease;
}
body.ec-has-hero-header .ec-header.is-scrolled {
	position: fixed;
	top: 0;
	inset-inline: 0;
	background: rgba(255, 255, 255, .9);
	border-bottom-color: rgba(21, 21, 21, .12);
	color: var(--ec-ink);
	text-shadow: none;
	-webkit-backdrop-filter: blur(18px) saturate(120%);
	backdrop-filter: blur(18px) saturate(120%);
}
body.admin-bar.ec-has-hero-header .ec-header.is-scrolled { top: 32px; }

/* The header is fixed once the hero scrolls. Keep it below a visible
   announcement bar rather than covering the shipping message. */
body.ec-has-hero-header:not(.ec-partywear-page) .ec-announce:not([hidden]) + .ec-header.is-scrolled {
	top: 42px;
}
body.admin-bar.ec-has-hero-header:not(.ec-partywear-page) .ec-announce:not([hidden]) + .ec-header.is-scrolled {
	top: 74px;
}
@media screen and (max-width: 782px) {
	body.admin-bar.ec-has-hero-header:not(.ec-partywear-page) .ec-announce:not([hidden]) + .ec-header.is-scrolled {
		top: 88px;
	}
}
body.ec-has-hero-header .ec-header.is-scrolled .ec-header__inner {
	min-height: 66px;
	padding-block: 7px;
}
body.ec-has-hero-header .ec-header.is-scrolled .ec-brand { transform: scale(.88); }
body.ec-has-hero-header .ec-header.is-scrolled .ec-brand,
body.ec-has-hero-header .ec-header.is-scrolled .ec-brand:hover,
body.ec-has-hero-header .ec-header.is-scrolled .ec-nav__link,
body.ec-has-hero-header .ec-header.is-scrolled .ec-action,
body.ec-has-hero-header .ec-header.is-scrolled .ec-navtoggle {
	color: var(--ec-ink);
}
body.ec-has-hero-header .ec-header.is-scrolled .ec-brand__tag,
body.ec-has-hero-header .ec-header.is-scrolled .ec-action__count { color: var(--ec-ink-muted); }
body.ec-has-hero-header .ec-header.is-scrolled .ec-nav__link:hover,
body.ec-has-hero-header .ec-header.is-scrolled .ec-nav__link:focus-visible,
body.ec-has-hero-header .ec-header.is-scrolled .ec-nav__item.is-open > .ec-nav__link,
body.ec-has-hero-header .ec-header.is-scrolled .ec-action:hover,
body.ec-has-hero-header .ec-header.is-scrolled .ec-action:focus {
	color: var(--ec-plum);
	opacity: 1;
}
body.ec-has-hero-header .ec-header.is-scrolled .ec-nav__item.current-menu-item > .ec-nav__link,
body.ec-has-hero-header .ec-header.is-scrolled .ec-nav__item.current-menu-ancestor > .ec-nav__link,
body.ec-has-hero-header .ec-header.is-scrolled .ec-nav__item.current-menu-parent > .ec-nav__link,
body.ec-has-hero-header .ec-header.is-scrolled .ec-nav__item.current_page_item > .ec-nav__link,
body.ec-has-hero-header .ec-header.is-scrolled .ec-nav__link[aria-current='page'] {
	color: var(--ec-plum);
}

body.ec-has-hero-header .ec-nav__link {
	position: relative;
	border: 0 !important;
	border-radius: 0 !important;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}
body.ec-has-hero-header .ec-nav__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 1px;
	background: currentColor;
	border-radius: 0;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 430ms cubic-bezier(.22, 1, .36, 1);
}
body.ec-has-hero-header .ec-nav__link:hover::after,
body.ec-has-hero-header .ec-nav__link:focus-visible::after,
body.ec-has-hero-header .ec-nav__item.is-open > .ec-nav__link::after,
body.ec-has-hero-header .ec-nav__item.current-menu-item > .ec-nav__link::after,
body.ec-has-hero-header .ec-nav__item.current-menu-ancestor > .ec-nav__link::after,
body.ec-has-hero-header .ec-nav__item.current-menu-parent > .ec-nav__link::after,
body.ec-has-hero-header .ec-nav__item.current_page_item > .ec-nav__link::after,
body.ec-has-hero-header .ec-nav__link[aria-current='page']::after {
	transform: scaleX(1);
	transform-origin: left center;
}
body.ec-has-hero-header .ec-action svg {
	transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}
body.ec-has-hero-header .ec-action:hover svg,
body.ec-has-hero-header .ec-action:focus svg { transform: translate3d(0, -3px, 0); }

/* The first white editorial page overlaps the hero without leaving normal
   document flow. Its content keeps the original vertical starting point. */
.ec-newin.ec-motion-incoming {
	position: relative;
	z-index: 3;
	margin-top: -52px;
	padding-top: clamp(112px, 9.7vw, 140px);
}

/* --- Intentional viewport reveals --------------------------------------- */
.ec-motion [data-motion] {
	transition-delay: var(--ec-motion-delay, 0ms);
	will-change: opacity, transform, clip-path, filter;
}
.ec-motion [data-motion='text'] {
	opacity: 0;
	filter: blur(6px);
	transform: translate3d(0, 40px, 0);
	transition:
		opacity .95s cubic-bezier(.76, 0, .24, 1) var(--ec-motion-delay, 0ms),
		filter .95s cubic-bezier(.76, 0, .24, 1) var(--ec-motion-delay, 0ms),
		transform .95s cubic-bezier(.76, 0, .24, 1) var(--ec-motion-delay, 0ms);
}
.ec-motion [data-motion='heading'] {
	opacity: 0;
	clip-path: inset(100% 0 0 0);
	transform: translate3d(0, 46px, 0);
	transition:
		opacity 1s cubic-bezier(.76, 0, .24, 1) var(--ec-motion-delay, 0ms),
		clip-path 1.15s cubic-bezier(.76, 0, .24, 1) var(--ec-motion-delay, 0ms),
		transform 1.15s cubic-bezier(.76, 0, .24, 1) var(--ec-motion-delay, 0ms);
}
.ec-motion [data-motion='image'] {
	opacity: .2;
	clip-path: inset(0 0 100% 0);
	transform: translate3d(0, 28px, 0) scale(.985);
	transition:
		opacity 1.1s cubic-bezier(.76, 0, .24, 1) var(--ec-motion-delay, 0ms),
		clip-path 1.3s cubic-bezier(.76, 0, .24, 1) var(--ec-motion-delay, 0ms),
		transform 1.3s cubic-bezier(.76, 0, .24, 1) var(--ec-motion-delay, 0ms);
}
.ec-motion [data-motion='image'][data-motion-direction='left'] {
	clip-path: inset(0 100% 0 0);
	transform: translate3d(-30px, 0, 0) scale(.985);
}
.ec-motion [data-motion='image'][data-motion-direction='right'] {
	clip-path: inset(0 0 0 100%);
	transform: translate3d(30px, 0, 0) scale(.985);
}
.ec-motion [data-motion='card'] {
	opacity: 0;
	filter: blur(4px);
	transform: translate3d(0, 58px, 0) scale(.985);
	transition:
		opacity .95s cubic-bezier(.76, 0, .24, 1) var(--ec-motion-delay, 0ms),
		filter .95s cubic-bezier(.76, 0, .24, 1) var(--ec-motion-delay, 0ms),
		transform 1.05s cubic-bezier(.76, 0, .24, 1) var(--ec-motion-delay, 0ms);
}
.ec-motion [data-motion='line'] {
	opacity: 0;
	transform: scaleX(.08);
	transition:
		opacity 1.1s ease var(--ec-motion-delay, 0ms),
		transform 1.35s cubic-bezier(.22, 1, .36, 1) var(--ec-motion-delay, 0ms);
}
.ec-motion [data-motion='wordmark'] {
	opacity: 0;
	clip-path: inset(100% 0 0 0);
	transform: translate3d(0, 54px, 0);
	transition:
		opacity 1.25s cubic-bezier(.22, 1, .36, 1) var(--ec-motion-delay, 0ms),
		clip-path 1.45s cubic-bezier(.22, 1, .36, 1) var(--ec-motion-delay, 0ms),
		transform 1.45s cubic-bezier(.22, 1, .36, 1) var(--ec-motion-delay, 0ms);
}
.ec-motion [data-motion='section'] {
	opacity: .35;
	clip-path: inset(0 0 24% 0);
	transition:
		opacity 1.2s cubic-bezier(.22, 1, .36, 1),
		clip-path 1.4s cubic-bezier(.22, 1, .36, 1),
		background-color 1.4s ease;
}
.ec-motion [data-motion].is-motion-visible {
	opacity: 1;
	filter: blur(0);
	clip-path: inset(0 0 0 0);
	transform: none;
	will-change: auto;
}

/* Editorial copy travels on a shallower plane than its imagery. These
   transforms start only after the entrance reveal has resolved. */
.ec-motion .ec-lookbook__head.is-motion-visible {
	transform: translate3d(0, var(--ec-editorial-copy-y, 0px), 0);
	will-change: transform;
}
.ec-motion .ec-motion-copy-layer {
	transform: translate3d(0, var(--ec-craft-copy-y, 0px), 0);
	will-change: transform;
}
.ec-motion [data-motion][data-motion-pace='slow'] {
	transition-duration: 1.35s;
}
.ec-motion [data-motion='heading'][data-motion-pace='slow'],
.ec-motion [data-motion='image'][data-motion-pace='slow'] {
	transition-duration: 1.55s;
}

.ec-motion .ec-split__title { position: relative; }
.ec-motion .ec-split__title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -15px;
	width: 52px;
	height: 1px;
	background: var(--ec-plum);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.1s cubic-bezier(.76, 0, .24, 1) 440ms;
}
.ec-motion .ec-split__title.is-motion-visible::after { transform: scaleX(1); }

/* --- Editorial image depth ---------------------------------------------- */
@property --ec-parallax-hover {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}
.ec-motion [data-parallax-frame] {
	--ec-parallax-hover: 0;
	overflow: hidden;
	transition: --ec-parallax-hover 900ms cubic-bezier(.22, 1, .36, 1);
}
.ec-motion [data-parallax-frame] > img {
	inset: auto 0;
	top: -7%;
	width: 100%;
	height: 114%;
	transform:
		translate3d(0, var(--ec-parallax-y, 0px), 0)
		scale(calc(var(--ec-parallax-scale, 1.055) + var(--ec-parallax-hover)));
	will-change: transform;
}
@media (hover: hover) {
	.ec-motion [data-parallax-frame]:hover,
	.ec-motion [data-parallax-frame]:focus-within { --ec-parallax-hover: .04; }
}

/* --- Collection cards and image hover language -------------------------- */
.ec-card {
	transition:
		transform 700ms cubic-bezier(.22, 1, .36, 1),
		color 400ms ease;
}
.ec-card__media { position: relative; overflow: hidden; }
.ec-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(21, 21, 21, .14);
	opacity: 0;
	pointer-events: none;
	transition: opacity 700ms cubic-bezier(.22, 1, .36, 1);
}
.ec-card__media > img {
	transition: transform 900ms cubic-bezier(.22, 1, .36, 1);
}
.ec-card__badge,
.ec-card__quick { z-index: 2; }
.ec-card__quick {
	transform: translate3d(0, 14px, 0);
	transition:
		opacity 520ms cubic-bezier(.22, 1, .36, 1),
		transform 520ms cubic-bezier(.22, 1, .36, 1);
}
.ec-card__text {
	transition: transform 650ms cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) {
	.ec-motion .ec-card.is-motion-visible:hover,
	.ec-motion .ec-card.is-motion-visible:focus-visible { transform: translate3d(0, -8px, 0); }
	.ec-card:hover .ec-card__media > img,
	.ec-card:focus-visible .ec-card__media > img { transform: scale(1.04); }
	.ec-card:hover .ec-card__media::after,
	.ec-card:focus-visible .ec-card__media::after { opacity: 1; }
	.ec-card:hover .ec-card__quick,
	.ec-card:focus-visible .ec-card__quick { transform: translate3d(0, 0, 0); }
	.ec-card:hover .ec-card__text,
	.ec-card:focus-visible .ec-card__text { transform: translate3d(0, -5px, 0); }
}

/* --- CTA motion ---------------------------------------------------------- */
.ec-home .ec-btn {
	position: relative;
	overflow: hidden;
	transition:
		background-color 420ms ease,
		color 420ms ease,
		transform 420ms cubic-bezier(.22, 1, .36, 1);
}
.ec-home .ec-btn::after {
	content: '';
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 7px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 460ms cubic-bezier(.22, 1, .36, 1);
}
.ec-home .ec-btn svg {
	transition: transform 460ms cubic-bezier(.22, 1, .36, 1);
}
.ec-home .ec-btn:hover,
.ec-home .ec-btn:focus-visible { transform: translate3d(0, -2px, 0); }
.ec-home .ec-btn:hover::after,
.ec-home .ec-btn:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}
.ec-home .ec-btn:hover svg,
.ec-home .ec-btn:focus-visible svg { transform: translate3d(5px, 0, 0); }

.ec-home .ec-link-quiet {
	position: relative;
	text-decoration: none;
}
.ec-home .ec-link-quiet::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(.35);
	transform-origin: left center;
	transition: transform 430ms cubic-bezier(.22, 1, .36, 1);
}
.ec-home .ec-link-quiet:hover::after,
.ec-home .ec-link-quiet:focus-visible::after { transform: scaleX(1); }

/* The newsletter is the final CTA: its background and content resolve in a
   longer, more commanding cadence than ordinary sections. */
.ec-motion .ec-newsletter.ec-motion-final {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--ec-page);
}
.ec-motion .ec-newsletter.ec-motion-final::before,
.ec-motion .ec-newsletter.ec-motion-final::after {
	content: '';
	position: absolute;
	inset: -10%;
	pointer-events: none;
}
.ec-motion .ec-newsletter.ec-motion-final::before {
	z-index: 0;
	background: url('../images/about-cta-backdrop.jpg') center 52% / cover no-repeat;
	opacity: .5;
	transform:
		translate3d(0, var(--ec-final-bg-y, 0px), 0)
		scale(var(--ec-final-bg-scale, 1.1));
	transition: transform 240ms linear;
	will-change: transform;
}
.ec-motion .ec-newsletter.ec-motion-final::after {
	z-index: 1;
	background: rgba(250, 243, 235, .74);
}
.ec-motion .ec-newsletter.ec-motion-final.is-motion-visible { background-color: var(--ec-ivory); }
.ec-motion .ec-newsletter__inner { position: relative; z-index: 2; }
.ec-motion .ec-newsletter__inner::before {
	content: '';
	position: absolute;
	left: 0;
	top: -30px;
	width: 64px;
	height: 1px;
	background: var(--ec-plum);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.15s cubic-bezier(.22, 1, .36, 1) 420ms;
}
.ec-motion .ec-newsletter.is-motion-visible .ec-newsletter__inner::before { transform: scaleX(1); }

@media (max-width: 782px) {
	body.admin-bar.ec-has-hero-header .ec-header.is-scrolled { top: 46px; }
}

@media (max-width: 860px) {
	body.ec-has-hero-header .ec-header.is-scrolled .ec-nav.is-expanded {
		background: rgba(255, 255, 255, .97);
		border-top-color: rgba(21, 21, 21, .12);
	}
	body.ec-has-hero-header .ec-header.is-scrolled .ec-nav.is-expanded .ec-nav__link {
		border-color: transparent !important;
	}
}

@media (max-width: 680px) {
	.ec-hero {
		height: 100svh;
		min-height: 620px;
		max-height: 900px;
	}
	.ec-hero__media { inset: -3.5%; }
	.ec-newin.ec-motion-incoming {
		margin-top: -28px;
		padding-top: 84px;
	}
	.ec-motion .ec-hero__eyebrow,
	.ec-motion .ec-hero__lede,
	.ec-motion .ec-hero__copy > .ec-btn { transform: translate3d(0, 30px, 0); }
	.ec-motion .ec-hero__line { transform: translate3d(0, 42px, 0); }
	.ec-motion [data-motion='text'],
	.ec-motion [data-motion='heading'],
	.ec-motion [data-motion='card'] { transform: translate3d(0, 34px, 0); }
	.ec-motion [data-parallax-frame] > img {
		top: -4%;
		height: 108%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ec-motion [data-motion],
	.ec-motion .ec-hero__media,
	.ec-motion .ec-hero__img,
	.ec-motion .ec-hero__copy > * {
		opacity: 1 !important;
		filter: none !important;
		clip-path: none !important;
		transform: none !important;
		transition: none !important;
	}
	.ec-motion [data-parallax-frame] > img {
		inset: 0;
		height: 100%;
		transform: none !important;
	}
	.ec-motion .ec-hero__line,
	.ec-motion .ec-motion-copy-layer,
	.ec-motion .ec-lookbook__head,
	.ec-motion .ec-newsletter.ec-motion-final::before {
		opacity: 1 !important;
		filter: none !important;
		clip-path: none !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =============================================================================
   13  DISPLAY LINE REVEAL
   The signature move: a headline arrives one rendered line at a time, each
   sliding up from behind its own mask.

   Pure mask and translate — no fade, no blur. A line either has arrived or it
   has not, which reads as typesetting rather than as an effect, and keeps the
   whole thing on the compositor.

   home-motion.js measures where the browser actually wrapped the text and
   re-splits on resize, so the count of masks always matches the count of
   rendered lines.
   ============================================================================= */

.ec-line-mask {
	display: block;
	overflow: clip;
	/* Descenders and the negative tracking on the display face both overshoot
	   the line box; the padding gives them room and the margin takes the space
	   back out of the layout so the headline's rhythm is unchanged. */
	padding-bottom: .12em;
	margin-bottom: -.12em;
}

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

/* Only hidden once the motion layer is confirmed. Without JavaScript, or
   under prefers-reduced-motion, the headline is simply set as normal. */
.ec-motion [data-motion='lines'] .ec-line {
	transform: translate3d(0, 108%, 0);
	transition: transform 1.05s cubic-bezier(.76, 0, .24, 1) var(--ec-line-delay, 0ms);
}

.ec-motion [data-motion='lines'].is-motion-visible .ec-line {
	transform: none;
}

/* The impact band's headline sits on black and carries the most weight on the
   page, so its lines are given a fraction longer to arrive. */
.ec-motion .ec-impact__line[data-motion='lines'] .ec-line {
	transition-duration: 1.25s;
}

/* The word wrappers exist only during measurement. They are replaced before
   paint, but this guarantees they can never affect layout if a measure is
   interrupted. */
.ec-line-word {
	display: inline;
	white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
	.ec-motion [data-motion='lines'] .ec-line,
	.ec-motion [data-motion='lines'].is-motion-visible .ec-line {
		transform: none;
		transition: none;
	}
}