/*
 * EC Our Projects — Editorial Yearbook
 *
 * Visual treatment for the home "Recent Work by Show" preview AND the
 * standalone /our-projects/ page. Both surfaces share the same per-show
 * row markup; modifiers tune what's visible (hero band, year markers,
 * sticky nav appear only on the standalone page).
 *
 * Palette uses the full EC logo system: navy (#04171A) + gold (#F9BE17)
 * + green (#39DBB0) + white + warm-white. CSS variables come from
 * prod/mu-plugins/ec/our-projects-styles.php → wp_add_inline_style().
 *
 * Typography: Fraunces (variable serif) for display, Plus Jakarta Sans
 * for body & eyebrow. Both load via Google Fonts in the mu-plugin.
 *
 * The .ec-our-projects parent prefix scopes every selector here so we
 * never bleed into OneUp/WPBakery component styles.
 */

/* =========================================================================
 *  ROOT WRAPPER + RESET
 * ========================================================================= */
.ec-our-projects {
	font-family: var(--ec-font-body);
	color: var(--ec-navy);
	background: var(--ec-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
}
.ec-our-projects *,
.ec-our-projects *::before,
.ec-our-projects *::after { box-sizing: border-box; }
.ec-our-projects img { max-width: 100%; height: auto; display: block; }
.ec-our-projects a { color: inherit; text-decoration: none; }

/* =========================================================================
 *  HERO BAND  —  standalone page only
 *  Dark navy with a faint mint grid texture; gold rule below.
 * ========================================================================= */
.ec-our-projects .ec-hero {
	position: relative;
	padding: 96px 24px 88px;
	background: var(--ec-navy);
	color: var(--ec-white);
	text-align: center;
	overflow: hidden;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ec-our-projects .ec-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(57,219,176,0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(57,219,176,0.05) 1px, transparent 1px);
	background-size: 80px 80px, 80px 80px;
	background-position: center;
	pointer-events: none;
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.ec-our-projects .ec-hero > * { position: relative; z-index: 1; }
.ec-our-projects .ec-hero-eyebrow {
	font-family: var(--ec-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ec-gold-text);
	margin-bottom: 18px;
}
.ec-our-projects .ec-hero-title {
	font-family: var(--ec-font-display);
	font-weight: 700;
	font-size: clamp(40px, 7vw, 88px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--ec-white);
	margin: 0 auto 22px;
	max-width: 920px;
	font-variation-settings: "opsz" 144, "SOFT" 50;
}
.ec-our-projects .ec-hero-title em {
	font-style: italic;
	font-weight: 500;
	color: var(--ec-green-text);
	font-variation-settings: "opsz" 144, "SOFT" 100;
}
.ec-our-projects .ec-hero-sub {
	font-size: 17px;
	line-height: 1.5;
	max-width: 620px;
	margin: 0 auto;
	color: rgba(255,255,255,0.78);
}
.ec-our-projects .ec-hero-meta {
	display: flex;
	gap: 28px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 40px;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
}
.ec-our-projects .ec-hero-meta strong {
	display: block;
	font-family: var(--ec-font-display);
	font-size: 32px;
	font-weight: 700;
	color: var(--ec-green-text);
	letter-spacing: -0.01em;
	margin-bottom: 2px;
	text-transform: none;
}
.ec-our-projects .ec-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 96px;
	height: 3px;
	background: var(--ec-gold);
}

/* =========================================================================
 *  CONTAINER
 *  Generous padding; sticky nav reserves a right gutter at ≥1024px.
 * ========================================================================= */
.ec-our-projects-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px 24px 96px;
	position: relative;
}
.ec-our-projects[data-ec-mode="preview"] .ec-our-projects-inner {
	padding-top: 24px;
}

/* Reserve gutters at desktop for year marker (left) + sticky show-nav (right). */
@media ( min-width: 1280px ) {
	.ec-our-projects[data-ec-mode="full"] .ec-our-projects-inner {
		padding-left: 300px;   /* room for the timeline rail + year stations */
		padding-right: 40px;   /* right show-nav dropped (Website 02) → reclaim the width */
	}
}
@media ( min-width: 1024px ) and ( max-width: 1279px ) {
	.ec-our-projects[data-ec-mode="full"] .ec-our-projects-inner {
		padding-left: 32px;
		padding-right: 32px;
	}
}

/* =========================================================================
 *  PREVIEW HEADER (home page only)
 *  Replaces the hero band; matches the existing 6940 "[vc_custom_heading]"
 *  pattern (eyebrow + animated h2).
 * ========================================================================= */
.ec-our-projects .ec-preview-header {
	margin: 24px 0 48px;
	text-align: center;
}
.ec-our-projects .ec-preview-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ec-gold-text);
	margin-bottom: 12px;
}
.ec-our-projects .ec-preview-title {
	font-family: var(--ec-font-display);
	font-weight: 700;
	font-size: clamp(32px, 4.2vw, 52px);
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--ec-navy);
	margin: 0 auto;
	max-width: 760px;
	font-variation-settings: "opsz" 96;
}
.ec-our-projects .ec-preview-title em {
	font-style: italic;
	color: var(--ec-green-text);
	font-weight: 600;
}

/* =========================================================================
 *  SHOW ROW
 *  Each show = one <article> with eyebrow + display heading + sub + rule
 *  + photo grid. Year-marker numeral pinned in left margin (≥1280px only).
 * ========================================================================= */
.ec-our-projects .ec-show-row {
	position: relative;
	padding: 56px 0 64px;
}
.ec-our-projects .ec-show-row + .ec-show-row { border-top: 1px solid var(--ec-rule-dim); }

/* Warm-white tint every 3rd show for vertical rhythm */
.ec-our-projects .ec-show-row:nth-child(3n+1) {
	background: linear-gradient(180deg, transparent 0, transparent 6%, var(--ec-warm-white) 6%, var(--ec-warm-white) 94%, transparent 94%);
}

/* Year-marker numeral — large outline, color rotates by recency.
 * Pinned in the left gutter at desktop (≥1280px); hidden on mobile.
 * Sized to fit 4 chars at the chosen font + a 24px gap to the show title. */
.ec-our-projects .ec-year-marker {
	position: absolute;
	top: 56px;
	left: 0;
	width: 220px;
	font-family: var(--ec-font-display);
	font-weight: 900;
	font-size: 76px;
	line-height: 1;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--ec-rule-dim);
	text-stroke: 1.5px var(--ec-rule-dim);
	user-select: none;
	pointer-events: none;
	opacity: 0.9;
	text-align: right;
	font-variation-settings: "opsz" 96;
	overflow: hidden;
	white-space: nowrap;
}
@media ( max-width: 1279px ) {
	.ec-our-projects .ec-year-marker { display: none; }
}
/* Hide year markers in preview mode (home block) — they're a yearbook-page
 * decoration that only makes sense alongside the standalone hero band. */
.ec-our-projects[data-ec-mode="preview"] .ec-year-marker { display: none; }
@media ( min-width: 1280px ) {
	/* TIMELINE WIDGET (Website 02) — the left gutter becomes a real vertical
	 * timeline: a continuous rail, a node per show, and the year numeral hung
	 * beside the node as a "station" shown once per year. */

	/* Year numeral → left-aligned station label, once per year. */
	.ec-our-projects[data-ec-mode="full"] .ec-year-marker {
		left: -244px;
		width: 190px;
		top: 58px;
		text-align: left;
		font-size: 44px;
		font-weight: 800;
	}
	.ec-our-projects[data-ec-mode="full"] .ec-show-row:not(.ec-show-row--year-start) .ec-year-marker {
		display: none;
	}

	/* The rail — gold (newest) → green → fade, down the left gutter. */
	.ec-our-projects[data-ec-mode="full"] .ec-our-projects-inner::before {
		content: "";
		position: absolute;
		left: 40px;
		top: 74px;
		bottom: 130px;
		width: 2px;
		background: linear-gradient(180deg, var(--ec-gold) 0%, var(--ec-green) 22%, var(--ec-rule-dim) 60%);
		border-radius: 2px;
	}

	/* A node per show, sitting on the rail. */
	.ec-our-projects[data-ec-mode="full"] .ec-show-row::before {
		content: "";
		position: absolute;
		left: -265px;
		top: 72px;
		width: 11px;
		height: 11px;
		border-radius: 50%;
		background: var(--ec-white);
		border: 2px solid var(--ec-rule-dim);
		z-index: 3;
	}
	/* Year-start node is the larger "station" stop. */
	.ec-our-projects[data-ec-mode="full"] .ec-show-row--year-start::before {
		width: 15px;
		height: 15px;
		left: -267px;
		top: 70px;
	}
	.ec-our-projects[data-ec-mode="full"] .ec-show-row[data-year-rank="current"]::before {
		background: var(--ec-gold);
		border-color: var(--ec-gold);
	}
	.ec-our-projects[data-ec-mode="full"] .ec-show-row[data-year-rank="previous"]::before {
		background: var(--ec-green);
		border-color: var(--ec-green);
	}
}
.ec-our-projects .ec-show-row[data-year-rank="current"] .ec-year-marker {
	color: var(--ec-gold-text);
	-webkit-text-stroke: 0;
	opacity: 1;
}
.ec-our-projects .ec-show-row[data-year-rank="previous"] .ec-year-marker {
	color: var(--ec-green-text);
	-webkit-text-stroke: 0;
	opacity: 0.95;
}
.ec-our-projects .ec-show-row[data-year-rank="older"] .ec-year-marker {
	-webkit-text-stroke: 2px var(--ec-navy);
	opacity: 0.4;
}

/* Show header */
.ec-our-projects .ec-show-header { margin-bottom: 56px; max-width: 760px; }
.ec-our-projects .ec-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	/* Client "Final Remarks" #11b: brand-color text only. Brand gold fails AA on the
	   light show rows, so use the brand green ink (#13805F) — AA-safe brand color. */
	color: var(--ec-green-text);
	margin-bottom: 14px;
}
.ec-our-projects .ec-show-title {
	font-family: var(--ec-font-display);
	font-weight: 700;
	font-size: clamp(38px, 5.5vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--ec-navy);
	margin: 0 0 16px;
	font-variation-settings: "opsz" 128;
}
.ec-our-projects .ec-show-sub {
	font-size: 16px;
	line-height: 1.55;
	color: var(--ec-text-dim);
	margin: 0 0 28px;
	max-width: 620px;
}
.ec-our-projects .ec-show-sub a {
	color: var(--ec-green-text);
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	transition: color 160ms ease;
}
.ec-our-projects .ec-show-sub a:hover { color: var(--ec-navy); }
.ec-our-projects .ec-rule {
	width: 60px;
	height: 2px;
	background: var(--ec-gold);
	margin-top: 28px;
}

/* =========================================================================
 *  PHOTO GRID
 *  12-column on desktop. Modifiers reflect photo count.
 *
 *  --4 (hero + 2 medium + 1 thumb):   |  HERO  | M1 |
 *                                     |  HERO  | M2 |
 *                                     |     THUMB-WIDE       |
 *
 *  --3 (hero + 2 medium, no thumbs):  |  HERO  | M1 |
 *                                     |  HERO  | M2 |
 *
 *  --5+ (hero + 2 medium + 3+ thumbs)
 * ========================================================================= */
.ec-our-projects .ec-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);   /* uniform gallery — every booth photo the same size, 2-up = larger images (Website 02) */
	gap: 18px;
}
.ec-our-projects .ec-tile {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	background: var(--ec-warm-white);
	transition: transform 220ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 220ms ease;
	cursor: pointer;
}
.ec-our-projects .ec-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.22,0.61,0.36,1), filter 280ms ease;
	will-change: transform;
}
.ec-our-projects .ec-tile::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--ec-green);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 320ms cubic-bezier(0.22,0.61,0.36,1);
	z-index: 1;
}
.ec-our-projects .ec-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 48px -16px rgba(4,23,26,0.28);
}
.ec-our-projects .ec-tile:hover img { transform: scale(1.04); filter: brightness(1.04); }
.ec-our-projects .ec-tile:hover::after { transform: scaleX(1); }
.ec-our-projects .ec-tile:focus-visible {
	outline: 2px solid var(--ec-green);
	outline-offset: 4px;
}

/* =========================================================================
 *  Photo-count-specific grid layouts.
 *  Each grid uses explicit template areas so the hero and adjacent medium
 *  tiles share a common total height — no orphan empty space below shorter
 *  tiles. Aspect ratios are picked so the hero defines the row height and
 *  the medium tiles fill exactly half of it each.
 * ========================================================================= */

/* Uniform tile box — every photo renders at the same 4:3 size regardless of
 * the hero/medium/thumb role the renderer assigns. The named-area collage was
 * replaced per Website 02 ("make the images the same size"). */
.ec-our-projects .ec-grid .ec-tile {
	aspect-ratio: 4 / 3;
	grid-area: auto;
}
/* 1-photo show: let the lone tile span full width with a calmer cinematic ratio. */
.ec-our-projects .ec-grid--1 {
	grid-template-columns: 1fr;
}
.ec-our-projects .ec-grid--1 .ec-tile {
	aspect-ratio: 16 / 9;
}

/* Case-study badge — green chip in top-right of tile */
.ec-our-projects .ec-tile-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 14px;
	background: var(--ec-green);
	color: var(--ec-navy);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	box-shadow: 0 6px 20px -6px rgba(4,23,26,0.45);
	z-index: 2;
	transform: translateY(-3px) translateZ(0);
	opacity: 0;
	transition: opacity 260ms ease, transform 260ms ease;
}
.ec-our-projects .ec-tile:hover .ec-tile-badge,
.ec-our-projects .ec-tile:focus-visible .ec-tile-badge {
	opacity: 1;
	transform: translateY(0);
}
.ec-our-projects .ec-tile--has-cta .ec-tile-badge {
	opacity: 1;
	transform: translateY(0);
}
.ec-our-projects .ec-tile-badge svg { width: 10px; height: 10px; }

/* =========================================================================
 *  STICKY SHOW-NAV RAIL  —  standalone page only, desktop ≥1024px
 * ========================================================================= */
.ec-our-projects .ec-show-nav {
	display: none; /* hidden on mobile + on preview mode */
}
@media ( min-width: 1024px ) {
	.ec-our-projects[data-ec-mode="full"] .ec-show-nav {
		display: block;
		position: fixed;
		top: 140px;
		right: max(24px, calc((100vw - 1280px) / 2 + 32px));
		width: 210px;
		max-height: calc(100vh - 200px);
		overflow-y: auto;
		padding: 18px 14px;
		z-index: 9;
		font-size: 13px;
		background: rgba(255,255,255,0.85);
		backdrop-filter: blur(12px) saturate(120%);
		-webkit-backdrop-filter: blur(12px) saturate(120%);
		border-radius: 8px;
		border: 1px solid rgba(4,23,26,0.06);
		box-shadow: 0 10px 32px -10px rgba(4,23,26,0.18);
		opacity: 0;
		transform: translateX(20px);
		pointer-events: none;
		transition: opacity 280ms ease, transform 280ms ease;
	}
	.ec-our-projects[data-ec-mode="full"] .ec-show-nav.is-revealed {
		opacity: 1;
		transform: translateX(0);
		pointer-events: auto;
	}
}
.ec-our-projects .ec-show-nav-year {
	margin-bottom: 22px;
	padding-left: 14px;
	border-left: 1px solid var(--ec-rule-dim);
}
.ec-our-projects .ec-show-nav-year-label {
	font-family: var(--ec-font-display);
	font-weight: 700;
	font-size: 14px;
	color: var(--ec-text-dim);
	margin-bottom: 8px;
	letter-spacing: 0.04em;
}
.ec-our-projects .ec-show-nav-year ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ec-our-projects .ec-show-nav-year li {
	margin-bottom: 2px;
}
.ec-our-projects .ec-show-nav-year a {
	position: relative;
	display: block;
	padding: 6px 0 6px 16px;
	font-size: 13px;
	color: var(--ec-text-dim);
	transition: color 180ms ease, transform 180ms ease;
}
.ec-our-projects .ec-show-nav-year a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--ec-rule-dim);
	transform: translateY(-50%);
	transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.ec-our-projects .ec-show-nav-year a:hover {
	color: var(--ec-navy);
	transform: translateX(2px);
}
.ec-our-projects .ec-show-nav-year a.is-active {
	color: var(--ec-navy);
	font-weight: 600;
}
.ec-our-projects .ec-show-nav-year a.is-active::before {
	background: var(--ec-green);
	border-color: var(--ec-green-text);
	transform: translateY(-50%) scale(1.4);
	box-shadow: 0 0 0 4px var(--ec-green-tint);
}

/* =========================================================================
 *  CLOSING CTA
 * ========================================================================= */
.ec-our-projects .ec-closing {
	margin-top: 80px;
	padding: 64px 32px;
	background: var(--ec-navy);
	color: var(--ec-white);
	border-radius: 6px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.ec-our-projects .ec-closing::before {
	content: "";
	position: absolute;
	inset: -50% -10% auto auto;
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, var(--ec-green-tint), transparent 60%);
	pointer-events: none;
}
.ec-our-projects .ec-closing > * { position: relative; }
.ec-our-projects .ec-closing-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ec-green-text);
	margin-bottom: 14px;
}
.ec-our-projects .ec-closing .ec-closing-title,
.ec-our-projects h2.ec-closing-title {
	font-family: var(--ec-font-display) !important;
	font-weight: 700;
	font-size: clamp(28px, 4.2vw, 44px) !important;
	line-height: 1.1;
	letter-spacing: -0.02em;
	max-width: 720px;
	margin: 0 auto 32px;
	color: var(--ec-white) !important;
}
.ec-our-projects .ec-closing .ec-closing-title em {
	font-style: italic;
	color: var(--ec-green-text) !important;
	font-weight: 500;
}
.ec-our-projects .ec-closing .ec-cta-btn,
.ec-our-projects a.ec-cta-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 16px 28px !important;
	background: var(--ec-gold) !important;
	color: var(--ec-navy) !important;
	font-family: var(--ec-font-body) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase;
	border-radius: 999px;
	text-decoration: none !important;
	line-height: 1 !important;
	transition: transform 200ms ease, background 200ms ease;
}
.ec-our-projects .ec-cta-btn::after {
	content: "→";
	transition: transform 220ms ease;
	font-weight: 400;
}
.ec-our-projects .ec-cta-btn:hover {
	background: var(--ec-green) !important;
	transform: translateY(-2px);
}
.ec-our-projects .ec-cta-btn:hover::after { transform: translateX(4px); }

/* =========================================================================
 *  LIGHTBOX
 * ========================================================================= */
.ec-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(4,23,26,0.94);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 60px 80px;
	cursor: zoom-out;
}
.ec-lightbox.is-open { display: flex; }
.ec-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 40px 120px -30px rgba(57,219,176,0.30);
}
.ec-lightbox-close,
.ec-lightbox-prev,
.ec-lightbox-next {
	position: absolute;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.18);
	color: var(--ec-white);
	font-size: 24px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease;
}
.ec-lightbox-close { top: 24px; right: 24px; font-size: 28px; }
.ec-lightbox-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.ec-lightbox-next  { right: 24px; top: 50%; transform: translateY(-50%); }
.ec-lightbox-close:hover,
.ec-lightbox-prev:hover,
.ec-lightbox-next:hover {
	background: var(--ec-green);
	border-color: var(--ec-green-text);
	color: var(--ec-navy);
}

/* =========================================================================
 *  RESPONSIVE  —  collapse to single-column gracefully
 * ========================================================================= */
@media ( max-width: 1023px ) {
	.ec-our-projects .ec-year-marker { display: none; }
	.ec-our-projects-inner { padding-left: 20px; padding-right: 20px; }
	.ec-our-projects .ec-grid { grid-template-columns: repeat(2, 1fr); }
}
@media ( max-width: 768px ) {
	.ec-our-projects .ec-show-row { padding: 40px 0 48px; }
	.ec-our-projects .ec-show-header { margin-bottom: 32px; }
	/* Single column on phones — uniform grid needs no named-area resets. */
	.ec-our-projects .ec-grid,
	.ec-our-projects .ec-grid--1,
	.ec-our-projects .ec-grid--3,
	.ec-our-projects .ec-grid--4 {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.ec-our-projects .ec-grid .ec-tile { aspect-ratio: 4 / 3; }
	.ec-our-projects .ec-hero { padding: 56px 20px 48px; }
	.ec-our-projects .ec-tile-badge { font-size: 10px; padding: 4px 10px; }
}

/* =========================================================================
 *  PRINT — readable monochrome
 * ========================================================================= */
@media print {
	.ec-our-projects { color: #000; background: #fff; }
	.ec-our-projects .ec-show-nav,
	.ec-our-projects .ec-year-marker,
	.ec-our-projects .ec-tile-badge { display: none; }
	.ec-our-projects .ec-hero { background: #fff; color: #000; }
	.ec-our-projects .ec-tile { break-inside: avoid; }
}

/* =========================================================================
 *  RENTAL CATALOG PLATE (2026-07 client round)
 *  Navy plate between the show timeline and the closing CTA. Cards sort
 *  ascending by footprint (the size ladder); each carries a footprint
 *  glyph drawn on ONE shared scale (largest frontage = 64px), so relative
 *  booth sizes read truthfully at a glance. Quote-first: cards link to
 *  /get-your-free-quote/. Gold tint = commerce; closing keeps green.
 *  NOTE: text inside <a> needs !important font props (OneUp zeroes
 *  font-size / empties family on anchors — see CLAUDE.md).
 * ========================================================================= */
.ec-our-projects .ec-rentals {
	margin-top: 80px;
	padding: 64px 40px;
	background: var(--ec-navy);
	color: var(--ec-white);
	border-radius: 6px;
	position: relative;
	overflow: hidden;
	--ec-gold-text: var(--ec-gold);
	--ec-green-text: var(--ec-green);
}
.ec-our-projects .ec-rentals::before {
	content: "";
	position: absolute;
	inset: -50% auto auto -10%;
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, var(--ec-gold-tint), transparent 60%);
	pointer-events: none;
}
.ec-our-projects .ec-rentals > * { position: relative; }
.ec-our-projects .ec-rentals-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ec-gold-text);
	margin-bottom: 14px;
}
.ec-our-projects .ec-rentals h2.ec-rentals-title {
	font-family: var(--ec-font-display) !important;
	font-weight: 700;
	font-size: clamp(28px, 4.2vw, 44px) !important;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
	color: var(--ec-white) !important;
}
.ec-our-projects .ec-rentals-title em {
	font-style: italic;
	color: var(--ec-gold-text);
	font-weight: 500;
}
.ec-our-projects .ec-rentals-sub {
	max-width: 640px;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
}
.ec-our-projects .ec-rentals-grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 40px 0 0;
	padding: 0;
}
.ec-our-projects .ec-rental-card {
	margin: 0;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	overflow: hidden;
	transition: transform 200ms ease, border-color 200ms ease;
}
.ec-our-projects .ec-rental-card:hover {
	transform: translateY(-4px);
	border-color: rgba(249, 190, 23, 0.45);
}
.ec-our-projects a.ec-rental-link {
	display: block;
	text-decoration: none !important;
	color: inherit;
}
.ec-our-projects a.ec-rental-link:focus-visible {
	outline: 2px solid var(--ec-gold);
	outline-offset: 2px;
}
.ec-our-projects .ec-rental-photo {
	display: block;
	aspect-ratio: 4 / 3;
	background: #fff;
	overflow: hidden;
}
.ec-our-projects .ec-rental-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease;
}
.ec-our-projects .ec-rental-card:hover .ec-rental-photo img { transform: scale(1.04); }
.ec-our-projects .ec-rental-meta { display: block; padding: 16px 18px 18px; }
.ec-our-projects .ec-rental-stamp {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 8px;
}
.ec-our-projects .ec-rental-size {
	font-family: var(--ec-font-display) !important;
	font-size: 26px !important;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--ec-white);
	font-variant-numeric: tabular-nums;
}
.ec-our-projects .ec-rental-size small {
	font-size: 11px !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ec-gold-text);
	margin-left: 4px;
}
.ec-our-projects .ec-rental-glyph {
	display: inline-block;
	border: 1.5px solid var(--ec-gold);
	background: var(--ec-gold-tint);
	border-radius: 2px;
	transition: background 200ms ease;
}
.ec-our-projects .ec-rental-card:hover .ec-rental-glyph { background: var(--ec-gold); }
.ec-our-projects .ec-rental-name {
	display: block;
	font-family: var(--ec-font-body) !important;
	font-size: 15px !important;
	font-weight: 700;
	color: var(--ec-white);
	margin: 2px 0 8px;
}
.ec-our-projects .ec-rental-config {
	display: inline-block;
	font-family: var(--ec-font-body) !important;
	font-size: 10px !important;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 3px;
	padding: 3px 8px;
}
.ec-our-projects .ec-rental-cta {
	display: block;
	margin-top: 12px;
	font-family: var(--ec-font-body) !important;
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ec-gold-text);
}
.ec-our-projects .ec-rental-card:hover .ec-rental-cta { color: var(--ec-green-text); }
.ec-our-projects .ec-rentals-foot { margin-top: 28px; }
.ec-our-projects a.ec-rentals-more {
	font-family: var(--ec-font-body) !important;
	font-size: 13px !important;
	font-weight: 600;
	color: var(--ec-green-text) !important;
	text-decoration: none !important;
}
.ec-our-projects a.ec-rentals-more:hover { text-decoration: underline !important; }

@media ( max-width: 1279px ) {
	.ec-our-projects .ec-rentals-grid { grid-template-columns: repeat(3, 1fr); }
}
@media ( max-width: 1023px ) {
	.ec-our-projects .ec-rentals-grid { grid-template-columns: repeat(2, 1fr); }
}
@media ( max-width: 639px ) {
	.ec-our-projects .ec-rentals { padding: 40px 20px; }
	.ec-our-projects .ec-rentals-grid { grid-template-columns: 1fr; }
}
@media ( prefers-reduced-motion: reduce ) {
	.ec-our-projects .ec-rental-card,
	.ec-our-projects .ec-rental-photo img,
	.ec-our-projects .ec-rental-glyph { transition: none; }
	.ec-our-projects .ec-rental-card:hover { transform: none; }
	.ec-our-projects .ec-rental-card:hover .ec-rental-photo img { transform: none; }
}