/* =============================================================
   Location landing pages — CPT: location
   -------------------------------------------------------------
   Loaded on is_singular('location') and the location archive,
   after style.css and responsive.css, so it can override them.

   Builds on what the theme already has:
     --theme-color         #CF1118  (brand red)
     --theme-color-second  #0077c8  (brand blue)
     a.btn1 / a.btn1.blue-bg        (the theme's button pair)
     .container / .row / .col-*     (bootstrap)
     --font-content / --font-headline / --font-accent

   Everything is scoped under .location-landing so nothing here
   can reach the existing city page templates.

   Breakpoint note: the grid is bootstrap, so .col-lg-* stacks at
   992px. The layout switches there too — using the theme's own
   1192px breakpoint would hide the diagonal while the columns
   were still side by side.
   ============================================================= */


/* Same three-font system as the rest of the theme. Icon fonts
   (FontAwesome) keep their own family so checkmarks still render. */
.location-landing {
	--ll-bg-a: #ffffff;
	--ll-bg-b: #F5F7F9;
	--ll-sticky-top: 132px;

	font-family: var(--font-content);
	font-style: normal;
}

/* After the red proof band: white, grey, white, grey.
   Optional sections still stripe because nth-of-type counts
   siblings, not names. Book and nearby stay dark. */
.location-landing > .location-proof ~ section:not(.location-book):not(.location-nearby) {
	background-color: var(--ll-bg-a);
}

.location-landing > .location-proof ~ section:not(.location-book):not(.location-nearby):nth-of-type(even) {
	background-color: var(--ll-bg-b);
}

.location-landing h1,
.location-landing h2,
.location-landing h3,
.location-landing h4,
.location-landing h5,
.location-landing h6 {
	font-family: var(--font-headline);
	font-style: normal;
}

.location-landing p,
.location-landing li,
.location-landing a,
.location-landing button,
.location-landing input,
.location-landing select,
.location-landing textarea,
.location-landing label,
.location-landing span,
.location-landing small,
.location-landing strong,
.location-landing b,
.location-landing em,
.location-landing i:not(.fa),
.location-landing cite,
.location-landing dfn,
.location-landing address,
.location-landing q,
.location-landing blockquote,
.location-landing figcaption,
.location-landing dt,
.location-landing dd {
	font-family: inherit;
	font-style: normal;
}

.location-landing strong,
.location-landing b {
	font-weight: 600;
}

/* Display type that is not an h1–h6 still needs the headline face. */
.location-landing .location-hero__ghost,
.location-landing .location-hero .stat-line,
.location-landing .location-proof__claim,
.location-landing .location-proof__num,
.location-landing .location-coverage__value,
.location-landing .location-packages__desc,
.location-landing .location-packages__amount,
.location-landing .location-book__phone,
.location-landing .location-steps__num,
.location-landing .location-reviews__figure {
	font-family: var(--font-headline);
}


/* -------------------------------------------------------------
   1. HERO
   Layering, back to front:
     media (car)  z1  — absolute, bleeds off the right viewport edge
     stripe       z2  — white slash
     field        z3  — the red shape, CROPS the car
     container    z4  — ghost then copy

   The car is deliberately not a grid column. As a column it sat
   centred inside the container, so on a wide screen it floated in
   dead grey while the viewport-positioned diagonal cut across the
   copy. Positioning it against the viewport and letting the red
   overlap it fixes both at once.
   ------------------------------------------------------------- */

.location-landing .location-hero {
	--lh-red-light: #E2181F;
	--lh-red-deep: #A50D13;
	--lh-ink: #121212;

	/* How far the diagonal leans over the hero's height. */
	--lh-lean: 190px;
	/* Where the red field ends at its widest (the top edge). */
	--lh-field: 64%;

	/* Fallback chrome until location.js measures the live header and
	   sticky book/text bar. 132 + 56 matches the theme's 188px banner. */
	--ll-header-h: 132px;
	--ll-sticky-h: 56px;

	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-height: calc(100vh - var(--ll-header-h) - var(--ll-sticky-h));
	min-height: calc(100dvh - var(--ll-header-h) - var(--ll-sticky-h));
	padding: clamp(40px, 7vh, 80px) 0;
	color: #fff;
	background: linear-gradient(180deg, #F4F5F7 0%, #DDE1E6 100%);
}

/* Sized by the hero's height, not its width: scaling to a 60% column
   makes the car taller than the section on a wide screen, so it gets
   cropped top and bottom and reads as a zoomed photo rather than a
   car. object-fit keeps it whole; object-position pins it right so
   it still bleeds off the edge. */
.location-landing .location-hero__media {
	position: absolute;
	top: 26px;
	right: -2%;
	bottom: 26px;
	z-index: 1;
	width: 56%;
	pointer-events: none;
}

.location-landing .location-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center right;
	filter: drop-shadow(0 30px 26px rgba(0, 0, 0, .34));
}

/* The red field. Its right edge is the diagonal, and because it
   paints over the car the crop happens here rather than in the
   image. */
.location-landing .location-hero__field {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 3;
	width: var(--lh-field);
	background: linear-gradient(
		135deg,
		var(--lh-red-light) 0%,
		var(--theme-color, #CF1118) 45%,
		var(--lh-red-deep) 100%
	);
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--lh-lean)) 100%, 0 100%);
}

/* The brand's second slash: the same shape, nudged right and sitting
   under the red, so the white band is always parallel to the
   diagonal however wide the screen gets. */
.location-landing .location-hero__stripe {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 2;
	width: var(--lh-field);
	background: #fff;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--lh-lean)) 100%, 0 100%);
	transform: translateX(34px);
}

.location-landing .location-hero > .container {
	position: relative;
	z-index: 4;
	width: 100%;
}

/* Oversized location name behind the copy. */
.location-landing .location-hero__ghost {
	position: absolute;
	bottom: -22px;
	left: 4px;
	z-index: 0;
	font-size: clamp(52px, 7vw, 120px);
	font-weight: 600;
	line-height: .85;
	text-transform: uppercase;
	white-space: nowrap;
	/* Clipped to the red side — left unbounded it runs across the
	   diagonal and prints grey-on-grey over the car. */
	max-width: 54%;
	overflow: hidden;
	color: rgba(255, 255, 255, .06);
	pointer-events: none;
	user-select: none;
}

.location-landing .location-hero__content {
	position: relative;
	z-index: 1;
	padding-right: calc(var(--bs-gutter-x, 24px) / 2 + 26px);
}

@media screen and (min-width: 992px) {
	.location-landing .location-hero__content {
		flex: 0 0 52.5%;
		max-width: 52.5%;
	}
}

/* ---- Copy ---- */

.location-landing .location-hero__title {
	margin: 0 0 18px;
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	text-wrap: balance;
}

/* loc_subhead — a plain sentence ("22 minutes from our Monrovia
   base. No travel fee."), so no uppercase or wide tracking. */
.location-landing .location-hero__subhead {
	max-width: none;
	margin: 0 0 22px;
	font-size: clamp(17px, 1.5vw, 22px);
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, .94);
}

/* loc_intro is 70-100 words through wpautop, so it may be more
   than one paragraph. */
.location-landing .location-hero__intro {
	max-width: none;
	margin: 0 0 32px;
	color: rgba(255, 255, 255, .95);
}

.location-landing .location-hero__intro p {
	margin: 0 0 12px;
	font-weight: 300;
}

.location-landing .location-hero__intro p:last-child {
	margin-bottom: 0;
}

/* ---- Buttons (theme's .btn1 / .btn1.blue-bg) ---- */

.location-landing .location-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.location-landing .location-hero__actions .btn1 {
	width: auto;
	min-width: 12rem;
	padding-inline: 30px;
	font-weight: 600;
	background: #fff;
	color: var(--lh-ink);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}

.location-landing .location-hero__actions .btn1:hover,
.location-landing .location-hero__actions .btn1:focus-visible {
	background: var(--lh-ink);
	color: #fff;
}

.location-landing .location-hero__actions .btn1.blue-bg {
	background: var(--theme-color-second, #0077c8);
	color: #fff;
}

.location-landing .location-hero__actions .btn1.blue-bg:hover,
.location-landing .location-hero__actions .btn1.blue-bg:focus-visible {
	background: var(--lh-ink);
	color: #fff;
}

/* ---- Trust signals ---- */

.location-landing .location-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.location-landing .location-hero__trust li {
	margin: 0;
}

.location-landing .location-hero .stat-line {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	border-radius: 999px;
	background: #fff;
	color: var(--lh-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .20);
}

.location-landing .location-hero .small-icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--theme-color, #CF1118);
}

.location-landing .location-hero .highlight {
	color: var(--theme-color-second, #0077c8);
	font-weight: 600;
}


/* Very wide screens: hold the copy against the container while the
   red keeps enough width that the text never meets the diagonal. */
@media screen and (min-width: 1600px) {

	.location-landing .location-hero {
		--lh-field: 60%;
		--lh-lean: 230px;
	}

	.location-landing .location-hero__media {
		width: 50%;
	}
}


/* Mobile chrome (header.small + marquee) starts at the theme's 1192px
   break, while the diagonal hero layout holds until bootstrap lg. */
@media screen and (max-width: 1192px) {
	.location-landing .location-hero {
		--ll-header-h: 120px;
	}
}

/* -------------------------------------------------------------
   Hero - tablet and below (bootstrap lg)
   ------------------------------------------------------------- */

@media screen and (max-width: 991.98px) {

	.location-landing .location-hero {
		padding: 48px 0 56px;
		text-align: center;
		background: linear-gradient(
			160deg,
			var(--lh-red-light) 0%,
			var(--theme-color, #CF1118) 45%,
			var(--lh-red-deep) 100%
		);
	}

	/* The diagonal would put copy on the light panel and kill the
	   contrast, so the whole band goes red and the car returns to
	   the flow underneath. */
	.location-landing .location-hero__field,
	.location-landing .location-hero__stripe {
		display: none;
	}

	/* The media div comes first in the DOM so it can sit behind the
	   red field on desktop. Once it is back in the flow, order puts
	   the copy first again. */
	.location-landing .location-hero {
		display: flex;
		flex-direction: column;
	}

	.location-landing .location-hero > .container {
		order: 1;
	}

	.location-landing .location-hero__media {
		order: 2;
		position: static;
		width: auto;
		margin-top: 46px;
	}

	.location-landing .location-hero__media img {
		height: auto;
		max-width: 660px;
		margin-inline: auto;
		object-fit: fill;
	}



	/* Nothing left for it to sit behind once the layout stacks. */
	.location-landing .location-hero__ghost {
		display: none;
	}

	.location-landing .location-hero__content {
		padding-right: calc(var(--bs-gutter-x, 24px) / 2);
	}

	.location-landing .location-hero__subhead,
	.location-landing .location-hero__intro {
		max-width: 60ch;
		margin-inline: auto;
	}

	.location-landing .location-hero__intro {
		margin-bottom: 32px;
	}

	.location-landing .location-hero__actions,
	.location-landing .location-hero__trust {
		justify-content: center;
	}
}

@media screen and (max-width: 567.98px) {

	.location-landing .location-hero {
		padding: 36px 0 44px;
	}

	.location-landing .location-hero__actions .btn1 {
		width: 100%;
	}

	.location-landing .location-hero .stat-line {
		font-size: 14px;
		padding: 10px 16px;
	}
}


/* -------------------------------------------------------------
   2. PROOF BAND
   Sits flush under the hero — a deeper tone of the same red, so
   it reads as the fine print on the hero's promise rather than
   the first content section. Deliberately not cards: one
   continuous statement in four beats, split by hairlines.
   ------------------------------------------------------------- */

.location-landing .location-proof {
	padding: 26px 0;
	background: #8C1015;
	border-top: 1px solid rgba(255, 255, 255, .16);
	color: #fff;
}

.location-landing .location-proof__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.location-landing .location-proof__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 2px 20px;
	text-align: center;
}

/* Hairline between beats, never around them. */
.location-landing .location-proof__item + .location-proof__item {
	border-left: 1px solid rgba(255, 255, 255, .18);
}

.location-landing .location-proof__claim {
	margin: 0 0 5px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}

/* The eye should land on 7, 4.7, and the two word-claims in turn,
   so the numerals step up while the claim text stays level. */
.location-landing .location-proof__num {
	font-size: 30px;
	font-weight: 600;
	line-height: 1;
	vertical-align: -2px;
}

.location-landing .location-proof__star {
	margin-left: 2px;
	font-size: 17px;
	color: rgba(255, 255, 255, .78);
}

/* margin-top:auto drops this to the cell floor; because grid rows are
   equal height, the supporting lines then share a baseline even when a
   claim above wraps to two lines. */
.location-landing .location-proof__sub {
	margin: auto 0 0;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.4;
	color: rgba(255, 255, 255, .74);
}

.location-landing .location-proof__link {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.location-landing .location-proof__link:hover,
.location-landing .location-proof__link:focus-visible {
	color: #fff;
	text-decoration-thickness: 2px;
}

/* Visually hidden, still announced. */
.location-landing .location-proof__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* Two-by-two below bootstrap lg. Four stacked rows would eat the
   phone screen at exactly the point the visitor needs to keep
   going, and the gap replaces the hairlines. */
@media screen and (max-width: 991.98px) {

	.location-landing .location-proof {
		padding: 24px 0;
	}

	.location-landing .location-proof__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px 14px;
	}

	.location-landing .location-proof__item,
	.location-landing .location-proof__item + .location-proof__item {
		padding: 0 6px;
		border-left: 0;
	}

	.location-landing .location-proof__claim {
		font-size: 16.5px;
	}

	.location-landing .location-proof__num {
		font-size: 26px;
	}

	.location-landing .location-proof__sub {
		font-size: 12.5px;
	}
}


/* -------------------------------------------------------------
   3. COVERAGE
   Light ground after the deep-red band, so the two sections read
   as distinct without needing a rule between them.

   Layout is a named grid rather than bootstrap columns because
   the panel has to sit BETWEEN the heading and the prose on
   mobile, which column ordering alone can't express.
   ------------------------------------------------------------- */

.location-landing .location-coverage {
	--lc-ink: #121212;
	--lc-muted: #5B6673;
	--lc-rule: #E2E6EB;
	--lc-panel: #F7F8FA;

	padding: 76px 0;
	color: var(--lc-ink);
}

.location-landing .location-coverage__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
	grid-template-areas:
		"head  panel"
		"body  panel";
	align-items: start;
	column-gap: 56px;
	row-gap: 26px;
}

.location-landing .location-coverage__head  { grid-area: head; }
.location-landing .location-coverage__panel { grid-area: panel; }
.location-landing .location-coverage__body  { grid-area: body; }

/* ---- Heading ---- */

.location-landing .location-coverage__title {
	margin: 0 0 18px;
	font-size: clamp(27px, 2.6vw, 36px);
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
}

.location-landing .location-coverage__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin-top: 16px;
	background: var(--theme-color, #CF1118);
}

.location-landing .location-coverage__lede {
	max-width: 50ch;
	margin: 0;
	color: var(--lc-muted);
}

/* ---- Prose ---- */

.location-landing .location-coverage__areas,
.location-landing .location-coverage__ask {
	max-width: 50ch;
	margin: 0 0 14px;
}

.location-landing .location-coverage__ask {
	margin-bottom: 0;
	color: var(--lc-muted);
}

/* ---- Fact panel ---- */

/* A stacked list, not a grid: cities differ in which optional rows
   they have, and a list survives one, two, three or four rows with
   no layout decision. The panel border closes the bottom edge. */
.location-landing .location-coverage__facts {
	margin: 0;
	border: 1px solid var(--lc-rule);
	background: var(--lc-panel);
}

.location-landing .location-coverage__fact {
	padding: 18px 24px;
}

/* Top border on every row but the first. Empty rows are removed in
   PHP rather than hidden, so this always lands on a visible row. */
.location-landing .location-coverage__fact + .location-coverage__fact {
	border-top: 1px solid var(--lc-rule);
}

.location-landing .location-coverage__label {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--lc-muted);
}

.location-landing .location-coverage__value {
	margin: 0;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--lc-ink);
}

.location-landing .location-coverage__value--nums {
	font-variant-numeric: tabular-nums;
}


/* Facts move above the prose: they're the payload, the prose waits. */
@media screen and (max-width: 991.98px) {

	.location-landing .location-coverage {
		padding: 48px 0;
	}

	.location-landing .location-coverage__grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"head"
			"panel"
			"body";
		row-gap: 24px;
	}

	.location-landing .location-coverage__lede,
	.location-landing .location-coverage__areas,
	.location-landing .location-coverage__ask {
		max-width: none;
	}

	.location-landing .location-coverage__fact {
		padding: 15px 18px;
	}

	.location-landing .location-coverage__value {
		font-size: 19px;
	}
}


/* -------------------------------------------------------------
   4. LOCAL STORY
   Two-column split: photo left, the whole argument on the right.
   The photo fills the copy column's height; copy keeps 40px padding.
   ------------------------------------------------------------- */

.location-landing .location-story {
	--ls-ink: #171B21;
	--ls-muted: #55606D;

	padding: 92px 0;
	color: var(--ls-ink);
}

.location-landing .location-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: 56px;
	align-items: stretch;
}

.location-landing .location-story__media {
	position: relative;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 16px;
}

.location-landing .location-story__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

.location-landing .location-story__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 40px 0;
}

.location-landing .location-story__title {
	max-width: 22ch;
	margin: 0 0 32px;
	font-size: clamp(28px, 2.8vw, 38px);
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
}

.location-landing .location-story__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 18px 0 0;
	background: var(--theme-color, #CF1118);
}

/* Stacked in the copy column so the measure stays readable
   once the photo has taken the left half. */
.location-landing .location-story__pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
}

/* Signpost, not payload: small heading over full-size body — the
   inverse of the coverage panel above. */
.location-landing .location-story__subhead {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--theme-color, #CF1118);
}

.location-landing .location-story__text p {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.78;
	color: var(--ls-muted);
}

.location-landing .location-story__text p:last-child {
	margin-bottom: 0;
}

/* A slightly heavier opening line — an editorial device, and it
   avoids the usual instinct of bolding phrases mid-paragraph,
   which always reads as SEO. */
.location-landing .location-story__text > p:first-child::first-line {
	font-weight: 500;
	color: var(--ls-ink);
}

.location-landing .location-story__close {
	max-width: 44ch;
	margin: 36px 0 0;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.6;
	text-wrap: pretty;
	color: var(--ls-ink);
}

.location-landing .location-story__cta {
	display: inline-block;
	align-self: flex-start;
	width: auto;
	min-width: 12rem;
	margin-top: 24px;
	padding-inline: 30px;
	font-weight: 600;
}


@media screen and (max-width: 991.98px) {

	.location-landing .location-story {
		padding: 56px 0;
	}

	.location-landing .location-story__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.location-landing .location-story__copy {
		padding: 0;
	}

	.location-landing .location-story__media {
		height: 320px;
		max-height: 320px;
	}

	.location-landing .location-story__title {
		margin-bottom: 26px;
	}

	.location-landing .location-story__pair {
		gap: 24px;
	}

	.location-landing .location-story__close {
		margin: 28px 0 0;
		font-size: 18px;
	}
}


/* -------------------------------------------------------------
   5. POPULAR SERVICES
   Three-up grid. Image stacked on copy inside each cell so the
   reason still has a full column, not a squeezed half-row.
   ------------------------------------------------------------- */

.location-landing .location-services {
	--lsv-ink: #171B21;
	--lsv-muted: #55606D;
	--lsv-rule: #E2E6EB;

	padding: 92px 0;
	color: var(--lsv-ink);
}

.location-landing .location-services__title {
	max-width: 28ch;
	margin: 0 0 12px;
	font-size: clamp(28px, 2.8vw, 38px);
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
}

.location-landing .location-services__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin-top: 18px;
	background: var(--theme-color, #CF1118);
}

.location-landing .location-services__rows {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 28px;
	margin-top: 46px;
}

.location-landing .location-services__row {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 18px;
	padding: 9px 9px 11px;
	background: #fff;
	border: 1px solid #E5E8ED;
	border-radius: 16px;
}

.location-landing .location-services__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 12px;
}

.location-landing .location-services__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0 4px;
}

/* Condition tag, in place of a step number. */
.location-landing .location-services__tag {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--theme-color-second, #0077c8);
}

.location-landing .location-services__name {
	margin: 0 0 11px;
	font-size: clamp(20px, 1.6vw, 23px);
	font-weight: 600;
	line-height: 1.2;
	text-wrap: balance;
}

.location-landing .location-services__meta {
	margin: -8px 0 22px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--lsv-muted);
}

.location-landing .location-services__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: auto;
	min-height: 56px;
	padding: 16px 22px;
	border: 1.5px solid var(--lsv-ink);
	border-radius: 10px;
	background: transparent;
	color: var(--lsv-ink);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.location-landing .location-services__link .fa {
	font-family: FontAwesome;
	font-size: 13px;
	font-style: normal;
	line-height: 1;
}

.location-landing .location-services__link:hover,
.location-landing .location-services__link:focus-visible {
	border-color: var(--theme-color, #CF1118);
	background: var(--theme-color, #CF1118);
	color: #fff;
}


@media screen and (max-width: 991.98px) {

	.location-landing .location-services {
		padding: 56px 0;
	}

	.location-landing .location-services__rows {
		grid-template-columns: minmax(0, 1fr);
		max-width: 520px;
		margin-top: 32px;
	}
}


/* -------------------------------------------------------------
   6. HOW IT WORKS
   Three static cards. One surface device only: a soft fill, no
   border and no shadow — stacking all three is what makes a card
   grid look like a template.
   ------------------------------------------------------------- */

.location-landing .location-steps {
	--lst-ink: #171B21;
	--lst-muted: #55606D;
	--lst-rule: #E4E8ED;

	padding: 92px 0;
	color: var(--lst-ink);
}

.location-landing .location-steps__title {
	max-width: 24ch;
	margin: 0 auto 20px;
	font-size: clamp(28px, 2.8vw, 38px);
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
}

.location-landing .location-steps__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 18px auto 0;
	background: var(--theme-color, #CF1118);
}

/* Straight to one column below 768 — the 2-up tablet step orphans
   the third card. */
.location-landing .location-steps__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 24px;
	margin-top: 46px;
}

.location-landing .location-steps__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 28px 28px 36px;
	border: 1px solid #E5E8ED;
	border-radius: 4px;
	background: #fff;
}

/* Solid numeral, top-left inside the card. Stroke-outline used to
   clip the 3; a filled figure stays complete. */
.location-landing .location-steps__num {
	display: block;
	margin: 0 0 16px;
	font-size: 40px;
	font-weight: 600;
	line-height: 1;
	color: #C5CED6;
	pointer-events: none;
	user-select: none;
}

.location-landing .location-steps__card--payoff .location-steps__num {
	color: var(--theme-color, #CF1118);
}

.location-landing .location-steps__icon {
	display: none;
}

.location-landing .location-steps__name {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}

.location-landing .location-steps__copy {
	margin: 0 0 22px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--lst-muted);
}

/* margin-top:auto puts every note on the same baseline across the
   row however long the copy above runs. These lines are doing the
   real work here, so they don't read as body text. */
.location-landing .location-steps__note {
	margin: auto 0 0;
	/* Two-line floor: with margin-top:auto alone a longer note
	   bottom-aligns and drags its hairline up, so the three rules
	   sit at different heights. Reserving two lines keeps both the
	   rule and the last line level across the row. */
	min-height: calc(3em + 17px);
	padding-top: 16px;
	border-top: 1px solid var(--lst-rule);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--theme-color, #CF1118);
}

.location-landing .location-steps__note span {
	font-weight: 600;
}

.location-landing .location-steps__caption {
	max-width: 70ch;
	margin: 34px auto 0;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
	text-wrap: balance;
	color: var(--lst-muted);
}


@media screen and (max-width: 991.98px) {

	.location-landing .location-steps {
		padding: 56px 0;
	}

	.location-landing .location-steps__grid {
		margin-top: 52px;
	}
}

@media screen and (max-width: 767.98px) {

	.location-landing .location-steps__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	/* Stacked cards align nothing, so the two-line floor would only
	   leave dead space under the shorter notes. */
	.location-landing .location-steps__note {
		min-height: 0;
	}
}


/* -------------------------------------------------------------
   7. PACKAGES
   Pricing table: lifted cards, featured plan badge, equal-height
   CTAs. The ladder (each plan includes the one before) stays.
   ------------------------------------------------------------- */

.location-landing .location-packages {
	--lpk-ink: #171B21;
	--lpk-muted: #55606D;
	--lpk-rule: #E2E6EB;
	--lpk-red: #CF1118;

	padding: 100px 0 92px;
	color: var(--lpk-ink);
}

.location-landing .location-packages__title {
	max-width: 24ch;
	margin: 0 auto 14px;
	font-size: clamp(28px, 2.8vw, 38px);
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
}

.location-landing .location-packages__subhead {
	max-width: 44ch;
	margin: 0 auto;
	font-size: 17px;
	text-align: center;
	text-wrap: balance;
	color: var(--lpk-muted);
}

.location-landing .location-packages__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 22px;
	margin-top: 56px;
}

.location-landing .location-packages__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px 28px 28px;
	border: 1px solid #E5E8ED;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(17, 24, 39, .05);
	transition: transform .22s ease, box-shadow .22s ease;
}

.location-landing .location-packages__card:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 40px rgba(17, 24, 39, .1);
}

.location-landing .location-packages__card--emphasis {
	border: 1.5px solid var(--lpk-red);
	background: #fff;
	box-shadow: 0 16px 44px rgba(207, 17, 24, .14);
	padding-top: 42px;
}

.location-landing .location-packages__card--emphasis:hover {
	box-shadow: 0 22px 50px rgba(207, 17, 24, .18);
}

.location-landing .location-packages__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--lpk-red);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---- Head ---- */

.location-landing .location-packages__name {
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--lpk-muted);
}

/* The fast-scan line — nobody reads three bullet lists to work
   out the difference between the packages. */
.location-landing .location-packages__desc {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
}

/* Price is the largest type in the card. "From" sits on the same
   baseline as the figure, not above it. */
.location-landing .location-packages__price {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin: 0;
}

.location-landing .location-packages__from {
	font-size: 14px;
	font-weight: 500;
	color: var(--lpk-muted);
}

.location-landing .location-packages__amount {
	font-size: 42px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.location-landing .location-packages__rule {
	width: 100%;
	height: 0;
	margin: 24px 0 20px;
	border: 0;
	border-top: 1px solid var(--lpk-rule);
	opacity: 1;
}

/* The line that makes the ladder legible, so it reads apart from
   the bullets rather than as the first of them. */
.location-landing .location-packages__inherit {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--lpk-muted);
}

/* Checkmark bullets — one included feature per line. */
.location-landing .location-packages__list {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.location-landing .location-packages__list li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 30px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--lpk-muted);
}

.location-landing .location-packages__list li::before {
	content: "\f00c";
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 20px;
	height: 20px;
	border: 1.5px solid #CF1118;
	border-radius: 50%;
	color: #CF1118;
	background: transparent;
	font-size: 10px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.location-landing .location-packages__list li:last-child {
	margin-bottom: 0;
}

/* Pinned to the floor of the card. Cards stretch to equal height,
   so all three buttons land on one line whatever the list length. */
.location-landing .location-packages__cta {
	display: block;
	margin-top: auto;
	padding: 15px 18px;
	border: 1.5px solid var(--lpk-ink);
	border-radius: 10px;
	background: transparent;
	color: var(--lpk-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.location-landing .location-packages__cta:hover,
.location-landing .location-packages__cta:focus-visible {
	background: var(--lpk-ink);
	color: #fff;
}

.location-landing .location-packages__cta--solid {
	border-color: var(--theme-color, #CF1118);
	background: var(--theme-color, #CF1118);
	color: #fff;
}

.location-landing .location-packages__cta--solid:hover,
.location-landing .location-packages__cta--solid:focus-visible {
	border-color: #121212;
	background: #121212;
	color: #fff;
}

.location-landing .location-packages__caption {
	max-width: 70ch;
	margin: 36px auto 0;
	font-size: 14px;
	line-height: 1.65;
	text-align: center;
	text-wrap: balance;
	color: var(--lpk-muted);
}


@media screen and (max-width: 991.98px) {

	.location-landing .location-packages {
		padding: 64px 0;
	}

	.location-landing .location-packages__grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 460px;
		margin-left: auto;
		margin-right: auto;
	}
}


/* -------------------------------------------------------------
   8. RECENT WORK
   City-scoped gallery: title in the content column, carousel
   full-bleed edge to edge under it.
   ------------------------------------------------------------- */

.location-landing .location-recent {
	--lrc-ink: #171B21;

	padding: 88px 0 72px;
	color: var(--lrc-ink);
}

.location-landing .location-recent__title {
	max-width: 28ch;
	margin: 0 auto;
	font-size: clamp(28px, 2.8vw, 38px);
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
}

.location-landing .location-recent__carousel {
	width: 100vw;
	max-width: 100vw;
	margin-top: 40px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
}

.location-landing .location-recent__carousel > * {
	width: 100%;
	max-width: none;
}

.location-landing .location-recent__carousel img {
	width: 100%;
	height: auto;
	display: block;
}

@media screen and (max-width: 991.98px) {

	.location-landing .location-recent {
		padding: 64px 0 48px;
	}

	.location-landing .location-recent__carousel {
		margin-top: 28px;
	}
}


/* -------------------------------------------------------------
   9. REVIEWS
   Deliberately a different ground from the pricing section above
   — back to back on the same surface, the two read as one long
   block, and the point of this placement is that it answers the
   price. More air than its neighbours: compressed testimonials
   read as filler.

   The widget's own layout is configured in the Trustindex
   dashboard. Nothing here targets its markup, which would break
   on their next widget update.
   ------------------------------------------------------------- */

.location-landing .location-reviews {
	--lrv-ink: #171B21;
	--lrv-muted: #55606D;

	padding: 112px 0;
	color: var(--lrv-ink);
}

.location-landing .location-reviews__title {
	max-width: 24ch;
	margin: 0 auto 18px;
	font-size: clamp(28px, 2.8vw, 38px);
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
}

/* The line people actually read. The widget below is the proof. */
.location-landing .location-reviews__trust {
	max-width: 66ch;
	margin: 0 auto;
	font-size: 16.5px;
	line-height: 1.7;
	text-align: center;
	text-wrap: balance;
	color: var(--lrv-muted);
}

.location-landing .location-reviews__stars {
	margin-right: 4px;
	font-size: 17px;
	color: var(--theme-color, #CF1118);
}

/* Each clause holds together; only the gaps between them break. */
.location-landing .location-reviews__bit {
	white-space: nowrap;
}

.location-landing .location-reviews__sep {
	margin: 0 2px;
	color: #9AA5B1;
}

.location-landing .location-reviews__figure {
	font-weight: 600;
	color: var(--lrv-ink);
	font-variant-numeric: tabular-nums;
}

/* No card around the widget — it renders its own cards, and a card
   around cards is the usual mistake with these embeds. */
.location-landing .location-reviews__widget {
	margin-top: 44px;
}

.location-landing .location-reviews__more {
	margin: 36px 0 0;
	text-align: center;
}

.location-landing .location-reviews__btn {
	display: inline-block;
	padding: 15px 28px;
	border: 1.5px solid var(--theme-color, #CF1118);
	border-radius: 10px;
	background: var(--theme-color, #CF1118);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.location-landing .location-reviews__btn:hover,
.location-landing .location-reviews__btn:focus-visible {
	border-color: #121212;
	background: #121212;
	color: #fff;
}

.location-landing .location-reviews__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


@media screen and (max-width: 991.98px) {

	.location-landing .location-reviews {
		padding: 68px 0;
	}

	.location-landing .location-reviews__widget {
		margin-top: 34px;
	}
}


/* -------------------------------------------------------------
   9. CITY FAQ
   The accordion itself is the theme's — .faq-sec in style.css
   supplies the item borders, button colours and spacing, and
   bootstrap.min.js in footer.php drives the collapse. Nothing
   below restyles it; these rules only place the section, cap the
   answer measure, and raise the tap target.
   ------------------------------------------------------------- */

.location-landing .location-faq {
	--lfq-ink: #171B21;

	padding: 92px 0;
	color: var(--lfq-ink);
}

.location-landing .location-faq > .container {
	display: grid;
	grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr);
	column-gap: 64px;
	row-gap: 28px;
	align-items: start;
}

.location-landing .location-faq__title {
	max-width: 14ch;
	margin: 0;
	padding-top: 36px;
	font-size: clamp(28px, 2.8vw, 38px);
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
}

.location-landing .location-faq__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin-top: 18px;
	background: var(--theme-color, #CF1118);
}

/* No card — the accordion's own dividers are the structure. */
.location-landing .location-faq__inner {
	max-width: none;
	min-width: 0;
}

/* The theme sets .faq-sec .accordion-button { padding: 4px 0 }, which
   leaves the row well under a comfortable tap target. This raises the
   height without touching any of its other styling. */
.location-landing .location-faq .accordion-button {
	min-height: 48px;
	align-items: center;
	font-family: var(--font-headline);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
}

/* Drop the white accordion fill so rows sit on the section ground. */
.location-landing .location-faq .accordion-item,
.location-landing .location-faq .accordion-button,
.location-landing .location-faq .accordion-button:not(.collapsed),
.location-landing .location-faq .accordion-button:focus,
.location-landing .location-faq .accordion-body {
	background-color: transparent;
	background: transparent;
	box-shadow: none;
}

/* Long single-line answers are hard to read, and this section carries
   real copy even when the accordion runs wide. */
.location-landing .location-faq .accordion-body {
	max-width: 65ch;
}

.location-landing .location-faq .accordion-body p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.7;
	color: #55606D;
}

.location-landing .location-faq .accordion-body p:last-child {
	margin-bottom: 0;
}


@media screen and (max-width: 991.98px) {

	.location-landing .location-faq {
		padding: 56px 0;
	}

	.location-landing .location-faq > .container {
		grid-template-columns: 1fr;
	}

	.location-landing .location-faq__title {
		max-width: 26ch;
		margin-bottom: 8px;
		padding-top: 0;
	}

	.location-landing .location-faq .accordion-button {
		font-size: 16px;
	}
}


/* -------------------------------------------------------------
   10. BOOKING
   The terminal block, so it takes the strongest contrast on the
   page — a dark ground rather than another tint. No card around
   the form: the section already is the container.
   ------------------------------------------------------------- */

.location-landing > .location-book {
	--lbk-ground: #14181D;
	--lbk-ink: #FFFFFF;
	--lbk-muted: #A6B0BC;
	--lbk-line: #2A313A;

	position: relative;
	overflow: visible;
	padding: 96px 0;
	background: var(--lbk-ground);
	color: var(--lbk-ink);
}

.location-landing .location-book__title {
	margin: 0 0 12px;
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 600;
	line-height: 1.12;
	text-wrap: balance;
}

.location-landing .location-book__subhead {
	max-width: 34ch;
	margin: 0 0 28px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--lbk-muted);
}

/* Reassurance left, form right. */
.location-landing .location-book__grid {
	display: grid;
	grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
	gap: 56px;
	align-items: start;
}

/* ---- Aside ---- */

.location-landing .location-book__aside {
	position: sticky;
	top: calc(var(--ll-sticky-top, 132px) + 40px);
	align-self: start;
}

.location-landing .location-book__label {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--lbk-muted);
}

.location-landing .location-book__phone {
	margin: 0 0 30px;
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 600;
	line-height: 1.1;
}

.location-landing .location-book__phone a {
	color: var(--lbk-ink);
	text-decoration: none;
}

.location-landing .location-book__phone a:hover,
.location-landing .location-book__phone a:focus-visible {
	color: var(--theme-color, #CF1118);
}

/* Two spans rather than a <br>: responsive.css line 154 sets
   p br { display: none } below 1192px site-wide, which would
   collapse these onto one line on every phone. */
.location-landing .location-book__hours {
	margin: 0 0 30px;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--lbk-ink);
}

.location-landing .location-book__hours span {
	display: block;
}

.location-landing .location-book__points {
	margin: 0;
	padding: 26px 0 0;
	list-style: none;
	border-top: 1px solid var(--lbk-line);
}

.location-landing .location-book__points li {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--lbk-muted);
}

.location-landing .location-book__points li:last-child {
	margin-bottom: 0;
}

.location-landing .location-book__points span {
	margin-right: 8px;
	font-weight: 600;
	color: var(--theme-color, #CF1118);
}

/* ---- Form ---- */

.location-landing .location-book__alert {
	margin: 0 0 22px;
	padding: 14px 18px;
	border-left: 3px solid var(--theme-color, #CF1118);
	background: rgba(207, 17, 24, .12);
	font-size: 15px;
	line-height: 1.5;
}

.location-landing .location-book__row--pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.location-landing .location-book__field {
	margin: 0 0 18px;
}

/* Labels are always visible — placeholder-only labels vanish on
   focus and people forget what they were filling in. */
.location-landing .location-book__field label {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--lbk-ink);
}

.location-landing .location-book__req {
	color: var(--theme-color, #CF1118);
}

.location-landing .location-book__field input,
.location-landing .location-book__field select,
.location-landing .location-book__field textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: #fff;
	color: #14181D;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
}

.location-landing .location-book__field textarea {
	min-height: 96px;
	resize: vertical;
}

.location-landing .location-book__field input:focus,
.location-landing .location-book__field select:focus,
.location-landing .location-book__field textarea:focus {
	outline: 2px solid var(--theme-color, #CF1118);
	outline-offset: 2px;
	border-color: transparent;
}

.location-landing .location-book__field input::placeholder,
.location-landing .location-book__field textarea::placeholder {
	color: #8B949F;
}

/* Honeypot — off-screen rather than display:none, which some bots
   check for. */
.location-landing .location-book__pot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.location-landing .location-book__submit {
	display: block;
	width: 100%;
	min-height: 54px;
	margin-top: 6px;
	padding: 15px 24px;
	border: 0;
	border-radius: 4px;
	background: var(--theme-color, #CF1118);
	color: #fff;
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.location-landing .location-book__submit:hover,
.location-landing .location-book__submit:focus-visible {
	background: #fff;
	color: #14181D;
}

.location-landing .location-book__smallprint,
.location-landing .location-book .wpforms-recaptcha-disclaimer {
	margin: 14px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--lbk-muted);
	text-align: center;
}

.location-landing .location-book .wpforms-recaptcha-disclaimer {
	margin-top: 8px;
	font-size: 12px;
}

/* Booking form panel chrome — form fields use sitewide gravity-forms.css */
.location-landing .location-book__formwrap {
	position: relative;
}

.location-landing .location-book .gform_wrapper textarea,
.location-landing .location-book #input_1_11 {
	height: 80px;
	min-height: 80px;
	resize: vertical;
}


@media screen and (max-width: 991.98px) {

	.location-landing .location-book {
		padding: 60px 0;
	}

	.location-landing .location-book__subhead {
		margin-bottom: 24px;
	}

	/* Phone above the form: most people on a service page like this
	   will call rather than type. */
	.location-landing .location-book__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 38px;
	}

	.location-landing .location-book__aside {
		position: static;
		top: auto;
	}
}

@media screen and (max-width: 567.98px) {

	.location-landing .location-book__row--pair {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}


/* -------------------------------------------------------------
   11. NEARBY AREAS
   A strip, not a section: it sits between the near-black CTA
   (#14181D) and the theme footer (#000), on a lighter tone than
   either so it reads as the page tapering off rather than as the
   top of the footer. Roughly a third of the vertical padding used
   elsewhere.
   ------------------------------------------------------------- */

.location-landing > .location-nearby {
	--lnb-ink: #E7ECF2;
	--lnb-muted: #8D97A3;

	padding: 30px 0 34px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	background: #20272F;
	color: var(--lnb-ink);
}

/* An eyebrow, not a section heading — this block is a footnote. */
.location-landing .location-nearby__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--lnb-muted);
}

.location-landing .location-nearby__lede {
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--lnb-ink);
}

/* One wrapping row. Not a stacked list and not a grid — a wrapped
   row stays a strip, a stacked list becomes a menu. */
.location-landing .location-nearby__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.location-landing .location-nearby__item {
	position: relative;
	margin: 0;
}

/* Thin rule between links, sitting in the gap. Trailing rather than
   leading: when the row wraps, a rule left at the end of a line
   reads as "continues", while one at the start of the next line
   reads as a rendering bug. */
.location-landing .location-nearby__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -13px;
	width: 1px;
	height: 14px;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .2);
}

/* No pills, no boxes — a row of tags is the pattern this section
   exists to avoid. Padding here is for the tap target only. */
.location-landing .location-nearby__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 0;
	font-size: 16px;
	color: var(--lnb-ink);
	text-decoration: none;
}

.location-landing .location-nearby__link:hover .location-nearby__name,
.location-landing .location-nearby__link:focus-visible .location-nearby__name {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--theme-color, #CF1118);
}

/* Drive time stays attached to the name — it's what makes the row
   useful to a person rather than only a crawl path. */
/* The link is inline-flex, so its children are flex items and any
   leading whitespace in the markup is stripped — the gap before the
   middot has to come from CSS. */
.location-landing .location-nearby__time {
	margin-left: 5px;
	font-size: 14px;
	color: var(--lnb-muted);
	white-space: nowrap;
}

/* A different kind of link, so it looks like one. Separated by
   space rather than a rule. */
.location-landing .location-nearby__all {
	margin: 14px 0 0;
	font-size: 15.5px;
}

.location-landing .location-nearby__all a {
	font-weight: 600;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--theme-color, #CF1118);
}

.location-landing .location-nearby__all a:hover,
.location-landing .location-nearby__all a:focus-visible {
	text-decoration-thickness: 2px;
}


@media screen and (max-width: 767.98px) {

	.location-landing .location-nearby {
		padding: 24px 0 28px;
	}

	.location-landing .location-nearby__row {
		gap: 0 22px;
	}

	.location-landing .location-nearby__item:not(:last-child)::after {
		right: -11px;
	}
}


/* -------------------------------------------------------------
   12. LOCATION ARCHIVE
   Every city as a button. Reuses the theme's .btn1 so the
   archive matches the rest of the site without a second
   button language.
   ------------------------------------------------------------- */

.location-archive .location-archive__hero {
	padding: 72px 0 56px;
	color: #fff;
	background: linear-gradient(
		135deg,
		#E2181F 0%,
		var(--theme-color, #CF1118) 45%,
		#A50D13 100%
	);
}

.location-archive .location-archive__eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

.location-archive .location-archive__title {
	margin: 0 0 18px;
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 600;
	line-height: 1.04;
	text-transform: uppercase;
	text-wrap: balance;
}

.location-archive .location-archive__lede {
	max-width: 42ch;
	margin: 0;
	font-size: clamp(17px, 1.5vw, 20px);
	font-weight: 500;
	line-height: 1.45;
	color: rgba(255, 255, 255, .94);
}

.location-archive .location-archive__list {
	padding: 56px 0 80px;
	background: var(--ll-bg-b, #F5F7F9);
}

.location-archive .location-archive__buttons {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

@media screen and (min-width: 768px) {

	.location-archive .location-archive__buttons {
		grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
	}
}

.location-archive .location-archive__buttons .btn1 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	padding-inline: 16px;
	font-weight: 600;
	line-height: 1.25;
	white-space: normal;
}

.location-archive .location-archive__buttons .btn1:hover,
.location-archive .location-archive__buttons .btn1:focus-visible {
	background: #121212;
	color: #fff;
}

.location-archive .location-archive__empty {
	margin: 0;
	font-size: 18px;
	color: #5a6168;
}

@media screen and (max-width: 767.98px) {

	.location-archive .location-archive__hero {
		padding: 48px 0 40px;
	}

	.location-archive .location-archive__list {
		padding: 36px 0 56px;
	}
}


/* -------------------------------------------------------------
   13. NEXT SECTION
   (add here as the template grows)
   ------------------------------------------------------------- */