/**
 * Ecoleas — About artboard
 *
 * The About design was authored fluid: clamp() padding, auto-fit grids and a
 * max-width shell. That makes it the reference for how the system behaves at
 * every width, and it is why the site-wide footer is taken from this page.
 * Values below are lifted from the supplied design unchanged.
 *
 * CONTENTS
 *   01  Hero
 *   02  Our story
 *   03  Our philosophy
 *   04  Craftsmanship + founder's note
 *   05  Closing CTA
 *   06  Responsive layer
 */

/* =============================================================================
   01  HERO
   A full-width 5:4 photograph, the copy block beneath it, and the wordmark
   centred at the foot of the section. Warm faint ground behind all three.
   ============================================================================= */

.ec-abouthero {
	position: relative;
	background: var(--ec-rule-faint);
	display: flex;
	flex-direction: column;
}
.ec-abouthero__img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	object-position: 74% 30%;
}
.ec-abouthero__copy {
	position: relative;
	z-index: 1;
	padding: clamp(36px, 7vw, 104px) var(--ec-gutter);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(20px, 3vw, 30px);
}
.ec-abouthero__label {
	font: 400 11px / 16px var(--ec-font-text);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--ec-ink-muted);
}
.ec-abouthero__title {
	font: 300 clamp(36px, 4.6vw, 60px) / 1.08 var(--ec-font-display);
	letter-spacing: var(--ec-track-display);
	margin: 0;
	max-width: 15ch;
	text-wrap: balance;
}
.ec-abouthero__lede {
	font: 400 var(--ec-body) / 1.62 var(--ec-font-text);
	color: var(--ec-ink-muted);
	margin: 0;
	max-width: 36ch;
	text-wrap: pretty;
}
.ec-abouthero__mark {
	align-self: center;
	padding: 0 0 clamp(16px, 3vw, 30px);
	font: 400 clamp(14px, 1.4vw, 18px) / 1 var(--ec-font-display);
	letter-spacing: .36em;
	text-indent: .36em;
	text-transform: uppercase;
	color: var(--ec-ink);
}

/* The supplied desktop artboard turns the hero into one editorial plate:
   photograph, headline and wordmark all share the same 460–640px frame. */
@media (min-width: 900px) {
	.ec-abouthero {
		display: block;
		min-height: clamp(460px, 46vw, 640px);
	}
	.ec-abouthero__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-position: 78% 32% !important;
	}
	.ec-abouthero__copy {
		position: absolute;
		inset: 0 auto 0 0;
		width: min(50%, 620px);
		padding: clamp(48px, 5vw, 88px) clamp(32px, 4vw, 64px);
	}
	.ec-abouthero__mark {
		position: absolute;
		left: 0;
		right: auto;
		bottom: clamp(18px, 3vw, 34px);
		width: min(50%, 620px);
		padding: 0;
		text-align: center;
	}
}

/* =============================================================================
   02  OUR STORY
   Copy column at a 44ch measure beside a 16:11 editorial photograph.
   ============================================================================= */

.ec-story {
	padding: var(--ec-section-y) var(--ec-gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--ec-col-gap);
	align-items: start;
}
.ec-story__copy {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.4vw, 26px);
	max-width: 44ch;
}
.ec-story__copy p {
	font: 400 var(--ec-body) / 1.62 var(--ec-font-text);
	color: var(--ec-ink-muted);
	margin: 0;
	text-wrap: pretty;
}
/* The closing line of the story lifts to full ink. */
.ec-story__copy p:last-child { color: var(--ec-ink); }

/* =============================================================================
   03  OUR PHILOSOPHY
   Ivory band. Three centred cells divided by hairlines, each with a plum
   line-drawing above its label.
   ============================================================================= */

.ec-philosophy {
	background: var(--ec-ivory);
	padding: var(--ec-section-y-sm) var(--ec-gutter);
}
.ec-philosophy__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.ec-philosophy__grid {
	margin-top: clamp(34px, 5vw, 56px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(28px, 4vw, 40px) 0;
}
.ec-philosophy__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 0 clamp(16px, 3vw, 40px);
	border-left: 1px solid var(--ec-hairline);
}
.ec-philosophy__item:first-child { border-left: 0; }
.ec-philosophy__label {
	font: 400 var(--ec-body-s) / 1.4 var(--ec-font-text);
	color: var(--ec-ink);
	text-align: center;
}

/* =============================================================================
   04  CRAFTSMANSHIP + FOUNDER'S NOTE
   Two columns. Left: intro plus a six-tile 1:1 process grid, staggered in on
   scroll. Right: the founder's portrait and pull quote.
   ============================================================================= */

.ec-craft {
	padding: var(--ec-section-y) var(--ec-gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(40px, 6vw, 80px);
	align-items: start;
}
.ec-craft__col {
	display: flex;
	flex-direction: column;
	gap: clamp(26px, 3.4vw, 38px);
}
.ec-craft__intro {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 2vw, 20px);
	max-width: 42ch;
}
.ec-craft__intro p {
	font: 400 var(--ec-body-s) / 1.6 var(--ec-font-text);
	color: var(--ec-ink-muted);
	margin: 0;
	text-wrap: pretty;
}
.ec-craft__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: clamp(12px, 1.6vw, 18px);
}

/* --- Founder --- */
.ec-founder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: clamp(24px, 3.4vw, 36px);
	align-items: start;
}
.ec-founder__portrait { aspect-ratio: 4 / 5; }
.ec-founder__quote {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2.4vw, 26px);
}
.ec-founder__mark {
	font: 400 44px / .6 var(--ec-font-display);
	color: var(--ec-sand); /* decorative only — never used for text */
}
.ec-founder__text {
	font: 400 var(--ec-display-m) / 1.45 var(--ec-font-display);
	letter-spacing: -.02em;
	margin: 0;
	text-wrap: pretty;
}
.ec-founder__attrib {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ec-founder__name {
	font: 400 clamp(19px, 2vw, 23px) / 1 var(--ec-font-display);
	letter-spacing: .06em;
	color: var(--ec-plum);
}
.ec-founder__role {
	font: 400 10px / 15px var(--ec-font-text);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ec-ink-muted);
}

/* =============================================================================
   05  CLOSING CTA
   A photograph washed back behind an ivory veil, with the closing couplet and
   a single primary button centred over it.
   ============================================================================= */

.ec-cta {
	position: relative;
	isolation: isolate;
	background: var(--ec-ivory);
	padding: var(--ec-section-y-lg) var(--ec-gutter);
	overflow: hidden;
}
.ec-cta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	z-index: 0;
}
.ec-cta__veil {
	position: absolute;
	inset: 0;
	background: rgba(250, 243, 235, .5);
	z-index: 0;
}
.ec-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(28px, 4vw, 44px);
	text-align: center;
}
.ec-cta__title {
	font: 300 var(--ec-display-l) / 1.2 var(--ec-font-display);
	letter-spacing: -.03em;
	margin: 0;
	max-width: min(100%, 40ch);
}
.ec-cta__title span,
.ec-cta__title em {
	display: block;
	text-wrap: nowrap;
}
.ec-cta__title em { font-weight: 400; }

/* =============================================================================
   06  RESPONSIVE LAYER
   The artboard is fluid by construction, so this is limited to the two places
   where a hard value needs releasing.
   ============================================================================= */

@media (max-width: 720px) {
	/* The hero photograph is too tall at 5:4 on a phone. */
	.ec-abouthero__img { aspect-ratio: 4 / 5; }

	/* The CTA couplet is set nowrap so each line stays whole; below this
	   width the lines no longer fit and must be allowed to break. */
	.ec-cta__title span,
	.ec-cta__title em { text-wrap: balance; }

	/* Philosophy cells stack, so the vertical rules become horizontal ones. */
	.ec-philosophy__item {
		border-left: 0;
		border-top: 1px solid var(--ec-hairline);
		padding: clamp(24px, 6vw, 32px) 0 0;
	}
	.ec-philosophy__item:first-child { border-top: 0; padding-top: 0; }
}