/* Scroll-linked Intro states. The Hero still uncovers this section like a curtain. */
.es-intro-section {
	--es-intro-color-muted: color-mix( in srgb, var( --wp--preset--color--contrast, #3d251d ) 50%, transparent );
	position: relative;
	/*
	 * Keep the fixed header above positioned content in later sections. Without
	 * this layer, Services' z-indexed decorative elements win the hit test even
	 * though the navigation is still visibly painted above them. The fixed
	 * header lives in this stacking context, so this is the header's layer.
	 */
	z-index: var( --es-z-header );
	background: var( --wp--preset--color--base, #f0eeed );
	color: var( --wp--preset--color--contrast, #3d251d );
}

.es-intro-section__stage {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	padding: clamp( 2rem, 6.25svh, 3.4375rem ) clamp( 1.25rem, 1.73vw, 1.5625rem ) 4rem clamp( 1.25rem, 2.25vw, 2rem );
}

/*
 * Desktop: the header belongs to the Intro stage (Figma "Header 1" is a child of
 * 2. Intro) and leaves with it — designer confirmed no sticky nav on desktop,
 * 06/09/2026. Below 768px it is fixed: the mobile frames show it on every
 * section after the hero and it is the only route to the menu.
 */
.es-intro-section__header {
	position: absolute;
	top: clamp( 2rem, 6.25svh, 3.4375rem );
	inset-inline: clamp( 1.25rem, 2.25vw, 2rem ) clamp( 1.25rem, 1.73vw, 1.5625rem );
	z-index: 1;
}

/*
 * The design has no header on the hero. view.js adds is-covered while the
 * hero still overlaps the header, alongside the inert it already sets, so
 * the fixed header is neither seen nor reachable until the hero has passed —
 * whatever the two sections' paint order happens to be.
 */
.es-intro-section__header.is-covered {
	opacity: 0;
	pointer-events: none;
}

/*
 * Desktop sticky bar (768px and up). view.js adds is-sticky-ready when it
 * can observe the hero; without it the header keeps the Intro layout above.
 * The header is fixed and out of flow in both states, so nothing jumps:
 * hidden, and out of the tab order, while any of the hero is on screen, then
 * sliding in as a solid bar (is-stuck) once the hero has gone. Colour and
 * height are --es-header-bg / --es-header-h in main.css. The Intro section
 * has no transform, filter, contain or will-change, which would break fixed.
 */
@media ( min-width: 768px ) {
	.es-intro-section__header.is-sticky-ready {
		position: fixed;
		top: var( --wp-admin--admin-bar--height, 0px );
		inset-inline: 0;
		display: flex;
		align-items: center;
		height: var( --es-header-h );
		padding-inline: clamp( 1.25rem, 2.25vw, 2rem ) clamp( 1.25rem, 1.73vw, 1.5625rem );
		background: var( --es-header-bg );
		transform: translateY( -100% );
		visibility: hidden;
		transition: transform 0.35s ease, visibility 0s linear 0.35s;
	}

	.es-intro-section__header.is-sticky-ready.is-stuck {
		transform: none;
		visibility: visible;
		transition: transform 0.35s ease, visibility 0s;
	}
}

/* Reduced motion: no slide, the bar just appears. */
@media ( min-width: 768px ) and ( prefers-reduced-motion: reduce ) {
	.es-intro-section__header.is-sticky-ready,
	.es-intro-section__header.is-sticky-ready.is-stuck {
		transition: none;
	}
}

.es-intro-section__visual {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp( 5.5rem, 10.19vw, 9.1875rem );
	transform: translate( -50%, -50% );
}

.es-intro-section__visual svg {
	display: block;
	width: 100%;
	height: auto;
	fill: currentColor;
}

.es-intro-section__state {
	position: absolute;
	inset: 0;
	display: grid;
	align-items: end;
	padding: 3.4375rem 2rem clamp( 4rem, 11.35svh, 6.25rem );
	pointer-events: none;
}

.es-intro-section__statement {
	display: grid;
	max-width: 35.3125rem;
	margin: 0 auto;
	font-family: var( --wp--preset--font-family--display, "formiga", Georgia, serif );
	font-size: var( --wp--preset--font-size--xl, 1.5rem );
	font-style: normal;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.015625rem;
	text-align: center;
}

.es-intro-section__statement span {
	color: var( --es-intro-color-muted );
}

.es-intro-section__statement strong {
	color: var( --wp--preset--color--contrast, #3d251d );
	font-weight: 400;
}

/* The statement and supporting copy cross-fade across the pinned scroll band. */
.es-intro-section {
	--es-intro-progress: 0;
}

.es-intro-section__state--statement {
	opacity: clamp( 0, calc( 1 - var( --es-intro-progress ) * 2 ), 1 );
}

.es-intro-section__state--words {
	display: block;
	opacity: clamp( 0, calc( var( --es-intro-progress ) * 2 - 1 ), 1 );
}

/* Supplied outlined artwork retains the original three-word composition. */
.es-intro-section__words {
	position: absolute;
	top: 50%;
	left: calc( 50% + 2vw );
	width: min( 33.8vw, 55svh, 30.5rem );
	aspect-ratio: 488 / 339;
	transform: translate( -50%, -50% );
}

.es-intro-section__word {
	position: absolute;
	display: block;
	height: auto;
}

.es-intro-section__word--layered { top: 0; left: 0; width: 46%; }
.es-intro-section__word--edited { top: 23%; left: 60%; width: 40%; }
.es-intro-section__word--sensory { top: 62%; left: 23.5%; width: 44%; }

.es-intro-section__about {
	position: absolute;
	inset-inline: 2rem;
	bottom: clamp( 2.5rem, 6.5svh, 3.5rem );
	text-align: center;
}

.es-intro-section__paragraph {
	max-width: 42.125rem;
	margin: 0 auto;
	font-family: var( --wp--preset--font-family--display, "formiga", Georgia, serif );
	font-size: var( --wp--preset--font-size--xl, 1.5rem );
	line-height: 1.25;
	letter-spacing: -0.015625rem;
	color: var( --wp--preset--color--contrast, #3d251d );
}

.es-intro-section__tagline {
	margin: 1.875rem 0 0;
	font-family: var( --wp--preset--font-family--body, "work-sans", sans-serif );
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	color: var( --es-intro-color-muted );
}

/*
 * No overlap (no JS, reduced motion, short viewports, or no hero before the
 * Intro): both states sit in flow, one viewport each, and the monogram is
 * centred in the first. view.js adds the modifier whenever the pin condition in
 * the media query below does not hold; without JS the :is() branch applies.
 */
:is( .es-intro-section--flow, .es-intro-section--editor:not( .es-intro-section--preview ), html:not( .has-js ) .es-intro-section ) .es-intro-section__state {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	opacity: 1;
}

:is( .es-intro-section--flow, .es-intro-section--editor:not( .es-intro-section--preview ), html:not( .has-js ) .es-intro-section ) .es-intro-section__about {
	position: static;
	margin-top: 3rem;
}

:is( .es-intro-section--flow, .es-intro-section--editor:not( .es-intro-section--preview ), html:not( .has-js ) .es-intro-section ) .es-intro-section__visual {
	top: 50vh;
	top: 50svh;
}

/* Enable overlap only when Hero and Intro are adjacent and JS manages focus. */
@media ( prefers-reduced-motion: no-preference ) and ( min-height: 700px ),
	( prefers-reduced-motion: no-preference ) and ( width < 768px ) and ( min-height: 500px ) {

	html.has-js .es-hero + .es-intro-section {
		/* Hero overlap (100) + state 1 hold (20) + cross-fade (60) + state 2 hold (40), in svh. */
		height: 320vh;
		height: 320svh;
		margin-top: -100vh;
		margin-top: -100svh;
	}

	/* Fade the container with the copy's section progress, independent of SVG markup. */
	html.has-js .es-hero + .es-intro-section:not( .es-intro-section--flow ) .es-intro-section__visual {
		opacity: clamp( 0.1, calc( 1 - var( --es-intro-progress ) * 0.9 ), 1 );
	}

	html.has-js .es-hero + .es-intro-section .es-intro-section__stage {
		position: sticky;
		top: 0;
		height: 100vh;
		height: 100svh;
		min-height: 0;
	}
}

.es-intro-section--editor .es-header__nav {
	pointer-events: none;
}

.es-intro-section--editor .es-intro-section__header {
	position: absolute;
}

.es-intro-section--preview {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.es-intro-section--preview .es-intro-section__stage {
	height: 100%;
	min-height: 0;
}

@media ( width < 768px ) {
	/* Figma "03-Intro 1" 3:46: header 24px down, 18px gutters. */
	.es-intro-section__stage {
		padding-top: 1.5rem;
		padding-inline: 1.125rem;
	}

	.es-intro-section__header {
		position: fixed;
		top: calc( 1.5rem + env( safe-area-inset-top, 0px ) );
		inset-inline: 1.125rem;
	}

	.es-intro-section__visual {
		width: 5.8125rem;
		height: 7.4375rem;
	}

	.es-intro-section__visual svg {
		height: 100%;
	}

	.es-intro-section__state {
		padding-bottom: 3rem;
	}

	.es-intro-section__state--statement {
		padding-inline: 1rem;
	}

	.es-intro-section__statement {
		max-width: none;
		font-size: 1.0625rem; /* 3:46: 17px, two lines */
		line-height: 1.25rem;
	}

	.es-intro-section__stage {
		overflow-x: clip;
	}

	.es-intro-section__words {
		/* Figma 3:88: a tighter, taller composition over the centred monogram. */
		/* Keep the lower stroke clear of the supporting copy on short phones. */
		top: min( calc( 50% + 0.15625rem ), calc( 100% - 19.5rem ) );
		left: calc( 50% + 0.5625rem );
		width: min( 68vw, 46svh, 17.125rem );
		aspect-ratio: 274 / 222;
	}

	.es-intro-section__word--layered {
		width: 53.3%;
	}

	.es-intro-section__word--edited {
		top: 29.7%;
		left: 55.1%;
		width: 44.9%;
	}

	.es-intro-section__word--sensory {
		top: 57.7%;
		left: 8.75%;
		width: 49%;
	}

	.es-intro-section__about {
		inset-inline: 1.125rem;
		bottom: 2.75rem;
	}

	.es-intro-section__paragraph {
		max-width: 21.4375rem;
		font-size: 1.0625rem;
		line-height: 1.2;
	}

	.es-intro-section__tagline {
		margin-top: 1.5rem;
		font-size: 0.625rem;
		font-weight: 500;
		line-height: 2;
		letter-spacing: 0.0625rem;
	}
}

/* Avoid adding stage padding around the two full-height fallback states. */
:is( .es-intro-section--flow, .es-intro-section--editor:not( .es-intro-section--preview ), html:not( .has-js ) .es-intro-section ) .es-intro-section__stage {
	padding: 0;
}

/* Stacked fallback keeps the artwork above its copy without absolute overlap. */
:is( .es-intro-section--flow, .es-intro-section--editor:not( .es-intro-section--preview ), html:not( .has-js ) .es-intro-section ) .es-intro-section__words {
	position: relative;
	top: auto;
	left: auto;
	margin: 0 auto;
	transform: none;
}