/**
 * Engineers Projects Manager — front-end styles.
 *
 * Colours come from the theme when it exposes them; the fallbacks match the
 * Engineers Developments palette so nothing looks off if a variable is missing.
 * Layout options are plain classes: is-row / is-cards / cols-4 / is-carousel …
 */

.edp-project,
.edp-archive,
.edp-el,
.edp-unit-modal,
.edp-lightbox,
.edp-pdf {
	--edp-gold: #b0803a;
	--edp-accent: var(--edp-accent-set, var(--primary, var(--e-global-color-primary, var(--edp-gold))));
	--edp-ink: var(--edp-ink-set, var(--accent, var(--e-global-color-secondary, #16130f)));
	--edp-text: var(--text, #5f5b55);
	--edp-muted: #928d85;
	--edp-line: #e7e2d8;
	--edp-surface: var(--edp-surface-set, #f7f4ee);
	--edp-white: #ffffff;
	--edp-radius: 20px;
	--edp-radius-lg: 26px;
	--edp-width: 1320px;
	--edp-rhythm: clamp(48px, 6vw, 84px);
	--edp-gap: clamp(18px, 2.4vw, 30px);
	color: var(--edp-text);
}

.edp-project *,
.edp-project *::before,
.edp-project *::after,
.edp-archive *,
.edp-archive *::before,
.edp-archive *::after,
.edp-el *,
.edp-el *::before,
.edp-el *::after,
.edp-unit-modal,
.edp-unit-modal *,
.edp-unit-modal *::before,
.edp-unit-modal *::after,
.edp-lightbox,
.edp-lightbox *,
.edp-lightbox *::before,
.edp-lightbox *::after,
.edp-pdf,
.edp-pdf *,
.edp-pdf *::before,
.edp-pdf *::after {
	box-sizing: border-box;
}

.edp-container {
	width: 100%;
	max-width: var(--edp-width);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 44px);
}

.edp-container-narrow {
	max-width: 760px;
}

.edp-section {
	padding-block: calc(var(--edp-rhythm) * 0.62);
}

.edp-project.has-dividers .edp-body > .edp-section + .edp-section {
	padding-block-start: 0;
}

.edp-project.has-dividers .edp-body > .edp-section + .edp-section > .edp-container {
	border-top: 1px solid var(--edp-line);
	padding-top: calc(var(--edp-rhythm) * 0.62);
}

.edp-section-facts {
	padding-block: calc(var(--edp-rhythm) * 0.45);
}

/* ---------------------------------------------------------------- Typography */

.edp-heading {
	margin: 0;
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.14;
	letter-spacing: 0;
	word-spacing: 0.02em;
	font-weight: 700;
	color: var(--edp-ink);
	font-family: var(--e-global-typography-accent-font-family, inherit);
}

.edp-section-title {
	position: relative;
	margin-bottom: clamp(22px, 3vw, 40px);
}

.edp-section-title .edp-heading {
	position: relative;
	display: inline-block;
	padding-bottom: 14px;
}

.edp-section-title .edp-heading::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	height: 3px;
	width: 100%;
	max-width: 74px;
	border-radius: 999px;
	background: var(--edp-accent);
	transform: scaleX(0);
	transform-origin: inline-start;
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.edp-section-title.is-center .edp-heading::after {
	inset-inline: 0;
	margin-inline: auto;
}

.edp-reveal.is-visible .edp-heading::after,
.edp-section-title:not(.edp-reveal) .edp-heading::after,
.edp-el .edp-heading::after {
	transform: scaleX(1);
}

/* Hero entrance */
@keyframes edp-hero-in {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.edp-hero-tagline,
.edp-hero-title,
.edp-hero .edp-chips,
.edp-hero-actions {
	animation: edp-hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.edp-hero-title {
	animation-delay: 0.08s;
}

.edp-hero .edp-chips {
	animation-delay: 0.16s;
}

.edp-hero-actions {
	animation-delay: 0.24s;
}

.edp-hero-media .edp-hero-img,
.edp-hero-media .edp-hero-video {
	animation: edp-hero-zoom 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes edp-hero-zoom {
	from {
		transform: scale(1.06);
	}
	to {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.edp-hero-tagline,
	.edp-hero-title,
	.edp-hero .edp-chips,
	.edp-hero-actions,
	.edp-hero-media .edp-hero-img,
	.edp-hero-media .edp-hero-video {
		animation: none;
	}

	.edp-section-title .edp-heading::after {
		transform: scaleX(1);
	}
}

.edp-section-title.is-center {
	text-align: center;
}

.edp-kicker {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--edp-muted);
	margin-bottom: 10px;
}

.edp-eyebrow {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--edp-muted);
}

.edp-muted {
	color: var(--edp-muted);
}

.edp-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
}

.edp-link {
	color: var(--edp-ink);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border-bottom: 1px solid var(--edp-accent);
	padding-bottom: 2px;
	background: none;
	border-inline: 0;
	border-block-start: 0;
	cursor: pointer;
}

.edp-link:hover {
	color: var(--edp-accent);
}

/* -------------------------------------------------------------------- Buttons */

.edp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 28px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, filter 0.25s ease;
}

.edp-btn:hover {
	transform: translateY(-2px);
}

.edp-btn-sm {
	padding: 11px 20px;
	font-size: 14px;
}

.edp-btn-block {
	width: 100%;
}

.edp-btn-primary {
	background: var(--edp-accent);
	color: #fff;
}

.edp-btn-primary:hover {
	filter: brightness(1.07);
	color: #fff;
}

.edp-btn-outline {
	border-color: var(--edp-line);
	color: var(--edp-ink);
	background: transparent;
}

/* On the image band the text has to stay readable. */
.edp-hero.is-background .edp-btn-outline,
.edp-hero.is-boxed .edp-btn-outline,
.edp-hero.is-full .edp-btn-outline {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(6px);
}

.edp-hero.is-background .edp-btn-outline:hover,
.edp-hero.is-boxed .edp-btn-outline:hover,
.edp-hero.is-full .edp-btn-outline:hover {
	background: #fff;
	border-color: transparent;
	color: var(--edp-ink);
}

.edp-hero.is-background .edp-btn-quiet,
.edp-hero.is-boxed .edp-btn-quiet,
.edp-hero.is-full .edp-btn-quiet {
	background: #fff;
	color: var(--edp-ink);
}

.edp-btn-outline:hover {
	border-color: var(--edp-accent);
	color: var(--edp-accent);
}

.edp-btn-quiet {
	background: var(--edp-surface);
	color: var(--edp-ink);
}

/* Black until the pointer crosses it, then gold. Written twice so the theme's
   own link colours cannot win on specificity inside the header. */
.edp-btn-dark,
.edp-hero .edp-btn-dark,
.edp-cover-body .edp-btn-dark,
a.edp-btn-dark {
	background: var(--edp-btn-dark, #100e0b);
	border-color: transparent;
	color: #fff;
	backdrop-filter: none;
}

.edp-btn-dark:hover,
.edp-btn-dark:focus-visible,
.edp-hero .edp-btn-dark:hover,
.edp-hero .edp-btn-dark:focus-visible,
.edp-cover-body .edp-btn-dark:hover,
.edp-cover-body .edp-btn-dark:focus-visible,
a.edp-btn-dark:hover,
a.edp-btn-dark:focus-visible {
	background: var(--edp-accent);
	border-color: transparent;
	color: #fff;
}

.edp-btn[disabled] {
	opacity: 0.6;
	pointer-events: none;
}

.edp-arrow {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.edp-round-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: 50%;
	border: 1px solid var(--edp-line);
	background: var(--edp-white);
	color: var(--edp-ink);
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.edp-round-btn:hover {
	transform: translateY(-2px);
}

.edp-round-btn.is-accent {
	background: var(--edp-accent);
	border-color: transparent;
	color: #fff;
}

.edp-pill-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 6px;
	padding-inline-start: 22px;
	border-radius: 999px;
	border: 1px solid var(--edp-line);
	background: var(--edp-white);
	color: var(--edp-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.edp-pill-btn:hover {
	border-color: var(--edp-accent);
}

.edp-badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--edp-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

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

.edp-hero {
	position: relative;
}

.edp-hero.is-title {
	padding-block: clamp(26px, 3.4vw, 46px) 0;
}

.edp-hero-top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(18px, 3vw, 40px);
}

.edp-hero-headline {
	min-width: 0;
	flex: 1 1 420px;
}

.edp-hero.is-boxed .edp-hero-top,
.edp-hero.is-full .edp-hero-top {
	align-items: flex-end;
}

.edp-hero.is-title .edp-hero-frame {
	width: 100%;
	max-width: var(--edp-width);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 44px);
}

.edp-hero.is-title .edp-hero-title {
	color: var(--edp-ink);
}

/* Image behind the title, edge to edge */
.edp-hero.is-background .edp-hero-frame {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(260px, 30vw, 400px);
	overflow: hidden;
	color: #fff;
	background: var(--edp-ink);
}

.edp-hero.is-background .edp-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--edp-width);
	margin-inline: auto;
	padding: clamp(26px, 3.4vw, 46px) clamp(16px, 4vw, 44px);
}

.edp-hero.is-background .edp-hero-media::after {
	background: linear-gradient(to top, rgba(10, 8, 6, 0.86) 0%, rgba(10, 8, 6, 0.46) 55%, rgba(10, 8, 6, 0.2) 100%);
}

.edp-hero.is-background .edp-hero-title {
	font-size: var(--edp-hero-size, clamp(30px, 4.4vw, 52px));
}

.edp-hero.is-boxed .edp-hero-frame,
.edp-hero.is-full .edp-hero-frame {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(58vh, 520px);
	overflow: hidden;
	color: #fff;
	background: var(--edp-ink);
}

.edp-hero.is-boxed {
	padding-block: clamp(24px, 3vw, 44px) 0;
}

.edp-hero.is-boxed .edp-hero-frame {
	max-width: calc(var(--edp-width) - 2 * clamp(16px, 4vw, 44px));
	margin-inline: auto;
	border-radius: var(--edp-radius-lg);
}

.edp-hero.is-full .edp-hero-frame {
	min-height: min(72vh, 640px);
}

.edp-hero-media {
	position: absolute;
	inset: 0;
}

.edp-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 8, 6, 0.82) 0%, rgba(10, 8, 6, 0.34) 52%, rgba(10, 8, 6, 0.1) 100%);
}

.edp-hero-img,
.edp-hero-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.edp-hero-media.is-video .edp-hero-embed {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-height: 100%;
	min-width: 177.78vh;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

.edp-hero-media.is-video .edp-hero-img {
	position: absolute;
	inset: 0;
}

.edp-hero-video-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
}

.edp-video-chip {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 8px 20px 8px 8px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.edp-video-chip:hover {
	background: var(--edp-accent);
	border-color: transparent;
	transform: translateY(-2px);
}

.edp-video-chip-icon {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	flex: 0 0 32px;
}

.edp-video-chip-icon::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent var(--edp-ink);
}

.edp-round-btn.is-glass {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.34);
	color: #fff;
	backdrop-filter: blur(8px);
}

.edp-round-btn.is-glass:hover {
	background: var(--edp-accent);
	border-color: transparent;
}

.edp-hero.is-boxed .edp-hero-inner,
.edp-hero.is-full .edp-hero-inner {
	position: relative;
	z-index: 2;
	padding: clamp(26px, 4vw, 52px);
	width: 100%;
}

.edp-hero.is-full .edp-hero-inner {
	max-width: var(--edp-width);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 44px);
}

.edp-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	margin-bottom: 16px;
	color: rgba(255, 255, 255, 0.74);
}

.edp-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.edp-breadcrumb a:hover {
	color: #fff;
}

.edp-hero-tagline {
	margin: 0 0 10px;
	font-size: clamp(14px, 1.5vw, 17px);
	font-weight: 500;
	color: var(--edp-accent);
}

.edp-hero-title {
	margin: 0;
	font-size: var(--edp-hero-size, clamp(32px, 4.8vw, 58px));
	line-height: 1.08;
	letter-spacing: 0;
	word-spacing: 0.02em;
	font-weight: var(--edp-hero-weight, 700);
	color: #fff;
	font-family: var(--e-global-typography-accent-font-family, inherit);
}

/* The project logo standing where the name would be written. The heading stays
   a heading: the name is carried by the alt text. */
.edp-hero-title.has-logo,
.edp-cover-title.has-logo {
	display: block;
	line-height: 1;
}

/* Left at a readable size on purpose: should the file ever fail to load, the
   project name in the alt text is written out instead of vanishing. */
.edp-hero-logo {
	display: block;
	width: auto;
	max-width: min(100%, 520px);
	height: var(--edp-logo-h, clamp(64px, 7.4vw, 104px));
	object-fit: contain;
	object-position: left center;
}

[dir="rtl"] .edp-hero-logo {
	object-position: right center;
}

.is-logo-small .edp-hero-logo {
	--edp-logo-h: clamp(44px, 5vw, 70px);
}

.is-logo-large .edp-hero-logo {
	--edp-logo-h: clamp(84px, 10vw, 150px);
	max-width: min(100%, 640px);
}

/* On the plain title header the logo sits on the page background, so it is
   given a little room rather than being flush against the breadcrumb. */
.edp-hero.is-title .edp-hero-title.has-logo {
	padding-block: 6px;
}

.edp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.edp-chip {
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 500;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.26);
	color: #fff;
	backdrop-filter: blur(6px);
}

.edp-hero.is-title .edp-chip {
	background: var(--edp-surface);
	border-color: transparent;
	color: var(--edp-ink);
	backdrop-filter: none;
}

.edp-chip-price,
.edp-hero.is-title .edp-chip-price {
	background: var(--edp-accent);
	border-color: transparent;
	color: #fff;
	font-weight: 600;
}

.edp-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex: 0 0 auto;
	padding-bottom: 4px;
}

.edp-hero.is-title + .edp-body .edp-section-facts {
	padding-block-start: clamp(26px, 3.2vw, 44px);
}

/* ------------------------------------------------------------------ Key facts */

.edp-facts {
	display: grid;
	grid-template-columns: repeat(var(--edp-fact-cols, 4), minmax(0, 1fr));
	row-gap: clamp(16px, 2vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.edp-fact {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	padding: 4px clamp(14px, 1.6vw, 26px);
}

.edp-fact::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 4px;
	width: 1px;
	background: var(--edp-line);
}

/* First cell of every row carries no divider. */
.edp-fact.is-row-start::before {
	display: none;
}

.edp-fact.is-row-start {
	padding-inline-start: 0;
}

.edp-fact-text {
	min-width: 0;
}

.edp-fact-label,
.edp-fact-value {
	overflow-wrap: anywhere;
}

/* Bordered strip variant */
.edp-facts.is-strip {
	border: 1px solid var(--edp-line);
	border-radius: var(--edp-radius);
	overflow: hidden;
	background: var(--edp-white);
	row-gap: 0;
}

.edp-facts.is-strip .edp-fact.is-row-start {
	padding-inline-start: clamp(16px, 1.6vw, 24px);
}

.edp-facts.is-strip .edp-fact {
	padding: 20px clamp(16px, 1.6vw, 24px);
}

.edp-facts.is-strip .edp-fact + .edp-fact::before {
	inset-block: 0;
}

.edp-fact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 50%;
	border: 1px solid var(--edp-line);
	background: var(--edp-white);
	color: var(--edp-ink);
	font-size: 18px;
}

.edp-fact-icon img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.edp-fact-label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--edp-muted);
	margin-bottom: 4px;
}

.edp-fact-value {
	display: block;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--edp-ink);
	line-height: 1.24;
}

.edp-facts.is-cards {
	gap: clamp(12px, 1.6vw, 20px);
}

.edp-facts.is-cards .edp-fact::before {
	display: none;
}

.edp-facts.is-cards .edp-fact {
	padding: 22px;
	background: var(--edp-surface);
	border-radius: var(--edp-radius);
	border-inline-start: 0;
}

.edp-facts.is-cards .edp-fact-icon {
	background: var(--edp-white);
	border-color: transparent;
}

.edp-facts.is-compact {
	gap: 14px 26px;
}

.edp-facts.is-compact .edp-fact {
	padding: 4px 0 4px 16px;
	border-inline-start: 2px solid var(--edp-accent);
}

.edp-facts.is-compact .edp-fact::before {
	display: none;
}

/* ------------------------------------------------------------------- Showcase */

.edp-showcase-video {
	position: relative;
	border-radius: var(--edp-radius-lg);
	overflow: hidden;
	background: var(--edp-ink);
	aspect-ratio: 16 / 9;
	isolation: isolate;
}

.edp-showcase-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.2s ease, filter 0.6s ease;
}

.edp-showcase-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 8, 6, 0.62), rgba(10, 8, 6, 0.16));
	transition: opacity 0.5s ease;
}

.edp-showcase-video:hover .edp-showcase-poster {
	transform: scale(1.03);
}

.edp-showcase-play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	width: 100%;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
	padding: 24px;
}

.edp-play-ring {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(74px, 7vw, 96px);
	height: clamp(74px, 7vw, 96px);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(6px);
	transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-play-ring::before {
	content: "";
	position: absolute;
	inset: -14px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.34);
	animation: edp-pulse 2.8s ease-out infinite;
}

.edp-play-triangle {
	width: 0;
	height: 0;
	margin-inline-start: 6px;
	border-style: solid;
	border-width: 11px 0 11px 19px;
	border-color: transparent transparent transparent #fff;
	transition: border-left-color 0.4s ease;
}

.edp-showcase-play:hover .edp-play-ring {
	background: rgba(255, 255, 255, 0.24);
	border-color: rgba(255, 255, 255, 0.85);
	transform: scale(1.08);
}

.edp-play-text {
	display: grid;
	gap: 4px;
	text-align: center;
}

.edp-play-kicker {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.76);
}

.edp-play-label {
	font-size: clamp(18px, 2vw, 26px);
	font-weight: 700;
	line-height: 1.2;
}

.edp-showcase-frame {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: #000;
}

.edp-showcase-frame iframe,
.edp-showcase-frame video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: cover;
}

.edp-showcase-video.is-playing::after,
.edp-showcase-video.is-playing .edp-showcase-poster {
	opacity: 0;
}

@keyframes edp-pulse {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}
	70% {
		transform: scale(1.35);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.edp-play-ring::before {
		animation: none;
	}
}

.edp-showcase {
	margin: 0;
	position: relative;
	border-radius: var(--edp-radius-lg);
	overflow: hidden;
	cursor: zoom-in;
	background: var(--edp-surface);
}

.edp-showcase img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.7s ease;
}

.edp-showcase:hover img {
	transform: scale(1.02);
}

.edp-showcase-hint {
	position: absolute;
	inset-inline-end: 16px;
	inset-block-end: 16px;
	padding: 8px 15px;
	border-radius: 999px;
	font-size: 12px;
	background: rgba(10, 8, 6, 0.62);
	color: #fff;
}

/* ---------------------------------------------------------- Description split */

.edp-split {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.85fr);
	gap: clamp(28px, 5vw, 76px);
	align-items: start;
}

.edp-split.is-single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 860px;
}

.edp-prose {
	font-size: 16.5px;
	line-height: 1.72;
	color: var(--edp-text);
	overflow-wrap: anywhere;
}

.edp-prose > *:first-child {
	margin-top: 0;
}

.edp-prose > *:last-child {
	margin-bottom: 0;
}

.edp-split-aside {
	display: grid;
	gap: 18px;
}

.edp-split-aside.is-sticky {
	position: sticky;
	top: 110px;
}

.edp-details-title {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--edp-ink);
}

.edp-details {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.edp-detail {
	overflow-wrap: anywhere;
	position: relative;
	padding-inline-start: 16px;
	font-size: 14.5px;
	line-height: 1.6;
}

.edp-detail::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--edp-accent);
}

.edp-detail-label {
	font-weight: 700;
	color: var(--edp-ink);
}

.edp-detail-label::after {
	content: ":";
	padding-inline-end: 4px;
}

/* -------------------------------------------------------------------- Features */

.edp-features {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(16px, 2vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
	--edp-fgap: clamp(16px, 2vw, 24px);
}

.edp-feature {
	flex: 0 1 calc((100% - (var(--edp-fcols, 4) - 1) * var(--edp-fgap)) / var(--edp-fcols, 4) - 1px);
	min-width: 190px;
	max-width: 100%;
}

.edp-features.cols-2 {
	--edp-fcols: 2;
}

.edp-features.cols-3 {
	--edp-fcols: 3;
}

.edp-features.cols-4 {
	--edp-fcols: 4;
}

.edp-feature {
	position: relative;
	background: var(--edp-surface);
	border-radius: var(--edp-radius);
	padding: 52px 24px 30px;
	text-align: center;
	margin-top: 28px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.edp-feature:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 40px -28px rgba(22, 19, 15, 0.45);
}

.edp-feature-icon {
	z-index: 2;
	position: absolute;
	top: -28px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--edp-accent);
	color: #fff;
	font-size: 22px;
}

.edp-feature-icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.edp-feature-title {
	margin: 0 0 9px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--edp-ink);
}

.edp-feature-text {
	overflow-wrap: anywhere;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--edp-muted);
}

.edp-features.is-inline .edp-feature {
	display: flex;
	gap: 16px;
	text-align: start;
	align-items: flex-start;
	margin-top: 0;
	padding: 24px;
}

.edp-features.is-inline .edp-feature-icon {
	position: static;
	transform: none;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	font-size: 19px;
}

.edp-features.is-plain .edp-feature {
	background: transparent;
	padding: 0;
	margin-top: 0;
	text-align: start;
}

.edp-features.is-plain .edp-feature:hover {
	transform: none;
	box-shadow: none;
}

.edp-features.is-plain .edp-feature-icon {
	position: static;
	transform: none;
	margin-bottom: 16px;
	background: var(--edp-surface);
	color: var(--edp-accent);
}

.edp-features.is-plain .edp-feature-icon img {
	filter: none;
}

/* ----------------------------------------------------------------------- Media */

.edp-media-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(20px, 3vw, 32px);
}

.edp-media-head .edp-section-title {
	margin: 0;
}

.edp-tabs {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: 2px;
	padding: 5px;
	background: var(--edp-surface);
	border: 1px solid color-mix(in srgb, var(--edp-line) 70%, transparent);
	border-radius: 999px;
	overflow-x: auto;
	scrollbar-width: none;
	isolation: isolate;
}

.edp-tabs::-webkit-scrollbar {
	display: none;
}

/* The gold pill slides to the active tab. */
.edp-tabs::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 5px;
	bottom: 5px;
	left: var(--edp-tab-x, 5px);
	width: var(--edp-tab-w, 0px);
	border-radius: 999px;
	background: var(--edp-accent);
	box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--edp-accent) 85%, transparent);
	transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1), width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-tabs:not(.is-ready)::after {
	opacity: 0;
}

.edp-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	padding: 11px 24px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--edp-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.3s ease, transform 0.3s ease;
}

.edp-tab::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--edp-accent) 12%, transparent);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.edp-tab:hover {
	color: var(--edp-ink);
}

.edp-tab:hover::before {
	opacity: 1;
}

.edp-tab.is-active {
	color: #fff;
}

.edp-tab.is-active::before {
	opacity: 0;
}

.edp-tabs:not(.is-ready) .edp-tab.is-active {
	background: var(--edp-accent);
}

.edp-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 5px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--edp-ink) 10%, transparent);
	font-size: 11px;
	font-weight: 700;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.edp-tab.is-active .edp-tab-count {
	background: rgba(255, 255, 255, 0.24);
	color: #fff;
}

.edp-tabs.is-sub {
	margin-bottom: clamp(18px, 2.4vw, 28px);
	background: transparent;
	border: 1px solid var(--edp-line);
}

.edp-panel[hidden] {
	display: none;
}

.edp-gallery-wrap {
	position: relative;
}

/* Gallery — the wide stage with a filmstrip (default) */

.edp-gallery-wrap.is-stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(12px, 1.4vw, 18px);
}

.edp-stage {
	position: relative;
	margin: 0;
	overflow: hidden;
	isolation: isolate;
	background: var(--edp-ink);
	border-radius: var(--edp-radius-lg);
}

/* Edge to edge — but the arrows, the meter and the strip stay on the text column. */
.edp-gallery-wrap.is-stage.is-wide .edp-stage {
	width: calc(100vw - var(--edp-sbw, 0px));
	max-width: calc(100vw - var(--edp-sbw, 0px));
	margin-inline: calc(50% - (100vw - var(--edp-sbw, 0px)) / 2);
	border-radius: 0;
	--edp-pad: clamp(16px, 4vw, 44px);
	--edp-gutter: max(var(--edp-pad), calc((100% - var(--edp-width)) / 2 + var(--edp-pad)));
}

.edp-gallery-wrap.is-stage.is-wide .edp-stage-nav,
.edp-gallery-wrap.is-stage.is-wide .edp-stage-meter {
	inset-inline: var(--edp-gutter);
}

.edp-gallery-wrap.is-stage.is-wide .edp-stage-expand {
	inset-inline-end: var(--edp-gutter);
}

.edp-stage-frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	touch-action: pan-y;
}

.edp-gallery-wrap.is-stage.is-wide .edp-stage-frame {
	aspect-ratio: 21 / 9;
	max-height: 76vh;
}

/* Two layers cross-fade, so the stage never flashes empty between photos. */
.edp-stage-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transform: scale(1.05) translateX(var(--edp-slide, 0px));
	transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-stage-img.is-current {
	opacity: 1;
	transform: scale(1) translateX(0);
}

.edp-stage:hover .edp-stage-img.is-current {
	transform: scale(1.025);
}

/* Reading room at the foot of the photo for the meter. */
.edp-stage::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 32%;
	background: linear-gradient(to top, rgba(10, 8, 6, 0.6), rgba(10, 8, 6, 0));
	pointer-events: none;
	z-index: 1;
}

.edp-stage-view {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	aspect-ratio: auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.edp-stage-expand {
	position: absolute;
	inset-block-start: clamp(14px, 1.6vw, 22px);
	inset-inline-end: clamp(14px, 1.6vw, 22px);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 42px;
	padding-inline: 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(14px) saturate(150%);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.edp-stage-expand .edp-svg {
	width: 16px;
	height: 16px;
}

.edp-stage:hover .edp-stage-expand,
.edp-stage:focus-within .edp-stage-expand {
	opacity: 1;
	transform: none;
}

.edp-stage-view:hover .edp-stage-expand,
.edp-stage-view:focus-visible .edp-stage-expand {
	background: var(--edp-accent);
	border-color: transparent;
}

/* Arrows: glass on the photo, gold on hover, and they lean the way they go. */
.edp-stage-nav {
	position: absolute;
	z-index: 3;
	inset-block-start: 50%;
	inset-inline: clamp(12px, 2vw, 28px);
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	opacity: 1;
}

.edp-nav-btn {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(48px, 4vw, 60px);
	height: clamp(48px, 4vw, 60px);
	padding: 0;
	border-radius: 18px;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.34);
	background: rgba(16, 13, 10, 0.26);
	backdrop-filter: blur(16px) saturate(150%);
	color: #fff;
	opacity: 0;
	transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.3s ease, border-color 0.3s ease;
}

.edp-nav-btn[data-edp-prev] {
	transform: translateX(-14px);
}

.edp-nav-btn[data-edp-next] {
	transform: translateX(14px);
}

.edp-stage:hover .edp-nav-btn,
.edp-stage:focus-within .edp-nav-btn {
	opacity: 1;
	transform: translateX(0);
}

.edp-nav-btn:hover {
	background: var(--edp-accent);
	border-color: transparent;
}

.edp-nav-btn:focus-visible,
.edp-stage-view:focus-visible,
.edp-thumb:focus-visible {
	outline: 2px solid var(--edp-accent);
	outline-offset: 3px;
}

.edp-nav-btn .edp-svg {
	width: 24px;
	height: 24px;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-nav-btn[data-edp-prev]:hover .edp-svg {
	transform: translateX(-3px);
}

.edp-nav-btn[data-edp-next]:hover .edp-svg {
	transform: translateX(3px);
}

@media (hover: none) {
	.edp-nav-btn {
		opacity: 1;
		transform: none;
	}
}

/* The meter: which photo, how far through, in one quiet line. */
.edp-stage-meter {
	position: absolute;
	z-index: 3;
	inset-inline: clamp(14px, 2vw, 28px);
	inset-block-end: clamp(14px, 1.8vw, 24px);
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.4vw, 20px);
	color: #fff;
	pointer-events: none;
}

.edp-meter-index {
	font-size: clamp(22px, 2.4vw, 34px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	min-width: 1.9em;
}

.edp-meter-rail {
	position: relative;
	flex: 1;
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.3);
	overflow: hidden;
}

.edp-meter-fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 0;
	border-radius: 2px;
	background: var(--edp-accent);
	transition: width 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-meter-total {
	font-size: 12.5px;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.72);
	font-variant-numeric: tabular-nums;
}

/* Filmstrip */
.edp-thumbs {
	display: flex;
	gap: clamp(8px, 0.9vw, 14px);
	overflow-x: auto;
	scrollbar-width: none;
	padding-block: 2px 6px;
}

.edp-thumbs::-webkit-scrollbar {
	display: none;
}

.edp-thumb {
	position: relative;
	flex: 0 0 clamp(84px, 9vw, 132px);
	aspect-ratio: 16 / 10;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	opacity: 1;
	background: var(--edp-surface);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.5;
	filter: saturate(0.65);
	transition: opacity 0.4s ease, filter 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-thumb::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 3px;
	background: var(--edp-accent);
	transform: scaleX(0);
	transform-origin: 50% 100%;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-thumb:hover {
	transform: translateY(-4px);
	opacity: 1;
}

.edp-thumb:hover img {
	opacity: 0.9;
	filter: none;
	transform: scale(1.06);
}

.edp-thumb.is-current {
	opacity: 1;
	box-shadow: none;
}

.edp-thumb.is-current img {
	opacity: 1;
	filter: none;
}

.edp-thumb.is-current::after {
	transform: scaleX(1);
}

@media (max-width: 900px) {
	.edp-gallery-wrap.is-stage.is-wide .edp-stage-frame {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 600px) {
	.edp-stage-frame,
	.edp-gallery-wrap.is-stage.is-wide .edp-stage-frame {
		aspect-ratio: 4 / 3;
	}

	.edp-nav-btn {
		width: 44px;
		height: 44px;
		border-radius: 14px;
	}

	.edp-stage-expand {
		width: 40px;
		padding-inline: 0;
		justify-content: center;
	}

	.edp-expand-text {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.edp-stage-img,
	.edp-nav-btn,
	.edp-thumb,
	.edp-thumb img,
	.edp-meter-fill {
		transition-duration: 0.01ms !important;
	}

	.edp-stage:hover .edp-stage-img.is-current {
		transform: none;
	}
}


/* Separate pills with icons — the layout the client asked for */
.edp-tabs.is-pills {
	background: transparent;
	border: 0;
	padding: 0;
	gap: 10px;
	overflow: visible;
	flex-wrap: wrap;
}

.edp-tabs.is-pills::after {
	display: none;
}

.edp-tabs.is-pills .edp-tab {
	padding: 12px 22px;
	border: 1px solid var(--edp-line);
	background: var(--edp-white);
	color: var(--edp-ink);
	font-size: 14.5px;
	box-shadow: 0 8px 20px -18px rgba(22, 19, 15, 0.6);
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.edp-tabs.is-pills .edp-tab::before {
	display: none;
}

.edp-tabs.is-pills .edp-tab:hover {
	border-color: var(--edp-accent);
	color: var(--edp-accent);
	transform: translateY(-2px);
}

.edp-tabs.is-pills .edp-tab.is-active {
	background: var(--edp-accent);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 14px 26px -16px color-mix(in srgb, var(--edp-accent) 85%, transparent);
}

.edp-tab-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-tab-icon svg {
	width: 100%;
	height: 100%;
}

.edp-tab:hover .edp-tab-icon,
.edp-tab.is-active .edp-tab-icon {
	transform: scale(1.12) rotate(-6deg);
}

.edp-tabs.is-pills .edp-tab.is-active .edp-tab-count {
	background: rgba(255, 255, 255, 0.26);
}

@media (max-width: 700px) {
	.edp-tabs.is-pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
	}

	.edp-tabs.is-pills .edp-tab {
		padding: 10px 16px;
		font-size: 13.5px;
	}
}

/* Carousel: the middle photo is the hero, the neighbours wash out */
/* Gallery — centre stage carousel */

.edp-gallery {
	display: grid;
	gap: 14px;
}

.edp-gallery.is-carousel {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-block-end: 4px;
	padding-inline: calc((100% - min(58%, 760px)) / 2);
	cursor: grab;
}

.edp-gallery.is-carousel::-webkit-scrollbar {
	display: none;
}

.edp-gallery.is-carousel .edp-gallery-item {
	flex: 0 0 min(58%, 760px);
	scroll-snap-align: center;
	aspect-ratio: 16 / 10;
	opacity: 0.3;
	filter: saturate(0.35);
	transform: scale(0.92);
	transform-origin: center;
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}

.edp-gallery.is-carousel .edp-gallery-item.is-current {
	opacity: 1;
	filter: none;
	transform: scale(1);
	box-shadow: 0 30px 60px -40px rgba(22, 19, 15, 0.7);
}

.edp-gallery-wrap.is-carousel {
	position: relative;
	margin-inline: calc(-1 * clamp(0px, 1vw, 14px));
}

.edp-gallery.is-mosaic {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.edp-gallery.is-mosaic .edp-gallery-item {
	aspect-ratio: 4 / 3;
}

.edp-gallery.is-mosaic .edp-gallery-item:first-child {
	grid-column: span 2;
	grid-row: span 2;
	aspect-ratio: auto;
}

.edp-gallery.is-grid {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.edp-gallery.is-grid .edp-gallery-item {
	aspect-ratio: 4 / 3;
}

.edp-gallery-item {
	position: relative;
	padding: 0;
	border: 0;
	background: var(--edp-surface);
	border-radius: var(--edp-radius);
	overflow: hidden;
	cursor: zoom-in;
}

.edp-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.edp-gallery-item:hover img {
	transform: scale(1.04);
}

.edp-carousel-nav {
	position: absolute;
	inset-block-start: 50%;
	inset-inline: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	padding-inline: clamp(8px, 2vw, 26px);
	z-index: 3;
}

.edp-carousel-nav .edp-round-btn {
	pointer-events: auto;
	width: 52px;
	height: 52px;
	flex-basis: 52px;
	background: rgba(255, 255, 255, 0.94);
	border-color: transparent;
	box-shadow: 0 12px 30px -14px rgba(22, 19, 15, 0.55);
	font-size: 22px;
}

.edp-carousel-nav .edp-round-btn:hover {
	background: var(--edp-accent);
	color: #fff;
}

.edp-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.edp-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--edp-line);
	cursor: pointer;
	transition: width 0.3s ease, background-color 0.3s ease;
}

.edp-dot.is-current {
	width: 26px;
	border-radius: 999px;
	background: var(--edp-accent);
}

.edp-plans-wrap .edp-panel {
	animation: edp-fade-up 0.5s ease both;
}

.edp-plan-heading {
	margin: 0 0 16px;
	font-size: 19px;
	font-weight: 700;
	color: var(--edp-ink);
}

.edp-plan-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px clamp(18px, 2.4vw, 34px);
	padding: 16px 20px;
	margin-bottom: 18px;
	border-radius: var(--edp-radius);
	background: var(--edp-surface);
}

.edp-plan-bar .edp-plan-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.edp-plan-bar .edp-plan-meta li {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.edp-plan-bar .edp-plan-meta span {
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--edp-muted);
}

.edp-plan-bar .edp-plan-meta strong {
	font-size: 15px;
	color: var(--edp-ink);
}

.edp-plan-bar .edp-plan-text {
	overflow-wrap: anywhere;
	flex: 1 1 240px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
}

.edp-plan-bar .edp-btn {
	margin-inline-start: auto;
}

.edp-plan-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
}

.edp-plan-grid.is-single {
	grid-template-columns: minmax(0, 1fr);
}

.edp-plan-figure {
	position: relative;
	padding: 18px;
	border: 1px solid var(--edp-line);
	border-radius: var(--edp-radius);
	background: var(--edp-white);
	cursor: zoom-in;
	overflow: hidden;
	transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.edp-plan-figure img {
	width: 100%;
	height: 320px;
	object-fit: contain;
	display: block;
	transition: transform 0.5s ease;
}

.edp-plan-grid.is-single .edp-plan-figure img {
	height: min(62vh, 560px);
}

.edp-plan-figure:hover {
	border-color: var(--edp-accent);
	transform: translateY(-3px);
	box-shadow: 0 26px 50px -34px rgba(22, 19, 15, 0.45);
}

.edp-plan-figure:hover img {
	transform: scale(1.03);
}

.edp-plan-zoom {
	position: absolute;
	inset-block-end: 14px;
	inset-inline-end: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--edp-accent);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.edp-plan-figure:hover .edp-plan-zoom {
	opacity: 1;
	transform: none;
}

@keyframes edp-fade-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.edp-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 18px;
}

.edp-plan {
	border: 1px solid var(--edp-line);
	border-radius: var(--edp-radius);
	overflow: hidden;
	background: var(--edp-white);
	display: flex;
	flex-direction: column;
}

.edp-plan-image {
	border: 0;
	padding: 0;
	background: var(--edp-surface);
	cursor: zoom-in;
}

.edp-plan-image img {
	width: 100%;
	height: 250px;
	object-fit: contain;
	display: block;
	padding: 16px;
}

.edp-plan-body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.edp-plan-title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--edp-ink);
}

.edp-plan-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	color: var(--edp-muted);
}

.edp-plan-text {
	overflow-wrap: anywhere;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
}

.edp-plan-body .edp-btn {
	align-self: flex-start;
	margin-top: auto;
}

.edp-videos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
}

.edp-video {
	margin: 0;
}

.edp-video-play {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	padding: 0;
	border-radius: var(--edp-radius);
	overflow: hidden;
	cursor: pointer;
	background: var(--edp-ink);
}

.edp-video-play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.86;
	transition: opacity 0.3s ease, transform 0.6s ease;
}

.edp-video-play:hover img {
	opacity: 1;
	transform: scale(1.03);
}

.edp-video-icon {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: var(--edp-accent);
}

.edp-video-icon::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #fff;
}

.edp-video figcaption {
	margin-top: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--edp-ink);
}

.edp-tour iframe,
.edp-location-map iframe {
	width: 100%;
	min-height: 440px;
	border: 0;
	border-radius: var(--edp-radius);
	display: block;
}

/* ------------------------------------------------------------ Units + progress */

.edp-table-scroll {
	position: relative;
	overflow-x: auto;
	border: 1px solid var(--edp-line);
	border-radius: var(--edp-radius);
}

.edp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	background: var(--edp-white);
}

.edp-table th,
.edp-table td {
	padding: 16px 20px;
	text-align: start;
	border-bottom: 1px solid var(--edp-line);
	white-space: nowrap;
}

.edp-table thead th {
	background: var(--edp-surface);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--edp-muted);
}

.edp-table tbody tr:last-child th,
.edp-table tbody tr:last-child td {
	border-bottom: 0;
}

.edp-tag {
	display: inline-block;
	padding: 5px 13px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: var(--edp-surface);
	color: var(--edp-ink);
}

.edp-tag-few {
	background: #fdf1d8;
	color: #8a5f12;
}

.edp-tag-sold {
	background: #f1f0ee;
	color: var(--edp-muted);
}

.edp-progress {
	margin-bottom: clamp(26px, 3vw, 42px);
	max-width: 560px;
}

.edp-progress-head {
	display: flex;
	justify-content: space-between;
	font-size: 15px;
	margin-bottom: 10px;
	color: var(--edp-ink);
}

.edp-progress-track {
	height: 10px;
	border-radius: 999px;
	background: var(--edp-surface);
	overflow: hidden;
}

.edp-progress-bar {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--edp-accent);
}

.edp-timeline {
	display: grid;
	grid-template-columns: repeat(var(--edp-tl-cols, 3), minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.edp-milestone {
	padding: 24px;
	border-radius: var(--edp-radius);
	background: var(--edp-surface);
	border-top: 3px solid var(--edp-line);
}

.edp-milestone.is-done {
	border-top-color: var(--edp-accent);
}

.edp-milestone.is-current {
	border-top-color: var(--edp-ink);
}

.edp-milestone-date {
	font-size: 12.5px;
	color: var(--edp-muted);
}

.edp-milestone-title {
	margin: 6px 0 8px;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--edp-ink);
}

.edp-milestone-text {
	overflow-wrap: anywhere;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
}

.edp-milestone-photo {
	display: block;
	margin-top: 16px;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	width: 100%;
}

.edp-milestone-photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 14px;
	display: block;
}

/* -------------------------------------------------------------------- Brochure */

.edp-brochure {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 2vw, 26px);
	padding: clamp(22px, 2.6vw, 34px);
	border-radius: var(--edp-radius-lg);
	background: var(--edp-surface);
}

.edp-brochure-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	border-radius: 16px;
	background: var(--edp-white);
	color: var(--edp-accent);
}

.edp-brochure-icon svg {
	width: 26px;
	height: 26px;
}

.edp-brochure-text {
	flex: 1 1 320px;
	min-width: 0;
}

.edp-brochure-title {
	margin: 0;
	font-size: clamp(19px, 1.9vw, 23px);
	font-weight: 700;
	color: var(--edp-ink);
}

.edp-brochure-blurb {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.6;
}

.edp-brochure-meta {
	margin: 6px 0 0;
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--edp-muted);
}

.edp-brochure-action {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------- Location */

.edp-location {
	display: grid;
	grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(20px, 3vw, 34px);
	align-items: start;
}

.edp-location-card {
	padding: clamp(24px, 3vw, 38px);
	background: var(--edp-white);
	border: 1px solid var(--edp-line);
	border-radius: var(--edp-radius-lg);
	box-shadow: 0 30px 60px -50px rgba(22, 19, 15, 0.5);
}

.edp-location-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--edp-line);
}

.edp-location-address {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 700;
	color: var(--edp-ink);
	max-width: 20ch;
}

.edp-location-subtitle {
	margin: 24px 0 16px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--edp-ink);
}

.edp-nearby {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	margin: 0;
}

.edp-nearby-item {
	padding-block: 12px;
	border-bottom: 1px solid var(--edp-line);
}

.edp-nearby-item:nth-last-child(-n+2) {
	border-bottom: 0;
	padding-bottom: 0;
}

.edp-nearby-item dt {
	margin: 0 0 3px;
	font-size: 13px;
	color: var(--edp-muted);
}

.edp-nearby-item dd {
	overflow-wrap: anywhere;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--edp-ink);
}

.edp-location-map iframe {
	min-height: 460px;
}

/* ------------------------------------------------------------------------ Form */

.edp-section-form {
	scroll-margin-top: 100px;
}

.edp-form-shell.is-card {
	padding: clamp(26px, 4vw, 54px);
	background: var(--edp-surface);
	border-radius: var(--edp-radius-lg);
}

.edp-form-shell.is-split {
	display: grid;
	grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(26px, 4vw, 60px);
	align-items: start;
}

.edp-form-intro {
	margin: 0 0 26px;
	font-size: 16px;
	line-height: 1.6;
}

.edp-form-shell:not(.is-split) .edp-form-intro {
	text-align: center;
	max-width: 46ch;
	margin-inline: auto;
}

.edp-contact-list {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	gap: 18px;
}

.edp-contact-list a {
	font-size: 18px;
	font-weight: 700;
	color: var(--edp-ink);
	text-decoration: none;
}

.edp-contact-list a:hover {
	color: var(--edp-accent);
}

.edp-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.edp-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.edp-field-wide {
	grid-column: 1 / -1;
}

.edp-label {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--edp-muted);
}

.edp-form input[type="text"],
.edp-form input[type="email"],
.edp-form input[type="tel"],
.edp-form select,
.edp-form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--edp-line);
	border-radius: 12px;
	background: var(--edp-white);
	font-size: 15.5px;
	color: var(--edp-ink);
	font-family: inherit;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.edp-form textarea {
	min-height: 120px;
	resize: vertical;
}

.edp-form input:focus,
.edp-form select:focus,
.edp-form textarea:focus {
	outline: none;
	border-color: var(--edp-accent);
}

.edp-form .edp-field.has-error input,
.edp-form .edp-field.has-error textarea {
	border-color: #c0392b;
}

.edp-consent {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
}

.edp-consent input {
	margin-top: 3px;
}

.edp-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.edp-form-feedback {
	margin: 14px 0 0;
	font-size: 15px;
	min-height: 1em;
}

.edp-form-feedback.is-ok {
	color: #1e7e4f;
	font-weight: 600;
}

.edp-form-feedback.is-error {
	color: #c0392b;
}

.edp-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.edp-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: edp-spin 0.7s linear infinite;
}

.is-sending .edp-spinner {
	display: inline-block;
}

.is-sending .edp-arrow {
	display: none;
}

@keyframes edp-spin {
	to {
		transform: rotate(360deg);
	}
}

.edp-alert {
	padding: 14px 18px;
	border-radius: 12px;
	margin-bottom: 20px;
	font-size: 15px;
}

.edp-alert-ok {
	background: #e6f6ec;
	color: #1e7e4f;
}

.edp-alert-error {
	background: #fdecea;
	color: #c0392b;
}

/* ------------------------------------------------------------- Other projects */

.edp-related.is-stack {
	display: grid;
	gap: clamp(26px, 3.4vw, 44px);
}

/* Pinned deck: one card fills the view, the next one slides over it. */
.edp-related.is-pinned {
	display: block;
	--edp-pin-top: 96px;
}

/* Every card is a direct child, so they all pin on the same line and the next
   one slides over the one before it while the reader stands still. */
.edp-related.is-pinned .edp-pin-card {
	position: sticky;
	top: var(--edp-pin-top);
	height: min(74vh, 620px);
	transform-origin: center top;
	transition: filter 0.25s linear;
	will-change: transform;
}

.edp-pin-gap {
	height: min(62vh, 520px);
	pointer-events: none;
}

.edp-related.is-pinned .edp-wide-card {
	height: 100%;
	min-height: 0;
	box-shadow: 0 -24px 60px -34px rgba(22, 19, 15, 0.6);
}

/* Counter that follows the deck */
.edp-deck-count {
	position: sticky;
	top: calc(var(--edp-pin-top) + 16px);
	z-index: 5;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: -34px;
	margin-inline-start: auto;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(10, 8, 6, 0.62);
	color: #fff;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	backdrop-filter: blur(6px);
	pointer-events: none;
	width: fit-content;
}

.edp-deck-count strong {
	font-size: 14px;
}

.edp-wide-card {
	position: relative;
	border-radius: var(--edp-radius-lg);
	overflow: hidden;
	min-height: clamp(300px, 40vw, 460px);
	display: grid;
	grid-template-areas: "stack";
	align-items: center;
	padding: clamp(18px, 2.4vw, 34px);
	background: var(--edp-ink);
}

.edp-wide-media,
.edp-wide-panel {
	grid-area: stack;
}

.edp-wide-media {
	margin: calc(-1 * clamp(18px, 2.4vw, 34px));
	align-self: stretch;
	overflow: hidden;
}

.edp-wide-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.8s ease;
}

.edp-wide-card:hover .edp-wide-media img {
	transform: scale(1.04);
}

.edp-wide-panel {
	justify-self: end;
	align-self: center;
	width: min(392px, 100%);
	background: var(--edp-white);
	border-radius: var(--edp-radius);
	padding: clamp(22px, 2.2vw, 30px);
	box-shadow: 0 40px 70px -50px rgba(22, 19, 15, 0.6);
}

.edp-wide-media {
	display: block;
}

.edp-wide-title {
	margin: 14px 0 0;
	font-size: clamp(20px, 2.1vw, 26px);
	line-height: 1.24;
	font-weight: 700;
}

.edp-wide-title a {
	color: var(--edp-ink);
	text-decoration: none;
}

.edp-wide-title a:hover {
	color: var(--edp-accent);
}

.edp-wide-meta {
	margin: 8px 0 0;
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--edp-muted);
}

.edp-wide-text {
	overflow-wrap: anywhere;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--edp-line);
	font-size: 14.5px;
	line-height: 1.62;
}

.edp-wide-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
}

.edp-wide-price {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--edp-ink);
}

.edp-wide-go {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-inline-start: auto;
	text-decoration: none;
	color: var(--edp-ink);
}

.edp-wide-go-label {
	font-size: 13.5px;
	font-weight: 600;
}

.edp-wide-go .edp-round-btn {
	width: 40px;
	height: 40px;
	flex-basis: 40px;
}

.edp-wide-card:hover .edp-wide-go .edp-round-btn {
	transform: translate(2px, -2px);
}

.edp-related.is-slider {
	display: flex;
	gap: var(--edp-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 6px;
}

.edp-related.is-slider::-webkit-scrollbar {
	display: none;
}

.edp-related.is-slider > * {
	flex: 0 0 min(360px, 82%);
	scroll-snap-align: start;
}

.edp-related.is-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--edp-gap);
}

/* ------------------------------------------------------------- Cards + listing */

.edp-card-project {
	display: flex;
	flex-direction: column;
	background: var(--edp-white);
	border: 1px solid var(--edp-line);
	border-radius: var(--edp-radius);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.edp-card-project:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 50px -34px rgba(22, 19, 15, 0.5);
}

.edp-card-media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--edp-surface);
	overflow: hidden;
}

.edp-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.edp-card-project:hover .edp-card-media img {
	transform: scale(1.05);
}

.edp-card-status {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-start: 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--edp-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.edp-card-body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.edp-card-title {
	margin: 0;
	font-size: 20px;
	line-height: 1.28;
	font-weight: 700;
}

.edp-card-title a {
	color: var(--edp-ink);
	text-decoration: none;
}

.edp-card-title a:hover {
	color: var(--edp-accent);
}

.edp-card-location {
	margin: 0;
	font-size: 13.5px;
	color: var(--edp-muted);
}

.edp-card-text {
	overflow-wrap: anywhere;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
}

.edp-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--edp-line);
}

.edp-card-price {
	font-weight: 700;
	color: var(--edp-ink);
	font-size: 15px;
}

.edp-archive-header {
	padding-block: clamp(50px, 8vw, 110px);
	background: var(--edp-surface);
	background-size: cover;
	background-position: center;
	margin-bottom: clamp(28px, 4vw, 50px);
}

.edp-archive-header.has-image {
	color: #fff;
	position: relative;
}

.edp-archive-header.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 8, 6, 0.52);
}

.edp-archive-header.has-image .edp-container {
	position: relative;
}

.edp-archive-title {
	margin: 0;
	font-size: clamp(30px, 4.6vw, 54px);
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: 0;
	color: inherit;
	font-family: var(--e-global-typography-accent-font-family, inherit);
}

.edp-archive-header:not(.has-image) .edp-archive-title {
	color: var(--edp-ink);
}

.edp-archive-intro {
	margin: 14px 0 0;
	max-width: 620px;
	font-size: 16.5px;
}

.edp-filters {
	margin-bottom: clamp(22px, 3vw, 34px);
}

.edp-filters-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 14px;
	background: var(--edp-surface);
	border-radius: var(--edp-radius);
}

.edp-filter {
	flex: 1 1 170px;
}

.edp-filter-search {
	flex: 2 1 220px;
}

.edp-filters select,
.edp-filters input[type="search"] {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--edp-line);
	border-radius: 12px;
	background: var(--edp-white);
	font-size: 15px;
	font-family: inherit;
	color: var(--edp-ink);
}

.edp-filters-count {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--edp-muted);
}

.edp-grid {
	display: grid;
	gap: var(--edp-gap);
}

.edp-grid.edp-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.edp-grid.edp-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.edp-grid.edp-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.edp-empty {
	padding: clamp(36px, 6vw, 70px);
	text-align: center;
	background: var(--edp-surface);
	border-radius: var(--edp-radius);
}

.edp-empty-title {
	margin: 0 0 6px;
	font-size: 20px;
	color: var(--edp-ink);
	font-weight: 700;
}

.edp-results.is-loading {
	opacity: 0.45;
	transition: opacity 0.2s ease;
}

.edp-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: clamp(26px, 4vw, 44px);
}

.edp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	border-radius: 999px;
	border: 1px solid var(--edp-line);
	color: var(--edp-ink);
	text-decoration: none;
	font-size: 15px;
}

.edp-pagination .page-numbers.current,
.edp-pagination .page-numbers:hover {
	background: var(--edp-accent);
	border-color: transparent;
	color: #fff;
}

/* ---------------------------------------------------------- Prev / next + CTA */

.edp-project-nav {
	padding-block: clamp(26px, 3.4vw, 46px);
}

.edp-project-nav-inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.edp-nav-pill {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 26px;
	border: 1px solid var(--edp-line);
	border-radius: 999px;
	text-decoration: none;
	min-height: 72px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.edp-nav-pill.is-empty {
	display: none;
}

.edp-project-nav-inner:has(.edp-nav-pill.is-empty) {
	grid-template-columns: minmax(0, 1fr);
}

.edp-nav-pill:hover {
	border-color: var(--edp-accent);
}

.edp-nav-pill.is-next {
	justify-content: flex-end;
	text-align: end;
}

.edp-nav-chevron {
	color: var(--edp-accent);
	font-size: 20px;
	line-height: 1;
}

.edp-nav-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--edp-ink);
}

.edp-nav-title {
	display: block;
	font-size: 12.5px;
	color: var(--edp-muted);
	margin-top: 2px;
}

.edp-cta {
	padding-block: clamp(50px, 8vw, 100px);
	text-align: center;
	background: var(--edp-surface);
	background-size: cover;
	background-position: center;
}

.edp-cta.has-image {
	position: relative;
	color: #fff;
}

.edp-cta.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 8, 6, 0.56);
}

.edp-cta.has-image .edp-container {
	position: relative;
}

.edp-cta-title {
	margin: 0 0 12px;
	font-size: clamp(28px, 4.2vw, 50px);
	line-height: 1.14;
	font-weight: 700;
	letter-spacing: 0;
	color: inherit;
	font-family: var(--e-global-typography-accent-font-family, inherit);
}

.edp-cta:not(.has-image) .edp-cta-title {
	color: var(--edp-ink);
}

.edp-cta-text {
	margin: 0 auto 26px;
	max-width: 560px;
	font-size: 16.5px;
}

/* -------------------------------------------------------------------- Lightbox */

.edp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 50px);
	background: rgba(8, 7, 5, 0.92);
}

.edp-lightbox[hidden],
.edp-modal[hidden] {
	display: none;
}

.edp-lightbox-stage {
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.edp-lightbox img {
	max-width: 100%;
	max-height: 86vh;
	border-radius: 12px;
	display: block;
}

.edp-lightbox iframe {
	width: min(1100px, 92vw);
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 12px;
}

.edp-lightbox-close,
.edp-lightbox-nav {
	position: absolute;
	border: 0;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 21px;
	cursor: pointer;
	line-height: 1;
}

.edp-lightbox-close:hover,
.edp-lightbox-nav:hover {
	background: rgba(255, 255, 255, 0.32);
}

.edp-lightbox-close {
	inset-block-start: 18px;
	inset-inline-end: 18px;
}

.edp-lightbox-nav.is-prev {
	inset-inline-start: 18px;
}

.edp-lightbox-nav.is-next {
	inset-inline-end: 18px;
}

.edp-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(8, 7, 5, 0.62);
}

.edp-modal-box {
	position: relative;
	width: min(560px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--edp-white);
	border-radius: var(--edp-radius-lg);
	padding: clamp(24px, 4vw, 38px);
}

/* ------------------------------------------------ Brochure review panel */

.edp-pdf {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(10px, 2.4vw, 30px);
	background: rgba(8, 7, 5, 0.86);
}

.edp-pdf[hidden] {
	display: none;
}

.edp-pdf-box {
	display: flex;
	flex-direction: column;
	width: min(980px, 100%);
	height: min(92vh, 100%);
	overflow: hidden;
	background: var(--edp-white);
	border-radius: var(--edp-radius-lg);
}

.edp-pdf-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: clamp(16px, 2.4vw, 24px) clamp(18px, 2.6vw, 28px);
	border-bottom: 1px solid var(--edp-line);
	flex: 0 0 auto;
}

.edp-pdf-head-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.edp-pdf-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--edp-accent);
}

.edp-pdf-title {
	font-size: clamp(17px, 2vw, 21px);
	line-height: 1.2;
	color: var(--edp-ink);
	overflow-wrap: anywhere;
}

.edp-pdf-meta {
	font-size: 13px;
	color: #928d85;
}

.edp-pdf-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid var(--edp-line);
	border-radius: 50%;
	background: var(--edp-white);
	color: var(--edp-ink);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.3s ease;
}

.edp-pdf-close .edp-svg {
	width: 17px;
	height: 17px;
}

.edp-pdf-close:hover {
	background: var(--edp-accent);
	border-color: transparent;
	color: #fff;
	transform: rotate(90deg);
}

.edp-pdf-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	background: var(--edp-surface);
}

.edp-pdf-frame {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	border: 0;
	display: block;
}

.edp-pdf-hint {
	margin: 0;
	padding: 8px 16px;
	font-size: 12.5px;
	text-align: center;
	color: #928d85;
	border-top: 1px solid var(--edp-line);
	flex: 0 0 auto;
}

/* Where a frame will not draw a PDF, the file is offered as a card instead. */
.edp-pdf-stage.is-card {
	align-items: center;
	justify-content: center;
	padding: clamp(28px, 6vw, 54px);
}

.edp-pdf-card {
	text-align: center;
	color: var(--edp-ink);
	max-width: 340px;
}

.edp-pdf-card svg {
	width: 58px;
	height: 58px;
	color: var(--edp-accent);
}

.edp-pdf-card p {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: #5f5b55;
}

.edp-pdf-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: clamp(14px, 2vw, 20px) clamp(18px, 2.6vw, 28px);
	border-top: 1px solid var(--edp-line);
	flex: 0 0 auto;
}

.edp-pdf-foot .edp-btn {
	text-decoration: none;
}

@media (max-width: 600px) {
	.edp-pdf-box {
		height: 100%;
		border-radius: 18px;
	}

	.edp-pdf-foot .edp-btn {
		flex: 1 1 100%;
	}
}

/* -------------------------------------------------------------- Reveal + a11y */

.edp-animate.is-ready .edp-reveal {
	transform: translateY(16px);
	transition: transform 0.7s ease;
}

.edp-animate.is-ready .edp-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

:where(.edp-project, .edp-archive, .edp-el) :focus-visible {
	outline: 2px solid var(--edp-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------------ Skins */

.edp-skin-elevated {
	--edp-radius: 5px;
	--edp-radius-lg: 7px;
	--edp-surface: #f2efe9;
}

.edp-skin-elevated .edp-btn,
.edp-skin-elevated .edp-tabs,
.edp-skin-elevated .edp-tab,
.edp-skin-elevated .edp-nav-pill,
.edp-skin-elevated .edp-chip,
.edp-skin-elevated .edp-badge,
.edp-skin-elevated .edp-pill-btn,
.edp-skin-elevated .edp-card-status {
	border-radius: 5px;
}

.edp-skin-elevated .edp-feature {
	background: var(--edp-white);
	border: 1px solid var(--edp-line);
}

.edp-skin-elevated .edp-section-media,
.edp-skin-elevated .edp-section-related {
	background: #14110d;
	color: #cfc9c0;
	padding-block: var(--edp-rhythm);
}

.edp-skin-elevated .edp-section-media .edp-heading,
.edp-skin-elevated .edp-section-related .edp-heading,
.edp-skin-elevated .edp-section-media .edp-link,
.edp-skin-elevated .edp-section-related .edp-link {
	color: #fff;
}

.edp-skin-elevated .edp-section-media .edp-tabs {
	background: rgba(255, 255, 255, 0.08);
}

.edp-skin-elevated.has-dividers .edp-body > .edp-section-media + .edp-section > .edp-container,
.edp-skin-elevated.has-dividers .edp-body > .edp-section-related + .edp-section > .edp-container {
	border-top: 0;
}

.edp-skin-compact {
	--edp-rhythm: clamp(34px, 4vw, 56px);
	--edp-radius: 14px;
	--edp-radius-lg: 16px;
}

.edp-skin-compact .edp-hero-title {
	font-size: var(--edp-hero-size, clamp(28px, 3.6vw, 44px));
}

.edp-skin-compact .edp-showcase img {
	max-height: 420px;
	object-fit: cover;
}

.edp-skin-compact .edp-wide-card {
	min-height: 260px;
}

.edp-skin-compact .edp-feature {
	padding: 36px 18px 20px;
}

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

@media (max-width: 1100px) {
	.edp-features.cols-4 {
		--edp-fcols: 3;
	}

	.edp-facts {
		grid-template-columns: repeat(min(var(--edp-fact-cols, 3), 3), minmax(0, 1fr));
	}

	.edp-location,
	.edp-form-shell.is-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.edp-location-map iframe {
		min-height: 340px;
	}
}

@media (max-width: 1024px) {
	.edp-split {
		grid-template-columns: minmax(0, 1fr);
	}

	.edp-split-aside.is-sticky {
		position: static;
	}

	.edp-grid.edp-cols-4,
	.edp-related.is-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.edp-gallery.is-carousel .edp-gallery-item {
		flex-basis: min(78%, 640px);
	}
}

@media (max-width: 860px) {
	.edp-features.cols-3,
	.edp-features.cols-4 {
		--edp-fcols: 2;
	}

	.edp-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.edp-facts .edp-fact::before {
		display: none;
	}

	.edp-facts .edp-fact {
		padding-inline: 0;
	}

	.edp-timeline {
		grid-template-columns: repeat(min(var(--edp-tl-cols, 2), 2), minmax(0, 1fr));
	}

	.edp-gallery.is-mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.edp-gallery.is-mosaic .edp-gallery-item:first-child {
		grid-column: span 2;
		grid-row: auto;
		aspect-ratio: 16 / 10;
	}

	.edp-wide-card {
		display: block;
		padding: 0;
		background: transparent;
		min-height: 0;
	}

	.edp-wide-media {
		margin: 0;
		height: 240px;
		border-radius: var(--edp-radius);
		overflow: hidden;
	}

	.edp-wide-panel {
		width: auto;
		margin: -44px 14px 0;
	}

	.edp-related.is-pinned .edp-pin-card {
		height: auto;
		position: static;
	}

	.edp-pin-gap {
		height: 30px;
	}

	.edp-related.is-pinned .edp-wide-card {
		box-shadow: none;
	}

	.edp-wide-go {
		inset-block-end: -20px;
		inset-inline-end: 18px;
	}
}

@media (max-width: 600px) {
	.edp-features {
		--edp-fcols: 1;
	}

	.edp-feature {
		min-width: 0;
		flex-basis: 100%;
	}

	.edp-hero-actions {
		width: 100%;
	}

	.edp-grid.edp-cols-2,
	.edp-grid.edp-cols-3,
	.edp-grid.edp-cols-4,
	.edp-related.is-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.edp-form-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.edp-facts {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.edp-facts .edp-fact {
		padding-inline: 0;
		padding-block: 14px;
	}

	.edp-facts .edp-fact::before {
		display: block;
		inset: 0 0 auto 0;
		width: auto;
		height: 1px;
	}

	.edp-facts .edp-fact:first-child::before {
		display: none;
	}

	.edp-timeline {
		grid-template-columns: minmax(0, 1fr);
	}

	.edp-facts.is-strip .edp-fact {
		padding-inline: 18px;
	}

	.edp-carousel-nav .edp-round-btn {
		width: 44px;
		height: 44px;
		flex-basis: 44px;
	}

	.edp-related.is-pinned .edp-pin-card {
		height: auto;
		position: static;
	}

	.edp-pin-gap {
		height: 26px;
	}

	.edp-hero-actions .edp-btn {
		flex: 1 1 100%;
	}

	.edp-project-nav-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.edp-nav-pill.is-empty {
		display: none;
	}

	.edp-nearby {
		gap: 14px 16px;
	}

	.edp-gallery.is-carousel .edp-gallery-item {
		flex-basis: 88%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.edp-project *,
	.edp-archive *,
	.edp-el * {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}

	.edp-animate.is-ready .edp-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------ Inside Elementor layouts */

.edp-el .edp-section {
	padding-block: 0;
}

.edp-el .edp-container,
.edp-el .edp-container-narrow {
	max-width: none;
	width: 100%;
	padding-inline: 0;
	margin-inline: 0;
}

.edp-el.hide-heading .edp-section-title {
	display: none;
}

.edp-el .edp-form-shell.is-card {
	padding: 0;
	background: transparent;
}

.edp-el .edp-hero.is-title {
	padding-block: 0;
}

.edp-el .edp-hero.is-title .edp-hero-frame {
	padding-inline: 0;
	max-width: none;
}

.edp-el-hint,
.edp-el-empty {
	margin: 8px 0 0;
	padding: 6px 10px;
	font-size: 12px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.06);
	color: #555;
}

body:not(.elementor-editor-active) .edp-el-hint {
	display: none;
}

/* ------------------------------------------------------- Motion + hover life */

.edp-fact-icon {
	transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.edp-fact:hover .edp-fact-icon {
	background: var(--edp-accent);
	border-color: transparent;
	color: #fff;
	transform: translateY(-2px) rotate(-6deg);
}

.edp-fact-value {
	transition: color 0.3s ease;
}

.edp-fact:hover .edp-fact-value {
	color: var(--edp-accent);
}

/* No overflow clipping here: the icon deliberately sits on the top edge. */
.edp-feature::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	border-radius: 0 0 var(--edp-radius) var(--edp-radius);
	background: var(--edp-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-feature:hover::after {
	transform: scaleX(1);
}

.edp-feature-icon {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.edp-feature-title {
	transition: color 0.3s ease;
}

.edp-feature:hover .edp-feature-title {
	color: var(--edp-accent);
}

.edp-detail::before {
	transition: transform 0.3s ease, background-color 0.3s ease;
}

.edp-detail:hover::before {
	transform: scale(1.6);
}

.edp-nearby-item {
	transition: padding-inline-start 0.3s ease;
}

.edp-nearby-item:hover {
	padding-inline-start: 6px;
}

.edp-nearby-item:hover dd {
	color: var(--edp-accent);
}

.edp-nearby-item dd {
	transition: color 0.3s ease;
}

.edp-thumb {
	transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.edp-thumb:hover {
	transform: translateY(-3px);
}

.edp-table tbody tr {
	transition: background-color 0.25s ease;
}

.edp-table tbody tr:hover {
	background: color-mix(in srgb, var(--edp-accent) 7%, transparent);
}

.edp-milestone {
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-top-color 0.35s ease;
}

.edp-milestone:hover {
	transform: translateY(-4px);
	border-top-color: var(--edp-accent);
	box-shadow: 0 24px 44px -32px rgba(22, 19, 15, 0.45);
}

.edp-brochure {
	transition: background-color 0.35s ease;
}

.edp-brochure:hover {
	background: color-mix(in srgb, var(--edp-accent) 10%, var(--edp-surface));
}

.edp-brochure-icon {
	transition: transform 0.4s ease, background-color 0.35s ease, color 0.35s ease;
}

.edp-brochure:hover .edp-brochure-icon {
	transform: translateY(-3px) rotate(-6deg);
	background: var(--edp-accent);
	color: #fff;
}

.edp-wide-panel {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.edp-wide-card:hover .edp-wide-panel {
	transform: translateY(-6px);
}

.edp-round-btn .edp-arrow {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-btn:hover .edp-arrow,
.edp-round-btn:hover .edp-arrow {
	transform: translate(2px, -2px);
}

.edp-link {
	position: relative;
	border-bottom-color: transparent;
}

.edp-link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 1px;
	background: var(--edp-accent);
	transform: scaleX(0.35);
	transform-origin: left;
	transition: transform 0.35s ease;
}

.edp-link:hover::after {
	transform: scaleX(1);
}

/* Section reveal: subtle, staggered, and off for reduced motion */
.edp-animate.is-ready .edp-reveal {
	transform: translateY(18px);
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.edp-animate.is-ready .edp-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.edp-hero-video {
		display: none;
	}
}

/* ------------------------------------------------------- Floating project bar */

.edp-sticky-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 90;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--edp-line);
	transform: translateY(-100%);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 18px 40px -34px rgba(22, 19, 15, 0.6);
}

.edp-sticky-bar[hidden] {
	display: block;
	visibility: hidden;
}

.edp-sticky-bar.is-visible {
	transform: none;
	visibility: visible;
}

.edp-sticky-inner {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 30px);
	padding-block: 10px;
}

.edp-sticky-id {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.edp-sticky-thumb img {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	object-fit: cover;
	display: block;
}

.edp-sticky-text {
	display: grid;
	min-width: 0;
}

.edp-sticky-title {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--edp-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.edp-sticky-meta {
	font-size: 12px;
	color: var(--edp-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.edp-sticky-nav {
	display: flex;
	gap: 22px;
	margin-inline: auto;
}

.edp-sticky-nav a {
	position: relative;
	font-size: 14px;
	font-weight: 600;
	color: var(--edp-text);
	text-decoration: none;
	padding-block: 4px;
}

.edp-sticky-nav a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 2px;
	border-radius: 999px;
	background: var(--edp-accent);
	transform: scaleX(0);
	transition: transform 0.35s ease;
}

.edp-sticky-nav a:hover {
	color: var(--edp-ink);
}

.edp-sticky-nav a:hover::after {
	transform: scaleX(1);
}

.edp-sticky-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-inline-start: auto;
}

.edp-sticky-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--edp-ink);
	white-space: nowrap;
}

@media (max-width: 900px) {
	.edp-sticky-nav,
	.edp-sticky-price,
	.edp-sticky-brochure {
		display: none;
	}

	.edp-sticky-actions {
		margin-inline-start: auto;
	}
}

@media (max-width: 560px) {
	.edp-sticky-meta,
	.edp-sticky-thumb {
		display: none;
	}
}

/* ------------------------------------------------------ Section polish pass */

.edp-table tbody td:nth-child(5) {
	font-weight: 700;
	color: var(--edp-ink);
}

.edp-table thead th:first-child {
	border-start-start-radius: var(--edp-radius);
}

.edp-table thead th:last-child {
	border-start-end-radius: var(--edp-radius);
}

.edp-nearby-item {
	position: relative;
	padding-inline-start: 14px;
}

.edp-nearby-item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 18px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--edp-accent);
	opacity: 0.5;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.edp-nearby-item:hover::before {
	opacity: 1;
	transform: scale(1.4);
}

.edp-timeline {
	position: relative;
}

.edp-milestone {
	position: relative;
}

.edp-milestone::before {
	content: "";
	position: absolute;
	inset-block-start: -3px;
	inset-inline-start: 0;
	width: 0;
	height: 3px;
	background: var(--edp-accent);
	transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-milestone.is-done::before,
.edp-milestone.is-current::before {
	width: 100%;
}

.edp-form-shell.is-plain {
	padding: clamp(24px, 3vw, 42px);
	border: 1px solid var(--edp-line);
	border-radius: var(--edp-radius-lg);
	background: var(--edp-white);
}

.edp-form input:focus,
.edp-form select:focus,
.edp-form textarea:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--edp-accent) 16%, transparent);
}

@media (max-width: 600px) {
	.edp-form-actions .edp-btn {
		flex: 1 1 100%;
	}
}

/* Listing page, if the plugin version is switched on */

.edp-archive .edp-filters-row {
	border: 1px solid var(--edp-line);
	background: var(--edp-white);
	box-shadow: 0 20px 40px -38px rgba(22, 19, 15, 0.5);
}

.edp-archive .edp-card-project {
	border-color: transparent;
	box-shadow: 0 20px 44px -38px rgba(22, 19, 15, 0.55);
}

.edp-archive .edp-card-title a::after {
	content: "";
	display: block;
	width: 42px;
	height: 2px;
	margin-top: 10px;
	border-radius: 999px;
	background: var(--edp-accent);
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-archive .edp-card-project:hover .edp-card-title a::after {
	width: 100%;
}

/* ------------------------------------------------------------- Edge to edge */
/* --edp-sbw is the scrollbar width, set from JS, so 100vw never overflows. */

.edp-bleed,
.edp-gallery-wrap.is-bleed {
	width: calc(100vw - var(--edp-sbw, 0px));
	max-width: calc(100vw - var(--edp-sbw, 0px));
	margin-inline: calc(50% - (100vw - var(--edp-sbw, 0px)) / 2);
}

.edp-section-showcase.is-bleed {
	padding-inline: 0;
}

.edp-section-showcase.is-bleed .edp-showcase-video {
	border-radius: 0;
	aspect-ratio: 21 / 9;
}

.edp-section-showcase.is-bleed .edp-play-label {
	font-size: clamp(22px, 2.6vw, 34px);
}

@media (max-width: 900px) {
	.edp-section-showcase.is-bleed .edp-showcase-video {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 600px) {
	.edp-section-showcase.is-bleed .edp-showcase-video {
		aspect-ratio: 4 / 3;
	}

	.edp-play-ring {
		width: 62px;
		height: 62px;
	}
}

/* Carousel that runs off both edges, like the reference */

.edp-gallery-wrap.is-bleed .edp-gallery.is-carousel {
	--edp-slide: min(52vw, 900px);
	padding-inline: calc((100vw - var(--edp-sbw, 0px) - var(--edp-slide)) / 2);
	gap: 22px;
}

.edp-gallery-wrap.is-bleed .edp-gallery.is-carousel .edp-gallery-item {
	flex-basis: var(--edp-slide);
	border-radius: var(--edp-radius);
}

.edp-gallery-wrap.is-bleed .edp-gallery.is-carousel .edp-gallery-item:not(.is-current) {
	cursor: pointer;
}

@media (max-width: 900px) {
	.edp-gallery-wrap.is-bleed .edp-gallery.is-carousel {
		--edp-slide: min(78vw, 620px);
		gap: 14px;
	}
}

@media (max-width: 600px) {
	.edp-gallery-wrap.is-bleed .edp-gallery.is-carousel {
		--edp-slide: 86vw;
	}
}

/* Arrows: out of the way until you hover, then quiet glass circles */

.edp-carousel-nav {
	opacity: 0;
	transition: opacity 0.35s ease;
}

.edp-gallery-wrap:hover .edp-carousel-nav,
.edp-gallery-wrap:focus-within .edp-carousel-nav {
	opacity: 1;
}

.edp-carousel-nav .edp-round-btn {
	width: 46px;
	height: 46px;
	flex-basis: 46px;
	font-size: 19px;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.9);
	color: var(--edp-ink);
	box-shadow: 0 10px 26px -16px rgba(22, 19, 15, 0.5);
}

.edp-gallery-wrap.is-bleed .edp-carousel-nav {
	padding-inline: clamp(14px, 4vw, 60px);
}

@media (hover: none) {
	.edp-carousel-nav {
		opacity: 1;
	}
}

.edp-carousel-dots {
	margin-top: 22px;
}

/* ------------------------------------------------------------------ Icon set */

.edp-svg {
	width: 1em;
	height: 1em;
	display: block;
	flex: 0 0 auto;
}

.edp-round-btn .edp-svg {
	width: 20px;
	height: 20px;
}

.edp-lightbox-close .edp-svg,
.edp-lightbox-nav .edp-svg {
	width: 22px;
	height: 22px;
	margin-inline: auto;
}

.edp-nav-chevron .edp-svg {
	width: 20px;
	height: 20px;
}

.edp-plan-zoom .edp-svg {
	width: 18px;
	height: 18px;
}

.edp-stage-zoom .edp-svg {
	width: 20px;
	height: 20px;
}

.edp-kicker-icon {
	width: 14px;
	height: 14px;
	display: inline-block;
	vertical-align: -2px;
	margin-inline-end: 6px;
	color: var(--edp-accent);
}

.edp-btn .edp-svg {
	width: 16px;
	height: 16px;
}

.edp-lightbox-close,
.edp-lightbox-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --------------------------------------------------- Carousel foot controls */

.edp-carousel-foot {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 32px);
	width: min(var(--edp-width), 100% - 2 * clamp(16px, 4vw, 44px));
	margin: 26px auto 0;
}

.edp-carousel-count {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-size: 13px;
	color: var(--edp-muted);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.edp-carousel-count strong {
	font-size: 19px;
	color: var(--edp-ink);
}

.edp-count-sep {
	opacity: 0.5;
}

.edp-carousel-track {
	position: relative;
	flex: 1 1 auto;
	height: 2px;
	background: var(--edp-line);
	border-radius: 999px;
	overflow: hidden;
}

.edp-carousel-fill {
	position: absolute;
	inset: 0;
	transform: scaleX(0.14);
	transform-origin: left;
	background: var(--edp-accent);
	border-radius: 999px;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-carousel-hint {
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--edp-muted);
	white-space: nowrap;
	opacity: 0.8;
	transition: opacity 0.5s ease;
}

.edp-carousel-hint.is-gone {
	opacity: 0;
}

@media (max-width: 600px) {
	.edp-carousel-hint {
		display: none;
	}
}

/* ------------------------------------------------------------ Editorial pass */

.edp-index {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.edp-index-no {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--edp-accent);
	font-variant-numeric: tabular-nums;
}

.edp-index-rule {
	display: block;
	width: 44px;
	height: 1px;
	background: var(--edp-line);
	position: relative;
	overflow: hidden;
}

.edp-index-rule::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--edp-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.edp-reveal.is-visible .edp-index-rule::after,
.edp-section-title:not(.edp-reveal) .edp-index-rule::after {
	transform: scaleX(1);
}

.edp-section-title.is-center .edp-index {
	justify-content: center;
}

/* Soft full-width bands so the page has rhythm */

.edp-project.has-bands .edp-section-features,
.edp-project.has-bands .edp-section-related {
	position: relative;
	isolation: isolate;
}

.edp-project.has-bands .edp-section-features::before,
.edp-project.has-bands .edp-section-related::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: calc(var(--edp-rhythm) * -0.62) 0;
	left: 50%;
	width: calc(100vw - var(--edp-sbw, 0px));
	transform: translateX(-50%);
	background: color-mix(in srgb, var(--edp-surface) 74%, transparent);
}

.edp-project.has-bands.has-dividers .edp-section-features > .edp-container,
.edp-project.has-bands.has-dividers .edp-section-related > .edp-container {
	border-top-color: transparent;
}

.edp-project.has-bands .edp-section-features .edp-feature {
	background: var(--edp-white);
}

/* Location: the address card overlaps the map, the way estate agents lay it out */

@media (min-width: 1024px) {
	.edp-location.is-overlap {
		display: block;
		position: relative;
		padding-block: 10px;
	}

	.edp-location.is-overlap .edp-location-map {
		width: 100%;
	}

	.edp-location.is-overlap .edp-location-map iframe {
		min-height: 540px;
		border-radius: var(--edp-radius-lg);
	}

	.edp-location.is-overlap .edp-location-card {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: clamp(20px, 4vw, 56px);
		transform: translateY(-50%);
		width: min(400px, 42%);
		z-index: 2;
		box-shadow: 0 40px 80px -50px rgba(22, 19, 15, 0.65);
	}
}

/* Plans: download button reads as an action, icon first */

.edp-plan-bar .edp-btn .edp-svg {
	width: 17px;
	height: 17px;
}

/* Wide cards: a hairline frame inside the image for a crafted look */

.edp-wide-card::after {
	content: "";
	position: absolute;
	inset: clamp(10px, 1.2vw, 18px);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: calc(var(--edp-radius-lg) - 8px);
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.edp-wide-card:hover::after {
	opacity: 1;
}

@media (max-width: 860px) {
	.edp-wide-card::after {
		display: none;
	}
}

/* Facts: a hairline above the row ties it to the header */

.edp-section-facts .edp-facts {
	padding-block-start: 4px;
}

/* Feature cards keep a crisp edge on the tinted band */

.edp-project.has-bands .edp-feature {
	border: 1px solid color-mix(in srgb, var(--edp-line) 60%, transparent);
}

/* --------------------------------------------------- Whole card is the link */

.edp-wide-card,
.edp-card-project {
	position: relative;
}

.edp-wide-card[data-edp-card-link],
.edp-card-project[data-edp-card-link] {
	cursor: pointer;
}

/* One link, stretched over the entire card. Works with JavaScript switched off. */
.edp-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
}

/* The inset hairline must not sit above the click layer. */
.edp-wide-card::after {
	z-index: 3;
}

/* Hover anywhere on the card lights up the whole thing */
.edp-wide-card:hover .edp-wide-title a,
.edp-card-project:hover .edp-card-title a {
	color: var(--edp-accent);
}

.edp-wide-card:hover .edp-wide-go .edp-round-btn {
	background: var(--edp-accent);
	transform: translate(2px, -2px);
}

.edp-card-project:hover .edp-link {
	color: var(--edp-accent);
}

.edp-stretch:focus-visible::after {
	outline: 3px solid var(--edp-accent);
	outline-offset: 4px;
}

/* Keyboard users still get a visible target on the title itself */
.edp-stretch {
	text-decoration: none;
}

/* --------------------------------------------------------- Plans: pick a unit */

.edp-plan-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(18px, 2.4vw, 26px);
}

.edp-plan-picker-label {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--edp-muted);
}

.edp-select {
	position: relative;
	min-width: min(340px, 100%);
}

.edp-select select {
	appearance: none;
	width: 100%;
	padding: 15px 52px 15px 20px;
	border: 1px solid var(--edp-line);
	border-radius: 999px;
	background: var(--edp-white);
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--edp-ink);
	cursor: pointer;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.edp-select select:hover {
	border-color: var(--edp-accent);
}

.edp-select select:focus-visible {
	outline: none;
	border-color: var(--edp-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--edp-accent) 18%, transparent);
}

.edp-select-arrow {
	position: absolute;
	inset-inline-end: 18px;
	inset-block-start: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%) rotate(90deg);
	color: var(--edp-accent);
	pointer-events: none;
}

.edp-plan-picker-count {
	font-size: 13px;
	color: var(--edp-muted);
}

.edp-plan-headline {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 240px;
}

.edp-plan-headline .edp-plan-heading {
	margin: 0;
}

.edp-plan-actions {
	display: flex;
	gap: 10px;
	margin-inline-start: auto;
}

.edp-plan-note {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--edp-text);
}

/* ------------------------------------------------------------- Unit popup */

.edp-unit-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 40px);
	background: rgba(8, 7, 5, 0.72);
	backdrop-filter: blur(6px);
}

.edp-unit-modal[hidden] {
	display: none;
}

.edp-unit-box {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
	width: min(1180px, 100%);
	max-height: 92vh;
	overflow: hidden;
	background: var(--edp-white, #fff);
	border-radius: var(--edp-radius-lg, 26px);
	box-shadow: 0 60px 120px -60px rgba(0, 0, 0, 0.8);
}

.edp-unit-close {
	position: absolute;
	inset-block-start: 16px;
	inset-inline-end: 16px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--edp-ink);
	cursor: pointer;
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
}

.edp-unit-close:hover {
	background: var(--edp-accent);
	color: #fff;
}

.edp-unit-visual {
	display: flex;
	flex-direction: column;
	background: var(--edp-surface);
	min-width: 0;
}

.edp-unit-stage {
	flex: 1 1 auto;
	display: grid;
	place-items: center;
	padding: clamp(16px, 2.4vw, 32px);
	min-height: 0;
}

.edp-unit-stage img {
	max-width: 100%;
	max-height: min(58vh, 520px);
	object-fit: contain;
	border-radius: 12px;
	display: block;
}

.edp-unit-thumbs {
	display: flex;
	gap: 10px;
	padding: 0 clamp(16px, 2.4vw, 32px) clamp(16px, 2.4vw, 26px);
	overflow-x: auto;
	scrollbar-width: none;
}

.edp-unit-thumbs::-webkit-scrollbar {
	display: none;
}

.edp-unit-thumb {
	flex: 0 0 78px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.55;
	background: var(--edp-white);
	transition: opacity 0.25s ease, box-shadow 0.25s ease;
}

.edp-unit-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.edp-unit-thumb.is-current,
.edp-unit-thumb:hover {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--edp-accent);
}

.edp-unit-side {
	padding: clamp(24px, 3vw, 40px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.edp-unit-state {
	align-self: flex-start;
	padding: 5px 13px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--edp-accent) 14%, transparent);
	color: var(--edp-accent);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.edp-unit-title {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--edp-ink);
}

.edp-unit-specs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding-block: 16px;
	border-block: 1px solid var(--edp-line);
}

.edp-unit-specs li {
	display: grid;
	gap: 3px;
}

.edp-unit-specs span {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--edp-muted);
}

.edp-unit-specs strong {
	font-size: 17px;
	color: var(--edp-ink);
}

.edp-unit-note {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--edp-text);
}

.edp-unit-pdf {
	align-self: flex-start;
}

.edp-unit-form-title {
	margin: 6px 0 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--edp-ink);
}

.edp-unit-form .edp-form-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.edp-unit-form .edp-form input,
.edp-unit-form .edp-form textarea,
.edp-unit-form .edp-form select {
	padding: 11px 14px;
	font-size: 14.5px;
}

.edp-unit-form .edp-form textarea {
	min-height: 80px;
}

.edp-unit-form .edp-form-actions {
	margin-top: 14px;
}

@media (max-width: 900px) {
	.edp-unit-box {
		grid-template-columns: minmax(0, 1fr);
		max-height: 94vh;
		overflow-y: auto;
	}

	.edp-unit-stage img {
		max-height: 40vh;
	}

	.edp-unit-specs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------- The film opens the page (hero) */
/* When the project film sits at the top it should touch the header: no section
   padding, no rounded corners, and the height chosen in Settings. --edp-headroom
   is the space above the film (site header / theme banner), measured in JS. */

.edp-section-showcase.is-hero {
	padding-block: 0;
	margin-block: 0;
}

.edp-section-showcase.is-hero > .edp-bleed,
.edp-section-showcase.is-hero > .edp-container {
	padding-block: 0;
}

.edp-section-showcase.is-hero .edp-showcase-video {
	border-radius: 0;
}

.edp-section-showcase.is-hero.is-h-tall .edp-showcase-video,
.edp-section-showcase.is-hero.is-h-screen .edp-showcase-video {
	aspect-ratio: auto;
	min-height: 420px;
}

.edp-section-showcase.is-hero.is-h-tall .edp-showcase-video {
	height: 86vh;
	height: 86svh;
}

.edp-section-showcase.is-hero.is-h-screen .edp-showcase-video {
	height: calc(100vh - var(--edp-headroom, 0px));
	height: calc(100svh - var(--edp-headroom, 0px));
}

/* Nothing the theme puts above the film may add white space under its banner. */
.edp-project > .edp-section-showcase.is-hero:first-child {
	margin-top: 0;
}

@media (max-width: 900px) {
	.edp-section-showcase.is-hero.is-h-tall .edp-showcase-video {
		height: 70vh;
		height: 70svh;
	}

	.edp-section-showcase.is-hero.is-h-screen .edp-showcase-video {
		height: calc(100svh - var(--edp-headroom, 0px));
		min-height: 380px;
	}
}

@media (max-width: 600px) {
	.edp-section-showcase.is-hero.is-h-tall .edp-showcase-video,
	.edp-section-showcase.is-hero.is-h-screen .edp-showcase-video {
		min-height: 340px;
	}
}


/* ------------------------------------------ Nothing may cover a photo on hover */
/* Themes style every <button> they can reach, and these buttons are nothing but a
   click target stretched over a picture — a theme hover colour lands as a solid
   block across the whole image. The photo stays; the movement does the talking. */

.edp-project :is(.edp-showcase-play, .edp-stage-view, .edp-gallery-item, .edp-plan-figure, .edp-milestone-photo, .edp-video-play),
.edp-project :is(.edp-showcase-play, .edp-stage-view, .edp-gallery-item, .edp-plan-figure, .edp-milestone-photo, .edp-video-play):hover,
.edp-project :is(.edp-showcase-play, .edp-stage-view, .edp-gallery-item, .edp-plan-figure, .edp-milestone-photo, .edp-video-play):focus,
.edp-project :is(.edp-showcase-play, .edp-stage-view, .edp-gallery-item, .edp-plan-figure, .edp-milestone-photo, .edp-video-play):focus-visible,
.edp-project :is(.edp-showcase-play, .edp-stage-view, .edp-gallery-item, .edp-plan-figure, .edp-milestone-photo, .edp-video-play):active,
.edp-archive :is(.edp-gallery-item, .edp-card-media):hover,
.edp-el :is(.edp-showcase-play, .edp-stage-view, .edp-gallery-item):hover {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	filter: none !important;
}

.edp-project :is(.edp-thumb, .edp-thumb:hover, .edp-thumb:focus, .edp-thumb:active) {
	background: var(--edp-surface) !important;
	background-image: none !important;
	box-shadow: none !important;
}

.edp-project :is(.edp-showcase-play, .edp-showcase-play:hover, .edp-showcase-play:focus, .edp-showcase-play:active) {
	color: #fff !important;
	border: 0 !important;
}

/* Hovering the film lifts the shade instead of dropping one: the poster drifts in
   a little closer and the picture reads brighter than it does at rest. */
.edp-showcase-video:hover::after,
.edp-showcase-video:focus-within::after {
	opacity: 0.55;
}

.edp-showcase-video:hover .edp-showcase-poster,
.edp-showcase-video:focus-within .edp-showcase-poster {
	transform: scale(1.045);
}

.edp-showcase-play:hover .edp-play-triangle {
	border-left-color: #fff;
}

/* The gallery arrows are a control, not a cover — this keeps them on our terms. */
.edp-project .edp-nav-btn:hover,
.edp-el .edp-nav-btn:hover {
	background: var(--edp-accent) !important;
	border-color: transparent !important;
	color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
	.edp-showcase-video:hover .edp-showcase-poster,
	.edp-showcase-video:focus-within .edp-showcase-poster {
		transform: none;
	}
}

/* ------------------------------------- The film as the whole first screen */
/* The theme's banner steps aside, the site header floats on the picture, and
   the project's name sits on the film the way a title card sits on a poster. */

.edp-section-showcase.is-hero.is-h-cover .edp-showcase-video {
	aspect-ratio: auto;
	height: 100vh;
	height: 100svh;
	min-height: 520px;
	border-radius: 0;
	--edp-pad: clamp(16px, 4vw, 44px);
	--edp-gutter: max(var(--edp-pad), calc((100% - var(--edp-width)) / 2 + var(--edp-pad)));
}

/* Room for the name at the foot, and for the header at the head. */
.edp-showcase-video.is-cover::after {
	inset: 0;
	height: auto;
	background:
		linear-gradient(to top, rgba(8, 7, 5, 0.78) 0%, rgba(8, 7, 5, 0.34) 34%, rgba(8, 7, 5, 0) 62%),
		linear-gradient(to bottom, rgba(8, 7, 5, 0.46), rgba(8, 7, 5, 0) 26%);
}

/* A whole screen does not zoom under the pointer — the reel is already moving. */
.edp-showcase-video.is-cover:hover .edp-showcase-poster,
.edp-showcase-video.is-cover:focus-within .edp-showcase-poster {
	transform: none;
}

.edp-showcase-video.is-cover:hover::after,
.edp-showcase-video.is-cover:focus-within::after {
	opacity: 1;
}

.edp-cover-reel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 1;
	opacity: 0;
	transition: opacity 1.1s ease;
}

.edp-cover-reel.is-live {
	opacity: 1;
}

/* A film living on YouTube or Vimeo runs inside their frame, and a frame has a
   fixed 16:9 shape where a video would simply crop itself. So the frame is
   grown until it covers the stage in both directions and the overflow is cut
   off — the same result object-fit: cover gives a file. Viewport units first
   for older browsers, then the exact container units where they are understood. */
.edp-cover-reel.is-embed {
	overflow: hidden;
	pointer-events: none;
	container-type: size;
}

.edp-cover-reel.is-embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	width: 100vw;
	height: 56.25vw;
	min-width: 177.78vh;
	min-height: 100vh;
	width: 100cqw;
	height: 56.25cqw;
	min-width: 177.78cqh;
	min-height: 100cqh;
}

.edp-cover-body {
	position: absolute;
	z-index: 3;
	inset-inline: 0;
	inset-block-end: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 64px);
	padding-inline: var(--edp-gutter, clamp(16px, 4vw, 44px));
	padding-block-end: clamp(30px, 5.4vh, 76px);
	color: #fff;
}

.edp-cover-headline {
	max-width: 62ch;
}

.edp-cover-eyebrow {
	margin: 0 0 clamp(10px, 1.4vh, 18px);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.76);
}

.edp-cover-title {
	margin: 0;
	color: #fff;
	font-size: var(--edp-hero-size, clamp(38px, 6.6vw, 108px));
	font-weight: var(--edp-hero-weight, 500);
	line-height: 0.96;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	text-wrap: balance;
}

.edp-chips.is-on-film {
	margin-top: clamp(16px, 2.2vh, 26px);
}

.edp-chips.is-on-film .edp-chip {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(12px) saturate(150%);
	color: #fff;
}

.edp-cover-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: clamp(20px, 3vh, 34px);
}

.edp-btn-glass {
	border: 1px solid rgba(255, 255, 255, 0.42);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(14px) saturate(150%);
	color: #fff;
}

.edp-btn-glass:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
}

/* The second film, offered rather than pushed. */
.edp-cover-side {
	flex: 0 0 auto;
}

.edp-cover-card {
	position: relative;
	display: block;
	width: clamp(210px, 25vw, 460px);
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 18px;
	overflow: hidden;
	cursor: pointer;
	background: rgba(10, 8, 6, 0.4);
	box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.8);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}

.edp-cover-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-cover-card:hover {
	transform: translateY(-5px);
}

.edp-cover-card:hover img {
	transform: scale(1.06);
}

.edp-cover-card-play {
	position: absolute;
	inset-block-start: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(48px, 4.4vw, 74px);
	height: clamp(48px, 4.4vw, 74px);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}

.edp-cover-card-triangle {
	width: 0;
	height: 0;
	margin-inline-start: 5px;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--edp-ink);
}

.edp-cover-card:hover .edp-cover-card-play {
	transform: translate(-50%, -50%) scale(1.09);
}

.edp-cover-card-label {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: 26px 16px 12px;
	background: linear-gradient(to top, rgba(8, 7, 5, 0.76), rgba(8, 7, 5, 0));
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: start;
}

/* Sound is off until it is asked for: one dark circle, one glyph, no words.
   The crossed speaker while muted, the waves while playing. */
.edp-cover-sound {
	position: absolute;
	z-index: 4;
	inset-block-start: var(--edp-headbar, clamp(116px, 15vh, 172px));
	inset-inline-end: var(--edp-gutter, clamp(16px, 4vw, 44px));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(46px, 4.6vw, 58px);
	height: clamp(46px, 4.6vw, 58px);
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(24, 21, 18, 0.78);
	backdrop-filter: blur(10px);
	color: #fff;
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-cover-sound:hover {
	background: rgba(24, 21, 18, 0.95);
	border-color: rgba(255, 255, 255, 0.3);
	transform: scale(1.06);
}

.edp-sound-ico {
	width: 44%;
	height: 44%;
}

/* One speaker at a time: crossed while muted, waves once the sound is on. */
.edp-cover-sound .edp-sound-ico.is-on,
.edp-cover-sound[aria-pressed="false"] .edp-sound-ico.is-off {
	display: none;
}

.edp-cover-sound[aria-pressed="false"] .edp-sound-ico.is-on {
	display: block;
}

/* Read to the screen, drawn to no one. */
.edp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.edp-cover-sound:focus-visible,
.edp-cover-card:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 1000px) {
	.edp-cover-body {
		flex-direction: column;
		align-items: stretch;
		gap: clamp(18px, 3vh, 28px);
	}

	.edp-cover-side {
		order: -1;
		display: flex;
		justify-content: flex-end;
	}

	.edp-cover-card {
		width: clamp(160px, 42vw, 260px);
	}
}

@media (max-width: 600px) {
	.edp-section-showcase.is-hero.is-h-cover .edp-showcase-video {
		min-height: 460px;
	}

	.edp-cover-title {
		font-size: var(--edp-hero-size, clamp(30px, 9vw, 46px));
	}

	.edp-cover-actions .edp-btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.edp-cover-sound {
		inset-block-start: var(--edp-headbar, clamp(96px, 13vh, 130px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.edp-cover-reel {
		transition: none;
	}

	.edp-cover-card,
	.edp-cover-card img,
	.edp-cover-card-play {
		transition: none;
	}

	.edp-cover-sound,
	.edp-cover-sound:hover {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------- Feature cards: a cradle for the icon */
/* The card's top edge dips into a circle so the icon sits in it rather than on it.
   The shape is a mask on a backing layer, not on the card, so the icon is not cut
   by its own cradle. Where mask is unsupported the card is simply a rounded box. */

.edp-features.is-overlap {
	--edp-cradle: clamp(38px, 3.4vw, 46px);
	--edp-badge: clamp(56px, 5vw, 68px);
}

.edp-features.is-overlap .edp-feature {
	background: none;
	border: 0;
	border-radius: 0;
	padding: calc(var(--edp-cradle) + 26px) clamp(18px, 1.8vw, 28px) clamp(28px, 3vw, 38px);
	margin-top: calc(var(--edp-badge) / 2 + 6px);
	text-align: center;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-features.is-overlap .edp-feature::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: clamp(22px, 2.2vw, 32px) clamp(22px, 2.2vw, 32px) clamp(10px, 1.2vw, 16px) clamp(10px, 1.2vw, 16px);
	background: linear-gradient(180deg, color-mix(in srgb, var(--edp-surface) 88%, #fff), #fff 82%);
	-webkit-mask: radial-gradient(circle var(--edp-cradle) at 50% 0, transparent 98%, #000 100%);
	mask: radial-gradient(circle var(--edp-cradle) at 50% 0, transparent 98%, #000 100%);
	transition: background 0.45s ease, box-shadow 0.45s ease;
}

/* The gold underline belonged to the old card; the cradle is the shape now. */
.edp-features.is-overlap .edp-feature::after {
	display: none;
}

.edp-features.is-overlap .edp-feature-body {
	position: relative;
	z-index: 1;
}

.edp-features.is-overlap .edp-feature-icon {
	/* التوسيط بهوامش سالبة لا بإزاحة، حتى يبقى transform حرًّا فلا تهتزّ
	   الأيقونة أثناء النبض */
	top: 0;
	left: 50%;
	width: var(--edp-badge);
	height: var(--edp-badge);
	margin-left: calc(var(--edp-badge) / -2);
	margin-top: calc(var(--edp-badge) / -2);
	transform: none;
	font-size: clamp(22px, 2vw, 27px);
	background: var(--edp-accent);
	color: #fff;
	box-shadow: none;
	transition: background-color 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-features.is-overlap .edp-feature-icon img {
	width: 50%;
	height: 50%;
}

/* Hover: the badge goes to ink and the card lifts. Nothing blinks. */
.edp-features.is-overlap .edp-feature:hover {
	transform: translateY(-5px);
	box-shadow: none;
}

.edp-features.is-overlap .edp-feature:hover::before {
	background: linear-gradient(180deg, color-mix(in srgb, var(--edp-surface) 96%, #fff), #fff 88%);
	box-shadow: 0 26px 46px -30px rgba(22, 19, 15, 0.42);
}

.edp-features.is-overlap .edp-feature:hover .edp-feature-icon {
	background: var(--edp-ink);
}

.edp-features.is-overlap .edp-feature:hover .edp-feature-title {
	color: var(--edp-ink);
}

.edp-features.is-overlap .edp-feature-title {
	margin-bottom: 12px;
	font-size: clamp(16.5px, 1.4vw, 19px);
	font-weight: 500;
}

.edp-features.is-overlap .edp-feature-text {
	font-size: clamp(14px, 1.1vw, 15.5px);
	line-height: 1.62;
}

/* The tinted band gives every card a border; the cradle would cut it in half. */
.edp-project.has-bands .edp-features.is-overlap .edp-feature {
	background: none;
	border: 0;
}

.edp-project.has-bands .edp-features.is-overlap .edp-feature::before {
	background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--edp-surface) 55%, #fff) 100%);
}

.edp-project.has-bands .edp-features.is-overlap .edp-feature:hover::before {
	background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--edp-surface) 30%, #fff) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.edp-features.is-overlap .edp-feature,
	.edp-features.is-overlap .edp-feature::before,
	.edp-features.is-overlap .edp-feature-icon {
		transition-duration: 0.01ms !important;
	}

	.edp-features.is-overlap .edp-feature:hover {
		transform: none;
	}

	.edp-features.is-overlap .edp-feature:hover .edp-feature-icon {
		transform: none;
	}
}

/* ------------------------------------------------- Plans: filter, then browse */
/* Every unit type is a card. The filters are built from the rows, so a choice
   only appears when the project actually offers more than one of it. */

.edp-plan-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: clamp(10px, 1.2vw, 18px);
	padding: clamp(14px, 1.6vw, 20px);
	margin-bottom: clamp(18px, 2.2vw, 28px);
	border-radius: var(--edp-radius);
	background: var(--edp-surface);
	border: 1px solid color-mix(in srgb, var(--edp-line) 70%, transparent);
}

.edp-plan-filter {
	display: grid;
	gap: 7px;
	min-width: 172px;
	flex: 1 1 172px;
	max-width: 260px;
}

.edp-plan-filter-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--edp-muted);
}

.edp-plan-filters-foot {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-inline-start: auto;
	padding-bottom: 10px;
}

.edp-plan-tally {
	font-size: 13.5px;
	color: var(--edp-text);
	font-variant-numeric: tabular-nums;
}

.edp-plan-clear {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 13.5px;
	cursor: pointer;
	color: var(--edp-accent);
}

.edp-units {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
	gap: clamp(14px, 1.6vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.edp-unit-card[hidden] {
	display: none;
}

.edp-unit-open {
	display: grid;
	gap: 8px;
	width: 100%;
	padding: 0 0 clamp(16px, 1.6vw, 20px);
	border: 1px solid color-mix(in srgb, var(--edp-line) 78%, transparent);
	border-radius: var(--edp-radius);
	overflow: hidden;
	background: var(--edp-white);
	cursor: pointer;
	text-align: start;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.35s ease;
}

.edp-unit-open:hover {
	transform: translateY(-5px);
	border-color: color-mix(in srgb, var(--edp-accent) 40%, transparent);
	box-shadow: 0 28px 50px -34px rgba(22, 19, 15, 0.5);
}

.edp-unit-open:focus-visible {
	outline: 2px solid var(--edp-accent);
	outline-offset: 3px;
}

.edp-unit-shot {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--edp-surface);
	overflow: hidden;
	margin-bottom: clamp(10px, 1.2vw, 14px);
}

.edp-unit-shot img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	padding: 10px;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-unit-open:hover .edp-unit-shot img {
	transform: scale(1.04);
}

.edp-unit-count,
.edp-unit-peek {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(10, 8, 6, 0.62);
	color: #fff;
	backdrop-filter: blur(8px);
}

.edp-unit-count {
	inset-block-start: 10px;
	inset-inline-start: 10px;
	min-width: 26px;
	height: 26px;
	padding-inline: 8px;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.edp-unit-peek {
	inset-block-end: 10px;
	inset-inline-end: 10px;
	width: 34px;
	height: 34px;
	opacity: 0;
	transform: translateY(5px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.edp-unit-peek .edp-svg {
	width: 16px;
	height: 16px;
}

.edp-unit-open:hover .edp-unit-peek {
	opacity: 1;
	transform: none;
}

.edp-unit-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding-inline: clamp(14px, 1.5vw, 18px);
}

.edp-unit-name {
	font-size: 16.5px;
	font-weight: 600;
	color: var(--edp-ink);
	line-height: 1.25;
}

.edp-unit-line {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	padding-inline: clamp(14px, 1.5vw, 18px);
	font-size: 13.5px;
	color: var(--edp-muted);
}

.edp-unit-line span {
	position: relative;
}

.edp-unit-line span + span::before {
	content: "";
	position: absolute;
	inset-inline-start: -8px;
	top: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
}

.edp-unit-price {
	padding-inline: clamp(14px, 1.5vw, 18px);
	font-size: 15px;
	font-weight: 700;
	color: var(--edp-accent);
	font-variant-numeric: tabular-nums;
}

.edp-plan-empty[hidden] {
	display: none;
}

.edp-plan-empty {
	display: grid;
	gap: 4px;
	padding: clamp(28px, 4vw, 48px);
	border-radius: var(--edp-radius);
	background: var(--edp-surface);
	text-align: center;
	color: var(--edp-muted);
}

.edp-plan-empty strong {
	color: var(--edp-ink);
	font-size: 16px;
}

/* ---------------------------------------------------------- The unit popup */

.edp-unit-box {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr);
}

.edp-unit-visual {
	display: grid;
	align-content: start;
	gap: 12px;
	padding: clamp(18px, 2vw, 28px);
	background: var(--edp-surface);
}

.edp-unit-stage {
	position: relative;
	border-radius: var(--edp-radius);
	overflow: hidden;
	background: var(--edp-white);
}

.edp-unit-stage img {
	width: 100%;
	max-height: 62vh;
	object-fit: contain;
	display: block;
	padding: clamp(10px, 1.4vw, 20px);
}

.edp-unit-step {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	cursor: pointer;
	border: 1px solid color-mix(in srgb, var(--edp-line) 80%, transparent);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	color: var(--edp-ink);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.edp-unit-step.is-prev { inset-inline-start: 12px; }
.edp-unit-step.is-next { inset-inline-end: 12px; }

.edp-unit-step:hover {
	background: var(--edp-accent);
	border-color: transparent;
	color: #fff;
}

.edp-unit-tally {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-start: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(10, 8, 6, 0.6);
	color: #fff;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.edp-unit-side {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vw, 24px);
	padding: clamp(22px, 2.4vw, 34px);
	overflow-y: auto;
	max-height: 92vh;
}

.edp-unit-state {
	align-self: flex-start;
	padding: 5px 13px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--edp-accent) 14%, transparent);
	color: var(--edp-accent);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.edp-unit-state.is-sold {
	background: color-mix(in srgb, var(--edp-ink) 10%, transparent);
	color: var(--edp-muted);
}

.edp-unit-title {
	margin: 10px 0 0;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--edp-ink);
}

/* The figures the Units & pricing table carries, in the same words. */
.edp-unit-specs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0;
	margin: 18px 0 0;
	border-top: 1px solid var(--edp-line);
}

.edp-unit-specs dt,
.edp-unit-specs dd {
	margin: 0;
	padding: 11px 0;
	border-bottom: 1px solid var(--edp-line);
	font-size: 14.5px;
}

.edp-unit-specs dt {
	color: var(--edp-muted);
	padding-inline-end: 20px;
}

.edp-unit-specs dd {
	color: var(--edp-ink);
	font-weight: 600;
	text-align: end;
	font-variant-numeric: tabular-nums;
}

.edp-unit-note {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--edp-text);
}

.edp-unit-pdf {
	align-self: flex-start;
}

/* Nobody should have to guess which unit they are writing about. */
.edp-unit-stamp {
	display: grid;
	gap: 3px;
	padding: 14px 16px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--edp-accent) 9%, transparent);
	border: 1px solid color-mix(in srgb, var(--edp-accent) 24%, transparent);
	margin-bottom: 16px;
}

.edp-unit-stamp-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--edp-accent);
}

.edp-unit-stamp-name {
	font-size: 16px;
	color: var(--edp-ink);
}

.edp-unit-form {
	margin-top: auto;
	padding-top: clamp(16px, 2vw, 22px);
	border-top: 1px solid var(--edp-line);
}

@media (max-width: 900px) {
	.edp-unit-box {
		grid-template-columns: minmax(0, 1fr);
	}

	.edp-unit-side {
		max-height: none;
	}

	.edp-unit-stage img {
		max-height: 44vh;
	}

	.edp-plan-filters-foot {
		margin-inline-start: 0;
		width: 100%;
		padding-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.edp-unit-open,
	.edp-unit-shot img,
	.edp-unit-peek {
		transition-duration: 0.01ms !important;
	}

	.edp-unit-open:hover {
		transform: none;
	}
}

/* ============================================================================
   Plans and the unit popup — the considered pass
   A floor plan is a drawing, so it gets matted like one: a white sheet on a
   dark ground, not an image stretched to fill a box. Everything around it is
   kept quiet so the drawing and the figures are what you look at.
   ========================================================================= */

/* ---- Controls: one arrow, ours. Themes paint their own onto every select. */

.edp-project .edp-select select,
.edp-el .edp-select select,
.edp-project .edp-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: none !important;
	text-indent: 0;
}

.edp-project .edp-select select::-ms-expand {
	display: none;
}

.edp-select {
	position: relative;
	min-width: 0;
}

.edp-select select {
	padding: 13px 46px 13px 18px;
	border-radius: 14px;
	border-color: color-mix(in srgb, var(--edp-line) 88%, transparent);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.edp-select-arrow {
	inset-inline-end: 16px;
	width: 15px;
	height: 15px;
	color: var(--edp-ink);
	opacity: 0.5;
	transition: opacity 0.3s ease, color 0.3s ease;
}

.edp-select:hover .edp-select-arrow {
	opacity: 1;
	color: var(--edp-accent);
}

/* ---- The filter bar ---- */

.edp-plan-filters {
	align-items: center;
	gap: clamp(12px, 1.4vw, 22px);
	padding: clamp(12px, 1.4vw, 16px) clamp(14px, 1.6vw, 20px);
	border-radius: 18px;
	background: color-mix(in srgb, var(--edp-surface) 70%, #fff);
	border-color: color-mix(in srgb, var(--edp-line) 60%, transparent);
}

.edp-plan-filter {
	gap: 6px;
	max-width: 230px;
}

.edp-plan-filter-label {
	font-size: 10.5px;
	letter-spacing: 0.16em;
	color: color-mix(in srgb, var(--edp-muted) 90%, var(--edp-ink));
}

.edp-plan-tally {
	font-size: 13px;
	font-weight: 600;
	color: var(--edp-ink);
	white-space: nowrap;
}

.edp-plan-clear {
	position: relative;
	font-size: 13px;
	font-weight: 600;
	color: var(--edp-muted);
	border-bottom: 0;
	transition: color 0.3s ease;
}

.edp-plan-clear:hover {
	color: var(--edp-accent);
}

/* ---- The unit card: a drawing on a sheet, then the numbers ---- */

.edp-unit-open {
	gap: 0;
	padding: 0;
	border-radius: 18px;
	border-color: color-mix(in srgb, var(--edp-line) 72%, transparent);
	background: var(--edp-white);
}

.edp-unit-shot {
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: clamp(12px, 1.4vw, 18px);
	background: linear-gradient(160deg, color-mix(in srgb, var(--edp-surface) 80%, #fff), var(--edp-surface));
	border-bottom: 1px solid color-mix(in srgb, var(--edp-line) 60%, transparent);
}

.edp-unit-shot img {
	padding: 0;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 10px 26px -18px rgba(22, 19, 15, 0.5);
}

.edp-unit-count {
	inset-block-start: 12px;
	inset-inline-start: 12px;
	height: 24px;
	min-width: 24px;
	padding-inline: 7px;
	font-size: 11.5px;
	background: rgba(22, 19, 15, 0.72);
}

.edp-unit-peek {
	inset-block-end: 12px;
	inset-inline-end: 12px;
	width: 32px;
	height: 32px;
	background: rgba(22, 19, 15, 0.72);
}

.edp-unit-head {
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: clamp(15px, 1.6vw, 19px) clamp(15px, 1.6vw, 19px) 0;
}

.edp-unit-name {
	font-size: 17px;
	font-weight: 650;
	letter-spacing: -0.015em;
}

.edp-unit-head .edp-tag {
	flex: 0 0 auto;
}

.edp-unit-line {
	gap: 5px 13px;
	margin-top: 7px;
	padding-inline: clamp(15px, 1.6vw, 19px);
	font-size: 13px;
}

.edp-unit-price {
	margin-top: 12px;
	padding: 13px clamp(15px, 1.6vw, 19px) clamp(15px, 1.6vw, 19px);
	border-top: 1px solid color-mix(in srgb, var(--edp-line) 55%, transparent);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* ---- The popup ---- */

.edp-unit-modal {
	background: rgba(8, 7, 5, 0.82);
	backdrop-filter: blur(10px) saturate(120%);
	padding: clamp(10px, 2.4vw, 34px);
}

.edp-unit-box {
	grid-template-columns: minmax(0, 1.32fr) minmax(340px, 0.82fr);
	width: min(1240px, 100%);
	max-height: min(92vh, 860px);
	border-radius: 24px;
	box-shadow: 0 70px 140px -60px rgba(0, 0, 0, 0.9);
}

.edp-unit-close {
	inset-block-start: 18px;
	inset-inline-end: 18px;
	width: 42px;
	height: 42px;
	border: 1px solid color-mix(in srgb, var(--edp-line) 80%, transparent);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 10px 24px -14px rgba(22, 19, 15, 0.6);
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

.edp-unit-close .edp-svg {
	width: 17px;
	height: 17px;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-unit-close:hover {
	background: var(--edp-ink);
	border-color: transparent;
	color: #fff;
	transform: scale(1.06);
}

.edp-unit-close:hover .edp-svg {
	transform: rotate(90deg);
}

.edp-unit-close:focus-visible {
	outline: 2px solid var(--edp-accent);
	outline-offset: 3px;
}

/* The dark side: the drawing is matted on it like a plan on a table. */
.edp-unit-visual {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	gap: 0;
	padding: 0;
	background:
		radial-gradient(120% 90% at 50% 0%, #24201b 0%, #16130f 62%);
}

.edp-unit-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: clamp(20px, 3vw, 44px);
	border-radius: 0;
	background: none;
	overflow: visible;
}

.edp-unit-stage img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	padding: 0;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 40px 70px -34px rgba(0, 0, 0, 0.85);
	object-fit: contain;
}

.edp-unit-step {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.26);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(14px) saturate(150%);
	color: #fff;
	opacity: 0;
	transition: opacity 0.35s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.4s ease;
}

.edp-unit-step.is-prev { inset-inline-start: clamp(10px, 1.4vw, 18px); }
.edp-unit-step.is-next { inset-inline-end: clamp(10px, 1.4vw, 18px); }

.edp-unit-visual:hover .edp-unit-step,
.edp-unit-visual:focus-within .edp-unit-step {
	opacity: 1;
}

.edp-unit-step:hover {
	background: var(--edp-accent);
	border-color: transparent;
}

.edp-unit-step .edp-svg {
	width: 19px;
	height: 19px;
}

@media (hover: none) {
	.edp-unit-step { opacity: 1; }
}

.edp-unit-tally {
	inset-block-end: clamp(10px, 1.4vw, 16px);
	left: 50%;
	transform: translateX(-50%);
	padding: 5px 14px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(12px);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
}

.edp-unit-thumbs {
	display: flex;
	gap: 8px;
	padding: clamp(12px, 1.4vw, 18px);
	overflow-x: auto;
	scrollbar-width: none;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(0, 0, 0, 0.24);
}

.edp-unit-thumbs::-webkit-scrollbar { display: none; }

.edp-unit-thumb {
	position: relative;
	flex: 0 0 auto;
	width: clamp(58px, 6vw, 76px);
	aspect-ratio: 1 / 1;
	padding: 5px;
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.07);
	opacity: 0.55;
	transition: opacity 0.3s ease, background-color 0.3s ease;
}

.edp-unit-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.edp-unit-thumb:hover { opacity: 0.85; }

.edp-unit-thumb.is-current {
	opacity: 1;
	background: rgba(255, 255, 255, 0.16);
	box-shadow: inset 0 0 0 1px var(--edp-accent);
}

/* The light side: what it is, what it costs, and how to ask about it. */
.edp-unit-side {
	gap: 0;
	padding: clamp(24px, 2.6vw, 38px);
	max-height: min(92vh, 860px);
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--edp-line) 90%, transparent) transparent;
}

.edp-unit-brief {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-inline-end: 48px;
}

.edp-unit-state {
	order: -1;
	margin-bottom: 14px;
	padding: 6px 14px;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	background: color-mix(in srgb, var(--edp-accent) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--edp-accent) 28%, transparent);
}

.edp-unit-title {
	margin: 0;
	font-size: clamp(26px, 2.6vw, 36px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.05;
}

.edp-unit-specs {
	width: 100%;
	margin: clamp(20px, 2.2vw, 28px) 0 0;
	border-top: 1px solid color-mix(in srgb, var(--edp-line) 70%, transparent);
}

.edp-unit-specs dt,
.edp-unit-specs dd {
	padding: 13px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--edp-line) 55%, transparent);
	font-size: 14px;
}

.edp-unit-specs dt {
	font-weight: 500;
	letter-spacing: 0.01em;
}

.edp-unit-specs dd {
	font-weight: 650;
	letter-spacing: -0.01em;
}

.edp-unit-note {
	margin: clamp(16px, 1.8vw, 22px) 0 0;
	font-size: 14px;
	color: var(--edp-muted);
}

.edp-unit-pdf {
	margin-top: clamp(16px, 1.8vw, 22px);
}

/* The enquiry sits in its own room, not tacked on the end. */
.edp-unit-form {
	margin-top: clamp(24px, 2.6vw, 34px);
	padding-top: clamp(22px, 2.4vw, 30px);
	border-top: 1px solid color-mix(in srgb, var(--edp-line) 70%, transparent);
}

.edp-unit-stamp {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 0;
	margin-bottom: 18px;
	border: 0;
	background: none;
}

.edp-unit-stamp-label {
	font-size: 10.5px;
	letter-spacing: 0.16em;
	color: var(--edp-muted);
}

.edp-unit-stamp-name {
	font-size: 15px;
	font-weight: 650;
	color: var(--edp-accent);
	letter-spacing: -0.01em;
}

.edp-unit-form .edp-form-grid {
	gap: 12px;
}

.edp-unit-form .edp-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--edp-muted);
}

.edp-unit-form .edp-form input,
.edp-unit-form .edp-form textarea {
	padding: 12px 14px;
	border-radius: 11px;
	font-size: 14.5px;
	background: color-mix(in srgb, var(--edp-surface) 45%, #fff);
}

.edp-unit-form .edp-form input:focus,
.edp-unit-form .edp-form textarea:focus {
	background: #fff;
}

.edp-unit-form .edp-form textarea {
	min-height: 84px;
	resize: vertical;
}

.edp-unit-form .edp-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
}

.edp-unit-form .edp-form-actions .edp-btn-primary {
	flex: 1 1 190px;
	justify-content: center;
}

.edp-unit-form .edp-form-actions .edp-btn-ghost {
	flex: 0 0 auto;
	font-size: 14px;
	color: var(--edp-muted);
}

@media (max-width: 900px) {
	.edp-unit-box {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
		max-height: 94vh;
	}

	.edp-unit-visual {
		max-height: 46vh;
	}

	.edp-unit-stage {
		padding: clamp(16px, 4vw, 26px);
	}

	.edp-unit-side {
		max-height: none;
		padding: clamp(20px, 5vw, 28px);
	}

	.edp-unit-brief {
		padding-inline-end: 0;
	}

	.edp-unit-close {
		inset-block-start: 12px;
		inset-inline-end: 12px;
	}
}

@media (max-width: 560px) {
	.edp-unit-form .edp-form-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The card's sheet hugs the drawing too, so no plan floats in a white slab. */
.edp-unit-shot {
	display: flex;
	align-items: center;
	justify-content: center;
}

.edp-unit-shot img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Category tabs above the filters — the coarse choice before the fine one. */
.edp-tabs.is-sub {
	margin-bottom: clamp(14px, 1.8vw, 22px);
	background: color-mix(in srgb, var(--edp-surface) 62%, #fff);
	border: 1px solid color-mix(in srgb, var(--edp-line) 60%, transparent);
}

.edp-plan-group[hidden] {
	display: none;
}

/* ============================================================================
   The popup sits on <body>, outside the project, so it inherits none of the
   plugin's resets and everything the theme sets on a plain <button> lands on
   it: padding that turned round buttons into ovals, and a hover colour that
   flooded a whole card. Both are shut off here.
   ========================================================================= */

.edp-unit-modal button:not(.edp-btn),
.edp-project .edp-unit-open,
.edp-project .edp-plan-clear,
.edp-el .edp-unit-open,
.edp-archive .edp-unit-open {
	padding: 0;
	margin: 0;
	line-height: normal;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	min-width: 0;
	min-height: 0;
}

.edp-project :is(.edp-unit-open, .edp-plan-clear),
.edp-project :is(.edp-unit-open, .edp-plan-clear):hover,
.edp-project :is(.edp-unit-open, .edp-plan-clear):focus,
.edp-project :is(.edp-unit-open, .edp-plan-clear):focus-visible,
.edp-project :is(.edp-unit-open, .edp-plan-clear):active,
.edp-archive :is(.edp-unit-open, .edp-plan-clear),
.edp-archive :is(.edp-unit-open, .edp-plan-clear):hover,
.edp-archive :is(.edp-unit-open, .edp-plan-clear):focus,
.edp-archive :is(.edp-unit-open, .edp-plan-clear):focus-visible,
.edp-archive :is(.edp-unit-open, .edp-plan-clear):active,
.edp-el :is(.edp-unit-open, .edp-plan-clear):hover {
	background-image: none !important;
	filter: none !important;
}

.edp-project .edp-unit-open,
.edp-project .edp-unit-open:hover,
.edp-project .edp-unit-open:focus,
.edp-project .edp-unit-open:active,
.edp-archive .edp-unit-open,
.edp-archive .edp-unit-open:hover,
.edp-archive .edp-unit-open:focus,
.edp-archive .edp-unit-open:active {
	background-color: var(--edp-white) !important;
	color: inherit !important;
}

.edp-project .edp-plan-clear,
.edp-project .edp-plan-clear:hover,
.edp-project .edp-plan-clear:focus,
.edp-project .edp-plan-clear:active,
.edp-archive .edp-plan-clear,
.edp-archive .edp-plan-clear:hover,
.edp-archive .edp-plan-clear:focus,
.edp-archive .edp-plan-clear:active {
	background: none !important;
	border: 0 !important;
}

/* The theme's own arrows and paddings on form controls stay off ours. */
.edp-archive select,
.edp-archive select:hover,
.edp-archive select:focus,
.edp-archive input[type="search"],
.edp-archive input[type="search"]:focus {
	background-image: none !important;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
}

.edp-unit-modal .edp-unit-step,
.edp-unit-modal .edp-unit-step:hover,
.edp-unit-modal .edp-unit-close,
.edp-unit-modal .edp-unit-close:hover,
.edp-unit-modal .edp-unit-thumb,
.edp-unit-modal .edp-unit-thumb:hover {
	background-image: none !important;
}

/* ---- The drawing: it fills the room it is given, and its shadow follows its
        own edges rather than the box it sits in. ---- */

.edp-unit-stage img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
	background: none;
	border-radius: 0;
	box-shadow: none;
	filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.55));
}

.edp-unit-shot img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
	background: none;
	border-radius: 0;
	box-shadow: none;
	filter: drop-shadow(0 10px 20px rgba(22, 19, 15, 0.22));
}

/* ---- Round is round ---- */

.edp-unit-step,
.edp-unit-close {
	flex: 0 0 auto;
	padding: 0;
	aspect-ratio: 1 / 1;
}

.edp-unit-step {
	width: 48px;
	height: 48px;
}

.edp-unit-close {
	width: 44px;
	height: 44px;
}

/* Room for the close button so it never lands on the figures. */
.edp-unit-side {
	padding-top: clamp(60px, 5vw, 74px);
}

/* ---- The strip of drawings under the stage ---- */

.edp-unit-thumbs {
	gap: 10px;
	padding: 14px clamp(14px, 2vw, 24px);
	justify-content: center;
	flex-wrap: nowrap;
}

.edp-unit-thumb {
	width: clamp(62px, 6.4vw, 84px);
	padding: 6px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.edp-unit-thumb.is-current {
	background: rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 0 0 1px var(--edp-accent);
}

@media (max-width: 900px) {
	.edp-unit-side {
		padding-top: clamp(52px, 12vw, 66px);
	}

	.edp-unit-thumbs {
		justify-content: flex-start;
	}
}

/* Themes reach these with !important, so the reset has to answer in kind.
   .edp-btn is spared — it is a real button and wants its own padding. */

.edp-unit-modal button:not(.edp-btn),
.edp-project .edp-unit-open,
.edp-project .edp-plan-clear,
.edp-el .edp-unit-open {
	padding: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	line-height: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	font-weight: inherit;
}

.edp-unit-modal .edp-unit-thumb {
	padding: 6px !important;
}

.edp-unit-modal .edp-unit-step,
.edp-unit-modal .edp-unit-close {
	border-radius: 50% !important;
}

/* The box is capped in height, so its row must be too — otherwise the drawing
   side grows past it and squeezes the strip of thumbnails flat. */
.edp-unit-box {
	grid-template-rows: minmax(0, 1fr);
}

.edp-unit-visual,
.edp-unit-side {
	min-height: 0;
}

@media (max-width: 900px) {
	.edp-unit-box {
		grid-template-rows: auto minmax(0, 1fr);
	}
}

/* Flex was stretching the thumbnails out of the shape they were given. */
.edp-unit-thumbs {
	align-items: center;
}

.edp-unit-thumb {
	aspect-ratio: 4 / 3;
	height: auto;
	align-self: center;
}


/* And say it outright, so no reset can flatten a real button again. */
.edp-unit-modal .edp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 28px;
	min-height: 50px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.edp-unit-modal .edp-btn-sm {
	padding: 11px 20px;
	min-height: 42px;
	font-size: 14px;
}

.edp-unit-modal .edp-btn-primary {
	background: var(--edp-accent);
	border-color: transparent;
	color: #fff;
}

.edp-unit-modal .edp-btn-primary:hover {
	filter: brightness(1.08);
}

.edp-unit-modal .edp-btn-outline {
	background: transparent;
	border-color: var(--edp-line);
	color: var(--edp-ink);
}

.edp-unit-modal .edp-btn-outline:hover {
	border-color: var(--edp-accent);
	color: var(--edp-accent);
}

.edp-unit-modal .edp-btn-ghost {
	background: none;
	border-color: transparent;
	color: var(--edp-text);
	padding-inline: 6px;
}

.edp-unit-modal .edp-btn-ghost:hover {
	color: var(--edp-accent);
}

/* ---------------------------------------------- The unit card, read as a spec */
/* Name and status, then the numbers in labelled cells, then the price on its
   own line. A buyer scans the middle row across cards; it has to line up. */

.edp-unit-open {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 0;
	height: 100%;
	border-radius: 16px;
	border: 1px solid color-mix(in srgb, var(--edp-line) 70%, transparent);
	background: var(--edp-white);
	overflow: hidden;
}

.edp-unit-card {
	display: flex;
}

.edp-unit-card > .edp-unit-open {
	width: 100%;
}

.edp-unit-shot {
	aspect-ratio: 5 / 4;
	margin: 0;
	padding: clamp(14px, 1.6vw, 20px);
	border-bottom: 1px solid color-mix(in srgb, var(--edp-line) 55%, transparent);
	background: linear-gradient(165deg, #fff 0%, color-mix(in srgb, var(--edp-surface) 85%, #fff) 100%);
}

/* The count reads as words, at the foot of the drawing where it belongs. */
.edp-unit-count {
	inset-block-start: auto;
	inset-block-end: 12px;
	inset-inline-start: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding-inline: 10px;
	border-radius: 999px;
	background: rgba(22, 19, 15, 0.7);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	backdrop-filter: blur(8px);
}

.edp-unit-count .edp-svg {
	width: 12px;
	height: 12px;
}

.edp-unit-peek {
	inset-block-start: 12px;
	inset-block-end: auto;
	inset-inline-end: 12px;
}

.edp-unit-body {
	display: block;
	padding: clamp(15px, 1.7vw, 19px) clamp(15px, 1.7vw, 19px) 0;
}

.edp-unit-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0;
}

.edp-unit-name {
	font-size: 16.5px;
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--edp-ink);
	text-transform: capitalize;
}

/* Status as a dot and a word — quieter than a filled pill, and readable. */
.edp-unit-state-dot {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--edp-muted);
	white-space: nowrap;
}

.edp-unit-state-dot i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.edp-unit-state-dot.edp-state-available { color: #3f7d52; }
.edp-unit-state-dot.edp-state-few { color: #b0803a; }
.edp-unit-state-dot.edp-state-sold { color: #a3a09b; }

/* The numbers, in cells that line up card to card. */
.edp-unit-spec {
	display: grid;
	grid-template-columns: repeat(var(--edp-cells, 3), minmax(0, 1fr));
	margin-top: clamp(13px, 1.5vw, 16px);
	border: 1px solid color-mix(in srgb, var(--edp-line) 50%, transparent);
	border-radius: 12px;
	overflow: hidden;
	background: color-mix(in srgb, var(--edp-surface) 42%, #fff);
}

.edp-unit-cell {
	display: grid;
	gap: 3px;
	padding: 9px 10px;
	text-align: center;
	border-inline-start: 1px solid color-mix(in srgb, var(--edp-line) 50%, transparent);
}

.edp-unit-cell:first-child {
	border-inline-start: 0;
}

.edp-unit-cell-label {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--edp-muted);
}

.edp-unit-cell-value {
	font-size: 14.5px;
	font-weight: 650;
	color: var(--edp-ink);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

/* Price and the way in. */
.edp-unit-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: clamp(14px, 1.6vw, 18px);
	padding: clamp(13px, 1.4vw, 16px) clamp(15px, 1.7vw, 19px);
	border-top: 1px solid color-mix(in srgb, var(--edp-line) 50%, transparent);
}

.edp-unit-money {
	display: grid;
	gap: 2px;
	text-align: start;
}

.edp-unit-money-label {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--edp-muted);
}

.edp-unit-price {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--edp-ink);
	font-variant-numeric: tabular-nums;
}

.edp-unit-price.is-quiet {
	font-size: 15px;
	font-weight: 600;
	color: var(--edp-muted);
}

.edp-unit-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--edp-surface) 80%, #fff);
	color: var(--edp-ink);
	transition: background-color 0.35s ease, color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-unit-go .edp-svg {
	width: 17px;
	height: 17px;
}

.edp-unit-open:hover .edp-unit-go {
	background: var(--edp-accent);
	color: #fff;
	transform: translateX(3px);
}

.edp-unit-open:hover {
	border-color: color-mix(in srgb, var(--edp-accent) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.edp-unit-open:hover .edp-unit-go {
		transform: none;
	}
}

/* ------------------------------------------- Construction progress, rebuilt */
/* The bar is empty until the section is reached, then it fills and the figure
   climbs with it. Each stage is a card with its site photos under it. */

.edp-section-timeline .edp-heading {
	margin-bottom: clamp(18px, 2.2vw, 26px);
}

.edp-progress {
	padding: clamp(18px, 2.2vw, 28px) clamp(20px, 2.4vw, 30px);
	margin-bottom: clamp(24px, 3vw, 40px);
	border-radius: 18px;
	background: linear-gradient(150deg, #fff, color-mix(in srgb, var(--edp-surface) 80%, #fff));
	border: 1px solid color-mix(in srgb, var(--edp-line) 60%, transparent);
}

.edp-progress-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

.edp-progress-label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--edp-muted);
}

.edp-progress-figure {
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--edp-ink);
	font-variant-numeric: tabular-nums;
}

.edp-progress-track {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--edp-line) 80%, transparent);
	overflow: hidden;
}

.edp-progress-bar {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--edp-accent) 72%, var(--edp-ink)), var(--edp-accent));
	transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-progress.is-filling .edp-progress-bar {
	width: var(--edp-progress, 0%);
}

/* Stages */
.edp-timeline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(14px, 1.8vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.edp-milestone {
	display: grid;
	align-content: start;
	gap: 8px;
	padding: clamp(16px, 1.8vw, 22px);
	border-radius: 16px;
	background: var(--edp-white);
	border: 1px solid color-mix(in srgb, var(--edp-line) 60%, transparent);
	border-top: 3px solid color-mix(in srgb, var(--edp-line) 80%, transparent);
	transition: border-top-color 0.4s ease, box-shadow 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-milestone:hover {
	transform: translateY(-4px);
	box-shadow: 0 26px 46px -34px rgba(22, 19, 15, 0.42);
}

.edp-milestone.is-done { border-top-color: #3f7d52; }
.edp-milestone.is-next { border-top-color: color-mix(in srgb, var(--edp-line) 90%, transparent); }

.edp-milestone-date {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--edp-muted);
	font-variant-numeric: tabular-nums;
}

.edp-milestone-title {
	margin: 0;
	font-size: 17px;
	font-weight: 650;
	letter-spacing: -0.015em;
	line-height: 1.25;
	color: var(--edp-ink);
	text-transform: capitalize;
}

.edp-milestone-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--edp-muted);
}

/* Photos: one leads, the rest sit under it as a strip. */
.edp-milestone-shots {
	display: grid;
	gap: 8px;
	margin-top: 6px;
}

.edp-milestone-shots.has-more {
	grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
}

.edp-milestone-photo {
	position: relative;
	display: block;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	cursor: zoom-in;
	background: var(--edp-surface);
	aspect-ratio: 1 / 1;
}

.edp-milestone-photo.is-lead {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 10;
	border-radius: 14px;
}

.edp-milestone-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-milestone-photo:hover img {
	transform: scale(1.05);
}

.edp-milestone-zoom {
	position: absolute;
	inset-block-end: 10px;
	inset-inline-end: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(22, 19, 15, 0.66);
	color: #fff;
	backdrop-filter: blur(8px);
	opacity: 0;
	transform: translateY(5px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.edp-milestone-zoom .edp-svg {
	width: 15px;
	height: 15px;
}

.edp-milestone-photo:hover .edp-milestone-zoom {
	opacity: 1;
	transform: none;
}

.edp-project .edp-milestone-photo,
.edp-project .edp-milestone-photo:hover,
.edp-project .edp-milestone-photo:focus,
.edp-project .edp-milestone-photo:active {
	padding: 0 !important;
	background-color: var(--edp-surface) !important;
	background-image: none !important;
	box-shadow: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.edp-progress-bar,
	.edp-run-rail-fill,
	.edp-phase-meter-fill {
		transition: none;
	}

	.edp-milestone:hover {
		transform: none;
	}

	.edp-milestone-photo:hover img {
		transform: none;
	}
}

/* --------------------------------------- Site videos on a construction stage */
/* Clips come off a phone, so they stay upright and stand side by side. The row
   divides itself by how many were uploaded — three, four or five. */

.edp-reels {
	display: grid;
	grid-template-columns: repeat(var(--edp-reels, 3), minmax(0, 1fr));
	gap: clamp(8px, 0.9vw, 14px);
	margin-top: 4px;
}

.edp-reel {
	position: relative;
	margin: 0;
	aspect-ratio: 9 / 16;
	border-radius: 14px;
	overflow: hidden;
	background: var(--edp-ink);
	isolation: isolate;
	opacity: 0;
	transform: translateY(22px) scale(0.98);
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--edp-reel-in, 0ms),
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--edp-reel-in, 0ms);
}

.edp-reel.is-in {
	opacity: 1;
	transform: none;
}

.edp-reel-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A low wash at the foot so the play control reads on a bright clip. */
.edp-reel-glow {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 45%;
	background: linear-gradient(to top, rgba(8, 7, 5, 0.55), rgba(8, 7, 5, 0));
	pointer-events: none;
	z-index: 1;
}

.edp-reel-full {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border: 0;
	background: none;
	cursor: pointer;
}

.edp-reel-full-ring {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(34px, 3.4vw, 46px);
	height: clamp(34px, 3.4vw, 46px);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(10px);
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}

.edp-reel:hover .edp-reel-full-ring,
.edp-reel-full:focus-visible .edp-reel-full-ring {
	opacity: 1;
	transform: none;
}

.edp-reel-full:hover .edp-reel-full-ring {
	background: var(--edp-accent);
	border-color: transparent;
}

.edp-reel-full-tri {
	width: 0;
	height: 0;
	margin-inline-start: 3px;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #fff;
}

.edp-project .edp-reel-full,
.edp-project .edp-reel-full:hover,
.edp-project .edp-reel-full:focus,
.edp-project .edp-reel-full:active {
	padding: 0 !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
}

/* Photos, when a stage has them as well, sit under the clips as a small strip. */
.edp-reels + .edp-milestone-shots {
	grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
	margin-top: 8px;
}

@media (max-width: 700px) {
	.edp-reels {
		grid-template-columns: repeat(min(var(--edp-reels, 3), 3), minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.edp-reel {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Key facts answer to the pointer the way the feature cards do: the icon goes
   to ink, and it moves without the twist. */

.edp-project .edp-fact:hover .edp-fact-icon,
.edp-el .edp-fact:hover .edp-fact-icon {
	background: var(--edp-ink);
	border-color: transparent;
	color: #fff;
	transform: scale(1.04);
}

.edp-project .edp-fact:hover .edp-fact-value,
.edp-el .edp-fact:hover .edp-fact-value {
	color: var(--edp-ink);
}

.edp-project .edp-fact:hover .edp-fact-icon img,
.edp-el .edp-fact:hover .edp-fact-icon img {
	filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
	.edp-project .edp-fact:hover .edp-fact-icon {
		transform: none;
	}
}

/* ------------------------------------------------ Sticky bar, second pass */

/* The bar reads as a surface floating over the page rather than a rule on it. */

.edp-sticky-bar {
	background: color-mix(in srgb, var(--edp-white) 88%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--edp-line) 70%, transparent);
	box-shadow: none;
}

.edp-sticky-bar.is-visible {
	box-shadow: 0 14px 34px -22px rgba(22, 19, 15, 0.34);
}

.edp-sticky-inner {
	padding-block: 9px;
}

/* How far down the page the reader is. The only gold on the bar until a
   section is reached, so it carries the eye without competing with the CTA. */

.edp-sticky-progress {
	position: absolute;
	inset-inline: 0;
	inset-block-end: -1px;
	height: 2px;
	background: var(--edp-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.15s linear;
	pointer-events: none;
}

[dir="rtl"] .edp-sticky-progress {
	transform-origin: right center;
}

.edp-sticky-thumb img {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--edp-accent) 30%, transparent),
		0 8px 18px -12px rgba(22, 19, 15, 0.7);
}

.edp-sticky-title {
	font-size: 16px;
	letter-spacing: -0.01em;
}

.edp-sticky-meta {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* The section being read is marked, so the nav says where you are and not
   only where you could go. */

.edp-sticky-nav {
	gap: 26px;
}

.edp-sticky-nav a[hidden] {
	display: none;
}

.edp-sticky-nav a {
	color: var(--edp-muted);
	transition: color 0.3s ease;
}

.edp-sticky-nav a.is-current {
	color: var(--edp-ink);
}

.edp-sticky-nav a.is-current::after {
	transform: scaleX(1);
}

.edp-sticky-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* The price stands apart from the buttons instead of floating loose beside them. */

.edp-sticky-price {
	display: grid;
	gap: 1px;
	text-align: end;
	padding-inline-end: 16px;
	border-inline-end: 1px solid var(--edp-line);
	line-height: 1.15;
}

.edp-sticky-price-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--edp-muted);
}

.edp-sticky-price-value {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--edp-ink);
	white-space: nowrap;
}

@media (max-width: 1080px) {
	.edp-sticky-nav {
		display: none;
	}
}

@media (max-width: 720px) {
	.edp-sticky-price,
	.edp-sticky-brochure {
		display: none;
	}

	.edp-sticky-thumb img {
		width: 40px;
		height: 40px;
		border-radius: 10px;
	}

	.edp-sticky-inner {
		gap: 12px;
	}
}

/* --------------------------------------- Construction progress, third pass */
/* The section opens on a dark band carrying the one figure that matters, then
   the stages follow as numbered cards. A stage says its status in words, and a
   single upright site clip no longer takes the whole width of its card. */

.edp-section-timeline .edp-section-title .edp-heading {
	margin-bottom: 0;
}

/* --- The band --- */

.edp-progress {
	position: relative;
	overflow: hidden;
	padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.8vw, 38px);
	margin-bottom: clamp(26px, 3.2vw, 44px);
	border: 0;
	border-radius: var(--edp-radius-lg, 26px);
	background: linear-gradient(135deg, var(--edp-ink), color-mix(in srgb, var(--edp-ink) 82%, var(--edp-accent)));
	color: #fff;
}

.edp-progress::after {
	content: "";
	position: absolute;
	inset-block-start: -40%;
	inset-inline-end: -10%;
	width: 45%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--edp-accent) 26%, transparent), transparent 68%);
	pointer-events: none;
}

.edp-progress-head {
	position: relative;
	z-index: 1;
	margin-bottom: 16px;
}

.edp-progress-label {
	color: rgba(255, 255, 255, 0.6);
}

.edp-progress-figure {
	font-size: clamp(34px, 5vw, 54px);
	color: color-mix(in srgb, var(--edp-accent) 74%, #fff);
}

.edp-progress-track {
	position: relative;
	z-index: 1;
	height: 10px;
	background: rgba(255, 255, 255, 0.14);
}

.edp-progress-bar {
	background: linear-gradient(90deg, color-mix(in srgb, var(--edp-accent) 62%, #fff), var(--edp-accent));
}

.edp-progress-note {
	position: relative;
	z-index: 1;
	margin: 13px 0 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

/* --- The stages --- */

.edp-timeline {
	grid-template-columns: repeat(var(--edp-tl-cols, 3), minmax(0, 1fr));
	gap: clamp(16px, 2vw, 24px);
}

@media (max-width: 1080px) {
	.edp-timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.edp-timeline {
		grid-template-columns: minmax(0, 1fr);
	}
}

.edp-milestone {
	gap: 10px;
	padding: clamp(18px, 2vw, 24px);
	border-radius: 20px;
	border: 1px solid var(--edp-line);
}

.edp-milestone.is-done,
.edp-milestone.is-current,
.edp-milestone.is-next {
	border-top-color: var(--edp-line);
}

.edp-milestone.is-current {
	border-color: color-mix(in srgb, var(--edp-accent) 32%, var(--edp-line));
}

.edp-milestone::before {
	content: none;
}

/* The number, a hairline, then the status in words. */

.edp-milestone-head {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 2px;
}

.edp-milestone-node {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid transparent;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.edp-milestone-rule {
	flex: 1 1 auto;
	height: 1px;
	background: var(--edp-line);
}

.edp-milestone-state {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	white-space: nowrap;
}

.edp-milestone-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

.edp-milestone.is-done .edp-milestone-node {
	background: color-mix(in srgb, #3f7d52 12%, var(--edp-white));
	border-color: color-mix(in srgb, #3f7d52 32%, transparent);
	color: #2f6440;
}

.edp-milestone.is-done .edp-milestone-state {
	color: #3f7d52;
}

.edp-milestone.is-done .edp-milestone-dot {
	background: #3f7d52;
}

.edp-milestone.is-current .edp-milestone-node {
	background: color-mix(in srgb, var(--edp-accent) 13%, var(--edp-white));
	border-color: color-mix(in srgb, var(--edp-accent) 46%, transparent);
	color: var(--edp-accent);
}

.edp-milestone.is-current .edp-milestone-state {
	color: var(--edp-accent);
}

.edp-milestone.is-current .edp-milestone-dot {
	background: var(--edp-accent);
	animation: edp-stage-pulse 2.6s ease-out infinite;
}

@keyframes edp-stage-pulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--edp-accent) 55%, transparent);
	}
	70%,
	100% {
		box-shadow: 0 0 0 7px transparent;
	}
}

.edp-milestone.is-next .edp-milestone-node {
	background: var(--edp-surface);
	border-color: var(--edp-line);
	color: var(--edp-muted);
}

.edp-milestone.is-next .edp-milestone-state {
	color: var(--edp-muted);
}

.edp-milestone.is-next .edp-milestone-dot {
	box-shadow: inset 0 0 0 1.5px var(--edp-muted);
}

/* ---------------------------------- Construction progress, seventh pass */
/* Read as a report, not a dashboard: the overall figure set in type at the
   head, then each phase as a spread — photograph one side, words the other,
   alternating down a hairline spine. */

/* ---- The head ---- */

.edp-run-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(20px, 3vw, 42px);
	padding-bottom: clamp(20px, 2.6vw, 30px);
	border-bottom: 1px solid var(--edp-line);
}

.edp-run-figure {
	margin: 0;
	justify-self: start;
	display: flex;
	align-items: flex-start;
	direction: ltr;
	line-height: 0.82;
	font-size: clamp(56px, 9vw, 112px);
	font-weight: 700;
	letter-spacing: -0.045em;
	color: var(--edp-ink);
	font-variant-numeric: tabular-nums;
}

.edp-run-figure i {
	font-style: normal;
	font-size: 0.34em;
	font-weight: 600;
	letter-spacing: 0;
	margin-top: 0.25em;
	margin-inline-start: 0.08em;
	color: var(--edp-accent);
}

.edp-run-meta {
	display: grid;
	gap: 10px;
	min-width: 0;
}

.edp-run-word {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--edp-muted);
}

.edp-run-rail {
	position: relative;
	display: block;
	height: 3px;
	border-radius: 999px;
	background: var(--edp-line);
	overflow: hidden;
}

.edp-run-rail-fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--edp-accent) 55%, var(--edp-ink)), var(--edp-accent));
	transition: width 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-run-head.is-filling .edp-run-rail-fill {
	width: var(--edp-progress, 0%);
}

.edp-run-note {
	font-size: 13px;
	color: var(--edp-muted);
}

@media (max-width: 600px) {
	.edp-run-head {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

/* ---- The spreads ---- */

.edp-run {
	position: relative;
	display: grid;
	gap: clamp(38px, 6vw, 84px);
	margin: clamp(30px, 4vw, 52px) 0 0;
	padding: 0;
	list-style: none;
}

/* The spine: one hairline down the middle, only when there is a run to pace. */
.edp-run:not(.is-single)::before {
	content: "";
	position: absolute;
	inset-block: 8px;
	inset-inline-start: 50%;
	width: 1px;
	background: linear-gradient(180deg, transparent, var(--edp-line) 8%, var(--edp-line) 92%, transparent);
}

.edp-phase-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(22px, 3.4vw, 54px);
}

/* Alternating sides give the run its rhythm. */
.edp-run:not(.is-single) .edp-phase-row:nth-child(even) .edp-phase-media {
	order: 2;
}

/* On a run of several phases, a small node marks this spread on the spine. */
.edp-phase-node {
	display: none;
}

.edp-run:not(.is-single) .edp-phase-node {
	position: absolute;
	z-index: 2;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--edp-white, #fff);
	border: 2px solid var(--edp-line);
	transform: translate(50%, -50%);
	pointer-events: none;
}

.edp-run:not(.is-single) .edp-phase-row.is-done .edp-phase-node {
	border-color: #3f7d52;
	background: #3f7d52;
}

.edp-run:not(.is-single) .edp-phase-row.is-current .edp-phase-node {
	border-color: var(--edp-accent);
	background: var(--edp-accent);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--edp-accent) 16%, transparent);
}

/* The number reads with the status, the way a document references a section. */
.edp-phase-no {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--edp-muted);
	font-variant-numeric: tabular-nums;
	padding-inline-end: 12px;
	border-inline-end: 1px solid var(--edp-line);
}

/* ---- The photograph ---- */

.edp-phase-media {
	display: grid;
	gap: 10px;
	min-width: 0;
}

.edp-phase-shot {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--edp-radius-lg, 20px);
	overflow: hidden;
	cursor: pointer;
	background: var(--edp-surface);
	box-shadow: 0 30px 60px -44px rgba(22, 19, 15, 0.55);
	transition: box-shadow 0.4s ease;
}

.edp-phase-shot img,
.edp-phase-shot video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-phase-shot:hover img,
.edp-phase-shot:hover video {
	transform: scale(1.03);
}

.edp-phase-shot:hover {
	box-shadow: 0 38px 70px -40px rgba(22, 19, 15, 0.6);
}

.edp-phase-veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(14, 12, 9, 0.42), transparent 42%);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.edp-phase-shot:hover .edp-phase-veil,
.edp-phase-shot:focus-visible .edp-phase-veil {
	opacity: 1;
}

.edp-phase-open {
	position: absolute;
	z-index: 2;
	inset-block-end: 14px;
	inset-inline-start: 14px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding-inline: 14px;
	border-radius: 999px;
	background: rgba(18, 15, 12, 0.62);
	backdrop-filter: blur(10px);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-phase-open .edp-svg {
	width: 14px;
	height: 14px;
}

.edp-phase-shot:hover .edp-phase-open,
.edp-phase-shot:focus-visible .edp-phase-open {
	opacity: 1;
	transform: none;
}

/* A clip leading the phase was shot upright, so it is shown whole against the
   ink rather than cropped to the middle band of a landscape frame. */
.edp-phase-shot.is-clip {
	background: var(--edp-ink);
}

.edp-phase-shot.is-clip .edp-stage-video {
	object-fit: contain;
}

.edp-phase-shot.is-clip:hover .edp-stage-video {
	transform: none;
}

.edp-phase-row .edp-stage-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 8px;
}

.edp-phase-row .edp-stage-tile {
	aspect-ratio: 4 / 3;
	border-radius: 12px;
}

.edp-phase-row .edp-stage-tile.is-clip {
	background: var(--edp-ink);
}

.edp-phase-row .edp-stage-tile.is-clip .edp-stage-video {
	object-fit: contain;
}

.edp-phase-row .edp-stage-tile.is-clip:hover .edp-stage-video {
	transform: none;
}

/* ---- The words ---- */

.edp-phase-copy {
	display: grid;
	gap: clamp(10px, 1.2vw, 14px);
	justify-items: start;
	min-width: 0;
}

.edp-phase-line {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.edp-phase-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 27px;
	padding-inline: 12px;
	border-radius: 999px;
	border: 1px solid var(--edp-line);
	background: color-mix(in srgb, var(--edp-line) 26%, transparent);
	color: var(--edp-muted);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	white-space: nowrap;
}

.edp-phase-chip i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.edp-phase-row.is-done .edp-phase-chip {
	background: color-mix(in srgb, #3f7d52 12%, transparent);
	border-color: color-mix(in srgb, #3f7d52 34%, transparent);
	color: #2f6440;
}

.edp-phase-row.is-current .edp-phase-chip {
	background: color-mix(in srgb, var(--edp-accent) 13%, transparent);
	border-color: color-mix(in srgb, var(--edp-accent) 44%, transparent);
	color: var(--edp-accent);
}

.edp-phase-row.is-current .edp-phase-chip i {
	animation: edp-stage-pulse 2.6s ease-out infinite;
}

.edp-phase-when {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--edp-muted);
	font-variant-numeric: tabular-nums;
}

.edp-phase-title {
	margin: 0;
	font-size: clamp(21px, 2.4vw, 33px);
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: var(--edp-ink);
}

/* The note is set as a block of text, not a ragged column: it fills the measure
   it is given and both edges hold, so no line trails off short of the others. */
.edp-phase-text {
	margin: 0;
	width: 100%;
	max-width: min(100%, 56ch);
	color: var(--edp-text);
	line-height: 1.7;
	text-align: justify;
	text-align-last: start;
	text-justify: inter-word;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Paragraphs keep the breaks they were written with, spaced rather than gapped. */
.edp-phase-text > p {
	margin: 0;
}

.edp-phase-text > p + p {
	margin-top: 0.85em;
}

/* Short lines look worse stretched than left alone. */
@media (max-width: 600px) {
	.edp-phase-text {
		text-align: start;
		hyphens: none;
	}
}

.edp-phase-meter {
	width: min(100%, 400px);
	display: grid;
	gap: 10px;
	margin-top: 8px;
	padding: 14px 16px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--edp-accent) 5%, var(--edp-surface));
	border: 1px solid color-mix(in srgb, var(--edp-accent) 18%, transparent);
}

.edp-phase-meter-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.edp-phase-meter-word {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--edp-ink);
}

.edp-phase-meter-figure {
	direction: ltr;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	color: var(--edp-ink);
	font-variant-numeric: tabular-nums;
}

.edp-phase-meter-rail {
	position: relative;
	display: block;
	height: 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--edp-ink) 12%, #fff);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

.edp-phase-meter-fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--edp-accent) 62%, #fff), var(--edp-accent));
	box-shadow: 0 0 12px -2px color-mix(in srgb, var(--edp-accent) 70%, transparent);
	transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* المرحلة المكتملة تُقرأ باللون الأخضر نفسه الذي تحمله شارتها */
.edp-phase-row.is-done .edp-phase-meter-fill {
	background: linear-gradient(90deg, #6fae83, #3f7d52);
	box-shadow: 0 0 12px -2px rgba(63, 125, 82, 0.6);
}

.edp-phase-row.is-done .edp-phase-meter {
	background: color-mix(in srgb, #3f7d52 6%, var(--edp-surface));
	border-color: color-mix(in srgb, #3f7d52 22%, transparent);
}

.edp-phase-meter.is-filling .edp-phase-meter-fill {
	width: var(--edp-progress, 0%);
}

.edp-phase-row.is-done .edp-phase-meter-fill {
	background: linear-gradient(90deg, color-mix(in srgb, #3f7d52 60%, var(--edp-ink)), #3f7d52);
}

.edp-phase-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--edp-ink);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	transition: color 0.3s ease, gap 0.3s ease;
}

.edp-phase-cta .edp-svg {
	width: 17px;
	height: 17px;
	color: var(--edp-accent);
	transition: transform 0.3s ease;
}

.edp-phase-cta:hover {
	color: var(--edp-accent);
	gap: 13px;
}

/* A phase with no photographs is set on a quiet sheet so it still reads as a
   block of the report rather than text adrift. */
.edp-phase-row:not(.has-media) {
	grid-template-columns: minmax(0, 1fr);
}

.edp-phase-row:not(.has-media) .edp-phase-copy {
	width: 100%;
	padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 34px);
	border: 1px solid var(--edp-line);
	border-radius: var(--edp-radius-lg, 20px);
	background: color-mix(in srgb, var(--edp-surface) 60%, transparent);
}

@media (max-width: 860px) {
	.edp-run::before {
		display: none;
	}

	.edp-phase-row,
	.edp-run:not(.is-single) .edp-phase-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.edp-run:not(.is-single) .edp-phase-row:nth-child(even) .edp-phase-media {
		order: 0;
	}

	.edp-run:not(.is-single) .edp-phase-node {
		display: none;
	}

	.edp-phase-shot {
		aspect-ratio: 16 / 10;
	}

	.edp-phase-meter {
		width: 100%;
	}
}

.edp-milestone-date {
	color: var(--edp-accent);
}

.edp-milestone-title {
	font-size: clamp(17px, 1.4vw, 19.5px);
	line-height: 1.28;
}

/* --- The media --- */

.edp-milestone-media {
	margin-top: 6px;
}

.edp-milestone-photo.is-lead {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 14px;
}

.edp-milestone-shots {
	grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
	gap: 7px;
	margin-top: 8px;
}

/* -------------------------------------- Construction progress, fourth pass */
/* The band runs the full width of the section, and the media under each stage
   is one lead with one strip beneath it rather than three stacked blocks. */

.edp-progress {
	max-width: none;
}

.edp-progress-foot {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin-top: 13px;
}

.edp-progress-note {
	margin: 0;
}

/* One pip per stage, in the order they are listed below. */

.edp-progress-pips {
	display: flex;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.edp-progress-pip {
	width: 26px;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
}

.edp-progress-pip.is-done {
	background: color-mix(in srgb, var(--edp-accent) 62%, #fff);
}

.edp-progress-pip.is-current {
	background: var(--edp-accent);
}

/* --- One strip, two shapes, one height --- */

.edp-milestone-media {
	--edp-strip: 74px;
	margin-top: 8px;
}

.edp-stage-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 7px;
}

.edp-stage-strip.is-lead-row {
	--edp-strip: 168px;
	margin-top: 0;
	gap: 9px;
}

.edp-stage-tile {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: var(--edp-strip);
	height: var(--edp-strip);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 11px;
	overflow: hidden;
	background: var(--edp-surface);
	cursor: zoom-in;
}

/* A clip keeps the upright shape it was shot in, and matches the row height. */

.edp-stage-tile.is-clip {
	width: calc(var(--edp-strip) * 9 / 16);
	background: var(--edp-ink);
	cursor: pointer;
}

.edp-stage-tile img,
.edp-stage-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-stage-tile:hover img,
.edp-stage-tile:hover .edp-stage-video {
	transform: scale(1.07);
}

.edp-stage-play {
	position: absolute;
	inset-block-end: 6px;
	inset-inline-start: 6px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 4px 10px -6px rgba(8, 7, 5, 0.9);
}

.edp-stage-play::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 4px 0 4px 6.5px;
	border-color: transparent transparent transparent var(--edp-ink);
}

.edp-stage-strip.is-lead-row .edp-stage-play {
	width: 34px;
	height: 34px;
	inset-block-end: 9px;
	inset-inline-start: 9px;
}

.edp-stage-strip.is-lead-row .edp-stage-play::after {
	border-width: 6px 0 6px 10px;
}

/* The tile that stands for the ones there was no room for. */

.edp-stage-more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(22, 19, 15, 0.62);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	backdrop-filter: blur(2px);
}

@media (max-width: 480px) {
	.edp-milestone-media {
		--edp-strip: 64px;
	}

	.edp-stage-strip.is-lead-row {
		--edp-strip: 140px;
	}
}

/* ------------------------------------------------------ The viewer, rebuilt */
/* It sits above everything, on a proper black, and it carries what the thing
   that was clicked knew about itself: which stage, when, and the note on it. */

.edp-lightbox {
	z-index: 100000;
	background: rgba(6, 5, 4, 0.94);
	backdrop-filter: blur(6px);
	padding: clamp(64px, 8vh, 96px) clamp(16px, 4vw, 60px) clamp(24px, 4vh, 48px);
}

/* --- The head: where you are, and the way out --- */

.edp-lightbox-bar {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: clamp(13px, 1.8vw, 22px) clamp(16px, 3vw, 32px);
}

.edp-lightbox-count {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.55);
	font-variant-numeric: tabular-nums;
}

.edp-lightbox-count[hidden] {
	display: none;
}

.edp-lightbox-count b {
	color: #fff;
	font-weight: 700;
}

.edp-lightbox-count i {
	font-style: normal;
	margin-inline: 7px;
	opacity: 0.35;
}

/* --- The controls --- */

.edp-lightbox-close,
.edp-lightbox-nav {
	width: 46px;
	height: 46px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #fff;
	backdrop-filter: blur(8px);
	transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-lightbox-close {
	position: static;
	flex: 0 0 auto;
}

.edp-lightbox-close:hover,
.edp-lightbox-nav:hover {
	background: var(--edp-accent);
	border-color: transparent;
	transform: scale(1.06);
}

.edp-lightbox-close .edp-svg,
.edp-lightbox-nav .edp-svg {
	width: 20px;
	height: 20px;
	stroke-width: 1.5;
}

.edp-lightbox-nav {
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.edp-lightbox-nav:hover {
	transform: translateY(-50%) scale(1.06);
}

.edp-lightbox-nav.is-prev {
	inset-inline-start: clamp(10px, 2.4vw, 30px);
}

.edp-lightbox-nav.is-next {
	inset-inline-end: clamp(10px, 2.4vw, 30px);
}

/* --- The media, and what is said about it --- */

.edp-lightbox-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 2vh, 22px);
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	min-height: 0;
}

.edp-lightbox-stage {
	flex: 0 1 auto;
	min-height: 0;
}

.edp-lightbox img {
	max-height: min(72vh, 100%);
	border-radius: 14px;
	box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}

.edp-lightbox-caption {
	flex: 0 0 auto;
	display: grid;
	gap: 5px;
	max-width: 680px;
	text-align: center;
}

.edp-lightbox-caption[hidden] {
	display: none;
}

.edp-lightbox-meta {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--edp-accent) 62%, #fff);
}

.edp-lightbox-title {
	font-size: clamp(17px, 2vw, 21px);
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	font-family: var(--e-global-typography-accent-font-family, inherit);
}

.edp-lightbox-note {
	font-size: 14.5px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 640px) {
	.edp-lightbox-close,
	.edp-lightbox-nav {
		width: 40px;
		height: 40px;
	}

	.edp-lightbox img {
		max-height: 62vh;
	}
}

/* ------------------------------------------- Construction stage, the view */
/* Same box as the floor plans, so a stage is read the way a unit is read:
   the media on the left with its strip, the facts on the right. */

.edp-unit-modal.is-stage .edp-unit-box {
	grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.72fr);
	width: min(1140px, 100%);
}

.edp-unit-modal.is-stage .edp-unit-stage video {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	background: #000;
	border: 0;
}

/* The status pill takes the colour of the status it names. */

.edp-unit-modal.is-stage .edp-unit-state.is-done {
	color: #3f7d52;
	background: color-mix(in srgb, #3f7d52 11%, transparent);
	border-color: color-mix(in srgb, #3f7d52 30%, transparent);
}

.edp-unit-modal.is-stage .edp-unit-state.is-next {
	color: var(--edp-muted);
	background: color-mix(in srgb, var(--edp-line) 34%, transparent);
	border-color: color-mix(in srgb, var(--edp-line) 90%, transparent);
}

.edp-unit-modal.is-stage .edp-unit-state[hidden],
.edp-unit-modal.is-stage .edp-unit-specs[hidden],
.edp-unit-modal.is-stage .edp-unit-note[hidden],
.edp-unit-modal.is-stage .edp-unit-thumbs[hidden] {
	display: none;
}

/* The note reads in the panel the way it was typed, breaks and all. */
.edp-unit-modal.is-stage .edp-unit-note {
	white-space: pre-line;
	line-height: 1.7;
}

/* A clip in the strip keeps its shape and says so. */

.edp-unit-thumb.is-clip {
	background: var(--edp-ink);
}

.edp-unit-thumb.is-clip video,
.edp-unit-thumb-blank {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--edp-ink);
}

.edp-unit-thumb .edp-stage-play {
	inset-block-end: 4px;
	inset-inline-start: 4px;
	width: 16px;
	height: 16px;
}

.edp-unit-thumb .edp-stage-play::after {
	border-width: 3px 0 3px 5px;
}

/* ------------------------------------------- The stage cards, from outside */

/* The lead says what it opens rather than leaving it to be guessed. */

.edp-milestone-photo.is-lead {
	cursor: pointer;
	aspect-ratio: 3 / 2;
}

.edp-milestone-photo.is-lead.is-clip {
	background: var(--edp-ink);
}

.edp-milestone-photo.is-lead .edp-stage-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.edp-milestone-photo.is-lead .edp-stage-play {
	inset-block-end: 12px;
	inset-inline-start: 12px;
	width: 40px;
	height: 40px;
}

.edp-milestone-photo.is-lead .edp-stage-play::after {
	border-width: 7px 0 7px 11px;
}

.edp-milestone-open {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-end: 12px;
	display: inline-flex;
	align-items: center;
	padding: 8px 15px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--edp-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
	box-shadow: 0 10px 22px -14px rgba(22, 19, 15, 0.9);
	opacity: 0;
	transform: translateY(7px);
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-milestone:hover .edp-milestone-open,
.edp-milestone-photo.is-lead:focus-visible .edp-milestone-open {
	opacity: 1;
	transform: translateY(0);
}

/* The status reads as a pill on the card too, not as loose small print. */

.edp-milestone-state {
	padding: 5px 11px 5px 9px;
	border-radius: 999px;
	border: 1px solid transparent;
}

.edp-milestone.is-done .edp-milestone-state {
	background: color-mix(in srgb, #3f7d52 10%, transparent);
	border-color: color-mix(in srgb, #3f7d52 24%, transparent);
}

.edp-milestone.is-current .edp-milestone-state {
	background: color-mix(in srgb, var(--edp-accent) 11%, transparent);
	border-color: color-mix(in srgb, var(--edp-accent) 30%, transparent);
}

.edp-milestone.is-next .edp-milestone-state {
	background: color-mix(in srgb, var(--edp-line) 30%, transparent);
	border-color: color-mix(in srgb, var(--edp-line) 85%, transparent);
}

.edp-milestone-node {
	font-size: 12px;
}

.edp-stage-tile {
	cursor: pointer;
}

@media (max-width: 860px) {
	.edp-unit-modal.is-stage .edp-unit-box {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------- The viewer controls, matched to the stage panel */
/* A theme's own button rules were widening these into ovals. The size is now
   pinned from every side so nothing can stretch them, and the finish is the
   one the floor-plan and stage panels use. */

.edp-lightbox .edp-lightbox-close,
.edp-lightbox .edp-lightbox-nav {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 46px;
	min-width: 46px;
	max-width: 46px;
	height: 46px;
	min-height: 46px;
	max-height: 46px;
	padding: 0;
	margin: 0;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	line-height: 1;
	border: 1px solid rgba(255, 255, 255, 0.26);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(14px) saturate(150%);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-lightbox .edp-lightbox-close:hover,
.edp-lightbox .edp-lightbox-nav:hover {
	background: var(--edp-accent);
	border-color: transparent;
}

.edp-lightbox .edp-lightbox-close .edp-svg,
.edp-lightbox .edp-lightbox-nav .edp-svg {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	stroke-width: 1.6;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-lightbox .edp-lightbox-close:hover .edp-svg {
	transform: rotate(90deg);
}

.edp-lightbox .edp-lightbox-close:focus-visible,
.edp-lightbox .edp-lightbox-nav:focus-visible {
	outline: 2px solid var(--edp-accent);
	outline-offset: 3px;
}

.edp-lightbox .edp-lightbox-nav {
	transform: translateY(-50%);
}

.edp-lightbox .edp-lightbox-nav:hover {
	transform: translateY(-50%) scale(1.06);
}

.edp-lightbox .edp-lightbox-close:hover {
	transform: scale(1.06);
}

@media (max-width: 640px) {
	.edp-lightbox .edp-lightbox-close,
	.edp-lightbox .edp-lightbox-nav {
		width: 40px;
		min-width: 40px;
		max-width: 40px;
		height: 40px;
		min-height: 40px;
		max-height: 40px;
	}
}

/* The same pinning for the panel controls, in case the theme reaches them too. */

.edp-unit-modal .edp-unit-close,
.edp-unit-modal .edp-unit-step {
	box-sizing: border-box;
	flex: 0 0 auto;
	padding: 0;
	margin: 0;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	line-height: 1;
}

.edp-unit-modal .edp-unit-close {
	min-width: 42px;
	max-width: 42px;
	min-height: 42px;
	max-height: 42px;
}

.edp-unit-modal .edp-unit-step {
	min-width: 46px;
	max-width: 46px;
	min-height: 46px;
	max-height: 46px;
}

/* The photograph leaves room for the head and the caption, at a strength a
   theme's own image rules cannot undo. */

.edp-lightbox .edp-lightbox-stage img {
	max-width: 100%;
	max-height: min(70vh, 100%);
	width: auto;
	height: auto;
	object-fit: contain;
}

.edp-lightbox .edp-lightbox-stage video {
	max-height: 70vh;
}

/* -------------------------------------------------------------- Right to left */
/* The layout is written in logical properties, so flipping the page mostly
   takes care of itself. What is left is the typography and the drawings:
   Arabic letters join, so any tracking pulls the words apart, and an arrow
   drawn pointing one way has to point the other. */

[dir="rtl"] .edp-project,
[dir="rtl"] .edp-archive,
[dir="rtl"] .edp-el,
[dir="rtl"] .edp-unit-modal,
[dir="rtl"] .edp-lightbox,
[dir="rtl"] .edp-pdf,
[dir="rtl"] .edp-project *,
[dir="rtl"] .edp-archive *,
[dir="rtl"] .edp-el *,
[dir="rtl"] .edp-unit-modal *,
[dir="rtl"] .edp-lightbox *,
[dir="rtl"] .edp-pdf * {
	letter-spacing: 0;
}

/* Every drawn arrow — the up-and-out in the buttons, the steps in the viewers,
   the previous / next pills — mirrors with the page. */
[dir="rtl"] .edp-arrow,
[dir="rtl"] .edp-lightbox-nav .edp-svg,
[dir="rtl"] .edp-unit-step .edp-svg,
[dir="rtl"] .edp-nav-pill .edp-svg,
[dir="rtl"] .edp-round-btn .edp-svg,
[dir="rtl"] .edp-milestone-open .edp-svg,
[dir="rtl"] .edp-link .edp-svg {
	transform: scaleX(-1);
}

/* The bars fill from the right, so the bright end of the metal sits there too. */
[dir="rtl"] .edp-progress-bar,
[dir="rtl"] .edp-meter-fill {
	background: linear-gradient(270deg, color-mix(in srgb, var(--edp-accent) 72%, var(--edp-ink)), var(--edp-accent));
}

[dir="rtl"] .edp-run-rail-fill,
[dir="rtl"] .edp-phase-meter-fill {
	background: linear-gradient(270deg, color-mix(in srgb, var(--edp-accent) 62%, #fff), var(--edp-accent));
}

[dir="rtl"] .edp-phase-row.is-done .edp-phase-meter-fill {
	background: linear-gradient(270deg, #6fae83, #3f7d52);
}

/* Arabic ascends and descends further, so the running text gets more air, and
   the smallest labels stand a size up since there are no capitals to carry them. */
[dir="rtl"] .edp-milestone-text,
[dir="rtl"] .edp-feature-text,
[dir="rtl"] .edp-brochure-blurb,
[dir="rtl"] .edp-description-text p {
	line-height: 1.9;
}

[dir="rtl"] .edp-progress-label,
[dir="rtl"] .edp-progress-note,
[dir="rtl"] .edp-milestone-date,
[dir="rtl"] .edp-milestone-state,
[dir="rtl"] .edp-fact-label,
[dir="rtl"] .edp-sticky-meta {
	font-size: 12.5px;
}

/* Prices and figures inside Arabic sentences keep their own direction. */
[dir="rtl"] .edp-fact-value,
[dir="rtl"] .edp-progress-figure,
[dir="rtl"] .edp-phase-meter-figure,
[dir="rtl"] .edp-sticky-price-value,
[dir="rtl"] .edp-chip-price {
	unicode-bidi: plaintext;
}

/* ------------------------------------------------------------ Units, all of them */
/* The [edp_units] page: the same unit cards, every project's, with a search
   box standing first in the filter row and the project written on each card. */

.edp-ua {
	padding-block: clamp(10px, 2vw, 24px);
}

/* With a search box and up to five filters, one line is a squeeze. The search
   takes the first line to itself and the filters flow beneath it, wrapping
   evenly rather than shrinking until their words clip. */
.edp-ua-toolbar {
	align-items: end;
	row-gap: clamp(12px, 1.6vw, 18px);
}

.edp-ua-toolbar .edp-ua-search {
	flex: 1 1 100%;
	min-width: 0;
}

.edp-ua-toolbar .edp-plan-filter {
	flex: 1 1 178px;
	min-width: 158px;
	max-width: none;
}

.edp-ua-toolbar .edp-plan-filters-foot {
	flex: 0 0 auto;
}

.edp-ua-search {
	position: relative;
	display: block;
	flex: 1 1 240px;
	min-width: 200px;
}

.edp-ua-search .edp-svg {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 14px;
	width: 17px;
	height: 17px;
	transform: translateY(-50%);
	color: var(--edp-muted);
	pointer-events: none;
}

.edp-ua-search input {
	width: 100%;
	height: 46px;
	padding-inline: 42px 16px;
	border: 1px solid var(--edp-line);
	border-radius: 12px;
	background: var(--edp-white, #fff);
	color: var(--edp-ink);
	font: inherit;
	font-size: 14.5px;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.edp-ua-search input:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--edp-accent) 55%, var(--edp-line));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--edp-accent) 14%, transparent);
}

.edp-ua-search input::placeholder {
	color: var(--edp-muted);
}

.edp-unit-project {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--edp-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.edp-unit-project .edp-svg {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	color: var(--edp-accent);
}

.edp-unit-project i {
	font-style: normal;
	opacity: 0.6;
}

.edp-unit-visit {
	margin-top: 4px;
}

.edp-unit-visit + .edp-unit-pdf {
	margin-top: 8px;
}

/* The drawing sits framed on a soft sheet, whatever its colours are, and the
   whole card answers a hover by lifting rather than changing colour. */
.edp-ua .edp-unit-shot {
	background:
		radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--edp-accent) 5%, transparent), transparent 70%),
		color-mix(in srgb, var(--edp-surface) 88%, var(--edp-accent));
	border-bottom: 1px solid var(--edp-line);
}

.edp-ua .edp-unit-shot img {
	object-fit: contain;
	padding: clamp(10px, 1.4vw, 18px);
	box-sizing: border-box;
}

.edp-ua .edp-unit-open {
	border-radius: var(--edp-radius, 14px);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.edp-ua .edp-unit-open:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--edp-accent) 45%, var(--edp-line));
	box-shadow: 0 30px 55px -38px rgba(22, 19, 15, 0.45);
}

.edp-ua .edp-unit-open:hover .edp-unit-name {
	color: var(--edp-accent);
}

@media (max-width: 640px) {
	.edp-ua-search {
		flex-basis: 100%;
	}
}

/* ------------------------------------------------ Life on hover and on tap */
/* نبضة واحدة مشتركة، تستعملها كل الأيقونات. */
@keyframes edp-beat {
	0%, 100% { scale: 1; }
	18%      { scale: 1.16; }
	34%      { scale: 1.02; }
	52%      { scale: 1.12; }
	70%      { scale: 1; }
}

/* --- أيقونات المزايا والخدمات: تكبر وتنبض تحت المؤشر --- */

.edp-feature .edp-feature-icon,
.edp-fact .edp-fact-icon {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease, box-shadow 0.35s ease;
	transform-origin: center;
}

.edp-feature:hover .edp-feature-icon,
.edp-feature:focus-within .edp-feature-icon {
	animation: edp-beat 1.5s ease-in-out infinite;
	box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--edp-accent) 60%, transparent);
}

.edp-fact:hover .edp-fact-icon,
.edp-fact:focus-within .edp-fact-icon {
	animation: edp-beat 1.5s ease-in-out infinite;
}

/* أي أيقونة أخرى في صفحة المشروع أو في بطاقات المشاريع */
.edp-project .edp-card:hover .edp-card-icon,
.edp-project .edp-unit-card:hover .edp-unit-go,
.edp-archive .edp-unit-card:hover .edp-unit-go,
.edp-project .edp-nearby-item:hover .edp-svg,
.edp-project .edp-detail:hover .edp-svg,
.edp-project .edp-brochure:hover .edp-brochure-icon {
	animation: edp-beat 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.edp-feature:hover .edp-feature-icon,
	.edp-fact:hover .edp-fact-icon,
	.edp-project .edp-card:hover .edp-card-icon,
	.edp-project .edp-unit-card:hover .edp-unit-go,
	.edp-archive .edp-unit-card:hover .edp-unit-go,
	.edp-project .edp-nearby-item:hover .edp-svg,
	.edp-project .edp-brochure:hover .edp-brochure-icon {
		animation: none;
		scale: 1.08;
	}
}

/* --- التفاصيل الأساسية: ضغطة تكبّر السطر --- */

.edp-detail {
	cursor: pointer;
	border-radius: 12px;
	transition: background-color 0.3s ease, padding 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.edp-detail:hover,
.edp-detail:focus-visible {
	background: color-mix(in srgb, var(--edp-accent) 8%, transparent);
	padding-inline: 12px;
}

.edp-detail:hover .edp-detail-label {
	color: var(--edp-accent);
	font-size: 1.08em;
}

.edp-detail:hover .edp-detail-value {
	font-size: 1.14em;
	font-weight: 700;
}

.edp-detail:focus-visible {
	outline: 2px solid var(--edp-accent);
	outline-offset: 2px;
}

.edp-detail .edp-detail-label,
.edp-detail .edp-detail-value {
	transition: font-size 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

.edp-detail.is-lifted {
	background: color-mix(in srgb, var(--edp-accent) 10%, transparent);
	padding-inline: 12px;
}

.edp-detail.is-lifted .edp-detail-label {
	font-size: 1.12em;
	color: var(--edp-accent);
}

.edp-detail.is-lifted .edp-detail-value {
	font-size: 1.22em;
	font-weight: 700;
}

/* --- الوصول إلى الخريطة من شريط الحقائق --- */

.edp-fact.is-place,
.edp-fact.is-goto {
	cursor: pointer;
}

.edp-fact.is-place:hover .edp-fact-value {
	color: var(--edp-accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.edp-section-location.is-flagged {
	animation: edp-flag 1.6s ease-out;
}

@keyframes edp-flag {
	0%   { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--edp-accent) 55%, transparent); }
	100% { box-shadow: inset 0 0 0 3px transparent; }
}

/* ------------------------------------------ The plugin's own drawn glyphs */
/* Sized to sit where an icon-font glyph sat, and inheriting the colour so the
   hover state carries it the same way. */

.edp-fact-icon.is-drawn .edp-svg,
.edp-feature-icon.is-drawn .edp-svg {
	width: 22px;
	height: 22px;
	stroke-width: 1.6;
}

.edp-features.is-inline .edp-feature-icon.is-drawn .edp-svg,
.edp-features.is-plain .edp-feature-icon.is-drawn .edp-svg {
	width: 19px;
	height: 19px;
}