/* "Cities we serve" block: capital + top cities, with a See-all expander that
   pulls the state's full alphabetical city list on demand. Shared by state
   pages (.cols) and city pages (.cd-cols) — the link columns inherit whichever
   column class the host design already uses. */

.vp-cw { width: 100%; }

.vp-cw-cap {
	font-style: normal;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-left: 7px;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid currentColor;
	opacity: .65;
	vertical-align: middle;
}

.vp-cw-btn {
	margin-top: 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 8px 0;
	font: inherit;
	font-weight: 800;
	color: #ff3d8a;
	cursor: pointer;
	line-height: 1.2;
}
.vp-cw-btn:hover { text-decoration: underline; }
.vp-cw-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

.vp-cw-arrow { display: inline-block; transition: transform .18s ease; }
.vp-cw-btn[aria-expanded="true"] .vp-cw-arrow { transform: rotate(90deg); }

/* The full list can run to 1,500+ cities. Show all of them, but inside a
   scroll pane so a state page doesn't grow to 16,000px and bury the footer. */
.vp-cw-all {
	margin-top: 16px;
	max-height: 460px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 14px 4px 0;
	border-top: 1px solid rgba(127, 127, 127, .22);
	border-bottom: 1px solid rgba(127, 127, 127, .22);
}
.vp-cw-all[hidden] { display: none; }

.vp-cw-note {
	opacity: .7;
	font-size: 14px;
	padding: 6px 0;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.vp-cw-arrow { transition: none; }
}

/* ---- Local Search Market report ------------------------------------------
   The section that carries information that exists nowhere else: real Census
   market data + real Google Ads demand/CPC, geo-targeted to this city. */
.market { background: #0f1830; color: #e8ecf7; }
/* The scanner now sits at the TOP of this band, above the market data, so the band no
 * longer needs 66px of air at both ends — it was reading as two separate sections with a
 * dead gap between them. */
.market .wrap { padding: 26px 26px 48px; }
.market .sec-head .eyebrow { color: #ff5fa2; }
.market .sec-head h2 { color: #fff; }
.market .sec-head p { color: #a9b3ce; }

.mkt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin: 30px 0 38px;
}
.mkt-stat {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 14px;
	padding: 18px 16px;
}
.mkt-stat b { display: block; font-size: 26px; color: #fff; line-height: 1.15; }
.mkt-stat span { display: block; margin-top: 5px; font-size: 12.5px; color: #9aa5c2; }

.market h3 { color: #fff; font-size: 20px; margin: 0 0 14px; }
.mkt-tblwrap { overflow-x: auto; }
/* One consistent outline. The theme's own table borders were leaving the column
   rules running past a lighter bottom edge, so every border here is declared. */
/* Enfold styles tables with #444 at ID specificity, which beat these outright —
   hence the explicit overrides. */
#top .market .mkt-tbl,
.mkt-tbl {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	border: 1px solid rgba(255,255,255,.16) !important;
}
#top .market .mkt-tbl th, #top .market .mkt-tbl td,
.mkt-tbl th, .mkt-tbl td {
	border: 0 !important;
	border-right: 1px solid rgba(255,255,255,.16) !important;
	background: transparent !important;
}
#top .market .mkt-tbl th:last-child, #top .market .mkt-tbl td:last-child,
.mkt-tbl th:last-child, .mkt-tbl td:last-child { border-right: 0 !important; }
#top .market .mkt-tbl th, .mkt-tbl th {
	text-align: left; padding: 11px 14px;
	color: #9aa5c2; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
	border-bottom: 1px solid rgba(255,255,255,.16) !important;
}
#top .market .mkt-tbl td, .mkt-tbl td {
	padding: 12px 14px; color: #dfe5f3;
	border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
#top .market .mkt-tbl tr:last-child td,
.mkt-tbl tr:last-child td { border-bottom: 0 !important; }

/* Scanner sits inside the market band now — one section, not two stacked ones.
   The nested <section> was picking up the generic 86px section padding on top of
   the wrap's own 66px, which is what opened the canyon between the table and the
   scan box. The market section owns the padding; its children carry none. */
#top .market, .market { padding: 46px 0 34px !important; }
#top .market .wrap, .market .wrap { padding: 0 26px !important; }
#top .market .vp-check, .market .vp-check {
	background: transparent !important;
	padding: 0 !important;
}
#top .market .vpc-wrap, .market .vpc-wrap { padding: 30px 0 0 !important; max-width: none; }
#top .market .vp-check h2, .market .vp-check h2 { font-size: clamp(21px, 2.6vw, 28px); }
.mkt-na { color: #7b86a3; font-size: 13px; }

.mkt-take {
	margin: 26px 0 0;
	padding: 18px 20px;
	background: rgba(255,61,138,.12);
	border: 1px solid rgba(255,61,138,.34);
	border-radius: 14px;
	color: #f3d9e6;
	font-size: 16px;
	line-height: 1.6;
}
.mkt-take b { color: #fff; }
.mkt-src { margin-top: 16px; font-size: 12.5px; color: #7b86a3; }

/* Borrowed-market notice. A town too small for Google to report demand shows the
   nearest real market's numbers — and says so, plainly. Styled as a caveat, not a
   headline, because it must never read as though these are the town's own figures. */
.mkt-borrowed {
	margin: 0 0 16px;
	padding: 13px 16px;
	border-left: 3px solid #ff5fa2;
	background: rgba(255,255,255,.05);
	border-radius: 0 10px 10px 0;
	color: #c9d1e6;
	font-size: 14.5px;
	line-height: 1.6;
}
.mkt-borrowed b { color: #fff; }
.mkt-borrowed a { color: #ff5fa2; }

/* Trade links inside the market band. */
.market .ind-others { border-top: 1px solid rgba(255,255,255,.09); padding: 30px 0 0; margin-top: 30px; }
.market .ind-others .ind-wrap { padding: 0 26px; max-width: 1180px; margin: 0 auto; }
.market .ind-others h3 { color: #fff; font-size: 19px; margin: 0 0 6px; }
.market .ind-others .ind-sub { color: #9aa5c2; font-size: 14.5px; margin: 0; }
.market .ind-others .ind-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.market .ind-others .ind-links a {
	display: inline-block; padding: 9px 16px; border-radius: 999px;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
	color: #dfe5f3; text-decoration: none; font-size: 14px;
}
.market .ind-others .ind-links a:hover { background: #ff3d8a; border-color: #ff3d8a; color: #fff; }

/* ---------- INDUSTRY PICKER (city / state / trade pages)
 * A dropdown instead of 32 bubbles. The full link list is still in the DOM inside the
 * <details> — a <select> is not a link, and this block sits on 347 city pages, so losing
 * the list would have quietly deleted ~11,000 internal links into the trade pages.
 */
/* The section's heading and sub are left-aligned, so the controls are too — centring only
 * the form left it floating out of line with everything above it. */
.ind-others .ind-pick {
	display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap;
	margin: 20px 0 14px; max-width: 620px;
}
#top .ind-others .ind-pick-sel, .ind-others .ind-pick-sel {
	flex: 1 1 300px; max-width: 380px; height: 54px;
	padding: 0 18px !important; margin: 0 !important;
	border-radius: 999px !important; border: 1px solid rgba(255,255,255,.16) !important;
	background: rgba(255,255,255,.06) !important; color: #fff !important;
	font-size: 16px !important; font-weight: 600; cursor: pointer;
	appearance: none; -webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #ff5fa2 50%), linear-gradient(135deg, #ff5fa2 50%, transparent 50%) !important;
	background-position: calc(100% - 22px) 24px, calc(100% - 16px) 24px !important;
	background-size: 6px 6px, 6px 6px !important;
	background-repeat: no-repeat !important;
}
#top .ind-others .ind-pick-sel:focus { border-color: #ff3d8a !important; outline: none; }
.ind-others .ind-pick-sel option { background: #0f1830; color: #fff; }
#top .ind-others .ind-pick-go, .ind-others .ind-pick-go {
	height: 54px; padding: 0 28px !important; margin: 0 !important; border: 0 !important;
	border-radius: 999px !important; background: #ff3d8a !important; color: #fff !important;
	font-weight: 800; font-size: 15.5px; cursor: pointer;
	box-shadow: 0 14px 34px -14px rgba(255,61,138,.75);
}
#top .ind-others .ind-pick-go:hover { background: #ff5fa2 !important; }

.ind-others .ind-missing { color: #a9b3ce; font-size: 14.5px; margin: 0 0 14px; }
.ind-others .ind-missing a { color: #ff5fa2; font-weight: 700; text-decoration: underline; }

.ind-others .ind-all { max-width: 900px; margin: 0; }
.ind-others .ind-all summary {
	cursor: pointer; color: #a9b3ce; font-size: 13.5px; list-style: none;
	font-family: "SFMono-Regular", Menlo, Consolas, monospace;
	letter-spacing: .06em; text-transform: uppercase;
}
.ind-others .ind-all summary::-webkit-details-marker { display: none; }
.ind-others .ind-all summary:hover { color: #ff5fa2; }
.ind-others .ind-all[open] summary { margin-bottom: 14px; }

/* The request form. Captures a REQUEST — it never creates a page. */
.ind-others .ind-request { max-width: 620px; margin: 16px 0 0; }
.ind-others .ind-request-h { color: #e8ecf7; font-size: 15px; margin: 0 0 10px; }
.ind-others .ind-request-form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
#top .ind-others .ind-request-trade, #top .ind-others .ind-request-email {
	flex: 1 1 200px; height: 48px; padding: 0 16px !important; margin: 0 !important;
	border-radius: 999px !important; border: 1px solid rgba(255,255,255,.16) !important;
	background: rgba(255,255,255,.06) !important; color: #fff !important; font-size: 15px !important;
}
#top .ind-others .ind-request-go {
	height: 48px; padding: 0 22px !important; margin: 0 !important; border: 0 !important;
	border-radius: 999px !important; background: rgba(255,255,255,.14) !important;
	color: #fff !important; font-weight: 700; cursor: pointer;
}
#top .ind-others .ind-request-go:hover { background: #ff3d8a !important; }
.ind-others .ind-request-out { color: #12b981; font-size: 15px; margin-top: 12px; font-weight: 600; }