/**
 * Location page layer.
 *
 * Loaded only on pages using the Location Page template (see inc/enqueue.php), after
 * srp.css, and additive to it: the eyebrow/heading/body trio, the button styles, the FAQ
 * accordion and the section wrapper all come from there unchanged. What lives here is the
 * arrangements that only the location concept uses - the hero with the form beside it, the
 * sticky process column, the Google Business Profile card, the map panel and the sticky
 * consultation bar.
 *
 * Colours are read from the section theme variables (--section-fg, --section-body,
 * --section-accent) wherever a block could sit on either a light or dark section, so moving a
 * section's background in the builder does not leave unreadable text behind.
 */

/* ================================================================ page chrome */

/*
 * The sticky consultation bar is fixed to the bottom of the viewport, so the page needs room
 * underneath it or it covers the last line of the footer. The clearance sits on the footer
 * itself rather than on the copyright row, so it stays below the disclaimers instead of
 * opening a gap between them and the copyright line.
 */
.srp-location .srp-footer {
	padding-bottom: 6rem;
}

.srp-location .srp-footer__bottom {
	padding-bottom: 0;
}

/*
 * Below the tablet breakpoint the bar's buttons stretch and their labels wrap, so it grows
 * from 70px to about 88px. Give the footer more room there so the disclaimers stay clear.
 */
@media (max-width: 61.25rem) {
	.srp-location .srp-footer {
		padding-bottom: 8.5rem;
	}
}

/*
 * The floating call button lives in the same corner. On a location page the sticky bar
 * already carries a phone link, so the button would be a second overlapping target.
 */
.srp-location .srp-call-button {
	display: none;
}

/* One more button treatment: a bordered light button, used on the GBP card. */
.srp-button--outline {
	background: transparent;
	border-color: var(--srp-border-strong);
	border-width: 1.5px;
	color: var(--srp-text-heading);
	box-shadow: none;
}

.srp-button--outline:hover,
.srp-button--outline:focus-visible {
	border-color: var(--srp-accent);
	color: var(--srp-accent);
}

/* ================================================================ hero + lead form */

.hs-section--srp-loc-hero {
	padding-block: 4.5rem 5rem; /* 72 / 80 */
	position: relative;
}

.srp-loc-hero {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 3.5rem;
	align-items: center;
}

.srp-loc-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5625rem;
	margin: 0 0 1.625rem;
	padding: 0.5rem 0.9375rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--srp-radius-pill);
	background: rgba(255, 255, 255, 0.1);
	font-size: var(--srp-text-tiny);
	font-weight: var(--srp-weight-bold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--srp-accent-300);
}

.srp-loc-hero__badge svg {
	flex: none;
	color: var(--srp-accent-300);
}

/*
 * 64px at the top end - a step above the homepage h1, because a location page has no
 * competing headline above it.
 */
.srp-loc-hero__title {
	margin: 0 0 1.25rem;
	font-family: var(--srp-font-display);
	font-weight: var(--srp-weight-semibold);
	font-size: clamp(2.375rem, 1.4rem + 3.6vw, 4rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: var(--srp-white);
	text-wrap: pretty;
}

.srp-loc-hero__body {
	max-width: 32.5rem; /* 520px */
	margin: 0 0 1.875rem;
	font-size: var(--srp-text-body-lg);
	line-height: 1.6;
	color: var(--srp-text-on-dark-body);
	text-wrap: pretty;
}

.srp-loc-hero__points {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	margin: 0 0 2.125rem;
	padding: 0;
	list-style: none;
}

.srp-loc-hero__points li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 1rem;
	color: var(--srp-text-on-dark-body-strong);
}

.srp-loc-hero__points svg {
	flex: none;
	margin-top: 0.125rem;
	color: var(--srp-accent);
}

.srp-loc-hero__proof {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-top: 1.625rem;
	border-top: 1px solid var(--srp-border-dark-muted);
}

.srp-loc-hero__proof-rating {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.srp-loc-hero__proof-rating p,
.srp-loc-hero__proof-stats {
	margin: 0;
	font-size: 0.84375rem; /* 13.5px */
	color: var(--srp-text-on-dark-body);
}

.srp-loc-hero__proof-rule {
	flex: none;
	width: 1px;
	height: 2.375rem;
	background: var(--srp-border-dark-muted);
}

/* ---- the photograph and the panel that overlaps it ---- */

.srp-loc-hero__aside {
	position: relative;
}

.srp-loc-hero__image {
	display: block;
	width: 100%;
	height: 21.25rem; /* 340px */
	object-fit: cover;
	border-radius: var(--srp-radius-2xl);
	box-shadow: var(--srp-shadow-image-xl);
	/*
	 * The negative margin is what pulls the form panel up over the image. It has to affect
	 * layout, which is why the image is a sibling of the panel rather than a background.
	 */
	margin-bottom: -3.25rem;
}

.srp-loc-hero__panel {
	position: relative;
	border-radius: var(--srp-radius-2xl);
	background: var(--srp-white);
	padding: 1.875rem;
	box-shadow: var(--srp-shadow-image-xl);
}

/*
 * Gravity's two-up rows. The form sets a 12-column grid and the First/Last and Phone/ZIP
 * fields span 6 each; this only has to supply the gap the concept uses.
 */
.srp-loc-hero__panel .gform_fields {
	row-gap: 0.875rem;
	column-gap: 0.875rem;
}

/* ================================================================ trust strip */

.hs-section--srp-loc-trust {
	padding-block: 2.125rem; /* 34px */
}

.srp-loc-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.srp-loc-trust[data-count='3'] {
	grid-template-columns: repeat(3, 1fr);
}

.srp-loc-trust__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.srp-loc-trust__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: var(--srp-radius-sm);
	background: rgba(63, 161, 234, 0.14);
	color: var(--srp-accent);
}

.srp-loc-trust__text {
	font-size: 0.9375rem;
	color: var(--srp-text-on-dark-body-strong);
}

.srp-loc-trust__text strong {
	color: var(--srp-white);
	font-weight: var(--srp-weight-bold);
}

/* ================================================================ heading row with a link */

.srp-loc-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2.5rem;
	margin-bottom: 2.75rem;
}

.srp-loc-head .srp-intro {
	max-width: 40rem; /* 640px */
}

.srp-loc-head .srp-intro .hs-section__heading {
	margin-bottom: 0;
	font-size: var(--srp-text-h2-lg);
}

.srp-loc-head__link {
	flex: none;
	padding-bottom: 0.375rem;
	font-size: 0.96875rem;
}

/* ================================================================ service cards */

.srp-loc-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.srp-loc-cards[data-count='2'] {
	grid-template-columns: repeat(2, 1fr);
}

.srp-loc-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--srp-border);
	border-radius: var(--srp-radius-xl);
	background: var(--srp-white);
	box-shadow: var(--srp-shadow-card);
	transition: box-shadow var(--srp-duration-fast) var(--srp-ease),
		transform var(--srp-duration-fast) var(--srp-ease);
}

.srp-loc-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--srp-shadow-card-hover);
}

.srp-loc-card__media {
	overflow: hidden;
}

.srp-loc-card__image {
	display: block;
	width: 100%;
	height: 13.875rem; /* 222px */
	object-fit: cover;
}

.srp-loc-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.75rem;
}

.srp-loc-card__title {
	margin: 0 0 0.625rem;
	font-family: var(--srp-font-display);
	font-weight: var(--srp-weight-semibold);
	font-size: var(--srp-text-h3);
	line-height: 1.2;
	color: var(--srp-text-heading);
}

.srp-loc-card__text {
	margin: 0 0 1rem;
	font-size: var(--srp-text-body);
	line-height: 1.65;
	color: var(--srp-text-body);
}

/* Timing and price. Pushed to the bottom so the line-up holds when copy lengths differ. */
.srp-loc-card__meta {
	margin: auto 0 0;
	font-size: 0.84375rem;
	font-weight: var(--srp-weight-bold);
	color: var(--srp-accent);
}

/* ================================================================ two-column splits */

.srp-loc-split {
	display: grid;
	gap: 4rem;
}

.srp-loc-split--process {
	grid-template-columns: 0.85fr 1.15fr;
}

.srp-loc-split--why {
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.srp-loc-split--faq {
	grid-template-columns: 0.75fr 1.25fr;
	gap: 3.5rem;
}

/*
 * The intro column follows the reader down past the steps, keeping its CTA on screen.
 * align-self is required: a stretched grid item has no room to move.
 */
.srp-loc-sticky {
	position: sticky;
	top: calc(var(--srp-header-h) + 1.5rem);
	align-self: start;
}

.srp-loc-split--process .srp-intro .hs-section__heading,
.srp-loc-split--why .srp-intro .hs-section__heading {
	font-size: var(--srp-text-h2-lg);
}

.srp-loc-split--process .srp-intro {
	margin-bottom: 1.625rem;
}

/* Bordered top and bottom in the concept, so the light band reads as a distinct panel. */
.hs-section--srp-loc-process,
.hs-section--srp-loc-faq {
	border-top: 1px solid var(--srp-border);
	border-bottom: 1px solid var(--srp-border);
}

/* ---- numbered steps ---- */

.srp-loc-steps {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.srp-loc-step {
	display: grid;
	grid-template-columns: 4.875rem 1fr; /* 78px */
	gap: 1.375rem;
	align-items: start;
	padding: 1.75rem 1.875rem;
	border: 1px solid var(--srp-border);
	border-radius: var(--srp-radius-xl);
	background: var(--srp-white);
	box-shadow: var(--srp-shadow-card);
}

.srp-loc-step__num {
	margin: 0;
	font-family: var(--srp-font-display);
	font-weight: var(--srp-weight-bold);
	font-size: 2.875rem; /* 46px */
	line-height: 1;
	color: var(--srp-accent);
}

.srp-loc-step__title {
	margin: 0 0 0.5rem;
	font-family: var(--srp-font-display);
	font-weight: var(--srp-weight-semibold);
	font-size: var(--srp-text-h4);
	color: var(--srp-text-heading);
}

.srp-loc-step__text {
	margin: 0;
	font-size: 0.96875rem;
	line-height: 1.65;
	color: var(--srp-text-body);
}

/* ---- image with an overhanging statistic ---- */

.srp-loc-figure {
	position: relative;
	/* Room for the stat card, which sits outside the image's left edge. */
	padding-left: 1.5rem;
}

.srp-loc-figure__image {
	display: block;
	width: 100%;
	height: 32.5rem; /* 520px */
	object-fit: cover;
	object-position: 78% 50%;
	border-radius: var(--srp-radius-2xl);
	box-shadow: var(--srp-shadow-image-lg);
}

.srp-loc-figure__stat {
	position: absolute;
	left: 0;
	bottom: 2.125rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--srp-border);
	border-radius: var(--srp-radius-lg);
	background: var(--srp-white);
	box-shadow: var(--srp-shadow-image-lg);
}

.srp-loc-figure__stat-value {
	margin: 0;
	font-family: var(--srp-font-display);
	font-weight: var(--srp-weight-bold);
	font-size: 2.125rem; /* 34px */
	line-height: 1;
	color: var(--srp-accent);
}

.srp-loc-figure__stat-label {
	margin: 0.25rem 0 0;
	font-size: 0.84375rem;
	font-weight: var(--srp-weight-semibold);
	line-height: 1.35;
	color: var(--srp-text-muted);
}

/* ---- icon + text feature list ---- */

.srp-loc-features {
	display: flex;
	flex-direction: column;
	gap: 1.375rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.srp-loc-feature {
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	gap: 1.125rem;
	align-items: start;
}

.srp-loc-feature__icon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--srp-radius-lg);
	background: var(--srp-accent-tint);
	color: var(--srp-accent);
}

.srp-loc-feature__title {
	margin: 0 0 0.375rem;
	font-family: var(--srp-font-display);
	font-weight: var(--srp-weight-semibold);
	font-size: var(--srp-text-h4);
	color: var(--section-fg, var(--srp-text-heading));
}

.srp-loc-feature__text {
	margin: 0;
	font-size: 0.96875rem;
	line-height: 1.65;
	color: var(--section-body, var(--srp-text-body));
}

/* ================================================================ reviews */

.srp-loc-reviews__head {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 3.5rem;
	align-items: center;
	margin-bottom: 2.75rem;
}

.srp-loc-reviews__head--solo {
	grid-template-columns: 1fr;
}

.srp-loc-reviews__head .srp-intro .hs-section__heading {
	font-size: var(--srp-text-h2-lg);
}

/* ---- the Google Business Profile summary card ---- */

.srp-gbp {
	display: grid;
	grid-template-columns: auto 1px 1fr;
	gap: 1.75rem;
	align-items: center;
	padding: 1.75rem 1.875rem;
	border-radius: var(--srp-radius-2xl);
	background: var(--srp-white);
	box-shadow: var(--srp-shadow-image-xl);
}

.srp-gbp__score {
	text-align: center;
}

.srp-gbp__score-value {
	margin: 0;
	font-family: var(--srp-font-display);
	font-weight: var(--srp-weight-bold);
	font-size: 3.875rem; /* 62px */
	line-height: 1;
	color: var(--srp-text-heading);
}

.srp-gbp__score-stars {
	display: flex;
	justify-content: center;
	margin: 0.5rem 0 0.375rem;
}

.srp-gbp__score-count {
	margin: 0;
	font-size: 0.78125rem;
	color: var(--srp-text-faint);
	white-space: nowrap;
}

.srp-gbp__rule {
	width: 1px;
	/* A centred grid item has no height to fill, so it has to be told to stretch. */
	align-self: stretch;
	background: var(--srp-border);
}

.srp-gbp__name {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 0 0 0.625rem;
	font-family: var(--srp-font-display);
	font-weight: var(--srp-weight-bold);
	font-size: 1.25rem;
	color: var(--srp-text-heading);
}

.srp-gbp__badge {
	padding: 0.3125rem 0.5625rem;
	border-radius: var(--srp-radius-pill);
	background: var(--srp-accent-tint);
	font-family: var(--srp-font-body);
	font-size: 0.65625rem;
	font-weight: var(--srp-weight-black);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--srp-accent);
}

.srp-gbp__meta {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--srp-text-muted);
}

.srp-gbp__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.srp-gbp__action {
	padding: 0.6875rem 1.125rem;
	font-size: 0.90625rem;
	box-shadow: none;
}

/* ---- individual reviews ---- */

/* Now a slider track - see the .srp-slider block in srp.css. */
.srp-loc-quotes {
	--srp-slider-per: 3;
	--srp-slider-gap: 1.25rem;
}

.srp-quote {
	display: flex;
	flex-direction: column;
	padding: 1.625rem;
	border: 1px solid var(--srp-border-dark);
	border-radius: var(--srp-radius-xl);
	background: var(--srp-surface-dark-card);
}

.srp-quote__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.875rem;
}

.srp-quote__when {
	font-size: var(--srp-text-tiny);
	color: var(--srp-gray-500);
	white-space: nowrap;
}

.srp-quote__text {
	margin: 0 0 1.25rem;
	font-size: 0.96875rem;
	line-height: 1.7;
	color: var(--srp-text-on-dark-body-strong);
	text-wrap: pretty;
}

.srp-quote__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--srp-border-dark);
}

.srp-quote__avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.375rem;
	height: 2.375rem;
	border-radius: 50%;
	background: var(--srp-accent);
	font-size: 0.9375rem;
	font-weight: var(--srp-weight-black);
	color: var(--srp-white);
}

.srp-quote__name,
.srp-quote__city {
	display: block;
}

.srp-quote__name {
	font-size: 0.90625rem;
	font-weight: var(--srp-weight-bold);
	color: var(--srp-white);
}

.srp-quote__city {
	font-size: 0.78125rem;
	color: var(--srp-gray-500);
}

/* ================================================================ service area + map */

/*
 * In the concept the map panel is the closing block of the reviews section. Kept as its own
 * section so it can be reordered, with the seam collapsed when the two are adjacent - both
 * sit on the same near-black background, so they read as one block.
 */
.hs-section--srp-loc-reviews + .hs-section--srp-loc-map {
	padding-top: 0;
}

.srp-loc-area {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	overflow: hidden;
	border: 1px solid var(--srp-border-dark);
	border-radius: var(--srp-radius-2xl);
	background: var(--srp-surface-dark-card);
}

.srp-loc-area__content {
	padding: 2.25rem 2.375rem;
}

.srp-loc-area__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 0.875rem;
	font-size: var(--srp-text-tiny);
	font-weight: var(--srp-weight-black);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--srp-accent-300);
}

.srp-loc-area__eyebrow svg {
	flex: none;
	color: var(--srp-accent);
}

.srp-loc-area__title {
	margin: 0 0 0.875rem;
	font-family: var(--srp-font-display);
	font-weight: var(--srp-weight-semibold);
	font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
	line-height: 1.14;
	color: var(--srp-white);
	text-wrap: pretty;
}

.srp-loc-area__body {
	margin: 0 0 1.375rem;
	font-size: 0.96875rem;
	line-height: 1.65;
	color: var(--srp-text-on-dark-body);
}

.srp-loc-area__cta {
	padding: 0.9375rem 1.625rem;
}

.srp-loc-area__map {
	min-height: 21.25rem;
}

.srp-loc-area__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 21.25rem;
	border: 0;
}

/* ================================================================ closing CTA */

.hs-section--srp-loc-cta {
	position: relative;
	overflow: hidden;
}

.srp-loc-cta__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.srp-loc-cta__bg-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.28;
}

.srp-loc-cta__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(56.25rem 26.25rem at 50% 0%, rgba(63, 161, 234, 0.3), transparent 70%),
		linear-gradient(180deg, rgba(17, 20, 24, 0.86), rgba(17, 20, 24, 0.96));
}

/* The wrapper's container is 1240px; this block is narrower and centred inside it. */
.srp-loc-cta {
	position: relative;
	z-index: 1;
	max-width: var(--srp-container-narrow);
	margin-inline: auto;
	text-align: center;
}

.srp-loc-cta__title {
	margin: 0 0 1.125rem;
	font-family: var(--srp-font-display);
	font-weight: var(--srp-weight-semibold);
	font-size: clamp(2.125rem, 1.4rem + 2.9vw, 3.5rem); /* -> 56px */
	line-height: 1.06;
	color: var(--srp-white);
	text-wrap: pretty;
}

.srp-loc-cta__body {
	max-width: 37.5rem;
	margin: 0 auto 2.125rem;
	font-size: var(--srp-text-body-lg);
	line-height: 1.6;
	color: var(--srp-text-on-dark-body);
}

.srp-loc-cta__buttons {
	justify-content: center;
	gap: 1rem;
}

.srp-loc-cta__buttons .srp-button {
	padding: 1.1875rem 2.125rem;
	font-size: 1.125rem;
}

.srp-loc-cta__note {
	margin: 1.625rem 0 0;
	font-size: 0.84375rem;
	color: var(--srp-gray-500);
}

/* ================================================================ sticky consultation bar */

.srp-sticky-bar {
	position: fixed;
	inset: auto 0 0;
	z-index: 50;
	border-top: 1px solid var(--srp-border-dark);
	background: rgba(17, 20, 24, 0.96);
	backdrop-filter: blur(12px);
}

.srp-sticky-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 0.75rem;
}

.srp-sticky-bar__text {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0;
	font-size: 0.96875rem;
	color: var(--srp-text-on-dark-body-strong);
}

.srp-sticky-bar__text strong {
	color: var(--srp-white);
	font-weight: var(--srp-weight-bold);
}

.srp-sticky-bar__icon {
	flex: none;
	display: inline-grid;
	place-items: center;
	color: var(--srp-accent);
}

.srp-sticky-bar__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.srp-sticky-bar .srp-button {
	padding: 0.75rem 1.5rem;
	font-size: 0.9375rem;
}

/* ================================================================ responsive */

/* ---- 1100px: the widest splits give up their second column first ---- */
@media (max-width: 68.75rem) {
	.srp-loc-hero {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.srp-loc-hero__body {
		max-width: none;
	}

	/*
	 * Stacked, the image no longer sits behind the panel - the overlap only reads as
	 * deliberate when the two are side by side.
	 */
	.srp-loc-hero__image {
		height: 17.5rem;
		margin-bottom: 1.25rem;
	}

	.srp-loc-split--process,
	.srp-loc-split--why,
	.srp-loc-split--faq {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.srp-loc-sticky {
		position: static;
	}

	.srp-loc-figure {
		padding-left: 0;
	}

	.srp-loc-figure__image {
		height: 26rem;
	}

	.srp-loc-figure__stat {
		left: 1.25rem;
		bottom: 1.25rem;
	}

	.srp-loc-reviews__head {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}

	.srp-loc-quotes {
		--srp-slider-per: 2;
	}

	.srp-loc-area {
		grid-template-columns: 1fr;
	}

	.srp-loc-area__map {
		min-height: 17.5rem;
		order: -1;
	}
}

/* ---- 980px: card grids and the trust strip fold to two ---- */
@media (max-width: 61.25rem) {
	.srp-loc-trust,
	.srp-loc-trust[data-count='3'] {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem 1.5rem;
	}

	.srp-loc-cards,
	.srp-loc-cards[data-count='2'] {
		grid-template-columns: repeat(2, 1fr);
	}

	.srp-loc-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}

	.srp-loc-head__link {
		padding-bottom: 0;
	}

	/*
	 * The sticky bar's sentence is the first thing to go: on a narrow screen the two
	 * buttons are the whole point of the bar.
	 */
	.srp-sticky-bar__text {
		display: none;
	}

	.srp-sticky-bar__inner {
		justify-content: stretch;
	}

	.srp-sticky-bar__actions {
		flex: 1 1 auto;
	}

	.srp-sticky-bar__actions .srp-button {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* ---- 640px: single column ---- */
@media (max-width: 40rem) {
	.hs-section--srp-loc-hero {
		padding-block: 2.75rem 3.25rem;
	}

	.srp-loc-hero__panel {
		padding: 1.375rem;
	}

	.srp-loc-trust,
	.srp-loc-trust[data-count='3'] {
		grid-template-columns: 1fr;
	}

	.srp-loc-cards,
	.srp-loc-cards[data-count='2'] {
		grid-template-columns: 1fr;
	}

	.srp-loc-quotes {
		--srp-slider-per: 1;
	}

	.srp-loc-step {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		padding: 1.375rem 1.25rem;
	}

	.srp-loc-step__num {
		font-size: 2.25rem;
	}

	.srp-loc-figure__image {
		height: 20rem;
	}

	.srp-loc-figure__stat {
		position: static;
		margin-top: 1rem;
		box-shadow: var(--srp-shadow-card);
	}

	.srp-loc-feature {
		grid-template-columns: 2.75rem 1fr;
		gap: 0.875rem;
	}

	.srp-loc-feature__icon {
		width: 2.75rem;
		height: 2.75rem;
	}

	/* The vertical rule between the score and the detail has nowhere to go when stacked. */
	.srp-gbp {
		grid-template-columns: 1fr;
		gap: 1.25rem;
		padding: 1.375rem;
	}

	.srp-gbp__rule {
		width: 100%;
		height: 1px;
	}

	.srp-gbp__score {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		text-align: left;
	}

	.srp-gbp__score-stars {
		margin: 0;
	}

	.srp-loc-area__content {
		padding: 1.625rem 1.375rem;
	}

	.srp-loc-cta__buttons .srp-button {
		width: 100%;
		padding-inline: 1.25rem;
	}
}