/*
[tob_reach_map] + [tob_reach_panel] - Figma Our reach 1221:2088 (user,
2026-10-12). Map 576x529 in the left column, section text + state panel in
the right column, 96px apart. SVG layers and pills are positioned with
Figma's percentages (inline styles from the shortcode); pills = Teal/800,
UI/Tag (Montserrat Bold 10/20), 4/10 padding, 16px chevron 6px after the label.
A pill opens the panel ("Hover" 1302:2574) under the text on desktop and
over the map on mobile (js/custom.js).
*/
.row_col_wrap_12 > .tob-reach-map-col > .vc_column-inner {
	padding-right: 48px;
}
.row_col_wrap_12 > .tob-reach-text > .vc_column-inner {
	padding-left: 48px;
}
.tob-reach-text .tob-text__body {
	margin-top: 24px; /* Figma H3 -> copy */
}

.tob-reach-map {
	position: relative;
	width: 100%;
	max-width: 576px;
	aspect-ratio: 709.888 / 651.655;
	margin: 0;
}
.tob-reach-map__art {
	position: absolute;
	inset: 0;
}
.row .col img.tob-reach-map__layer {
	position: absolute;
	display: block;
	max-width: none;
	margin: 0;
}
.tob-reach-map .tob-reach-map__pill {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 10px;
	border: 0;
	border-radius: 9999px;
	background-color: #006767;
	color: #FAF6EE;
	font-family: "Montserrat", sans-serif;
	font-size: 10px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.05px;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.2s ease;
}
.tob-reach-map .tob-reach-map__pill:hover,
.tob-reach-map .tob-reach-map__pill[aria-expanded="true"] {
	background-color: #007E7F; /* Teal/700 */
}
.tob-reach-map .tob-reach-map__pill:focus-visible {
	outline: 2px solid #4CBDBD;
	outline-offset: 2px;
}
.row .col .tob-reach-map__pill img {
	width: 16px;
	height: 16px;
	margin: 0;
}

/* State panel: Teal/800, 32px corners, 20px padding, Figma drop shadow 2/2/2 25%. */
.tob-reach-panel {
	box-sizing: border-box;
	width: 100%;
	max-width: 470px;
	padding: 20px;
	border-radius: 32px;
	background-color: #006767;
	color: #FAF6EE;
	filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.25));
}
.tob-reach-panel[hidden] {
	display: none;
}
.tob-reach-panel--column {
	margin-top: 52px; /* Figma: button -> panel */
}
.tob-reach-panel--overlay {
	display: none; /* desktop: the column panel is used */
}
.tob-reach-panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}
body .tob-reach-panel .tob-reach-panel__title {
	margin: 0;
	padding: 0;
	color: #FAF6EE;
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: 0.011px;
}
.tob-reach-panel .tob-reach-panel__close {
	display: block;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	box-shadow: none;
}
.row .col .tob-reach-panel__close img {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0;
}
/* Figma lays the stats in three equal columns (the third is an invisible spacer). */
.tob-reach-panel__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 16px;
}
body .tob-reach-panel .tob-reach-panel__stat {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	color: #FAF6EE;
	font-weight: 700;
}
.tob-reach-panel__num {
	font-size: 64px;
	line-height: 72px;
}
.tob-reach-panel__label {
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 0.011px;
}

/* Salient stacks the columns at 999px: text first, then the map. The panel opens over the map. */
@media only screen and (max-width: 999px) {
	.row_col_wrap_12 > .tob-reach-map-col > .vc_column-inner,
	.row_col_wrap_12 > .tob-reach-text > .vc_column-inner {
		padding-left: 0;
		padding-right: 0;
	}
	.row_col_wrap_12 > .tob-reach-text {
		margin-bottom: 44px;
	}
	.tob-reach-map {
		margin: 0 auto;
	}
	.tob-reach-panel--column {
		display: none;
	}
	.tob-reach-panel--overlay:not([hidden]) {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 2;
		width: calc(100% - 16px);
		transform: translate(-50%, -50%);
	}
}
@media only screen and (max-width: 690px) {
	.tob-reach-map .tob-reach-map__pill {
		padding: 2px 8px;
		font-size: 9px;
		line-height: 16px;
		gap: 4px;
	}
	.row .col .tob-reach-map__pill img {
		width: 12px;
		height: 12px;
	}
	.tob-reach-panel {
		padding: 16px;
		border-radius: 24px;
	}
	.tob-reach-panel__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin-top: 8px;
	}
	body .tob-reach-panel .tob-reach-panel__stat {
		gap: 4px;
	}
	.tob-reach-panel__num {
		font-size: 44px;
		line-height: 52px;
	}
	.tob-reach-panel__label {
		font-size: 18px;
		line-height: 24px;
	}
}