/* =============================================================================
   Ecoleas · The Three Edits Home page
   Edit the text, links and image choices in inc/home-content.php. This file
   contains only the presentation and motion states for that structure.
   ============================================================================= */

.ec-home {
	--ec-edit-ink: #161311;
	--ec-edit-paper: #fcf8f3;
	--ec-edit-soft: #f2e9e0;
	--ec-edit-wine: #54262c;
	--ec-edit-gold: #b99672;
	--ec-edit-rule: rgba(43, 31, 24, .16);
	background: var(--ec-edit-paper);
	color: var(--ec-edit-ink);
	overflow-x: clip;
}

.ec-edit-shell {
	width: min(100%, 1440px);
	margin-inline: auto;
	padding-inline: var(--ec-gutter);
}

.ec-edit-kicker {
	margin: 0;
	font: 500 10px / 1.3 var(--ec-font-text);
	letter-spacing: .22em;
	text-transform: uppercase;
}

/* --- Hero --------------------------------------------------------------- */

/* The Home uses the black, single-line masthead from the three-world campaign
   reference. The shared masthead markup remains unchanged on every other
   page. */
body.ec-has-hero-header .ec-announce { display: none; }
body.ec-has-hero-header { --ec-home-header-height: 78px; }
body.ec-has-hero-header .ec-header,
body.ec-has-hero-header .ec-header.is-scrolled {
	position: fixed !important;
	top: 0;
	z-index: 100;
	background: #050505;
	border-bottom-color: rgba(255, 255, 255, .12);
	color: var(--ec-cream);
	text-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	/* Keep this campaign masthead visually constant while scrolling. The
	 * previous generic hero header transition caused an unnecessary jump. */
	transition: none;
}
body.admin-bar.ec-has-hero-header .ec-header,
body.admin-bar.ec-has-hero-header .ec-header.is-scrolled { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar.ec-has-hero-header .ec-header,
	body.admin-bar.ec-has-hero-header .ec-header.is-scrolled { top: 46px; }
}
body.ec-has-hero-header .ec-header__inner,
body.ec-has-hero-header .ec-header.is-scrolled .ec-header__inner { min-height: 78px; padding-block: 12px; transition: none; }
body.ec-has-hero-header .ec-brand,
body.ec-has-hero-header .ec-header.is-scrolled .ec-brand { transform: none; transition: none; }
body.ec-has-hero-header .ec-brand__mark { width: 198px; }
body.ec-has-hero-header .ec-header.is-scrolled .ec-brand__mark::before { filter: brightness(0) invert(1); }
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-cream); }
body.ec-has-hero-header .ec-actions a[aria-label='Search'] { order: 1; }
body.ec-has-hero-header .ec-actions a[aria-label='Wishlist'] { order: 2; }
body.ec-has-hero-header .ec-actions .ec-action--cart { order: 3; }

/* Main home only: keep the ECOLEAS mark and action icons, without navigation. */
body.ec-has-hero-header .ec-nav,
body.ec-has-hero-header .ec-navtoggle,
body.ec-has-hero-header .ec-actions { display: none !important; }

@media (min-width: 861px) and (max-width: 1180px) {
	body.ec-has-hero-header .ec-header__inner {
		grid-template-columns: 1fr auto 1fr;
		gap: 10px 18px;
	}
	body.ec-has-hero-header .ec-brand { grid-column: 2; grid-row: 1; }
	body.ec-has-hero-header .ec-nav { grid-column: 1; grid-row: 1; }
	body.ec-has-hero-header .ec-actions { grid-column: 3; grid-row: 1; }
}

.ec-edit-hero {
	position: relative;
	min-height: 100svh;
	padding: calc(var(--ec-home-header-height) + 20px) 20px 20px;
	overflow: hidden;
	background: #080807;
	color: var(--ec-cream);
}

.ec-edit-hero__panels {
	display: grid;
	width: 100%;
	min-height: calc(100svh - var(--ec-home-header-height) - 40px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(10px, 1.25vw, 20px);
	transition: grid-template-columns 760ms cubic-bezier(.22, 1, .36, 1);
}

.ec-edit-hero[data-active-edit='partywear'] .ec-edit-hero__panels { grid-template-columns: 1.16fr .92fr .92fr; }
.ec-edit-hero[data-active-edit='linen-jersey'] .ec-edit-hero__panels { grid-template-columns: .92fr 1.16fr .92fr; }
.ec-edit-hero[data-active-edit='made-to-order'] .ec-edit-hero__panels { grid-template-columns: .92fr .92fr 1.16fr; }

.ec-edit-hero__panel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	overflow: hidden;
	border-radius: 7px;
	color: var(--ec-cream);
	text-align: center;
	text-decoration: none;
	isolation: isolate;
	background: #181514;
	transform: translateZ(0);
}
.ec-edit-hero__panel:hover,
.ec-edit-hero__panel:focus { color: var(--ec-cream); }

.ec-edit-hero__panel img,
.ec-edit-hero__panel video,
.ec-edit-hero__shade,
.ec-edit-hero__environment,
.ec-edit-hero__frame { position: absolute; inset: 0; }
.ec-edit-hero__panel :is(img, video) {
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate3d(var(--ec-edit-hero-x, 0px), calc(var(--ec-edit-hero-y, 0px) + var(--ec-edit-hero-scroll-y, 0px)), 0) scale(var(--ec-edit-hero-scale, 1.045));
	transition: transform 1.15s cubic-bezier(.22, 1, .36, 1), filter 700ms ease;
}

.ec-edit-hero__shade {
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(4, 4, 4, .15) 18%, rgba(4, 4, 4, .48) 58%, rgba(4, 4, 4, .72) 100%);
	transition: background 650ms cubic-bezier(.22, 1, .36, 1);
}

.ec-edit-hero__environment { z-index: 2; pointer-events: none; opacity: 0; transition: opacity 680ms ease; mix-blend-mode: screen; }
.ec-edit-hero__environment canvas { display: block; width: 100%; height: 100%; }
.ec-edit-hero__frame { z-index: 3; inset: clamp(11px, 1.25vw, 20px); border: 1px solid rgba(255, 248, 239, .28); border-radius: 4px; pointer-events: none; transition: border-color 500ms ease, inset 560ms cubic-bezier(.22, 1, .36, 1); }

.ec-edit-hero__panel-copy {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	max-width: 92%;
	padding: 30px 18px;
	transform: translateY(9%);
	transition: transform 640ms cubic-bezier(.22, 1, .36, 1);
}

.ec-edit-hero__panel-copy .ec-edit-kicker { color: rgba(255, 248, 239, .88); font-size: 10px; }
.ec-edit-hero__panel-copy strong {
	max-width: 9ch;
	font: 300 clamp(36px, 3.7vw, 61px) / 1.02 var(--ec-font-display);
	letter-spacing: -.03em;
	text-transform: uppercase;
}
.ec-edit-hero__panel-detail { color: rgba(255, 248, 239, .92); font: 500 10px / 1.35 var(--ec-font-text); letter-spacing: .2em; text-transform: uppercase; }

.ec-edit-hero__panel-action {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-height: 53px;
	margin-top: 22px;
	padding: 0 29px;
	border: 1px solid rgba(255, 248, 239, .7);
	border-radius: 3px;
	background: rgba(252, 248, 243, .09);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 9px 24px rgba(0, 0, 0, .14);
	-webkit-backdrop-filter: blur(12px) saturate(125%);
	backdrop-filter: blur(12px) saturate(125%);
	font: 500 10px / 1 var(--ec-font-text);
	letter-spacing: .17em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(13px);
	transition: opacity 370ms ease, transform 520ms cubic-bezier(.22, 1, .36, 1), background-color 360ms ease, border-color 360ms ease, box-shadow 360ms ease;
}
.ec-edit-hero__panel-action svg { transition: transform 360ms cubic-bezier(.22, 1, .36, 1); }

.ec-edit-hero.has-active-edit .ec-edit-hero__panel.is-active :is(img, video) { transform: translate3d(var(--ec-edit-hero-x, 0px), calc(var(--ec-edit-hero-y, 0px) + var(--ec-edit-hero-scroll-y, 0px)), 0) scale(var(--ec-edit-hero-scale, 1.075)); }
.ec-edit-hero.has-active-edit .ec-edit-hero__panel.is-active .ec-edit-hero__shade { background: linear-gradient(180deg, rgba(4, 4, 4, .02), rgba(4, 4, 4, .34) 60%, rgba(4, 4, 4, .67)); }
.ec-edit-hero.has-active-edit .ec-edit-hero__panel.is-active .ec-edit-hero__environment { opacity: 1; }
.ec-edit-hero.has-active-edit .ec-edit-hero__panel.is-active .ec-edit-hero__frame { inset: 12px; border-color: rgba(255, 248, 239, .5); }
.ec-edit-hero.has-active-edit .ec-edit-hero__panel.is-active .ec-edit-hero__panel-copy { transform: translateY(0); }
.ec-edit-hero.has-active-edit .ec-edit-hero__panel.is-active .ec-edit-hero__panel-action { opacity: 1; transform: translateY(0); transition-delay: 580ms, 580ms, 0ms, 0ms, 0ms; }
.ec-edit-hero.has-active-edit .ec-edit-hero__panel:not(.is-active) :is(img, video) { filter: saturate(.68) brightness(.65); transform: scale(1.025); }
.ec-edit-hero.has-active-edit .ec-edit-hero__panel:not(.is-active) .ec-edit-hero__frame { border-color: rgba(255, 248, 239, .12); }
.ec-edit-hero__panel:hover .ec-edit-hero__panel-action,
.ec-edit-hero__panel:focus-visible .ec-edit-hero__panel-action { background: rgba(252, 248, 243, .15); border-color: rgba(255, 248, 239, .92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 13px 30px rgba(0, 0, 0, .22); }
.ec-edit-hero__panel:hover .ec-edit-hero__panel-action svg,
.ec-edit-hero__panel:focus-visible .ec-edit-hero__panel-action svg { transform: translateX(4px); }
.ec-edit-hero__panel:focus-visible { outline: 2px solid var(--ec-edit-gold); outline-offset: 4px; }

.ec-edit-products__head h2,
.ec-occasions__head h2,
.ec-studio__copy h2,
.ec-real__head h2 {
	margin: 20px 0 0;
	font: 300 clamp(48px, 6.2vw, 104px) / 1.02 var(--ec-font-display);
	letter-spacing: -.035em;
}
.ec-edit-button,
.ec-edit-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 44px;
	font: 500 10px / 1 var(--ec-font-text);
	letter-spacing: .17em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 360ms ease, background-color 360ms ease, border-color 360ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1);
}

.ec-edit-button { padding: 0 20px; border: 1px solid currentColor; }
.ec-edit-button--light { color: var(--ec-edit-ink); background: var(--ec-cream); }
.ec-edit-button--light:hover,
.ec-edit-button--light:focus-visible { background: var(--ec-edit-gold); border-color: var(--ec-edit-gold); transform: translateY(-2px); }

.ec-edit-button svg,
.ec-edit-link svg { transition: transform 360ms cubic-bezier(.22, 1, .36, 1); }
.ec-edit-button:hover svg,
.ec-edit-button:focus-visible svg,
.ec-edit-link:hover svg,
.ec-edit-link:focus-visible svg { transform: translateX(4px); }

.ec-edit-link {
	position: relative;
	justify-content: flex-start;
	min-height: 34px;
	padding-bottom: 4px;
	color: var(--ec-cream);
}

.ec-edit-link::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: currentColor;
	content: '';
	transform: scaleX(.42);
	transform-origin: left;
	transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.ec-edit-link:hover::after,
.ec-edit-link:focus-visible::after { transform: scaleX(1); }
.ec-edit-link--dark { color: var(--ec-edit-ink); }

.ec-edit-hero__scroll {
	position: absolute;
	right: var(--ec-gutter);
	bottom: 28px;
	z-index: 1;
	margin: 0;
	font: 500 9px / 1 var(--ec-font-text);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 248, 239, .72);
}

/* --- Product and Studio panels ----------------------------------------- */

.ec-edit-products { background: var(--ec-edit-soft); }
.ec-edit-products__panel { padding: clamp(78px, 9vw, 130px) 0; }
html.ec-edits-ready .ec-edit-products__panel:not(.is-active) { display: none; }
.ec-edit-products__panel.is-active { animation: ec-edit-content-in 620ms cubic-bezier(.22, 1, .36, 1); }

.ec-edit-products__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .48fr); align-items: end; gap: 32px 80px; padding-bottom: clamp(32px, 4vw, 54px); }
.ec-edit-products__head .ec-edit-kicker { color: var(--ec-edit-wine); }
.ec-edit-products__head h2 { margin-top: 17px; font-size: clamp(42px, 5vw, 76px); }
.ec-edit-products__head > p { max-width: 31ch; margin: 0; font: 400 15px / 1.65 var(--ec-font-text); color: rgba(22, 19, 17, .7); }

.ec-edit-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 24px); }
.ec-edit-product { min-width: 0; color: var(--ec-edit-ink); text-decoration: none; }
.ec-edit-product__media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #e7d9cc; }
.ec-edit-product__media::after { position: absolute; inset: 0; background: rgba(22, 19, 17, .13); content: ''; opacity: 0; transition: opacity 400ms ease; }
.ec-edit-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms cubic-bezier(.22, 1, .36, 1); }
.ec-edit-product__quick { position: absolute; z-index: 1; right: 12px; bottom: 12px; left: 12px; display: flex; justify-content: center; padding: 13px; background: var(--ec-edit-paper); color: var(--ec-edit-ink); font: 500 9px / 1 var(--ec-font-text); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity 320ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1); }
.ec-edit-product__text { display: flex; flex-direction: column; gap: 5px; padding-top: 13px; transition: transform 420ms cubic-bezier(.22, 1, .36, 1); }
.ec-edit-product__text strong { font: 400 18px / 1.15 var(--ec-font-display); letter-spacing: -.025em; }
.ec-edit-product__text em { font: 400 10px / 1.3 var(--ec-font-text); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: rgba(22, 19, 17, .57); }
.ec-edit-product__text > span { font: 400 13px / 1.3 var(--ec-font-text); }
.ec-edit-product:hover .ec-edit-product__media img,
.ec-edit-product:focus-visible .ec-edit-product__media img { transform: scale(1.04); }
.ec-edit-product:hover .ec-edit-product__media::after,
.ec-edit-product:focus-visible .ec-edit-product__media::after { opacity: 1; }
.ec-edit-product:hover .ec-edit-product__quick,
.ec-edit-product:focus-visible .ec-edit-product__quick { opacity: 1; transform: translateY(0); }
.ec-edit-product:hover .ec-edit-product__text,
.ec-edit-product:focus-visible .ec-edit-product__text { transform: translateY(-4px); }
.ec-edit-product:focus-visible { outline: 1px solid var(--ec-edit-ink); outline-offset: 5px; }

.ec-edit-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ec-edit-rule); border-bottom: 1px solid var(--ec-edit-rule); }
.ec-edit-process article { min-height: 292px; padding: clamp(25px, 3vw, 48px); border-right: 1px solid var(--ec-edit-rule); }
.ec-edit-process article:last-child { border-right: 0; }
.ec-edit-process article > span { color: var(--ec-edit-wine); font: 500 10px / 1 var(--ec-font-text); letter-spacing: .16em; }
.ec-edit-process h3 { margin: 54px 0 0; font: 300 clamp(28px, 2.5vw, 43px) / 1.04 var(--ec-font-display); letter-spacing: -.03em; }
.ec-edit-process p { max-width: 29ch; margin: 16px 0 0; font: 400 14px / 1.6 var(--ec-font-text); color: rgba(22, 19, 17, .67); }

.ec-edit-products__foot { padding-top: clamp(30px, 4vw, 48px); }

/* --- Occasions ---------------------------------------------------------- */

.ec-occasions { padding: clamp(82px, 11vw, 154px) 0; background: var(--ec-edit-paper); }
.ec-occasions__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 840px; padding-bottom: clamp(36px, 5vw, 68px); }
.ec-occasions__head .ec-edit-kicker { color: var(--ec-edit-wine); }
.ec-occasions__head h2 { margin: 0; font-size: clamp(44px, 5.6vw, 88px); }
.ec-occasion-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 24px); }
.ec-occasion { position: relative; display: flex; align-items: end; min-height: clamp(300px, 31vw, 465px); overflow: hidden; background: #795e51; color: var(--ec-cream); text-decoration: none; }
.ec-occasion img,
.ec-occasion__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.ec-occasion img { object-fit: cover; transition: transform 900ms cubic-bezier(.22, 1, .36, 1); }
.ec-occasion__shade { background: linear-gradient(180deg, rgba(17, 13, 12, .02) 30%, rgba(17, 13, 12, .77) 100%); }
.ec-occasion__copy { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: end; width: 100%; padding: 20px; }
.ec-occasion__copy strong { grid-column: 1; font: 300 clamp(27px, 2.5vw, 40px) / 1.04 var(--ec-font-display); letter-spacing: -.03em; }
.ec-occasion__copy small { grid-column: 1; font: 400 10px / 1.4 var(--ec-font-text); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 248, 239, .8); }
.ec-occasion__copy i { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255, 248, 239, .55); border-radius: 50%; font-style: normal; transition: background-color 360ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1); }
.ec-occasion:hover img,
.ec-occasion:focus-visible img { transform: scale(1.045); }
.ec-occasion:hover i,
.ec-occasion:focus-visible i { background: rgba(255, 248, 239, .16); transform: translateX(3px); }
.ec-occasion:focus-visible { outline: 2px solid var(--ec-edit-gold); outline-offset: 5px; }

/* --- Studio ------------------------------------------------------------- */

.ec-studio { position: relative; display: grid; align-items: end; min-height: clamp(590px, 78svh, 850px); overflow: hidden; background: #241b18; color: var(--ec-cream); }
.ec-studio__media,
.ec-studio__media img,
.ec-studio__media > span { position: absolute; inset: 0; }
.ec-studio__media { overflow: hidden; }
.ec-studio__media img { display: block; width: 100%; height: 112%; object-fit: cover; transform: translateY(var(--ec-studio-parallax-y, -3%)) scale(var(--ec-studio-parallax-scale, 1.04)); will-change: transform; }
.ec-studio__media > span { background: linear-gradient(90deg, rgba(17, 13, 12, .77) 0%, rgba(17, 13, 12, .43) 42%, rgba(17, 13, 12, .12) 73%); }
.ec-studio__copy { position: relative; z-index: 1; max-width: 650px; padding-top: 160px; padding-bottom: clamp(75px, 9vw, 130px); }
.ec-studio__copy h2 { margin-top: 18px; font-size: clamp(52px, 6vw, 94px); }
.ec-studio__copy > p:not(.ec-edit-kicker) { max-width: 39ch; margin: 25px 0 0; color: rgba(255, 248, 239, .84); font: 400 16px / 1.65 var(--ec-font-text); }
.ec-studio__copy .ec-edit-button { margin-top: 34px; }

/* --- Community ---------------------------------------------------------- */

.ec-real { padding: clamp(82px, 10vw, 140px) 0; background: var(--ec-edit-paper); }
.ec-real__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 50px; align-items: end; padding-bottom: clamp(34px, 5vw, 64px); }
.ec-real__head .ec-edit-kicker { grid-column: 1 / -1; color: var(--ec-edit-wine); }
.ec-real__head h2 { margin: 0; font-size: clamp(46px, 5.7vw, 92px); }
.ec-real__head .ec-edit-link { align-self: end; }
.ec-real__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(14px, 2vw, 30px); align-items: start; }
.ec-real figure { margin: 0; }
.ec-real figure:nth-child(2) { margin-top: clamp(38px, 7vw, 120px); }
.ec-real figure:nth-child(3) { margin-top: clamp(12px, 2vw, 34px); }
.ec-real img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #e3d6c9; transition: transform 760ms cubic-bezier(.22, 1, .36, 1); }
.ec-real figure:hover img { transform: scale(1.025); }
.ec-real figcaption { padding-top: 13px; font: 400 10px / 1.35 var(--ec-font-text); letter-spacing: .08em; text-transform: uppercase; color: rgba(22, 19, 17, .65); }

/* --- Motion ------------------------------------------------------------- */

html.ec-edits-motion .ec-edit-hero__panel { clip-path: inset(0 0 100% 0); transform: translateY(24px); transition: clip-path 1s cubic-bezier(.76, 0, .24, 1), transform 1s cubic-bezier(.22, 1, .36, 1); }
html.ec-edits-motion .ec-edit-hero__panel :is(img, video) { filter: blur(3px); --ec-edit-hero-scale: 1.1; }
html.ec-edits-motion .ec-edit-hero__panel-copy { opacity: 0; transform: translateY(26px); }
html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel { clip-path: inset(0); transform: translateY(0); }
html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel :is(img, video) { filter: blur(0); --ec-edit-hero-scale: 1.045; }
html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel-copy { opacity: 1; transform: translateY(9%); transition: opacity 600ms cubic-bezier(.22, 1, .36, 1), transform 760ms cubic-bezier(.22, 1, .36, 1); }
html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel:nth-child(1) { transition-delay: 90ms; }
html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel:nth-child(2) { transition-delay: 190ms; }
html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel:nth-child(3) { transition-delay: 290ms; }
html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel:nth-child(1) .ec-edit-hero__panel-copy { transition-delay: 420ms; }
html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel:nth-child(2) .ec-edit-hero__panel-copy { transition-delay: 510ms; }
html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel:nth-child(3) .ec-edit-hero__panel-copy { transition-delay: 600ms; }

html.ec-edits-motion [data-edit-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 720ms cubic-bezier(.22, 1, .36, 1), transform 860ms cubic-bezier(.22, 1, .36, 1); }
html.ec-edits-motion [data-edit-reveal].is-visible { opacity: 1; transform: translateY(0); }

@keyframes ec-edit-content-in {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
	.ec-edit-hero { padding: calc(var(--ec-home-header-height) + 14px) 14px 14px; }
	.ec-edit-hero__panels { min-height: calc(100svh - var(--ec-home-header-height) - 28px); gap: 12px; }
	.ec-edit-hero__panel-copy strong { font-size: clamp(34px, 4.8vw, 52px); }
	.ec-edit-products__head { grid-template-columns: 1fr; gap: 20px; }
	.ec-edit-products__head > p { max-width: none; }
	.ec-edit-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
	.ec-edit-process { grid-template-columns: 1fr; }
	.ec-edit-process article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--ec-edit-rule); }
	.ec-edit-process article:last-child { border-bottom: 0; }
	.ec-edit-process h3 { margin-top: 30px; }
	.ec-occasion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	body.ec-has-hero-header { --ec-home-header-height: 98px; }
	body.ec-has-hero-header .ec-header:not(.is-scrolled) { background: #050505; }
	.ec-edit-hero { min-height: max(760px, 100svh); padding: calc(var(--ec-home-header-height) + 9px) 9px 9px; }
	.ec-edit-hero__panels,
	.ec-edit-hero[data-active-edit='partywear'] .ec-edit-hero__panels,
	.ec-edit-hero[data-active-edit='linen-jersey'] .ec-edit-hero__panels,
	.ec-edit-hero[data-active-edit='made-to-order'] .ec-edit-hero__panels { min-height: calc(100svh - var(--ec-home-header-height) - 18px); grid-template-columns: 1fr !important; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.ec-edit-hero[data-active-edit='partywear'] .ec-edit-hero__panels { grid-template-rows: 1.14fr .93fr .93fr; }
	.ec-edit-hero[data-active-edit='linen-jersey'] .ec-edit-hero__panels { grid-template-rows: .93fr 1.14fr .93fr; }
	.ec-edit-hero[data-active-edit='made-to-order'] .ec-edit-hero__panels { grid-template-rows: .93fr .93fr 1.14fr; }
	.ec-edit-hero__panel { border-radius: 4px; }
	.ec-edit-hero__frame { inset: 9px; }
	.ec-edit-hero__panel-copy { gap: 6px; padding: 14px 12px; transform: none; }
	.ec-edit-hero__panel-copy strong { max-width: none; font-size: clamp(30px, 9.8vw, 42px); }
	.ec-edit-hero__panel-detail { font-size: 8px; letter-spacing: .16em; }
	.ec-edit-hero__panel-action { min-height: 40px; margin-top: 10px; padding-inline: 16px; font-size: 8px; }
	.ec-edit-hero.has-active-edit .ec-edit-hero__panel.is-active .ec-edit-hero__panel-copy,
	html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel-copy { transform: none; }
	/* Keep the vertical composition responsive without leaving the final card
	 * masked for too long on a small touch screen. */
	html.ec-edits-motion .ec-edit-hero__panel { transition-duration: 550ms; }
	html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel:nth-child(1) { transition-delay: 40ms; }
	html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel:nth-child(2) { transition-delay: 90ms; }
	html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel:nth-child(3) { transition-delay: 140ms; }
	html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel:nth-child(1) .ec-edit-hero__panel-copy { transition-delay: 230ms; }
	html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel:nth-child(2) .ec-edit-hero__panel-copy { transition-delay: 280ms; }
	html.ec-edits-motion .ec-edit-hero.is-ready .ec-edit-hero__panel:nth-child(3) .ec-edit-hero__panel-copy { transition-delay: 330ms; }
	.ec-edit-shell { padding-inline: 25px; }
	.ec-edit-products__panel { padding-block: 76px; }
	.ec-edit-products__head h2 { font-size: clamp(42px, 12vw, 64px); }
	.ec-edit-product__quick { display: none; }
	.ec-edit-product__text strong { font-size: 16px; }
	.ec-edit-product__text > span { font-size: 12px; }
	.ec-occasions { padding-block: 75px; }
	.ec-occasion-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(74vw, 1fr); grid-template-columns: none; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.ec-occasion-grid::-webkit-scrollbar { display: none; }
	.ec-occasion { min-height: 410px; scroll-snap-align: start; }
	.ec-studio { min-height: 670px; }
	.ec-studio__media > span { background: linear-gradient(180deg, rgba(17, 13, 12, .1) 16%, rgba(17, 13, 12, .78) 100%); }
	.ec-studio__copy { padding-top: 200px; padding-bottom: 70px; }
	.ec-studio__copy h2 { font-size: clamp(49px, 13vw, 71px); }
	.ec-real { padding-block: 75px; }
	.ec-real__head { grid-template-columns: 1fr; gap: 15px; padding-bottom: 40px; }
	.ec-real__head h2 { font-size: clamp(42px, 12vw, 64px); }
	.ec-real__head .ec-edit-link { justify-self: start; }
	.ec-real__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
	.ec-real figure:nth-child(2) { margin-top: 43px; }
	.ec-real figure:nth-child(3) { grid-column: 1 / -1; width: calc(50% - 7px); margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ec-home *,
	.ec-home *::before,
	.ec-home *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
	.ec-edit-hero__panels,
	.ec-edit-hero__panel :is(img, video) { clip-path: none !important; filter: none !important; transform: none !important; }
}

/* Match the Linen footer's compact mobile composition on the main home page. */
@media (max-width: 640px) {
	body.ec-has-hero-header .ec-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 20px;
	}

	body.ec-has-hero-header .ec-footer__utility {
		grid-column: 2;
		grid-row: 2;
		width: 100%;
	}

	body.ec-has-hero-header .ec-footer__inner { padding-inline: 20px; }
	body.ec-has-hero-header .ec-footer :is(a, p, select) { overflow-wrap: anywhere; }
}

/* =============================================================================
   Phone spotlight — all three collections on one screen
   -----------------------------------------------------------------------------
   Set by initPhoneSpotlight() in home-worlds.js at 700px and below. One panel
   is spotlighted at a time: it grows, its photo or video drifts slowly
   (Ken Burns), and its copy rises in line by line. The other two stay visible
   as slimmer rows with just their name. The spotlight moves on its own every
   few seconds until the visitor touches the hero; a tap on a slim row
   enlarges it, a tap on the spotlighted panel opens the collection.
   ============================================================================= */

@keyframes ec-edit-drift {
	from { transform: scale(1.04) translate3d(0, 0, 0); }
	to   { transform: scale(1.16) translate3d(0, -2%, 0); }
}

@keyframes ec-edit-rise {
	from { opacity: 0; transform: translate3d(0, 16px, 0); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
	.ec-edit-hero.is-phone-spotlight .ec-edit-hero__panels {
		transition: grid-template-rows 700ms cubic-bezier(.22, 1, .36, 1);
	}

	.ec-edit-hero.is-phone-spotlight[data-active-edit='partywear'] .ec-edit-hero__panels { grid-template-rows: minmax(calc(var(--ec-home-header-height) + 92px), 2.3fr) minmax(0, .85fr) minmax(0, .85fr); }
	.ec-edit-hero.is-phone-spotlight[data-active-edit='linen-jersey'] .ec-edit-hero__panels { grid-template-rows: minmax(calc(var(--ec-home-header-height) + 92px), .85fr) minmax(0, 2.3fr) minmax(0, .85fr); }
	.ec-edit-hero.is-phone-spotlight[data-active-edit='made-to-order'] .ec-edit-hero__panels { grid-template-rows: minmax(calc(var(--ec-home-header-height) + 92px), .85fr) minmax(0, .85fr) minmax(0, 2.3fr); }

	/* Slim rows: name only. */
	.ec-edit-hero.is-phone-spotlight .ec-edit-hero__panel:not(.is-active) .ec-edit-hero__panel-copy { gap: 4px; padding-block: 10px; }
	.ec-edit-hero.is-phone-spotlight .ec-edit-hero__panel:not(.is-active) .ec-edit-hero__panel-copy strong { font-size: clamp(22px, 7vw, 30px); }
	.ec-edit-hero.is-phone-spotlight .ec-edit-hero__panel:not(.is-active) :is(.ec-edit-hero__panel-detail, .ec-edit-hero__panel-action) { display: none; }

	/* Photos and videos overlap their card by a few pixels, so the dark card
	   background can never peek out at an edge while the card resizes. */
	.ec-edit-hero.is-phone-spotlight .ec-edit-hero__panel :is(img, video) {
		inset: -3px;
		width: calc(100% + 6px);
		height: calc(100% + 6px);
		backface-visibility: hidden;
		will-change: transform;
		transform: scale(1.03);
		transition: transform 700ms cubic-bezier(.22, 1, .36, 1), filter 700ms ease;
	}

	/* Spotlighted panel: a slow drift in. It is a transition, not an
	   animation, so when the panel shrinks the photo eases back instead of
	   snapping. */
	.ec-edit-hero.is-phone-spotlight .ec-edit-hero__panel.is-active :is(img, video) {
		transform: scale(1.14) translate3d(0, -1.5%, 0);
		transition: transform 9s cubic-bezier(.2, .6, .3, 1), filter 700ms ease;
	}

	/* ...and its copy rises in one line after another. */
	.ec-edit-hero.is-phone-spotlight .ec-edit-hero__panel.is-active .ec-edit-hero__panel-copy > * {
		animation: ec-edit-rise 700ms cubic-bezier(.22, 1, .36, 1) both;
	}

	.ec-edit-hero.is-phone-spotlight .ec-edit-hero__panel.is-active .ec-edit-hero__panel-copy > :nth-child(2) { animation-delay: 90ms; }
	.ec-edit-hero.is-phone-spotlight .ec-edit-hero__panel.is-active .ec-edit-hero__panel-copy > :nth-child(3) { animation-delay: 180ms; }
	.ec-edit-hero.is-phone-spotlight .ec-edit-hero__panel.is-active .ec-edit-hero__panel-copy > :nth-child(4) { animation-delay: 280ms; }

	.ec-edit-hero.is-phone-spotlight .ec-edit-hero__panel.is-active .ec-edit-hero__panel-action { opacity: 1; }
}

/* Phones: edge to edge. The three panels fill the screen from the header down
   to the bottom and side edges, with only a hairline between them. */
@media (max-width: 700px) {
	.ec-edit-hero {
		min-height: 100svh;
		padding: var(--ec-home-header-height) 0 0;
	}

	.ec-edit-hero .ec-edit-hero__panels,
	.ec-edit-hero[data-active-edit] .ec-edit-hero__panels {
		min-height: calc(100svh - var(--ec-home-header-height));
		gap: 2px;
	}

	.ec-edit-hero .ec-edit-hero__panels .ec-edit-hero__panel { border-radius: 0; }
}

/* Phones: a see-through header over the first panel, and no frame lines.
   The panels now start at the very top of the screen; a soft dark fade
   behind the logo keeps it readable on light photos. The first panel's
   content is pushed below the logo so the two never overlap. */
@media (max-width: 700px) {
	body.ec-has-hero-header .ec-header:not(.is-scrolled) {
		background: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
		/* No border: the fade would repeat into it as a dark hairline. */
		border-bottom: 0;
	}

	.ec-edit-hero { padding-top: 0; }

	.ec-edit-hero .ec-edit-hero__panels,
	.ec-edit-hero[data-active-edit] .ec-edit-hero__panels { height: 100svh; min-height: 0; }

	.ec-edit-hero .ec-edit-hero__panel:first-child { padding-top: var(--ec-home-header-height); }

	/* When Party Wear is a slim row it also sits under the logo, so it keeps
	   room for both. */
	.ec-edit-hero.is-phone-spotlight[data-active-edit='linen-jersey'] .ec-edit-hero__panels { grid-template-rows: minmax(calc(var(--ec-home-header-height) + 92px), .85fr) minmax(0, 2.3fr) minmax(0, .85fr); }
	.ec-edit-hero.is-phone-spotlight[data-active-edit='made-to-order'] .ec-edit-hero__panels { grid-template-rows: minmax(calc(var(--ec-home-header-height) + 92px), .85fr) minmax(0, .85fr) minmax(0, 2.3fr); }

	.ec-edit-hero .ec-edit-hero__frame { display: none; }
}