/* ==========================================================================
   EAS Maritime — base, layout and components
   ========================================================================== */

/* --- Reset / base -------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--eas-surface);
	color: var(--eas-ink);
	font-family: var(--eas-font);
	font-size: var(--eas-fs-body);
	line-height: var(--eas-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.eas-no-scroll { overflow: hidden; }

img,
svg,
video { max-width: 100%; height: auto; display: block; }

a { color: var(--eas-primary); text-decoration: none; }
a:hover { color: var(--eas-primary-deep); }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	color: var(--eas-ink-strong);
	font-weight: 800;
	letter-spacing: -0.015em;
}

h1 { font-size: var(--eas-fs-h1); line-height: var(--eas-lh-h1); }
h2 { font-size: var(--eas-fs-h2); line-height: var(--eas-lh-h2); }
h3 { font-size: var(--eas-fs-h3); line-height: var(--eas-lh-h3); }
h4 { font-size: var(--eas-fs-h4); line-height: 1.35; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--eas-focus);
	outline-offset: 2px;
	border-radius: 3px;
}

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

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	z-index: 100000;
	top: 12px;
	left: 12px;
	display: block;
	padding: 14px 22px;
	background: var(--eas-card);
	color: var(--eas-primary);
	font-weight: 700;
	box-shadow: var(--eas-shadow-card);
	border-radius: var(--eas-radius);
}

/* --- Layout -------------------------------------------------------------- */
.eas-container {
	width: 100%;
	max-width: calc(var(--eas-container) + (var(--eas-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--eas-gutter);
}

.eas-container--wide {
	max-width: calc(var(--eas-container-wide) + (var(--eas-gutter) * 2));
}

.eas-section { padding-block: var(--eas-section-y); }
.eas-section--surface { background: var(--eas-surface); }
.eas-section--card { background: var(--eas-card); }
.eas-section--dark { background: var(--eas-dark); color: #fff; }
.eas-section--flush-top { padding-top: 0; }
.eas-section--flush-bottom { padding-bottom: 0; }

/* Pulls a section's media element up to cancel the SECTION's own top
   padding, so the picture touches the very top of the section box while
   any sibling text keeps its normal padded position. Used where the grid is
   center-aligned rather than top-aligned, so only the image moves. */
.eas-media--flush-top {
	margin-top: calc(-1 * var(--eas-section-y));
	align-self: start;
}

/* --- Typography helpers -------------------------------------------------- */
.eas-eyebrow {
	display: block;
	margin: 0 0 0.75rem;
	color: var(--eas-primary);
	font-size: var(--eas-fs-sm);
	font-weight: 700;
	letter-spacing: var(--eas-ls-eyebrow);
	text-transform: uppercase;
}

.eas-lead {
	font-size: var(--eas-fs-lead);
	line-height: var(--eas-lh-lead);
	color: var(--eas-ink-soft);
}

.eas-rule {
	border: 0;
	border-top: 1px solid var(--eas-line);
	margin: var(--eas-gap-lg) 0 0;
}

/* --- Buttons ------------------------------------------------------------- */
.eas-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.6em;
	border: 2px solid transparent;
	border-radius: var(--eas-radius);
	background: var(--eas-primary);
	color: #fff;
	font-family: inherit;
	font-size: var(--eas-fs-sm);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s var(--eas-ease), color 0.2s var(--eas-ease),
		border-color 0.2s var(--eas-ease);
}

.eas-btn:hover { background: var(--eas-secondary); color: #fff; }

.eas-btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: var(--eas-primary);
}
.eas-btn--ghost:hover { background: var(--eas-primary); border-color: var(--eas-primary); color: #fff; }

.eas-btn--on-dark { background: #fff; color: var(--eas-primary); }
.eas-btn--on-dark:hover { background: var(--eas-secondary); color: #fff; }

.eas-btn--ghost-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.85);
	color: #fff;
}
.eas-btn--ghost-light:hover { background: #fff; color: var(--eas-primary); border-color: #fff; }

.eas-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--eas-gap);
}

/* --- Site header --------------------------------------------------------- */
.eas-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 60;
	background: transparent;
	transition: background-color 0.25s var(--eas-ease), box-shadow 0.25s var(--eas-ease);
}

.eas-header.is-stuck {
	position: fixed;
	background: var(--eas-card);
	box-shadow: var(--eas-shadow-header);
}

.eas-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: clamp(10px, 2vw, var(--eas-gap));
	min-height: var(--eas-header-h);
}

.eas-brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
	flex-shrink: 1;
}
.eas-brand img { max-height: 52px; width: auto; flex-shrink: 0; }

.eas-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	min-width: 0;
}
.eas-brand__name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: clamp(1rem, 0.75rem + 1vw, 1.4rem);
	font-weight: 800;
	color: var(--eas-primary);
	letter-spacing: -0.01em;
}
.eas-brand__tagline {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.6rem;
	font-weight: 600;
	color: var(--eas-muted);
	letter-spacing: 0.02em;
}

.eas-nav { display: none; }

@media (min-width: 900px) {
	.eas-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
	.eas-nav ul {
		display: flex;
		align-items: center;
		gap: clamp(16px, 2vw, 30px);
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.eas-nav a {
		color: var(--eas-primary);
		font-size: var(--eas-fs-sm);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		white-space: nowrap;
		transition: color 0.2s var(--eas-ease);
	}
	.eas-nav a:hover,
	.eas-nav .current-menu-item > a { color: var(--eas-secondary); }
	.eas-nav__cta { display: inline-flex; }
	.eas-nav .eas-nav__cta {
		color: #fff;
		text-transform: none;
		letter-spacing: normal;
	}
	.eas-nav .eas-nav__cta:hover { color: #fff; }
}

/* --- Mobile drawer ------------------------------------------------------- */
.eas-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	flex-shrink: 0;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0 10px;
	border: 0;
	border-radius: var(--eas-radius);
	background: transparent;
	cursor: pointer;
}

.eas-burger span {
	display: block;
	height: 2px;
	background: var(--eas-primary);
	border-radius: 2px;
	transition: transform 0.25s var(--eas-ease), opacity 0.2s var(--eas-ease);
}

@media (min-width: 900px) { .eas-burger { display: none; } }

.eas-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 90;
	width: min(88vw, 380px);
	padding: 26px var(--eas-gutter) 40px;
	background: var(--eas-card);
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
	transform: translateX(100%);
	transition: transform 0.3s var(--eas-ease);
	overflow-y: auto;
	visibility: hidden;
}

.eas-drawer.is-open { transform: translateX(0); visibility: visible; }

.eas-drawer__close {
	margin-left: auto;
	display: block;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--eas-radius);
	background: transparent;
	color: var(--eas-ink);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.eas-drawer ul { list-style: none; margin: 18px 0 0; padding: 0; }
.eas-drawer li + li { border-top: 1px solid var(--eas-line); }
.eas-drawer a {
	display: block;
	padding: 15px 2px;
	color: var(--eas-primary);
	font-size: 1.05rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.eas-drawer .eas-btn {
	display: inline-flex;
	margin-top: 22px;
	width: 100%;
	color: #fff;
	text-transform: none;
	letter-spacing: normal;
}
.eas-drawer .eas-btn:hover { color: #fff; }

.eas-scrim {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s var(--eas-ease), visibility 0.3s var(--eas-ease);
}
.eas-scrim.is-open { opacity: 1; visibility: visible; }

@media (min-width: 900px) {
	.eas-drawer,
	.eas-scrim { display: none; }
}

/* --- Hero ---------------------------------------------------------------- */
.eas-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(520px, 62vw, 772px);
	padding-block: calc(var(--eas-header-h) + var(--eas-section-y)) var(--eas-section-y);
	background: var(--eas-muted);
	isolation: isolate;
	overflow: hidden;
}

.eas-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.eas-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* The drafts all carry a deliberately light top band so the blue nav reads. */
.eas-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgba(238, 239, 241, 0.92) 0%,
		rgba(215, 216, 218, 0.55) 14%,
		rgba(40, 46, 52, 0.28) 46%,
		rgba(20, 26, 32, 0.44) 100%
	);
}

.eas-hero__inner { max-width: 46rem; }

.eas-hero h1 { color: #fff; margin-bottom: 0.35em; text-wrap: balance; }

.eas-hero__sub {
	max-width: 34rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.94);
	font-size: var(--eas-fs-lead);
	line-height: var(--eas-lh-lead);
}

.eas-hero .eas-btn-row { margin-top: var(--eas-gap-lg); }

/* --- Stats band ---------------------------------------------------------- */
.eas-stats {
	background: var(--eas-dark-alt);
	color: #fff;
	padding-block: var(--eas-stats-y);
}

.eas-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--eas-gap) var(--eas-gap-lg);
	text-align: center;
}

@media (min-width: 640px) {
	.eas-stats__grid { grid-template-columns: repeat(4, 1fr); }
}

.eas-stat__value {
	display: block;
	font-size: var(--eas-fs-stat);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.eas-stat__label {
	display: block;
	margin-top: 0.5rem;
	font-size: var(--eas-fs-sm);
	color: rgba(255, 255, 255, 0.88);
	text-wrap: balance;
}

/* --- Split intro --------------------------------------------------------- */
.eas-split { position: relative; background: var(--eas-surface); }

.eas-split__grid {
	display: grid;
	gap: 0;
	align-items: center;
}

@media (min-width: 900px) {
	.eas-split__grid { grid-template-columns: 1fr 1fr; }
}

.eas-split__media img {
	width: 100%;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
}

.eas-split__panel {
	background: var(--eas-card);
	padding: clamp(28px, 4vw, 56px);
}

@media (min-width: 900px) {
	.eas-split__panel {
		margin-left: -12%;
		position: relative;
		z-index: 2;
		/* Image bleeds to the viewport edge; the panel's outer edge stops at
		   the site's normal container boundary instead of following it. */
		padding-right: var(--eas-edge-inset);
	}
	.eas-split--flip .eas-split__panel {
		margin-left: 0;
		margin-right: -12%;
		padding-right: clamp(28px, 4vw, 56px);
		padding-left: var(--eas-edge-inset);
	}
}

.eas-split__panel h2 { text-wrap: balance; }
.eas-split__panel p { color: var(--eas-ink); }

/* --- Section header (eyebrow + h2 left, intro right) --------------------- */
.eas-sechead {
	display: grid;
	gap: var(--eas-gap);
	align-items: start;
}

@media (min-width: 900px) {
	.eas-sechead { grid-template-columns: 1fr 1fr; gap: var(--eas-gap-lg); }
}

.eas-sechead h2 { margin-bottom: 0; text-wrap: balance; }
.eas-sechead__aside { align-self: center; }

/* Single-column centred section header (Team Grid and similar single-block
   intros) — kept distinct from .eas-sechead, which is a two-column grid and
   would leave a lone child hugging the first track instead of centring. */
.eas-centerhead {
	max-width: 44rem;
	margin: 0 auto;
	text-align: center;
}
.eas-centerhead h2 { text-wrap: balance; }
.eas-centerhead .eas-lead { margin-inline: auto; }

/* --- Services grid ------------------------------------------------------- */
.eas-cards {
	display: grid;
	gap: var(--eas-gap-lg);
	margin-top: var(--eas-gap-lg);
}

@media (min-width: 640px) { .eas-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .eas-cards--3 { grid-template-columns: repeat(3, 1fr); } }

.eas-card {
	display: flex;
	flex-direction: column;
	background: var(--eas-card);
	border-radius: var(--eas-radius);
	overflow: hidden;
	box-shadow: var(--eas-shadow-card);
}

.eas-card__media { aspect-ratio: 16 / 10; background: var(--eas-line); }
.eas-card__media img { width: 100%; height: 100%; object-fit: cover; }

.eas-card__body { padding: clamp(20px, 2.4vw, 30px); }
.eas-card__body h3 { margin-bottom: 0.4em; }
.eas-card__body p { color: var(--eas-ink); margin: 0; }

/* --- Strengths ----------------------------------------------------------- */
.eas-strengths { background: var(--eas-card); }

.eas-strengths__grid {
	display: grid;
	gap: var(--eas-gap-lg);
	align-items: start;
}

@media (min-width: 900px) {
	.eas-strengths__grid { grid-template-columns: 1fr 1fr; }
}

.eas-strengths__media { display: grid; gap: var(--eas-gap); }
.eas-strengths__media img { border-radius: var(--eas-radius); width: 100%; }

.eas-quote {
	margin: 0 0 var(--eas-gap);
	font-size: var(--eas-fs-h4);
	font-weight: 700;
	line-height: 1.4;
	color: var(--eas-ink-strong);
	text-wrap: pretty;
}

.eas-checklist {
	display: grid;
	gap: var(--eas-gap);
	margin: 0 0 var(--eas-gap-lg);
	padding: 0;
	list-style: none;
}

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

.eas-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-weight: 700;
	line-height: 1.35;
}

.eas-checklist svg {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: var(--eas-check);
	margin-top: 1px;
}

/* --- CTA band ------------------------------------------------------------ */
.eas-ctaband {
	background: var(--eas-primary);
	color: #fff;
	border-radius: var(--eas-radius);
	padding: clamp(40px, 5.6vw, 76px) clamp(24px, 4vw, 56px);
	text-align: center;
}

.eas-ctaband h2 { color: #fff; text-wrap: balance; }

.eas-ctaband p {
	max-width: 34rem;
	margin-inline: auto;
	color: rgba(255, 255, 255, 0.94);
}

.eas-ctaband .eas-btn-row { justify-content: center; }

/* Full-width variant (Services draft): edge-to-edge, no rounded corners,
   its own vertical rhythm since it isn't nested in .eas-section. */
.eas-ctaband--full {
	border-radius: 0;
	padding-block: var(--eas-section-y);
	text-align: center;
}
.eas-ctaband--full .eas-container { padding-block: 0; }

/* --- Contact split ------------------------------------------------------- */
.eas-contact__grid {
	display: grid;
	gap: var(--eas-gap-lg);
	align-items: center;
}

@media (min-width: 900px) {
	.eas-contact__grid { grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.4vw, 64px); }
}

.eas-contact__media img {
	width: 100%;
	border-radius: var(--eas-radius-lg);
	box-shadow: var(--eas-shadow-card);
}

.eas-contact__form { margin-top: var(--eas-gap); }
.eas-contact__form:empty { margin-top: 0; }

/* --- FAQ ----------------------------------------------------------------- */
.eas-faq__grid {
	display: grid;
	gap: var(--eas-gap-lg);
	align-items: start;
}

@media (min-width: 900px) {
	.eas-faq__grid { grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 4.4vw, 64px); }
}

.eas-acc { border-top: 1px solid var(--eas-line); }
.eas-acc__item { border-bottom: 1px solid var(--eas-line); }

.eas-acc__trigger {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.25rem;
	width: 100%;
	padding: 1.15rem 0;
	border: 0;
	background: transparent;
	color: var(--eas-ink-strong);
	font-family: inherit;
	font-size: var(--eas-fs-body);
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}

.eas-acc__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	color: var(--eas-ink);
	transition: transform 0.25s var(--eas-ease);
}

.eas-acc__trigger[aria-expanded="true"] .eas-acc__icon { transform: rotate(180deg); }

/* Panel lives inside the item — the draft's overflow bug is not reproduced. */
.eas-acc__panel {
	overflow: hidden;
	padding: 0 0 1.15rem;
	color: var(--eas-ink-soft);
}

.eas-acc__panel[hidden] { display: none; }
.eas-acc__panel > :last-child { margin-bottom: 0; }

/* --- Footer -------------------------------------------------------------- */
.eas-footer {
	background: var(--eas-dark);
	color: rgba(255, 255, 255, 0.78);
	padding-block: var(--eas-section-y) 0;
	font-size: var(--eas-fs-sm);
}

.eas-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--eas-gap);
	padding-bottom: var(--eas-gap-lg);
	border-bottom: 1px solid var(--eas-line-dark);
}

.eas-footer__brand { display: flex; align-items: center; gap: 0.8rem; }
.eas-footer__brand img { max-height: 52px; width: auto; }
.eas-footer__brand-name {
	color: #fff;
	font-size: clamp(1.25rem, 0.9rem + 1.1vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.eas-social { display: flex; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }

.eas-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--eas-radius);
	background: var(--eas-social);
	color: #fff;
	transition: background-color 0.2s var(--eas-ease);
}
.eas-social a:hover { background: var(--eas-primary); color: #fff; }
.eas-social svg { width: 19px; height: 19px; }

.eas-footer__cols {
	display: grid;
	gap: var(--eas-gap-lg);
	padding-block: var(--eas-gap-lg);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
	.eas-footer__cols { grid-template-columns: repeat(3, 1fr) 1.5fr; }
}

.eas-footer__col h2,
.eas-footer__col h3 {
	margin: 0 0 1rem;
	color: #fff;
	font-size: var(--eas-fs-body);
	font-weight: 700;
	letter-spacing: 0;
}

.eas-footer__col ul { list-style: none; margin: 0; padding: 0; }
.eas-footer__col li + li { margin-top: 0.7rem; }
.eas-footer__col a { color: rgba(255, 255, 255, 0.78); }
.eas-footer__col a:hover { color: #fff; }

.eas-footer__meta { display: grid; gap: 0; }

.eas-footer__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--eas-line-dark);
}
.eas-footer__row:first-child { padding-top: 0; }

.eas-footer__row dt { color: #fff; font-weight: 700; margin: 0; }
.eas-footer__row dd { margin: 0; text-align: right; }
.eas-footer__row dd a { color: rgba(255, 255, 255, 0.78); }
.eas-footer__row dd a:hover { color: #fff; }

.eas-footer__bottom {
	padding-block: var(--eas-gap-lg);
	text-align: center;
	font-size: var(--eas-fs-xs);
	color: rgba(255, 255, 255, 0.62);
}

/* --- Utility ------------------------------------------------------------- */
.eas-notice {
	margin: 0;
	padding: 1rem var(--eas-gutter);
	background: #fff4d6;
	border-bottom: 1px solid #e8cf88;
	color: #5c4708;
	font-size: var(--eas-fs-sm);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* --- Intro Panel ----------------------------------------------------------
   Centred eyebrow/heading over a boxed white card (Services page). */
.eas-intropanel__head { max-width: 46rem; margin: 0 auto; text-align: center; }

.eas-intropanel__card {
	max-width: 52rem;
	margin: var(--eas-gap-lg) auto 0;
	padding: clamp(28px, 4vw, 52px);
	background: var(--eas-card);
	border-radius: var(--eas-radius);
	box-shadow: var(--eas-shadow-card);
	text-align: center;
}

.eas-intropanel__card p { color: var(--eas-ink); }

/* --- Checklist Split (Services page) -------------------------------------
   Same treatment as the About page's Vision/Strengths section: image column
   (~57%) as the backdrop, with the "Our Services" box pulled left onto its
   right edge and dropped down from the top — floats mid-height rather than
   sitting in its own flush, vertically-centered column. */
.eas-checklist-split {
	display: grid;
	gap: 0;
	align-items: start;
}

@media (min-width: 900px) {
	.eas-checklist-split { grid-template-columns: 1.35fr 1fr; }
}

.eas-checklist-split__media img { display: block; width: 100%; }

.eas-checklist-split__body {
	background: var(--eas-card);
	text-align: left;
}

@media (min-width: 900px) {
	.eas-checklist-split__body {
		position: relative;
		z-index: 2;
		margin-top: clamp(56px, 7vw, 120px);
		margin-left: -72px;
	}
}

.eas-checklist-split__inner {
	/* The overlap's negative margin can widen this column past
	   .eas-container's own max-width, which would trigger its auto-centering
	   and pull the edge-inset padding off the true content boundary. Opt out
	   of that sizing and rely on the explicit padding below instead. */
	max-width: none;
	margin-inline: 0;
	padding-block: clamp(28px, 4vw, 56px);
	/* Image bleeds to the viewport edge; text stops at the site's normal
	   container boundary on the outer (right) side instead of the true edge. */
	padding-right: var(--eas-edge-inset);
}


.eas-grouplist {
	margin-top: var(--eas-gap-lg);
	columns: 1;
	column-gap: var(--eas-gap-lg);
}

@media (min-width: 640px) { .eas-grouplist { columns: 2; } }

.eas-grouplist__title {
	break-inside: avoid;
	break-after: avoid;
	margin: 1.4rem 0 0.75rem;
	font-size: var(--eas-fs-h4);
}
.eas-grouplist__title:first-child { margin-top: 0; }

.eas-checklist--tight {
	display: block;
	break-inside: avoid;
	margin: 0 0 0.5rem;
	gap: 0.6rem 0;
}
.eas-checklist--tight li { margin-bottom: 0.6rem; }

/* --- Info Cards ------------------------------------------------------------ */
.eas-infocards {
	display: grid;
	gap: var(--eas-gap);
	margin-top: var(--eas-gap-lg);
	text-align: center;
}

@media (min-width: 640px) { .eas-infocards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .eas-infocards { grid-template-columns: repeat(4, 1fr); } }

.eas-infocard {
	padding: clamp(24px, 2.6vw, 34px) clamp(18px, 2vw, 24px);
	background: var(--eas-card);
	border-radius: var(--eas-radius);
	box-shadow: var(--eas-shadow-card);
}

.eas-infocard__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: rgba(0, 103, 171, 0.1);
	color: var(--eas-primary);
}
.eas-infocard__icon svg { width: 22px; height: 22px; }

.eas-infocard h3 { font-size: var(--eas-fs-body); margin-bottom: 0.4em; }
.eas-infocard p { color: var(--eas-ink-soft); font-size: var(--eas-fs-sm); margin: 0; }

/* --- Story Timeline (About) -----------------------------------------------
   One tall image spans the full standard container (contained, not
   viewport-bled), acting as a background. The "Our Story" card sits flush
   over its top-left corner — same top edge, same left edge, no shadow — with
   the image showing through in full below and to the right of it.

   Media and card share the SAME grid cell (both grid-row:1/grid-column:1) —
   CSS Grid sizes that row to whichever of the two is taller, so the image can
   never spill past the section's own box no matter which one ends up taller
   at a given width. An earlier version used a negative-margin-percentage
   trick to pull the card over the image instead; that looked identical when
   the card was taller, but at mid-width viewports the image became the
   taller of the two and, because plain block auto-height only follows the
   LAST child's bottom edge, the image spilled straight past the section's
   padding into the stats band below it. Grid has no such blind spot. */
.eas-story {
	display: grid;
	grid-template-rows: auto auto;
}

.eas-story__media {
	grid-column: 1;
	grid-row: 1;
}

.eas-story__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--eas-radius);
}

.eas-story__card {
	grid-column: 1;
	grid-row: 2;
	z-index: 2;
	margin-top: calc(-1 * var(--eas-gap-lg));
	margin-inline: var(--eas-gutter);
	background: var(--eas-card);
	padding: clamp(24px, 3vw, 44px);
}

@media (min-width: 641px) {
	.eas-story__card {
		/* Same cell as the media — this is what makes it overlap rather than
		   stack below, while still keeping the grid row sized to the taller
		   of the two. */
		grid-row: 1;
		justify-self: start;
		align-self: start;
		margin: 0;
		max-width: min(600px, 54%);
		padding-left: 0;
	}
}

.eas-timeline {
	position: relative;
	margin: var(--eas-gap-lg) 0 0;
	padding: 0 0 0 2.2rem;
	list-style: none;
}

.eas-timeline::before {
	content: "";
	position: absolute;
	left: 0.3rem;
	top: 0.4rem;
	bottom: 0.4rem;
	width: 2px;
	background: var(--eas-line);
}

.eas-timeline__item { position: relative; padding-bottom: var(--eas-gap-lg); }
.eas-timeline__item:last-child { padding-bottom: 0; }

.eas-timeline__node {
	position: absolute;
	left: -2.2rem;
	top: 0.35rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--eas-node);
	box-shadow: 0 0 0 4px var(--eas-card);
}

.eas-timeline__item h3 { font-size: var(--eas-fs-h4); margin-bottom: 0.4em; }
.eas-timeline__item p { color: var(--eas-ink); margin: 0; }

/* --- Vision + Strengths Accordion (About) -----------------------------------
   Single background image (~57% column) with BOTH panels floating as
   overlapping cards on top of it: "Our Vision" over its lower-left corner,
   "Our Strengths" pulled left onto its right edge and dropped down from the
   top (not top-aligned) — mirrors the reference, where the photo shows
   through above/around both cards rather than sitting in its own flush
   column. */
.eas-vision__grid {
	display: grid;
	gap: var(--eas-gap);
	align-items: start;
}

@media (min-width: 900px) {
	.eas-vision__grid { grid-template-columns: 1.35fr 1fr; gap: 0; }
}

.eas-vision__media-col { position: relative; }
.eas-vision__media img { display: block; width: 100%; }

.eas-vision__card {
	margin-top: calc(-1 * var(--eas-gap-lg));
	padding: clamp(24px, 3.2vw, 44px);
	background: var(--eas-card);
	position: relative;
	z-index: 2;
}

@media (min-width: 900px) {
	.eas-vision__card { margin-top: -110px; margin-left: var(--eas-edge-inset); }
}

.eas-vision__card .eas-label,
.eas-vision__content .eas-label {
	display: block;
	margin-bottom: 0.6rem;
	color: var(--eas-primary);
	font-weight: 700;
}

.eas-vision__card h3 { text-wrap: balance; }
.eas-vision__card p { color: var(--eas-ink); }

.eas-vision__content {
	padding: clamp(28px, 4vw, 56px);
}

@media (min-width: 900px) {
	.eas-vision__content {
		/* Pulled left onto the image's right edge and dropped down from the
		   top, so it floats mid-height rather than starting flush with the
		   photo — same overlap treatment as the vision card, mirrored. */
		position: relative;
		z-index: 2;
		margin-top: clamp(56px, 7vw, 120px);
		margin-left: -72px;
		background: var(--eas-card);
		/* Outer (right) edge stops at the site's normal container boundary. */
		padding-right: var(--eas-edge-inset);
	}
}

.eas-vision__content .eas-quote {
	font-size: var(--eas-fs-h3);
}

/* --- Commitment List (About) ------------------------------------------------
   Full-bleed: image flush to the viewport's left edge, white card overlapping
   it from the right — mirrors .eas-split's overlap but flipped. */
.eas-commitment__grid {
	display: grid;
	gap: var(--eas-gap-lg);
	align-items: center;
}

@media (min-width: 900px) {
	.eas-commitment__grid { grid-template-columns: 1fr 1fr; gap: 0; }
}

.eas-commitment__media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.eas-commitment__body {
	background: var(--eas-card);
	padding: clamp(28px, 4vw, 56px);
}

@media (min-width: 900px) {
	.eas-commitment__body {
		margin-left: -12%;
		position: relative;
		z-index: 2;
		/* Image bleeds to the viewport edge; the card's outer (right) edge
		   stops at the site's normal container boundary instead. */
		padding-right: var(--eas-edge-inset);
	}
}

.eas-commitment__body > p { color: var(--eas-ink); }

.eas-commitlist {
	display: grid;
	gap: var(--eas-gap);
	margin: var(--eas-gap-lg) 0 0;
	padding: 0;
	list-style: none;
}

.eas-commitlist li {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding-bottom: var(--eas-gap);
	border-bottom: 1px solid var(--eas-line);
}
.eas-commitlist li:last-child { border-bottom: 0; padding-bottom: 0; }

.eas-commitlist__icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	color: var(--eas-check);
}

.eas-commitlist strong { display: block; color: var(--eas-ink-strong); }
.eas-commitlist p { margin-top: 0.3em; color: var(--eas-ink-soft); }

/* --- Team Grid (About) ------------------------------------------------------ */
.eas-team {
	display: grid;
	gap: var(--eas-gap-lg);
	margin-top: var(--eas-gap-lg);
}

@media (min-width: 640px) { .eas-team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .eas-team { grid-template-columns: repeat(3, 1fr); } }

.eas-team__card {
	background: var(--eas-card);
	border-radius: var(--eas-radius);
	overflow: hidden;
	box-shadow: var(--eas-shadow-card);
}

.eas-team__media { aspect-ratio: 4 / 5; background: var(--eas-line); }
.eas-team__media img { width: 100%; height: 100%; object-fit: cover; }

.eas-team__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 18px 20px;
}

.eas-team__name { display: block; font-weight: 800; color: var(--eas-ink-strong); }
.eas-team__role { display: block; font-size: var(--eas-fs-sm); color: var(--eas-ink-soft); }

.eas-team__social { display: flex; gap: 0.4rem; flex-shrink: 0; }
.eas-team__social svg {
	width: 30px;
	height: 30px;
	padding: 6px;
	border: 1px solid var(--eas-line);
	border-radius: var(--eas-radius);
	color: var(--eas-primary);
}