/* =========================================================
   Jezben — base system
   Tokens first, then elements, then components. Fresh CSS;
   no framework, no page-builder residue.
   ========================================================= */

:root {
	/* Brand palette, taken from the live site's computed styles. */
	--color-text: #1b1b28;
	--color-muted: #69727d;
	--color-bg: #ffffff;
	--color-surface: #f5fff6;
	--color-border: #e2e5ea;
	--color-accent: #cbec79;        /* lime — the brand signature */
	--color-accent-dark: #b9dd5f;
	--color-on-accent: #1b1b28;     /* lime is light; text on it stays dark */
	--color-error: #b3261e;

	--font-body: "Niveau Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: var(--font-body);

	/* Type comes from Theme Settings → Type Scale, which emits
	   --h1-size/--h1-lh … per breakpoint. These aliases keep the
	   existing call sites working. */
	--step--1: var(--h7-size, 0.8125rem);
	--step-0: var(--body-size, 0.9375rem);
	--step-1: var(--h5-size, 1.375rem);
	--step-2: var(--h2-size, 2.75rem);
	--step-3: var(--h1-size, 4rem);
	--step-lh--1: var(--h7-lh, 1.5);
	--step-lh-0: var(--body-lh, 1.6);
	--step-lh-1: var(--h5-lh, 1.35);
	--step-lh-2: var(--h2-lh, 1.27);
	--step-lh-3: var(--h1-lh, 1);

	--header-height: 114px;      /* live header bar */
	--button-height: var(--button_height-size, 58px);
	--header-cta-size: var(--button-height);
	--logo-width: 200px;
	--nav-size: clamp(1rem, 0.125rem + 1.042vw, 1.375rem);   /* 22px @1920, 18px @1536 */
	--nav-gap: 40px;
	--nav-track: clamp(420px, 64.6vw - 290px, 950px);        /* 950 @1920, 702 @1536 */
	--header-gap: 60px;   /* nav block to CTA */
	--hero-min-height: 90vh;
	--hero-gap-top: 25.9vh;      /* header bottom to heading (live: 259/1000) */
	--hero-strip-gap: 9vh;       /* card bottom to hero base */
	--hero-strip-height: 162px;
	--pest-per-view: 8;
	--logos-per-view: 6;
	--testimonials-per-view: 3;
	--radius-lg: 30px;
	--radius-pill: 100px;

	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.75rem;
	--space-lg: 3rem;
	--space-xl: var(--section-space, 5rem);

	--container: 1200px;
	--page-margin: var(--page_margin-size, 64px);
	--radius: 8px;
	--transition: 200ms ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: var(--step-lh-0);
}

h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0 0 var(--space-sm); }
h1 { font-size: var(--step-3); line-height: var(--step-lh-3); }
h2 { font-size: var(--step-2); line-height: var(--step-lh-2); }
h3 { font-size: var(--step-1); line-height: var(--step-lh-1); }
h4 { font-size: var(--h4-size); line-height: var(--h4-lh); }
p { margin: 0 0 var(--space-sm); }

a { color: var(--color-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-muted); }

img, svg, video { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--color-text); outline-offset: 2px; }

.container { width: 90%; max-width: var(--container); margin-inline: auto; padding-inline: 0; }
/* On phones the 90% is too much on top of the section's own padding, so
   the container fills its parent and the .section padding sets the inset
   on its own. Containers used on their own — the archive, page and
   single templates, and the footer — keep an inset of their own, or they
   would sit flush against the screen edge. */
@media (max-width: 620px) {
	.container { width: auto; padding-inline: 15px; }
	/* Only a section's own container gives up its inset — the section's
	   padding already provides it. A container nested deeper, like the one
	   inside the lime industries panel, keeps its own or its content sits
	   flush against the panel edge. */
	.section > .container { padding-inline: 0; }
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--color-accent); color: #fff; padding: var(--space-xs) var(--space-sm);
}
.skip-link:focus { left: 0; }

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

/* The header floats over the hero: transparent with white type at rest,
   solid with dark type once the hero has scrolled past. */
.site-header {
	position: absolute; inset-inline: 0; top: 0; z-index: 100;
	background: transparent;
	transition: background var(--transition), box-shadow var(--transition);
}
/* Scrolled: a floating lime pill with dark type, as live. It drops in
   from above rather than appearing, and lifts back out the same way —
   the transform is on the inner bar so the fixed header itself keeps a
   stable position for the mega menu to hang from. */
.site-header.is-stuck {
	position: fixed;
	top: 14px;
	background: transparent;
	box-shadow: none;
}
.site-header__inner {
	transition:
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 260ms ease,
		background 260ms ease,
		box-shadow 260ms ease,
		min-height 260ms ease;
}
/* Mid-flight out: pulled up and faded, so un-sticking is not a jump. */
.site-header.is-unsticking .site-header__inner {
	transform: translateY(-120%);
	opacity: 0;
}
.site-header.is-stuck .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: jezben-header-drop 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes jezben-header-drop {
	from { transform: translateY(-120%); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header__inner { transition: none; }
	.site-header.is-stuck .site-header__inner { animation: none; }
	.site-header.is-unsticking .site-header__inner { transform: none; opacity: 1; }
}
/* The mark is lime-on-white at rest and needs to read on lime here. */
.site-header.is-stuck .site-logo { filter: brightness(0); }
.site-header.is-stuck .site-nav .site-nav__list a,
.site-header.is-stuck .site-title { color: var(--color-text); }
.site-header.is-stuck .site-nav__list a:hover { opacity: 0.65; }
.site-header.is-stuck .header-actions a.btn,
.site-header.is-stuck .header-actions a.header-actions__arrow {
	background: var(--color-text);
	color: #fff;
}
.site-header.is-stuck .header-actions a.btn:hover,
.site-header.is-stuck .header-actions a.header-actions__arrow:hover {
	background: #000;
	color: #fff;
}
/* The button keeps its dark ground when stuck, so the bars stay white —
   repainting them in the text colour made them vanish into it. */
.site-header.is-stuck .nav-toggle { background: var(--color-text); }
.site-header.is-stuck .nav-toggle__bar,
.site-header.is-stuck .nav-toggle__bar::before,
.site-header.is-stuck .nav-toggle__bar::after { background: #fff; }
.site-header__inner {
	display: flex; align-items: center; gap: 0;
	width: 90%; max-width: 1700px; margin-inline: auto;
	min-height: var(--header-height);
	position: relative;
}

.site-branding { flex: 0 0 auto; }
.site-branding__link { text-decoration: none; display: block; }
.site-logo { width: var(--logo-width); max-height: 64px; object-fit: contain; }
.site-title { font-weight: 500; font-size: var(--step-1); color: #fff; }
.site-header.is-stuck .site-title { color: var(--color-text); }

/* Nav takes the middle; actions sit hard right. */
.site-nav { flex: 1 1 auto; display: flex; justify-content: flex-end; }
/* Content-width with fixed gaps, as live. Stretching the list with
   space-between made the gaps balloon whenever the type got smaller
   than the track. --nav-track is only a cap. */
.site-nav__list {
	display: flex; align-items: center; justify-content: flex-end;
	max-width: var(--nav-track);
	gap: var(--nav-gap); list-style: none; margin: 0; padding: 0;
	flex-wrap: nowrap;
}
.site-nav__list > li { position: relative; }
/* The mega panel hangs off the header bar, not off its own item, so the
   items have to reach the bar's foot — otherwise the pointer crosses
   dead space on its way down and the panel closes before it arrives. */
@media (min-width: 1101px) {
	.site-nav { align-self: stretch; align-items: stretch; }
	.site-nav__list { align-items: stretch; }
	.site-nav__list > li { display: flex; align-items: center; }
}
.site-nav__list a {
	color: #fff; text-decoration: none;
	font-size: var(--nav-size); font-weight: 500; letter-spacing: 1px;
	text-transform: uppercase; white-space: nowrap;
	padding-block: 0.5rem; display: inline-block;
	transition: color var(--transition), opacity var(--transition);
}
.site-nav__list a:hover { opacity: 0.75; }

/* Parent items with children get a caret. */
.site-nav__list .menu-item-has-children > a::after {
	content: ""; display: inline-block; margin-left: 0.45em;
	width: 0.42em; height: 0.42em;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.12em);
}

.site-nav__list .sub-menu {
	position: absolute; top: 100%; left: 50%; z-index: 20;
	min-width: 250px; margin: 0; padding: 0.5rem 0; list-style: none;
	background: var(--color-bg); border-radius: 14px;
	box-shadow: 0 16px 40px rgb(27 27 40 / 0.14);
	opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.site-nav__list .sub-menu a {
	display: block; padding: 0.55rem 1.35rem;
	color: var(--color-text);
	font-size: 1.0625rem; font-weight: 400; letter-spacing: normal; text-transform: none;
}
.site-nav__list .sub-menu a:hover { background: var(--color-surface); opacity: 1; }

/* Mega menu: a wide two-column panel under a top-level item. */
.site-nav__list .menu-item--mega { position: static; }

.site-nav__list .menu-item--mega > a { position: relative; }
.site-nav__list .menu-item--mega > a::before {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0.35rem;
	height: var(--nav-underline, 4px); background: var(--color-accent);
	opacity: 0; transform: scaleX(0.4); transform-origin: center;
	transition: opacity var(--transition), transform var(--transition);
}
.site-nav__list .menu-item--mega:hover > a::before,
.site-nav__list .menu-item--mega:focus-within > a::before { opacity: 1; transform: none; }

/* The page you are on keeps the same underline, permanently. Every top
   item can carry it, not just the one with a mega panel. */
.site-nav__list > li > a { position: relative; }
.site-nav__list > li.current-menu-item > a::before,
.site-nav__list > li.current-menu-ancestor > a::before,
.site-nav__list > li.current_page_item > a::before,
.site-nav__list > li.current_page_ancestor > a::before {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0.35rem;
	height: var(--nav-underline, 4px); background: var(--color-accent);
	opacity: 1; transform: none;
}
.site-nav__list .menu-item--mega:hover > a::after,
.site-nav__list .menu-item--mega:focus-within > a::after { transform: rotate(-135deg) translateY(-0.12em); }

.mega {
	position: absolute; top: 100%; left: 50%; z-index: 30;
	width: min(710px, 92vw);
	background: #fff; border-radius: 20px;
	box-shadow: 0 24px 60px rgb(27 27 40 / 0.16);
	overflow: hidden;
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translate(-50%, 8px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.menu-item--mega:hover > .mega,
.menu-item--mega:focus-within > .mega {
	opacity: 1; visibility: visible; pointer-events: auto;
	transform: translate(-50%, 0);
}

.mega__title {
	margin: 0; padding: 1.1rem 2rem;
	font-size: 1.25rem; font-weight: 500; color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
}

/* Scoped to beat `.site-nav__list .sub-menu`, which hides sub-menus by
   default; a bare .mega__list loses on specificity and the panel opens
   showing only its title. */
/* Column-major like live: the list fills the first column top to
   bottom, then the second. */
.site-nav__list .mega__list {
	position: static; display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(6, auto);
	grid-auto-flow: column;
	gap: 0.1rem 1.5rem;
	margin: 0; padding: 1rem 2rem 1.5rem;
	list-style: none;
	background: none; box-shadow: none; border-radius: 0;
	opacity: 1; visibility: inherit; transform: none; min-width: 0;
}
.site-nav__list .mega__list a {
	display: flex; align-items: center; gap: 0.9rem;
	padding: 0.4rem 0.5rem; border-radius: 10px;
	color: var(--color-text);
	font-size: 1.125rem; font-weight: 400; letter-spacing: normal; text-transform: none;
	transition: background var(--transition), color var(--transition);
}
.site-nav__list .mega__list a:hover { background: var(--color-surface); opacity: 1; }
.menu-item__icon { flex: 0 0 28px; display: grid; place-items: center; }
.menu-item__icon img { width: 28px; height: 28px; object-fit: contain; }
.site-nav__list > li > a .menu-item__icon { display: none; }

@media (max-width: 1100px) {
	.mega {
		position: static; width: auto; opacity: 1; visibility: visible;
		transform: none; box-shadow: none; border-radius: 0;
	}
	.mega__title { padding: 0.75rem 0.5rem; font-size: 1rem; }
	.site-nav__list .mega__list { grid-template-columns: 1fr; padding: 0 0 0.5rem 0.5rem; }
	.site-nav__list .mega__list a { font-size: 1rem; }
}

/* The pill and the arrow are one control visually: same height,
   hairline gap between them. */
/* On live the pill and the arrow touch: zero gap, and the arrow is a
   touch taller than the pill (58 vs 54). */
.header-actions { flex: 0 0 auto; margin-left: var(--header-gap); display: flex; align-items: stretch; gap: 0; }
.header-actions .btn {
	padding-inline: 30px;
	letter-spacing: 0.04em;
	background: var(--color-text); color: #fff;
}
.header-actions .btn:hover { background: #000; color: #fff; }
.header-actions__arrow {
	display: grid; place-items: center;
	width: var(--button-height); height: var(--button-height);
	flex: 0 0 var(--button-height);
	border-radius: 50%; background: var(--color-text); color: #fff;
	text-decoration: none;
	transition: background var(--transition), transform var(--transition);
}
.header-actions__arrow:hover { background: #000; color: #fff; }
.header-actions__arrow svg { width: 20px; height: 20px; }
.header-actions__arrow:hover { background: var(--color-accent); transform: translateX(2px); }

/* Narrower screens adjust the TOKENS, never the declarations. Setting
   font-size directly here would override --nav-size and silently
   ignore whatever is set in Theme Settings. */
@media (max-width: 1400px) {
	:root { --header-height: 104px; --nav-gap: 24px; --header-gap: 32px; }
	.header-actions .btn { padding-inline: 22px; }
}

@media (max-width: 1200px) {
	:root { --nav-gap: 18px; --header-gap: 20px; --logo-width: 170px; }
}

/* The hamburger. This block has to stay ABOVE the breakpoint that shows
   it: same specificity, so whichever comes last wins, and with the base
   below it the button never appeared on mobile at all.

   Live draws it as a dark rounded square with three white bars. */
.nav-toggle {
	display: none;
	width: 52px; height: 52px; padding: 0;
	background: var(--color-text); border: 0; border-radius: 14px;
	cursor: pointer; position: relative;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	position: absolute; left: 15px; width: 22px; height: 2px;
	background: #fff;
	transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle__bar { top: 25px; }
.nav-toggle__bar::before { content: ""; top: -7px; left: 0; }
.nav-toggle__bar::after { content: ""; top: 7px; left: 0; }
/* The panel carries its own close button, so the bars stay bars. */

/* ---------- Mobile navigation panel ---------- */

/* The panel's own bar and buttons belong to the drawer alone; on desktop
   the nav is an inline row and they would sit in the middle of it. */
.site-nav__bar,
.site-nav__actions { display: none; }

@media (max-width: 1100px) {
	.nav-toggle { display: block; order: 3; margin-left: auto; }
	.site-branding { order: 1; }
	/* The header CTA moves into the panel on mobile, as live does. */
	.header-actions { display: none; }

	.site-nav {
		order: 4;
		position: fixed; inset: 0;
		width: 100%;
		z-index: 200;
		margin-left: 0; padding: 0;
		background: #2b2b33;
		border-radius: 0; box-shadow: -12px 0 40px rgb(0 0 0 / 0.3);
		display: flex; flex-direction: column;
		/* The desktop rule pushes the nav to the right with flex-end. In a
		   column that means the bottom, so overflow ran off the TOP of the
		   panel where scrolling cannot reach it. */
		justify-content: flex-start;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: rgb(255 255 255 / 0.3) transparent;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 320ms;
	}
	.site-nav.is-open { transform: none; visibility: visible; }

	.site-nav__bar {
		display: flex; align-items: center; justify-content: space-between;
		gap: var(--space-sm);
		padding: 20px 20px 24px;
		border-bottom: 1px solid rgb(255 255 255 / 0.15);
	}
	.site-nav__logo img { width: 150px; height: auto; display: block; }
	.site-nav__close {
		flex: 0 0 48px;
		display: grid; place-items: center;
		width: 48px; height: 48px; padding: 0;
		background: #fff; color: var(--color-text);
		border: 0; border-radius: 50%; cursor: pointer;
	}

	.site-nav__list {
		flex-direction: column; align-items: stretch; gap: 0;
		/* Like the panel itself, this carries flex-end from the desktop
		   row — which, now that the list grows to fill the panel, dropped
		   every item to the bottom. It also has a nav-track max-width that
		   has no meaning stacked. */
		justify-content: flex-start;
		max-width: none;
		padding: 20px 0; margin: 0;
		/* Natural height, and never shrink: the buttons follow straight on
		   from the last item rather than sitting at the foot of the panel.
		   Not shrinking is what gives the panel something to scroll — as a
		   shrinkable item it was squashed to fit and an expanded branch
		   overflowed invisibly. */
		flex: 0 0 auto;
	}
	.site-nav__bar { flex: 0 0 auto; }
	.site-nav__list > li { width: 100%; }
	.site-nav__list a {
		display: block;
		padding: 14px 20px;
		color: #fff;
		font-size: 16px; letter-spacing: 0.5px; text-transform: uppercase;
	}
	/* Live marks the open branch in the accent with a rule above and
	   below, rather than tinting the whole row. */
	.site-nav__list .menu-item-has-children > a,
	.site-nav__list .menu-item--mega > a { position: relative; padding-right: 48px; }
	.site-nav__list .menu-item-has-children > a::after,
	.site-nav__list .menu-item--mega > a::after {
		content: ""; position: absolute; right: 22px; top: 50%;
		width: 9px; height: 9px; margin-top: -6px;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
	}
	.site-nav__list > li:hover > a,
	.site-nav__list > li:focus-within > a {
		color: var(--color-accent);
		border-top: 1px solid var(--color-accent);
		border-bottom: 1px solid var(--color-accent);
		background: rgb(255 255 255 / 0.04);
	}
	/* The desktop underline and mega panel have no place in here. */
	.site-nav__list .menu-item--mega > a::before { display: none; }
	/* Collapsed until the row is tapped, as live. Left open, the services
	   branch alone pushes the rest of the menu ~400px down. */
	.site-nav__list .sub-menu,
	.site-nav__list .mega {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; background: none; border: 0;
		padding: 0 0 8px 16px; min-width: 0; width: auto;
		pointer-events: auto;
		display: none;
	}
	.site-nav__list > li.is-expanded > .sub-menu,
	.site-nav__list > li.is-expanded .mega { display: block; }
	/* The mega list carries .sub-menu too, so it is caught by the rule
	   above that hides them — and being nested, the direct-child rule
	   never reaches it. Show it and drop the desktop panel chrome. */
	.site-nav__list > li.is-expanded .mega {
		position: static; width: auto; transform: none;
		background: none; box-shadow: none; border-radius: 0; overflow: visible;
		opacity: 1; visibility: visible; pointer-events: auto;
	}
	.site-nav__list > li.is-expanded .mega__title {
		padding: 12px 20px; border-bottom: 0;
		color: rgb(255 255 255 / 0.55); font-size: 13px; text-transform: uppercase;
	}
	.site-nav__list > li.is-expanded .mega__list {
		display: grid; grid-template-columns: 1fr; grid-template-rows: none;
		grid-auto-flow: row;
		padding: 0 0 8px; gap: 0;
	}
	.site-nav__list > li.is-expanded .mega__list a {
		color: rgb(255 255 255 / 0.85);
		padding: 9px 20px; border-radius: 0;
		font-size: 14px;
	}
	.site-nav__list > li.is-expanded .mega__list a:hover { background: rgb(255 255 255 / 0.06); }
	.site-nav__list .menu-item__icon svg,
	.site-nav__list .menu-item__icon img { filter: brightness(0) invert(1); }
	.site-nav__list > li.is-expanded > a {
		color: var(--color-accent);
		border-top: 1px solid var(--color-accent);
		border-bottom: 1px solid var(--color-accent);
		background: rgb(255 255 255 / 0.04);
	}
	.site-nav__list > li.is-expanded > a::after { transform: rotate(-135deg); margin-top: -2px; }
	.site-nav__list .sub-menu a,
	.site-nav__list .mega a {
		font-size: 14px; text-transform: none; letter-spacing: normal;
		padding: 9px 20px; color: rgb(255 255 255 / 0.8);
	}

	.site-nav__actions {
		display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
		padding: 24px 20px 32px;
		flex: 0 0 auto;
	}
	.site-nav__actions .btn {
		width: 100%; padding-inline: 8px;
		height: 48px; font-size: 14px; letter-spacing: normal;
		text-transform: none;
	}

	/* Backdrop behind the panel.

	   The header is a stacking context of its own (positioned, z-index
	   100), so the panel's z-index is scoped inside it and a backdrop on
	   the body would paint over the panel rather than under it. Lifting
	   the whole header above the backdrop is what actually orders them. */
	body.nav-is-open .site-header { z-index: 300; }
	body.nav-is-open { overflow: hidden; }
	/* The WhatsApp bubble is fixed at z-index 99999999, so it floats over
	   the open drawer and lands on the buttons. It has nothing to do
	   while the menu is up. */
	body.nav-is-open #ht-ctc-chat { display: none; }

	/* A transformed ancestor becomes the containing block for its fixed
	   descendants, so while the sticky bar was mid-drop the drawer was
	   being sized against the pill — 338x84, off the top of the screen —
	   rather than the viewport. The pill sits behind the open drawer
	   anyway, so it gives up its transform while the menu is open.
	   Later in the file than the sticky rules, so no !important. */
	body.nav-is-open .site-header.is-stuck .site-header__inner,
	body.nav-is-open .site-header .site-header__inner {
		animation: none;
		transform: none;
	}

	/* The sticky bar darkens its links to sit on the lime pill. Over the
	   open drawer that is black on near-black, so the panel takes its own
	   colours back. Selectors are built to out-weigh the sticky rules. */
	body.nav-is-open .site-header.is-stuck .site-nav .site-nav__list a {
		color: #fff;
	}
	body.nav-is-open .site-header.is-stuck .site-nav .site-nav__list > li.is-expanded > a {
		color: var(--color-accent);
	}
	body.nav-is-open .site-header.is-stuck .site-nav .site-nav__list .mega__list a {
		color: rgb(255 255 255 / 0.85);
	}
	body.nav-is-open .site-header.is-stuck .site-nav__list a:hover { opacity: 1; }
	/* The panel covers the viewport, so there is nothing to dim behind
	   it; the scroll lock is what still matters. */
}

@media (prefers-reduced-motion: reduce) {
	.site-nav { transition: none; }
}


/* ---------- Footer ---------- */

/* One dark block over a photograph: the consultation form on top, then
   the logo, menus and detail columns, then socials and copyright. The
   background image comes from Theme Settings as --footer-bg. */
.site-footer {
	--footer-line: rgb(255 255 255 / 0.2);
	--footer-dim: rgb(255 255 255 / 0.6);
	position: relative; isolation: isolate;
	margin-top: var(--space-xl);
	padding-block: 98px 60px;
	background: #1b1b28;
	color: #fff;
}
.site-footer::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image: var(--footer-bg, none);
	background-size: cover; background-position: center;
	opacity: 0.35;
}

.site-footer__consult {
	display: grid;
	grid-template-columns: minmax(0, 683fr) minmax(0, 643fr);
	gap: 60px;
	align-items: start;
}
.site-footer__pitch { display: grid; gap: 20px; align-content: start; max-width: 643px; }
.site-footer__heading {
	margin: 0;
	font-size: var(--step-2); line-height: var(--step-lh-2); font-weight: 500;
}
.site-footer__body {
	margin: 0; max-width: 34ch;
	font-size: var(--body-size); line-height: 1.56;
}

.enquire { margin-top: 30px; display: grid; gap: 14px; }
.enquire__title {
	margin: 0;
	font-size: var(--h6-size); line-height: var(--h6-lh); font-weight: 500;
}
.enquire__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.enquire__item { display: flex; align-items: center; gap: 12px; }
.enquire__icon { display: grid; place-items: center; color: var(--color-accent); }
.enquire__item a {
	color: #fff; text-decoration: none;
	font-size: var(--body-size); line-height: 1.56;
}
.enquire__item a:hover { color: var(--color-accent); }

/* ---- Footer columns ---- */

.site-footer__columns {
	display: grid;
	grid-template-columns: 332fr 229fr 229fr 229fr 229fr;
	gap: 20px;
	margin-top: 100px;
}
.site-footer__logo img { width: 180px; height: auto; }

.footer-col { display: grid; gap: 20px; align-content: start; }
.footer-col__title {
	margin: 0;
	font-size: var(--h7-size, 20px); line-height: 28px; font-weight: 400;
}
.footer-col__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col__list a {
	color: #fff; text-decoration: none;
	font-size: 20px; line-height: 28px;
	transition: color var(--transition);
}
.footer-col__list a:hover { color: var(--color-accent); }

.footer-col--info { gap: 22px; }
.footer-info { display: grid; gap: 4px; }
.footer-info__label { margin: 0; font-size: 14px; line-height: 20px; color: var(--footer-dim); }
/* A linked value is the thing to act on, so it reads brighter than a
   plain one like the address. */
.footer-info__value { margin: 0; font-size: 16px; line-height: 28px; color: var(--footer-dim); }
.footer-info__value a { font-size: 18px; color: #fff; text-decoration: none; }
.footer-info__value a:hover { color: var(--color-accent); }

/* ---- Footer base ---- */

.site-footer__base {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-md); flex-wrap: wrap;
	margin-top: 90px;
}
.site-footer__copyright { margin: 0; font-size: 14px; line-height: 28px; color: var(--footer-dim); }

.social-links { display: flex; gap: 15px; list-style: none; margin: 0; padding: 0; }
.social-links__link {
	display: grid; place-items: center; width: 39px; height: 39px;
	border-radius: 50%;
	transition: transform var(--transition);
}
.social-links__link:hover { transform: translateY(-2px); }
.social-links__icon { width: 39px; height: 39px; object-fit: contain; }

@media (max-width: 1100px) {
	.site-footer__consult { grid-template-columns: 1fr; gap: var(--space-lg); }
	.site-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); margin-top: 60px; }
}
@media (max-width: 620px) {
	.site-footer { padding-block: 60px 40px; }
	.site-footer__columns { grid-template-columns: 1fr 1fr; gap: 36px 16px; }
	/* The logo reads as a header for the pair of columns below it. */
	.site-footer__brand { grid-column: 1 / -1; }
	.site-footer__base { margin-top: 50px; }
}

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

.scroll-top {
	position: fixed; right: var(--space-sm); bottom: var(--space-sm); z-index: 90;
	width: 44px; height: 44px; display: grid; place-items: center;
	border: 0; border-radius: 50%; cursor: pointer;
	background: var(--color-accent); color: #fff;
	opacity: 0; transform: translateY(8px);
	transition: opacity var(--transition), transform var(--transition), background var(--transition);
}
.scroll-top.is-visible { opacity: 1; transform: none; }
.scroll-top:hover { background: var(--color-accent-dark); }

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 30px;
	background: var(--color-surface); color: var(--color-text);
	border: 0; border-radius: var(--radius-pill); cursor: pointer;
	font: inherit;
	height: var(--button-height);
	font-size: var(--button-size, 0.8125rem);
	line-height: var(--button-lh, 1.2);
	font-weight: 500;
	letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn:hover { background: var(--color-accent); color: var(--color-text); transform: translateY(-1px); }
.btn--dark { background: var(--color-text); color: #fff; }
.btn--dark:hover { background: var(--color-accent); color: var(--color-text); }
.btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn--accent:hover { background: var(--color-accent-dark); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ---------- Forms ---------- */

.form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}
/* Two ~148px fields a row is unusable; live runs them full width. This
   has to follow the rule above — same specificity, so source order is
   what decides it. */
@media (max-width: 620px) {
	.form__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
.form__row--full { grid-column: 1 / -1; }
.form__row { margin-bottom: 0; }
.form__label { display: block; font-weight: 600; margin-bottom: var(--space-xs); font-size: var(--step--1); }

.form__control {
	width: 100%; padding: 0.7rem 0.9rem;
	font: inherit; color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border); border-radius: var(--radius);
	transition: border-color var(--transition);
}
.form__control:focus { border-color: var(--color-accent); outline: none; }
.form__control[aria-invalid="true"] { border-color: var(--color-error); }

/* Every control has a slot; an empty one takes no room, so the form is
   not padded out by six reserved lines. */
.form__error {
	display: block; margin: 0.4rem 0 0;
	color: var(--color-error);
	font-size: 14px; line-height: 1.4; font-weight: 400;
	letter-spacing: normal; text-transform: none;
}
.form__error:empty { display: none; }
.form__status { margin-top: var(--space-sm); font-weight: 600; }
.form__status.is-error { color: var(--color-error); }
.form__status.is-success { color: var(--color-accent); }
.form__honeypot { position: absolute; left: -9999px; }

/* Styled select — the native control is hidden, never inline-styled. */
.select { position: relative; font-size: var(--body-size, 1rem); }
.select__native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.select__button {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs);
	padding: 0.7rem 0.9rem; font: inherit; text-align: left; cursor: pointer;
	background: var(--color-bg); color: var(--color-text);
	border: 1px solid var(--color-border); border-radius: var(--radius);
}
.select__button::after { content: ""; width: 0.6em; height: 0.6em; border-right: 2px solid var(--color-muted); border-bottom: 2px solid var(--color-muted); transform: rotate(45deg) translateY(-2px); transition: transform var(--transition); }
.select[aria-expanded="true"] .select__button::after { transform: rotate(-135deg) translateY(-2px); }
/* The dropdown chrome sits on the panel, not the list: a listbox may
   only contain options, so the filter field has to be its sibling. */
.select__panel {
	position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 20;
	background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
	overflow: hidden;
	display: none;
}
.select[aria-expanded="true"] .select__panel { display: block; }

.select__search { padding: 0.5rem; border-bottom: 1px solid var(--color-border); }
.select__search-input {
	width: 100%; padding: 0.5rem 0.7rem;
	font: inherit;
	color: var(--color-text); background: var(--color-surface);
	border: 1px solid var(--color-border); border-radius: 8px;
}
.select__search-input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.select__list {
	max-height: 220px; overflow-y: auto; margin: 0; padding: 0.25rem; list-style: none;
	/* The platform scrollbar is far too heavy beside a 6px panel edge. */
	scrollbar-width: thin;
	scrollbar-color: rgb(27 27 40 / 0.28) transparent;
}
.select__list::-webkit-scrollbar { width: 6px; }
.select__list::-webkit-scrollbar-track { background: transparent; }
.select__list::-webkit-scrollbar-thumb {
	background: rgb(27 27 40 / 0.28); border-radius: 100px;
}
.select__list::-webkit-scrollbar-thumb:hover { background: rgb(27 27 40 / 0.45); }
.select__option { padding: 0.5rem 0.75rem; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }
.select__option[hidden] { display: none; }
.select__option:hover,
.select__option.is-active { background: var(--color-surface); }
.select__option[aria-selected="true"] { font-weight: 600; }
.select__empty { margin: 0; padding: 0.75rem; color: var(--color-muted); text-align: center; }

/* ---- The footer's consultation form ----
   Live styles these as underlines on the dark ground rather than boxes,
   with the message the one field that keeps a full outline. The custom
   select is restyled to sit in the same line. */

.site-footer .form__control {
	background: transparent;
	color: #fff;
	border: 0; border-bottom: 1px solid var(--footer-line);
	border-radius: 0;
	padding: 8px 16px 8px 0;
	font-size: 16px;
	height: 40px;
}
.site-footer .form__control::placeholder { color: rgb(255 255 255 / 0.7); }
.site-footer .form__control:focus { border-bottom-color: var(--color-accent); outline: none; }

.site-footer textarea.form__control {
	height: 191px; min-height: 191px;
	border: 1px solid var(--footer-line);
	padding: 14px;
}

.site-footer .select { font-size: 16px; }
.site-footer .select__button {
	background: transparent; color: #fff;
	border: 0; border-bottom: 1px solid var(--footer-line); border-radius: 0;
	padding: 8px 16px 8px 0;
	height: 40px;
}
.site-footer .select__button::after { border-color: rgb(255 255 255 / 0.7); }
.site-footer .select__panel {
	background: #1b1b28; border-color: var(--footer-line); color: #fff;
}
.site-footer .select__search { border-bottom-color: var(--footer-line); }
.site-footer .select__search-input {
	background: rgb(255 255 255 / 0.06); border-color: var(--footer-line); color: #fff;
}
.site-footer .select__search-input::placeholder { color: rgb(255 255 255 / 0.6); }
.site-footer .select__option:hover,
.site-footer .select__option.is-active { background: rgb(255 255 255 / 0.1); }
.site-footer .select__list { scrollbar-color: rgb(255 255 255 / 0.3) transparent; }
.site-footer .select__list::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.3); }
.site-footer .select__list::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 0.5); }
.site-footer .select__empty { color: rgb(255 255 255 / 0.6); }

.site-footer .form__row > .select { width: 100%; }
.site-footer .phone-field { gap: 10px; }
.site-footer .phone-field .select { flex: 0 0 7.5rem; }

.site-footer .form__error { color: #ffb4a8; }
.site-footer .form__status.is-success { color: var(--color-accent); }
.site-footer .form__submit { margin-top: 40px; width: fit-content; }
/* The arrow is decoration here — the button beside it does the work. */
.site-footer .about-cta__arrow { pointer-events: none; }

/* Phone field with dial code */
.phone-field { display: flex; gap: var(--space-xs); }
.phone-field .select { flex: 0 0 9rem; }
.phone-field .form__control { flex: 1 1 auto; }
.flag { font-size: 1.1em; line-height: 1; }

/* ---------- Enquiry modal ---------- */

.enquiry {
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0; border: 0; border-radius: var(--radius-lg);
	background: var(--color-bg); color: var(--color-text);
	box-shadow: 0 30px 80px rgb(27 27 40 / 0.35);
	overflow: visible;
}
.enquiry::backdrop { background: rgb(0 0 0 / 0.55); }
.enquiry__panel { padding: clamp(1.75rem, 4vw, 2.75rem); position: relative; }
.enquiry__close {
	position: absolute; top: 18px; right: 18px;
	display: grid; place-items: center;
	width: 40px; height: 40px; padding: 0;
	background: none; border: 0; border-radius: 50%;
	color: var(--color-text); cursor: pointer;
}
.enquiry__close:hover { background: var(--color-surface); }
.enquiry__title {
	margin: 0 0 var(--space-md);
	font-size: var(--h5-size); line-height: var(--h5-lh); font-weight: 500;
}

/* One column, and no boxed fields — the modal follows live's underlines. */
.form--compact .form__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.form--compact .form__control {
	background: transparent; color: var(--color-text);
	border: 0; border-bottom: 1px solid var(--color-border);
	border-radius: 0; padding: 8px 0; height: 44px;
}
.form--compact .form__control::placeholder { color: var(--color-text); opacity: 1; }
.form--compact .form__control:focus { border-bottom-color: var(--color-text); outline: none; }
.form--compact .form__row > .select { width: 100%; }
.form--compact .select__button {
	background: transparent; color: var(--color-text);
	border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0;
	padding: 8px 0; height: 44px;
}
.form--compact .phone-field { gap: 10px; }
.form--compact .phone-field .select { flex: 0 0 7.5rem; }
.form--compact .form__submit { margin-top: 30px; width: fit-content; }
.form--compact .about-cta__arrow { pointer-events: none; }

/* ---------- Utilities ---------- */

.section { padding-block: var(--space-xl); }
.section--surface { background: var(--color-surface); }
.grid { display: grid; gap: var(--space-md); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.post-list { display: grid; gap: var(--space-md); }
@media (min-width: 700px) { .post-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.post-card__title { font-size: var(--step-1); margin-block: var(--space-xs); }
.post-card__title a { color: var(--color-text); text-decoration: none; }
.post-card__title a:hover { color: var(--color-accent); }
.post-card__excerpt { color: var(--color-muted); font-size: var(--step--1); }

/* ---------- Hero ---------- */

/* Measurements taken from the live banner at 1920px: 16px gutter,
   30px radius, content column ~1500px, pest card overlapping the base. */
.section.section--hero {
	position: relative;
	margin: 9px 10px 0;
	min-height: var(--hero-min-height);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-start;
	/* The heading sits a fixed distance below the header; the strip is
	   anchored to the base. The space between them absorbs the rest. */
	padding-block: calc(var(--header-height) + var(--hero-gap-top)) 0;
	isolation: isolate;
}

.section--hero__media { position: absolute; inset: 0; z-index: -2; }
.section--hero__media img,
.section--hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; }

.section--hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgb(27 27 40 / 0.55) 0%, rgb(27 27 40 / 0.34) 55%, rgb(27 27 40 / 0.50) 100%),
		linear-gradient(180deg, rgb(203 236 121 / 0.08) 0%, rgb(203 236 121 / 0.18) 100%);
}

/* Content column is narrower than the card below it, matching live. */
.section--hero .container {
	position: relative;
	width: 90%; max-width: 1683px;
	margin-inline: auto; padding-inline: 0;
	text-align: center;
}

.section--hero__title {
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: var(--step-3);
	line-height: var(--step-lh-3);
	letter-spacing: -0.01em;
	margin: 0 auto;
	max-width: none;
	white-space: nowrap;
	text-shadow: 0 2px 24px rgb(27 27 40 / 0.3);
}

.section--hero__body { color: #fff; max-width: 56ch; margin: var(--space-sm) auto 0; }
.section--hero .section__eyebrow { color: #fff; }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); justify-content: center; }

@media (max-width: 1100px) {
	.section--hero__title { white-space: normal; max-width: 18ch; }
}
/* Live sets the banner copy left on mobile, not centred. */
@media (max-width: 620px) {
	.section.section--hero { margin-inline: 13.5px; }
	.section--hero__inner, .section--hero .container { text-align: left; }
	.section--hero__title { margin-inline: 0; max-width: none; }
	.section--hero__body { margin-inline: 0; }
	.hero-actions { justify-content: flex-start; }
}

/* Inner pages: no media, shorter band, dark type. */
.section.section--hero.section--hero--compact {
	min-height: 0;
	background: var(--color-bg);
	padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-xl);
}
/* Over a light banner the header cannot stay white, or the logo and the
   nav disappear into it. The sticky bar keeps its own treatment. */
body.has-light-header .site-header:not(.is-stuck) .site-logo { filter: brightness(0); }
body.has-light-header .site-header:not(.is-stuck) .site-nav .site-nav__list a,
body.has-light-header .site-header:not(.is-stuck) .site-title { color: var(--color-text); }
body.has-light-header .site-header:not(.is-stuck) .site-nav__list a:hover { opacity: 0.65; }

.section--hero--compact::after { display: none; }
.section--hero--compact .section--hero__title { color: var(--color-text); text-shadow: none; }
.section--hero--compact .section--hero__body,
.section--hero--compact .section__eyebrow { color: var(--color-text); }
.section--hero--compact .site-header ~ * { color: inherit; }

/* Inner pages set the title against its intro rather than stacking them
   centred, as live does. The breadcrumb and heading hold the left, the
   copy sits beside them. */
.section--hero--compact > .container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 6rem);
	align-items: start;
	text-align: left;
}
.section--hero--compact .breadcrumbs,
.section--hero--compact .section__eyebrow,
.section--hero--compact .section--hero__title { grid-column: 1; }
/* With no intro beside it there is no second column to hold, so the
   title takes the row and stops wrapping early. */
.section--hero--compact > .container:not(:has(.section--hero__body)) {
	grid-template-columns: minmax(0, 1fr);
}
.section--hero--compact .section--hero__title {
	margin: 0; max-width: none; white-space: normal;
	/* Live runs an inner page's title at the section-heading step, not
	   the banner's h1 step. */
	font-size: var(--step-2); line-height: var(--step-lh-2);
}
.section--hero--compact .section--hero__title { grid-row: 1; align-self: center; }
.section--hero--compact .section--hero__body {
	grid-column: 2; grid-row: 1;
	margin: 0; max-width: 62ch;
	color: var(--color-text);
	font-size: var(--body-size); line-height: 1.56;
}
/* Live sits the button under the intro rather than under the title. */
.section--hero--compact .hero-actions {
	grid-column: 2; grid-row: 2;
	margin-top: 24px; justify-content: flex-start;
}

@media (max-width: 900px) {
	.section--hero--compact > .container { grid-template-columns: 1fr; row-gap: var(--space-sm); }
	.section--hero--compact .section--hero__title,
	.section--hero--compact .section--hero__body,
	.section--hero--compact .hero-actions { grid-column: 1; grid-row: auto; }
}

.breadcrumbs { color: var(--color-muted); font-size: var(--step--1); margin-bottom: var(--space-xs); }
.section--hero:not(.section--hero--compact) .breadcrumbs,
.section--hero:not(.section--hero--compact) .breadcrumbs a { color: rgb(255 255 255 / 0.85); }

@media (max-height: 760px) {
	:root { --hero-gap-top: 15vh; --hero-strip-gap: 8vh; }
}
@media (max-height: 620px) {
	:root { --hero-gap-top: 10vh; --hero-strip-gap: 5vh; --hero-strip-height: 130px; }
}

@media (max-width: 1200px) {
	:root { --hero-gap-top: 18vh; --hero-strip-gap: 9vh; }
}
@media (max-width: 900px) {
	:root { --hero-gap-top: 12vh; --hero-strip-gap: 5vh; --hero-strip-height: 120px; }
	.section--hero { margin: 6px 6px 0; border-radius: 20px; }
}

/* ---------- Pest strip ---------- */

/* A white card over the base of the hero holding an auto-advancing
   slider. The list is rendered twice so the wrap is seamless: the
   track steps one item at a time and snaps back invisibly once the
   first run has passed. */
.pest-strip {
	position: absolute; left: 50%; bottom: var(--hero-strip-gap); transform: translateX(-50%);
	z-index: 2;
	width: 90%; max-width: 1663px;
	min-height: var(--hero-strip-height);
	display: flex; align-items: center;
	padding: 0;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 18px 48px rgb(27 27 40 / 0.12);
	overflow: hidden;
}

/* The step slider reads --slide-per-view and writes
   --slide-item-width; --pest-per-view stays the name the
   breakpoints below tune. */
.pest-strip { --slide-per-view: var(--pest-per-view, 8); }
.pest-strip__viewport {
	width: 100%; overflow: hidden; cursor: grab;
	touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.pest-strip__viewport.is-dragging { cursor: grabbing; }
.pest-strip__viewport.is-dragging .pest-strip__track { transition: none; }
.pest-strip__viewport.is-dragging a { pointer-events: none; }

.pest-strip__track {
	width: max-content;
	display: flex; align-items: center;
	margin: 0; padding: 0; list-style: none;
	transition: transform 620ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
/* Used by the script for the invisible wrap. */
.pest-strip__track.is-resetting { transition: none; }

/* Exactly --pest-per-view items fit the card; the script sets the
   pixel width so the count holds at any width. */
.pest-strip__item {
	flex: 0 0 auto;
	width: var(--slide-item-width, calc(100% / var(--pest-per-view, 8)));
	text-align: center;
}

.pest-strip__link {
	display: block; text-decoration: none; color: inherit;
	padding: 0.35rem 0.25rem; border-radius: 12px;
	transition: transform var(--transition);
}
a.pest-strip__link:hover { transform: translateY(-3px); }
.pest-strip img { width: 52px; height: 52px; margin-inline: auto; object-fit: contain; }
/* The bundled marks are inlined SVG, so they need the same box. */
.pest-strip__icon { display: block; width: 52px; height: 52px; margin-inline: auto; }
.pest-strip__icon svg { display: block; width: 100%; height: 100%; }
/* The uploaded marks are animated GIFs at their own dimensions; the
   height is fixed so a taller one cannot shift the row. */
.pest-strip__gif {
	display: block; width: auto; height: 52px;
	margin-inline: auto; object-fit: contain;
}
.pest-strip__label {
	display: block; margin-top: 0.7rem;
	font-size: 1.0625rem; font-weight: 500; color: var(--color-text);
	white-space: nowrap;
}

/* No script, or motion turned down: a plain scrollable row. */
.pest-strip:not(.is-ready) .pest-strip__viewport { overflow-x: auto; scrollbar-width: none; }
.pest-strip:not(.is-ready) .pest-strip__viewport::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
	.pest-strip__track { transition: none; }
}

@media (max-width: 1200px) { :root { --pest-per-view: 6; } }
@media (max-width: 900px) {
	:root { --pest-per-view: 4; }
	.pest-strip { min-height: 120px; border-radius: 18px; bottom: 24px; }
	.pest-strip img { width: 40px; height: 40px; }
	.pest-strip__label { font-size: 0.875rem; }
}
@media (max-width: 560px) { :root { --pest-per-view: 4; } }

/* ---------- Scroll reveal ---------- */

/* Matches the live site's fadeIn / fadeInUp entrance behaviour.
   Elements start hidden only when the observer is available and
   motion is allowed, so content is never trapped invisible. */
/* Scroll reveal: a block rises by its own height as it fades in, over
   two seconds. Hidden with visibility rather than opacity so it holds
   its space, and animated with keyframes so the displaced transform
   only exists while it runs — see initReveal in main.js. */
.js-reveal { visibility: hidden; }
.js-reveal.is-visible {
	visibility: visible;
	animation: jezben-fade-in-up 2s ease both;
	will-change: opacity, transform;
}

@keyframes jezben-fade-in-up {
	from { opacity: 0; transform: translate3d(0, 100%, 0); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal { visibility: visible !important; animation: none !important; }
}