/* Hero components. See AUDIT.md §7.
   Two real families existed: a dark "gradient + glow donut" hero used (with
   only gradient/glow-size/position differences) on contact, electricity,
   services, solar, about-modern and gas-prices — now `.hero--gradient` with a
   per-page modifier class carrying the custom properties that vary — and a
   light "photo" hero used only on customers — now `.hero--photo`. A third,
   `.inner-hero`, is the sub-page hero already shared verbatim across
   electricity/*.html and gas/*.html (renamed from .electricity-inner-hero,
   which tied a cross-vertical component to one vertical's name). */

/* ---------- .hero--gradient (contact / electricity / services / solar / about-modern / gas-prices) ---------- */

.hero--gradient {
	position: relative;
	min-height: var(--hero-min-height, auto);
	padding: var(--hero-padding, 6.875rem 0 6.25rem);
	/* 110px 0 100px */
	overflow: hidden;
	background: var(--hero-gradient);
}

.hero--gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 3.625rem 3.625rem;
	/* 58px */
	mask-image: linear-gradient(to right, #000, transparent 80%);
}

.hero__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(0.25rem);
	pointer-events: none;
}

/* one-donut variant (electricity/services/solar/about-modern/gas-prices): a
   plain ::after on the section itself (matches the original markup — these
   pages never had an extra glow <div>). Set --hero-glow-size/-top/-right/
   -border/-color per page modifier. Contact uses two real .hero__glow divs
   instead, so .hero--contact suppresses this pseudo-element (see below). */
.hero--gradient::after {
	content: "";
	position: absolute;
	top: var(--hero-glow-top, -16.25rem);
	right: var(--hero-glow-right, -10.625rem);
	width: var(--hero-glow-size, 40.625rem);
	height: var(--hero-glow-size, 40.625rem);
	border: var(--hero-glow-border, 6.875rem) solid var(--hero-glow-color, rgba(255, 255, 255, .12));
	border-radius: 50%;
}

/* two-glow variant (contact only) */
.hero__glow--one {
	top: -13.75rem;
	/* -220px */
	right: -5rem;
	/* -80px */
	width: 35rem;
	/* 560px */
	height: 35rem;
	border: 5.625rem solid rgba(255, 215, 0, .17);
	/* 90px */
}

.hero__glow--two {
	bottom: -17.5rem;
	/* -280px */
	left: 35%;
	width: 32.5rem;
	/* 520px */
	height: 32.5rem;
	background: rgba(0, 31, 67, .22);
}

.hero--gradient .hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, var(--hero-content-fr, 1.45fr)) minmax(var(--hero-aside-min, 20.625rem), var(--hero-aside-fr, .55fr));
	align-items: end;
	gap: var(--hero-grid-gap, 6.25rem);
	/* 100px */
}

.hero__content {
	max-width: 56.25rem;
	/* 900px */
	min-width: 0;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	/* 10px */
	margin-bottom: 1.625rem;
	/* 26px */
	color: #fff;
	font-size: 0.8125rem;
	/* 13px */
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hero__eyebrow i {
	color: #ffd700;
}

.hero__eyebrow--blue {
	color: var(--brand-blue);
}

.hero--gradient .hero__content h1 {
	max-width: 53.125rem;
	margin: 0 0 1.875rem;
	color: #fff;
	font-family: "Montserrat Alternates", sans-serif;
	font-size: clamp(3.125rem, 5.2vw, 4.125rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.055em;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.hero--gradient .hero__content p {
	max-width: 45rem;
	/* 720px */
	margin: 0;
	color: rgba(255, 255, 255, .78);
	font-size: 1.125rem;
	/* 18px */
	line-height: 1.75;
}

.hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.75rem;
	/* 28px */
	margin-top: 2.625rem;
	/* 42px */
}

.hero__mail {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	/* 10px */
	color: #fff;
	font-size: 0.9375rem;
	/* 15px */
	font-weight: 600;
	overflow-wrap: anywhere;
}

.hero__mail:hover,
.hero__mail:focus {
	color: #ffd700;
}

/* secondary-column "info panel" variant (contact) */
.hero__panel {
	position: relative;
	padding: 2.25rem;
	/* 36px */
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 1.5rem;
	/* 24px */
	background: rgba(255, 255, 255, .12);
	box-shadow: 0 1.5rem 4.375rem rgba(0, 23, 49, .26);
	backdrop-filter: blur(0.875rem);
}

.hero__panel-label {
	display: block;
	padding-right: 4.375rem;
	/* 70px */
	color: rgba(255, 255, 255, .7);
	font-size: 0.8125rem;
	/* 13px */
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hero__panel-icon {
	position: absolute;
	top: 1.625rem;
	/* 26px */
	right: 1.75rem;
	/* 28px */
	display: grid;
	place-items: center;
	width: 3.5rem;
	/* 56px */
	height: 3.5rem;
	border-radius: 50%;
	background: #ffd700;
	color: #003b7a;
	font-size: 1.3125rem;
	/* 21px */
}

.hero__panel>strong {
	display: block;
	margin-top: 3rem;
	/* 48px */
	color: #fff;
	font-family: "Montserrat Alternates", sans-serif;
	font-size: 2.125rem;
	/* 34px */
	font-weight: 600;
}

.hero__panel>p {
	margin: 0.25rem 0 2rem;
	/* 4px 0 32px */
	color: #fff;
	font-size: 1.1875rem;
	/* 19px */
}

.hero__panel-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	/* 12px */
	padding-top: 1.375rem;
	/* 22px */
	border-top: 1px solid rgba(255, 255, 255, .18);
	color: rgba(255, 255, 255, .72);
}

.hero__panel-footer span {
	font-size: 0.8125rem;
	/* 13px */
	font-weight: 600;
}

.hero__panel-footer span i {
	margin-right: 0.375rem;
	/* 6px */
	color: #77dc8c;
	font-size: 0.5rem;
	/* 8px */
}

.hero__panel-footer small {
	font-size: 0.75rem;
	/* 12px */
}

/* contact page modifier — plug values into the shared skeleton above */
.hero--contact {
	--hero-min-height: 36.875rem;
	/* 590px */
	--hero-gradient: linear-gradient(120deg, #002d5e 0%, #005bbb 62%, #0879db 100%);
}

.hero--contact::after {
	content: none;
	/* contact uses its own two .hero__glow divs instead */
}

.hero--electricity {
	--hero-padding: 6.5625rem 0;
	/* 105px */
	--hero-gradient: linear-gradient(120deg, rgba(0, 54, 111, .96) 0%, rgba(0, 91, 187, .84) 72%, rgba(22, 123, 213, .7) 100%), url('../../images/electro.jpg') center/cover no-repeat;
	--hero-glow-size: 40.625rem;
	/* 650px */
	--hero-glow-border: 6.875rem;
	/* 110px */
	--hero-glow-color: rgba(255, 215, 0, .13);
	--hero-content-fr: 1.4fr;
	--hero-aside-min: 20rem;
	/* 320px */
	--hero-aside-fr: .6fr;
	--hero-grid-gap: 5.625rem;
	/* 90px */
}

.hero--electricity::before {
	display: none;
	/* electricity doesn't use the grid-line overlay */
}

.hero--gasprices {
	--hero-padding: 5.375rem 0 6rem;
	/* 86px 0 96px */
	--hero-gradient: linear-gradient(90deg, rgba(0, 65, 123, .94) 0%, rgba(0, 93, 180, .82) 48%, rgba(0, 65, 123, .52) 100%), url('../../images/gas2.jpg');
	--hero-content-fr: 1fr;
	--hero-aside-fr: 27.5rem;
	/* 440px, fixed */
	--hero-aside-min: 27.5rem;
	--hero-grid-gap: 3.5rem;
	/* 56px */
}

.hero--gasprices::before {
	display: none;
	/* gas-prices doesn't use the shared grid-line overlay */
}

.hero--gasprices .hero__content h1 {
	max-width: 48.75rem;
	/* 780px */
	margin: 0 0 1.5rem;
	/* 24px */
	font-size: 4.5rem;
	/* 72px */
	font-weight: 500;
	line-height: 1.06;
}

.hero--gasprices .hero__content p {
	max-width: 43.125rem;
	/* 690px */
	margin: 0 0 2.125rem;
	/* 34px */
	color: rgba(255, 255, 255, 0.88);
}

.hero--gasprices .hero__actions {
	gap: 1.125rem;
	/* 18px */
	margin-top: 0;
}

/* gas-prices replaces the shared donut with a small solid accent dot */
.hero--gasprices::after {
	top: auto;
	right: 8%;
	bottom: 4rem;
	/* 64px */
	width: 0.5rem;
	/* 8px */
	height: 0.5rem;
	background: #ffcc00;
	border: none;
}

.hero--about {
	padding: 6.25rem 0;
	/* 100px */
	background: linear-gradient(118deg, #00386f 0%, #005bbb 62%, #0875d5 100%);
	--hero-content-fr: 1.05fr;
	--hero-aside-fr: .75fr;
	--hero-aside-min: 26.875rem;
	/* 430px */
	--hero-grid-gap: 5rem;
	/* 80px */
	--hero-glow-size: 43.75rem;
	/* 700px */
	--hero-glow-top: -16.875rem;
	/* -270px */
	--hero-glow-right: -11.875rem;
	/* -190px */
	--hero-glow-border: 7.5rem;
	/* 120px */
	--hero-glow-color: rgba(255, 213, 0, .11);
}

.hero--about::before {
	display: none;
	/* about doesn't use the shared grid-line overlay */
}

.hero--about .hero__content h1 {
	max-width: 53.125rem;
	/* 850px */
	margin: 0 0 1.75rem;
	/* 28px */
	font-size: clamp(3rem, 5vw, 4.625rem);
	/* 48px - 74px */
}

.hero--about .hero__content p {
	max-width: 45rem;
	/* 720px */
	font-size: 1.0625rem;
	/* 17px */
}

.hero--about .hero__actions {
	gap: 1.75rem;
	/* 28px */
	margin-top: 2.375rem;
	/* 38px */
}

.hero--about .hero__actions>a:last-child {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	/* 10px */
	color: #fff;
	font-size: 0.875rem;
	/* 14px */
	font-weight: 700;
}

.hero--services {
	padding: 6.5625rem 0;
	/* 105px */
	background: linear-gradient(120deg, #00376f 0%, #005bbb 72%, #137ad5 100%);
	--hero-content-fr: 1.15fr;
	--hero-aside-fr: 20rem;
	/* 320px, fixed */
	--hero-aside-min: 20rem;
	--hero-grid-gap: 6.25rem;
	/* 100px */
	--hero-glow-size: 41.875rem;
	/* 670px */
	--hero-glow-border: 6.875rem;
	/* 110px */
	--hero-glow-color: rgba(255, 213, 0, .13);
}

.hero--services::before {
	display: none;
	/* services doesn't use the shared grid-line overlay */
}

.hero--services .hero__content h1 {
	max-width: 59.375rem;
	/* 950px */
	margin: 0 0 1.75rem;
	/* 28px */
	font-size: clamp(3.125rem, 5vw, 4.75rem);
	/* 50px - 76px */
	line-height: 1.03;
}

.hero--services .hero__content p {
	max-width: 49.375rem;
	/* 790px */
	margin: 0 0 2.375rem;
	/* 38px */
	color: rgba(255, 255, 255, .76);
	font-size: 1.0625rem;
	/* 17px */
	line-height: 1.72;
}

.hero--solar {
	min-height: 47.5rem;
	/* 760px */
	padding: 6.5625rem 0 5.9375rem;
	/* 105px 0 95px */
	background: linear-gradient(92deg, rgba(2, 38, 76, .97) 0%, rgba(3, 56, 112, .93) 47%, rgba(2, 47, 97, .35) 100%), url('../../images/GHmWC3lEWMDw.jpg') center/cover no-repeat;
	--hero-content-fr: 1fr;
	--hero-aside-fr: 24.375rem;
	/* 390px, fixed */
	--hero-aside-min: 24.375rem;
	--hero-grid-gap: 5.625rem;
	/* 90px */
	--hero-glow-size: 45rem;
	/* 720px */
	--hero-glow-border: 7.1875rem;
	/* 115px */
	--hero-glow-color: rgba(255, 212, 0, .17);
}

.hero--solar::before {
	display: none;
	/* solar doesn't use the shared grid-line overlay */
}

.hero--solar::after {
	top: auto;
	right: -8.125rem;
	/* -130px */
	bottom: -21.875rem;
	/* -350px */
}

.hero__flare {
	position: absolute;
	left: 48%;
	top: -17.5rem;
	/* -280px */
	width: 32.5rem;
	/* 520px */
	height: 32.5rem;
	border-radius: 50%;
	background: rgba(0, 139, 255, .22);
	filter: blur(6.25rem);
	/* 100px */
}

.hero--solar .hero__content h1 em {
	color: var(--solar-yellow);
	font-style: normal;
}

@media (max-width: 64rem) {

	/* tablet: 1024px — old 991px tier */
	.hero--gradient .hero__grid {
		grid-template-columns: 1fr;
	}

	.hero--contact {
		--hero-min-height: auto;
		--hero-padding: 5.125rem 0;
		/* 82px */
	}

	.hero--contact .hero__panel {
		max-width: 32.5rem;
		/* 520px */
	}

	.hero--gasprices {
		--hero-padding: 4.5rem 0;
		/* 72px */
	}

	.hero--gasprices .hero__content h1 {
		font-size: 3rem;
		/* 48px */
	}

	.hero--electricity {
		--hero-padding: 5rem 0;
		/* 80px */
	}

	.hero--solar {
		padding: 5rem 0;
		/* 80px */
	}

	.hero--services {
		padding: 5rem 0;
		/* 80px */
		--hero-grid-gap: 2.8125rem;
		/* 45px */
	}

	.hero--about {
		padding: 5rem 0;
		/* 80px */
	}
}

@media (max-width: 35rem) {

	/* mobile: 560px — old 575px tier */
	.hero__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.hero__actions .btn-default {
		width: 100%;
		justify-content: center;
	}

	.hero--contact {
		--hero-padding: 4rem 0;
		/* 64px */
	}

	.hero--contact .hero__content h1 {
		font-size: 2.125rem;
		/* 34px */
		letter-spacing: -.05em;
	}

	.hero--contact .hero__content p {
		font-size: 0.9375rem;
		/* 15px */
	}

	.hero--contact .hero__actions {
		align-items: flex-start;
		gap: 1.25rem;
		/* 20px */
	}

	.hero--electricity {
		--hero-padding: 3.75rem 0;
		/* 60px */
	}

	.hero--electricity .hero__content h1 {
		font-size: 2.25rem;
		/* 36px */
	}

	.hero--electricity .hero__content p {
		font-size: 0.9375rem;
		/* 15px */
	}

	.hero--gasprices {
		--hero-padding: 3.625rem 0;
		/* 58px */
	}

	.hero--gasprices .hero__content h1 {
		font-size: 2.375rem;
		/* 38px */
	}

	.hero--gasprices .hero__content p {
		font-size: 0.9375rem;
		/* 15px */
	}

	.hero--gasprices .hero__actions .gas-prices-link {
		justify-content: center;
		width: 100%;
	}

	.hero--solar {
		min-height: 0;
		padding: 4.0625rem 0;
		/* 65px */
	}

	.hero--solar .hero__content h1 {
		font-size: 2.375rem;
		/* 38px */
	}

	.hero--solar .hero__content p {
		font-size: 0.9375rem;
		/* 15px */
	}

	.hero--solar .hero__actions {
		align-items: flex-start;
	}

	.hero--services {
		padding: 4.0625rem 0;
		/* 65px */
	}

	.hero--services .hero__content h1 {
		font-size: 2.375rem;
		/* 38px */
	}

	.hero--services .hero__content p {
		font-size: 0.9375rem;
		/* 15px */
	}

	.hero--about {
		padding: 3.875rem 0;
		/* 62px */
	}

	.hero--about .hero__content h1 {
		font-size: 2.375rem;
		/* 38px */
	}

	.hero--about .hero__content p {
		font-size: 0.9375rem;
		/* 15px */
	}

	.hero--contact .hero__panel {
		padding: 1.625rem;
		/* 26px */
		border-radius: 1.125rem;
		/* 18px */
	}

	.hero--contact .hero__panel>strong {
		font-size: 1.75rem;
		/* 28px */
	}

	.hero--contact .hero__panel-footer {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* ---------- .hero--photo (customers) ---------- */

.hero--photo {
	position: relative;
	overflow: hidden;
	padding: 3.25rem 0 4.75rem;
	/* 52px 0 76px */
	background: #eef5fb;
}

.hero--photo .hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(26.25rem, 32.5rem);
	/* 420px, 520px */
	align-items: stretch;
	gap: 2.875rem;
	/* 46px */
}

.hero--photo .hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 32.5rem;
	/* 520px */
	padding: 2.625rem 0;
	/* 42px */
}

.hero--photo .hero__content h1 {
	max-width: 45rem;
	/* 720px */
	margin: 0 0 1.5rem;
	/* 24px */
	color: #000;
	font-size: 4rem;
	/* 64px */
	font-weight: 500;
	line-height: 1.04;
}

.hero--photo .hero__content p {
	max-width: 41.25rem;
	/* 660px */
	margin: 0;
	color: #253040;
	font-size: 1.125rem;
	/* 18px */
	font-weight: 500;
	line-height: 1.65;
}

.hero__visual {
	position: relative;
	min-height: 32.5rem;
	/* 520px */
	border-radius: 1.75rem;
	/* 28px */
	overflow: hidden;
	background: var(--brand-blue-dark);
	box-shadow: 0 1.875rem 5rem rgba(0, 59, 122, 0.18);
}

.hero__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 59, 122, 0.08), rgba(0, 59, 122, 0.72));
}

.hero__visual img {
	width: 100%;
	height: 100%;
	min-height: 32.5rem;
	/* 520px */
	object-fit: cover;
}

.hero__badge,
.hero__note {
	position: absolute;
	z-index: 1;
}

.hero__badge {
	top: 1.5rem;
	/* 24px */
	left: 1.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	/* 12px */
	border-radius: 62.4375rem;
	/* 999px */
	background: rgba(255, 255, 255, 0.94);
	color: #000;
	font-size: 0.875rem;
	/* 14px */
	font-weight: 800;
	line-height: 1;
	padding: 0.75rem 1rem;
	/* 12px 16px */
}

.hero__badge i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	/* 36px */
	height: 2.25rem;
	border-radius: 50%;
	background: var(--accent-color);
	color: var(--brand-blue);
}

.hero__note {
	right: 1.5rem;
	/* 24px */
	bottom: 1.5rem;
	max-width: 20.625rem;
	/* 330px */
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 1.25rem;
	/* 20px */
	background: rgba(0, 59, 122, 0.72);
	backdrop-filter: blur(0.625rem);
	color: #fff;
	padding: 1.5rem;
	/* 24px */
}

.hero__note strong {
	display: block;
	margin-bottom: 0.75rem;
	/* 12px */
	color: var(--accent-color);
	font-size: 2.625rem;
	/* 42px */
	font-weight: 600;
	line-height: 1;
}

.hero__note p {
	margin: 0;
	color: #fff;
	font-size: 0.9375rem;
	/* 15px */
	font-weight: 600;
	line-height: 1.45;
}

@media (max-width: 64rem) {

	/* tablet: 1024px — old 1199px tier stacks the grid,
	old 991px tier reduces padding/heading size */
	.hero--photo .hero__grid {
		grid-template-columns: 1fr;
	}

	.hero--photo .hero__content {
		min-height: auto;
		padding: 1.25rem 0 0;
		/* 20px */
	}

	.hero--photo .hero__visual {
		min-height: 26.875rem;
		/* 430px */
	}

	.hero--photo .hero__visual img {
		min-height: 26.875rem;
		/* 430px */
	}

	.hero--photo {
		padding: 4.5rem 0;
		/* 72px */
	}

	.hero--photo .hero__content h1 {
		font-size: 2.625rem;
		/* 42px */
	}
}

@media (max-width: 35rem) {

	/* mobile: 560px — old 767px + 575px tiers merged */
	.hero--photo {
		padding: 3.625rem 0;
		/* 58px */
	}

	.hero--photo .hero__content h1 {
		font-size: 2.125rem;
		/* 34px */
	}

	.hero--photo .hero__content p {
		font-size: 0.9375rem;
		/* 15px */
	}

	/* .customers-link-button unified onto .btn-default — the generic
	   .hero__actions .btn-default{width:100%} rule below already covers it */

	.hero--photo .hero__note {
		right: 1rem;
		/* 16px */
		bottom: 1rem;
		left: 1rem;
		max-width: none;
	}
}

/* ---------- .hero--photo-bg (full-width image background) ---------- */

.hero--photo-bg {
	position: relative;
	min-height: 36rem;
	padding: 6.875rem 0 6.25rem;
	overflow: hidden;
	background-color: var(--brand-blue-dark);
}

.hero--photo-bg .hero__background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}

.hero--photo-bg::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(120deg, rgba(0, 54, 111, .96) 0%, rgba(0, 91, 187, .84) 72%, rgba(22, 123, 213, .7) 100%);
	pointer-events: none;
}

.hero--photo-bg .hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
	align-items: center;
	gap: 5.625rem;
}

.hero--photo-bg .hero__grid--single {
	grid-template-columns: minmax(0, 1fr);
}

.hero--photo-bg .hero__content {
	max-width: 53.125rem;
}

.hero--photo-bg .hero__content h1 {
	max-width: 53.125rem;
	margin: 0 0 1.875rem;
	color: #fff;
	font-family: "Montserrat Alternates", sans-serif;
	font-size: clamp(3.125rem, 5.2vw, 5.125rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.055em;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.hero--photo-bg .hero__content p {
	max-width: 45rem;
	margin: 0;
	color: rgba(255, 255, 255, .84);
	font-size: 1.125rem;
	line-height: 1.75;
}

.hero__photo-aside {
	display: flex;
	min-height: 20rem;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
}

.hero--photo-bg .hero__badge,
.hero--photo-bg .hero__note {
	position: relative;
	inset: auto;
	z-index: 1;
}

.hero--photo-bg .hero__note {
	align-self: flex-end;
}

@media (max-width: 64rem) {
	.hero--photo-bg {
		min-height: auto;
		padding: 5rem 0;
	}

	.hero--photo-bg .hero__grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.hero__photo-aside {
		min-height: 0;
		flex-direction: row;
		align-items: flex-end;
	}

	.hero--photo-bg .hero__note {
		align-self: auto;
	}
}

@media (max-width: 35rem) {
	.hero--photo-bg {
		padding: 4.0625rem 0;
	}

	.hero--photo-bg .hero__content h1 {
		font-size: 2.375rem;
	}

	.hero--photo-bg .hero__content p {
		font-size: 0.9375rem;
	}

	.hero__photo-aside {
		align-items: flex-start;
		flex-direction: column;
	}

	.hero--photo-bg .hero__note {
		max-width: none;
	}
}

/* ---------- .inner-hero (electricity/*.html + gas/*.html sub-pages) ---------- */

.inner-hero {
	position: relative;
	padding: 5.625rem 0;
	/* 90px */
	background: #eef3f0;
	overflow: hidden;
}

.inner-hero::after {
	content: "";
	position: absolute;
	right: -5.625rem;
	/* -90px */
	top: -15.625rem;
	/* -250px */
	width: 32.5rem;
	/* 520px */
	height: 32.5rem;
	border: 5rem solid rgba(0, 91, 187, .07);
	/* 80px */
	border-radius: 50%;
}

.inner-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 2.5rem;
	/* 40px */
}

.inner-hero h1 {
	max-width: 59.375rem;
	/* 950px */
	margin: 0 0 1.4375rem;
	/* 23px */
	font-family: "Montserrat Alternates", sans-serif;
	font-size: clamp(2.875rem, 5vw, 4.5rem);
	/* 46px - 72px */
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -.045em;
}

.inner-hero p {
	max-width: 46.875rem;
	/* 750px */
	margin: 0;
	color: var(--brand-muted);
	font-size: 1.0625rem;
	/* 17px */
	line-height: 1.7;
}

.inner-hero__number {
	color: transparent;
	font-family: "Montserrat Alternates", sans-serif;
	font-size: 9.6875rem;
	/* 155px */
	font-weight: 800;
	line-height: .8;
	-webkit-text-stroke: 1px rgba(0, 91, 187, .16);
}

@media (max-width: 64rem) {

	/* tablet: 1024px — old 991px tier */
	.inner-hero__number {
		font-size: 6.5625rem;
		/* 105px */
	}
}

@media (max-width: 35rem) {

	/* mobile: 560px — merges the old 767px + 575px tiers:
	both were shrinking/hiding the same decorative number for narrow screens */
	.inner-hero {
		padding: 4.0625rem 0;
		/* 65px */
	}

	.inner-hero__grid {
		grid-template-columns: 1fr;
	}

	.inner-hero h1 {
		font-size: 2.25rem;
		/* 36px */
	}

	.inner-hero p {
		font-size: 0.9375rem;
		/* 15px */
	}

	.inner-hero__number {
		display: none;
	}
}