/**
 * Neighborhood page styles — Golden Plumbing brand, taken from the live site:
 * gold #f5a623, purple #3b2544, deep #1a1220, muted #7a708c.
 * Montserrat (headings) and Open Sans (body) are already enqueued site-wide,
 * so they are referenced rather than loaded again.
 */
.gp-hood {
	--gp-gold: #f5a623;
	--gp-gold-deep: #d98c0e;
	--gp-purple: #3b2544;
	--gp-purple-deep: #1a1220;
	--gp-muted: #7a708c;
	--gp-ink: #4a4458;
	--gp-rule: #ece6ef;
	--gp-pad: clamp(1.15rem, 5vw, 3rem);
	display: block;
	background: #fff;
	color: var(--gp-ink);
}

.gp-hood a { text-decoration: none; }
.gp-hood :focus-visible { outline: 3px solid var(--gp-gold); outline-offset: 2px; }

.gp-hood-crumb {
	font-family: "Open Sans", sans-serif;
	font-size: .78rem;
	color: var(--gp-muted);
	padding: 1rem var(--gp-pad) 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}
main.gp-hood .gp-hood-crumb a { color: var(--gp-muted); }
main.gp-hood .gp-hood-crumb a:hover { color: var(--gp-purple); text-decoration: underline; }

/* ── Hero ── */
.gp-hood-hero {
	background: linear-gradient(160deg, var(--gp-purple) 0%, var(--gp-purple-deep) 100%);
	color: #fff;
	padding: clamp(2rem, 6vw, 3.4rem) var(--gp-pad);
	margin-top: 1rem;
}
main.gp-hood .gp-hood-hero h1 {
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: clamp(1.5rem, 4.4vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 .85rem;
	text-wrap: balance;
}
main.gp-hood .gp-hood-hero h1 em { font-style: normal; color: var(--gp-gold); }
main.gp-hood .gp-hood-hero p {
	font-family: "Open Sans", sans-serif;
	font-size: 1rem;
	line-height: 1.65;
	color: #ddd3e6;
	max-width: 56ch;
	margin: 0;
}
.gp-hood-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

main.gp-hood a.gp-btn-gold,
main.gp-hood a.gp-btn-ghost,
main.gp-hood a.gp-btn-purple {
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: .88rem;
	padding: .8rem 1.35rem;
	display: inline-block;
	transition: transform .15s ease, background-color .15s ease;
}
main.gp-hood a.gp-btn-gold { background: var(--gp-gold); color: var(--gp-purple-deep); }
main.gp-hood a.gp-btn-gold:hover { background: #ffb945; color: var(--gp-purple-deep); }
main.gp-hood a.gp-btn-ghost { border: 1px solid rgba(255,255,255,.4); color: #fff; }
main.gp-hood a.gp-btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
main.gp-hood a.gp-btn-purple { background: var(--gp-purple); color: #fff; }
main.gp-hood a.gp-btn-purple:hover { background: var(--gp-purple-deep); color: #fff; }

/* ── Proof strip: the real ServiceTitan numbers ── */
.gp-hood-proof {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	background: var(--gp-purple-deep);
	border-top: 3px solid var(--gp-gold);
}
.gp-hood-proof div {
	padding: 1.2rem 1rem;
	border-right: 1px solid rgba(255,255,255,.09);
}
.gp-hood-proof div:last-child { border-right: 0; }
main.gp-hood .gp-hood-proof b {
	display: block;
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 1.8rem;
	line-height: 1;
	color: var(--gp-gold);
	font-variant-numeric: tabular-nums;
}
.gp-hood-proof span {
	display: block;
	margin-top: .4rem;
	font-family: "Open Sans", sans-serif;
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #b7a9c4;
}

/* ── Body ── */
.gp-hood-body {
	padding: clamp(1.8rem, 5vw, 3rem) var(--gp-pad);
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
	max-width: 1100px;
	margin: 0 auto;
}
main.gp-hood .gp-hood-body h2 {
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: clamp(1.15rem, 2.8vw, 1.5rem);
	color: var(--gp-purple);
	letter-spacing: -.01em;
	margin: 0 0 .9rem;
	text-wrap: balance;
}
main.gp-hood .gp-hood-body h2::after {
	content: "";
	display: block;
	width: 38px;
	height: 3px;
	background: var(--gp-gold);
	margin-top: .55rem;
}
main.gp-hood .gp-hood-body p {
	font-family: "Open Sans", sans-serif;
	font-size: .98rem;
	line-height: 1.7;
	color: var(--gp-ink);
	max-width: 68ch;
	margin: 0 0 .8rem;
}

/* Ranked service lines read as a data list, separated by hairlines. */
.gp-hood-worklist { display: grid; }
.gp-hood-work {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3rem 1rem;
	padding: .95rem .1rem;
	border-bottom: 1px solid var(--gp-rule);
}
.gp-hood-work:last-child { border-bottom: 0; }
main.gp-hood .gp-hood-work b {
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	color: var(--gp-purple);
	min-width: 9.5rem;
	font-size: .96rem;
}
.gp-hood-work span {
	font-family: "Open Sans", sans-serif;
	font-size: .9rem;
	color: var(--gp-ink);
	flex: 1 1 14rem;
}
main.gp-hood .gp-hood-work i {
	font-style: normal;
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: .88rem;
	color: var(--gp-gold-deep);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	margin-left: auto;
}

.gp-hood-note {
	background: #fdf6e8;
	border: 1px solid #f0dcae;
	padding: 1.1rem 1.2rem;
	font-family: "Open Sans", sans-serif;
	font-size: .93rem;
	line-height: 1.65;
	color: #5c4a20;
	max-width: 68ch;
}
.gp-hood-note b { font-family: "Montserrat", sans-serif; font-weight: 800; }

.gp-hood-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: .6rem;
}
main.gp-hood .gp-hood-links a {
	display: block;
	padding: .8rem .95rem;
	background: #fff;
	border: 1px solid #e3dde8;
	font-family: "Open Sans", sans-serif;
	font-size: .9rem;
	font-weight: 600;
	color: var(--gp-purple);
	transition: border-color .15s ease, transform .15s ease;
}
.gp-hood-links a::after { content: " \2192"; color: var(--gp-gold-deep); }
main.gp-hood .gp-hood-links a:hover { border-color: var(--gp-gold); color: var(--gp-purple); }

/* ── Closing band ── */
.gp-hood-band {
	background: var(--gp-gold);
	padding: clamp(1.6rem, 4vw, 2.4rem) var(--gp-pad);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
}
main.gp-hood .gp-hood-band h2 {
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: clamp(1.1rem, 3vw, 1.5rem);
	color: var(--gp-purple-deep);
	margin: 0;
	max-width: 34ch;
	text-wrap: balance;
}
.gp-hood-band-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
main.gp-hood a.gp-hood-phone {
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--gp-purple-deep);
	white-space: nowrap;
}
main.gp-hood a.gp-hood-phone:hover { text-decoration: underline; color: var(--gp-purple-deep); }

@media (prefers-reduced-motion: reduce) {
	.gp-hood * { transition: none !important; }
}

/* ── Hub: neighborhood chooser ────────────────────────────────────────────────
 * Replaces the old hub's broken link list (every href carried a trailing %20, and
 * it linked /plumbing-repair/ children that mostly 404'd). These are direct links.
 */
.gp-hub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: .7rem;
}
main.gp-hood .gp-hub-card {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: 1rem 1.1rem;
	background: #fff;
	border: 1px solid #e3dde8;
	border-top: 3px solid transparent;
	transition: border-color .15s ease;
}
main.gp-hood .gp-hub-card:hover { border-color: #e3dde8; border-top-color: var(--gp-gold); }
main.gp-hood .gp-hub-card b {
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 1rem;
	color: var(--gp-purple);
}
main.gp-hood .gp-hub-card span {
	font-family: "Open Sans", sans-serif;
	font-size: .78rem;
	color: var(--gp-muted);
	font-variant-numeric: tabular-nums;
}
main.gp-hood .gp-hub-card i {
	font-style: normal;
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: .82rem;
	color: var(--gp-gold-deep);
	font-variant-numeric: tabular-nums;
	margin-top: .25rem;
}

/* ── Location pages (multi-location) ──────────────────────────────────────── */
.gp-loc-nap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1px;
	background: #ece6ef;
	border-top: 3px solid var(--gp-gold);
	border-bottom: 1px solid #ece6ef;
}
.gp-loc-nap > div { background: #fff; padding: 1.1rem 1.2rem; }
.gp-loc-nap span {
	display: block;
	font-family: "Open Sans", sans-serif;
	font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
	color: var(--gp-muted); margin-bottom: .4rem;
}
main.gp-hood .gp-loc-nap b {
	font-family: "Montserrat", sans-serif; font-weight: 800;
	font-size: .95rem; line-height: 1.45; color: var(--gp-purple);
}
main.gp-hood .gp-loc-nap b a { color: var(--gp-purple); }
main.gp-hood .gp-loc-nap b a:hover { color: var(--gp-gold-deep); }

.gp-loc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; }
main.gp-hood a.gp-loc-card {
	display: flex; flex-direction: column; gap: .35rem;
	padding: 1.2rem 1.3rem; background: #fff;
	border: 1px solid #e3dde8; border-top: 3px solid transparent;
	transition: border-color .15s ease;
}
main.gp-hood a.gp-loc-card:hover { border-top-color: var(--gp-gold); }
main.gp-hood a.gp-loc-card b {
	font-family: "Montserrat", sans-serif; font-weight: 800;
	font-size: 1.08rem; color: var(--gp-purple);
}
main.gp-hood a.gp-loc-card span {
	font-family: "Open Sans", sans-serif; font-size: .88rem;
	line-height: 1.5; color: var(--gp-ink);
}
main.gp-hood a.gp-loc-card span.gp-loc-phone { color: var(--gp-purple); font-weight: 700; }
main.gp-hood a.gp-loc-card i {
	font-style: normal; font-family: "Montserrat", sans-serif; font-weight: 800;
	font-size: .8rem; color: var(--gp-gold-deep); margin-top: .3rem;
}

/* ── Location page: estimate card beside the hero (1.6.0, 2026-09-21) ──
 * The GBP listing links to /locations/bowman-avenue/. The card sits in the same purple
 * band as the hero: stacked under the buttons on a phone, a second column on desktop
 * (the service-page layout). Scoped to .gp-loc-top--card, so without the card the
 * hero renders exactly as before. */
main.gp-hood .gp-loc-top--card {
	background: linear-gradient(160deg, var(--gp-purple) 0%, var(--gp-purple-deep) 100%);
	margin-top: 1rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}
main.gp-hood .gp-loc-top--card .gp-hood-hero { background: none; margin-top: 0; }
main.gp-hood .gp-loc-top--card .gp-loc-est { padding: 0 var(--gp-pad) clamp(2rem, 6vw, 3.4rem); }
main.gp-hood .gp-loc-est .gp-est { margin: 0; max-width: 440px; }
@media (min-width: 960px) {
	main.gp-hood .gp-loc-top--card { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); column-gap: 1rem; padding-right: var(--gp-pad); }
	main.gp-hood .gp-loc-top--card .gp-loc-est { padding: clamp(2rem, 6vw, 3.4rem) 0; }
}