/* Contact Us V1 (2026-09-01). Generated by scripts/build-contact-port.py
   from mockups/contact-us.html; scoped under .contact-v1. Do not edit by
   hand: edit the mockup and regenerate. */

/* Sparkhound Contact Us mockup (2026-09-01). Copy: Core Pages (14), Contact
   tab (unchanged since doc 12). Three bands: the form in the hero, the three
   offices as the hub's city cards, and a careers bookend carrying the doc's
   two careers links. CSS donors, ported literally: city-page hero ground
   (locations-baton-rouge.html), hub city cards (locations-hub.html), the
   form card (ppc-ai-consulting.html), the services dark band. Every token
   derives from DESIGN-SYSTEM-HOMEPAGE-V1.md.
   Build note: the live page embeds HubSpot form 408f4f2e (portal 2571506,
   10 fields + reCAPTCHA). The .form-card field styles below are the target
   for the embed's .hs-form markup; the mockup fields mirror the live form. */
@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");
}
.contact-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;
	--mapHero: url("../images/maps/baton-rouge-map-darkgreen.webp");
	--mapCta: url("../images/maps/baton-rouge-map-black.webp");
}
.contact-v1 * { box-sizing: border-box; margin: 0; padding: 0; }
.contact-v1 {
	font-family: var(--fontPrimary);
	font-size: 16px;
	line-height: 1.8;
	color: var(--bodyInk);
	background: #fff;
}
.contact-v1 img { max-width: 100%; display: block; }
.contact-v1 a { color: var(--brandTeal); text-decoration: none; }
.contact-v1 a:focus-visible, .contact-v1 button:focus-visible, .contact-v1 input:focus-visible, .contact-v1 select:focus-visible, .contact-v1 textarea:focus-visible {
	outline: 3px solid var(--brandGreen);
	outline-offset: 3px;
	border-radius: 4px;
}
.contact-v1 .container {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

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

/* ---------- Buttons (theme .btn language: dark sweep, no lift) ---------- */
.contact-v1 .btn {
	display: inline-block;
	padding: 18px 44px;
	border-radius: 50px;
	border: 1px solid var(--brandGreen);
	background-color: var(--brandGreen);
	color: var(--brandDarkGreen);
	font-family: var(--fontPrimary);
	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;
}
.contact-v1 .btn span { position: relative; z-index: 1; }
.contact-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;
}
.contact-v1 .btn:hover, .contact-v1 .btn:focus-visible, .contact-v1 .btn:active { border-color: #2c665d; color: #fff; }
.contact-v1 .btn:hover::before, .contact-v1 .btn:focus-visible::before, .contact-v1 .btn:active::before { inset: 0; border-radius: 50px; }
.contact-v1 .link-arrow {
	font-weight: 700;
	color: var(--brandTeal);
	transition: color 0.35s ease;
}
.contact-v1 .link-arrow::after { content: " \2192"; }
@media (hover: hover) {
	.contact-v1 .link-arrow:hover { color: var(--brandDarkGreen); }
}

/* ---------- Reveal-on-scroll (dependency-free, sanctioned for interior pages) ---------- */
html.has-motion .contact-v1 [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
html.has-motion .contact-v1 [data-reveal].is-in { opacity: 1; transform: none; }

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

/* ---------- 1. Hero: HQ map ground (city-page donor), copy left, form right ---------- */
.contact-v1 .hero {
	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%),
		var(--mapHero);
	background-size: cover, cover;
	background-position: center, center 22%;
	color: rgba(246, 246, 246, 0.85);
	padding: 96px 0 108px;
	position: relative;
	overflow: hidden;
}
.contact-v1 .hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	gap: 64px;
	/* the form is the tall column; the copy sits at its optical middle */
	align-items: center;
}
.contact-v1 .hero-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brandGreen);
	margin-bottom: 8px;
}
.contact-v1 .hero p.lede {
	margin-top: 26px;
	font-size: clamp(17px, 1.7vw, 20px);
	line-height: 1.7;
	max-width: 520px;
}
/* Direct lines: the doc's Call and Careers rows, stacked under the lede.
   Tracked caps label (no ornament), then the line itself in white. */
.contact-v1 .lines {
	margin-top: 44px;
	display: grid;
	gap: 26px;
	max-width: 520px;
}
.contact-v1 .line-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(246, 246, 246, 0.6);
}
.contact-v1 .line-value {
	margin-top: 6px;
	font-size: 17px;
	line-height: 1.6;
	color: #fff;
	font-weight: 600;
}
.contact-v1 .line-value a { color: #fff; transition: color 0.35s ease; }
.contact-v1 .line-value a:hover { color: var(--brandGreen); }
.contact-v1 .line-value--phone a {
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
}
.contact-v1 .line-value .sep { color: var(--brandGreen); margin: 0 12px; font-weight: 400; }

/* The form card (donor: AI LP hero card, ported literally): collapsed by
   default, the name row and the button invite the click; the rest unfolds on
   first focus and the hero grows with it. Two-column field grid inside. */
.contact-v1 .form-card {
	background: #fff;
	border-radius: 16px;
	padding: 30px 32px 84px;
	text-align: left;
	color: var(--bodyInk);
	box-shadow: 0 22px 54px rgba(0, 26, 22, 0.35);
	transition: padding-bottom 0.4s ease;
}
/* Collapsed card carries spare room at the BOTTOM; expanding trades that
   room for the fields, so the hero grows less and the unfold feels seamless. */
.contact-v1 .form-card.is-open { padding-bottom: 32px; }
.contact-v1 .form-card h2 {
	font-size: 22px;
	color: var(--brandDarkGreen);
	text-align: center;
}
.contact-v1 .form-extras {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.4s ease, opacity 0.35s ease;
}
.contact-v1 .form-extras > div { min-height: 0; overflow: hidden; }
.contact-v1 .form-card.is-open .form-extras { grid-template-rows: 1fr; opacity: 1; }
.contact-v1 html:not(.has-js) .form-card { padding-bottom: 32px; }
.contact-v1 html:not(.has-js) .form-extras { grid-template-rows: 1fr; opacity: 1; }
.contact-v1 .form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}
.contact-v1 .form-grid .span-2 { grid-column: 1 / -1; }
.contact-v1 .form-card label { display: block; font-weight: 600; font-size: 14px; color: var(--brandBlack); margin: 11px 0 5px; }
.contact-v1 .form-card label .req { color: var(--brandTeal); }
.contact-v1 .form-card input, .contact-v1 .form-card select, .contact-v1 .form-card textarea {
	width: 100%;
	padding: 10px 13px;
	font-size: 15px;
	font-family: var(--fontPrimary);
	border: 1px solid rgba(0, 56, 48, 0.16);
	border-radius: 12px;
	background: #fff;
	color: var(--brandBlack);
	transition: border-color 0.35s ease;
}
.contact-v1 .form-card input:hover, .contact-v1 .form-card select:hover, .contact-v1 .form-card textarea:hover { border-color: rgba(0, 56, 48, 0.34); }
.contact-v1 .form-card select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23003830' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
}
.contact-v1 .form-card textarea { min-height: 112px; resize: vertical; }
.contact-v1 .form-card .btn { width: 100%; margin-top: 22px; text-align: center; }
.contact-v1 .form-note { margin-top: 12px; font-size: 13px; opacity: 0.75; text-align: center; }

/* ---------- 2. Offices: off-white band, hub city cards (donor: locations-hub.html) ---------- */
.contact-v1 .offices { background: var(--brandOffWhite); padding: 116px 0 124px; }
.contact-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;
}
.contact-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) {
	.contact-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);
	}
	.contact-v1 .city-card:hover .link-arrow { color: var(--brandDarkGreen); }
}
.contact-v1 .city-card-media {
	height: 170px;
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid rgba(0, 56, 48, 0.08);
}
.contact-v1 .city-map {
	position: absolute;
	inset: 0;
	background-size: cover;
	transition: transform 0.35s ease;
}
.contact-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;
}
.contact-v1 .city-map--br {
	background-image: url("../images/maps/baton-rouge-map-green.webp");
	background-position: 38% 44%;
}
.contact-v1 .city-map--bhm {
	background-image: url("../images/maps/birmingham-map-green.webp");
	background-position: 52% 60%;
}
.contact-v1 .city-map--hou {
	background-image: url("../images/maps/houston-map-green.webp");
	background-position: 46% 52%;
}
.contact-v1 .card-pin {
	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) {
	.contact-v1 .city-card:hover .city-map { transform: scale(1.08); }
	.contact-v1 .city-card:hover .city-card-media::after { opacity: 0.3; }
	.contact-v1 .city-card:hover .card-pin { opacity: 1; transform: translate(-50%, -58%); }
}
.contact-v1 .city-card:focus-visible .card-pin { opacity: 1; transform: translate(-50%, -58%); }
.contact-v1 .city-card:focus-visible .city-card-media::after { opacity: 0.3; }
.contact-v1 .city-card-body { padding: 26px 26px 28px; }
.contact-v1 .city-card h3 { font-size: 20px; }
.contact-v1 .city-tag {
	margin-top: 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brandTeal);
}
.contact-v1 .city-addr { margin-top: 12px; font-size: 15px; line-height: 1.7; font-style: normal; }
.contact-v1 .city-card .link-arrow { display: inline-block; margin-top: 16px; }

/* ---------- 3. Careers bookend (donor: city-page .visit band, ported literally:
   brand-black Baton Rouge map under corner washes + dark veil; the black
   ground separates it from the dark-green footer that follows) ---------- */
.contact-v1 .careers {
	background-color: var(--brandBlack);
	background-image:
		radial-gradient(1100px 700px at 10% 100%, rgba(21, 107, 94, 0.38), transparent 65%),
		radial-gradient(900px 640px at 94% 4%, rgba(129, 190, 65, 0.09), transparent 60%),
		linear-gradient(rgba(23, 31, 39, 0.66), rgba(23, 31, 39, 0.66)),
		var(--mapCta);
	background-size: cover, cover, cover, cover;
	background-position: center, center, center, center 68%;
	color: rgba(246, 246, 246, 0.85);
	padding: 124px 0 136px;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.contact-v1 .careers-ctas {
	margin-top: 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}
.contact-v1 .careers-secondary {
	display: inline-block;
	color: rgba(246, 246, 246, 0.85);
	font-weight: 600;
	font-size: 15px;
	transition: color 0.35s ease;
}
.contact-v1 .careers-secondary::after { content: " \2192"; }
.contact-v1 a.careers-secondary:hover { color: var(--brandGreen); }

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

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

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.contact-v1 .hero { padding: 72px 0 84px; }
	.contact-v1 .hero-grid { grid-template-columns: 1fr; gap: 44px; }
	.contact-v1 .hub-grid { grid-template-columns: 1fr 1fr; }
	.contact-v1 .offices, .contact-v1 .careers { padding: 84px 0 92px; }
}
@media (max-width: 640px) {
	.contact-v1 .hub-grid { grid-template-columns: 1fr; }
	.contact-v1 .form-grid { grid-template-columns: 1fr; }
	.contact-v1 .form-card { padding: 26px 22px 28px; }
	.contact-v1 .line-value .sep { display: block; height: 0; overflow: hidden; margin: 0; }
}

/* ---------- HubSpot contact form, rendered inline into the card ----------
   HubSpot's injected styles (fieldset max-width 500px, 50% floats in
   form-columns-2, 95% inputs) are overridden here so the fields sit in the
   card's own two-column grid. Field order comes from the form itself:
   first/last, company, size, title, email, phone, city/state, message. */
.contact-v1 #hs-contact-form form.hs-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
	margin-top: 4px;
}
.contact-v1 #hs-contact-form fieldset { display: contents; max-width: none; border: 0; margin: 0; padding: 0; }
.contact-v1 #hs-contact-form .hs-form-field {
	width: 100% !important;
	float: none !important;
	margin: 11px 0 0;
	max-height: 480px;
	transition: max-height 0.4s ease, opacity 0.35s ease, margin 0.4s ease;
}
.contact-v1 #hs-contact-form .hs_state,
.contact-v1 #hs-contact-form .hs_message,
.contact-v1 #hs-contact-form .hs_recaptcha,
.contact-v1 #hs-contact-form .hs_submit { grid-column: 1 / -1; }
.contact-v1 #hs-contact-form .hs-form-field .input { margin-right: 0 !important; }
.contact-v1 #hs-contact-form label { display: block; font-weight: 600; font-size: 14px; color: var(--brandBlack); margin: 0 0 5px; }
.contact-v1 #hs-contact-form .hs-form-required { color: var(--brandTeal); margin-left: 2px; }
.contact-v1 #hs-contact-form .hs-input {
	width: 100% !important;
	box-sizing: border-box;
	padding: 10px 13px;
	border: 1px solid rgba(0, 56, 48, 0.16);
	border-radius: 12px;
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	background: #fff;
	color: var(--brandBlack);
	transition: border-color 0.35s ease;
}
.contact-v1 #hs-contact-form .hs-input:hover { border-color: rgba(0, 56, 48, 0.34); }
.contact-v1 #hs-contact-form .hs-input:focus { outline: 2px solid var(--brandTeal); outline-offset: 1px; border-color: var(--brandTeal); }
.contact-v1 #hs-contact-form select.hs-input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23003830' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px;
}
.contact-v1 #hs-contact-form textarea.hs-input { min-height: 112px; resize: vertical; }
.contact-v1 #hs-contact-form .hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: #a2372c; }
.contact-v1 #hs-contact-form .hs-error-msg { color: #a2372c; }
.contact-v1 #hs-contact-form .hs_error_rollup { grid-column: 1 / -1; }
.contact-v1 #hs-contact-form .hs_submit { margin-top: 22px; }
.contact-v1 #hs-contact-form .hs-button {
	width: 100%;
	padding: 17px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--brandGreen);
	color: var(--brandDarkGreen);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}
.contact-v1 #hs-contact-form .hs-button:hover,
.contact-v1 #hs-contact-form .hs-button:focus-visible { background: #2c665d; color: #fff; }
/* Collapsed by default: the name row and the button invite the click; the
   rest unfolds on first interaction (fields stay in the DOM so HubSpot
   validation is unaffected; submit force-opens so errors can never hide). */
.contact-v1 .form-card:not(.is-open) #hs-contact-form .hs-form-field:not(.hs_firstname):not(.hs_lastname) {
	max-height: 0;
	opacity: 0;
	margin: 0;
	overflow: hidden;
}
/* Thank-you state. */
.contact-v1 #hs-contact-form .submitted-message,
.contact-v1 #hs-contact-form .submitted-message p {
	font-size: 16.5px;
	line-height: 1.85;
	color: var(--brandDarkGreen);
	text-align: center;
	padding: 12px 0 4px;
}
@media (max-width: 640px) {
	.contact-v1 #hs-contact-form form.hs-form { grid-template-columns: 1fr; }
}

/* Header clearance: the transparent overlay header (header.php, slug list)
   sits over the hero, so the hero carries the header height (same numbers as
   the locations shim in assets/css/style.css). */
body:not(.header-bg) .contact-v1 .hero { padding-top: 190px; }
@media (max-width: 991px) {
	body:not(.header-bg) .contact-v1 .hero { padding-top: 156px; }
}