/* Locations hub V1. Generated by scripts/build-locations-port.py from
   mockups/locations-hub.html; scoped under .locations-v1. Do not edit. */

/* Sparkhound Locations Hub (wayfinding page over the three city pages).
   Shared template for Baton Rouge / Birmingham / Houston; content varies per
   city, structure and CSS stay identical. Every token derives from
   DESIGN-SYSTEM-HOMEPAGE-V1.md. Copy-first scaffold: all imagery (city photo,
   styled street map, headshots) is a placeholder panel by design; final
   assets drop in later without layout changes. */
@font-face {
	font-family: "Open Sans Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 300 800;
	src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sans:vf@latest/latin-wght-normal.woff2) format("woff2-variations");
}
.locations-v1 {
	--fontPrimary: "Open Sans Variable", sans-serif;
	--brandGreen: #81be41;
	--brandTeal: #156b5e;
	--brandDarkGreen: #003830;
	--brandBlack: #171f27;
	--brandOffWhite: #f6f6f6;
	--darkGradient: linear-gradient(255.38deg, #2c665d 10.34%, #003830 100%);
	--bodyInk: rgba(23, 31, 39, 0.72);
	--site-max-width: 1184px;
}
.locations-v1 * { box-sizing: border-box; margin: 0; padding: 0; }
.locations-v1 {
	font-family: var(--fontPrimary);
	font-size: 16px;
	line-height: 1.8;
	color: var(--bodyInk);
	background: #fff;
}
.locations-v1 img { max-width: 100%; display: block; }
.locations-v1 a { color: var(--brandTeal); text-decoration: none; }
.locations-v1 a:focus-visible, .locations-v1 button:focus-visible {
	outline: 3px solid var(--brandGreen);
	outline-offset: 3px;
	border-radius: 4px;
}
.locations-v1 .container {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Type ---------- */
.locations-v1 h1, .locations-v1 h2, .locations-v1 h3 { line-height: 1.25; color: var(--brandDarkGreen); }
.locations-v1 h1 { font-size: clamp(42px, 6vw, 72px); font-weight: 700; line-height: 1.1; }
.locations-v1 h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; }
.locations-v1 h3 { font-size: 18px; font-weight: 700; color: var(--brandBlack); }
.locations-v1 .h-accent { color: var(--brandTeal); }
.locations-v1 .band-dark h1, .locations-v1 .band-dark h2 { color: #fff; }
.locations-v1 .band-dark .h-accent { color: var(--brandGreen); }
.locations-v1 .section-intro { max-width: 640px; margin: 16px auto 0; }
.locations-v1 .center { text-align: center; }
.locations-v1 .center .section-intro { margin-left: auto; margin-right: auto; }

/* ---------- Buttons (theme .btn language: dark sweep, no lift) ---------- */
.locations-v1 .btn {
	display: inline-block;
	padding: 18px 44px;
	border-radius: 50px;
	border: 1px solid var(--brandGreen);
	background-color: var(--brandGreen);
	color: var(--brandDarkGreen);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: border-color 0.4s ease-in-out, color 0.4s ease-in-out;
}
.locations-v1 .btn span { position: relative; z-index: 1; }
.locations-v1 .btn::before {
	content: "";
	position: absolute;
	inset: 0 100% 0 0;
	background-color: #2c665d;
	border-radius: 0 50px 50px 0;
	transition: all 0.4s ease-in-out;
}
.locations-v1 .btn:hover, .locations-v1 .btn:focus-visible, .locations-v1 .btn:active { border-color: #2c665d; color: #fff; }
.locations-v1 .btn:hover::before, .locations-v1 .btn:focus-visible::before, .locations-v1 .btn:active::before { inset: 0; border-radius: 50px; }
.locations-v1 .link-arrow {
	font-weight: 700;
	color: var(--brandTeal);
	transition: color 0.35s ease;
}
.locations-v1 .link-arrow::after { content: " \2192"; }
@media (hover: hover) {
	.locations-v1 .link-arrow:hover { color: var(--brandDarkGreen); }
}

/* ---------- TBD blocks (design-ahead-of-copy markers) ---------- */
.locations-v1 .tbd-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brandTeal);
	background: rgba(21, 107, 94, 0.06);
	border: 1px dashed rgba(21, 107, 94, 0.5);
	border-radius: 999px;
	padding: 4px 12px;
	line-height: 1.4;
}
.locations-v1 .band-dark .tbd-chip {
	color: var(--brandOffWhite);
	background: rgba(246, 246, 246, 0.06);
	border-color: rgba(246, 246, 246, 0.45);
}
/* Placeholder media panel: the drop-in slot for final imagery (city photo,
   styled street map, headshots). Dashed full border per Jane's border rules. */
.locations-v1 .media-slot {
	border: 1px dashed rgba(0, 56, 48, 0.35);
	border-radius: 16px;
	background:
		radial-gradient(560px 380px at 12% 8%, rgba(106, 197, 214, 0.1), transparent 65%),
		radial-gradient(480px 340px at 90% 94%, rgba(129, 190, 65, 0.08), transparent 62%),
		rgba(0, 56, 48, 0.04);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
	padding: 32px;
}
.locations-v1 .band-dark .media-slot {
	border-color: rgba(246, 246, 246, 0.3);
	background:
		radial-gradient(560px 380px at 12% 8%, rgba(106, 197, 214, 0.07), transparent 65%),
		radial-gradient(480px 340px at 90% 94%, rgba(129, 190, 65, 0.06), transparent 62%),
		rgba(246, 246, 246, 0.04);
}
.locations-v1 .media-slot p { font-size: 13.5px; line-height: 1.6; max-width: 300px; }
.locations-v1 .band-dark .media-slot p { color: rgba(246, 246, 246, 0.7); }

/* ---------- Reveal-on-scroll (dependency-free, sanctioned for interior pages).
   Hidden state exists ONLY under html.has-motion, set by JS at runtime, so
   JS-off and reduced-motion audiences always get the full static page. ---------- */
html.has-motion .locations-v1 [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
html.has-motion .locations-v1 [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Header stub (global chrome, unchanged in build) ---------- */
.locations-v1 .site-header { background: #fff; border-bottom: 1px solid rgba(0, 56, 48, 0.1); }
.locations-v1 .site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 82px;
}
.locations-v1 .site-header svg { display: block; height: 34px; width: auto; }
.locations-v1 .stub-nav { display: flex; gap: 28px; font-size: 15px; font-weight: 600; }
.locations-v1 .stub-nav span { color: var(--brandBlack); opacity: 0.75; }
.locations-v1 .chrome-note {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bodyInk);
	opacity: 0.6;
}
@media (max-width: 767px) {
	.locations-v1 .stub-nav { display: none; }
}

/* ---------- Hero (brand black, split: locked copy left, media slot right) ---------- */
.locations-v1 .hero {
	/* HQ-city (Baton Rouge) dark-green map ground, same veil as city heroes */
	background-color: var(--brandDarkGreen);
	background-image:
		linear-gradient(100deg, rgba(0, 48, 41, 0.94) 0%, rgba(0, 48, 41, 0.74) 46%, rgba(0, 48, 41, 0.3) 100%),
		url("../images/maps/baton-rouge-map-darkgreen.webp");
	background-size: cover, cover;
	background-position: center, center 30%;
	color: rgba(246, 246, 246, 0.85);
	padding: 108px 0 116px;
	position: relative;
	overflow: hidden;
}
.locations-v1 .hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 64px;
	align-items: stretch;
}
.locations-v1 .hero p.lede {
	margin-top: 26px;
	font-size: clamp(17px, 1.7vw, 20px);
	line-height: 1.7;
	max-width: 620px;
}
.locations-v1 .hero-ctas {
	margin-top: 38px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}
.locations-v1 .hero-secondary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: rgba(246, 246, 246, 0.85);
	font-weight: 600;
	font-size: 15px;
	transition: color 0.35s ease;
}
.locations-v1 a.hero-secondary:hover { color: var(--brandGreen); }
.locations-v1 .hero-meta {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: rgba(246, 246, 246, 0.62);
}
.locations-v1 .hero-meta .sep { color: var(--brandGreen); font-size: 14px; line-height: 1; }
.locations-v1 .hq-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brandGreen);
	border: 1px solid rgba(129, 190, 65, 0.5);
	border-radius: 999px;
	padding: 4px 12px;
	line-height: 1.4;
}
.locations-v1 .hero-media { min-height: 340px; }

/* ---------- Team (off-white band, profile cards) ---------- */
.locations-v1 .team { background: var(--brandOffWhite); padding: 116px 0 124px; }
.locations-v1 .team-grid {
	margin-top: 52px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}
.locations-v1 .team-grid--solo {
	grid-template-columns: minmax(0, 480px);
	justify-content: center;
}
.locations-v1 .person-card {
	background: #fff;
	border: 1px solid rgba(0, 56, 48, 0.08);
	border-radius: 16px;
	padding: 30px 28px 30px;
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
@media (hover: hover) {
	.locations-v1 .person-card:hover {
		transform: translateY(-2px);
		border-color: rgba(129, 190, 65, 0.55);
		box-shadow: 0 14px 30px rgba(0, 56, 48, 0.08);
	}
}
.locations-v1 .person-photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 1px dashed rgba(0, 56, 48, 0.3);
	background: rgba(0, 56, 48, 0.06);
	color: var(--brandDarkGreen);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-bottom: 22px;
}
.locations-v1 .person-card h3 { font-size: 19px; }
.locations-v1 .person-role {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brandTeal);
}
.locations-v1 .person-card p.bio { margin-top: 14px; font-size: 15px; line-height: 1.7; }
.locations-v1 .person-card .tbd-chip { margin-top: 14px; }

/* ---------- Services (dark gradient band: Solutions + How We Work) ---------- */
.locations-v1 .services {
	background-image:
		radial-gradient(1200px 860px at 82% 12%, rgba(106, 197, 214, 0.12), transparent 68%),
		radial-gradient(900px 700px at 8% 92%, rgba(129, 190, 65, 0.08), transparent 62%),
		var(--darkGradient);
	padding: 116px 0 120px;
	color: rgba(246, 246, 246, 0.82);
}
.locations-v1 .services .section-intro { color: rgba(246, 246, 246, 0.82); }
.locations-v1 .svc-grid {
	max-width: 1080px;
	margin: 52px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}
.locations-v1 .svc-card {
	flex: 0 0 calc(33.333% - 16px);
	background: rgba(0, 26, 22, 0.25);
	border-radius: 16px;
	padding: 28px 26px 24px;
	text-align: center;
	transition: background-color 0.35s ease, transform 0.35s ease;
}
.locations-v1 .svc-card h3 { color: #fff; font-size: 18px; transition: color 0.35s ease; }
.locations-v1 .svc-icon {
	color: var(--brandOffWhite);
	margin: 0 auto 14px;
	width: 40px;
	height: 40px;
	transition: color 0.35s ease, transform 0.35s ease;
	will-change: transform;
}
.locations-v1 .svc-icon svg { width: 40px; height: 40px; display: block; }
@media (hover: hover) {
	.locations-v1 .svc-card:hover { background-color: rgba(0, 26, 22, 0.4); transform: translateY(-2px); }
	.locations-v1 .svc-card:hover .svc-icon { color: var(--brandGreen); transform: scale(1.08); }
	.locations-v1 .svc-card:hover h3 { color: var(--brandGreen); }
}
.locations-v1 .delivery {
	max-width: 1080px;
	margin: 56px auto 0;
	border-top: 1px solid rgba(246, 246, 246, 0.16);
	padding-top: 44px;
	text-align: center;
}
.locations-v1 .delivery-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(246, 246, 246, 0.6);
}
.locations-v1 .delivery-row {
	margin-top: 26px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px 40px;
}
.locations-v1 .delivery-item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	font-weight: 700;
	font-size: 16px;
}
.locations-v1 .delivery-item svg { width: 30px; height: 30px; display: block; color: var(--brandOffWhite); }

/* ---------- Local proof (light quote band, placeholder-aware) ---------- */
.locations-v1 .proof { padding: 112px 0 120px; }
.locations-v1 .proof .container { max-width: 900px; text-align: center; }
.locations-v1 .quote-mark {
	font-size: 72px;
	line-height: 1;
	font-weight: 800;
	color: var(--brandTeal);
	display: block;
	height: 44px;
}
.locations-v1 .proof blockquote p {
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.55;
	font-weight: 600;
	color: var(--brandDarkGreen);
}
.locations-v1 .proof .tbd-chip { margin-bottom: 22px; }
.locations-v1 .proof-note { margin-top: 24px; font-size: 14px; }

/* ---------- Visit band (brand black bookend, horizon glow + map slot) ---------- */
.locations-v1 .visit {
	background-color: var(--brandBlack);
	background-image: linear-gradient(to top, rgba(21, 107, 94, 0.3) 0%, rgba(129, 190, 65, 0.07) 22%, transparent 46%);
	color: rgba(246, 246, 246, 0.85);
	padding: 124px 0 136px;
	position: relative;
	overflow: hidden;
}
.locations-v1 .visit-grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	gap: 64px;
	align-items: stretch;
}
.locations-v1 .visit-address {
	margin-top: 30px;
	font-size: clamp(17px, 1.7vw, 19px);
	line-height: 1.7;
	color: #fff;
	font-style: normal;
}
.locations-v1 .visit-address a { color: #fff; font-weight: 700; transition: color 0.35s ease; }
.locations-v1 .visit-address a:hover { color: var(--brandGreen); }
.locations-v1 .visit-flag { margin-top: 18px; }
.locations-v1 .visit-flag p { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: rgba(246, 246, 246, 0.6); max-width: 440px; }
.locations-v1 .visit-ctas {
	margin-top: 38px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}
.locations-v1 .visit-media { min-height: 320px; }


/* ---------- Hub: city cards ---------- */
.locations-v1 .hub-cards { background: var(--brandOffWhite); padding: 116px 0 124px; }
.locations-v1 .hub-grid {
	margin-top: 52px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}
.locations-v1 .city-card {
	display: block;
	background: #fff;
	border: 1px solid rgba(0, 56, 48, 0.08);
	border-radius: 16px;
	overflow: hidden;
	color: var(--bodyInk);
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
@media (hover: hover) {
	.locations-v1 .city-card:hover {
		transform: translateY(-2px);
		border-color: rgba(129, 190, 65, 0.55);
		box-shadow: 0 14px 30px rgba(0, 56, 48, 0.08);
	}
	.locations-v1 .city-card:hover .link-arrow { color: var(--brandDarkGreen); }
}
.locations-v1 .city-card-media {
	/* each city's Sparkhound-green map as the card art, distinct crop per city;
	   a dark-green overlay quiets the green, lifting on hover as the map zooms */
	height: 170px;
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid rgba(0, 56, 48, 0.08);
}
.locations-v1 .city-map {
	position: absolute;
	inset: 0;
	background-size: cover;
	transition: transform 0.35s ease;
}
.locations-v1 .city-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 56, 48, 0.35);
	transition: opacity 0.35s ease;
	pointer-events: none;
}
.locations-v1 .city-map--br {
	background-image: url("../images/maps/baton-rouge-map-green.webp");
	background-position: 38% 44%;
}
.locations-v1 .city-map--bhm {
	background-image: url("../images/maps/birmingham-map-green.webp");
	background-position: 52% 60%;
}
.locations-v1 .city-map--hou {
	background-image: url("../images/maps/houston-map-green.webp");
	background-position: 46% 52%;
}
.locations-v1 .card-pin {
	/* the spark pin lands on the map when the card is hovered or focused */
	position: absolute;
	left: 50%;
	top: 50%;
	width: 56px;
	height: auto;
	transform: translate(-50%, -58%) translateY(-16px);
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
	filter: drop-shadow(0 8px 12px rgba(0, 20, 16, 0.35));
}
@media (hover: hover) {
	.locations-v1 .city-card:hover .city-map { transform: scale(1.08); }
	.locations-v1 .city-card:hover .city-card-media::after { opacity: 0.3; }
	.locations-v1 .city-card:hover .card-pin { opacity: 1; transform: translate(-50%, -58%); }
}
.locations-v1 .city-card:focus-visible .card-pin { opacity: 1; transform: translate(-50%, -58%); }
.locations-v1 .city-card:focus-visible .city-card-media::after { opacity: 0.3; }
.locations-v1 .city-card-body { padding: 26px 26px 28px; }
.locations-v1 .city-card h3 { font-size: 20px; }
.locations-v1 .city-tag {
	margin-top: 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brandTeal);
}
.locations-v1 .city-addr { margin-top: 12px; font-size: 15px; line-height: 1.7; font-style: normal; }
.locations-v1 .city-card .link-arrow { display: inline-block; margin-top: 16px; }

/* ---------- Hub: destination + potential bands ---------- */
.locations-v1 .dest {
	/* Houston black map under a translucent brand-ramp tint: the dark
	   gradient voice keeps its color while the street grid shows through */
	background-color: var(--brandBlack);
	background-image:
		radial-gradient(1200px 860px at 82% 12%, rgba(106, 197, 214, 0.12), transparent 68%),
		linear-gradient(255.38deg, rgba(44, 102, 93, 0.82) 10.34%, rgba(0, 56, 48, 0.88) 100%),
		url("../images/maps/houston-map-black.webp");
	background-size: cover, cover, cover;
	background-position: center, center, center 40%;
	padding: 104px 0 110px;
	color: rgba(246, 246, 246, 0.85);
	text-align: center;
}
.locations-v1 .dest p { margin-top: 16px; font-size: clamp(17px, 1.7vw, 20px); }
.locations-v1 .potential {
	/* Birmingham light map whisper behind the closing copy + CTA */
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
		url("../images/maps/birmingham-map-light.webp");
	background-size: cover, 150%;
	background-position: center, 20% 70%;
	padding: 116px 0 124px;
	text-align: center;
}
.locations-v1 .potential .section-intro { max-width: 720px; }
.locations-v1 .potential .btn { margin-top: 38px; }
@media (max-width: 991px) {
	.locations-v1 .hub-grid { grid-template-columns: 1fr; max-width: 480px; }
	.locations-v1 .hub-cards, .locations-v1 .dest, .locations-v1 .potential { padding: 84px 0 92px; }
}

/* ---------- Footer stub ---------- */
.locations-v1 .site-footer {
	background: var(--brandDarkGreen);
	color: rgba(246, 246, 246, 0.7);
	padding: 44px 0;
}
.locations-v1 .site-footer .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.locations-v1 .site-footer svg { height: 30px; width: auto; display: block; }
.locations-v1 .site-footer .chrome-note { color: rgba(246, 246, 246, 0.55); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html.has-motion .locations-v1 [data-reveal] { opacity: 1; transform: none; transition: none; }
	.locations-v1 .btn::before { transition: none; }
	.locations-v1 .person-card:hover, .locations-v1 .svc-card:hover, .locations-v1 .svc-card:hover .svc-icon { transform: none; }
	.locations-v1 .city-card:hover .city-map { transform: none; }
	.locations-v1 .card-pin { transition: opacity 0.35s ease; transform: translate(-50%, -58%); }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.locations-v1 .hero { padding: 76px 0 84px; }
	.locations-v1 .hero-grid { grid-template-columns: 1fr; gap: 44px; }
	.locations-v1 .hero-media { min-height: 260px; }
	.locations-v1 .team-grid { grid-template-columns: 1fr 1fr; }
	.locations-v1 .svc-card { flex-basis: calc(50% - 12px); }
	.locations-v1 .visit-grid { grid-template-columns: 1fr; gap: 44px; }
	.locations-v1 .team, .locations-v1 .services, .locations-v1 .proof, .locations-v1 .visit { padding: 84px 0 92px; }
}
@media (max-width: 640px) {
	.locations-v1 .team-grid { grid-template-columns: 1fr; }
	.locations-v1 .svc-card { flex-basis: 100%; }
	.locations-v1 .hero-ctas, .locations-v1 .visit-ctas { align-items: flex-start; flex-direction: column; }
}