/*
  Vertical rhythm for the green CTA / insurance panel is breakpoint-
  driven because the section stacks three blocks (eyebrow, logo grid,
  CTA heading + buttons) and a single padding value made the strip
  feel cramped up top on desktop + oversized on phone. Top/bottom
  scale together so the band grows in proportion to viewport height,
  not in fixed rems.
*/
.kr-contact {
	position: relative;
	padding-block-end: 3rem;
	color: var(--k-white);
	text-align: center;
	background-color: var(--k-grassy-green);
}

@media (min-width: 640px) {
	.kr-contact {
		padding-block-start: 7rem;
		padding-block-end: 1rem;
	}
}

@media (min-width: 992px) {
	.kr-contact {
		padding-block-start: 8rem;
		padding-block-end: 8rem;
	}
}

@media (min-width: 1200px) {
	.kr-contact {
		padding-block-start: 13rem;
		padding-block-end: 9rem;
	}
}

@media (min-width: 1600px) {
	.kr-contact {
		padding-block-start: 20rem;
		padding-block-end: 8rem;
	}
}

@media (min-width: 2300px) {
	.kr-contact {
		padding-block-start: 30rem;
		padding-block-end: 10rem;
	}
}

.kr-contact-phone {
	display: block;
	margin-block: var(--k-space-md);
	font-family: var(--k-font-heading);
	font-size: var(--k-text-3xl);
	text-decoration: none;
}

.kr-contact-container {
	margin: 3rem 0 0 0;
}

.kr-contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--k-space-sm);
	justify-content: center;
	margin: var(--k-space-lg) 0 var(--k-space-sm) 0;
}

.kr-contact-cta-heading {
	margin-top: 6rem;
}

.kr-contact .kr-eyebrow {
	color: var(--k-white);
}

.kr-contact .kr-btn--green {
	color: var(--k-teal);
	background-color: var(--k-white);
}

.kr-contact .kr-btn--outline-white {
	color: var(--k-white);
	background: transparent;
	border: 2px solid var(--k-white);
}

.kr-contact .kr-btn--outline-white:hover {
	color: var(--k-teal);
	background: var(--k-white);
}

/*
  Insurance carrier block -- absorbed from the standalone insurance-accepted
  partial so the CTA + carrier list read as one panel. Logos rest in grayscale
  as white silhouettes. Hover and keyboard focus bring the active logo back to
  full color.
*/

.kr-contact-insurance-label {
	margin-top: var(--k-space-lg);
	font-family: var(--k-font-accent);
	font-size: var(--k-text-sm);
	color: var(--k-white);
	text-transform: uppercase;
	letter-spacing: var(--k-track-ui);
}

.kr-contact-insurance-grid {
	display: flex;
	flex-wrap: wrap;
	row-gap: 1.5rem;
	column-gap: 2.5rem;
	align-items: center;
	justify-content: center;
	max-width: 80vw;
	margin-top: var(--k-space-md);
	margin-bottom: var(--k-space-lg);
}

.kr-contact-insurance-logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.kr-contact-insurance-logo {
	width: auto;
	height: 32px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	transition:
		filter var(--k-dur) var(--k-ease),
		opacity var(--k-dur) var(--k-ease);
}

.kr-contact-insurance-logo-wrap:hover .kr-contact-insurance-logo,
.kr-contact-insurance-logo-wrap:focus-visible .kr-contact-insurance-logo {
	opacity: 1;
	filter: grayscale(0);
}

@media (max-width: 768px) {
	.kr-contact-insurance-grid {
		row-gap: 1rem;
		column-gap: 1.5rem;
	}
}