.representatives-map {
	--default-state-color: #2879b8;
	--circle-state-color: #62c8f3;
	--hover-state-color: #0d56a0;
	--active-state-color: #0d3996;
	--disabled-state-color: #8d8d8d;
	--state-text-color: #ffffff;
}

.representatives-page .content > section > h1 {
	margin-bottom: .6rem;
	color: #0b367d;
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
}

.representatives-map > h2 {
	max-width: 44rem;
	margin: 0 auto .65rem;
	color: #2c3541;
	font-size: clamp(1.35rem, 2.5vw, 1.8rem);
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
}

.representatives-map > p {
	max-width: 40rem;
	margin: 0 auto;
	color: #5e6b7b;
	font-size: clamp(1rem, 1.8vw, 1.15rem);
	line-height: 1.5;
	text-align: center;
}.representatives-map .grid {
	display: flex;
	align-items: flex-start;
	gap: clamp(2rem, 5vw, 4.5rem);
	margin-top: 2rem;
}

.representatives-map .col-6 {
	width: auto;
}

.representatives-map .col-6:first-child {
	flex: 0 1 52%;
}

.representatives-map .col-6:last-child {
	flex: 1 1 48%;
}

.svg-map {
	display: block;
	width: min(100%, 520px);
	height: auto;
	margin-left: 50px;
}

.svg-map path,
.svg-map polyline {
	fill: var(--default-state-color);
	stroke: #ffffff;
	stroke-width: 1.0404;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: fill .2s ease;
}

.svg-map text {
	fill: var(--state-text-color);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	pointer-events: none;
}

.svg-map a:not([data-disabled-state]) {
	cursor: pointer;
}

.svg-map a:not([data-disabled-state]):hover path,
.svg-map a:not([data-disabled-state]):hover polyline {
	fill: var(--hover-state-color) !important;
}

.svg-map .circle {
	fill: var(--circle-state-color);
	transition: fill .2s ease;
}

.svg-map a:not([data-disabled-state]):hover .circle {
	fill: var(--hover-state-color) !important;
}

.svg-map a[data-selected-state] path,
.svg-map a[data-selected-state] polyline,
.svg-map a[data-selected-state] .circle {
	fill: var(--active-state-color);
}

.svg-map a:focus-visible path,
.svg-map a:focus-visible polyline {
	stroke: #062967;
	stroke-width: 2px;
}

.svg-map a[data-disabled-state] {
	pointer-events: none;
	cursor: default;
}

.svg-map a[data-disabled-state] path,
.svg-map a[data-disabled-state] polyline,
.svg-map a[data-disabled-state] .circle {
	fill: var(--disabled-state-color);
}

.content-map {
	min-height: 25rem;
	padding-top: clamp(.5rem, 3vw, 2.5rem);
	color: #2c3541;
}

.content-map > h2,
.content-map [data-map-content] > h2 {
	margin: 0 0 1.75rem;
	color: #0b367d;
	font-size: clamp(1.75rem, 3vw, 2.35rem);
	font-weight: 600;
	line-height: 1.15;
}

.content-map [data-map-content] p {
	margin: 0 0 .85rem;
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	line-height: 1.5;
}

.content-map [data-map-content] .fa {
	width: 1.3em;
	color: #0b367d;
	text-align: center;
}

.content-map [data-map-content] p.representatives-contact-cta {
	margin-top: clamp(7rem, 4vw, 7.5rem);
}

.representatives-contact-cta a {
	color: #0b367d;
	text-decoration: underline;
	text-underline-offset: .15em;
}

.representatives-contact-cta a:hover,
.representatives-contact-cta a:focus {
	color: #2879b8;
}

.mobile-map {
	display: none;
}

@media only screen and (max-width: 768px) {
	.representatives-map .grid {
		display: block;
		margin-top: 1.25rem;
	}

	.svg-map {
		display: none;
	}

	.mobile-map {
		display: block;
		width: 100%;
		padding: .75rem 1rem;
		box-sizing: border-box;
		background-color: #ffffff;
		border: 1px solid #c8d2de;
		border-radius: .25rem;
		color: #2c3541;
	}

	.content-map {
		min-height: 0;
		padding-top: 1.5rem;
	}
}