/* Buttons, hero, cards, grids and the reusable page sections. */

/* Buttons */

.ec-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.95em 1.9em;
	background: var(--ec-ink);
	color: var(--ec-white);
	border: 1px solid var(--ec-ink);
	font-size: var(--ec-fs-sm);
	font-weight: 500;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background var(--ec-dur) var(--ec-ease),
		border-color var(--ec-dur) var(--ec-ease), color var(--ec-dur) var(--ec-ease);
}

.ec-btn:hover {
	background: var(--ec-green);
	border-color: var(--ec-green);
	color: var(--ec-white);
}

.ec-btn--green {
	background: var(--ec-green-dark);
	border-color: var(--ec-green-dark);
}

.ec-btn--green:hover {
	background: var(--ec-green);
	border-color: var(--ec-green);
}

.ec-btn--ghost {
	background: transparent;
	color: currentColor;
	border-color: currentColor;
}

.ec-btn--ghost:hover {
	background: var(--ec-ink);
	border-color: var(--ec-ink);
	color: var(--ec-white);
}

.ec-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-size: var(--ec-fs-sm);
	font-weight: 500;
}

.ec-arrow-link svg {
	transition: transform var(--ec-dur) var(--ec-ease);
}

.ec-arrow-link:hover svg {
	transform: translateX(5px);
}

/* Hero */

.ec-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(92vh, 900px);
	padding-block: calc(var(--ec-header-h) + var(--ec-sp-6)) var(--ec-sp-6);
	color: var(--ec-white);
	overflow: hidden;
}

.ec-hero__media,
.ec-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ec-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(20, 20, 20, 0.5) 0%,
		rgba(20, 20, 20, 0.18) 42%,
		rgba(20, 20, 20, 0.62) 100%
	);
}

.ec-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--ec-sp-5);
	width: 100%;
	align-items: end;
}

@media (min-width: 1000px) {
	.ec-hero__inner {
		grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.8fr);
		gap: var(--ec-sp-7);
	}
}

.ec-hero__title {
	margin: 0;
	font-weight: 500;
}

.ec-hero__sub {
	max-width: 46ch;
	margin-top: var(--ec-sp-3);
	font-size: var(--ec-fs-lead);
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.86);
}

.ec-hero__card {
	padding: var(--ec-sp-4);
	background: var(--ec-white);
	color: var(--ec-ink);
}

.ec-hero__card h3 {
	margin-bottom: var(--ec-sp-3);
	font-size: var(--ec-fs-h4);
}

/* Page banner (inner pages) */

.ec-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 34vh;
	padding-block: calc(var(--ec-header-h) + var(--ec-sp-6)) var(--ec-sp-6);
	background: var(--ec-bg-warm);
}

.ec-banner--media {
	min-height: 48vh;
	color: var(--ec-white);
	/* The intro scale and the scroll parallax move the image; without the clip
	   it spilled into the next section and widened phones to 395px. */
	overflow: hidden;
}

.ec-banner--media .ec-banner__media,
.ec-banner--media .ec-banner__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A flat tint is not enough on a bright interior shot — the header and the
   title both sit over this, so darken the top and bottom specifically. */
.ec-banner--media .ec-banner__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(20, 20, 20, 0.62) 0%,
		rgba(20, 20, 20, 0.42) 45%,
		rgba(20, 20, 20, 0.76) 100%
	);
}

.ec-banner__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.ec-banner__title {
	margin: 0;
	max-width: 20ch;
}

/* Breadcrumb */

.ec-crumbs {
	margin-bottom: var(--ec-sp-3);
	font-size: var(--ec-fs-sm);
}

.ec-crumbs span + span::before {
	content: "/";
	margin: 0 0.6em;
	opacity: 0.6;
}

/* Column intro (Who we are / Mission / Values) */

.ec-cols {
	display: grid;
	gap: var(--ec-sp-5);
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.ec-cols--2,
	.ec-cols--3,
	.ec-cols--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ec-sp-6);
	}
}

@media (min-width: 980px) {
	.ec-cols--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1060px) {
	.ec-cols--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ec-col__title {
	padding-top: var(--ec-sp-3);
	border-top: 1px solid var(--ec-line);
	font-size: var(--ec-fs-sm);
	font-weight: 500;
	color: var(--ec-ink-faint);
}

/* Big statement */

.ec-statement {
	max-width: 24ch;
	font-size: var(--ec-fs-h2);
	font-weight: 500;
	line-height: var(--ec-lh-snug);
	letter-spacing: var(--ec-ls-tight);
}

.ec-statement--wide {
	max-width: 34ch;
}

/* Split image + text */

.ec-split {
	display: grid;
	gap: var(--ec-sp-5);
	align-items: start;
	grid-template-columns: 1fr;
}

/* Only the image-and-text pairing wants optical centring. */
.ec-split--center {
	align-items: center;
}

@media (min-width: 960px) {
	.ec-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(3rem, 1rem + 5vw, 6rem);
	}

	.ec-split--reverse .ec-split__media,
	.ec-split--reverse > :first-child {
		order: 2;
	}
}

.ec-split__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Project cards + grid */

.ec-grid {
	display: grid;
	gap: var(--ec-sp-4);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.ec-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.ec-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* No panel behind the caption: a filled rectangle running past the end of the
   text is the most template-looking thing a card can do. The image carries the
   card; the caption sits on the page. */
.ec-card {
	position: relative;
	display: block;
}

.ec-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.ec-card--tall .ec-card__media {
	aspect-ratio: 3 / 4;
}

.ec-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ec-ease);
}

.ec-card:hover .ec-card__media img {
	transform: scale(1.05);
}

.ec-card__body {
	padding: var(--ec-sp-3) 0 var(--ec-sp-2);
}

.ec-card__meta {
	display: flex;
	justify-content: space-between;
	gap: var(--ec-sp-2);
	margin-bottom: 0.3em;
	color: var(--ec-ink-faint);
	font-size: var(--ec-fs-sm);
	font-variant-numeric: tabular-nums;
}

.ec-card__title {
	margin: 0;
	font-size: var(--ec-fs-h4);
	font-weight: 500;
}

.ec-card:hover .ec-card__title {
	color: var(--ec-green);
}

/* Sector / service tiles */

.ec-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 360px;
	padding: var(--ec-sp-4);
	color: var(--ec-white);
	overflow: hidden;
}

.ec-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ec-ease);
}

.ec-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 20, 20, 0.16) 0%, rgba(20, 20, 20, 0.2) 35%, rgba(20, 20, 20, 0.76) 100%);
}

.ec-tile:hover img {
	transform: scale(1.05);
}

.ec-tile__body {
	position: relative;
	z-index: 2;
}

.ec-tile__title {
	margin: 0;
	font-size: var(--ec-fs-h3);
	font-weight: 500;
}

/* Service list (numbered rows) */

.ec-rows {
	border-top: 1px solid var(--ec-line);
}

.ec-row {
	display: grid;
	gap: var(--ec-sp-2) var(--ec-sp-4);
	padding-block: var(--ec-sp-4);
	border-bottom: 1px solid var(--ec-line);
	grid-template-columns: 1fr;
}

@media (min-width: 820px) {
	.ec-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		align-items: start;
	}
}

.ec-row__num {
	color: var(--ec-green);
	font-size: var(--ec-fs-sm);
	font-variant-numeric: tabular-nums;
}

.ec-row__title {
	margin: 0;
	font-size: var(--ec-fs-h4);
	font-weight: 500;
}

.ec-row__text {
	margin: 0;
	color: var(--ec-ink-soft);
}

/* Stats */

.ec-stats {
	display: grid;
	gap: var(--ec-sp-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
	.ec-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--ec-sp-5);
	}
}

.ec-stat__value {
	display: block;
	font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--ec-ls-tight);
}

.ec-stat__label {
	display: block;
	margin-top: var(--ec-sp-2);
	font-size: var(--ec-fs-sm);
	color: var(--ec-ink-soft);
}

.ec-section--ink .ec-stat__label {
	color: rgba(255, 255, 255, 0.62);
}

/* Team */

.ec-person__media {
	aspect-ratio: 3 / 4;
	background: var(--ec-bg-alt);
	overflow: hidden;
}

.ec-person__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter var(--ec-dur) var(--ec-ease), transform 0.9s var(--ec-ease);
}

.ec-person:hover .ec-person__media img {
	filter: grayscale(0);
	transform: scale(1.04);
}

.ec-person__name {
	margin: var(--ec-sp-3) 0 0.2em;
	font-size: var(--ec-fs-h4);
	font-weight: 500;
}

.ec-person__role {
	margin: 0;
	color: var(--ec-ink-faint);
	font-size: var(--ec-fs-sm);
}

/* Press / insights */

.ec-press {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--ec-line);
}

.ec-press__item {
	display: grid;
	gap: var(--ec-sp-1) var(--ec-sp-4);
	padding-block: var(--ec-sp-4);
	border-bottom: 1px solid var(--ec-line);
	grid-template-columns: 1fr;
	transition: padding-left var(--ec-dur) var(--ec-ease);
}

@media (min-width: 820px) {
	.ec-press__item {
		grid-template-columns: 12rem minmax(0, 1fr) 2rem;
		align-items: center;
	}

	a.ec-press__item:hover {
		padding-left: var(--ec-sp-2);
	}

	div.ec-press__item {
		grid-template-columns: 12rem minmax(0, 1fr);
	}
}

.ec-press__source {
	display: flex;
	flex-direction: column;
	color: var(--ec-ink);
	font-size: var(--ec-fs-sm);
	font-weight: 500;
}

.ec-press__date {
	color: var(--ec-ink-faint);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.ec-press__title {
	margin: 0;
	font-size: var(--ec-fs-h4);
	font-weight: 500;
}

/* Client logo wall */

.ec-logos {
	display: grid;
	gap: 1px;
	background: var(--ec-line);
	border: 1px solid var(--ec-line);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px) {
	.ec-logos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ec-logos__item {
	display: grid;
	place-items: center;
	min-height: 120px;
	padding: var(--ec-sp-3);
	background: var(--ec-white);
}

.ec-logos__item img {
	max-height: 46px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter var(--ec-dur) var(--ec-ease), opacity var(--ec-dur) var(--ec-ease);
}

.ec-logos__item:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* CTA band */

.ec-cta {
	display: grid;
	gap: var(--ec-sp-4);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.ec-cta {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--ec-sp-6);
	}
}

/* Project detail */

/* Most projects have one or two facts filled in, so the columns size to their
   content instead of reserving four equal slots and leaving three empty. */
.ec-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ec-sp-4) var(--ec-sp-7);
	padding-block: var(--ec-sp-5);
	border-block: 1px solid var(--ec-line);
}

.ec-facts--sparse {
	border-block: 0;
	padding-block: 0 var(--ec-sp-5);
}

.ec-fact {
	min-width: 0;
}

.ec-fact__label {
	display: block;
	margin-bottom: 0.2em;
	color: var(--ec-ink-faint);
	font-size: var(--ec-fs-sm);
}

.ec-fact__value {
	display: block;
	font-size: 1.0625rem;
	font-weight: 500;
}

.ec-gallery {
	display: grid;
	gap: var(--ec-sp-3);
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.ec-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ec-gallery__item--full {
		grid-column: 1 / -1;
	}
}

.ec-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}

.ec-gallery__item--full img {
	aspect-ratio: 16 / 7;
}

/* Filters */

.ec-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ec-sp-1) var(--ec-sp-3);
	margin-bottom: var(--ec-sp-5);
	padding-bottom: var(--ec-sp-3);
	border-bottom: 1px solid var(--ec-line);
	font-size: var(--ec-fs-sm);
}

.ec-filters a {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* measured 23px before — too small to hit reliably */
	color: var(--ec-ink-faint);
	font-weight: 500;
}

.ec-filters a:hover,
.ec-filters a[aria-current="page"] {
	color: var(--ec-ink);
}

/* Forms */

.ec-form {
	display: grid;
	gap: var(--ec-sp-3);
}

@media (min-width: 760px) {
	.ec-form__pair {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ec-sp-3);
	}
}

.ec-form label {
	display: block;
	margin-bottom: 0.4em;
	font-size: var(--ec-fs-sm);
	font-weight: 500;
	color: var(--ec-ink-soft);
}

.ec-form input,
.ec-form select,
.ec-form textarea {
	width: 100%;
	padding: 0.9em 1em;
	background: var(--ec-white);
	/* --ec-line is 1.1:1 on white; WCAG 1.4.11 wants 3:1 for a control boundary. */
	border: 1px solid #b4b6ae;
	color: var(--ec-ink);
	font-family: inherit;
	font-size: var(--ec-fs-base);
	transition: border-color var(--ec-dur) var(--ec-ease);
}

.ec-form input:focus-visible,
.ec-form select:focus-visible,
.ec-form textarea:focus-visible {
	border-color: var(--ec-green-dark);
	outline: 2px solid var(--ec-green-dark);
	outline-offset: 2px;
}

.ec-form textarea {
	min-height: 150px;
	resize: vertical;
}

/* Scroll reveals live in motion.css. */

/* Pagination */

.ec-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ec-sp-1);
	margin-top: var(--ec-sp-6);
	font-size: var(--ec-fs-sm);
}

.ec-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 0.5em;
	border: 1px solid var(--ec-line);
}

.ec-pagination .current,
.ec-pagination .page-numbers:hover {
	background: var(--ec-ink);
	border-color: var(--ec-ink);
	color: var(--ec-white);
}

/* Attribution under a stat band — the figures are sector averages */
.ec-stats__note {
	margin-top: var(--ec-sp-4);
	color: var(--ec-ink-faint);
	font-size: var(--ec-fs-sm);
}

.ec-section--ink .ec-stats__note {
	color: rgba(255, 255, 255, 0.62);
}