/* ---------- Our Story page ---------- */

/* Hero image (right column): a 3-image collage - one large landscape shot
   on top, two smaller crops underneath. */
.er-story-collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.er-story-collage__main {
	grid-column: 1 / -1;
	min-height: 260px;
	border-radius: 10px;
	background-size: cover;
	background-position: center;
}
.er-story-collage__sub {
	min-height: 160px;
	border-radius: 10px;
	background-size: cover;
}

/* Defining Moment: white heading (not the shared dark-section sage default),
   gold accent word - matches the homepage tea-grades section's same pattern. */
.er-story-defining .er-two-col__text h2.er-section__title {
	color: #fff;
}
.er-story-defining .er-accent {
	color: var(--er-gold);
}

/* Defining Moment left column: two stacked photos (estate + tea garden). */
.er-story-defining__stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
}
.er-story-defining__img {
	flex: 1 1 0;
	min-height: 260px;
	border-radius: 10px;
	background-size: cover;
	background-position: center;
}

/* Our Purpose lead paragraphs: wider and lighter grey than the shared
   .er-section__lead (760px / --er-secondary). */
.er-story-lead {
	max-width: 1040px;
	margin: 0 auto 16px;
	text-align: center;
	color: var(--er-text);
	line-height: 1.7;
}

/* Our Brand Philosophy: light/cream section, gold accent word on the
   "Passion" heading (same heading text as Defining Moment, different
   section - dark green default heading colour here, not white). */
.er-story-philosophy .er-accent {
	color: var(--er-gold);
}

/* Philosophy image: stretches to match the height of the text column,
   cropping only off the bottom (background-position keeps the top in view). */
.er-story-philosophy .er-two-col {
	align-items: stretch;
}
.er-story-philosophy__image {
	min-height: 100%;
	border-radius: 10px;
	background-size: cover;
	background-position: top center;
}

@media (max-width: 900px) {
	.er-story-philosophy__image {
		min-height: 320px;
	}
}