.ec-custom-make { --custom-ink: #272018; --custom-paper: #f8efd9; --custom-moss: #556055; --custom-brass: #c99f4d; color: var(--custom-paper); background: var(--custom-ink); }
.ec-custom-make__hero { position: relative; display: grid; min-height: min(850px, 92svh); overflow: hidden; place-items: end start; isolation: isolate; }
.ec-custom-make__hero-image, .ec-custom-make__hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.ec-custom-make__hero-image { object-fit: cover; object-position: 50% 50%; z-index: -2; filter: saturate(.66) contrast(1.04); }
.ec-custom-make__hero-shade { z-index: -1; background: linear-gradient(90deg, rgba(12, 13, 11, .82) 0%, rgba(12, 13, 11, .40) 55%, rgba(12, 13, 11, .12) 100%), linear-gradient(0deg, rgba(12, 13, 11, .65), transparent 52%); }
.ec-custom-make__hero-copy { width: min(900px, calc(100% - 48px)); padding: clamp(130px, 17vw, 235px) 0 clamp(54px, 7vw, 106px); margin: 0 auto; }
.ec-custom-make__eyebrow, .ec-custom-make__step-number { margin: 0; color: var(--custom-brass); font: 500 10px / 1.2 var(--ec-font-text); letter-spacing: .18em; text-transform: uppercase; }
.ec-custom-make__hero h1 { max-width: 900px; margin: 20px 0 32px; font: 400 clamp(48px, 7.2vw, 112px) / .94 var(--ec-font-display); letter-spacing: -.055em; }
.ec-custom-make__hero a, .ec-custom-make__cta a { display: inline-flex; align-items: center; gap: 20px; padding-bottom: 10px; border-bottom: 1px solid currentColor; color: var(--custom-paper); font: 500 10px / 1 var(--ec-font-text); letter-spacing: .16em; text-decoration: none; text-transform: uppercase; transition: color .25s ease; }
.ec-custom-make__hero a:hover, .ec-custom-make__hero a:focus-visible, .ec-custom-make__cta a:hover, .ec-custom-make__cta a:focus-visible { color: var(--custom-brass); outline: 0; }
/* `overflow-x: clip` and not `hidden`: `hidden` would make this section the
   scroll container for everything inside it, and the deck's pinned stage would
   silently stop sticking. `clip` contains the same horizontal bleed without
   creating a scrollport. Matches what html and body already use. */
.ec-custom-make__journey { position: relative; padding: clamp(90px, 12vw, 180px) max(24px, calc((100vw - 1320px) / 2)) clamp(110px, 14vw, 210px); background: var(--custom-paper); color: var(--custom-ink); overflow-x: clip; }
.ec-custom-make__journey-head { max-width: 720px; margin: 0 auto clamp(76px, 11vw, 150px); text-align: center; }
.ec-custom-make__journey-head h2 { margin: 18px 0 20px; font: 400 clamp(43px, 5vw, 78px) / .95 var(--ec-font-display); letter-spacing: -.05em; }
.ec-custom-make__journey-head > p:last-child { max-width: 47ch; margin: 0 auto; color: rgba(39, 32, 24, .68); font: 400 16px / 1.65 var(--ec-font-text); }
.ec-custom-make__timeline { position: relative; isolation: isolate; max-width: 1240px; margin: 0 auto; }
.ec-custom-make__line { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ec-custom-make__line-progress { fill: none; vector-effect: non-scaling-stroke; stroke: var(--custom-brass); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.ec-custom-make__step { position: relative; z-index: 1; display: flex; align-items: center; min-height: clamp(360px, 32vw, 460px); margin-bottom: clamp(22px, 3vw, 46px); }
.ec-custom-make__step:last-child { margin-bottom: 0; }
.ec-custom-make__marker { position: absolute; z-index: 2; top: 60%; display: grid; width: 48px; height: 48px; border: 1px solid rgba(170, 123, 36, .6); border-radius: 50%; place-items: center; background: var(--custom-paper); color: var(--custom-ink); font: 600 10px / 1 var(--ec-font-text); letter-spacing: .08em; transform: translate(-50%, -50%) scale(.8); transition: transform .6s cubic-bezier(.22, 1, .36, 1), border-color .5s ease, background .5s ease; }
.ec-custom-make__step-image, .ec-custom-make__step-copy { opacity: 0; transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1); }
.ec-custom-make__step-image { position: absolute; top: 50%; width: clamp(150px, 16vw, 232px); margin: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(170, 123, 36, .56); border-radius: 50%; background: #292b25; transform: translateY(calc(-50% + 30px)) scale(.94); }
.ec-custom-make__step-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.73) contrast(1.03); transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.ec-custom-make__step:hover .ec-custom-make__step-image img { transform: scale(1.04); }
.ec-custom-make__step-copy { width: min(59%, 750px); }
.ec-custom-make__step-copy h3 { margin: 15px 0 17px; font: 400 clamp(36px, 4vw, 61px) / .98 var(--ec-font-display); letter-spacing: -.045em; }
.ec-custom-make__step-copy > p:last-child { margin: 0; color: rgba(39, 32, 24, .68); font: 400 16px / 1.65 var(--ec-font-text); }
.ec-custom-make__step--left .ec-custom-make__step-image { left: 7%; }
.ec-custom-make__step--left .ec-custom-make__step-copy { margin-left: 29%; text-align: left; }
.ec-custom-make__step--left .ec-custom-make__marker { left: calc(7% + clamp(125px, 13vw, 190px)); }
.ec-custom-make__step--right .ec-custom-make__step-image { right: 7%; }
.ec-custom-make__step--right .ec-custom-make__step-copy { margin-right: 29%; text-align: center; }
.ec-custom-make__step--right .ec-custom-make__marker { left: calc(93% - clamp(125px, 13vw, 190px)); }
.ec-custom-make__step.is-visible .ec-custom-make__step-copy { opacity: 1; transform: translateY(0); }
.ec-custom-make__step.is-visible .ec-custom-make__step-image { opacity: 1; transform: translateY(-50%) scale(1); }
.ec-custom-make__step.is-visible .ec-custom-make__step-copy { transition-delay: .10s; }
.ec-custom-make__step.is-visible .ec-custom-make__marker { border-color: var(--custom-brass); background: var(--custom-brass); color: var(--custom-ink); transform: translate(-50%, -50%) scale(1); }
/* =============================================================================
   BOOKING  ·  the page closes on a form, not a link
   -----------------------------------------------------------------------------
   The section is given the whole viewport so the form is the only thing being
   asked of the visitor once the journey has been read. `min-height` rather
   than `height`: a short window, a browser translating the labels, or the
   error notice appearing all need the section to grow rather than clip.
   ============================================================================= */

.ec-custom-make__cta {
	display: grid;
	align-items: center;
	min-height: 100svh;
	padding: clamp(66px, 8vw, 116px) max(24px, calc((100vw - 1320px) / 2));
	border-top: 1px solid rgba(238, 235, 227, .22);
	background: #0d0e0c;
}

.ec-custom-make__cta-inner {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: clamp(40px, 5vw, 92px);
	align-items: center;
	width: 100%;
}

.ec-custom-make__cta h2 { max-width: 11ch; margin: 16px 0 0; font: 400 clamp(42px, 5vw, 76px) / .95 var(--ec-font-display); letter-spacing: -.05em; }
.ec-custom-make__cta-intro { max-width: 38ch; margin: 26px 0 0; color: rgba(238, 235, 227, .66); font: 400 16px / 1.65 var(--ec-font-text); }

.ec-custom-make__cta-assurances { margin: 34px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.ec-custom-make__cta-assurances li { display: flex; align-items: center; gap: 13px; color: rgba(238, 235, 227, .8); font: 400 14px / 1.4 var(--ec-font-text); }
.ec-custom-make__cta-assurances svg { flex: 0 0 auto; color: var(--custom-brass); }

.ec-custom-make__cta-aside { margin: 34px 0 0; color: rgba(238, 235, 227, .45); font: 400 13px / 1.6 var(--ec-font-text); }
.ec-custom-make__cta-aside a { display: inline; gap: 0; padding: 0; border-bottom-width: 1px; font: inherit; letter-spacing: 0; text-transform: none; color: rgba(238, 235, 227, .78); }

/* --- The form ---------------------------------------------------------- */

.ec-custom-make__cta-form {
	padding: clamp(28px, 3vw, 46px);
	border: 1px solid rgba(238, 235, 227, .16);
	background: rgba(238, 235, 227, .03);
}

.ec-custom-make__notice { margin: 0 0 24px; padding: 15px 18px; border-left: 2px solid var(--custom-brass); background: rgba(201, 159, 77, .1); color: rgba(238, 235, 227, .9); font: 400 14px / 1.55 var(--ec-font-text); }
.ec-custom-make__notice--success { border-left-color: #7f9c6d; background: rgba(127, 156, 109, .13); }

.ec-custom-make__form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
.ec-custom-make__field { display: flex; flex-direction: column; gap: 9px; margin: 0; min-width: 0; }
.ec-custom-make__field--wide { grid-column: 1 / -1; }

.ec-custom-make__field label { color: rgba(238, 235, 227, .62); font: 500 10px / 1.2 var(--ec-font-text); letter-spacing: .16em; text-transform: uppercase; }
.ec-custom-make__field label span { letter-spacing: .1em; opacity: .6; text-transform: none; }

.ec-custom-make__field :is(input, select, textarea) {
	width: 100%;
	padding: 13px 0;
	border: 0;
	border-bottom: 1px solid rgba(238, 235, 227, .24);
	border-radius: 0;
	background: transparent;
	color: var(--custom-paper);
	font: 400 16px / 1.5 var(--ec-font-text);
	transition: border-color .25s ease;
	/* iOS rounds and insets form controls by default, which breaks the rule
	   these fields are drawn with. */
	-webkit-appearance: none;
	appearance: none;
}

.ec-custom-make__field textarea { resize: vertical; min-height: 96px; }
.ec-custom-make__field ::placeholder { color: rgba(238, 235, 227, .32); }

/* Focus is shown by lifting the field's own rule rather than by drawing a box
   around it — a ring would contradict the underline these fields are built
   from. The rule doubles in weight and takes the brass, which is a clearly
   visible state change and keeps the control keyboard-legible. */
.ec-custom-make__field :is(input, select, textarea):focus,
.ec-custom-make__field :is(input, select, textarea):focus-visible {
	border-bottom-color: var(--custom-brass);
	box-shadow: 0 1px 0 0 var(--custom-brass);
	outline: 0;
}

/* A dark control needs its own arrow: the platform one is drawn in the
   system colour and disappears against this ground. This is the no-JS and
   pre-enhancement state — once the themed dropdown takes over, the native
   control is taken out of the layout entirely. */
.ec-custom-make__field select {
	padding-right: 26px;
	background-image: linear-gradient(45deg, transparent 50%, rgba(238, 235, 227, .62) 50%), linear-gradient(135deg, rgba(238, 235, 227, .62) 50%, transparent 50%);
	background-position: calc(100% - 12px) calc(50% + 1px), calc(100% - 7px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* The native option list is drawn by the platform, not by this stylesheet, so
   it needs colours that work on its own popup rather than on the dark card. */
.ec-custom-make__field select option { background: #161714; color: var(--custom-paper); }

/* Chrome draws the date picker indicator almost black on this ground. */
.ec-custom-make__field input[type='date']::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .55; cursor: pointer; }
.ec-custom-make__field input[type='date']::-webkit-calendar-picker-indicator:hover { opacity: .9; }

/* =============================================================================
   The themed dropdown
   -----------------------------------------------------------------------------
   A native <select>'s option list is rendered by the operating system and
   cannot be styled, so on this near-black card it opens as a bright platform
   popup. custom-make.js replaces it with a listbox that belongs to the
   section, and keeps the real <select> in the form as the value that is
   submitted — so without JavaScript the native control is simply still there.
   ============================================================================= */

.ec-custom-make__select { position: relative; }

/* Not `display: none`: the native control is still the field that submits, and
   a display-none form control is dropped from some autofill paths. It is taken
   out of the layout and out of the tab order instead. */
.ec-custom-make__select .ec-custom-make__select-native {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ec-custom-make__select__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 13px 0;
	border: 0;
	border-bottom: 1px solid rgba(238, 235, 227, .24);
	background: transparent;
	color: var(--custom-paper);
	font: 400 16px / 1.5 var(--ec-font-text);
	text-align: left;
	cursor: pointer;
	transition: border-color .25s ease;
}

/* Until something is chosen the button carries the placeholder option, which
   should read as prompt text rather than as an answer. */
.ec-custom-make__select__button[data-placeholder='true'] { color: rgba(238, 235, 227, .32); }

.ec-custom-make__select__button:focus,
.ec-custom-make__select__button:focus-visible {
	border-bottom-color: var(--custom-brass);
	box-shadow: 0 1px 0 0 var(--custom-brass);
	outline: 0;
}

.ec-custom-make__select__arrow {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-bottom: 3px;
	border-right: 1px solid rgba(238, 235, 227, .62);
	border-bottom: 1px solid rgba(238, 235, 227, .62);
	transform: rotate(45deg);
	transition: transform .28s cubic-bezier(.22, 1, .36, 1), border-color .25s ease;
}

.ec-custom-make__select.is-open .ec-custom-make__select__arrow { border-color: var(--custom-brass); transform: rotate(-135deg) translate(-3px, -3px); }
.ec-custom-make__select.is-open .ec-custom-make__select__button { border-bottom-color: var(--custom-brass); }

.ec-custom-make__select__list {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	max-height: 254px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	border: 1px solid rgba(201, 159, 77, .34);
	background: #14150f;
	box-shadow: 0 22px 46px rgba(0, 0, 0, .55);
	/* Opened by removing [hidden], so the entrance is a transition on a state
	   class rather than an animation that would run on first paint. */
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .2s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
}

.ec-custom-make__select.is-open .ec-custom-make__select__list { opacity: 1; transform: translateY(0); }

.ec-custom-make__select__option {
	padding: 11px 14px;
	color: rgba(238, 235, 227, .78);
	font: 400 15px / 1.4 var(--ec-font-text);
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.ec-custom-make__select__option:hover,
.ec-custom-make__select__option.is-active { background: rgba(201, 159, 77, .16); color: var(--custom-paper); }
.ec-custom-make__select__option[aria-selected='true'] { color: var(--custom-brass); }

@media (prefers-reduced-motion: reduce) {
	.ec-custom-make__select__list,
	.ec-custom-make__select__arrow { transition: none; }
}

.ec-custom-make__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	min-height: 56px;
	margin-top: clamp(26px, 3vw, 38px);
	padding: 0 30px;
	/* Cream on near-black, which is the pairing the hero and the footer
	   already use. The brass is the section's accent — spending it on the
	   largest surface in the form made the accent the loudest thing on the
	   page and left the gold with nothing to point at. */
	border: 1px solid var(--custom-paper);
	background: var(--custom-paper);
	color: #14150f;
	font: 500 10px / 1 var(--ec-font-text);
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.ec-custom-make__submit svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.ec-custom-make__submit:hover,
.ec-custom-make__submit:focus-visible { background: transparent; border-color: var(--custom-brass); color: var(--custom-brass); }
.ec-custom-make__submit:hover svg { transform: translateX(4px); }
.ec-custom-make__submit:focus-visible { outline: 2px solid var(--custom-brass); outline-offset: 3px; }

/* The seven card grounds. Declared here rather than inside the desktop deck
   block because the phone composition draws the same cards, standing on their
   own instead of stacked — the grading is what ties the two together. */
.ec-custom-make__step:nth-of-type(1) { --stack-ground: #f6ebd1; }
.ec-custom-make__step:nth-of-type(2) { --stack-ground: #f1e4c6; }
.ec-custom-make__step:nth-of-type(3) { --stack-ground: #ecdcba; }
.ec-custom-make__step:nth-of-type(4) { --stack-ground: #e6d3ae; }
.ec-custom-make__step:nth-of-type(5) { --stack-ground: #e0caa1; }
.ec-custom-make__step:nth-of-type(6) { --stack-ground: #d9c095; }
.ec-custom-make__step:nth-of-type(7) { --stack-ground: #d2b689; }
@media (max-width: 760px) {
	.ec-custom-make__hero { min-height: 83svh; }
	.ec-custom-make__hero-copy { width: min(100% - 38px, 600px); }
	.ec-custom-make__hero h1 { font-size: clamp(47px, 13vw, 68px); }
	.ec-custom-make__journey { padding-inline: 16px; padding-bottom: clamp(70px, 12vw, 110px); }
	.ec-custom-make__journey-head { margin-bottom: 44px; text-align: left; }
	.ec-custom-make__journey-head > p:last-child { margin-left: 0; }
	.ec-custom-make__journey-head h2 { font-size: clamp(36px, 10vw, 50px); }

	/* --- The journey on a phone ----------------------------------------
	   The desktop composition is a deck of full-bleed cards. A phone cannot
	   pin a deck, so each step becomes that same card standing on its own:
	   photograph across the full width, the number as a tab on it, the copy
	   on the card's own ground below.

	   What this replaces was the original zig-zag: a two-column grid whose
	   first column existed only to hold a marker circle, and a connector line
	   drawn between the circles. On a 375px screen that empty gutter was
	   costing 50px — a seventh of the width — and the thread it served was
	   wandering down a single column connecting points already in a straight
	   line. Both are retired here; the numbering does the sequencing. */
	.ec-custom-make__line,
	.ec-custom-make__marker { display: none; }

	.ec-custom-make__step {
		display: block;
		min-height: 0;
		margin-bottom: 18px;
		overflow: hidden;
		border: 1px solid rgba(39, 32, 24, .1);
		background: var(--stack-ground, var(--custom-paper));
	}

	.ec-custom-make__step-image,
	.ec-custom-make__step--left .ec-custom-make__step-image,
	.ec-custom-make__step--right .ec-custom-make__step-image {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		width: 100%;
		margin: 0;
		aspect-ratio: 4 / 3.5;
		border: 0;
		border-radius: 0;
		transform: translateY(18px) scale(.99);
	}

	.ec-custom-make__step-copy,
	.ec-custom-make__step--left .ec-custom-make__step-copy,
	.ec-custom-make__step--right .ec-custom-make__step-copy {
		width: auto;
		margin: 0;
		padding: 22px 20px 26px !important;
		text-align: left;
	}

	/* The number rides on the photograph as a tab, the way it does on the
	   desktop card, rather than as a line of small type above the heading. */
	.ec-custom-make__step-number {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		padding: 11px 17px;
		background: var(--stack-ground, var(--custom-paper));
		color: var(--custom-ink);
		font-size: 10px;
		letter-spacing: .2em;
	}

	.ec-custom-make__step.is-visible .ec-custom-make__step-image { transform: translateY(0) scale(1); }

	/* The copy is revealed by fading alone, with no transform of its own.
	   `translateY(0)` is still a transform, and a transformed element becomes
	   the containing block for its absolutely positioned descendants — which
	   would drop the number tab out of the card's corner and into the top of
	   the copy the instant the card scrolled into view. */
	.ec-custom-make__step-copy,
	.ec-custom-make__step.is-visible .ec-custom-make__step-copy { transform: none; }

	.ec-custom-make__step-copy h3 { margin: 0 0 14px; font-size: clamp(30px, 8vw, 40px); }
	.ec-custom-make__step-copy > p:last-child { font-size: 15px; }

	/* A 21px-tall underlined link is well under a comfortable thumb. Padding
	   would push the rule away from the text it belongs to, so the target is
	   grown with an overlay instead and the underline stays put. */
	.ec-custom-make__hero a { position: relative; }
	.ec-custom-make__hero a::after { position: absolute; inset: -13px -10px; content: ''; }

	/* The form alone is taller than a phone screen, so the section stops
	   claiming a viewport and simply flows — pinning the copy above a form the
	   visitor has to scroll inside would only fight them. */
	.ec-custom-make__cta { min-height: 0; padding-inline: 20px; }
	.ec-custom-make__cta-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.ec-custom-make__cta h2 { max-width: none; }
	.ec-custom-make__cta-intro { max-width: none; }
	.ec-custom-make__cta-form { padding: 24px 20px; }
	.ec-custom-make__form-grid { grid-template-columns: minmax(0, 1fr); }
	/* 16px keeps iOS from zooming the page in when a field takes focus. */
	.ec-custom-make__field :is(input, select, textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.ec-custom-make *, .ec-custom-make *::before, .ec-custom-make *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.ec-custom-make__step-image { opacity: 1; transform: translateY(-50%) scale(1); }
	.ec-custom-make__step-copy { opacity: 1; transform: none; }
	.ec-custom-make__marker { transform: translate(-50%, -50%) scale(1); border-color: var(--custom-brass); background: var(--custom-brass); color: var(--custom-ink); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
	.ec-custom-make__step-image { transform: none; }
}
/* Desktop-only zig-zag journey. The mobile composition intentionally stays unchanged. */
@media (min-width: 761px) {
	.ec-custom-make__timeline { max-width: 1280px; padding: 0; }
	.ec-custom-make__timeline::after { display: none; }
	.ec-custom-make__line { display: block; }
	.ec-custom-make__step { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; min-height: clamp(390px, 32vw, 490px); margin-bottom: clamp(30px, 4vw, 64px); }
	.ec-custom-make__step-image, .ec-custom-make__step--left .ec-custom-make__step-image, .ec-custom-make__step--right .ec-custom-make__step-image { position: relative; top: auto; right: auto; left: auto; grid-row: 1; width: min(100%, 220px); margin: 0; aspect-ratio: 1; border-radius: 50%; transform: translateY(26px) scale(.96); }
	.ec-custom-make__step-copy, .ec-custom-make__step--left .ec-custom-make__step-copy, .ec-custom-make__step--right .ec-custom-make__step-copy { grid-row: 2; width: min(100%, 500px); margin: 24px 0 0; padding: clamp(26px, 3vw, 42px); border: 1px solid rgba(170, 123, 36, .28); background: rgba(255, 255, 255, .28); text-align: left; transform: translateY(26px); }
	.ec-custom-make__step--left .ec-custom-make__step-image, .ec-custom-make__step--left .ec-custom-make__step-copy { grid-column: 1; justify-self: start; }
	.ec-custom-make__step--right .ec-custom-make__step-image, .ec-custom-make__step--right .ec-custom-make__step-copy { grid-column: 3; justify-self: end; }
	.ec-custom-make__marker, .ec-custom-make__step--left .ec-custom-make__marker { top: clamp(135px, 12vw, 188px); left: clamp(154px, 15vw, 202px); width: 38px; height: 38px; border-color: var(--custom-brass); background: var(--custom-paper); color: var(--custom-ink); }
	.ec-custom-make__step--right .ec-custom-make__marker { top: clamp(135px, 12vw, 188px); right: clamp(154px, 15vw, 202px); left: auto; width: 38px; height: 38px; border-color: var(--custom-brass); background: var(--custom-paper); color: var(--custom-ink); }
	.ec-custom-make__step-number { color: var(--custom-brass); font: 400 clamp(42px, 5.2vw, 70px) / .9 var(--ec-font-display); letter-spacing: -.055em; }
	.ec-custom-make__step-copy h3 { margin: 15px 0 18px; font-size: clamp(34px, 4vw, 58px); }
	.ec-custom-make__step.is-visible .ec-custom-make__step-image { transform: translateY(0) scale(1); }
	.ec-custom-make__step.is-visible .ec-custom-make__step-copy { transform: translateY(0); }
}
@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
	.ec-custom-make__step-image { transform: none; }
}
/* =============================================================================
   SCROLL-STACK DECK  ·  desktop and tablet
   -----------------------------------------------------------------------------
   The seven steps are dealt as a deck. A tall track scrolls past a pinned
   stage, and each card is dealt up from below the fold onto the front of the
   deck, pushing the card it lands on a little further back and a little
   smaller. The backs of the cards already played stay visible above the front
   one, so the journey reads as seven separate sheets gathering into a pile
   rather than one illustration scrolling past.

   HOW THE DEAL IS MADE
     · __track is nothing but scroll distance: stage height + count × step.
     · __stage pins under the masthead while that distance passes beneath it.
     · __deck is the single box every card shares; the cards are absolutely
       positioned inside it and moved with transforms only.

   Two custom properties per card carry the whole animation. custom-make.js
   rewrites them on every animation frame:

     --ec-stack-t   this card's own deal, 0 (below the fold) → 1 (the front).
     --ec-stack-d   how far back the deck has pushed it since, one unit for
                    every card dealt on top of it.

   Everything they drive is a transform, so the deck stays on the compositor.
   They are only read under `html.ec-custom-stack`, which the script adds once
   it has taken over. Without JavaScript, on a window too short to read a card
   in, and under prefers-reduced-motion the class is never set: the three
   wrappers collapse to `display: contents` and the steps stay the ordinary
   column they have always been.
   ============================================================================= */

/* The wrappers are structural only. Until the deck is armed they must not
   exist as far as layout is concerned, so every other composition on this page
   — the phone column included — is left exactly as it was. */
.ec-custom-make__track,
.ec-custom-make__stage,
.ec-custom-make__deck { display: contents; }

.ec-custom-make__rail { display: none; }

@media (min-width: 761px) {
	.ec-custom-make__timeline {
		/* Scroll spent dealing one card. The reference site spends 1.12 of its
		   own viewports per card (4032px of travel across 5 cards at 720px
		   tall); matching that is what sets the unhurried pace. This is the
		   one knob for the whole deal — raise it to slow the cards further,
		   at the cost of a longer section. */
		--ec-stack-step: 112svh;
		--ec-stack-enter: 134%;
		--ec-stack-shift: 9%;
		--ec-stack-scale: .021;
		/* The masthead is sticky and stays on screen, so the pinned stage has
		   to clear it or cards are dealt behind the bar. */
		--ec-stack-top: var(--custom-stack-top, 92px);

		width: min(1120px, calc(100% - 72px));
		max-width: none;
		padding: 0;
	}

	/* A dealt card is the whole composition, so the section's reading measure
	   gets out of its way and the deck runs nearly edge to edge. */
	html.ec-custom-stack .ec-custom-make__journey {
		padding-inline: clamp(16px, 2.2vw, 40px);
		padding-bottom: clamp(60px, 8vh, 120px);
	}

	html.ec-custom-stack .ec-custom-make__timeline { width: 100%; }

	/* The connector line and its markers belonged to the flat timeline. A deck
	   has no thread running through it — the stacking is the sequence. */
	.ec-custom-make__line,
	.ec-custom-make__marker { display: none; }

	html.ec-custom-stack .ec-custom-make__track {
		display: block;
		position: relative;
		height: calc(100svh - var(--ec-stack-top) + var(--ec-stack-count) * var(--ec-stack-step));
	}

	html.ec-custom-stack .ec-custom-make__stage {
		display: block;
		position: sticky;
		top: var(--ec-stack-top);
		height: calc(100svh - var(--ec-stack-top));
		overflow: hidden;
	}

	/* The box every card is dealt into. Anchoring it to the foot of the stage
	   is what leaves the headroom the backs of the played cards occupy: each
	   one sits --ec-stack-shift higher than the card in front of it, so this
	   gap is the only thing deciding how deep the visible pile reads. */
	html.ec-custom-stack .ec-custom-make__deck {
		display: block;
		position: absolute;
		right: 0;
		bottom: clamp(26px, 3.4vh, 46px);
		left: 0;
		height: calc(100% - clamp(140px, 17vh, 196px));
	}

	.ec-custom-make__step {
		display: grid;
		grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
		grid-template-rows: 1fr;
		align-items: center;
		min-height: clamp(500px, 66svh, 600px);
		margin: 0 0 clamp(44px, 6.5vh, 78px);
		padding: clamp(30px, 3.2vw, 46px);
		overflow: hidden;
		isolation: isolate;
		border: 1px solid rgba(39, 32, 24, .14);
		background: var(--stack-ground, var(--custom-paper));
		color: var(--custom-ink);
	}

	.ec-custom-make__step:last-child { margin-bottom: 0; }

	html.ec-custom-stack .ec-custom-make__step {
		position: absolute;
		inset: 0;
		z-index: calc(var(--ec-stack-index) + 1);
		align-items: stretch;
		grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
		min-height: 0;
		margin: 0;
		padding: 0;
	}

	/* --- Deck progress ----------------------------------------------------- */

	html.ec-custom-stack .ec-custom-make__rail {
		display: flex;
		position: absolute;
		z-index: 4;
		bottom: clamp(12px, 2.2vh, 26px);
		left: 50%;
		gap: 10px;
		margin: 0;
		transform: translateX(-50%);
		pointer-events: none;
	}

	.ec-custom-make__rail-step i {
		display: block;
		width: clamp(16px, 1.8vw, 26px);
		height: 2px;
		background: rgba(39, 32, 24, .2);
		transition: background-color .42s ease;
	}

	.ec-custom-make__rail-step.is-played i { background: rgba(39, 32, 24, .42); }
	.ec-custom-make__rail-step.is-current i { background: var(--custom-brass); }

	/* --- Card contents ---------------------------------------------------- */

	.ec-custom-make__step-image,
	.ec-custom-make__step--left .ec-custom-make__step-image,
	.ec-custom-make__step--right .ec-custom-make__step-image {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		width: 100%;
		max-width: 370px;
		margin: 0;
		aspect-ratio: 3 / 4.2;
		overflow: hidden;
		border: 0;
		border-radius: 0;
		background: rgba(39, 32, 24, .08);
		transform: translateY(26px) scale(.98);
	}

	.ec-custom-make__step-image img { filter: saturate(.78) contrast(1.02); }

	.ec-custom-make__step-copy,
	.ec-custom-make__step--left .ec-custom-make__step-copy,
	.ec-custom-make__step--right .ec-custom-make__step-copy {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		width: auto;
		max-width: 420px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		text-align: left;
		transform: translateY(26px);
	}

	/* The step number is set as a corner tab, so a covered card is still
	   identifiable by the sliver of edge left showing. */
	.ec-custom-make__step-number {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		display: block;
		margin: 0;
		padding: 13px 20px;
		background: rgba(39, 32, 24, .07);
		color: var(--custom-ink);
		font: 500 10px / 1 var(--ec-font-text);
		letter-spacing: .2em;
		text-transform: uppercase;
	}

	.ec-custom-make__step-copy h3 {
		margin: 0 0 18px;
		color: var(--custom-ink);
		font: 400 clamp(32px, 3.3vw, 48px) / 1.02 var(--ec-font-display);
		letter-spacing: -.045em;
	}

	.ec-custom-make__step-copy > p:last-child {
		max-width: 34ch;
		color: rgba(39, 32, 24, .7);
		font: 400 16px / 1.62 var(--ec-font-text);
	}

	.ec-custom-make__step.is-visible .ec-custom-make__step-image { transform: translateY(0) scale(1); }
	.ec-custom-make__step.is-visible .ec-custom-make__step-copy { transform: translateY(0); }

	/* --- A dealt card is a full-bleed split, not a bordered panel ---------
	   The photograph runs the card's whole height against the copy, so a card
	   that fills the viewport still reads as a single object. */
	html.ec-custom-stack .ec-custom-make__step-image {
		grid-column: 2;
		justify-self: stretch;
		align-self: stretch;
		width: 100%;
		max-width: none;
		height: 100%;
		aspect-ratio: auto;
	}

	html.ec-custom-stack .ec-custom-make__step-copy {
		grid-column: 1;
		justify-self: center;
		align-self: center;
		width: 100%;
		max-width: 640px;
		padding: clamp(34px, 4.4vw, 86px);
	}

	/* The deal is this card's entrance, so the copy has no separate reveal of
	   its own to run. Dropping the transform also takes away a containing
	   block: the number tab is positioned against the card, and any transform
	   here — `translateY(0)` included — captures it and pulls it off the
	   corner into the top of the copy, on top of the heading.

	   The `.is-visible` selector this has to beat is three classes deep, so
	   the revealed state is named here rather than relying on source order. */
	html.ec-custom-stack .ec-custom-make__step-copy,
	html.ec-custom-stack .ec-custom-make__step.is-visible .ec-custom-make__step-copy { transform: none; }

	html.ec-custom-stack .ec-custom-make__step-copy h3 {
		margin: 0 0 22px;
		font-size: clamp(38px, 4.2vw, 68px);
	}

	html.ec-custom-stack .ec-custom-make__step-copy > p:last-child {
		max-width: 42ch;
		font-size: clamp(16px, 1.15vw, 19px);
	}
}

/* =============================================================================
   The cards are sheets, and sheets have soft corners
   -----------------------------------------------------------------------------
   The same 12px the rest of the site gives every card-like surface, taken from
   the shared token rather than restated, so the deck stays in step if that
   token ever moves. Applied to the card itself — not per breakpoint — because
   a rounded card on a phone and a square one on a desktop would read as two
   different components.

   The `overflow: hidden` each composition already puts on the card clips the
   photograph and the number tab to the curve, so the corner is honoured by
   everything sitting on the card rather than just by its border.
   ============================================================================= */

.ec-custom-make__step { border-radius: var(--ec-radius, 12px); }

/* The ink wash covers the whole card, so it has to carry the same corner or it
   would square off the card's own as a card is buried. */
.ec-custom-make__step::after { border-radius: inherit; }

/* =============================================================================
   Deck mechanics, shared by both compositions
   -----------------------------------------------------------------------------
   The deal itself is the same on a phone as on a desktop — only its geometry
   differs, and that lives in the `--ec-stack-*` values each breakpoint sets.
   Keeping the transform in one place means the two compositions can never
   drift into animating differently.
   ============================================================================= */

html.ec-custom-stack .ec-custom-make__step {
	/* Declared with the transform that consumes them, not per breakpoint. An
	   undefined custom property makes the whole calc() invalid, which drops the
	   transform entirely and leaves the card sitting at its undealt position —
	   so these defaults are what guarantee a card is off-stage until the script
	   has had a frame to place it. */
	--ec-stack-t: 0;
	--ec-stack-d: 0;

	box-shadow: 0 -1px 0 rgba(255, 252, 244, .5), 0 26px 64px rgba(39, 32, 24, .3);
	transform:
		translate3d(0, calc(var(--ec-stack-enter) * (1 - var(--ec-stack-t)) - var(--ec-stack-shift) * var(--ec-stack-d)), 0)
		scale(calc(1 - var(--ec-stack-scale) * var(--ec-stack-d)));
}

/* Only the cards actually in play are handed to the compositor, and only while
   they are in play. Promoting all seven at once is enough surface to make some
   GPUs drop the layer entirely; promoting none means every frame of the deal
   repaints a viewport-sized card and its photograph. The three or four that can
   be seen is the number that keeps the frame budget. custom-make.js decides
   which, on the cheap: see STACK_VISIBLE_DEPTH. */
html.ec-custom-stack .ec-custom-make__step.is-live { will-change: transform; }

/* Pushed far enough back to sit above the stage entirely, behind the slivers of
   the cards in front. Nothing of it can reach the screen, so it is taken out of
   rendering rather than painted and then clipped. */
html.ec-custom-stack .ec-custom-make__step.is-buried {
	visibility: hidden;
	will-change: auto;
}

/* The ink wash that deepens as a card is covered — a pseudo-element rather than
   an opacity change on the card itself, so the text underneath never fades
   mid-read while the card is still the layer being looked at. The wash is
   capped, or the bottom of a seven-card pile would go black. */
.ec-custom-make__step::after {
	content: '';
	position: absolute;
	z-index: 2;
	inset: 0;
	background: var(--custom-ink);
	opacity: 0;
	pointer-events: none;
}

/* Driven by the quantised `--ec-stack-shade` rather than the continuous
   `--ec-stack-d`: this surface covers the whole card, so every change to it
   repaints the card. Stepping it changes the wash a handful of times per card
   instead of sixty times a second, and at these opacities the steps are not
   perceptible. */
html.ec-custom-stack .ec-custom-make__step::after {
	opacity: min(.34, calc(var(--ec-stack-shade, 0) * .13));
}

/* =============================================================================
   What happens inside a card as it is dealt
   -----------------------------------------------------------------------------
   The deal moves the card; this moves what is on it. Both run off the same
   `--ec-stack-t` the script already publishes per card — 0 while the card is
   below the fold, 1 once it is at the front — so the interior is driven by the
   scroll position itself and needs no timers, no transitions and no second
   animation to stay in step with the card carrying it.

   The four parts arrive in sequence. Each remaps that one number into its own
   window, so the photograph is already settling while the heading is still
   rising and the paragraph has not started: `(t - start) * rate`, clamped.
   ============================================================================= */

html.ec-custom-stack .ec-custom-make__step {
	--ec-in-media: clamp(0, calc(var(--ec-stack-t) * 1.15), 1);
	--ec-in-tab:   clamp(0, calc((var(--ec-stack-t) - .14) * 3.4), 1);
	--ec-in-title: clamp(0, calc((var(--ec-stack-t) - .30) * 2.6), 1);
	--ec-in-body:  clamp(0, calc((var(--ec-stack-t) - .46) * 2.6), 1);
}

/* The photograph settles out of a slight overscale rather than arriving flat.
   Transform only — scaling the element would relayout, and animating a filter
   or a width would repaint the bitmap on every frame. */
html.ec-custom-stack .ec-custom-make__step-image img {
	transform: scale(calc(1.09 - .09 * var(--ec-in-media)));
	/* The 1.1s ease this carries for the hover zoom would fight a value being
	   rewritten every frame, smoothing an already-smooth motion into lag. */
	transition: none;
}

/* The hover zoom belongs to the flat timeline, where a card sat still long
   enough to be pointed at. In the deck it would seize the same transform the
   deal is driving. */
html.ec-custom-stack .ec-custom-make__step:hover .ec-custom-make__step-image img {
	transform: scale(calc(1.09 - .09 * var(--ec-in-media)));
}

html.ec-custom-stack .ec-custom-make__step-number {
	opacity: var(--ec-in-tab);
	transform: translateY(calc((1 - var(--ec-in-tab)) * -100%));
}

html.ec-custom-stack .ec-custom-make__step-copy h3 {
	opacity: var(--ec-in-title);
	transform: translateY(calc((1 - var(--ec-in-title)) * 20px));
}

html.ec-custom-stack .ec-custom-make__step-copy > p:last-child {
	opacity: var(--ec-in-body);
	transform: translateY(calc((1 - var(--ec-in-body)) * 16px));
}

/* Nothing inside a card is worth animating once the card is only a sliver of
   edge behind the next one, and the interior is what costs paint. */
html.ec-custom-stack .ec-custom-make__step.is-buried :is(img, h3, p) {
	transform: none;
	opacity: 1;
}

/* =============================================================================
   The same arrival, for the cards that never get dealt
   -----------------------------------------------------------------------------
   The deck needs vertical room, so it is not armed on a window too short for
   it — a phone turned on its side, for instance. Those get the plain column
   instead, and the card interior arrives there the same way. What differs is
   only what drives it: the deck has a per-card progress to animate against, a
   column has only "this card is on screen now", so the stagger is carried by
   transition delays rather than remapped from scroll.

   Scoped to `html.js` so that with no JavaScript at all — where `is-visible` is
   never set and nothing would ever arrive — the content is simply there.
   ============================================================================= */

html.js:not(.ec-custom-stack) .ec-custom-make__step-image img {
	transform: scale(1.08);
	transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

html.js:not(.ec-custom-stack) .ec-custom-make__step.is-visible .ec-custom-make__step-image img {
	transform: scale(1);
}

html.js:not(.ec-custom-stack) .ec-custom-make__step-number {
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}

html.js:not(.ec-custom-stack) .ec-custom-make__step.is-visible .ec-custom-make__step-number {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .08s;
}

html.js:not(.ec-custom-stack) .ec-custom-make__step-copy h3 {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .55s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

html.js:not(.ec-custom-stack) .ec-custom-make__step.is-visible .ec-custom-make__step-copy h3 {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .2s;
}

html.js:not(.ec-custom-stack) .ec-custom-make__step-copy > p:last-child {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .55s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

html.js:not(.ec-custom-stack) .ec-custom-make__step.is-visible .ec-custom-make__step-copy > p:last-child {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .32s;
}

/* Nothing here should hide content from someone who asked for less motion: the
   script reveals every card up front in that case, and these end states are
   what it reveals them to. */
@media (prefers-reduced-motion: reduce) {
	html.js:not(.ec-custom-stack) :is(
		.ec-custom-make__step-image img,
		.ec-custom-make__step-number,
		.ec-custom-make__step-copy h3,
		.ec-custom-make__step-copy > p:last-child
	) {
		opacity: 1;
		transform: none;
	}
}

/* =============================================================================
   The deck on a phone
   -----------------------------------------------------------------------------
   Same deal, portrait geometry: the card is taller than it is wide, the
   photograph sits above the copy rather than beside it, and the pile is
   shorter and shallower — there is far less headroom to spend above the front
   card.

   The scroll per card is shortened too. A thumb covers ground much faster than
   a wheel does, and seven cards at the desktop's 1.12 viewports each would
   make the section feel stuck.
   ============================================================================= */

@media (max-width: 760px) {
	.ec-custom-make__timeline {
		--ec-stack-step: 88svh;
		--ec-stack-enter: 116%;
		--ec-stack-shift: 6%;
		--ec-stack-scale: .016;
		--ec-stack-top: var(--custom-stack-top-mobile, 96px);
	}

	html.ec-custom-stack .ec-custom-make__journey { padding-inline: 12px; }

	html.ec-custom-stack .ec-custom-make__track {
		display: block;
		position: relative;
		height: calc(100svh - var(--ec-stack-top) + var(--ec-stack-count) * var(--ec-stack-step));
	}

	html.ec-custom-stack .ec-custom-make__stage {
		display: block;
		position: sticky;
		top: var(--ec-stack-top);
		height: calc(100svh - var(--ec-stack-top));
		overflow: hidden;
	}

	html.ec-custom-stack .ec-custom-make__deck {
		display: block;
		position: absolute;
		right: 0;
		bottom: 28px;
		left: 0;
		height: calc(100% - 118px);
	}

	/* The card keeps the phone's stacked composition — photograph over copy —
	   and simply fills the box it is dealt into. */
	html.ec-custom-stack .ec-custom-make__step {
		display: flex;
		flex-direction: column;
		position: absolute;
		inset: 0;
		z-index: calc(var(--ec-stack-index) + 1);
		min-height: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
		isolation: isolate;
	}

	/* The card divides in two: the photograph takes the top half, the copy the
	   bottom. A fixed half rather than "whatever is left" — the seven steps
	   carry different amounts of text, and letting each card find its own
	   split made the photograph jump size from card to card as the deck was
	   dealt, which the eye reads as the image resizing rather than the deck
	   advancing. Equal halves hold still. */
	html.ec-custom-stack .ec-custom-make__step-image {
		flex: 0 0 50%;
		width: 100%;
		height: 50%;
		/* Without this a flex item refuses to shrink below its content, and a
		   tall photograph would push the copy off the bottom of the card. */
		min-height: 0;
		aspect-ratio: auto;
		transform: none;
	}

	/* The photograph is cropped to its centre by the `object-fit: cover` it
	   already carries, so halving its box shows the middle of the picture
	   rather than scaling the whole of it down. */
	html.ec-custom-stack .ec-custom-make__step-image img { object-position: 50% 50%; }

	/* The copy centres in its half instead of sitting at the top of it, so a
	   short step and a long one are composed the same way. */
	html.ec-custom-stack .ec-custom-make__step-copy {
		display: flex;
		flex: 0 0 50%;
		flex-direction: column;
		justify-content: center;
		height: 50%;
		min-height: 0;
		padding: 20px 18px 22px !important;
	}

	html.ec-custom-stack .ec-custom-make__step-copy h3 { margin: 0 0 10px; font-size: clamp(26px, 7vw, 34px); }
	html.ec-custom-stack .ec-custom-make__step-copy > p:last-child { font-size: 14px; line-height: 1.55; }

	html.ec-custom-stack .ec-custom-make__rail {
		display: flex;
		position: absolute;
		z-index: 4;
		bottom: 10px;
		left: 50%;
		gap: 7px;
		margin: 0;
		transform: translateX(-50%);
		pointer-events: none;
	}

	html.ec-custom-stack .ec-custom-make__rail-step i { width: 14px; }
}

/* =============================================================================
   The deck on a short phone
   -----------------------------------------------------------------------------
   An SE- or 8-sized handset leaves about 553px of usable height, and the
   masthead takes 106px of that before the deck starts. The deal still runs
   there, but every gap it can spare has to go back to the card: the headroom
   above the pile, the gap under it, and the type inside all come down.

   The push-back per card shrinks with them. 6% of a short card is a sliver too
   thin to read as a separate sheet, so it goes up proportionally instead.
   ============================================================================= */

@media (max-width: 760px) and (max-height: 700px) {
	.ec-custom-make__timeline {
		--ec-stack-step: 84svh;
		--ec-stack-shift: 7.5%;
	}

	html.ec-custom-stack .ec-custom-make__deck {
		bottom: 16px;
		height: calc(100% - 64px);
	}

	html.ec-custom-stack .ec-custom-make__step-copy { padding: 14px 16px 16px !important; }
	html.ec-custom-stack .ec-custom-make__step-copy h3 { margin: 0 0 7px; font-size: clamp(22px, 6vw, 28px); }
	html.ec-custom-stack .ec-custom-make__step-copy > p:last-child { font-size: 13px; line-height: 1.5; }
	html.ec-custom-stack .ec-custom-make__step-number { padding: 9px 13px; }
	html.ec-custom-stack .ec-custom-make__rail { bottom: 5px; }
}

@media (min-width: 761px) and (prefers-reduced-motion: reduce) {
	/* A deal is motion the visitor did not ask for. The cards keep their
	   surfaces and their order and simply scroll by — which is what the
	   unarmed `display: contents` fallback above already produces. */
	.ec-custom-make__step-image,
	.ec-custom-make__step-copy { transform: none; }
}


/* =============================================================================
   CUSTOM MAKE — personalised embroidery & print
   -----------------------------------------------------------------------------
   The long page around the scroll-stack deck and the request form. Banners carry
   the page; the sample photographs are real pieces from the collections. Uses
   the page's own palette: ink, paper, brass and moss.
   ============================================================================= */

.ec-custom-make--personal {
	--cm-ink: #1d1914;
	--cm-card: #efe4cc;
	--cm-line: rgba(39, 32, 24, .14);
	--cm-muted: rgba(39, 32, 24, .66);
	--cm-radius: 14px;
	--cm-gutter: max(24px, calc((100vw - 1320px) / 2));
	background: var(--custom-paper);
	overflow-x: clip;
}

/* Shared: section heading, buttons, links, reveal ---------------------------- */
.ec-cm-head { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; }
.ec-cm-head h2 {
	margin: 18px 0 0;
	color: var(--custom-ink);
	font: 400 clamp(38px, 4.8vw, 76px) / .98 var(--ec-font-display);
	letter-spacing: -.035em;
	text-wrap: balance;
}
.ec-cm-head--split {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 32px;
	max-width: none;
	text-align: left;
}
.ec-cm-head--split > p { max-width: 42ch; margin: 0; color: var(--cm-muted); font: 400 16px / 1.65 var(--ec-font-text); }

.ec-cm-button {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 52px;
	padding: 0 28px;
	border: 1px solid var(--custom-brass);
	border-radius: 999px;
	background: var(--custom-brass);
	color: var(--cm-ink);
	font: 600 12px / 1 var(--ec-font-text);
	letter-spacing: .14em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, gap .35s cubic-bezier(.22, 1, .36, 1);
}
.ec-cm-button:hover,
.ec-cm-button:focus-visible { gap: 20px; background: transparent; color: var(--custom-brass); }
.ec-cm-button--light { border-color: var(--custom-paper); background: var(--custom-paper); }
.ec-cm-button--light:hover,
.ec-cm-button--light:focus-visible { color: var(--custom-paper); }

.ec-cm-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 6px;
	border-bottom: 1px solid currentColor;
	color: inherit;
	font: 500 12px / 1 var(--ec-font-text);
	letter-spacing: .14em;
	text-decoration: none;
	text-transform: uppercase;
	transition: gap .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
}
.ec-cm-link:hover,
.ec-cm-link:focus-visible { gap: 18px; opacity: .8; }

html.ec-cm-reveal-ready [data-cm-reveal] {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
html.ec-cm-reveal-ready [data-cm-reveal].is-in { opacity: 1; transform: none; }

/* 01 · Hero ------------------------------------------------------------------ */
.ec-cm-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	min-height: min(920px, calc(100svh - 80px));
	background: var(--cm-ink);
	color: var(--custom-paper);
}
.ec-cm-hero__copy {
	display: grid;
	align-content: center;
	justify-items: start;
	padding: clamp(56px, 7vw, 120px) clamp(32px, 6vw, 110px) clamp(56px, 7vw, 120px) var(--cm-gutter);
}
.ec-cm-hero h1 {
	max-width: 11ch;
	margin: 22px 0 0;
	font: 400 clamp(52px, 6.4vw, 112px) / .94 var(--ec-font-display);
	letter-spacing: -.045em;
}
.ec-cm-hero__lede {
	max-width: 40ch;
	margin: 28px 0 0;
	color: rgba(248, 239, 217, .72);
	font: 400 clamp(16px, 1.25vw, 19px) / 1.65 var(--ec-font-text);
}
.ec-cm-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin: 40px 0 0; }
.ec-cm-hero__actions .ec-cm-link { color: var(--custom-paper); }
.ec-cm-hero__media { position: relative; overflow: hidden; background: #3a3128; }
.ec-cm-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
}

/* 02 · Ticker ---------------------------------------------------------------- */
.ec-cm-ticker { overflow: hidden; border-block: 1px solid rgba(201, 159, 77, .35); background: var(--cm-ink); }
.ec-cm-ticker__track {
	display: flex;
	width: max-content;
	align-items: center;
	gap: 34px;
	padding: 22px 0;
	animation: ec-cm-ticker 42s linear infinite;
}
.ec-cm-ticker span {
	color: var(--custom-paper);
	font: 400 clamp(22px, 2.2vw, 34px) / 1 var(--ec-font-display);
	letter-spacing: -.01em;
	white-space: nowrap;
}
.ec-cm-ticker i { color: var(--custom-brass); font-size: 14px; font-style: normal; }
@keyframes ec-cm-ticker { to { transform: translate3d(-50%, 0, 0); } }

/* 03 · Two techniques -------------------------------------------------------- */
.ec-cm-techniques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--cm-ink); }
.ec-cm-technique {
	position: relative;
	display: grid;
	align-content: end;
	min-height: min(960px, 92svh);
	overflow: hidden;
	isolation: isolate;
	color: var(--custom-paper);
}
.ec-cm-technique > img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	transition: transform 1.6s cubic-bezier(.22, 1, .36, 1);
}
.ec-cm-technique:hover > img { transform: scale(1.03); }
.ec-cm-technique::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: '';
	background: linear-gradient(0deg, rgba(20, 17, 13, .82), rgba(20, 17, 13, .1) 58%, rgba(20, 17, 13, .05));
}
.ec-cm-technique__copy { display: grid; justify-items: start; gap: 16px; padding: clamp(32px, 4.4vw, 72px); }
.ec-cm-technique h3 { margin: 0; font: 400 clamp(56px, 6.6vw, 112px) / .92 var(--ec-font-display); letter-spacing: -.045em; }
.ec-cm-technique__copy > p:not(.ec-custom-make__eyebrow) { max-width: 38ch; margin: 0; color: rgba(248, 239, 217, .8); font: 400 16px / 1.65 var(--ec-font-text); }
.ec-cm-technique .ec-cm-link { margin-top: 10px; color: var(--custom-paper); }

/* 04 · Ideas ----------------------------------------------------------------- */
.ec-cm-ideas { padding: clamp(80px, 10vw, 160px) var(--cm-gutter); }
.ec-cm-ideas__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 20px);
}
.ec-cm-idea {
	position: relative;
	display: grid;
	align-content: end;
	gap: 10px;
	min-height: 260px;
	padding: clamp(22px, 2.2vw, 32px);
	overflow: hidden;
	border-radius: var(--cm-radius);
	background: var(--cm-card);
	color: var(--custom-ink);
	text-decoration: none;
}
.ec-cm-idea strong { font: 400 clamp(24px, 2.2vw, 34px) / 1.02 var(--ec-font-display); letter-spacing: -.02em; }
.ec-cm-idea > span:last-child,
.ec-cm-idea__copy > span:last-child { color: var(--cm-muted); font: 400 15px / 1.55 var(--ec-font-text); }
.ec-cm-idea__best {
	justify-self: start;
	padding: 6px 11px;
	border: 1px solid rgba(201, 159, 77, .55);
	border-radius: 999px;
	color: #8a6a2c;
	font: 600 10px / 1 var(--ec-font-text);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.ec-cm-idea--photo { grid-column: span 2; min-height: min(620px, 70svh); padding: 0; background: #3a3128; color: var(--custom-paper); isolation: isolate; }
.ec-cm-idea--photo img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	transition: transform 1.6s cubic-bezier(.22, 1, .36, 1);
}
.ec-cm-idea--photo:hover img,
.ec-cm-idea--photo:focus-visible img { transform: scale(1.04); }
.ec-cm-idea--photo::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: '';
	background: linear-gradient(0deg, rgba(20, 17, 13, .78), rgba(20, 17, 13, 0) 55%);
}
.ec-cm-idea__copy { display: grid; justify-items: start; gap: 10px; padding: clamp(24px, 3vw, 44px); }
.ec-cm-idea--photo strong { font-size: clamp(34px, 3.4vw, 54px); }
.ec-cm-idea--photo .ec-cm-idea__copy > span:last-child { color: rgba(248, 239, 217, .8); }
.ec-cm-idea--photo .ec-cm-idea__best { border-color: rgba(248, 239, 217, .5); color: var(--custom-paper); }

/* 05 · Try it ---------------------------------------------------------------- */
.ec-cm-try { padding: clamp(80px, 10vw, 150px) var(--cm-gutter); background: var(--cm-ink); color: var(--custom-paper); }
.ec-cm-try__inner {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(40px, 6vw, 110px);
}
.ec-cm-try h2 { margin: 18px 0 0; font: 400 clamp(40px, 4.6vw, 72px) / .98 var(--ec-font-display); letter-spacing: -.035em; }
.ec-cm-try__lede { max-width: 44ch; margin: 20px 0 34px; color: rgba(248, 239, 217, .68); font: 400 16px / 1.65 var(--ec-font-text); }
.ec-cm-try__field { display: grid; gap: 10px; margin: 0 0 26px; }
.ec-cm-try__field label,
.ec-cm-try__group legend {
	color: rgba(248, 239, 217, .6);
	font: 600 10px / 1.2 var(--ec-font-text);
	letter-spacing: .16em;
	text-transform: uppercase;
}
.ec-cm-try__field input {
	width: 100%;
	padding: 10px 0 12px;
	border: 0;
	border-bottom: 1px solid rgba(248, 239, 217, .35);
	border-radius: 0;
	background: transparent;
	color: var(--custom-paper);
	font: 400 clamp(26px, 2.6vw, 38px) / 1.1 var(--ec-font-display);
	outline: 0;
}
.ec-cm-try__field input:focus { border-bottom-color: var(--custom-brass); }
.ec-cm-try__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; padding: 0; border: 0; }
.ec-cm-try__group legend { width: 100%; margin-bottom: 12px; padding: 0; float: left; }
.ec-cm-try__group label { position: relative; cursor: pointer; }
.ec-cm-try__group input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ec-cm-try__group label > span:not(.ec-cm-swatch) {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid rgba(248, 239, 217, .25);
	border-radius: 999px;
	color: rgba(248, 239, 217, .85);
	font: 500 14px / 1 var(--ec-font-text);
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ec-cm-try__group input:checked + span:not(.ec-cm-swatch) { border-color: var(--custom-paper); background: var(--custom-paper); color: var(--cm-ink); }
.ec-cm-try__group input:focus-visible + span { outline: 2px solid var(--custom-brass); outline-offset: 3px; }
.ec-cm-font-script { font-family: 'Segoe Script', 'Brush Script MT', 'Snell Roundhand', cursive !important; font-size: 16px !important; }
.ec-cm-font-serif { font-family: Georgia, 'Times New Roman', serif !important; font-size: 16px !important; }
.ec-cm-font-block { font-family: 'Arial Black', Arial, sans-serif !important; font-weight: 900 !important; letter-spacing: .04em; text-transform: uppercase; }
.ec-cm-swatch {
	display: block;
	width: 36px;
	height: 36px;
	border: 2px solid rgba(248, 239, 217, .2);
	border-radius: 50%;
	background: var(--swatch);
	box-shadow: inset 0 0 0 3px var(--cm-ink);
	transition: border-color .2s ease;
}
.ec-cm-try__group input:checked + .ec-cm-swatch { border-color: var(--custom-brass); }
.ec-cm-try__controls .ec-cm-button { margin-top: 12px; }

.ec-cm-try__stage {
	display: grid;
	place-items: center;
	gap: 16px;
	margin: 0;
	padding: clamp(28px, 4vw, 64px);
	border-radius: calc(var(--cm-radius) + 6px);
	background: radial-gradient(120% 90% at 50% 40%, #3a3128 0%, #231e18 70%);
}
.ec-cm-tee { width: min(100%, 520px); height: auto; overflow: visible; }
.ec-cm-tee__body { fill: #f4f1ea; stroke: rgba(0, 0, 0, .18); stroke-width: 1.5; transition: fill .3s ease; }
.ec-cm-tee__seam { fill: none; stroke: rgba(0, 0, 0, .16); stroke-width: 2; }
.ec-cm-tee__text { dominant-baseline: middle; transition: fill .25s ease; }
.ec-cm-try__stage figcaption { color: rgba(248, 239, 217, .55); font: 500 11px / 1.4 var(--ec-font-text); letter-spacing: .14em; text-transform: uppercase; }

/* 07 · Samples --------------------------------------------------------------- */
.ec-cm-samples { padding: clamp(80px, 10vw, 160px) var(--cm-gutter); }
.ec-cm-samples__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: clamp(220px, 20vw, 320px);
	gap: clamp(12px, 1.4vw, 20px);
}
.ec-cm-sample {
	position: relative;
	display: grid;
	align-content: end;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--cm-radius);
	background: #d9cdb4;
	color: var(--custom-paper);
	text-decoration: none;
}
.ec-cm-sample img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.6s cubic-bezier(.22, 1, .36, 1);
}
.ec-cm-sample::after {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: '';
	background: linear-gradient(0deg, rgba(20, 17, 13, .6), rgba(20, 17, 13, 0) 40%);
	opacity: .9;
}
.ec-cm-sample:hover img,
.ec-cm-sample:focus-visible img { transform: scale(1.05); }
.ec-cm-sample > span { display: flex; align-items: center; gap: 10px; padding: 18px 20px; font: 500 14px / 1.3 var(--ec-font-text); }
.ec-cm-sample i { font-style: normal; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.ec-cm-sample:hover i { transform: translateX(4px); }
.ec-cm-sample--1 { grid-column: span 5; grid-row: span 2; }
.ec-cm-sample--2 { grid-column: span 4; }
.ec-cm-sample--3 { grid-column: span 3; grid-row: span 2; }
.ec-cm-sample--4 { grid-column: span 4; }
.ec-cm-sample--5 { grid-column: span 6; }
.ec-cm-sample--6 { grid-column: span 6; }

/* 08 · Compare --------------------------------------------------------------- */
.ec-cm-compare { padding: clamp(80px, 10vw, 150px) var(--cm-gutter); background: var(--cm-card); }
.ec-cm-compare__table { max-width: 1080px; margin: 0 auto; border-top: 1px solid var(--cm-line); }
.ec-cm-compare__row {
	display: grid;
	grid-template-columns: minmax(140px, .7fr) repeat(2, minmax(0, 1.15fr));
	gap: clamp(16px, 3vw, 48px);
	padding: 22px 0;
	border-bottom: 1px solid var(--cm-line);
	color: var(--custom-ink);
	font: 400 16px / 1.55 var(--ec-font-text);
}
.ec-cm-compare__row [role='rowheader'] { color: var(--cm-muted); font: 600 11px / 1.9 var(--ec-font-text); letter-spacing: .14em; text-transform: uppercase; }
.ec-cm-compare__row--head { padding: 26px 0; }
.ec-cm-compare__row--head [role='columnheader'] { font: 400 clamp(26px, 2.6vw, 40px) / 1 var(--ec-font-display); letter-spacing: -.02em; }
.ec-cm-compare__note { max-width: 1080px; margin: 28px auto 0; color: var(--cm-muted); font: 400 15px / 1.6 var(--ec-font-text); }

/* 09 · FAQ ------------------------------------------------------------------- */
.ec-cm-faq { padding: clamp(80px, 10vw, 150px) var(--cm-gutter); }
.ec-cm-faq__list { max-width: 920px; margin: 0 auto; border-top: 1px solid var(--cm-line); }
.ec-cm-faq__item { border-bottom: 1px solid var(--cm-line); }
.ec-cm-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 0;
	color: var(--custom-ink);
	font: 400 clamp(20px, 1.8vw, 26px) / 1.25 var(--ec-font-display);
	letter-spacing: -.01em;
	list-style: none;
	cursor: pointer;
}
.ec-cm-faq__item summary::-webkit-details-marker { display: none; }
.ec-cm-faq__item summary i { position: relative; flex: 0 0 18px; width: 18px; height: 18px; }
.ec-cm-faq__item summary i::before,
.ec-cm-faq__item summary i::after {
	position: absolute;
	top: 50%;
	left: 0;
	width: 18px;
	height: 1.5px;
	content: '';
	background: var(--custom-brass);
	transition: transform .3s ease;
}
.ec-cm-faq__item summary i::after { transform: rotate(90deg); }
.ec-cm-faq__item[open] summary i::after { transform: rotate(0deg); }
.ec-cm-faq__item p { max-width: 70ch; margin: 0; padding: 0 0 28px; color: var(--cm-muted); font: 400 16px / 1.7 var(--ec-font-text); }

/* 10 · Banner ---------------------------------------------------------------- */
.ec-cm-banner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: min(860px, 88svh);
	background: var(--cm-ink);
	color: var(--custom-paper);
}
.ec-cm-banner > img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ec-cm-banner__copy { display: grid; align-content: center; justify-items: start; gap: 22px; padding: clamp(48px, 7vw, 120px); }
.ec-cm-banner h2 { max-width: 12ch; margin: 0; font: 400 clamp(46px, 5.6vw, 92px) / .95 var(--ec-font-display); letter-spacing: -.04em; }
.ec-cm-banner .ec-cm-button { margin-top: 12px; }

/* The request form sits straight after the dark banner. */
.ec-custom-make--personal .ec-custom-make__cta { border-top: 1px solid rgba(201, 159, 77, .22); }
.ec-cm-upload input[type='file'] {
	padding: 14px 0;
	color: rgba(238, 235, 227, .75);
	font: 400 14px / 1.4 var(--ec-font-text);
}
.ec-cm-upload input[type='file']::file-selector-button {
	margin-right: 16px;
	padding: 10px 18px;
	border: 1px solid rgba(201, 159, 77, .6);
	border-radius: 999px;
	background: transparent;
	color: var(--custom-paper);
	font: 600 11px / 1 var(--ec-font-text);
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.ec-cm-ticker__track { animation: none; }
	.ec-cm-technique > img,
	.ec-cm-idea--photo img,
	.ec-cm-sample img,
	.ec-cm-button,
	.ec-cm-link { transition: none; }
}

/* Tablet --------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.ec-cm-ideas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ec-cm-idea--photo { grid-column: span 1; min-height: 520px; }
	.ec-cm-try__inner { grid-template-columns: 1fr; }
	.ec-cm-try__stage { order: -1; }
	.ec-cm-samples__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 240px; }
	.ec-cm-sample--1,
	.ec-cm-sample--3 { grid-column: span 3; grid-row: span 2; }
	.ec-cm-sample--2,
	.ec-cm-sample--4,
	.ec-cm-sample--5,
	.ec-cm-sample--6 { grid-column: span 3; grid-row: span 1; }
}

/* Phone ---------------------------------------------------------------------- */
@media (max-width: 760px) {
	.ec-custom-make--personal { --cm-gutter: 20px; }

	.ec-cm-hero { grid-template-columns: 1fr; min-height: 0; }
	.ec-cm-hero__media { aspect-ratio: 4 / 5; max-height: 72svh; }
	.ec-cm-hero__copy { padding: 40px 20px 52px; }
	.ec-cm-hero h1 { font-size: clamp(42px, 12vw, 56px); }
	.ec-cm-hero__actions { gap: 18px 24px; margin-top: 30px; }

	.ec-cm-ticker__track { gap: 22px; padding: 16px 0; animation-duration: 30s; }

	.ec-cm-techniques { grid-template-columns: 1fr; }
	.ec-cm-technique { min-height: 0; aspect-ratio: 4 / 5; }
	.ec-cm-technique__copy { gap: 12px; padding: 28px 20px; }
	.ec-cm-technique h3 { font-size: clamp(46px, 13vw, 60px); }

	.ec-cm-head { margin-bottom: 32px; }
	.ec-cm-head h2 { font-size: clamp(32px, 9vw, 42px); }
	.ec-cm-head--split { display: grid; gap: 16px; }

	.ec-cm-ideas__grid { grid-template-columns: 1fr; }
	.ec-cm-idea { min-height: 0; }
	.ec-cm-idea--photo { min-height: 0; aspect-ratio: 4 / 5; }

	.ec-cm-try h2 { font-size: clamp(34px, 9.5vw, 44px); }
	.ec-cm-try__stage { padding: 20px; }
	.ec-cm-swatch { width: 40px; height: 40px; }

	.ec-cm-samples__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
	.ec-cm-sample--1,
	.ec-cm-sample--3 { grid-column: span 1; grid-row: span 2; }
	.ec-cm-sample--2,
	.ec-cm-sample--4 { grid-column: span 1; grid-row: span 1; }
	.ec-cm-sample--5,
	.ec-cm-sample--6 { grid-column: span 2; grid-row: span 1; }
	.ec-cm-sample > span { padding: 14px; font-size: 13px; }

	.ec-cm-compare__row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
	.ec-cm-compare__row--head { display: none; }
	.ec-cm-compare__row [role='cell']::before {
		display: block;
		margin-bottom: 2px;
		color: #8a6a2c;
		content: attr(data-label);
		font: 600 10px / 1.6 var(--ec-font-text);
		letter-spacing: .14em;
		text-transform: uppercase;
	}

	.ec-cm-faq__item summary { padding: 22px 0; font-size: 19px; }

	.ec-cm-banner { grid-template-columns: 1fr; min-height: 0; }
	.ec-cm-banner > img { aspect-ratio: 4 / 5; max-height: 70svh; }
	.ec-cm-banner__copy { padding: 44px 20px 56px; }
	.ec-cm-banner h2 { font-size: clamp(38px, 11vw, 50px); }
}

/* Titles on the photo tiles must stay light: a broader text colour rule on the
   page was resolving them to the muted ink, unreadable on the photograph. */
.ec-custom-make--personal .ec-cm-idea strong { color: var(--custom-ink); }
.ec-custom-make--personal .ec-cm-idea--photo strong { color: var(--custom-paper); }

/* The spark and gown icons carry a hard-coded plum stroke, drawn for light
   grounds; on the dark request panel they disappeared. Follow the text colour. */
.ec-custom-make__cta-assurances svg[stroke]:not([stroke='none']),
.ec-custom-make__cta-assurances svg [stroke]:not([stroke='none']) { stroke: currentColor; }
.ec-custom-make__cta-assurances svg [fill]:not([fill='none']) { fill: currentColor; }

@media (max-width: 760px) {
	/* The phone crop puts the copy over the busiest part of each photograph;
	   a deeper wash keeps the small label and the paragraph readable. */
	.ec-cm-technique::after { background: linear-gradient(0deg, rgba(20, 17, 13, .9), rgba(20, 17, 13, .55) 45%, rgba(20, 17, 13, .05) 75%); }
	.ec-cm-technique .ec-custom-make__eyebrow { color: #e0bd72; }
}