/*
 * Keenan HC: layouts.css
 * Page sections and saved Section templates. One fenced block per section.
 * Boxed containers lay out on their .e-con-inner; full containers on themselves.
 */

/*---- SECTION BASE ----*/
.section {
	padding-block: var(--kc-section-space);
}

.section__heading {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--kc-space-4);
	margin-bottom: var(--kc-space-6);
}

/*---- HERO ----*/
.e-con.hero {
	position: relative;
	isolation: isolate;
	min-height: max(680px, calc(100svh - 116px));
	overflow: hidden;
	background-color: var(--kc-charcoal);
	background-size: cover;
	color: var(--kc-white);
}

.e-con.hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: auto;
	background: var(--kc-scrim-hero);
	opacity: 1;
	mix-blend-mode: normal;
}

.e-con.hero::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: min(42vw, 620px);
	height: 7px;
	background: var(--kc-bar-red-blue);
}

.hero > .e-con-inner {
	min-height: inherit;
	justify-content: flex-end;
	padding-block: clamp(5rem, 11vh, 8rem);
}

.hero__copy {
	width: 100%;
	max-width: 46rem;
}

.hero__kicker .elementor-heading-title {
	color: var(--kc-white);
}

.hero__kicker .elementor-heading-title span {
	color: var(--kc-red);
}

.hero__title h1.elementor-heading-title {
	max-width: 14ch;
	font-size: var(--kc-type-hero);
}

.hero__title-cool {
	color: var(--kc-blue);
}

.hero__intro {
	max-width: 560px;
	margin-top: 1.35rem;
	color: var(--kc-white);
	font-size: var(--kc-type-lead);
}

.hero__actions .elementor-button:focus-visible {
	outline-color: var(--kc-white);
}

.hero__areas ul {
	gap: 0.35rem 1rem;
	margin-top: var(--kc-space-5);
	color: var(--kc-on-dark);
	font-size: var(--kc-type-small);
	font-weight: 700;
}

.hero__areas li:not(:last-child)::after {
	content: "/";
	margin-left: 1rem;
	color: var(--kc-blue-tint);
}

/*---- OWNERSHIP STRIP ----*/
.e-con.ownership {
	border-bottom: 1px solid var(--kc-line);
	background: var(--kc-off-white);
}

.ownership > .e-con-inner {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kc-space-3) var(--kc-space-5);
	padding-block: var(--kc-space-4);
}

.ownership__tagline .elementor-heading-title {
	color: var(--kc-red-dark);
	font-weight: 800;
}

.ownership__list ul {
	gap: var(--kc-space-2) var(--kc-space-4);
	font-size: var(--kc-type-small);
}

.ownership__list,
.ownership__tagline,
.ownership__link {
	width: auto;
}

/*---- SERVICES ----*/
.e-con.services {
	overflow: hidden;
	background: var(--kc-white);
}

.services__carousel {
	--swiper-pagination-bottom: 0;
}

.services__hint .elementor-heading-title {
	margin-top: 1.25rem;
	color: var(--kc-muted);
	font-size: var(--kc-type-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: right;
	text-transform: uppercase;
}

/*---- COMFORT EXPERIENCE ----*/
.e-con.comfort {
	background: var(--kc-night);
	color: var(--kc-white);
}

.comfort > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: center;
	gap: 40px;
	padding-block: 72px;
}

.comfort__title h2.elementor-heading-title {
	color: var(--kc-white);
	font-size: clamp(48px, 5.8vw, 80px);
	font-weight: 650;
	line-height: 1.04;
	letter-spacing: -0.05em;
}

.comfort__title span {
	color: var(--kc-blue-tint);
}

.comfort__description {
	max-width: 34ch;
	margin-top: 20px;
	color: var(--kc-on-dark-muted);
	font-size: clamp(16px, 1.5vw, 20px);
	line-height: 1.55;
}

.comfort__copy .btn__ice {
	margin-top: 28px;
}

.e-con.comfort__device {
	width: 100%;
	max-width: 560px;
	min-height: 0;
	margin-inline: auto;
	aspect-ratio: 1;
	border-radius: 50%;
}

/*---- REPLACEMENT QUOTE ----*/
.e-con.quote {
	padding-block: clamp(56px, 7vw, 104px);
	border-bottom: 1px solid var(--kc-ice-line);
	background: var(--kc-ice);
}

.quote > .e-con-inner {
	display: grid;
	grid-template-columns: 0.8fr 1.3fr;
	align-items: start;
	gap: 72px;
	max-width: 1152px;
}

.quote__intro {
	padding-top: 38px;
}

.quote__title h2.elementor-heading-title {
	margin-bottom: 20px;
	color: var(--kc-ink);
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.07;
	letter-spacing: -0.045em;
}

.quote__title span {
	color: var(--kc-blue-dark);
}

.quote__text {
	max-width: 34ch;
	font-size: 17px;
}

.quote__phone a {
	color: var(--kc-blue-dark);
	font-size: var(--kc-type-small);
	font-weight: 650;
	text-decoration: none;
}

.e-con.quote__panel {
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid var(--kc-line);
	border-radius: 16px;
	background: var(--kc-white);
	box-shadow: var(--kc-shadow-card);
}

.quote__note {
	margin-top: var(--kc-space-3);
	padding-left: 14px;
	border-left: 2px solid var(--kc-blue);
	color: var(--kc-muted);
	font-size: var(--kc-type-small);
}

/* Photo under the quote intro, filling the column beside the form. */
.quote__image {
	margin-top: var(--kc-space-6);
}

.quote__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--kc-radius-md);
}

.quote__phone {
	margin-top: var(--kc-space-3);
}

/*---- COMFORT CLUB ----*/
.e-con.club {
	padding-block: clamp(64px, 8vw, 112px);
	background: var(--kc-white);
}

.club > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(min(100%, 20rem), 0.9fr) minmax(0, 1.1fr);
	align-items: start;
	gap: clamp(3rem, 8vw, 8rem);
}

.club__lead {
	margin-top: 1.2rem;
}

.club__brand {
	width: 100%;
	max-width: 30rem;
	margin-inline: auto;
	padding: var(--kc-space-4);
	border-radius: var(--kc-radius-md);
	background: var(--kc-white);
}

.club__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/*---- WHY KEENAN ----*/
.e-con.why {
	position: relative;
	isolation: isolate;
	display: grid;
	overflow: hidden;
	background: var(--kc-charcoal);
	color: var(--kc-white);
}

.e-con.why::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: auto;
	background: var(--kc-scrim-why);
	opacity: 1;
	mix-blend-mode: normal;
}

.e-con.why::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: min(52vw, 760px);
	height: 7px;
	background: var(--kc-bar-blue-red);
}

.why > .why__image,
.why > .why__content {
	grid-area: 1 / 1;
}

.why__image {
	position: relative;
	z-index: -2;
	height: 100%;
}

.why__image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1800 / 1013;
	object-fit: cover;
	object-position: right center;
}

.why__content > .e-con-inner {
	justify-content: center;
	padding-block: var(--kc-space-7);
}

.why__panel {
	width: 46%;
}

.why__text {
	margin-top: var(--kc-space-4);
}

.why__values ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 2.25rem 0 0;
	padding: 0;
	border-top: 1px solid var(--kc-rule-light-strong);
	border-bottom: 1px solid var(--kc-rule-light-strong);
	list-style: none;
}

.why__values li {
	display: grid;
	gap: 0.3rem;
	padding: 1.25rem 1.25rem 1.25rem 0;
}

.why__values li + li {
	padding-left: 1.25rem;
	border-left: 1px solid var(--kc-rule-light);
}

.why__values span {
	color: var(--kc-blue-tint);
	font-size: var(--kc-type-small);
	font-weight: 900;
	letter-spacing: 0.12em;
}

/*---- STORY ----*/
.e-con.story {
	background: var(--kc-off-white);
}

.story > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(3rem, 7vw, 7rem);
}

.e-con.story__card {
	/* Headshot card: narrow so it doesn't outweigh the story copy; the
	   541px source is never shown much past 1.4x. */
	justify-self: center;
	width: 100%;
	max-width: 400px;
	align-self: center;
	height: auto;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--kc-rule-header);
	border-radius: var(--kc-radius-md);
	background: var(--kc-white);
	box-shadow: var(--kc-shadow);
}

.story__portrait img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center top;
}

.e-con.story__caption {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kc-space-3);
	min-height: 100px;
	padding: 1.2rem 1.4rem;
	border-top: 1px solid var(--kc-line);
	background: var(--kc-charcoal);
	color: var(--kc-white);
}

.story__caption-logo {
	width: 150px;
}

.story__caption-logo img {
	display: block;
	width: 100%;
	padding: 0.45rem;
	border-radius: var(--kc-radius-sm);
	background: var(--kc-white);
}

.story__caption-text {
	width: auto;
}

.story__caption-text p {
	display: grid;
	gap: 0.1rem;
	margin: 0;
	text-align: right;
}

.story__caption-text strong {
	font-size: 1.05rem;
}

.story__caption-text span {
	color: var(--kc-on-dark-soft);
	font-size: var(--kc-type-small);
}

.story__text {
	max-width: 60ch;
	margin-top: var(--kc-space-4);
	color: var(--kc-muted);
	font-size: var(--kc-type-lead);
}

.story__points {
	margin-top: var(--kc-space-5);
	border-top: 1px solid var(--kc-line);
}

.story__points p {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: var(--kc-space-3);
	margin: 0;
	padding: 1rem 0;
	border-bottom: 1px solid var(--kc-line);
}

.story__points span {
	color: var(--kc-muted);
}

/*---- HOMETOWN HEROES ----*/
.e-con.heroes {
	position: relative;
	overflow: hidden;
	background: var(--kc-red);
	color: var(--kc-white);
}

.heroes > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: var(--kc-space-7);
}

.heroes__text {
	max-width: 700px;
	margin-top: var(--kc-space-4);
	color: var(--kc-on-red);
}

.heroes__audience ul {
	gap: var(--kc-space-2);
	margin: var(--kc-space-4) 0 0;
}

.heroes__audience li {
	padding: var(--kc-space-1) var(--kc-space-3);
	border: 1px solid var(--kc-rule-light-strong);
	border-radius: var(--kc-radius-pill);
	font-size: var(--kc-type-small);
	font-weight: 700;
}

.heroes__terms {
	max-width: 460px;
	margin-top: var(--kc-space-4);
	color: var(--kc-white);
	font-size: var(--kc-type-small);
}

.e-con.heroes__badge {
	align-items: center;
	padding: var(--kc-space-6) var(--kc-space-4);
	border-radius: var(--kc-radius-md);
	background: var(--kc-white);
	color: var(--kc-ink);
	box-shadow: var(--kc-shadow);
}

.heroes__logo,
.heroes__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/*---- EAST VALLEY ----*/
.e-con.valley {
	position: relative;
	min-height: 70vh;
	justify-content: flex-end;
	overflow: hidden;
	background-color: var(--kc-charcoal);
	background-position: center;
	background-size: cover;
	color: var(--kc-white);
}

/* Poster = container background; assets/js/valley-video.js adds .valley__video. */
.valley__video {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.e-con.valley::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: auto;
	background: var(--kc-scrim-valley);
	opacity: 1;
	mix-blend-mode: normal;
}

.e-con.valley::after {
	content: "";
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 160px;
	background: url("../images/keenan-band-divider.svg") left center / cover no-repeat;
	pointer-events: none;
}

/* The background video sits inside .e-con-inner, so the inner stays static
   and only its content is lifted above the video. */
.valley > .e-con-inner {
	position: relative;
	z-index: 3;
	justify-content: flex-end;
	padding-block: var(--kc-space-8) calc(var(--kc-space-8) + 80px);
}

.valley__title h2.elementor-heading-title {
	max-width: 860px;
	color: var(--kc-white);
}

.valley__cities {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin-top: var(--kc-space-4);
}

.valley__city {
	display: flex;
	align-items: baseline;
	width: auto;
}

.valley__city + .valley__city::before {
	content: "/";
	margin-right: 28px;
	color: var(--kc-blue-tint);
	font-size: var(--kc-type-location);
	font-weight: 400;
}

.valley__city .elementor-heading-title,
.valley__city .elementor-heading-title a {
	color: var(--kc-white);
	font-size: var(--kc-type-location);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-decoration: none;
}

.valley__city a:hover,
.valley__city a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--kc-blue);
	text-underline-offset: 6px;
}

/*---- SERVICE AREAS ----*/
.e-con.areas {
	background: var(--kc-white);
}

.areas__heading {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
	align-items: end;
	gap: var(--kc-space-6);
	margin-bottom: var(--kc-space-6);
}

.areas__intro {
	max-width: 430px;
	margin-bottom: 0.3rem;
	color: var(--kc-muted);
}

/* Van cutout (front three-quarter) bleeding in from the right edge beside
   the city list (saved section 46) and the nearby-city pills on city pages.
   Desktop only; the sections clip it so it never reaches the CTA band. */
.van-cutout img {
	display: block;
	width: 100%;
	height: auto;
	filter: var(--kc-shadow-van);
}

.e-con.areas,
.e-con.cities {
	position: relative;
	overflow: hidden;
}

.areas > .e-con-inner,
.cities > .e-con-inner {
	position: static;
}

.areas__van,
.cities__van {
	display: none;
	pointer-events: none;
}

@media (min-width: 1025px) {
	/* Elementor pins widget max-width at 100%; narrow the list itself. */
	.areas__links ul {
		max-width: 58%;
	}

	.areas__van {
		display: block;
		position: absolute;
		right: -3vw;
		bottom: var(--kc-section-space);
		width: min(44vw, 640px);
	}
}

@media (min-width: 1200px) {
	.cities__van {
		display: block;
		position: absolute;
		top: 50%;
		right: -2vw;
		width: min(30vw, 460px);
		transform: translateY(-50%);
	}
}

/*---- FAQ ----*/
.e-con.faq {
	background: var(--kc-off-white);
}

.faq > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
	align-items: start;
	gap: clamp(3rem, 8vw, 8rem);
}

.faq__intro-text {
	margin-top: var(--kc-space-4);
	color: var(--kc-muted);
}

/*---- CONTACT BAND ----*/
.e-con.contact {
	background: var(--kc-blue);
	color: var(--kc-ink);
}

.contact > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
	align-items: start;
	gap: clamp(3rem, 8vw, 8rem);
}

.contact__text {
	margin-top: var(--kc-space-4);
}

.contact__note {
	font-size: var(--kc-type-small);
}

.contact__note a {
	font-weight: 800;
	text-underline-offset: 3px;
}

.e-con.contact__form {
	min-height: 460px;
	background: var(--kc-white);
}

/*---- CTA BAND ----*/
.e-con.cta-band {
	padding-block: var(--kc-space-7);
	background: var(--kc-red);
	color: var(--kc-white);
}

.cta-band > .e-con-inner {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kc-space-5);
}

.cta-band > .e-con-inner > .cta-band__title {
	flex: 1 1 24rem;
	width: auto;
}

.cta-band > .e-con-inner > .cta-band__actions {
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	margin-top: 0;
}

/*---- 404 ----*/
.e-con.error-404 {
	min-height: 60vh;
	justify-content: center;
	background: var(--kc-ice);
}

.error-404 > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: var(--kc-space-6);
}

.error-404__van img {
	display: block;
	width: 100%;
	height: auto;
	filter: var(--kc-shadow-van);
}

.error-404__text {
	max-width: 560px;
	margin-top: var(--kc-space-4);
	color: var(--kc-muted);
	font-size: var(--kc-type-lead);
}

/*---- SECTION TONES ----*/
/* White (default), off-white band, ice band: alternate down long pages. */
.e-con.section__ice {
	background: var(--kc-ice);
}

.section__ice .e-con.symptom-card,
.section__ice .e-con.compare-card {
	background: var(--kc-white);
}

/*---- SECTION BAND ----*/
.e-con.section__band {
	background: var(--kc-off-white);
}

/*---- PAGE HERO (service, city, Comfort Club) ----*/
.page-hero > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--kc-space-7);
	padding-block: var(--kc-space-6) var(--kc-space-7);
}

.page-hero__title h1.elementor-heading-title {
	font-size: var(--kc-type-page);
}

.page-hero__title-sub {
	display: block;
	margin-top: 0.35rem;
	color: var(--kc-muted);
	font-size: var(--kc-type-heading-small);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.page-hero__headline .elementor-heading-title {
	margin-top: var(--kc-space-4);
	font-size: var(--kc-type-card);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.15;
}

.page-hero__headline span {
	color: var(--kc-blue-dark);
}

.page-hero__lead {
	margin-top: 1.2rem;
}

.page-hero__note {
	margin-top: var(--kc-space-3);
	color: var(--kc-muted);
	font-size: var(--kc-type-small);
}

.page-hero__logo {
	width: 100%;
	max-width: 18rem;
	margin-bottom: var(--kc-space-4);
}

.page-hero__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.e-con.page-hero__figure {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	aspect-ratio: 5 / 6;
	border-radius: var(--kc-radius-md);
	background: var(--kc-charcoal);
}

.page-hero__photo,
.page-hero__photo img {
	width: 100%;
	height: 100%;
}

.page-hero__photo img {
	display: block;
	object-fit: cover;
}

.page-hero__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: var(--kc-space-7) var(--kc-space-5) var(--kc-space-5);
	background: linear-gradient(transparent, var(--kc-scrim-caption));
	color: var(--kc-white);
}

.page-hero__caption p {
	display: grid;
	gap: var(--kc-space-1);
	margin: 0;
}

.page-hero__caption span {
	font-size: var(--kc-type-small);
}

.page-hero__caption strong {
	font-size: clamp(1.5rem, 2vw, 2rem);
	letter-spacing: -0.03em;
	line-height: 1.2;
}

/*---- SYMPTOMS / CARDS ----*/
.symptoms__heading-copy {
	flex: 1 1 20rem;
	width: auto;
}

.symptoms__intro {
	flex: 0 1 430px;
	width: auto;
	max-width: 430px;
	margin-bottom: 0.3rem;
	color: var(--kc-muted);
}

.symptoms__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--kc-space-3);
}

.club-cards__lead {
	margin-top: 1.2rem;
}

.club-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kc-space-3);
	margin-top: var(--kc-space-6);
}

/*---- PROCESS ----*/
.process__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	margin-top: var(--kc-space-6);
	border-top: 1px solid var(--kc-line);
	border-bottom: 1px solid var(--kc-line);
}

/*---- NEIGHBOR (founder strip) ----*/
.e-con.neighbor {
	overflow: hidden;
}

.neighbor > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	align-items: center;
	gap: var(--kc-space-6);
}


.neighbor__text {
	margin-top: 1.2rem;
}

.neighbor__link {
	margin-top: var(--kc-space-4);
}

.neighbor__photo {
	text-align: center;
}

.neighbor__photo img {
	display: block;
	width: min(100%, 320px);
	height: auto;
	margin-inline: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border: 1px solid var(--kc-rule-header);
	border-radius: var(--kc-radius-md);
	box-shadow: var(--kc-shadow-card);
}

/*---- RELATED LINKS ----*/
.related > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(min(100%, 20rem), 0.9fr) minmax(0, 1.1fr);
	align-items: start;
	gap: clamp(3rem, 8vw, 8rem);
}

.related__lead {
	margin-top: 1.2rem;
}

/*---- LOCAL BLOCK (city pages) ----*/
.local > .e-con-inner {
	max-width: 820px;
}

.local__text {
	margin-top: var(--kc-space-4);
	color: var(--kc-ink);
	font-size: var(--kc-type-lead);
}

.local__text a {
	color: var(--kc-blue-dark);
	font-weight: 700;
	text-underline-offset: 4px;
}

/*---- CONTACT PAGE ----*/
.contact-intro > .e-con-inner {
	padding-block: var(--kc-space-7) var(--kc-space-5);
}

.contact-intro__title h1.elementor-heading-title {
	max-width: 20ch;
}

.contact-intro__lead {
	margin-top: 1.2rem;
}

.contact-workspace > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	align-items: start;
	gap: var(--kc-space-5);
	padding-bottom: var(--kc-section-space);
}

.contact-workspace__side {
	gap: var(--kc-space-5);
}

.e-con.contact-card {
	padding: var(--kc-space-5);
	border-radius: var(--kc-radius-md);
	background: var(--kc-off-white);
}

.e-con.contact-card__primary {
	background: var(--kc-blue);
	color: var(--kc-ink);
}

.contact-card__title h2.elementor-heading-title {
	font-size: var(--kc-type-card);
}

.contact-card__phone .elementor-button {
	display: inline-flex;
	margin-top: var(--kc-space-3);
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--kc-ink);
	border-radius: var(--kc-radius-pill);
	background: transparent;
	color: var(--kc-ink);
	font-size: 1rem;
	font-weight: 900;
	letter-spacing: 0.05em;
}

.contact-card__phone .elementor-button:hover {
	background: var(--kc-ink);
	color: var(--kc-white);
}

.contact-card__text {
	margin-top: var(--kc-space-3);
}

.contact-card__text a {
	font-weight: 800;
}

/* Photo in the side column beside the request form (desktop and tablet). */
.contact-workspace__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--kc-radius-md);
}

.e-con.contact-local {
	padding: var(--kc-space-4);
}

.contact-local__text {
	margin-top: var(--kc-space-2);
	color: var(--kc-muted);
}

.e-con.request-card {
	padding: var(--kc-space-5);
	border: 1px solid var(--kc-line);
	border-radius: var(--kc-radius-md);
	background: var(--kc-white);
}

.request-card__intro {
	margin-block: var(--kc-space-3) var(--kc-space-5);
	padding-left: var(--kc-space-3);
	border-left: 3px solid var(--kc-blue);
	font-size: var(--kc-type-small);
}

.request-card__intro a {
	font-weight: 800;
}

/*---- LEGAL PAGE ----*/
.legal > .e-con-inner {
	padding-block: var(--kc-space-7) var(--kc-section-space);
}

/*---- BLOG ARCHIVE (Resources) ----*/
.blog-hero > .e-con-inner {
	padding-block: var(--kc-space-7) var(--kc-space-5);
}

.blog-hero__lead {
	margin-top: 1.2rem;
}

.e-con.blog-grid {
	padding-top: 0;
}

/* The empty state is printed by [keenan_blog_empty] only when there are no posts. */
.blog-empty__box {
	display: flex;
	flex-direction: column;
	gap: var(--kc-space-3);
	padding: var(--kc-space-6);
	border-radius: var(--kc-radius-md);
	background: var(--kc-off-white);
}

.blog-empty__text {
	margin: 0;
	color: var(--kc-muted);
	font-size: var(--kc-type-lead);
}

.blog-empty__text a {
	color: var(--kc-blue-dark);
	font-weight: 700;
}

.blog-empty__links {
	max-width: 640px;
}

.blog-grid__loop .elementor-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--kc-space-2);
	margin-top: var(--kc-space-6);
	font-weight: 700;
}

.blog-grid__loop .elementor-pagination .page-numbers {
	min-width: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--kc-line);
	border-radius: var(--kc-radius-sm);
	text-align: center;
	text-decoration: none;
}

.blog-grid__loop .elementor-pagination .page-numbers.current {
	border-color: var(--kc-red);
	background: var(--kc-red);
	color: var(--kc-white);
}

/*---- SINGLE POST ----*/
.post-hero > .e-con-inner,
.post-body > .e-con-inner {
	max-width: 820px;
}

.post-hero > .e-con-inner {
	padding-block: var(--kc-space-6) var(--kc-space-4);
}

.post-hero .breadcrumbs__nav {
	margin-bottom: var(--kc-space-4);
}

.post-meta__line {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kc-space-1) var(--kc-space-4);
	margin: var(--kc-space-3) 0 0;
	color: var(--kc-muted);
	font-size: var(--kc-type-small);
}

.post-hero__image img {
	display: block;
	width: 100%;
	margin-top: var(--kc-space-5);
	border-radius: var(--kc-radius-md);
}

.post-body > .e-con-inner {
	padding-bottom: var(--kc-section-space);
}

.post-body__content {
	font-size: 1.0625rem;
	line-height: 1.75;
}

.post-body__content :is(h2, h3) {
	margin-top: var(--kc-space-6);
	margin-bottom: var(--kc-space-3);
}

/* Long source URLs must wrap on phones. */
.post-body__content :is(p, li, a) {
	overflow-wrap: anywhere;
}

.post-body__content a {
	color: var(--kc-blue-dark);
	font-weight: 700;
	text-underline-offset: 4px;
}

.post-body__content img {
	border-radius: var(--kc-radius-sm);
}

.e-con.post-related {
	margin-top: var(--kc-space-6);
}

.post-related__title h2.elementor-heading-title {
	margin-bottom: var(--kc-space-3);
	font-size: var(--kc-type-card);
}

/*---- SYMPTOMS: 5 or 6 cards ----*/
.symptoms__grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*---- EXPLAINER BAND ----*/
/* Image + copy, 50/50. explainer__reverse puts the image on the right. */
.explainer > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2.5rem, 6vw, 6rem);
}

.explainer__reverse > .e-con-inner > .explainer__media {
	order: 2;
}

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

/* Desktop: the photo stretches to the copy's height, so long explainers
   don't leave empty space under a short image. */
@media (min-width: 1025px) {
	.explainer > .e-con-inner {
		align-items: stretch;
	}

	/* The photo is positioned inside its column, so the copy alone sets the
	   row height and the image fills it (never the other way round). */
	.e-con.explainer__media {
		position: relative;
		min-height: 360px;
	}

	.explainer__media .explainer__image {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.explainer__media img {
		height: 100%;
		aspect-ratio: auto;
	}

	/* Crop anchors for the tall desktop fill (site.py IMAGE_FOCUS). */
	.explainer__image-x20 img {
		object-position: 20% center;
	}

	.explainer__image-x30 img {
		object-position: 30% center;
	}

	.explainer__image-x80 img {
		object-position: 80% center;
	}

	.explainer__copy {
		justify-content: center;
	}
}

.explainer__list {
	max-width: 60ch;
	margin-top: var(--kc-space-4);
}

.explainer__text {
	max-width: 60ch;
	margin-top: var(--kc-space-4);
	color: var(--kc-muted);
	font-size: var(--kc-type-lead);
}

/*---- CALLOUT BAND ----*/
.callout-band > .e-con-inner {
	max-width: 880px;
}

.e-con.callout-band {
	padding-block: var(--kc-space-6);
}

/*---- SAFETY ----*/
/* "When to turn your AC off and call": a normal full-width section (band
   tone from the page), copy on the left, shut-off triggers on the right.
   Red stays on the H2 eyebrow only, like every other section. */
.safety > .e-con-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: start;
	gap: clamp(2.5rem, 6vw, 6rem);
}

.safety__intro {
	max-width: 46ch;
	margin-top: var(--kc-space-4);
	color: var(--kc-muted);
	font-size: var(--kc-type-lead);
}

.safety__list {
	/* ONE-LINE SWITCH for the trigger markers:
	   var(--kc-marker-dot) neutral dot (current, Mike 10/8) | var(--kc-marker-check) blue check | var(--kc-marker-alert) red alert */
	--safety-marker: var(--kc-marker-dot);
}

.safety__list li {
	font-weight: 700;
}

/* Items that start with a bold lead ("If you smell gas,") read as one
   sentence: the lead stays inline and only it is bold. */
.safety__list li:has(> strong) {
	font-weight: 400;
}

.safety__list li > strong {
	display: inline;
	font-weight: 800;
}

.safety__list li::before {
	border-radius: 0;
	background: var(--safety-marker) center / contain no-repeat;
}

.safety__list li::after {
	display: none;
}

.safety__note {
	margin-top: var(--kc-space-4);
	padding-top: var(--kc-space-4);
	border-top: 1px solid var(--kc-line);
	color: var(--kc-muted);
}

/*---- COMPARE ----*/
.compare__intro {
	max-width: 62ch;
	margin-top: var(--kc-space-4);
	color: var(--kc-muted);
	font-size: var(--kc-type-lead);
}

.compare__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kc-space-4);
	margin-top: var(--kc-space-6);
}

.compare__outro {
	margin-top: var(--kc-space-5);
	color: var(--kc-muted);
}

/*---- COST FACTORS CHECKLIST ----*/
.checklist__intro {
	max-width: 62ch;
	margin-top: var(--kc-space-4);
	color: var(--kc-muted);
	font-size: var(--kc-type-lead);
}

.checklist__list {
	margin-top: var(--kc-space-6);
}

.checklist__list ul {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kc-space-4) var(--kc-space-6);
}

.checklist__note {
	margin-top: var(--kc-space-5);
	color: var(--kc-muted);
	font-size: var(--kc-type-small);
}

/*---- MEDIA QUERIES ----*/
@media (max-width: 1024px) {
	.e-con.hero {
		background-position: right center;
	}

	.story > .e-con-inner,
	.faq > .e-con-inner,
	.contact > .e-con-inner,
	.club > .e-con-inner,
	.quote > .e-con-inner {
		grid-template-columns: 1fr;
	}

	.quote > .e-con-inner {
		gap: 32px;
	}

	.quote__intro {
		padding-top: 0;
	}

	.story__card {
		order: 2;
	}

	.areas__heading {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.heroes > .e-con-inner {
		gap: var(--kc-space-5);
	}

	.e-con.why {
		display: block;
	}

	.e-con.why::before {
		display: none;
	}

	.why__image img {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.why__content > .e-con-inner {
		padding-block: var(--kc-space-6);
	}

	.why__panel {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.heroes > .e-con-inner {
		grid-template-columns: 1fr;
	}

	.e-con.heroes__badge {
		width: min(100%, 380px);
		margin-inline: auto;
	}

	.comfort > .e-con-inner {
		grid-template-columns: 1fr;
		gap: 22px;
		padding-block: 56px 48px;
		text-align: center;
	}

	.comfort__description {
		max-width: none;
	}

	.comfort__copy .btn__ice,
	.comfort__copy .btn__ice .elementor-button {
		width: 100%;
	}

	.cta-band > .e-con-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.cta-band__actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.e-con.valley {
		min-height: 80vh;
	}

	.valley > .e-con-inner {
		padding-block: var(--kc-space-8) calc(var(--kc-space-8) + 42px);
	}

	.valley__cities {
		flex-direction: column;
		gap: 0.35rem;
	}

	.valley__city + .valley__city::before {
		display: none;
	}

	.e-con.valley::after {
		height: 96px;
	}

	/* 404: van above the copy. */
	.error-404 > .e-con-inner {
		grid-template-columns: 1fr;
		gap: var(--kc-space-4);
	}

	.error-404__van {
		order: -1;
		max-width: 340px;
	}

	/* Phones: the form follows its intro directly; the side photos drop. */
	.quote__image,
	.contact-workspace__image {
		display: none;
	}

	/* Phones: the van photo is a full-width 16:9 band on top and the copy
	   sits below it on charcoal, so the KEENAN wordmark is never under text. */
	.e-con.hero::before {
		background: var(--kc-scrim-hero-mobile);
	}

	.e-con.hero {
		min-height: 0;
	}

	.hero > .e-con-inner {
		padding-block: calc(var(--kc-hero-band-mobile) + 1.75rem) 3.75rem;
	}

	.hero__actions {
		display: grid;
		grid-template-columns: 1fr;
		margin-top: var(--kc-space-4);
	}

	.hero__actions .elementor-button,
	.why__actions .elementor-button,
	.cta-band__actions .elementor-button {
		width: 100%;
	}

	.hero__areas li:not(:last-child)::after {
		margin-left: 0.55rem;
	}

	.ownership > .e-con-inner {
		gap: var(--kc-space-2);
	}

	.ownership__tagline {
		flex-basis: 100%;
	}

	.e-con.story__caption {
		padding: 1rem;
	}

	.story__caption-logo {
		width: 128px;
	}

	.e-con.service-card {
		min-height: min(105vw, 487.5px);
	}

	.why__image img {
		aspect-ratio: 4 / 5;
		/* Van photo: keep the KEENAN wordmark in the portrait crop. */
		object-position: 50% center;
	}

	.why__text {
	margin-top: var(--kc-space-4);
}

.why__values ul {
		grid-template-columns: 1fr;
	}

	.why__values li {
		padding: 0.9rem 0;
	}

	.why__values li + li {
		padding-left: 0;
		border-top: 1px solid var(--kc-rule-light);
		border-left: 0;
	}

	.why__actions {
		display: grid;
		grid-template-columns: 1fr;
	}
}

@media (max-width: 380px) {
	.story__points p {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.valley__video {
		display: none;
	}
}

@media (max-width: 1024px) {
	.symptoms__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.club-cards__grid {
		grid-template-columns: 1fr 1fr;
	}

	.page-hero > .e-con-inner {
		gap: var(--kc-space-5);
	}

	.related > .e-con-inner,
	.contact-workspace > .e-con-inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.page-hero > .e-con-inner,
	.neighbor > .e-con-inner,
	.symptoms__grid,
	.club-cards__grid {
		grid-template-columns: 1fr;
	}

	.e-con.page-hero__figure {
		aspect-ratio: 4 / 3;
	}

	.page-hero__actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.page-hero__actions .elementor-button {
		width: 100%;
	}

	.symptom-card__number .elementor-heading-title {
		margin-bottom: var(--kc-space-3);
	}

	.neighbor__photo img {
		width: min(100%, 280px);
	}

	.e-con.contact-card,
	.e-con.request-card {
		padding: var(--kc-space-4);
	}
}

@media (max-width: 1024px) {
	.symptoms__grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.explainer > .e-con-inner {
		gap: var(--kc-space-5);
	}
}

@media (max-width: 767px) {
	.symptoms__grid-3,
	.explainer > .e-con-inner,
	.safety > .e-con-inner,
	.compare__grid,
	.checklist__list ul {
		grid-template-columns: 1fr;
	}

	/* Image always first when stacked. */
	.explainer__reverse > .e-con-inner > .explainer__media {
		order: 0;
	}

	.e-con.callout,
	.e-con.compare-card {
		padding: var(--kc-space-4);
	}
}