/* Jezben Child — project-specific overrides.
   Keep the parent theme generic; put anything Jezben-only here. */

/* ---------- Header CTA ---------- */

/* The "Get Instant Quote" pill and its arrow read as one control, so both
   invert together: white at rest, black on hover. The parent paints them
   --color-text at rest and #000 on hover; this flips the resting state and
   keeps the hover.

   Covers the sticky header too. Its inner bar turns lime when stuck, which
   white still reads against, and black on hover reads against it harder. */
.header-actions .btn,
.header-actions__arrow,
.site-header.is-stuck .header-actions a.btn,
.site-header.is-stuck .header-actions a.header-actions__arrow {
	background: #fff;
	color: var(--color-text);
}

/* focus-visible is bundled in so keyboard users get the same feedback as the
   mouse. The parent's translateX on the arrow is left alone — only the
   colours are being restated here, so the motion still applies.

   The hover sits on the pair's wrapper, as the site's other pill-and-arrow
   buttons do: pointing at either half turns both black together. Before,
   only the half under the pointer changed, so the pill went black while the
   circle stayed white. :focus-within does the same for the keyboard. */
.header-actions .btn:hover,
.header-actions .btn:focus-visible,
.header-actions__arrow:hover,
.header-actions__arrow:focus-visible,
.header-actions:hover a.btn,
.header-actions:hover a.header-actions__arrow,
.header-actions:focus-within a.btn,
.header-actions:focus-within a.header-actions__arrow,
.site-header.is-stuck .header-actions a.btn:hover,
.site-header.is-stuck .header-actions a.btn:focus-visible,
.site-header.is-stuck .header-actions a.header-actions__arrow:hover,
.site-header.is-stuck .header-actions a.header-actions__arrow:focus-visible,
.site-header.is-stuck .header-actions:hover a.btn,
.site-header.is-stuck .header-actions:hover a.header-actions__arrow,
.site-header.is-stuck .header-actions:focus-within a.btn,
.site-header.is-stuck .header-actions:focus-within a.header-actions__arrow {
	background: #000;
	color: #fff;
}

/* Over the dark photo hero (home, the services page and the service pages,
   before the header sticks) the pair turns lime on hover instead. The lime
   bar — the sticky header, and the four pages that open on it — keeps the
   black above, since lime on lime would vanish. */
body:not(.has-light-header) .site-header:not(.is-stuck) .header-actions:hover a.btn,
body:not(.has-light-header) .site-header:not(.is-stuck) .header-actions:hover a.header-actions__arrow,
body:not(.has-light-header) .site-header:not(.is-stuck) .header-actions:focus-within a.btn,
body:not(.has-light-header) .site-header:not(.is-stuck) .header-actions:focus-within a.header-actions__arrow {
	background: var(--color-accent);
	color: var(--color-on-accent);
}

/* ---------- Header logo ---------- */

/* A touch larger. The mark is 485x173, so at the matrix's 200px desktop
   width it wants to be 71.3px tall — the parent capped that at 64px, which
   is what held it small. Lifting the cap to 70px lets it fill the width it
   is already given, rather than being trimmed to 179px wide.

   Width still comes from --logo-width (Theme Settings -> Design System), so
   the cap only bites on desktop; tablet and mobile are narrower than the cap
   and keep scaling from the matrix as before. */
.site-logo {
	width: var(--logo-width);
	max-height: 70px;
	object-fit: contain;
}

/* ---------- Header: fits its bar on smaller laptops ---------- */

/* The parent narrows the nav gap, the gap before the quote button and the
   logo below 1400px, but Theme Settings prints its desktop values after
   every stylesheet, so those steps never applied. Between 1101 and 1400px
   the header was wider than its bar and the nav ran in under the logo, and
   the sticky bar, which adds its own side padding, overlapped from 1280px
   down. The three sizes now shrink smoothly across that range, from the
   Theme Settings values at 1400px to 18px, 20px and 150px at 1101px.
   html:root out-ranks the plain :root the settings are printed on. */
@media (min-width: 1101px) and (max-width: 1400px) {
	html:root {
		--nav-gap: clamp(18px, 7.36vw - 63px, 40px);
		--header-gap: clamp(20px, 13.38vw - 127.3px, 60px);
		--logo-width: clamp(150px, 16.72vw - 34.1px, 200px);
	}
}

/* Logged in, the WordPress toolbar is pinned over the top of the page and
   covered the sticky bar's upper edge; the bar now drops below it. Under
   600px the toolbar scrolls away with the page, so no offset there. */
body.admin-bar .site-header.is-stuck,
body.admin-bar.has-pill-header .site-header { top: calc(14px + 32px); }
@media (max-width: 782px) {
	body.admin-bar .site-header.is-stuck,
	body.admin-bar.has-pill-header .site-header { top: calc(14px + 46px); }
}
@media (max-width: 600px) {
	body.admin-bar .site-header.is-stuck,
	body.admin-bar.has-pill-header .site-header { top: 14px; }
}

/* ---------- Header: the sticky bar from the top on some pages ---------- */

/* About Us, Industry, Blogs and Contact Us show the header as the lime
   sticky bar straight away, pinned in the same place, instead of the
   transparent header that only turns into the bar once the hero has
   scrolled past. functions.php adds has-pill-header to those pages. These
   restate the parent's is-stuck look; the drop-in and lift-out are switched
   off, so the theme's own sticky switch still runs but changes nothing you
   can see. */
body.has-pill-header .site-header {
	position: fixed;
	top: 14px;
}
body.has-pill-header .site-header .site-header__inner,
body.has-pill-header .site-header.is-stuck .site-header__inner,
body.has-pill-header .site-header.is-unsticking .site-header__inner {
	background: var(--color-accent);
	border-radius: var(--radius-pill);
	padding-inline: clamp(1rem, 2vw, 2.5rem);
	min-height: calc(var(--header-height) - 24px);
	box-shadow: 0 10px 30px rgb(27 27 40 / 0.14);
	animation: none;
	transform: none;
	opacity: 1;
}
body.has-pill-header .site-header .site-logo { filter: brightness(0); }
body.has-pill-header .site-header .nav-toggle { background: var(--color-text); }
body.has-pill-header .site-header .nav-toggle__bar,
body.has-pill-header .site-header .nav-toggle__bar::before,
body.has-pill-header .site-header .nav-toggle__bar::after { background: #fff; }
/* Dark links only where they sit on the bar. Below 1101px the links live in
   the dark menu drawer, which keeps its own white. */
@media (min-width: 1101px) {
	body.has-pill-header .site-header .site-nav .site-nav__list > li > a { color: var(--color-text); }
	body.has-pill-header .site-header .site-nav .site-nav__list > li > a:hover { opacity: 0.65; }
}

/* The current page's menu item carries the theme's underline, drawn in the
   accent lime. On the lime bar — the sticky header, and these four pages
   from the top — that is lime on lime and cannot be seen, so there the
   underline takes the dark text colour instead. Over the photo heroes and
   the white headers it stays lime, where it already shows. */
@media (min-width: 1101px) {
	.site-header.is-stuck .site-nav__list > li:is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a::before,
	body.has-pill-header .site-header .site-nav__list > li:is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a::before {
		background: var(--color-text);
	}
}

/* Light-header pages darken the header links so they read on a white hero,
   and the parent does not limit that to desktop, so opening the menu from
   the top of those pages gave dark links on the dark drawer. The drawer
   takes its own colours back, as the parent already does for the sticky
   bar. */
@media (max-width: 1100px) {
	body.nav-is-open.has-light-header .site-header .site-nav .site-nav__list a { color: #fff; }
	body.nav-is-open.has-light-header .site-header .site-nav .site-nav__list .sub-menu a { color: rgb(255 255 255 / 0.8); }
	body.nav-is-open.has-light-header .site-header .site-nav .site-nav__list .mega__list a { color: rgb(255 255 255 / 0.85); }
	body.nav-is-open.has-light-header .site-header .site-nav .site-nav__list > li.is-expanded > a,
	body.nav-is-open.has-light-header .site-header .site-nav .site-nav__list > li:hover > a,
	body.nav-is-open.has-light-header .site-header .site-nav .site-nav__list > li:focus-within > a { color: var(--color-accent); }
	body.nav-is-open.has-light-header .site-header .site-nav__list a:hover { opacity: 1; }
}

/* ---------- Hero pest strip ---------- */

/* Each pest opens the enquiry modal with its own service chosen, so the
   inert <span> the parent renders becomes a real <button> (see
   assets/js/child.js). These are the button defaults that would otherwise
   show through — everything else still comes from .pest-strip__link. */
button.pest-strip__link {
	width: 100%;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: center;
}

/* The parent gives the lift to a.pest-strip__link only. */
button.pest-strip__link { cursor: pointer; }
button.pest-strip__link:hover { transform: translateY(-3px); }

/* The marks are now keyboard-reachable, so the focus ring has to be
   visible against the white card. */
.pest-strip__link:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 2px;
}

/* ---------- Hero pest strip: hover highlight ---------- */

/* Hovering a pest only lifted it 3px, which barely registered. A lime
   disc now grows in behind the icon as it lifts — the same lime disc the
   site's other icons sit on — and shows for keyboard focus too. It is
   drawn on the link rather than the image, so no icon changes size, and
   it is 20px wider than the icon so it clears the label below.

   The viewport clips its content, and the disc plus the lift reach just
   above the row. The viewport gets 12px of room each way, taken straight
   back with a negative margin, so the row sits exactly where it was.

   Touch screens have no hover, and a tap would leave the disc stuck on,
   so the hover half only applies where the pointer can hover. */
.pest-strip__viewport { padding-block: 12px; margin-block: -12px; }
.pest-strip__link {
	position: relative;
	isolation: isolate;
	--pest-icon: 52px;
}
.pest-strip__link::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: calc(0.35rem + var(--pest-icon) / 2);
	width: calc(var(--pest-icon) + 20px);
	height: calc(var(--pest-icon) + 20px);
	border-radius: 50%;
	background: var(--color-accent);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.6);
	transition: opacity 250ms ease, transform 250ms ease;
}
@media (hover: hover) {
	.pest-strip__link:hover::before {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}
.pest-strip__link:focus-visible::before {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
/* The uploaded marks carry a white ground, which showed as a white
   square inside the disc. Multiplying them lets that white take on
   whatever is behind — lime in the disc, white on the card at rest — while
   the dark strokes stay dark. */
.pest-strip__link img,
.pest-strip__link .pest-strip__icon { mix-blend-mode: multiply; }
@media (max-width: 900px) {
	.pest-strip__link { --pest-icon: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.pest-strip__link::before {
		transform: translate(-50%, -50%);
		transition: opacity 250ms ease;
	}
	.pest-strip__link:focus-visible::before { transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
	.pest-strip__link:hover::before { transform: translate(-50%, -50%); }
}

/* ---------- Styled dropdowns: arrows ---------- */

/* Both chevrons were nudged with `rotate(45deg) translateY(-2px)`. A
   translate that follows a rotate runs along the rotated axis, so those 2px
   went diagonally — about 1.4px right and 1.4px up — instead of straight up.
   Translating first makes the nudge vertical, which is what it was for. */
.select__button::after {
	transform: translateY(-2px) rotate(45deg);
}
.select[aria-expanded="true"] .select__button::after {
	transform: translateY(-2px) rotate(-135deg);
}

/* The dial box is a fixed 7.5rem so every code fits, and the button spread
   its contents apart, which left "+971" and its chevron at opposite ends
   with a hole between them. The chevron follows the code now, a thin space
   behind it, and the box keeps its width so the row does not shift. The
   right padding still holds it off "Phone Number" when a longer code
   reaches the edge. */
.phone-field .select__button {
	justify-content: flex-start;
	gap: 0.5rem;
	padding-right: 0.5rem;
}

/* The box was a fixed 7.5rem — wide enough for a code nobody has — so
   its underline ran on for another 40px past the chevron before the
   phone field began. It takes its width from the code it holds now, and
   the phone field beside it grows into what is left. The floor keeps the
   shortest code (+1) a comfortable target, and each form sets its own
   basis, so all three are listed. */
.phone-field .select,
.section--contact__form .phone-field .select,
.site-footer .phone-field .select,
.form--compact .phone-field .select {
	flex: 0 0 auto;
}
.phone-field .select__button {
	width: auto;
	min-width: 4.5rem;
}

/* The services chevron sat hard against the end of its underline. Only the
   full-width selects are direct children of a row, so this leaves the
   dial-code box above untouched. */
.form__row > .select .select__button {
	padding-right: 0.5rem;
}

/* ---------- Styled dropdowns: panel spacing ---------- */

/* The rows inherit the body's 1.6 line-height, so on a 15px font each
   option came to 40px and the search block to 59px — most of the panel was
   air. Tightening the leading and the padding brings a row to about 30px,
   which fits seven where five used to go. */
.select__search { padding: 6px; }
.select__search-input {
	padding: 5px 10px;
	line-height: 1.35;
}
.select__list { padding: 3px; }
.select__option {
	padding: 5px 10px;
	line-height: 1.35;
	gap: 0.4rem;
}
.select__empty { padding: 8px; }

/* The panel is absolutely positioned, so a fixed height overruns a short
   viewport — a landscape phone, or a laptop with the browser chrome taking
   half the screen. Capping against vh as well leaves desktop untouched
   (40vh clears 220px above a 550px viewport) and lets the list shrink
   instead of spilling. */
.select__list { max-height: min(220px, 40vh); }

/* Under 16px, iOS zooms the page when the field takes focus and the layout
   jumps with it. Only the search field needs the exemption. */
@media (max-width: 600px) {
	.select__search-input { font-size: 16px; }
}

/* Tight rows are fine for a mouse, but the type scale shrinks on small
   screens too, which would leave a ~32px target under a finger. Give touch
   pointers the height back without loosening the desktop list. */
@media (pointer: coarse) {
	.select__option { min-height: 40px; }
}

/* ---------- Styled dropdowns: opening ---------- */

/* The panel goes straight from display:none to block, so it snaps into
   place. Easing it in reads far softer.

   display cannot be transitioned on its own, so it is listed with
   allow-discrete: the browser then holds the box visible for the length of
   the fade instead of pulling it the moment the attribute flips. That gets
   the close animated as well as the open, which max-height tricks never do.
   @starting-style supplies the "before" state for an element that was not
   rendered a frame ago; browsers without it simply show the panel as they
   do today, so nothing breaks. */
.select__panel {
	opacity: 0;
	transform: translateY(-6px);
	transform-origin: top center;
	transition:
		opacity 180ms ease,
		transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
		display 180ms allow-discrete;
}

.select[aria-expanded="true"] .select__panel {
	opacity: 1;
	transform: translateY(0);
}

@starting-style {
	.select[aria-expanded="true"] .select__panel {
		opacity: 0;
		transform: translateY(-6px);
	}
}

/* The theme turns motion down elsewhere; this follows suit. */
@media (prefers-reduced-motion: reduce) {
	.select__panel {
		transition: none;
		transform: none;
	}
	.select[aria-expanded="true"] .select__panel { transform: none; }
}

/* A dropdown with more room above the field than below flips over it, so it
   stays inside the popup instead of hanging out of the bottom. The class is
   set by assets/js/child.js, which also caps the list to the space there. */
.select__panel.is-above {
	top: auto;
	bottom: calc(100% + 4px);
	transform: translateY(6px);
}
.select[aria-expanded="true"] .select__panel.is-above {
	transform: translateY(0);
}
@starting-style {
	.select[aria-expanded="true"] .select__panel.is-above {
		transform: translateY(6px);
	}
}

/* ---------- About section CTA ---------- */

/* "More About Jezben" inverts to white on hover instead of just darkening
   the lime.

   Scoped to the About section on purpose: .about-cta is reused by the
   services and blogs CTAs, the phone link and the form submit rows, and
   those should keep the accent hover they have.

   Driven from the wrapper so the pill and its arrow light up together —
   the arrow is aria-hidden with tabindex="-1", decoration duplicating the
   pill's own link, so it should never highlight on its own. focus-within
   covers the keyboard, which only ever lands on the pill. */

/* The wrapper is a block-level flex row, so it ran the full width of the
   column — 502px around 295px of button, leaving 207px of empty space that
   still counted as a hover. Shrinking it to its contents makes the hover
   area the control itself. Nothing moves: the pair is left-aligned with
   nothing beside it, so the box was only ever padding the row out. */
.section--about .about-cta {
	width: fit-content;
}

.section--about .about-cta:hover .btn--accent,
.section--about .about-cta:hover .about-cta__arrow,
.section--about .about-cta:focus-within .btn--accent,
.section--about .about-cta:focus-within .about-cta__arrow {
	background: #fff;
	color: #000;
}

/* ---------- About section: the four points ---------- */

/* The marks were the same near-black as the copy beside them, so they read
   as decoration rather than as the points they label.

   They sit on a lime disc rather than being recoloured lime. The strokes
   are hardcoded #1B1B28 in the SVG, so `stroke` would have to override the
   presentation attribute — doable, but a 1.1px line drawing in lime on
   white is fainter than what is there now, which is the opposite of the
   ask. Dark on lime is the site's own way of highlighting: the CTA pills
   and the arrow circles all work that way, and #1B1B28 is exactly
   --color-on-accent, so the contrast is the one the palette intends. */
.about-point__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	min-height: 0;
	border-radius: 50%;
	background: var(--color-accent);
}

@media (max-width: 560px) {
	.about-point__icon { width: 52px; height: 52px; }
}

/* ---------- Line icons on the lime disc, site-wide ---------- */

/* The same treatment as the About points above, for the other places the
   site sets plain line icons over a short label: the "Why Jezben" points
   on every service page and the lead points on Location. The Target
   Audience icons on About Us are already lime and filled, so a lime disc
   would swallow them; they are left as they are. */
.best-point__icon,
.lead-mark__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-on-accent);
}
.best-point__icon svg,
.lead-mark__icon svg { width: 34px; height: 34px; }

@media (max-width: 560px) {
	.best-point__icon,
	.lead-mark__icon { width: 52px; height: 52px; }
	.best-point__icon svg,
	.lead-mark__icon svg { width: 28px; height: 28px; }
}

/* ---------- About section: panel inset ---------- */

/* The design insets the panel's content by 100px. The theme caps it at 64px
   — clamp(2rem, 4vw, 4rem) — so the copy sat far closer to the panel edge
   than the reference does.

   The number is not eyeballed off the mockup: jezben.com still carries this
   design as a hidden Elementor section, and its dark panel (background
   rgb(27,27,40), the same value as --color-text) is set to padding: 100px.

   Kept fluid so it scales the whole way down rather than stepping at a
   breakpoint, with the floor left at the theme's own 2rem so phones are
   exactly as they were. Vertical padding is untouched — only the inset was
   asked for. */
.section--about__panel {
	padding-inline: clamp(2rem, 6.5vw, 100px);
}

/* ---------- Client logos: continuous marquee ---------- */

/* The strip stepped one logo every 2.2s. This scrolls it continuously and
   pauses under the cursor. The stepper is detached in assets/js/child.js,
   which also sets --marquee-duration from one run's measured width.

   The run is rendered twice and the spacing lives in each item's
   padding-inline rather than a flex gap, so the track is exactly two runs
   wide and -50% lands precisely on the start of the copy. With a gap there
   would be half a gap of drift at every wrap. */
.logo-slider--marquee .logo-slider__viewport {
	/* Nothing drags it any more. */
	cursor: default;
}

.logo-slider--marquee .logo-strip {
	/* The stepper's easing would fight a linear animation. */
	transition: none;
	animation: jezben-logo-marquee var(--marquee-duration, 40s) linear infinite;
}

@keyframes jezben-logo-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* focus-within as well as hover, so tabbing to a logo link does not have
   the row slide out from under the keyboard. */
.logo-slider--marquee:hover .logo-strip,
.logo-slider--marquee:focus-within .logo-strip {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.logo-slider--marquee .logo-strip { animation: none; }
}

/* ---------- Client logos: a size up, on every page ---------- */

/* The logo files are only 72px tall (72x72 marks, 150x72 wordmarks) and
   the strip showed them at that natural size. They now take a set height
   about a quarter larger, the same on every page that runs the strip.

   One fewer logo is on screen at each step, so each slot is wide enough
   for a wordmark to grow with it rather than being held back by the slot
   width. max-width still caps a logo to its slot, so nothing overlaps at
   the edges of a range.

   The files are upscaled to get there; sharper originals would be needed
   to go much larger without softening. */
:root { --logos-per-view: 5; }
/* A further step up: each size below is about a fifth larger than before
   (92, 88, 80 and 76px). Wide marks that would outgrow their slide on the
   narrowest phones are still held to the slide by the parent's max-width. */
.logo-strip__item img { height: 112px; width: auto; max-height: none; min-height: 0; }

@media (max-width: 1200px) {
	:root { --logos-per-view: 4; }
	.logo-strip__item img { height: 104px; }
}
@media (max-width: 900px) {
	:root { --logos-per-view: 3; }
	.logo-strip__item { min-height: 110px; max-height: none; }
	.logo-strip__item img { height: 96px; max-height: none; min-height: 0; }
}
/* Phones keep the earlier, smaller size — the step up read as too big two
   to a row — and the slide is trimmed to match so no extra white space
   sits around them. */
@media (max-width: 560px) {
	:root { --logos-per-view: 2; }
	.logo-strip__item { min-height: 90px; }
	.logo-strip__item img { height: 76px; }
}

/* ---------- Accent buttons: hover inverts against the ground ---------- */

/* The lime pill only darkened to --color-accent-dark on hover, which barely
   registers. On a white ground it now inverts to black with white text.

   The arrow is driven from the .about-cta wrapper so the pair lights up
   together — it is aria-hidden with tabindex="-1", decoration duplicating
   the pill's own link, and should never highlight on its own. */
/* The pair hovers as one through its wrapper, so the wrapper has to be only
   as wide as the pill and the arrow. On the home "Our Services" intro it
   stretched 160px past the arrow, and pointing at that empty space lit the
   button. Every wrapper now hugs its two buttons; the others already did,
   so nothing else moves. */
.about-cta { width: fit-content; }

.btn--accent:hover,
.about-cta:hover .btn--accent,
.about-cta:focus-within .btn--accent,
.about-cta:hover .about-cta__arrow,
.about-cta:focus-within .about-cta__arrow {
	background: #000;
	color: #fff;
}

/* The places that put this button on a dark ground, where black-on-dark
   would read as the button simply vanishing. There it inverts the other
   way, to white with black text, the same as the About panel already does.
   Each of these carries more classes than the rule above, so it wins on
   specificity.

   The CTA band is dark everywhere except on a service page and on the
   services page, where it sits on a light ground and keeps the black hover.
   The services panel is the dark "Our Services" band on Location.
   .section--about is left out on purpose: it has its own rule already. */
body:not(.single-service):not(.page-services) .section--cta .btn--accent:hover,
body:not(.single-service):not(.page-services) .section--cta .about-cta:hover .btn--accent,
body:not(.single-service):not(.page-services) .section--cta .about-cta:focus-within .btn--accent,
body:not(.single-service):not(.page-services) .section--cta .about-cta:hover .about-cta__arrow,
body:not(.single-service):not(.page-services) .section--cta .about-cta:focus-within .about-cta__arrow,
.section--services-panel .btn--accent:hover,
.section--services-panel .about-cta:hover .btn--accent,
.section--services-panel .about-cta:focus-within .btn--accent,
.section--services-panel .about-cta:hover .about-cta__arrow,
.section--services-panel .about-cta:focus-within .about-cta__arrow,
.section--awareness__card .btn--accent:hover,
.section--awareness__card .about-cta:hover .btn--accent,
.section--awareness__card .about-cta:focus-within .btn--accent,
.section--awareness__card .about-cta:hover .about-cta__arrow,
.section--awareness__card .about-cta:focus-within .about-cta__arrow,
.site-footer .btn--accent:hover,
.site-footer .about-cta:hover .btn--accent,
.site-footer .about-cta:focus-within .btn--accent,
.site-footer .about-cta:hover .about-cta__arrow,
.site-footer .about-cta:focus-within .about-cta__arrow,
.section--reasons .btn--accent:hover,
.section--reasons .about-cta:hover .btn--accent,
.section--reasons .about-cta:focus-within .btn--accent {
	background: #fff;
	color: #000;
}

/* ---------- Scroll-to-top button ---------- */

/* The parent draws a lime disc with a white arrow: against the lime bands —
   Cities, Sectors We Cover, the services panel — the whole button
   disappeared. The disc is the dark text colour now, with a lime arrow and
   a white ring, so it stands out on white, on lime and on the dark bands
   alike. On hover it lifts a little and the ring turns lime, which reads
   wherever it sits rather than only over a pale section. */
.scroll-top {
	width: 48px; height: 48px;
	background: var(--color-text);
	color: var(--color-accent);
	border: 2px solid #fff;
	box-shadow: 0 8px 20px rgb(27 27 40 / 0.25);
	transition: opacity var(--transition), transform var(--transition),
		background var(--transition), border-color var(--transition),
		box-shadow var(--transition);
}
.scroll-top:hover,
.scroll-top:focus-visible {
	background: var(--color-text);
	color: var(--color-accent);
	border-color: var(--color-accent);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgb(27 27 40 / 0.35);
}

/* A white ring, hairlined in the text colour so it reads on lime, on white
   and on the dark bands alike, keeps growing out of the disc and fading,
   and the arrow nudges up
   on the same beat, so the button invites a click instead of sitting
   there. Both run only while it is on screen — there is nothing to animate
   behind an invisible button — and both stop on hover, where the lift and
   the lime ring take over. The ring is a pseudo-element rather than the
   button's own transform, which hover and .is-visible already use.

   prefers-reduced-motion turns the loop off; the button still lifts and
   still changes colour. */
@keyframes jezben-scroll-ping {
	0% { transform: scale(1); opacity: 0.75; }
	70% { transform: scale(1.45); opacity: 0; }
	100% { transform: scale(1.45); opacity: 0; }
}

@keyframes jezben-scroll-nudge {
	0%, 55%, 100% { transform: translateY(0); }
	28% { transform: translateY(-2px); }
}

.scroll-top::after {
	content: "";
	position: absolute; inset: -2px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgb(27 27 40 / 0.35);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}
.scroll-top.is-visible::after {
	animation: jezben-scroll-ping 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.scroll-top.is-visible svg {
	animation: jezben-scroll-nudge 2.4s ease-in-out infinite;
}
.scroll-top:hover::after,
.scroll-top:focus-visible::after {
	animation-play-state: paused;
	opacity: 0;
}
.scroll-top:hover svg,
.scroll-top:focus-visible svg {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.scroll-top.is-visible::after,
	.scroll-top.is-visible svg { animation: none; }
}

/* ---------- Footer form: white placeholders ---------- */

/* The parent sets the footer form's placeholders at 70% white (60% in the
   country search), so Name, Email, Phone and Message read grey beside the
   full-white "Type of Services" and "+971" buttons. All of them are white
   now. */
.site-footer .form__control::placeholder,
.site-footer .select__search-input::placeholder {
	color: #fff;
	opacity: 1;
}

/* ---------- FAQ: plus returns as the answer slides shut ---------- */

/* child.js slides the answers. While one is closing its item keeps
   `open` until the slide ends, so the minus would linger; .is-closing
   brings the plus back the moment the question is clicked. */
.faq__item.is-closing .faq__mark::after { opacity: 1; }

/* ---------- Dark buttons on the lime band ---------- */

/* Three places put a dark pill with lime type on an accent ground, and all
   three hovered from --color-text to #000 — two near-blacks, so the button
   barely acknowledged the cursor:

     .section--reasons                    the Location band
     .single-service .section--process    every service page
     .form--inline .form__submit          the banner estimate card

   They now invert to white with black text, the same idea as everywhere
   else: hover lands on the opposite of what the button sits on.

   Each arrow is driven from its wrapper so the pair moves together — and
   the estimate card's arrow is pointer-events:none, so wrapper hover is the
   only way it could respond at all. */
.section--reasons .btn:hover,
.section--reasons .about-cta:hover .btn,
.section--reasons .about-cta:focus-within .btn,
.section--reasons .about-cta:hover .about-cta__arrow,
.section--reasons .about-cta:focus-within .about-cta__arrow,
.single-service .section--process .btn:hover,
.single-service .section--process .about-cta:hover .btn,
.single-service .section--process .about-cta:focus-within .btn,
.single-service .section--process .about-cta:hover .about-cta__arrow,
.single-service .section--process .about-cta:focus-within .about-cta__arrow,
.form--inline .form__submit .btn:hover,
.form--inline .form__submit:hover .btn,
.form--inline .form__submit:focus-within .btn,
.form--inline .form__submit:hover .about-cta__arrow,
.form--inline .form__submit:focus-within .about-cta__arrow {
	background: #fff;
	color: #000;
}

/* At rest those same three read lime type on the dark pill, which is the
   accent sitting on the accent band. White type reads cleanly on black,
   and the arrow follows it so the pair stays one colour. The hover rule
   above carries :hover, so it still wins and inverts them to white. */
.section--reasons .btn,
.section--reasons .about-cta__arrow,
.single-service .section--process .btn,
.single-service .section--process .about-cta__arrow,
.form--inline .form__submit .btn,
.form--inline .about-cta__arrow {
	color: #fff;
}

/* ---------- Why-us reasons: three across ---------- */

/* Six entries in two columns made each one wide and heavy. Three across
   halves the row count and cuts each entry down.

   The breakpoints are restated in full rather than only adding the desktop
   case: the parent's one-column rule lives at max-width:700px and loads
   before this file, so a bare max-width:1100px rule here would out-order it
   on a phone and leave two columns there. */
.reason-list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(1.25rem, 2.2vw, 2.5rem);
}

/* Back to two below 1280. The list only occupies 80% of the column, so a
   third track there costs more than it gains: at 1101px each entry came to
   241px, and with the theme's 72px copy indent that leaves 169px of text —
   three or four words a line. Two columns hold ~370px instead. */
@media (max-width: 1279px) {
	.reason-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The parent already stacks here, but its rule loads before this file, so
   the two-column rule above would out-order it on a phone. */
@media (max-width: 700px) {
	.reason-list { grid-template-columns: minmax(0, 1fr); }
}

/* 1024px up: two columns at 80% of the row, floated right beside the
   heading, with the space above the list and none below it. The services
   page keeps its own full-width three-across list, which is set with
   .page-services and outranks this. */
@media (min-width: 1024px) {
	.reason-list {
		list-style: none;
		margin: 0;
		padding: 50px 0px 0px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: clamp(2rem, 4vw, 4rem);
		width: 80%;
		float: right;
	}
}

/* ---------- Testimonials: no arrows ---------- */

/* The reviews scroll continuously now (see the marquee block below), so a
   prev/next pair has nothing to step through — the stepper it drove is
   detached from this section altogether.

   Scoped to this section on purpose: .slider-nav is shared with the blogs
   row and the services panel, which keep theirs. display:none also takes
   the buttons out of the tab order and the accessibility tree, so nothing
   invisible is left behind to land on. */
.section--testimonials .slider-nav {
	display: none;
}

/* ---------- Testimonials: continuous marquee ---------- */

/* The reviews stepped a card every 3s; they now scroll continuously and
   stop under the cursor, detached from the stepper in assets/js/child.js,
   which also sets --marquee-duration from the measured run.

   The same exact-wrap reasoning as the logos holds: the run is rendered
   twice and the spacing is each item's padding-inline, not a flex gap, so
   the track is precisely two runs wide and -50% lands on the copy. The
   keyframes are shared with the logo strip for that reason. */
/* The row can be dragged by hand: assets/js/child.js stops the scroll under
   the pointer and hands the new position back when it is let go. pan-y
   leaves vertical page scrolling to the browser on touch screens while a
   sideways swipe drags the row. While dragging, text is not selected and
   the avatars cannot be pulled out as images. */
.testimonials--marquee .testimonial-slider__viewport {
	cursor: grab;
	touch-action: pan-y;
}
.testimonials--marquee.is-dragging .testimonial-slider__viewport { cursor: grabbing; }
.testimonials--marquee.is-dragging .testimonials { user-select: none; }
.testimonials--marquee .testimonials img { -webkit-user-drag: none; }

.testimonials--marquee .testimonials {
	/* The stepper's easing would fight a linear animation. */
	transition: none;
	animation: jezben-logo-marquee var(--marquee-duration, 40s) linear infinite;
}

/* Pausing matters more here than on the logos: these are paragraphs, and
   hovering is how someone stops to read one. focus-within covers keyboard
   users, whose focus would otherwise ride off-screen with the card. */
.testimonials--marquee .testimonial-slider:hover .testimonials,
.testimonials--marquee .testimonial-slider:focus-within .testimonials {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.testimonials--marquee .testimonials { animation: none; }
}

/* ---------- Blog arrows: a filled hover ---------- */

/* The blog arrows are a 1px ring with a glyph inside. On hover the parent
   turned both lime (--color-accent-dark) on a white ground, so the button
   all but vanished at the moment it was being pointed at. It also scaled
   to 1.05, and the left button sits flush with its box, so the growth
   pushed a sliver past the edge — the cut-off seen on hover only.

   Now the disc fills with the accent and the glyph stays dark, and the
   scale is dropped so nothing grows past its box. :active covers the
   press, focus-visible the keyboard; a mouse click leaves no lime behind
   because focus-visible does not match it. */
.section--blogs .slider-nav__btn--sm {
	transition:
		background var(--transition),
		border-color var(--transition),
		color var(--transition);
}

.section--blogs .slider-nav__btn--sm:hover,
.section--blogs .slider-nav__btn--sm:focus-visible,
.section--blogs .slider-nav__btn--sm:active {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text);
	transform: none;
}

/* ---------- WhatsApp button: right side ---------- */

/* Click to Chat renders #ht-ctc-chat with an inline style of
   bottom:70px; left:15px on every device — the plugin's own mobile setting
   never reaches the markup, and its script never rewrites the position.
   The override lives here rather than in the plugin's settings because
   those are database values, and a git deploy would not carry them.
   !important is needed to beat the inline style, and nothing in the
   plugin's own stylesheet competes with it.

   It stacks above the scroll-to-top disc, which is 44px at bottom and
   right 16px, so its top edge sits 60px up. bottom:72px leaves a 12px gap
   above that, and right:13px centres this 50px disc over the 44px one, so
   the two read as one column. Both are fixed sizes at every width, so one
   set of numbers holds on every screen.

   (It sat at 86px while the reCAPTCHA badge was showing, to clear the
   badge's top edge at 74px. The badge is hidden below, so that clearance
   has gone.) */
#ht-ctc-chat {
	left: auto !important;
	right: 13px !important;
	bottom: 72px !important;
}

/* ---------- reCAPTCHA badge: hidden ---------- */

/* visibility rather than display: reCAPTCHA v3 scores from inside the
   badge's iframe, and display:none can stop it producing a token — at
   which point every form on the site fails verification. Hidden this way
   it keeps working, takes no clicks, and is gone at every width.

   Google's terms allow hiding the badge only if the reCAPTCHA branding
   appears visibly in the user flow instead: "This site is protected by
   reCAPTCHA and the Google Privacy Policy and Terms of Service apply."
   That line is not on the site yet. */
.grecaptcha-badge {
	visibility: hidden;
}

/* ---------- Footer: background photograph at full strength ---------- */

/* The photograph comes from Theme Settings, as live's footer-bg.jpg, and
   the theme drew it at 35% over the dark ground, which flattened its
   curves into the colour. Live shows it at full strength, anchored at
   the top so the lighter curve sits in the top-right corner. */
.site-footer::before {
	opacity: 1;
	background-position: center top;
}

/* ---------- Footer: phone and email beside the logo ---------- */

/* The phone, email, hours and address sat in two columns of their own on
   the far right, which spread the footer over five columns and left most
   of them half empty. Now the phone number and email share the logo's
   row, and below it sit the opening hours and address, the page menu, and
   on desktop the services menu split over two columns — the first five
   services, then the rest.

   The markup is unchanged. The two info columns become display:contents
   so each detail is a grid item of the footer row and can be placed on
   its own; they are plain divs with no role, so nothing is lost for
   assistive technology. Phone and email are found by their tel: and
   mailto: links rather than by position, so reordering the details in
   Theme Settings does not scramble the layout. */
.site-footer__columns > .footer-col--info { display: contents; }

@media (min-width: 768px) {
	.site-footer__columns {
		--footer-gap: clamp(24px, 3.5vw, 64px);
		grid-template-rows: auto auto 1fr;
		gap: 22px var(--footer-gap);
	}
	.site-footer__brand {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 18px;
	}
	/* Hours and address fall into the first column, under the logo. They
	   hold the top of their row: the address row is the stretchy 1fr one,
	   and a stretched detail would push its label away from its value. */
	.site-footer__columns .footer-info { grid-column: 1; align-self: start; }
	/* The same bottom margin as the logo, so both sit centred on it. */
	.site-footer__columns .footer-info:has(a[href^="tel:"]),
	.site-footer__columns .footer-info:has(a[href^="mailto:"]) {
		grid-row: 1;
		align-self: center;
		margin-bottom: 18px;
	}
	.site-footer__columns .footer-info:has(a[href^="tel:"]) { grid-column: 2; }
	.site-footer__columns .footer-info:has(a[href^="mailto:"]) { grid-column: 3; }
	/* The menus start on the second row and run to the bottom; the last row
	   is 1fr so their height lands there, and the hours and address keep
	   their own spacing instead of being spread out to match. */
	.site-footer__columns > nav.footer-col { grid-column: 2; grid-row: 2 / -1; }
	.site-footer__columns > nav.footer-col + nav.footer-col { grid-column: 3; }
}

/* Desktop: four columns. The services menu spans the last two tracks and
   splits its own list over a two-column grid with the same gap, so its
   halves line up exactly with the tracks beside them. It is the second
   nav in the markup; `nav + nav` only matches when both menus are
   assigned, so a lone menu is never split. dense packing lets the sixth
   item start back at the top of the second column instead of below the
   fifth. */
@media (min-width: 1101px) {
	.site-footer__columns {
		grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
	}
	.site-footer__columns > nav.footer-col + nav.footer-col { grid-column: 3 / span 2; }
	.site-footer__columns > nav.footer-col + nav.footer-col .footer-col__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: dense;
		column-gap: var(--footer-gap);
	}
	.site-footer__columns > nav.footer-col + nav.footer-col .footer-col__list > li:nth-child(-n + 5) { grid-column: 1; }
	.site-footer__columns > nav.footer-col + nav.footer-col .footer-col__list > li:nth-child(n + 6) { grid-column: 2; }
}

/* Tablets: four columns would squeeze the longer service names onto two
   lines, so the services list stays one column, and the three columns
   push to the edges instead of stretching. */
@media (min-width: 768px) and (max-width: 1100px) {
	.site-footer__columns {
		grid-template-columns: minmax(0, 22rem) auto auto;
		justify-content: space-between;
	}
}

/* Phones: the logo takes the full width, then the details in pairs —
   phone and email, hours and address — then the two menus side by side.
   order moves the details ahead of the menus, which come first in the
   markup. */
@media (max-width: 767px) {
	.site-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 16px;
	}
	.site-footer__brand { grid-column: 1 / -1; }
	.site-footer__columns .footer-info { order: 1; }
	.site-footer__columns > nav.footer-col { order: 2; margin-top: 14px; }
}
/* Below 420px a half-width column cannot hold the email address, so each
   detail takes the full width. */
@media (max-width: 420px) {
	.site-footer__columns .footer-info { grid-column: 1 / -1; }
}

/* The labels were 60% white at 14px and the plain values — hours and the
   address — the same, so they faded into the background photograph. Labels
   now read in the accent colour and every value in full white, the same
   as the linked phone and email already were. */
.footer-info__label {
	color: var(--color-accent);
	font-weight: 500;
}
.footer-info__value { color: #fff; }

/* Phone and email drop their "Phone Number" / "Email" labels for the
   theme's phone and mail icons, the same ones the enquiry block above
   uses, in the accent colour. The labels stay readable to screen readers
   (the screen-reader-text pattern), so the links keep their context. The
   icons are masks of the theme's SVGs, so they take any colour and need
   no markup change. The text is set at the H7 size from the type scale,
   and the icon is 1em so it keeps its proportion at every step. */
.site-footer__columns .footer-info:has(a[href^="tel:"]) .footer-info__label,
.site-footer__columns .footer-info:has(a[href^="mailto:"]) .footer-info__label {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.site-footer__columns .footer-info__value a[href^="tel:"],
.site-footer__columns .footer-info__value a[href^="mailto:"] {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: var(--h7-size);
	line-height: var(--h7-lh);
	color: var(--color-accent);
	transition: color var(--transition);
}
/* Lime at rest, white on hover — the reverse of the menus, so the two
   contact links read as the footer's calls to action. The icon is
   currentColor, so it changes with the text. */
.site-footer__columns .footer-info__value a[href^="tel:"]:hover,
.site-footer__columns .footer-info__value a[href^="tel:"]:focus-visible,
.site-footer__columns .footer-info__value a[href^="mailto:"]:hover,
.site-footer__columns .footer-info__value a[href^="mailto:"]:focus-visible {
	color: #fff;
}
.site-footer__columns .footer-info__value a[href^="tel:"] {
	--footer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 6.5 6.5L17 13l4 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4 5.2 2 2 0 0 1 6 3Z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.site-footer__columns .footer-info__value a[href^="mailto:"] {
	--footer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.site-footer__columns .footer-info__value a[href^="tel:"]::before,
.site-footer__columns .footer-info__value a[href^="mailto:"]::before {
	content: "";
	flex: none;
	width: 1em; height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--footer-icon) center / contain no-repeat;
	mask: var(--footer-icon) center / contain no-repeat;
}

/* The remaining labels — opening hours and address — were 14px; they now
   use the H7 size from the type scale, the same as the phone and email
   beside them. */
.site-footer__columns .footer-info__label {
	font-size: var(--h7-size);
	line-height: var(--h7-lh);
}

/* The services menu heading reads in the accent colour, like the detail
   labels in the first column. */
.site-footer .footer-col__title { color: var(--color-accent); }

/* ---------- Blog cards: clean title, arrow in the corner ---------- */

/* The title underlined on hover and had a 4px white rule under it, with
   the arrow disc below that — three things stacked under the heading.
   Now the title stands alone: no underline, no rule, and it sits lower
   in the card, with the bottom inset matching the side inset. The arrow
   moves to the top-right corner on the accent colour — its arrow is
   drawn in black in the SVG, and the disc is currentColor — and appears
   when the card is hovered or its link has keyboard focus.

   These are the shared card styles, so the related-posts cards on single
   posts get the same treatment; only the inset is set per context. */
.blog-card__title a:hover { text-decoration: none; }
.blog-card__rule { display: none; }
.blog-card__arrow {
	position: absolute;
	top: 24px;
	right: 24px;
	margin: 0;
	color: var(--color-accent);
	opacity: 0;
	transform: scale(0.85);
	transition: opacity var(--transition), transform var(--transition);
	pointer-events: none;
}
/* The SVG draws its arrow at a quarter of the disc, which read as small.
   The disc goes from 54px to 64px and the arrow is scaled up inside it,
   about its own centre, so the arrow grows more than the disc does. */
.blog-card__arrow svg { display: block; width: 64px; height: 64px; }
.blog-card__arrow path { transform: scale(1.2); transform-origin: 27.3px 27.3px; }
.blog-card:hover .blog-card__arrow,
.blog-card:focus-within .blog-card__arrow {
	opacity: 1;
	transform: none;
}
/* Touch screens have no hover, so the arrow is simply there. */
@media (hover: none) {
	.blog-card__arrow { opacity: 1; transform: none; }
}

.section--blogs .blog-card__body { padding: 0 50px 50px; }
@media (max-width: 760px) {
	.blog-card__arrow { top: 18px; right: 18px; }
	.blog-card__arrow svg { width: 44px; height: 44px; }
	.section--blogs .blog-card__body { padding: 0 30px 30px; }
}

/* ---------- Services page: live's layout ---------- */

/* The services overview follows live's own design rather than the shared
   inner-page one: a photograph hero, the lead with its button under the
   heading, the service cards on a dark panel, the client logos, the
   reasons three across, the "What you can do" block beside a photograph,
   and the cities on a dark band. Everything here is scoped to the body
   class functions.php adds to that one page, so the other pages that
   share these sections are untouched. The images are the ones live uses,
   from the media library.

   Where a wrapper's children need to sit in another column, the wrapper
   becomes a subgrid spanning the whole grid rather than display:contents:
   the theme's scroll reveal hides each block until it is seen, and a box
   that display:contents removes is never seen, so its content would stay
   hidden. A spanning wrapper sits over its neighbours, so it passes
   pointer events through to them. */

/* Hero: the photograph inside a 10px frame, copy at the foot, the page
   name above the title rather than a breadcrumb trail. */
.page-services .section.section--hero {
	min-height: 500px;
	border-radius: 30px;
	justify-content: flex-end;
	padding-block: calc(var(--header-height) + 60px) 65px;
}
.page-services .section--hero .container {
	display: flex; flex-direction: column; align-items: flex-start;
	text-align: left;
}
.page-services .section--hero .breadcrumbs { display: none; }
/* The service detail pages (Mosquito Control and the rest) drop the
   "Home / Services / …" trail over the photo too. */
.single-service .section--hero .breadcrumbs { display: none; }
.page-services .section--hero__body { order: -1; margin: 0 0 18px; max-width: none; }
.page-services .section--hero__body p { margin: 0; font-size: var(--body-size); line-height: 1.5; }
.page-services .section--hero__title {
	margin: 0; max-width: 21ch; white-space: normal;
	font-size: var(--h1-size); line-height: 1.12;
}

/* Lead: heading and button on the left, the copy and a numbered list on
   the right. */
.page-services .section--lead__inner { grid-template-rows: auto 1fr auto; row-gap: 50px; }
.page-services .section--lead__head { grid-column: 1; grid-row: 1; }
.page-services .section--lead__body {
	grid-column: 1 / -1; grid-row: 1 / -1;
	display: grid;
	grid-template-columns: subgrid; grid-template-rows: subgrid;
	gap: normal;
	pointer-events: none;
}
.page-services .section--lead__body > * { pointer-events: auto; }
.page-services .section--lead__body > .entry-content { grid-column: 2; grid-row: 1 / 3; }
.page-services .section--lead__body > .check-list { grid-column: 2; grid-row: 3; }
.page-services .section--lead__body > .btn { grid-column: 1; grid-row: 2; align-self: start; justify-self: start; }
/* The opening quote hangs in the margin, so both lines of the heading
   start at the same edge, as live sets it. */
.page-services .section--lead .section__heading {
	padding-left: 0.4em;
	font-size: var(--h3-size); line-height: 1.35;
}
.page-services .section--lead .jz-quote:not(.jz-quote--close) { display: inline-block; width: 0.4em; margin-left: -0.4em; }
.page-services .section--lead .entry-content p + p { margin-top: 1.75em; }
.jz-quote { color: var(--color-accent); }

/* Live numbers these lists 01, 02, 03 in grey figures, 2px under the
   item text at every screen size. */
.page-services .section--lead .check-list,
.page-services .section--cta .entry-content ul { counter-reset: jz-num; }
.page-services .section--lead .check-list { gap: 20px; }
.page-services .section--lead .check-list__item,
.page-services .section--cta .entry-content li {
	counter-increment: jz-num;
	display: flex; align-items: baseline; gap: 10px;
}
.page-services .section--lead .check-list__mark { display: none; }
.page-services .section--lead .check-list__item::before,
.page-services .section--cta .entry-content li::before {
	content: counter(jz-num, decimal-leading-zero);
	flex: none;
	font-size: calc(var(--h6-size) - 2px); line-height: 1; font-weight: 400;
	color: rgb(30 34 33 / 0.35);
}
.page-services .section--lead .check-list__text,
.page-services .section--cta .entry-content li {
	font-size: var(--h6-size); line-height: 1.35; font-weight: 400;
	color: var(--color-text); text-transform: none;
}

/* The plain buttons here are live's lime pill with the arrow disc joined
   on, the same pairing as .about-cta, drawn on the one link. */
.page-services .section--lead__body > .btn,
.page-services .section--cards .container > .btn {
	position: relative;
	margin-right: var(--button-height);
	background: var(--color-accent); border-color: var(--color-accent);
	color: var(--color-on-accent);
}
.page-services .section--lead__body > .btn::after,
.page-services .section--cards .container > .btn::after {
	content: "";
	position: absolute; top: -1px; right: calc(-1 * var(--button-height) - 1px);
	width: var(--button-height); height: var(--button-height);
	border-radius: 50%;
	background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%231b1b28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
	transition: background-color var(--transition);
}
/* On white it inverts to dark; on the dark panel, to white. */
.page-services .section--lead__body > .btn:hover,
.page-services .section--lead__body > .btn:focus-visible {
	background: var(--color-text); border-color: var(--color-text); color: #fff;
}
.page-services .section--lead__body > .btn:hover::after,
.page-services .section--lead__body > .btn:focus-visible::after {
	background-color: var(--color-text);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.page-services .section--cards .container > .btn:hover,
.page-services .section--cards .container > .btn:focus-visible {
	background: #fff; border-color: #fff; color: var(--color-text);
}
.page-services .section--cards .container > .btn:hover::after,
.page-services .section--cards .container > .btn:focus-visible::after { background-color: #fff; }

/* Service cards: white tiles on a dark panel, the head set left with the
   button opposite, "our services" as the eyebrow above the heading. */
.page-services .section--cards {
	margin-inline: 10px;
	border-radius: 30px;
	padding-block: clamp(3.5rem, 7vw, 100px);
	background: var(--color-text) url("../../../../uploads/2024/11/services-bg.jpg") center / cover no-repeat;
	color: #fff;
}
.page-services .section--cards > .container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 40px;
	align-items: center;
}
.page-services .section--cards .entry-content {
	grid-column: 1; grid-row: 1;
	margin: 0 0 22px; max-width: none; text-align: left;
	color: rgb(255 255 255 / 0.6);
	font-size: 14px; line-height: 1.4; font-weight: 500;
	text-transform: uppercase; letter-spacing: 0.02em;
}
.page-services .section--cards .entry-content p { margin: 0; }
.page-services .section--cards .section__heading {
	grid-column: 1; grid-row: 2;
	margin: 0; max-width: 23ch; text-align: left;
	color: #fff; font-size: var(--h2-size); line-height: 1.25;
}
.page-services .section--cards .container > .btn { grid-column: 2; grid-row: 2; align-self: center; }
.page-services .section--cards .card-grid { grid-column: 1 / -1; grid-row: 3; margin-top: 80px; gap: 30px; }
.page-services .reason-card {
	background: #fff; color: var(--color-text);
	border-radius: 22px; padding: 35px;
	gap: 16px;
}
.page-services .reason-card__number { display: none; }
.page-services .reason-card__icon img { width: 50px; height: 50px; }
/* Hovering a card lights its icon: a lime disc grows in behind it, the
   same one the hero pest strip uses. The icon box is pinned to its own
   50px square so the disc centres on the icon, not the card, and the disc
   is drawn behind it without moving anything. The icon multiplies onto
   the disc, so any white ground in the upload takes the lime. Keyboard
   focus on the card's link shows it too; touch screens only get it on
   focus, so a tap never leaves it stuck on. */
.page-services .section--cards .reason-card__icon {
	position: relative;
	isolation: isolate;
	justify-self: start;
	width: 50px;
	height: 50px;
}
.page-services .section--cards .reason-card__icon::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: var(--color-accent);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.6);
	transition: opacity 250ms ease, transform 250ms ease;
}
.page-services .section--cards .reason-card__icon img { mix-blend-mode: multiply; }
@media (hover: hover) {
	.page-services .section--cards .reason-card:hover .reason-card__icon::before {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}
.page-services .section--cards .reason-card:focus-within .reason-card__icon::before {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
	.page-services .section--cards .reason-card__icon::before { transition: opacity 250ms ease; }
}
.page-services .reason-card__title { color: var(--color-text); }
.page-services .reason-card__text { color: rgb(27 27 40 / 0.55); }
/* "Explore more" is a plain link with an arrow, no pill, in the normal dark
   text colour. On hover and keyboard focus the arrow nudges on. */
.page-services .reason-card .btn,
.page-services .reason-card .btn:hover,
.page-services .reason-card .btn:focus-visible {
	justify-self: start;
	display: inline-flex; align-items: center; gap: 14px;
	height: auto; min-height: 0; margin-top: 12px; padding: 0;
	background: none; border: 0; border-radius: 0; box-shadow: none;
	color: var(--color-text);
	font-size: 18px; line-height: 1.4; font-weight: 500;
	text-transform: none; letter-spacing: 0;
}
.page-services .reason-card .btn::after {
	content: "";
	width: 20px; height: 20px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--transition);
}
.page-services .reason-card .btn:hover::after,
.page-services .reason-card .btn:focus-visible::after { transform: translateX(4px); }

/* Why us: the heading over the reasons, three across the full width. The
   shared layout floats the list at 80% beside the heading. */
.page-services .section--why-us__inner .section__heading { white-space: normal; max-width: 22ch; }
.page-services .reason-list {
	float: none; width: 100%;
	padding: 70px 0 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 4vw, 60px);
}
.page-services .reason { --reason-indent: 58px; }
.page-services .reason__icon { flex-basis: 44px; }
.page-services .reason__icon svg,
.page-services .reason__icon img { width: 44px; height: 44px; }
.page-services .reason__title { font-weight: 500; }
.page-services .reason__text { line-height: 1.75; }

/* What you can do: the photograph on the left with the button over its
   foot, the heading, copy and a numbered two-by-two list opposite, on
   live's pale ground. The copy spans the grid so its button can share
   the photograph's cell, and sits above the photograph for that. */
.page-services .section--cta {
	margin-inline: 0; border-radius: 0;
	padding-block: 65px;
	text-align: left; color: var(--color-text);
	background: #ebebeb url("../../../../uploads/2024/11/what-you-can-bg.jpg") center / cover no-repeat;
}
.page-services .section--cta::before { content: none; }
.page-services .section--cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 585fr) minmax(0, 560fr);
	grid-template-rows: auto auto;
	column-gap: clamp(2rem, 8vw, 110px);
	row-gap: 0;
}
.page-services .section--cta__copy {
	grid-column: 1 / -1; grid-row: 1 / -1;
	display: grid;
	grid-template-columns: subgrid; grid-template-rows: subgrid;
	position: relative; z-index: 1;
	pointer-events: none;
}
.page-services .section--cta__copy > * { pointer-events: auto; }
.page-services .section--cta__media { grid-column: 1; grid-row: 1 / -1; align-self: stretch; margin: 0; }
/* It fills its cell, so the button over its foot stays on it whichever
   column runs taller; the ratio sets its height when the copy is shorter. */
.page-services .section--cta__media img {
	display: block; width: 100%; height: 100%; margin: 0;
	aspect-ratio: 585 / 510; object-fit: cover;
	border-radius: 20px;
}
.page-services .section--cta__action {
	grid-column: 1; grid-row: 1 / -1;
	align-self: end; justify-self: end;
	margin: 0 16px 16px 0;
}
.page-services .section--cta .section__heading {
	grid-column: 2; grid-row: 1; align-self: end;
	margin: 0 0 24px; max-width: none;
	color: var(--color-text); font-size: var(--h2-size); line-height: 1.2;
}
.page-services .section--cta .entry-content {
	grid-column: 2; grid-row: 2; align-self: start;
	margin: 0; max-width: none;
	color: rgb(27 27 40 / 0.8);
}
.page-services .section--cta .entry-content ul {
	list-style: none; margin: 40px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 30px;
}
.page-services .section--cta .entry-content li { margin: 0; }

/* Cities: the dark band live runs on this page. */
.page-services .section--cities {
	margin-inline: 10px;
	padding-block: 88px;
	background: var(--color-text); color: #fff;
}
.page-services .section--cities .section__heading { color: #fff; font-size: var(--h4-size); line-height: 1.33; }
.page-services .section--cities .section__eyebrow { color: rgb(255 255 255 / 0.6); }
.page-services .section--cities .city-list__item { background: transparent; border-color: rgb(255 255 255 / 0.3); color: #fff; }
.page-services .section--cities .city-list__item:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

/* Tablets. */
@media (max-width: 1100px) {
	.page-services .reason-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	/* Lead: heading, button, copy, list — live's phone order. */
	.page-services .section--lead__inner { grid-template-rows: none; row-gap: 30px; }
	.page-services .section--lead__head { grid-row: auto; }
	.page-services .section--lead__body {
		grid-column: 1; grid-row: auto;
		grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
		gap: 30px;
	}
	.page-services .section--lead__body > .entry-content,
	.page-services .section--lead__body > .check-list,
	.page-services .section--lead__body > .btn { grid-column: 1; grid-row: auto; }
	.page-services .section--lead__body > .btn { order: -1; }

	/* What you can do: photograph and button, then the copy. */
	.page-services .section--cta__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
	}
	.page-services .section--cta__media,
	.page-services .section--cta__action { grid-row: 1; }
	.page-services .section--cta .section__heading { grid-column: 1; grid-row: 2; margin-top: 30px; }
	.page-services .section--cta .entry-content { grid-column: 1; grid-row: 3; }
	.page-services .section--cta__media { align-self: start; }
	.page-services .section--cta__media img { height: auto; }
}
/* Phones. */
@media (max-width: 620px) {
	.page-services .section.section--hero { min-height: 420px; padding-bottom: 40px; }
	.page-services .section--cards > .container { grid-template-columns: minmax(0, 1fr); }
	.page-services .section--cards .container > .btn { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 30px; }
	.page-services .section--cards .card-grid { grid-row: 4; margin-top: 50px; gap: 20px; }
	.page-services .reason-card { padding: 28px; }
	.page-services .section--lead__body > .btn { white-space: nowrap; padding-inline: 22px; font-size: 13px; }
	/* Why us: one column, each reason centred under its icon. */
	.page-services .reason-list { grid-template-columns: minmax(0, 1fr); padding-top: 30px; }
	.page-services .reason { text-align: center; }
	.page-services .reason__head { flex-direction: column; align-items: center; }
	.page-services .reason__text { padding-left: 0; }
	.page-services .section--cta .entry-content ul { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.page-services .section--cities { padding-block: 56px; }
}
/* The narrowest phones cannot hold the one-line lead button and its disc
   at 13px, so the label tightens a step further. */
@media (max-width: 380px) {
	.page-services .section--lead__body > .btn { padding-inline: 16px; font-size: 12px; letter-spacing: 0.02em; }
}

/* ---------- Text selection in the theme colour ---------- */

/* Selected text used the browser's default blue. It now selects in the
   accent, with the dark text colour on it, which reads on the white
   sections, on the dark ones, and on text that is already lime. */
::selection {
	background: var(--color-accent);
	color: var(--color-on-accent);
}

/* On a lime ground a lime selection vanished — text selected in "What We
   Do", the service FAQ, Reasons, the industries panels, the service form
   card or the lime header bar could not be seen. Inside every lime area
   the selection turns black with white text instead. The list is every
   rule that paints the accent as a background, the small lime pills and
   discs included. */
:where(.single-service .section--process, .single-service .section--faq, .section--reasons, .section--industries__panel, .section--form__card, .site-header.is-stuck .site-header__inner, body.has-pill-header .site-header .site-header__inner, .btn--accent, .about-cta__arrow, .post-meta__tag, .section--numbered--steps .industry__number, .about-point__icon, .best-point__icon, .lead-mark__icon, .page-services .section--lead__body > .btn, .page-services .section--cards .container > .btn, .scroll-top)::selection,
:where(.single-service .section--process, .single-service .section--faq, .section--reasons, .section--industries__panel, .section--form__card, .site-header.is-stuck .site-header__inner, body.has-pill-header .site-header .site-header__inner, .btn--accent, .about-cta__arrow, .post-meta__tag, .section--numbered--steps .industry__number, .about-point__icon, .best-point__icon, .lead-mark__icon, .page-services .section--lead__body > .btn, .page-services .section--cards .container > .btn, .scroll-top) ::selection {
	background: #000;
	color: #fff;
}
/* The phone and tablet menu drawer lives inside the header bar but is dark,
   so it keeps the lime selection. The selector is built to out-rank the
   header-bar entry in the list above. */
@media (max-width: 1100px) {
	html body .site-header .site-header__inner .site-nav ::selection {
		background: var(--color-accent);
		color: var(--color-on-accent);
	}
}

/* ---------- Form thank-you line under the fields ---------- */

/* assets/js/child.js moves each form's status line up to sit straight
   under the fields — under the message box where there is one — instead
   of under the submit button. It stays empty until someone submits, and
   an empty line there would only push the button down, so it takes no
   room until it has something to say. */
.form__status:empty { display: none; }

/* The success line is lime everywhere, which only reads on the dark
   footer. On the lime estimate card it vanished into the card, and on the
   white enquiry pop-up and the Contact page's pale ground it was barely
   there; all three read dark. */
.form--inline .form__status.is-success,
.form--compact .form__status.is-success,
.section--contact__form .form__status.is-success {
	color: var(--color-text);
}

/* The estimate card zeroes the line's top margin, which left it touching
   the last field once it sits under the fields; it keeps a small gap. */
.form--inline .form__status { margin-top: 14px; }

/* ---------- Service pages: related card title on hover ---------- */

/* The sibling-service cards on a service page are whole links, so the
   site's link hover greyed the title. On these pages only, the title
   turns to the accent while its card is hovered or has keyboard focus. */
.single-service .related-service__title { transition: color var(--transition); }
.single-service .related-service__link:hover .related-service__title,
.single-service .related-service__link:focus-visible .related-service__title {
	color: var(--color-accent);
}

/* ---------- Blog cards: the whole card opens the post ---------- */

/* Only the title was a link, so a click on the photograph or the space
   around the title did nothing. The title link's own layer is stretched
   over the card, so a click anywhere opens that post — one link, so
   there is still a single stop for the keyboard and screen readers. The
   card is already the positioned box, and the blog slider already
   cancels the click that ends a drag. Keyboard focus outlines the card. */
.blog-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.blog-card__title a:focus-visible { outline: none; }
.blog-card:has(.blog-card__title a:focus-visible) {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

/* ---------- Services dropdown: lime hover ---------- */

/* Hovering an entry in the Services dropdown laid a pale grey box behind
   it, and once the header was stuck the theme's nav-wide hover faded it
   to 65% as well, which read as grey. On the desktop dropdown the box is
   now the accent lime, in the theme's own rounded shape, with the words
   and their icon in the dark text colour so they read clearly on it, and
   the fade is gone. The icons are inline SVG with their colours written
   in, so their fills and strokes are pointed at the link's colour to
   follow it. Keyboard focus looks the same.

   The nav's id carries it past the theme's fade rules without
   !important. The phone panel is dark and keeps its own styling. */
@media (min-width: 1101px) {
	#primary-nav .mega__list a:hover,
	#primary-nav .mega__list a:focus-visible,
	#primary-nav .mega__list .current-menu-item > a {
		background: var(--color-accent);
		color: var(--color-on-accent);
		opacity: 1;
	}
	#primary-nav .mega__list a:hover .menu-item__icon [fill]:not([fill="none"]),
	#primary-nav .mega__list a:focus-visible .menu-item__icon [fill]:not([fill="none"]),
	#primary-nav .mega__list .current-menu-item > a .menu-item__icon [fill]:not([fill="none"]) {
		fill: currentColor;
	}
	#primary-nav .mega__list a:hover .menu-item__icon [stroke]:not([stroke="none"]),
	#primary-nav .mega__list a:focus-visible .menu-item__icon [stroke]:not([stroke="none"]),
	#primary-nav .mega__list .current-menu-item > a .menu-item__icon [stroke]:not([stroke="none"]) {
		stroke: currentColor;
	}
}
/* The page you are on is marked in the dropdown the same way: the lime box
   on desktop, and the accent colour for its words in the dark phone menu,
   which keeps its own styling. */
@media (max-width: 1100px) {
	#primary-nav .mega__list .current-menu-item > a { color: var(--color-accent); }
}

/* ---------- Footer: hours beside the contacts, socials under the address ---------- */

/* assets/js/child.js tags the opening hours and the address, gives the
   page menu a "Quick Links" heading, moves the social icons up under the
   address, and marks the columns --arranged; these rules only apply once
   it has. On desktop the hours join the logo's row after the phone and
   email, read on one line ("Opening Hours 24/7") at the same size, and
   the address and the social icons sit under the logo. On tablets there
   is no room for a fourth item on that row, so the hours sit under the
   logo with the address below. On phones the icons take a full row after
   the details.

   With the icons gone, the copyright is alone in the bottom bar and sits
   in its middle. :has() keeps the theme's spread-out bar for as long as
   the icons are still in it. */
.site-footer__base:not(:has(.social-links)) { justify-content: center; text-align: center; }
.site-footer__social { margin-top: 4px; }

@media (min-width: 1101px) {
	.site-footer__columns--arranged .footer-info--hours {
		grid-column: 4; grid-row: 1;
		align-self: center; margin-bottom: 18px;
		display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.35em;
	}
	.site-footer__columns--arranged .footer-info--hours .footer-info__value {
		font-size: var(--h7-size); line-height: var(--h7-lh);
	}
	.site-footer__columns--arranged .footer-info--address { grid-column: 1; grid-row: 2; }
	.site-footer__columns--arranged .site-footer__social { grid-column: 1; grid-row: 3; align-self: start; }
}
@media (min-width: 768px) and (max-width: 1100px) {
	.site-footer__columns--arranged { grid-template-rows: auto auto auto 1fr; }
	.site-footer__columns--arranged .footer-info--hours { grid-column: 1; grid-row: 2; }
	.site-footer__columns--arranged .footer-info--address { grid-column: 1; grid-row: 3; }
	.site-footer__columns--arranged .site-footer__social { grid-column: 1; grid-row: 4; align-self: start; }
}
@media (max-width: 767px) {
	.site-footer__columns--arranged .site-footer__social { grid-column: 1 / -1; order: 1; }
}

/* The opening hours get a clock to match the phone and mail icons beside
   them: the same line weight, drawn as a mask in the label's accent
   colour, 1em square so it tracks the H7 size, with the same 12px gap. */
.site-footer__columns--arranged .footer-info--hours .footer-info__label::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 12px;
	vertical-align: -0.14em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M12 7v5l3 2' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M12 7v5l3 2' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* On narrow desktops the fourth column was a few pixels short of the
   clock, "opening Hours" and "24/7" on one line, so the value wrapped
   under the label. Between 1101 and 1279px that column takes a little of
   the first column's width. The services menu spans the last two tracks
   and splits its own list in the same 1 : 1.2 ratio, so its second half
   still starts exactly under the opening hours. */
@media (min-width: 1101px) and (max-width: 1279px) {
	.site-footer__columns--arranged { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); }
	.site-footer__columns--arranged > nav.footer-col + nav.footer-col .footer-col__list {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	}
}

/* ---------- Footer: services menu shortened on tablets and phones ---------- */

/* Eleven services made the menu the longest thing in the footer on
   narrower screens. Up to 1100px it shows the first four, down to Bed
   Bugs Control, then "View More" to the Services page, which
   assets/js/child.js adds. On desktop the whole list shows and the link
   stays hidden. The link reads in the accent with a small arrow, and
   turns white on hover, like the phone and email links. */
.site-footer__columns--arranged .footer-col__more { display: none; }
@media (max-width: 1100px) {
	.site-footer__columns--arranged > nav.footer-col + nav.footer-col .footer-col__list > li:nth-child(n + 5):not(.footer-col__more) {
		display: none;
	}
	.site-footer__columns--arranged .footer-col__more { display: block; }
	.site-footer__columns--arranged .footer-col__more a {
		display: inline-flex; align-items: center; gap: 8px;
		color: var(--color-accent);
		transition: color var(--transition);
	}
	.site-footer__columns--arranged .footer-col__more a::after {
		content: "";
		width: 0.9em; height: 0.9em;
		background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	.site-footer__columns--arranged .footer-col__more a:hover,
	.site-footer__columns--arranged .footer-col__more a:focus-visible { color: #fff; }
}

/* On tablets and phones the services menu sits right beside Quick Links,
   so the Quick Links "Services" item only repeated its heading; it is
   dropped there and stays on desktop. It is found by its link, so
   reordering the menu does not hide the wrong item. */
@media (max-width: 1100px) {
	.site-footer__columns--arranged > nav.footer-col:not(nav.footer-col + nav.footer-col) .footer-col__list > li:has(> a[href$="/services/"], > a[href$="/services"]) {
		display: none;
	}
}

/* ---------- Footer: tighter foot ---------- */

/* The copyright sat 90px under the last menu item and 60px above the
   bottom of the page (50px and 40px on phones), which left a band of
   empty footer at the foot of every page. Both gaps are roughly halved. */
.site-footer { padding-bottom: 28px; }
.site-footer__base { margin-top: 40px; }
@media (max-width: 620px) {
	.site-footer { padding-bottom: 24px; }
	.site-footer__base { margin-top: 30px; }
}

/* ---------- Footer: opening hours as one line ---------- */

/* The hours read "Opening Hours : 24/7" on one line and in one colour —
   the accent, like the phone and email beside them — at every size. The
   label is typed "opening Hours" in Theme Settings, so it is capitalised
   here and the colon is drawn after it; the clock stays before it. */
.site-footer__columns--arranged .footer-info--hours {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.35em;
	row-gap: 4px;
}
.site-footer__columns--arranged .footer-info--hours .footer-info__label { text-transform: capitalize; }
.site-footer__columns--arranged .footer-info--hours .footer-info__label::after { content: " :"; }
.site-footer__columns--arranged .footer-info--hours .footer-info__value {
	font-size: var(--h7-size);
	line-height: var(--h7-lh);
	color: var(--color-accent);
}
/* On desktop the line sits in the last footer column, which was 2 to 6px
   short of it at some widths (1280, 1366, 1480 and 1600px) as the heading
   size steps up, so "24/7" dropped under the label there. It is held on
   one line; at worst it runs a few pixels past its column into the empty
   margin on the right, and its left edge stays where it was. */
@media (min-width: 1101px) {
	.site-footer__columns--arranged .footer-info--hours { flex-wrap: nowrap; white-space: nowrap; }
	.site-footer__columns--arranged .footer-info--hours > * { flex: none; }
}
/* On phones the details sit in pairs, and half a phone is too narrow for
   the whole line up to about 520px, so "24/7" dropped under the label.
   The hours and the address each take the full width there instead; the
   phone and email stay paired above them. */
@media (max-width: 767px) {
	.site-footer__columns--arranged .footer-info--hours,
	.site-footer__columns--arranged .footer-info--address { grid-column: 1 / -1; }
}

/* ---------- Blog listing: smaller cards, copy centred on the image ---------- */

/* Each card took its height from the photograph: 320px wide at its own
   ratio made every card 376px tall, and the copy sat at the top with up to
   110px of empty card under the link. The photograph is now narrower and
   fills whatever height the copy needs, with a floor so it never turns
   into a strip, and the copy sits in the middle of the card. */
@media (min-width: 621px) {
	.section--blog-archive .post-card {
		grid-template-columns: 260px minmax(0, 1fr);
		min-height: 260px;
	}
	.section--blog-archive .post-card__media img {
		position: absolute; inset: 0;
		min-height: 0;
	}
	.section--blog-archive .post-card__body {
		align-content: center;
		padding: 24px 28px;
	}
}
/* Small tablets: at 260px the photograph left the copy under 210px to wrap
   in, so the cards grew past 500px tall. A narrower photograph and padding
   give the copy the room back. */
@media (min-width: 621px) and (max-width: 767px) {
	.section--blog-archive .post-card { grid-template-columns: 220px minmax(0, 1fr); }
	.section--blog-archive .post-card__body { padding: 20px 22px; }
}
/* Phones: the card stacks, the photograph drops to a 16:10 band instead of
   its full portrait height, and everything under it lines up on the left. */
@media (max-width: 620px) {
	.section--blog-archive .post-card__media img {
		height: auto; min-height: 0;
		aspect-ratio: 16 / 10;
	}
	.section--blog-archive .post-card__body { text-align: left; justify-items: start; }
	.section--blog-archive .post-card__more { justify-self: stretch; }
}

/* ---------- Section spacing on phones and from 1024px (tablet landscape) up ---------- */

/* Sections ran 64 to 100px above and below, and two white sections in a
   row stacked both paddings, so the white gap between them was up to
   192px. Every section is now --section-pad-y top and bottom (40px on
   phones up to 767px, 50px from 1024px, 60px from 1280px, 80px from
   1440px, 92px from 1920px; tablet portrait, 768 to 1023px, is not
   covered yet), and where a white section follows another
   white one it drops its top, so the gap between them is one step, not
   two.

   "White" is every section except the ones that paint their own ground,
   where the spacing sits inside the colour instead: the image heroes, the
   banner photo, the service form card, the home industries panel, the
   contact band, the lime and dark bands, and the page-specific ones (a
   service page's process, FAQ and cities; the services page's cards and
   cities). The CTA is a dark band everywhere except on a service page,
   where it is plain. The first four and the contact band are flush blocks
   with no padding of their own, so they keep it that way. The short white
   hero on inner pages ends on the same spacing and counts as white.

   The footer drops its 64px top margin after a white section, so the last
   section's bottom spacing is the only white above it. */
@media (max-width: 767px) {
	:root { --section-pad-y: 40px; }
}
@media (min-width: 1024px) {
	:root { --section-pad-y: 50px; }
}
@media (min-width: 1280px) {
	:root { --section-pad-y: 60px; }
}
@media (min-width: 1440px) {
	:root { --section-pad-y: 80px; }
}
@media (min-width: 1920px) {
	:root { --section-pad-y: 92px; }
}
@media (max-width: 767px), (min-width: 1024px) {
	.site-main > .section:not(.section--hero, .section--banner, .section--form, .section--industries, .section--contact:has(.section--contact__band)) {
		padding-block: var(--section-pad-y);
	}
	.site-main > .section.section--hero--compact { padding-bottom: var(--section-pad-y); }

	.site-main > :is(.section--hero--compact, .section:not(.section--hero, .section--banner, .section--form, .section--industries, .section--reasons, .section--services-panel, .section--surface:not(.section--cards), body:not(.single-service) .section--cta, .single-service .section--process, .single-service .section--faq, .single-service .section--cities, .page-services .section--cities, .page-services .section--cards, .section--contact:has(.section--contact__band)))
	+ .section:not(.section--hero, .section--banner, .section--form, .section--industries, .section--reasons, .section--services-panel, .section--surface:not(.section--cards), body:not(.single-service) .section--cta, .single-service .section--process, .single-service .section--faq, .single-service .section--cities, .page-services .section--cities, .page-services .section--cards, .section--contact:has(.section--contact__band)) {
		padding-top: 0;
	}

	.site-main:has(> .section:last-child) + .site-footer { margin-top: 0; }
	.site-main:has(> .section:last-child .section--contact__band) + .site-footer { margin-top: var(--section-pad-y); }
}

/* Phones: two inner spacings stacked on a section's own 40px. The home
   About column keeps a 48px bottom padding from the parent's stacked
   layout, and the testimonials track carries 10px under the cards as room
   for their shadow. The first goes, and the second is taken off the
   section's padding, so the white gap to the next section is the 40px
   alone. The two :not()s lift the second rule over the spacing rule
   above. About Us prints an empty check list after its quote, and as a
   grid row it still pulled in the 40px row gap; an empty list now takes
   no row. */
@media (max-width: 767px) {
	.section--about__body { padding-bottom: 0; }
	.section--lead__body > .check-list:not(:has(li)) { display: none; }
	.site-main > .section.section--testimonials:not(.section--hero):not(.section--banner) {
		padding-bottom: calc(var(--section-pad-y) - 10px);
	}
}

/* Phones: the icon points on service pages (.best-points) and on Location
   (.lead-marks) stay two by two. The parent stacks them one per row below
   480 and 560px, which left four short labels in a long column. */
@media (max-width: 767px) {
	.best-points,
	.lead-marks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 20px;
	}
}

/* Contact Us: the hero's "Contact Us" button only jumps to the form further
   down the same page, so it goes. It is matched by that #contact-form link
   rather than the page id, so it holds on any server; other pages' hero
   buttons link to /contact-us/ and the form's own submit button is not in
   the hero, so neither is touched. */
.section--hero .hero-actions:has(a[href="#contact-form"]) { display: none; }

/* Contact Us on phones: the section drops its side padding so the form
   band and the map run edge to edge, which left the call / mail / location
   rows against the screen edge. Their container takes the 15px the band
   uses, and the icon discs come down from 46px to 36px. Location's split
   contact block has no band, so it is not matched. */
@media (max-width: 767px) {
	.section--contact:has(.section--contact__band) .container:has(> .contact-methods) { padding-inline: 15px; }
	.section--contact:has(.section--contact__band) .contact-method__icon { flex-basis: 36px; width: 36px; height: 36px; }
	.section--contact:has(.section--contact__band) .contact-method__icon :is(svg, img) { width: 18px; height: 18px; }
}

/* ---------- Autofilled fields look like typed ones ---------- */

/* Picking a browser suggestion made Chrome paint its own pale background
   into the field, so the dark footer form went light behind the text.
   Chrome ignores background-color on an autofilled field, so its painted
   background is clipped to the glyphs instead, where the text fill covers
   it, and nothing of it shows.

   Chrome also forces the text to black while a field is autofilled, so the
   colour is restated here rather than left as currentColor: the page text
   colour by default — Contact Us, the estimate card, the enquiry popup —
   and white in the footer, whose form sits on the dark band. */
.form__control:-webkit-autofill,
.form__control:-webkit-autofill:hover,
.form__control:-webkit-autofill:focus,
.form__control:-webkit-autofill:active,
.select__search-input:-webkit-autofill {
	-webkit-text-fill-color: var(--color-text);
	-webkit-background-clip: text;
	background-clip: text;
	caret-color: var(--color-text);
}

.site-footer .form__control:-webkit-autofill,
.site-footer .form__control:-webkit-autofill:hover,
.site-footer .form__control:-webkit-autofill:focus,
.site-footer .form__control:-webkit-autofill:active,
.site-footer .select__search-input:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	caret-color: #fff;
}

/* Chrome also has a preview state, while a suggestion is highlighted but
   not yet committed, and it paints that text dark — unreadable on the
   footer's dark band. :-webkit-autofill does not always cover it, so the
   two internal states are restated. They sit in their own blocks: a
   browser that rejects these selectors drops only the block, leaving the
   :-webkit-autofill rules above intact. */
.form__control:-internal-autofill-previewed,
.form__control:-internal-autofill-selected,
.select__search-input:-internal-autofill-previewed,
.select__search-input:-internal-autofill-selected {
	-webkit-text-fill-color: var(--color-text);
	-webkit-background-clip: text;
	background-clip: text;
	caret-color: var(--color-text);
}

.site-footer .form__control:-internal-autofill-previewed,
.site-footer .form__control:-internal-autofill-selected,
.site-footer .select__search-input:-internal-autofill-previewed,
.site-footer .select__search-input:-internal-autofill-selected {
	-webkit-text-fill-color: #fff;
	caret-color: #fff;
}

/* ---------- Service dropdown: the scrollbar in the theme lime ---------- */

/* The options list scrolls past ten services, and the parent draws its
   thumb in the text colour at 28% — grey — with the footer painting its
   own white one over that. Both are the theme lime now, so the scrollbar
   belongs to the site rather than the platform. The track stays
   transparent and the width stays at the parent's 6px; only the colour
   changes, in every form: the footer, Contact Us, the estimate card and
   the enquiry popup. */
.select__list {
	scrollbar-color: var(--color-accent) transparent;
}
.select__list::-webkit-scrollbar-thumb { background: var(--color-accent); }
.select__list::-webkit-scrollbar-thumb:hover { background: var(--color-accent-dark); }

.site-footer .select__list {
	scrollbar-color: var(--color-accent) transparent;
}
.site-footer .select__list::-webkit-scrollbar-thumb { background: var(--color-accent); }
.site-footer .select__list::-webkit-scrollbar-thumb:hover { background: var(--color-accent-dark); }