/* ==========================================================================
   Depot (locations_post) pages
   ==========================================================================

   Loaded only on single locations_post pages, by inc/locations-layout.php.

   WHY A SEPARATE FILE
   acclaim-revamp.css is 160KB and three agents are editing it this session.
   This is a self-contained block of new rules with no overlap into anything
   else, so it goes in its own file and cannot cause a merge conflict.

   HOUSE RULES FOLLOWED
   Square corners everywhere. Accent #f68b1f for fills, #a35200 for orange
   text on a light ground (the raw orange is 2.43:1 and fails AA). Headings
   Ropa Sans, body Poppins, container 1140px. All inherited, not redeclared,
   except where a new component needs them.

   LAYOUT ORDER, which is the point of the redesign
   1  hero image + h1 + lede
   2  contact card, overlapping the hero so it is above the fold      <- contact first
   3  intro prose + stats                                            <- primary
   4  coverage band
   5  services grid
   6  feature bands, image and text alternating
   7  team
   8  map + enquiry form
   9  the other depots
   10 closing CTA
   ========================================================================== */

/* The theme sets body{overflow-x:hidden!important}, which hides a too-wide
   element rather than preventing one. Everything in this block is therefore
   sized so it cannot exceed its column in the first place: border-box on the
   form controls that carry padding, and max-width on the media. */
.acl-depot *,
.acl-depot *::before,
.acl-depot *::after {
	box-sizing: border-box;
}

.acl-depot img,
.acl-depot iframe {
	max-width: 100%;
}

.acl-depot {
	--acl-o: var(--acl-orange, #f68b1f);
	--acl-oi: var(--acl-orange-ink, #a35200);
	--acl-ink: #1d1d1d;
	--acl-muted: #5b5b5b;
	--acl-line: #e4e4e4;
	--acl-wash: #f7f7f7;
}

.acl-depot .acl-depot__wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}

.acl-depot h2,
.acl-depot h3 {
	font-family: "Ropa Sans", sans-serif;
	color: var(--acl-ink);
}

/* :where() so this carries no specificity of its own beyond .acl-depot.
   As a plain `.acl-depot p` it was 0-2-0 and quietly beat every single-class
   paragraph rule in this file: the hero subtext, the hero eyebrow and the
   opening-hours callout were all being painted #5b5b5b, which measured 2.34:1,
   2.79:1 and 2.79:1 against their dark and orange backgrounds. That was the
   whole of the "dark text on a dark background" the owner reported, in three
   places, from one selector. */
.acl-depot :where(p) {
	color: var(--acl-muted);
	line-height: 1.75;
}

.acl-depot__eyebrow {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--acl-oi);
	margin: 0 0 10px;
}

/* --- 1. hero ------------------------------------------------------------- */

.acl-depot-hero {
	position: relative;
	min-height: 460px;
	display: flex;
	align-items: flex-end;
	background: #222 center/cover no-repeat;
	color: #fff;
}

/* The scrim has to work over eight different photographs, some of them bright
   skies over a depot yard. At .55 in the middle, white text over a white sky
   lands at 4.0:1, which is under AA for the 16px subtext. These values keep the
   worst case above 5.9:1 at the subtext and 15:1 at the foot, on any image. */
.acl-depot-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.68) 55%, rgba(0,0,0,.88) 100%);
}

/* The bottom padding has to clear the contact card, which is deliberately
   pulled up over the hero by its negative margin. At 56px against a -64px pull
   the card was landing 8px ON TOP of the intro line, which is what the owner
   saw as cramped: it was not tight spacing, it was an overlap.
   Padding is the card's pull plus 36px of clearance, kept in step at each
   breakpoint below where the pull changes. */
.acl-depot-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1140px;
	margin: 0 auto;
	padding: 70px 20px 100px; /* 64 pull + 36 clear */
	width: 100%;
}

/* White on the raw #f68b1f is 2.4:1 and fails AA, which is the same reason the
   house rules use #a35200 for orange text on light grounds. Here the chip
   itself takes the darker orange so the white on it reaches 6.8:1. */
.acl-depot .acl-depot-hero__eyebrow {
	display: inline-block;
	background: var(--acl-oi);
	color: #fff;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 6px 12px;
	margin: 0 0 16px;
}

.acl-depot-hero h1 {
	font-family: "Ropa Sans", sans-serif;
	color: #fff;
	font-size: clamp(2rem, 5.2vw, 3.4rem);
	line-height: 1.08;
	margin: 0 0 14px;
	max-width: 16em;
	text-shadow: 0 2px 14px rgba(0,0,0,.45);
}

.acl-depot .acl-depot-hero__lede {
	color: #fff;
	font-size: clamp(1rem, 1.9vw, 1.2rem);
	line-height: 1.6;
	max-width: 34em;
	margin: 0;
	text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

/* --- 2. contact card, the whole point of the reorder --------------------- */

.acl-depot-contact {
	background: var(--acl-wash);
	padding: 0 0 48px;
}

.acl-depot-contact__grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 0;
	margin-top: -64px;
	position: relative;
	z-index: 2;
	box-shadow: 0 18px 44px rgba(0,0,0,.13);
}

.acl-depot-contact__main {
	background: #fff;
	padding: 34px 38px;
	border-top: 4px solid var(--acl-o);
}

.acl-depot-contact__aside {
	background: #202020;
	color: #fff;
	padding: 34px 38px;
	border-top: 4px solid #202020;
}

.acl-depot-contact__label {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--acl-oi);
	margin: 0 0 6px;
}

.acl-depot-contact__aside .acl-depot-contact__label {
	color: var(--acl-o);
}

.acl-depot-contact__phone {
	display: inline-block;
	font-family: "Ropa Sans", sans-serif;
	font-size: clamp(1.9rem, 4.4vw, 2.6rem);
	line-height: 1.1;
	font-weight: 700;
	color: var(--acl-ink);
	text-decoration: none;
	margin: 0 0 4px;
}

.acl-depot-contact__phone:hover,
.acl-depot-contact__phone:focus {
	color: var(--acl-oi);
	text-decoration: underline;
}

.acl-depot-contact__note {
	font-size: .92rem;
	color: var(--acl-muted);
	margin: 0 0 22px;
}

.acl-depot-contact__addr {
	font-style: normal;
	line-height: 1.65;
	color: var(--acl-ink);
	margin: 0 0 18px;
}

.acl-depot-contact__addr strong {
	display: block;
	font-weight: 600;
}

.acl-depot-contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.acl-depot-btn {
	display: inline-block;
	padding: 13px 22px;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	border: 2px solid var(--acl-o);
	transition: background .15s ease, color .15s ease;
}

.acl-depot-btn--solid {
	background: var(--acl-o);
	color: #fff;
}

.acl-depot-btn--solid:hover,
.acl-depot-btn--solid:focus {
	background: #000;
	border-color: #000;
	color: #fff;
}

.acl-depot-btn--ghost {
	background: transparent;
	color: var(--acl-oi);
}

.acl-depot-btn--ghost:hover,
.acl-depot-btn--ghost:focus {
	background: var(--acl-o);
	color: #fff;
}

.acl-depot-contact__aside .acl-depot-btn--ghost {
	color: #fff;
	border-color: #fff;
}

.acl-depot-contact__aside .acl-depot-btn--ghost:hover,
.acl-depot-contact__aside .acl-depot-btn--ghost:focus {
	background: #fff;
	color: var(--acl-ink);
}

.acl-depot-hours {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.acl-depot-hours li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px solid rgba(255,255,255,.14);
	font-size: .95rem;
}

.acl-depot-hours li:last-child {
	border-bottom: 0;
}

.acl-depot-hours span:first-child {
	color: #dcdcdc;
}

.acl-depot-hours span:last-child {
	font-weight: 600;
}

.acl-depot .acl-depot-hours__callout {
	background: rgba(246,139,31,.18);
	border-left: 3px solid var(--acl-o);
	padding: 12px 14px;
	font-size: .92rem;
	line-height: 1.5;
	color: #f4f4f4;
	margin: 0 0 20px;
}

/* --- 3. primary: intro + stats ------------------------------------------- */

.acl-depot-intro {
	padding: 66px 0 10px;
}

.acl-depot-intro__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 54px;
	align-items: start;
}

.acl-depot-intro h2 {
	font-size: clamp(1.6rem, 3.2vw, 2.2rem);
	line-height: 1.2;
	margin: 0 0 18px;
}

.acl-depot-intro p {
	margin: 0 0 18px;
}

/* The stats column measured 400px against 538px of prose beside it: 138px of
   dead grey, 26% of the taller side. Stretching the list to the full row height
   and giving the four boxes an equal share of it fills that with content rather
   than air, and the two columns finish level. */
.acl-depot-stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
	align-self: stretch;
	height: 100%;
	grid-auto-rows: 1fr;
}

.acl-depot-stats li {
	background: var(--acl-wash);
	border-left: 4px solid var(--acl-o);
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.acl-depot-stats b {
	display: block;
	font-family: "Ropa Sans", sans-serif;
	font-size: 1.9rem;
	line-height: 1.1;
	color: var(--acl-ink);
}

.acl-depot-stats span {
	font-size: .9rem;
	color: var(--acl-muted);
	line-height: 1.45;
}

/* --- 4. coverage band ---------------------------------------------------- */

.acl-depot-coverage {
	margin: 56px 0 0;
	position: relative;
	background: #1b1b1b center/cover no-repeat;
	color: #fff;
}

.acl-depot-coverage::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(12,12,12,.74);
}

.acl-depot-coverage__inner {
	position: relative;
	z-index: 1;
	max-width: 1140px;
	margin: 0 auto;
	padding: 54px 20px;
}

.acl-depot-coverage h2 {
	color: #fff;
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 12px;
}

.acl-depot-coverage p {
	color: #e6e6e6;
	max-width: 52em;
	margin: 0 0 22px;
}

.acl-depot-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.acl-depot-chips li a,
.acl-depot-chips li span {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid rgba(255,255,255,.32);
	color: #fff;
	font-size: .9rem;
	text-decoration: none;
}

.acl-depot-chips li a:hover,
.acl-depot-chips li a:focus {
	background: var(--acl-o);
	border-color: var(--acl-o);
	color: #fff;
}

/* --- 5. services grid ---------------------------------------------------- */

.acl-depot-services {
	padding: 66px 0;
}

.acl-depot-services__head {
	max-width: 46em;
	margin: 0 0 32px;
}

.acl-depot-services__head h2 {
	font-size: clamp(1.6rem, 3.2vw, 2.2rem);
	margin: 0 0 12px;
}

.acl-depot-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

/* The whole card is the click target, via the stretched-link pattern: the real
   anchor inside the card grows a pseudo-element over the card's whole area.
   One anchor, so it is one tab stop and one thing for a screen reader to
   announce, and the semantics are unchanged. No onclick, no role, no tabindex.
   Anything else inside the card that needs to be clickable just needs a
   position and a z-index above the overlay. */
.acl-depot-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--acl-line);
	transition: box-shadow .18s ease, transform .18s ease;
}

.acl-depot-card {
	cursor: pointer;
}

/* ::before, not ::after. The link already uses ::after for its chevron, and two
   rules setting `content` on one pseudo-element means one of them loses: the
   overlay was inheriting the chevron's glyph and painting a stray angle bracket
   across the card. Absolutely positioned, so it is out of flow and the chevron
   still sits where it did. */
.acl-depot-card__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* The keyboard focus ring belongs on the card, not on the few words of link
   text, now that the card is what gets activated. */
.acl-depot-card:focus-within {
	outline: 3px solid var(--acl-oi);
	outline-offset: 2px;
}

.acl-depot-card__link:focus {
	outline: none;
}

/* Hovering anywhere on the card should look like the link is hovered, because
   anywhere on the card now activates it. */
.acl-depot-card:hover .acl-depot-card__link {
	text-decoration: underline;
}

.acl-depot-card:hover {
	box-shadow: 0 14px 32px rgba(0,0,0,.12);
	transform: translateY(-3px);
}

.acl-depot-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--acl-wash);
}

.acl-depot-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.acl-depot-card:hover .acl-depot-card__media img {
	transform: scale(1.045);
}

.acl-depot-card__body {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.acl-depot-card h3 {
	font-size: 1.22rem;
	margin: 0 0 10px;
}

.acl-depot-card p {
	font-size: .95rem;
	margin: 0 0 16px;
	flex: 1;
}

.acl-depot-card__link {
	font-weight: 600;
	font-size: .95rem;
	color: var(--acl-oi);
	text-decoration: none;
	align-self: flex-start;
}

.acl-depot-card__link::after {
	content: " \203A";
	font-weight: 700;
}

.acl-depot-card__link:hover,
.acl-depot-card__link:focus {
	text-decoration: underline;
}

/* --- 6. feature bands, alternating --------------------------------------- */

.acl-depot-feature {
	padding: 0 0 66px;
}

.acl-depot-feature__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
}

.acl-depot-feature__media {
	min-height: 380px;
	background: var(--acl-wash) center/cover no-repeat;
}

.acl-depot-feature__body {
	background: var(--acl-wash);
	padding: 46px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.acl-depot-feature--flip .acl-depot-feature__media {
	order: 2;
}

.acl-depot-feature h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 16px;
}

.acl-depot-feature p {
	margin: 0 0 16px;
}

.acl-depot-feature__body .acl-depot-btn {
	align-self: flex-start;
	margin-top: 8px;
}

/* --- quote callout ------------------------------------------------------- */

.acl-depot-quote {
	border-left: 5px solid var(--acl-o);
	padding: 4px 0 4px 22px;
	margin: 0 0 22px;
}

.acl-depot-quote p {
	font-family: "Ropa Sans", sans-serif;
	font-size: 1.28rem;
	line-height: 1.45;
	color: var(--acl-ink);
	margin: 0 0 8px;
}

.acl-depot-quote cite {
	font-style: normal;
	font-size: .9rem;
	color: var(--acl-muted);
}

/* --- 7. team ------------------------------------------------------------- */

.acl-depot-team {
	padding: 0 0 66px;
}

.acl-depot-team__head {
	max-width: 46em;
	margin: 0 0 30px;
}

.acl-depot-team__head h2 {
	font-size: clamp(1.6rem, 3.2vw, 2.2rem);
	margin: 0 0 10px;
}

/* Column count comes from the renderer, not from a fixed 4. Six people in four
   columns left two empty cells on the right of the second row, which is the
   "lonely box floating in grey" problem exactly. acclaim_depot_grid_columns()
   picks the count that divides the people evenly, so six render as 3x2 and ten
   as 5x2, and the block always ends on a full row. */
/* Same shape as the depot cards, and mobile-first for the same reason: the
   count arrives inline, so it is confined to the widest step and the phone and
   tablet counts are declared outright. */
/* minmax(0, 1fr) throughout, not 1fr. The row card cannot compress below its
   own min-content, an 88px portrait plus the longest word in a job title, which
   is about 222px. A plain 1fr track will not go under that, so two of them at
   375px pushed the page to 498px wide and the whole thing scrolled sideways.
   minmax(0, ...) lets the track shrink and the title wrap instead.

   One column below 560px for the same reason: two of these side by side on a
   small phone leaves about 60px for a name. */
.acl-depot-people {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 560px) {
	.acl-depot-people {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.acl-depot-people {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1240px) {
	.acl-depot-people {
		grid-template-columns: repeat(var(--acl-people-cols, 4), minmax(0, 1fr));
	}

	/* Head Office has seven people. Seven is prime, so no sensible column count
	   divides it and one cell is always left over. The last card takes the spare
	   cell instead, which on a row card reads as deliberate where an empty box
	   would not. Only fires when the last item is the third of a row of four. */
	.acl-depot-people > li:last-child:nth-child(4n + 3) {
		grid-column: span 2;
	}
}

/* Sized to the photographs, rather than the photographs stretched to the card.
   23 of the 26 team portraits in the library are about 96x121 native. The old
   card put them in a square that rendered up to 260px wide, a 2.7x upscale, and
   they looked exactly as pixelated as that sounds.

   So the card is a row now: the portrait at 88x110, which is under every native
   size on file and therefore never upscaled, with the name and role beside it.
   It reads as a staff list, which is what it is. The three people who do have
   1200x1600 originals simply downscale. The full list of portraits that need
   replacing is in the handover; when better ones arrive this size can go up. */
.acl-depot-person {
	border: 1px solid var(--acl-line);
	background: #fff;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
}

.acl-depot-person__media {
	flex: 0 0 88px;
	width: 88px;
	height: 110px;
	background: var(--acl-wash);
	overflow: hidden;
}

.acl-depot-person__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.acl-depot-person__body {
	min-width: 0;
	overflow-wrap: anywhere;
}

.acl-depot-person h3 {
	font-size: 1rem;
	line-height: 1.25;
	margin: 0 0 4px;
}

.acl-depot-person p {
	font-size: .84rem;
	margin: 0;
	line-height: 1.4;
}

/* --- 8. map + form ------------------------------------------------------- */

.acl-depot-visit {
	background: var(--acl-wash);
	padding: 60px 0;
}

/* The enquiry form runs to 922px and the map column stopped at 619px, leaving
   303px of nothing beside it, a third of the section. The columns stretch now
   and the map takes the slack, so "find us" gets a bigger map instead of a hole
   and both sides finish level. */
.acl-depot-visit__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 42px;
	align-items: stretch;
}

.acl-depot-visit__col {
	display: flex;
	flex-direction: column;
}

.acl-depot-visit__col .acl-depot-map {
	flex: 1;
	min-height: 380px;
	display: flex;
}

.acl-depot-visit__col .acl-depot-map iframe {
	height: 100%;
	flex: 1;
}

.acl-depot-visit h2 {
	font-size: clamp(1.6rem, 3.2vw, 2.2rem);
	margin: 0 0 14px;
}

.acl-depot-map {
	border: 1px solid var(--acl-line);
	background: #fff;
	line-height: 0;
}

.acl-depot-map iframe {
	width: 100%;
	height: 380px;
	border: 0;
	display: block;
}

.acl-depot-visit__form {
	background: #fff;
	border: 1px solid var(--acl-line);
	padding: 28px 30px;
}

/* The CF7 form on this page is unstyled markup; give it the same square,
   full-width treatment the rest of the page uses rather than leaving it
   looking like a different website. */
.acl-depot-visit__form input[type="text"],
.acl-depot-visit__form input[type="email"],
.acl-depot-visit__form input[type="tel"],
.acl-depot-visit__form textarea,
.acl-depot-visit__form select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #cfcfcf;
	border-radius: 0;
	margin-bottom: 14px;
	font-size: .95rem;
	background: #fff;
}

.acl-depot-visit__form textarea {
	min-height: 120px;
}

.acl-depot-visit__form input[type="submit"] {
	background: var(--acl-o);
	color: #fff;
	border: 2px solid var(--acl-o);
	border-radius: 0;
	padding: 13px 26px;
	font-weight: 600;
	cursor: pointer;
}

.acl-depot-visit__form input[type="submit"]:hover {
	background: #000;
	border-color: #000;
}

/* --- 9. the other depots ------------------------------------------------- */

.acl-depot-others {
	padding: 60px 0;
}

.acl-depot-others h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 8px;
}

.acl-depot-others > .acl-depot__wrap > p {
	margin: 0 0 26px;
}

/* Seven sibling depots never divide into four columns, so instead of a grid
   with a hole in it these flex and grow: the last row's items widen to fill the
   width. They are short text cards, so widening reads as deliberate where it
   would not on the square team portraits above. */
.acl-depot-others__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.acl-depot-others__grid > li {
	flex: 1 1 232px;
}

.acl-depot-other {
	border: 1px solid var(--acl-line);
	padding: 18px 20px;
	background: #fff;
}

.acl-depot-other h3 {
	font-size: 1.02rem;
	margin: 0 0 6px;
}

.acl-depot-other h3 a {
	color: var(--acl-ink);
	text-decoration: none;
}

.acl-depot-other h3 a:hover,
.acl-depot-other h3 a:focus {
	color: var(--acl-oi);
	text-decoration: underline;
}

.acl-depot-other p {
	font-size: .88rem;
	margin: 0 0 8px;
	line-height: 1.5;
}

.acl-depot-other a.acl-depot-other__tel {
	font-weight: 600;
	font-size: .95rem;
	color: var(--acl-oi);
	text-decoration: none;
}

.acl-depot-other a.acl-depot-other__tel:hover {
	text-decoration: underline;
}

/* --- 10. closing CTA ----------------------------------------------------- */

.acl-depot-cta {
	position: relative;
	background: #1b1b1b center/cover no-repeat;
	color: #fff;
	text-align: center;
}

.acl-depot-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(14,14,14,.8);
}

.acl-depot-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 780px;
	margin: 0 auto;
	padding: 62px 20px;
}

.acl-depot-cta h2 {
	color: #fff;
	font-size: clamp(1.6rem, 3.4vw, 2.3rem);
	margin: 0 0 14px;
}

.acl-depot-cta p {
	color: #e4e4e4;
	margin: 0 0 24px;
}

.acl-depot-cta .acl-depot-contact__actions {
	justify-content: center;
}

.acl-depot-cta .acl-depot-btn--ghost {
	color: #fff;
	border-color: #fff;
}

.acl-depot-cta .acl-depot-btn--ghost:hover,
.acl-depot-cta .acl-depot-btn--ghost:focus {
	background: #fff;
	color: var(--acl-ink);
}

/* --- responsive ----------------------------------------------------------
   Three steps rather than one. The 768-1239px tablet band is the one that
   normally breaks on this site, so the grids drop to two columns there and
   only collapse to one below 768px. */

@media (max-width: 1239px) {
	/* .acl-depot-people and the locations cards are declared mobile-first
	   further up and are deliberately absent here: two rules for one grid at the
	   same specificity is decided by source order, which is not a thing to rely
	   on. */
	.acl-depot-cards,
	.acl-depot-others__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.acl-depot-intro__grid {
		gap: 36px;
	}

	.acl-depot-feature__body {
		padding: 38px 34px;
	}
}

@media (max-width: 991px) {
	.acl-depot-contact__grid {
		grid-template-columns: 1fr;
		margin-top: -40px;
	}

	/* keeps the 36px clearance as the pull changes */
	.acl-depot-hero__inner {
		padding-bottom: 76px;
	}

	.acl-depot-intro__grid,
	.acl-depot-visit__grid,
	.acl-depot-feature__grid {
		grid-template-columns: 1fr;
	}

	/* Keep the picture above the words when the two-up band stacks, on both
	   the normal and the flipped variant. Without this the flipped one puts
	   its image below the text and the rhythm of the page inverts halfway
	   down. */
	.acl-depot-feature--flip .acl-depot-feature__media {
		order: 0;
	}

	.acl-depot-feature__media {
		min-height: 260px;
	}
}

@media (max-width: 767px) {
	.acl-depot-hero {
		min-height: 380px;
	}

	.acl-depot-hero__inner {
		padding: 56px 20px 64px; /* 28 pull + 36 clear */
	}

	.acl-depot-contact__main,
	.acl-depot-contact__aside {
		padding: 26px 22px;
	}

	.acl-depot-contact__grid {
		margin-top: -28px;
	}

	/* The phone number is the most likely thing a visitor on a phone wants,
	   so it stays large and becomes a full-width tap target. */
	.acl-depot-contact__phone {
		font-size: 2rem;
	}

	.acl-depot-contact__actions .acl-depot-btn {
		flex: 1 1 100%;
		text-align: center;
	}

	.acl-depot-cards,
	.acl-depot-others__grid {
		grid-template-columns: 1fr;
	}

	.acl-depot-intro,
	.acl-depot-services,
	.acl-depot-others {
		padding: 44px 0;
	}

	.acl-depot-feature__body {
		padding: 30px 22px;
	}

	.acl-depot-visit__form {
		padding: 22px 20px;
	}
}

@media (max-width: 480px) {
	.acl-depot-people {
		gap: 14px;
	}

	.acl-depot-person__body {
		padding: 12px 12px 14px;
	}

	.acl-depot-person h3 {
		font-size: .94rem;
	}

	.acl-depot-person p {
		font-size: .8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.acl-depot-card,
	.acl-depot-card__media img {
		transition: none;
	}

	.acl-depot-card:hover {
		transform: none;
	}

	.acl-depot-card:hover .acl-depot-card__media img {
		transform: none;
	}
}

/* ==========================================================================
   /locations/ index: the hub and the depot cards
   ==========================================================================
   Reuses the depot-single components above (.acl-depot-intro, -cards,
   -feature, -cta) so the index and the pages it links to are visibly the same
   family. Only the pieces the index needs that the single does not are
   declared here. */

/* The depot card carries two short paragraphs, an address and a phone number,
   where the service card it borrows from carries one long description. That
   card's `p { flex: 1 }` exists so its single paragraph can grow and push the
   link to the bottom; with two paragraphs the spare height gets split between
   them and the card reads loose and uneven. So the growth comes off the
   paragraphs here and moves to the link, which pins to the bottom instead. The
   side effect is the useful one: "Depot details and directions" lines up across
   all eight cards however long the address is. */
/* Column count from the renderer, so eight depots come out 4x2 rather than
   3+3+2 with a hole on the end.

   Written mobile-first, and the renderer's count only applies at the widest
   step, because the count arrives as an inline custom property. Inline beats
   every stylesheet rule, so a max-width query could not have taken it back
   down and the cards sat four abreast on a phone. Confining the variable to
   the desktop query is what makes the small screens win. */
.acl-locations .acl-depot-cards {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.acl-locations .acl-depot-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1240px) {
	.acl-locations .acl-depot-cards {
		grid-template-columns: repeat(var(--acl-cards-cols, 3), 1fr);
	}
}

/* The depot cards on the index carry two more links inside them, the depot name
   in the heading and the phone number. Both have to sit above the stretched
   link's overlay or the card would swallow them, and a phone number you cannot
   tap is worse than no phone number. */
.acl-locations .acl-depot-card h3 a,
.acl-locations .acl-loc-card__tel a {
	position: relative;
	z-index: 2;
}

.acl-locations .acl-depot-card p {
	flex: none;
}

.acl-locations .acl-depot-card__link {
	margin-top: auto;
	padding-top: 4px;
}

.acl-loc-card__addr {
	font-size: .9rem;
	margin: 0 0 12px;
	line-height: 1.55;
}

.acl-loc-card__tel {
	margin: 0 0 18px;
}

.acl-loc-card__tel a {
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--acl-oi);
	text-decoration: none;
}

.acl-loc-card__tel a:hover,
.acl-loc-card__tel a:focus {
	text-decoration: underline;
}

.acl-depot-card h3 a {
	color: var(--acl-ink);
	text-decoration: none;
}

.acl-depot-card h3 a:hover,
.acl-depot-card h3 a:focus {
	color: var(--acl-oi);
	text-decoration: underline;
}

/* --- the hub -------------------------------------------------------------
   149 links in one place, so density matters more than decoration. Grouped
   under the covering depot, each group a multi-column list that reflows
   rather than a fixed grid, so a depot with 6 areas and one with 45 both
   look deliberate. */

.acl-loc-hub {
	background: var(--acl-wash);
	padding: 62px 0;
}

.acl-loc-hub__group {
	padding: 24px 0;
	border-top: 1px solid #e0e0e0;
}

.acl-loc-hub__group:first-of-type {
	border-top: 0;
}

.acl-loc-hub__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	font-size: 1.18rem;
	margin: 0 0 14px;
}

.acl-loc-hub__title a {
	color: var(--acl-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--acl-o);
}

.acl-loc-hub__title a:hover,
.acl-loc-hub__title a:focus {
	color: var(--acl-oi);
}

.acl-loc-hub__tel a {
	font-size: .95rem;
	font-weight: 600;
	color: var(--acl-oi);
	border-bottom: 0;
	text-decoration: none;
}

.acl-loc-hub__tel a:hover,
.acl-loc-hub__tel a:focus {
	text-decoration: underline;
}

/* Three columns, not five. Each entry is now a town plus up to five service
   links rather than a single name, so it needs the width to stay on two lines. */
.acl-loc-hub__list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 3;
	column-gap: 34px;
}

.acl-loc-hub__list li {
	break-inside: avoid;
	padding: 3px 0;
}

.acl-loc-hub__list a {
	font-size: .93rem;
	color: #444;
	text-decoration: none;
	display: inline-block;
	line-height: 1.5;
}

.acl-loc-hub__list a:hover,
.acl-loc-hub__list a:focus {
	color: var(--acl-oi);
	text-decoration: underline;
}

@media (max-width: 1239px) {
	.acl-loc-hub__list { columns: 2; }
}

@media (max-width: 991px) {
	.acl-loc-hub__list { columns: 2; }
}

@media (max-width: 767px) {
	.acl-loc-hub { padding: 44px 0; }
	.acl-loc-hub__list { columns: 1; }
	.acl-loc-hub__list a { font-size: .9rem; }
}

@media (max-width: 420px) {
	.acl-loc-hub__list { columns: 1; }
}

/* Coverage chips measured 82x40 on a 375px screen. 40 is under the 44px the
   touch guidance asks for, and these are the page's main navigation into the
   area pages, so they get the extra four pixels on touch devices only. */
@media (hover: none) and (pointer: coarse) {
	.acl-depot-chips li a,
	.acl-depot-chips li span {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* The card links are the main route into the service pages from a phone and
	   measured 23px, which is half a thumb. Padding rather than a box, so they
	   still read as links. */
	.acl-depot-card__link,
	.acl-loc-hub__list a,
	.acl-depot-other__tel {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* --- hub entries: a town and everything published for it ------------------
   Was one link per town. There is now a servicing page for 142 towns, a
   training page for 147, three for-sale pages and one repairs page, all of them
   published and none of them linked from here. The town name is the label and
   the page types sit under it as separate links, dot-separated by CSS so the
   separators are not in the text layer for a screen reader to read out. */

.acl-loc-hub__item {
	padding: 7px 0 9px;
	break-inside: avoid;
}

.acl-loc-hub__place {
	display: block;
	font-weight: 600;
	font-size: .95rem;
	color: var(--acl-ink);
	line-height: 1.35;
}

.acl-loc-hub__svcs {
	display: block;
	margin-top: 1px;
}

.acl-loc-hub__svcs a {
	font-size: .84rem;
	color: #5f5f5f;
	text-decoration: none;
	line-height: 1.5;
}

.acl-loc-hub__svcs a:hover,
.acl-loc-hub__svcs a:focus {
	color: var(--acl-oi);
	text-decoration: underline;
}

.acl-loc-hub__svcs a + a::before {
	content: "\00b7";
	color: #b5b5b5;
	margin: 0 6px;
	text-decoration: none;
	display: inline-block;
}

@media (hover: none) and (pointer: coarse) {
	/* Five links on one line is a lot of small targets on a phone, so they get
	   room to breathe vertically without becoming a list. */
	.acl-loc-hub__svcs a {
		display: inline-block;
		padding: 5px 0;
	}
}

/* The email address in the contact card. A real mailto: anchor rather than
   prose, so the site-wide email_click tracking sees it and a phone can act on
   it. Sized to sit under the big phone number without competing with it. */
.acl-depot-contact__email {
	margin: 0 0 18px;
}

.acl-depot-contact__email a {
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--acl-oi);
	text-decoration: none;
	word-break: break-word;
}

.acl-depot-contact__email a:hover,
.acl-depot-contact__email a:focus {
	text-decoration: underline;
}

@media (hover: none) and (pointer: coarse) {
	.acl-depot-contact__email a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}