/* ============================================================
   ERAS® Society – Front Page
   ============================================================ */


.eras-home {
	--home-blue: #064487;
	--home-blue-dark: #043565;
	--home-blue-deep: #14213d;
	--home-sky: #7fc6e8;
	--home-light: #f4f8fb;
	--home-border: #dfe7ed;
	--home-text: #34495d;
	--home-muted: #718292;
	background: #fff;
}


/* ============================================================
   COMMON
   ============================================================ */

.eras-home-kicker {
	display: block;

	margin-bottom: 15px;

	color: var(--home-blue);

	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
}


.eras-home-kicker--light {
	color: #99d8f2;
}


.eras-home-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;

	min-height: 48px;

	padding: 0 19px;

	border: 1px solid transparent;
	border-radius: 6px;

	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;

	transition:
		background-color .18s ease,
		border-color .18s ease,
		color .18s ease,
		transform .18s ease,
		box-shadow .18s ease;
}


.eras-home-button svg {
	width: 17px;
	height: 17px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition: transform .18s ease;
}


.eras-home-button:hover svg {
	transform: translateX(3px);
}


.eras-home-button--primary {
	background: #fff;
	color: var(--home-blue);

	box-shadow: 0 7px 22px rgba(0, 25, 60, .15);
}


.eras-home-button--primary:hover {
	background: #edf7fc;

	transform: translateY(-2px);
}


.eras-home-button--secondary {
	border-color: rgba(255, 255, 255, .38);

	background: rgba(255, 255, 255, .08);
	color: #fff;

	backdrop-filter: blur(7px);
}


.eras-home-button--secondary:hover {
	border-color: rgba(255, 255, 255, .58);

	background: rgba(255, 255, 255, .15);

	transform: translateY(-2px);
}


.eras-home-button--white {
	background: #fff;
	color: var(--home-blue);
}


.eras-home-button--white:hover {
	background: #eaf5fb;

	transform: translateY(-2px);
}



/* ============================================================
   HERO
   ============================================================ */

.eras-home-hero {
	position: relative;

	min-height: clamp(510px, 63vh, 700px);

	display: flex;
	align-items: center;

	background: var(--home-blue-deep);

	overflow: hidden;
}

.eras-header.is-home.blue-overlay .eras-home-hero {
	min-height: clamp(610px, 63vh, 700px);
	padding-top: 50px;
}

.eras-home-hero__background {
	position: absolute;
	inset: -5% 0;

	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

	transform: translate3d(0, 0, 0) scale(1.04);

	will-change: transform;
}


.eras-home-hero__overlay {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(4, 38, 79, .93) 0%,
			rgba(4, 48, 95, .80) 34%,
			rgba(4, 48, 95, .28) 67%,
			rgba(4, 48, 95, .06) 100%
		);
}

/* ============================================================
   HERO – OVERLAY ON / OFF
   ============================================================ */

.eras-home-hero--clean .eras-home-hero__content {
	padding: 34px 38px 38px;
	border-radius: 12px;

	background: rgba(3, 39, 80, .78);

	box-shadow:
		0 18px 55px rgba(0, 25, 60, .16);

	backdrop-filter: blur(5px);
}


.eras-home-hero--clean .eras-home-hero__background {
	filter: none;
}


@media (max-width: 600px) {

	.eras-home-hero--clean .eras-home-hero__content {
		padding: 25px;
	}

}

.eras-home-hero .eras-container {
	position: relative;
	z-index: 2;
}


.eras-home-hero__content {
	max-width: 660px;

	padding: 100px 0 120px;
}


.eras-home-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;

	margin-bottom: 22px;

	color: #bde8fa;

	font-size: 11px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}


.eras-home-hero__eyebrow span {
	width: 27px;
	height: 2px;

	background: #8bd3ef;
}


.eras-home-hero__title {
	margin: 0;

	color: #fff;

	font-size: clamp(48px, 5.7vw, 76px);
	font-weight: 500;
	line-height: 1.01;
	letter-spacing: -.04em;
}


.eras-home-hero__lead {
	max-width: 590px;

	margin: 27px 0 0;

	color: rgba(255, 255, 255, .87);

	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.65;
}


.eras-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;

	margin-top: 34px;
}


.eras-home-hero__curve {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 3;

	height: 70px;

	background: #fff;

	clip-path: polygon(
		0 72%,
		12% 62%,
		25% 50%,
		40% 43%,
		55% 45%,
		70% 52%,
		84% 64%,
		100% 76%,
		100% 100%,
		0 100%
	);

	pointer-events: none;
}



/* ============================================================
   INTRO
   ============================================================ */

.eras-home-intro {
	padding: 95px 0 100px;

	background: #fff;
}


.eras-home-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
	gap: clamp(60px, 8vw, 130px);
	align-items: start;
}


.eras-home-intro__heading h2 {
	max-width: 560px;

	margin: 0;

	color: var(--home-blue);

	font-size: clamp(34px, 4vw, 51px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -.03em;
}


.eras-home-intro__text {
	max-width: 610px;

	color: var(--home-text);

	font-size: 17px;
	line-height: 1.75;
}


.eras-home-intro__text p {
	margin: 0 0 18px;
}


.eras-home-intro__text p:last-child {
	margin-bottom: 0;
}


.eras-home-principles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;

	margin-top: 68px;
}


.eras-home-principle {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 16px;
	align-items: start;

	padding: 23px;

	border: 1px solid var(--home-border);
	border-radius: 10px;

	background: #fff;

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		border-color .2s ease;
}


.eras-home-principle:hover {
	border-color: rgba(6, 68, 135, .23);

	transform: translateY(-3px);

	box-shadow:
		0 14px 35px rgba(25, 51, 75, .07);
}


.eras-home-principle__icon {
	display: grid;
	place-items: center;

	width: 48px;
	height: 48px;

	border-radius: 50%;

	background: #e8f4fa;
	color: var(--home-blue);

	font-size: 19px;
}


.eras-home-principle strong {
	display: block;

	margin: 2px 0 5px;

	color: var(--home-blue);

	font-size: 16px;
	font-weight: 600;
}


.eras-home-principle span {
	display: block;

	color: var(--home-muted);

	font-size: 13px;
	line-height: 1.55;
}



/* ============================================================
   GUIDELINES
   ============================================================ */

.eras-home-guidelines {
	position: relative;

	padding: 100px 0;

	background:
		linear-gradient(
			135deg,
			#063c78 0%,
			#052e5d 100%
		);

	color: #fff;

	overflow: hidden;
}


.eras-home-guidelines__shape {
	position: absolute;

	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 50%;

	pointer-events: none;
}


.eras-home-guidelines__shape--one {
	top: -290px;
	right: -170px;

	width: 650px;
	height: 650px;
}


.eras-home-guidelines__shape--two {
	top: -150px;
	right: -30px;

	width: 390px;
	height: 390px;
}


.eras-home-guidelines .eras-container {
	position: relative;
	z-index: 2;
}


.eras-home-guidelines__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 50px;

	margin-bottom: 40px;
}


.eras-home-guidelines__header h2 {
	max-width: 650px;

	margin: 0;

	color: #fff;

	font-size: clamp(35px, 4vw, 52px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -.03em;
}


.eras-home-guidelines__summary {
	flex: 0 0 auto;

	padding-bottom: 4px;

	text-align: right;
}


.eras-home-guidelines__summary strong {
	display: block;

	color: #fff;

	font-size: 37px;
	font-weight: 500;
	line-height: 1;
}


.eras-home-guidelines__summary span {
	display: block;

	margin-top: 5px;

	color: rgba(255, 255, 255, .60);

	font-size: 11px;
}


.eras-home-guidelines__categories {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;

	margin-bottom: 36px;
}


.eras-home-guidelines__categories > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	padding: 7px 10px;

	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 5px;

	background: rgba(255, 255, 255, .06);
	color: rgba(255, 255, 255, .86);

	font-size: 11px;
	font-weight: 500;

	transition:
		background .17s ease,
		border-color .17s ease,
		color .17s ease;
}


.eras-home-guidelines__categories > a span {
	display: inline-grid;
	place-items: center;

	min-width: 21px;
	height: 21px;

	padding: 0 5px;

	border-radius: 20px;

	background: rgba(255, 255, 255, .09);

	font-size: 9px;
}


.eras-home-guidelines__categories > a:hover {
	border-color: rgba(255, 255, 255, .29);

	background: rgba(255, 255, 255, .11);
	color: #fff;
}


.eras-home-guidelines__latest {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}


.eras-home-guideline-card {
	display: flex;
	flex-direction: column;

	min-height: 260px;

	padding: 25px;

	border: 1px solid rgba(255, 255, 255, .11);
	border-radius: 10px;

	background: rgba(255, 255, 255, .07);
	color: #fff;

	backdrop-filter: blur(8px);

	transition:
		background .2s ease,
		border-color .2s ease,
		transform .2s ease;
}


.eras-home-guideline-card:hover {
	border-color: rgba(255, 255, 255, .23);

	background: rgba(255, 255, 255, .11);

	transform: translateY(-4px);
}


.eras-home-guideline-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;

	margin-bottom: 19px;
}


.eras-home-guideline-card__category {
	display: inline-flex;

	padding: 5px 8px;

	border-radius: 4px;

	background: rgba(133, 211, 241, .14);
	color: #a9e0f6;

	font-size: 9px;
	font-weight: 600;
}


.eras-home-guideline-card__date {
	color: rgba(255, 255, 255, .45);

	font-size: 10px;
}


.eras-home-guideline-card h3 {
	margin: 0;

	color: #fff;

	font-size: clamp(18px, 1.7vw, 22px);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -.012em;
}


.eras-home-guideline-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-top: auto;
	padding-top: 25px;

	color: rgba(255, 255, 255, .62);

	font-size: 10px;
	font-weight: 600;
}


.eras-home-guideline-card__footer div {
	display: grid;
	place-items: center;

	width: 34px;
	height: 34px;

	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 50%;

	transition:
		background .18s ease,
		color .18s ease;
}


.eras-home-guideline-card__footer svg {
	width: 15px;
	height: 15px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}


.eras-home-guideline-card:hover
.eras-home-guideline-card__footer div {
	background: #fff;
	color: var(--home-blue);
}


.eras-home-guidelines__footer {
	margin-top: 30px;
}



/* ============================================================
   EXISTING DYNAMIC SECTIONS
   ============================================================ */

.eras-home .eras-content-section {
	position: relative;
}


.eras-home .eras-content-section--white +
.eras-content-section--white {
	border-top: 1px solid #edf1f4;
}


.eras-home .eras-content-section__grid {
	position: relative;
}


.eras-home .eras-info-card {
	border-radius: 9px;

	box-shadow:
		0 12px 30px rgba(11, 61, 122, .08);
}


.eras-home .eras-content-image img {
	border-radius: 8px;
}



/* ============================================================
   JOIN CTA
   ============================================================ */

.eras-home-join {
	padding: 82px 0;

	background:
		linear-gradient(
			120deg,
			#0a3c72 0%,
			#14213d 100%
		);
}


.eras-home-join__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}


.eras-home-join h2 {
	margin: 0;

	color: #fff;

	font-size: clamp(30px, 3.5vw, 44px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.025em;
}


.eras-home-join p {
	max-width: 650px;

	margin: 15px 0 0;

	color: rgba(255, 255, 255, .68);

	font-size: 15px;
	line-height: 1.65;
}



/* ============================================================
   REVEAL
   ============================================================ */

.js .eras-home-reveal {
	opacity: 0;

	transform: translateY(18px);

	transition:
		opacity .55s ease,
		transform .55s ease;
}


.js .eras-home-reveal.is-visible {
	opacity: 1;

	transform: translateY(0);
}



/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

	.eras-home-hero {
		min-height: 600px;
	}


	.eras-home-hero__overlay {
		background:
			linear-gradient(
				90deg,
				rgba(4, 38, 79, .94) 0%,
				rgba(4, 48, 95, .76) 65%,
				rgba(4, 48, 95, .36) 100%
			);
	}


	.eras-home-hero__content {
		max-width: 590px;

		padding: 90px 0 115px;
	}


	.eras-home-intro__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}


	.eras-home-principles {
		grid-template-columns: 1fr;
	}


	.eras-home-guidelines__header {
		align-items: flex-start;
	}


	.eras-home-guidelines__latest {
		grid-template-columns: 1fr;
	}


	.eras-home-guideline-card {
		min-height: 0;
	}


	.eras-home-join__inner {
		align-items: flex-start;
		flex-direction: column;
		gap: 30px;
	}

}



/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

	.eras-home-hero {
		min-height: 570px;
	}


	.eras-home-hero__background {
		background-position: 58% center;
	}


	.eras-home-hero__overlay {
		background:
			linear-gradient(
				90deg,
				rgba(3, 38, 77, .94) 0%,
				rgba(3, 44, 87, .82) 72%,
				rgba(3, 44, 87, .64) 100%
			);
	}


	.eras-home-hero__content {
		padding: 70px 0 100px;
	}


	.eras-home-hero__title {
		font-size: 45px;
	}


	.eras-home-hero__lead {
		font-size: 15px;
	}


	.eras-home-hero__actions {
		align-items: stretch;
		flex-direction: column;
	}


	.eras-home-button {
		width: 100%;
	}


	.eras-home-intro {
		padding: 70px 0;
	}


	.eras-home-intro__heading h2 {
		font-size: 35px;
	}


	.eras-home-intro__text {
		font-size: 15px;
	}


	.eras-home-principles {
		margin-top: 45px;
	}


	.eras-home-guidelines {
		padding: 72px 0;
	}


	.eras-home-guidelines__header {
		flex-direction: column;
		gap: 25px;
	}


	.eras-home-guidelines__summary {
		text-align: left;
	}


	.eras-home-guidelines__header h2 {
		font-size: 35px;
	}


	.eras-home-guideline-card {
		padding: 21px;
	}


	.eras-home-join {
		padding: 65px 0;
	}

}
/* Per-section appearance controls from the homepage editor. */
.eras-home-section-appearance {
	/* If a section background is set in the editor, replace the complete
	   theme background (including gradients/images), not just background-color.
	   When the custom property is empty/unset this declaration is invalid and
	   the section's original theme background remains untouched. */
	background: var(--eras-section-background) !important;
	color: var(--eras-section-text, inherit);
}

.eras-home .eras-home-section-appearance p,
.eras-home .eras-home-section-appearance li,
.eras-home .eras-home-section-appearance .eras-home-intro__text,
.eras-home .eras-home-section-appearance .eras-home-principle > div > span,
.eras-home .eras-home-section-appearance .eras-home-join__text {
	color: var(--eras-section-text, inherit) !important;
}

.eras-home .eras-home-section-appearance h1,
.eras-home .eras-home-section-appearance h2,
.eras-home .eras-home-section-appearance h3,
.eras-home .eras-home-section-appearance h4,
.eras-home .eras-home-section-appearance h5,
.eras-home .eras-home-section-appearance h6,
.eras-home .eras-home-section-appearance .eras-home-principle strong {
	color: var(--eras-section-heading, inherit) !important;
}

.eras-home .eras-home-section-appearance .eras-home-kicker,
.eras-home .eras-home-section-appearance .eras-home-principle__icon,
.eras-home .eras-home-section-appearance .eras-home-guideline-card__category {
	color: var(--eras-section-accent, inherit) !important;
}