/* ==========================================================================
   APCO Pest Control — main stylesheet
   Table of contents:
   1.  Custom properties (design tokens)
   2.  Reset & base
   3.  Layout utilities
   4.  Typography
   5.  Buttons & form controls
   6.  Accessibility helpers
   7.  Header (topbar, nav, mega-menu, mobile panel)
   8.  Hero
   9.  Pest selector
   10. Solutions
   11. Service process
   12. Trust center
   13. Before / after
   14. Why choose + client strip
   15. Testimonials
   16. FAQ
   17. Featured products
   18. Knowledge center
   19. CTA banner
   20. Footer
   21. Inner pages (page/single/archive/search/404/sidebar/comments)
   22. Back-to-top & floating actions
   23. Responsive breakpoints
   24. Reduced motion
   ========================================================================== */

/* -------------------------------------------------------------------------
   0. Font (Inter, self-hosted — variable font, weights 100–900 in one
      file per subset, so this covers every weight the theme uses
      without a separate request per weight). Self-hosted rather than
      linked from fonts.googleapis.com so the site makes zero requests
      to Google at render time (matches this theme's no-third-party-
      request approach elsewhere, and avoids the GDPR exposure of the
      Google Fonts CDN logging visitor IPs).
   ---------------------------------------------------------------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------------
   1. Custom properties
   ---------------------------------------------------------------------- */
:root {
	--color-primary: #56a846;
	--color-primary-dark: #3f7d33;
	--color-primary-light: #85c440;
	--color-ink: #15181d;
	--color-body: #545a61;
	--color-surface: #ffffff;
	--color-surface-tint: #fff7f7;
	--color-surface-tint-strong: #fff1f0;
	--color-border: #ebebeb;
	--color-dark: #14171a;

	--font-heading: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

	--container-width: 1140px;
	--container-width-wide: 1320px;
	--container-padding: clamp(1.25rem, 4vw, 2.5rem);

	--radius-sm: 10px;
	--radius-md: 18px;
	--radius-lg: 28px;
	--radius-pill: 999px;

	--shadow-card: 0 12px 32px -16px rgba(21, 24, 29, 0.16);
	--shadow-pop: 0 20px 48px -20px rgba(21, 24, 29, 0.28);

	--transition-fast: 160ms ease;
	--transition-base: 240ms cubic-bezier(0.22, 1, 0.36, 1);

	--header-height: 88px;
	--topbar-height: 40px;
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ---------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-body);
	background: var(--color-surface);
	overflow-x: hidden;
}

body.admin-bar .site-header[data-sticky] {
	top: 32px;
}

img,
picture,
svg {
	max-width: 100%;
	display: block;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

input,
select,
textarea {
	font: inherit;
	color: inherit;
}

figure {
	margin: 0;
}

/* -------------------------------------------------------------------------
   3. Layout utilities
   ---------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.container--wide {
	max-width: var(--container-width-wide);
}

.container--narrow {
	max-width: 900px;
}

.site-wrapper {
	overflow-x: clip;
	background: var(--color-surface-tint);
}

.site-main {
	display: block;
}

section {
	position: relative;
}

.section-cta {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

/* -------------------------------------------------------------------------
   4. Typography
   ---------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	color: var(--color-ink);
	line-height: 1.15;
	font-weight: 800;
	margin: 0 0 0.6em;
}

h1 {
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	letter-spacing: -0.02em;
}

h2,
.section-heading {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	letter-spacing: -0.01em;
	margin-bottom: 2rem;
}

.section-heading strong {
	display: block;
	font-size: 1.4em;
}

.section-heading--center {
	text-align: center;
}

h3 {
	font-size: 1.25rem;
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   5. Buttons & form controls
   ---------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
	font-size: 1rem;
	padding: 0.9rem 1.6rem;
	border-radius: var(--radius-pill);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
	white-space: nowrap;
}

.btn .icon {
	width: 19px;
	height: 19px;
	flex-shrink: 0;
	transition: transform var(--transition-base), background-color var(--transition-fast);
}

.btn:hover .icon,
.btn:focus-visible .icon {
	transform: translateX(5px) scale(1.06);
}

.btn:active .icon {
	transform: translateX(2px) scale(0.98);
}

.btn--pill {
	border-radius: var(--radius-pill);
}

.btn--primary {
	background: var(--color-primary);
	color: #fff;
}

.btn--primary .icon {
	background: #fff;
	color: var(--color-primary-dark);
	border-radius: 50%;
	padding: 5px;
	box-sizing: content-box;
}

.btn--primary:hover .icon,
.btn--primary:focus-visible .icon {
	color: var(--color-primary);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--color-primary-dark);
	transform: translateY(-2px);
	box-shadow: var(--shadow-pop);
}

.btn--white {
	background: #fff;
	color: var(--color-ink);
}

.btn--white .icon {
	background: var(--color-primary-light);
	color: #fff;
	border-radius: 50%;
	padding: 5px;
	box-sizing: content-box;
}

.btn--white:hover,
.btn--white:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow-pop);
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='search'],
input[type='date'],
input[type='number'],
select,
textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(86, 168, 70, 0.16);
}

label {
	font-weight: 600;
	color: var(--color-ink);
	font-size: 0.9375rem;
}

/* -------------------------------------------------------------------------
   6. Accessibility helpers
   ---------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	z-index: 10000;
	background: var(--color-ink);
	color: #fff;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.skip-link:focus {
	position: fixed;
	top: 0;
	left: 0;
}

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

/* -------------------------------------------------------------------------
   7. Header
   ---------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--color-surface);
	transition: box-shadow var(--transition-base);
	/* The topbar collapses (via margin-top) the instant this header
	   becomes "stuck", shrinking its total height right at the scroll
	   threshold that triggered it. Without this, the browser's scroll
	   anchoring "helpfully" compensates for that height change by
	   nudging scrollY, which can flip the is-stuck class back off,
	   re-expand the topbar, shrink again, and repeat — a rapid
	   feedback loop that looks like the header blinking. */
	overflow-anchor: none;
}

.site-header.is-stuck {
	box-shadow: 0 8px 24px -12px rgba(21, 24, 29, 0.25);
}

.site-header.is-stuck .topbar {
	margin-top: calc(-1 * var(--topbar-height));
}

.topbar {
	background: var(--color-dark);
	color: #fff;
	height: var(--topbar-height);
	overflow: hidden;
	transition: margin-top var(--transition-base);
}

/* Continuous offer ticker — same seamless-loop technique as the client
   logo marquee: two identical, adjacent copies of the content, animated
   from 0 to -50%, snapping back the instant the first copy has fully
   scrolled past. */
.topbar__ticker {
	height: 100%;
	overflow: hidden;
}

.topbar__ticker-track {
	height: 100%;
	display: flex;
	width: max-content;
	animation: apco-topbar-ticker 20s linear infinite;
}

.topbar__ticker-group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	height: 100%;
	padding-inline: 2rem;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

@keyframes apco-topbar-ticker {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

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

	.topbar__ticker {
		overflow-x: auto;
	}
}

.header-main {
	height: var(--header-height);
	display: flex;
	align-items: center;
}

.header-main__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
}

.site-branding {
	/* .header-main__inner is a flex row (logo + nav), and on
	   narrower desktop widths the full nav (Services/Products/
	   Company/Industry/Book your FREE Consultation/Get Quote) can
	   come close to not fitting — by default a flex item is allowed
	   to shrink, and since only WIDTH shrinks (not the logo's fixed
	   52px height), that squeezed the logo horizontally into a
	   distorted, squashed version of itself instead of keeping its
	   real proportions. Pinning this item's width fixes that. */
	flex-shrink: 0;
}

.site-branding img,
.custom-logo {
	height: 52px;
	width: auto;
	max-width: none;
}

.mobile-nav-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	z-index: 20;
}

.mobile-nav-toggle .icon-close {
	display: none;
}

.mobile-nav-toggle[aria-expanded='true'] .icon-open {
	display: none;
}

.mobile-nav-toggle[aria-expanded='true'] .icon-close {
	display: block;
}

.nav-panel {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	flex: 1;
	justify-content: space-between;
}

.primary-nav {
	flex: 1;
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.menu-item {
	position: relative;
}

.menu-link,
.primary-menu a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	color: var(--color-ink);
	padding: 0.5rem 0;
}

.menu-link .icon,
.primary-menu > .menu-item > a .icon {
	/* Was 14px with the chevron's 2px stroke (drawn in a 24-unit
	   viewBox) scaling down to under 1.2px actual — thin and small
	   enough to read as a faint dot rather than a clear dropdown
	   arrow. Bigger so it's unmistakably a chevron. */
	width: 20px;
	height: 20px;
	/* The global `svg { max-width: 100% }` reset (near the top of this
	   file) resolves that percentage against .menu-link's width, which
	   is itself auto/shrink-to-fit — an auto-sized flex container's
	   width can be momentarily unstable (e.g. the instant the Inter
	   web font swaps in and "Services"/"Products" reflow at their real
	   metrics), and during that recalculation the icon's max-width can
	   clamp down toward 0, squashing the chevron into what reads as a
	   faint dot for a frame before things settle. min-width/min-height
	   plus overriding max-width and disabling flex-shrink pin the icon
	   to its real size no matter what the text around it is doing. */
	min-width: 20px;
	min-height: 20px;
	max-width: none;
	flex-shrink: 0;
	transition: transform var(--transition-fast);
}

.menu-item--has-children:hover > a .icon,
.menu-item--has-children:focus-within > a .icon {
	transform: rotate(180deg);
}

/* Setting stroke-width on the parent .icon svg doesn't reliably
   thicken the chevron: the path itself already carries its own
   stroke-width="2" presentation attribute, and a presentation
   attribute on the element it's set on takes priority over an
   inherited CSS value from an ancestor — inheritance only fills in
   properties an element has no value for at all. Targeting the path
   directly (with !important, since a plain author-stylesheet rule
   still loses to that same presentation attribute otherwise) is the
   only way to actually override it. */
.menu-link .icon path,
.primary-menu > .menu-item > a .icon path {
	stroke-width: 3 !important;
}

.menu-item.current-menu-item > a {
	color: var(--color-primary);
}

.submenu-toggle {
	display: none;
}

/* Simple dropdown (Products / Company / More) */
.menu-item--has-children .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-pop);
	padding: 0.75rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	z-index: 50;
}

.menu-item--has-children:hover > .sub-menu,
.menu-item--has-children:focus-within > .sub-menu,
.menu-item--has-children.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* The rightmost top-level dropdown (typically "More") would otherwise
   overflow past the viewport's right edge; anchor it to its own right
   side instead of its left. */
@media (min-width: 901px) {
	.primary-menu > .menu-item--has-children:last-child .sub-menu {
		left: auto;
		right: 0;
	}
}

.sub-menu .submenu-link {
	display: block;
	padding: 0.6rem 0.75rem;
	border-radius: var(--radius-sm);
	font-weight: 500;
}

.sub-menu .submenu-link:hover,
.sub-menu .submenu-link:focus-visible {
	background: var(--color-surface-tint-strong);
	color: var(--color-primary-dark);
}

/* Services mega menu — positioned relative to the header container
   (not the "Services" trigger itself, which sits near the left edge of
   a wide nav bar) so it never overflows off-screen. Desktop only: on
   mobile the panel becomes a static, in-flow accordion (see the ≤900px
   breakpoint), so the trigger keeps `position: relative` there for its
   own absolutely-positioned submenu-toggle button. */
@media (min-width: 901px) {
	.menu-item--mega {
		position: static;
	}
}

.menu-item--mega .mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	/* No explicit width: left:0 + right:0 stretches this to exactly match
	   .header-main__inner's own width (same .container as the rest of the
	   page), so its edges always line up with everything else — a fixed
	   px width here previously overflowed past the container's real
	   right edge, which is why it looked mis-centered. */
	transform: translateY(8px);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
	padding: 2.5rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	z-index: 50;
}

.menu-item--mega:hover .mega-menu,
.menu-item--mega:focus-within .mega-menu,
.menu-item--mega.is-open .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega-menu__inner {
	display: grid;
	/* Wider than the original 1.6fr so the now much longer service list
	   (28 services across both groups, up from 14) has more room per
	   column before the promo card — keeps 4 columns readable without
	   growing the panel's height as much as a narrower list column would. */
	grid-template-columns: 2fr 1fr;
	gap: 3rem;
}

.mega-menu__heading {
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-primary);
	margin-bottom: 1.25rem;
}

.mega-menu__grid {
	display: grid;
	/* 4 columns (was 3) + tighter gaps/type below: with 28 services now
	   seeded (vs. 14 before), this keeps both the Residential and Others
	   lists to about the same row count as the old 3-column/12-item
	   layout instead of the panel growing tall. */
	grid-template-columns: repeat(4, 1fr);
	gap: 1.1rem 1.25rem;
	margin-bottom: 1.75rem;
}

.mega-menu__grid a {
	display: block;
	padding: 0.15rem 0;
	font-size: 0.9375rem;
	line-height: 1.3;
	font-weight: 500;
	color: var(--color-ink);
	border-radius: var(--radius-sm);
	transition: color var(--transition-fast);
}

.mega-menu__grid a:hover,
.mega-menu__grid a:focus-visible {
	color: var(--color-primary);
}

/* Products mega-menu: 5 real categories of very uneven size (1-5
   products each) don't fit the Services panel's "2 stacked full-width
   groups, 4 columns per group" layout — stacking 5 of these vertically
   made the panel tall and hard to scan. Instead, lay the categories
   out as their own compact blocks in a 3-column grid (5 categories ⇒
   3 + 2, two rows total), each with its own short vertical list
   (rarely more than 4-5 items) rather than a wide multi-column grid
   that would leave uneven gaps for the smaller categories. */
.mega-menu--products .mega-menu__lists {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem 2rem;
}

.mega-menu--products .mega-menu__grid {
	grid-template-columns: 1fr;
	gap: 0.5rem;
	margin-bottom: 0;
}

.mega-menu__image img {
	border-radius: var(--radius-md);
	width: 100%;
	aspect-ratio: 276 / 163;
	object-fit: cover;
}

/* Products mega-menu promo: an auto-advancing slider through every
   real product's photo, using the same generic
   data-slider-nav/data-slider-track mechanism as the Gallery's
   before/after slider (assets/js/main.js) — .mega-menu__slide is this
   feature's equivalent of .gallery-ba-card (flex: 0 0 100%, one full
   slide per view). overflow:hidden (rather than the visible
   scrollbar-hidden auto-scroll of .gallery-ba-track) since this is
   purely autoplay/button-driven, never meant to be dragged by hand. */
.mega-menu__slider {
	position: relative;
}

.mega-menu__slider-track {
	display: flex;
	overflow: hidden;
	border-radius: var(--radius-md);
}

.mega-menu__slide {
	flex: 0 0 100%;
}

.mega-menu__slide img {
	display: block;
	width: 100%;
	aspect-ratio: 276 / 163;
	object-fit: cover;
}

.mega-menu__slider-nav {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0.5rem;
	pointer-events: none;
	gap: 0;
}

.mega-menu__slider-nav .slider-nav__btn {
	pointer-events: auto;
	width: 28px;
	height: 28px;
	background: rgba(255, 255, 255, 0.85);
	color: var(--color-ink);
	box-shadow: var(--shadow-card);
}

.mega-menu__slider-nav .slider-nav__btn .icon {
	width: 14px;
	height: 14px;
}

.mega-menu__slider-nav .slider-nav__btn:hover {
	background: var(--color-primary);
	color: #fff;
}

.mega-menu__cta {
	background: var(--color-primary);
	background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 20px 20px;
	border-radius: var(--radius-md);
	padding: 1.75rem 2.25rem;
	margin-top: 1rem;
	color: #fff;
}

.mega-menu__cta p {
	font-weight: 700;
	font-size: 1.125rem;
	margin-bottom: 1rem;
}

/* Self-contained button just for this card — deliberately not reusing
   .btn, so its spacing can't be pulled in different directions by
   shared button rules meant for other contexts. */
.mega-menu__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background: #fff;
	color: var(--color-ink);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	border-radius: var(--radius-pill);
	padding: 0.9rem 0.9rem 0.9rem 1.5rem !important;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.mega-menu__cta-btn:hover,
.mega-menu__cta-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow-pop);
}

.mega-menu__cta-btn span {
	white-space: nowrap;
}

.mega-menu__cta-btn-icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 6px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--color-primary-light);
	color: #fff;
}

.nav-panel__actions {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.nav-consult-link {
	font-weight: 600;
	white-space: nowrap;
}

.nav-consult-link:hover,
.nav-consult-link:focus-visible {
	color: var(--color-primary);
}

.nav-panel-backdrop {
	display: none;
}

/* -------------------------------------------------------------------------
   8. Hero
   ---------------------------------------------------------------------- */
.hero {
	background: var(--color-surface-tint);
	padding-block: 3.5rem 3rem;
}

.hero__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 3rem;
	/* stretch (not start) so .hero__content matches the consultation
	   form's full height — combined with .hero__content being a flex
	   column below, this lets the trust badges sit flush with the
	   bottom of the form instead of ending partway up the page. */
	align-items: stretch;
}

.hero__content {
	display: flex;
	flex-direction: column;
}

.hero__content .hero__badges {
	margin-top: auto;
}

/* Extra breathing room above "Kerala's trusted choice" — .hero__grid's
   own margin-bottom wasn't enough to keep it from crowding the
   consultation form card right above it. */
.hero .section-heading {
	margin-top: 4.5rem;
}

.hero__heading {
	margin-bottom: 0.5em;
}

/* Rotating word (assets/js/main.js swaps the text every 3s) — accent
   color so it visually reads as "the changing part" of the headline,
   with a quick fade + slide used both on the way out and the way back
   in (.is-swapping toggles mid-swap, JS times the text change to land
   at the midpoint of this transition). display:inline-block so the
   transform actually applies to an inline heading word. */
.hero__rotating-word {
	display: inline-block;
	color: var(--color-primary);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.hero__rotating-word.is-swapping {
	opacity: 0;
	transform: translateY(0.25em);
}

.hero__subheading {
	font-size: 1.125rem;
	max-width: 46ch;
	margin-bottom: 2.5rem;
}

.hero__badges {
	display: flex;
	gap: 1.75rem;
	flex-wrap: wrap;
}

.hero__badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 140px;
	gap: 0.75rem;
}

.hero__badge img {
	width: 72px;
	height: 72px;
}

.hero__badge span {
	font-weight: 700;
	color: var(--color-ink);
	font-size: 0.9375rem;
}

.hero__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2rem 4rem;
	margin-top: 3rem;
}

.hero-stat {
	flex: 0 0 auto;
}

.hero-stat__value {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 3vw, 2.75rem);
	font-weight: 800;
	color: var(--color-primary);
	margin-bottom: 0.25rem;
}

.hero-stat__label {
	color: var(--color-ink);
	font-weight: 500;
	max-width: 22ch;
	text-align: center;
	margin-inline: auto;
}

.consultation-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 1.75rem;
}

.consultation-card__heading {
	font-size: 1.5rem;
	margin-bottom: 1.1rem;
}

/* =========================================================================
   Hero consultation form (WD Form Maker plugin output)
   Real markup confirmed from the live page source:
     .fm-form-container > form.fm-form
       .wdform_page_navigation      (page-nav UI — unused, single page)
       input#fm_empty_field_validation1.fm-hide  (anti-spam honeypot)
       .wdform_section > .wdform_column > .wdform_row
         .wdform-field
           .wdform-label-section > label.wdform-label + span.wdform-required
           .wdform-element-section > input / .iti (phone) / select
   The plugin ships its own CSS for all of this, with just enough
   specificity to beat a plain rule, so every declaration here is
   !important. The Reset button's exact markup is unconfirmed (its
   text is the only reliable signal), so it's hidden structurally
   instead, further down — see the "Reset button" comment below.
   ========================================================================= */

.consultation-card__form .wdform_page_navigation,
.consultation-card__form .fm-hide,
.consultation-card__form input[type='hidden'] {
	display: none !important;
}

/* Form Maker's JS measures/sets its own height on some of these
   wrappers as it reveals the initially display:none form — if that
   measurement doesn't match how our CSS actually lays the fields out,
   content can end up taller than a leftover inline height, getting cut
   off. Force auto height and visible overflow the whole way down so
   nothing can clip. */
.consultation-card__form .fm-form-container,
.consultation-card__form form,
.consultation-card__form .wdform-page-and-images,
.consultation-card__form .wdform_page,
.consultation-card__form .wdform_section,
.consultation-card__form .wdform_column,
.consultation-card__form .wdform_row,
.consultation-card__form .wdform-field {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
}

.fm-form-container.fm-theme1 {
	width: 100% !important;
}

.consultation-card__form form {
	padding: 0 !important;
}

.fm-form-container.fm-theme1 .fm-form select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	border-radius: 30px !important;
}

/* Form Maker supports multi-column form layouts (fields side by side on
   wide screens), which likely means .wdform_section/.wdform_column
   carry the plugin's own float/grid/flex CSS sized for a much wider
   form than our sidebar card. Reset them to plain full-width blocks so
   nothing reserves extra column width or clearance we don't want. */
.consultation-card__form .wdform_section,
.consultation-card__form .wdform_column,
.consultation-card__form .wdform_row {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: both !important;
	margin: 0 !important;
	padding: 0 !important;
}

.consultation-card__form .wdform-field {
	display: block !important;
	width: 100% !important;
	margin-bottom: 0 !important;
}

.consultation-card__form .wdform-label-section {
	display: flex !important;
	align-items: baseline !important;
	gap: 0.3rem !important;
	margin-bottom: 0.3rem !important;
}

.consultation-card__form .wdform-label {
	display: inline !important;
	font-weight: 600 !important;
	color: var(--color-ink) !important;
}

.consultation-card__form .wdform-required {
	color: var(--color-primary) !important;
}

.consultation-card__form input:not([type='submit']):not([type='reset']):not([type='checkbox']):not([type='radio']):not([type='hidden']):not(.fm-hide),
.consultation-card__form select,
.consultation-card__form textarea,
.consultation-card__form .iti input {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0.5rem 1rem !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-md) !important;
	font-family: inherit !important;
	font-size: 1.0625rem !important;
	line-height: 1.4 !important;
	color: var(--color-ink) !important;
	background: var(--color-surface) !important;
	box-sizing: border-box !important;
	height: auto !important;
	max-width: 100% !important;
	box-shadow: none !important;
}

/* Native <select> renders its own browser-default dropdown arrow with
   its own reserved spacing, which doesn't line up with a plain
   <input>'s box even with identical padding/border/width — replace it
   with a CSS-drawn arrow so "Service required" matches the other
   fields exactly instead of looking subtly off. */
.consultation-card__form select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius-md) !important;
	padding-right: 2.75rem !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'><path d='M1 1L7 7L13 1' stroke='%23545a61' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 1.1rem center !important;
	background-size: 13px 8px !important;
}

.fm-form-container.fm-theme1 .fm-form select {
	border-radius: 30px !important;
}

#wdform_6_element8 {
	border-radius: 30px !important;
}

/* Phone field: the mockup shows a plain box (placeholder
   "+91 9XXXX XXXXX"), not intl-tel-input's flag/country-code picker —
   hide the flag UI, the input above already matches the other fields. */
.consultation-card__form .iti {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
}

.consultation-card__form .iti__flag-container {
	display: none !important;
}

/* Reset button — CSS can't select by visible text (the only thing that
   actually distinguishes it from Submit), so target it structurally
   instead: it's always the *second* button/submit-like sibling in the
   pair, right after Submit. This is instant and CSS-only, unlike the
   JS text-match approach, which only takes effect once the plugin's
   own script has revealed the form. */
.consultation-card__form button ~ button,
.consultation-card__form input[type='submit'] ~ button,
.consultation-card__form button ~ input[type='submit'] {
	display: none !important;
}

/* Submit button — matches whatever tag the plugin renders it as
   (button or input[type=submit]). Combined with the sibling rule
   above, only the first (Submit) survives. */
.consultation-card__form button,
.consultation-card__form input[type='submit'] {
	display: flex !important;
	width: 100% !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.6rem !important;
	margin: 0.5rem 0 0 !important;
	padding: 1rem 1.6rem !important;
	background: var(--color-primary) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--radius-pill) !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	font-size: 1.0625rem !important;
	cursor: pointer !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.consultation-card__form button:hover,
.consultation-card__form input[type='submit']:hover {
	background: var(--color-primary-dark) !important;
	transform: translateY(-2px) !important;
	box-shadow: var(--shadow-pop) !important;
}

/* Same icon treatment as the header's "Get Quote" button (.btn--primary
   .icon): a white circle with the real arrow-right icon inside, which
   slides right and grows slightly on hover. The plugin's Submit button
   has no markup we can inject a real <svg> into, so this is the same
   icon drawn as a background-image on a ::after pseudo-element instead
   — same artwork, same colors, same animation, just a different way of
   getting a graphic onto a button we don't control the HTML of. */
.consultation-card__form button::after {
	content: '';
	display: inline-flex;
	flex: 0 0 auto;
	width: 29px;
	height: 29px;
	border-radius: 50%;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f7d33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 19px 19px;
	transition: transform var(--transition-base), background-image var(--transition-fast);
}

.consultation-card__form button:hover::after {
	transform: translateX(5px) scale(1.06);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356a846' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.hero__carousel {
	position: relative;
	margin-top: 3rem;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.hero__carousel-track {
	position: relative;
	aspect-ratio: 1873 / 620;
}

.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 700ms ease;
}

.hero__slide.is-active {
	opacity: 1;
}

.hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__carousel-dots {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.4rem;
}

.hero__carousel-dots button {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
}

.hero__carousel-dots button.is-active {
	width: 22px;
	border-radius: var(--radius-pill);
	background: #fff;
}

/* -------------------------------------------------------------------------
   9. Pest selector
   ---------------------------------------------------------------------- */
.pest-selector {
	padding-block: 4rem;
}

.pest-selector__card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 2.5rem;
}

.pest-selector__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.pest-selector__head h2 {
	margin-bottom: 0;
}

.slider-nav {
	display: flex;
	gap: 0.6rem;
	flex-shrink: 0;
}

.slider-nav__btn {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-border);
	color: #b0b0b0;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.slider-nav__btn--active {
	background: var(--color-primary-light);
	color: #fff;
}

.slider-nav__btn:hover:not(.slider-nav__btn--disabled) {
	background: var(--color-primary);
	color: #fff;
}

.slider-nav__btn--disabled {
	cursor: default;
}

.pest-track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.5rem;
	margin-bottom: 1.5rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.pest-track::-webkit-scrollbar {
	display: none;
}

.pest-card {
	flex: 0 0 auto;
	width: 21%;
	min-width: 150px;
	scroll-snap-align: start;
}

.pest-card a {
	display: block;
	border-radius: var(--radius-md);
	background: linear-gradient(180deg, #fafafa, #f1f1f1);
	padding: 1.25rem 1rem;
	text-align: center;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.pest-card img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	margin-bottom: 0.75rem;
}

.pest-card span {
	font-weight: 700;
	color: var(--color-ink);
}

.pest-card a:hover,
.pest-card a:focus-visible {
	transform: translateY(-6px);
	box-shadow: var(--shadow-card);
}

/* -------------------------------------------------------------------------
   10. Solutions
   ---------------------------------------------------------------------- */
.solutions {
	padding-block: 4rem;
}

.solutions__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 2rem;
}

.solutions__side {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.solution-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
}

.solution-card__media {
	display: flex;
}

.solution-card__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.solution-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.solution-card--residential .solution-card__media {
	aspect-ratio: 980 / 476;
}

.solution-card--compact .solution-card__media {
	aspect-ratio: 588 / 214;
}

.solution-card__body {
	padding: 1.75rem;
	flex: 1;
}

.solution-card--compact .solution-card__body {
	padding: 1.5rem;
}

.solution-card__body h3 {
	margin-bottom: 0.5rem;
}

.solution-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

.solution-card__tags a {
	display: inline-block;
	background: var(--color-surface-tint-strong);
	color: var(--color-primary-dark);
	font-weight: 700;
	font-size: 0.875rem;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-pill);
	transition: background var(--transition-fast), color var(--transition-fast);
}

.solution-card__tags a:hover,
.solution-card__tags a:focus-visible {
	background: var(--color-primary);
	color: #fff;
}

/* -------------------------------------------------------------------------
   11. Service process
   ---------------------------------------------------------------------- */
.service-process {
	padding-block: 4rem;
}

.service-process__grid {
	display: grid;
	grid-template-columns: 1.86fr 1fr;
	gap: 3rem;
	align-items: stretch;
}

.service-process__intro {
	display: flex;
	flex-direction: column;
}

.service-process__tagline {
	font-size: 1.125rem;
	color: var(--color-ink);
	font-weight: 600;
	margin-bottom: 2rem;
}

.service-process__media {
	flex: 1;
	min-height: 260px;
}

.service-process__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.service-process__media img {
	border-radius: var(--radius-lg);
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.service-process__steps {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
}

.service-step {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 1.25rem 1.5rem;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.service-step:hover {
	border-color: transparent;
	box-shadow: var(--shadow-card);
}

.service-step__number {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9375rem;
}

.service-step__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.service-step__body strong {
	color: var(--color-ink);
	font-size: 1.0625rem;
}

.service-step__body span {
	color: var(--color-body);
	font-size: 0.9375rem;
}

/* -------------------------------------------------------------------------
   12. Trust center
   ---------------------------------------------------------------------- */
.trust-center__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem 2rem;
}

.trust-stat__value {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 3vw, 2.75rem);
	font-weight: 800;
	color: var(--color-primary);
	margin-bottom: 0.25rem;
}

.trust-stat__label {
	color: var(--color-ink);
	font-weight: 500;
	max-width: 22ch;
}

.dots-indicator {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
}

.dots-indicator span,
.dots-indicator button {
	width: 8px;
	height: 8px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transition: width var(--transition-fast), background var(--transition-fast);
}

.dots-indicator button {
	cursor: pointer;
}

.dots-indicator span.is-active,
.dots-indicator button.is-active {
	background: var(--color-primary-light);
	width: 20px;
	border-radius: var(--radius-pill);
}

/* -------------------------------------------------------------------------
   13. Before / after
   ---------------------------------------------------------------------- */
.before-after-section {
	padding-block: 4rem;
}

.before-after-section__card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 2.5rem;
	overflow: hidden;
}

.before-after-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.before-after-section__head h2 {
	margin-bottom: 0;
}

.before-after-track {
	display: flex;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

.before-after-slide {
	flex: 0 0 100%;
	min-width: 0;
}

.before-after {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	cursor: ew-resize;
	touch-action: pan-y;
}

.before-after__frame {
	position: relative;
	aspect-ratio: 1820 / 809;
	--reveal: 50%;
}

.before-after__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

.before-after__img--after {
	z-index: 1;
}

.before-after__img--before {
	z-index: 2;
	clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
}

.before-after__label {
	position: absolute;
	z-index: 3;
	top: 1.25rem;
	background: var(--color-ink);
	color: #fff;
	font-weight: 700;
	font-size: 0.875rem;
	padding: 0.5rem 1.1rem;
	border-radius: var(--radius-pill);
	pointer-events: none;
}

.before-after__label--before {
	left: 1.25rem;
}

.before-after__label--after {
	right: 1.25rem;
}

.before-after__handle {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-pop);
	pointer-events: none;
}

.before-after__handle .icon {
	width: 14px;
	height: 14px;
	color: var(--color-ink);
}

.before-after__handle .icon-flip {
	transform: rotate(180deg);
}

.before-after-section__card .dots-indicator {
	margin-top: 1.5rem;
}

.before-after-section__card .dots-indicator span,
.before-after-section__card .dots-indicator button {
	background: var(--color-border);
}

.before-after-section__card .dots-indicator span.is-active,
.before-after-section__card .dots-indicator button.is-active {
	background: var(--color-primary);
}

/* -------------------------------------------------------------------------
   14. Why choose + client strip
   ---------------------------------------------------------------------- */
.why-choose {
	padding-block: 4rem;
}

/* Map | cards — an even 50/50 split, both stretched to the same
   height (grid's default align-items: stretch already does this,
   since they're the two direct items in the same row). */
.why-choose__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-bottom: 3rem;
}

.why-choose__map {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.why-choose__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

/* <picture> is inline by default, which was letting the img sit at
   roughly its own attribute size (300x391) regardless of how much
   room the card actually had — most of the card was empty space
   around a small map. Making picture fill the card lets the img scale
   up to use the full available height (its aspect ratio is preserved
   via width: auto). */
.why-choose__map picture {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.why-choose__map img {
	max-width: 80%;
	max-height: 80%;
	width: auto;
	height: auto;
}

.reason-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 1.75rem;
	position: relative;
	min-height: 280px;
	overflow: hidden;
}

.reason-card h3 {
	margin-bottom: 0.4rem;
	max-width: 100%;
	position: relative;
	z-index: 1;
}

.reason-card p {
	max-width: 100%;
	font-size: 0.9375rem;
	position: relative;
	z-index: 1;
}

.reason-card img {
	position: absolute;
	left: 50%;
	bottom: 1rem;
	transform: translateX(-50%);
	width: 38%;
	max-width: 140px;
	height: auto;
	aspect-ratio: 1;
}

.client-strip-section {
	padding-block: 2rem 3rem;
}

.client-strip-section__heading {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-body);
	margin-bottom: 1.5rem;
}

.client-strip-section__cta {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

.client-marquee {
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
	padding-block: 1.75rem;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.client-marquee__track {
	display: flex;
	width: max-content;
	/* Duration scales with logo count to keep a consistent scroll speed
	   (28s was the original baseline for 7 logos, single pass). With 56
	   logos now — plenty wide on their own, so client-strip.php no
	   longer repeats the set — duration scales to 28s * 56/7 = 224s.
	   Recalculate the same way (28s * logo-count / 7) any time the
	   fallback/seeded logo count changes materially, otherwise the loop
	   runs faster or slower than intended and can feel like it stutters
	   or takes too long to come back around. */
	animation: apco-marquee 224s linear infinite;
}

.client-marquee:hover .client-marquee__track {
	animation-play-state: paused;
}

.client-marquee__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 5.5rem;
	padding-inline: 1.75rem;
}

.client-strip__logo-img {
	height: 42px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
}

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

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

	.client-marquee {
		overflow-x: auto;
	}
}

.clients-banner {
	padding-block: 0 3rem;
}

/* Prev/next buttons sit above the photo in their own row, right-aligned
   — same structure and plain .slider-nav__btn look (gray by default,
   green on hover/active) as the "Before & After Transformation"
   slider's nav, just without a heading to its left since this slider
   doesn't have one. */
.clients-banner__head {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1.25rem;
}

.clients-banner__nav {
	gap: 0.6rem;
}

.clients-banner__frame {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.clients-banner__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.clients-banner__track::-webkit-scrollbar {
	display: none;
}

.clients-banner__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	min-width: 0;
}

.clients-banner__slide img {
	width: 100%;
	height: auto;
	display: block;
}

.dots-indicator--overlay {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
}

.dots-indicator--overlay span {
	background: rgba(255, 255, 255, 0.5);
}

.dots-indicator--overlay span.is-active {
	background: #fff;
	width: 20px;
	border-radius: var(--radius-pill);
}

/* -------------------------------------------------------------------------
   15. Testimonials
   ---------------------------------------------------------------------- */
.testimonials {
	padding-block: 4rem;
}

.testimonials__intro {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	text-align: left;
	margin-bottom: 3rem;
}

.testimonials__illustration {
	flex: 0 0 auto;
	width: 38%;
	max-width: 380px;
	margin: 0;
}

.testimonials__intro .section-heading {
	flex: 1;
	margin-bottom: 0;
}

.testimonials__grid {
	display: flex;
	gap: 1.75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.25rem;
	margin-bottom: 2rem;
}

.slider-nav--center {
	justify-content: center;
}

.testimonial-card {
	flex: 0 0 calc(33.333% - 1.17rem);
	scroll-snap-align: start;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 2rem;
	margin: 0;
}

.testimonial-card__quote-mark {
	width: 32px;
	height: 32px;
	color: var(--color-primary-light);
	margin-bottom: 1rem;
}

.testimonial-card blockquote {
	margin: 0 0 1.5rem;
	color: var(--color-body);
}

.testimonial-card figcaption strong {
	display: block;
	color: var(--color-ink);
}

.testimonial-card figcaption span {
	display: block;
	color: var(--color-body);
	font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
   16. FAQ
   ---------------------------------------------------------------------- */
.faq {
	padding-block: 4rem;
}

.faq__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.faq-item {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.faq-item h3 {
	margin: 0;
	font-size: 1rem;
}

.faq-item__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 1.75rem;
	text-align: left;
	font-weight: 700;
	color: var(--color-ink);
	font-size: 1.0625rem;
}

.faq-item__question .icon-minus {
	display: none;
}

.faq-item.is-open .icon-plus {
	display: none;
}

.faq-item.is-open .icon-minus {
	display: block;
}

.faq-item__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--transition-base);
}

.faq-item.is-open .faq-item__answer {
	grid-template-rows: 1fr;
}

.faq-item__answer-inner {
	overflow: hidden;
	padding: 0 1.75rem;
}

.faq-item.is-open .faq-item__answer-inner {
	padding: 0 1.75rem 1.75rem;
}

/* -------------------------------------------------------------------------
   17. Featured products
   ---------------------------------------------------------------------- */
.featured-products {
	padding-block: 4rem;
}

.product-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	background: var(--color-surface);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-card);
	padding: 0.6rem;
	margin-bottom: 2.5rem;
	justify-content: center;
}

.product-filters__btn {
	padding: 0.6rem 1.25rem;
	border-radius: var(--radius-pill);
	font-weight: 600;
	color: var(--color-body);
	transition: background var(--transition-fast), color var(--transition-fast);
}

.product-filters__btn.is-active,
.product-filters__btn:hover {
	background: var(--color-ink);
	color: #fff;
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.product-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	text-align: center;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.product-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-pop);
}

.product-card__media {
	display: block;
	aspect-ratio: 1;
	background: linear-gradient(180deg, #fafafa, #f1f1f1);
}

.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 1.5rem;
}

.product-card h3 {
	margin: 1rem 0 0.25rem;
	font-size: 1.0625rem;
}

.product-card p {
	color: var(--color-body);
	font-size: 0.875rem;
	padding-bottom: 1.5rem;
}

.product-card[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------
   18. Knowledge center
   ---------------------------------------------------------------------- */
.knowledge-center {
	padding-block: 4rem;
}

.knowledge-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.knowledge-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	padding-bottom: 1.5rem;
}

.knowledge-card__media {
	display: block;
	position: relative;
	aspect-ratio: 504 / 288;
	overflow: hidden;
}

.knowledge-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.knowledge-card:hover .knowledge-card__media img {
	transform: scale(1.06);
}

.knowledge-card h2,
.knowledge-card h3 {
	font-size: 1.1875rem;
	padding: 1.25rem 1.5rem 0.5rem;
	margin: 0;
}

.knowledge-card time {
	display: block;
	padding: 0 1.5rem;
	color: var(--color-body);
	font-size: 0.875rem;
}

.knowledge-card__excerpt {
	padding: 0.75rem 1.5rem 0;
	font-size: 0.9375rem;
}

.knowledge-card__more {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 0.4rem;
	/* margin-top: auto pins this to the bottom of the card's flex
	   column, so it lines up at the same height across a row even when
	   titles wrap to a different number of lines. */
	margin: auto 1.5rem 0 auto;
	font-weight: 700;
	color: var(--color-primary);
}

.knowledge-card__more .icon {
	width: 16px;
	height: 16px;
	background: var(--color-primary-light);
	color: #fff;
	border-radius: 50%;
	padding: 4px;
	box-sizing: content-box;
	transition: transform var(--transition-base);
}

.icon-arrow-down-right {
	transform: rotate(-45deg);
}

.knowledge-card:hover .knowledge-card__more .icon.icon-arrow-down-right,
.knowledge-card__more:hover .icon.icon-arrow-down-right,
.knowledge-card__more:focus-visible .icon.icon-arrow-down-right {
	transform: rotate(-45deg) translate(3px, 3px);
}

/* -------------------------------------------------------------------------
   19. CTA banner
   ---------------------------------------------------------------------- */
.cta-banner {
	padding-block: 0 4rem;
}

/* When nested inside a white card (e.g. the Before/After and pest
   selector sections), the card's own padding already provides bottom
   spacing, and we just need a gap above the banner instead of the
   default bottom margin. */
.before-after-section__card .cta-banner,
.pest-selector__card .cta-banner {
	padding-block: 1.5rem 0;
}

.cta-banner--full {
	padding: 0;
}

.cta-banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	background-color: var(--color-primary);
	background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 24px 24px;
	border-radius: var(--radius-lg);
	padding: 2rem 2.5rem;
}

.cta-banner--full .cta-banner__inner {
	border-radius: 0;
}

.cta-banner__text {
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	margin: 0;
	white-space: nowrap;
	/* Belt-and-braces for a long banner sentence at narrower desktop
	   widths (e.g. 1366px laptops): flex-shrink so the button (below,
	   flex-shrink: 0) always keeps its full size and the text takes
	   whatever's left, with overflow/ellipsis as a safety net rather
	   than the whole row wrapping the button onto its own line. */
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Keep text + button on one row from tablet up — flex-wrap: wrap above
   stays as the small-screen fallback (overridden to flex-direction:
   column at 767px below anyway), but between that and desktop, wrapping
   just dropped the button onto its own line while the row still had
   visible empty space, since flex-wrap triggers on the *unshrunk*
   content width, not the actual available space. */
@media (min-width: 768px) {
	.cta-banner__inner {
		flex-wrap: nowrap;
	}

	.cta-banner__inner .btn {
		flex-shrink: 0;
	}
}

/* -------------------------------------------------------------------------
   20. Footer
   ---------------------------------------------------------------------- */
.site-footer {
	position: relative;
	background: var(--color-surface-tint);
	padding-top: 1.5rem;
	overflow: hidden;
}

.footer-newsletter {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 1.25rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.footer-newsletter__logo img {
	height: 56px;
	width: auto;
}

/* Mockup layout: "Signup to get Latest Updates" label, email input and
   the Signup button all sit in one horizontal row, vertically centered
   — not the plugin's own default of a label stacked above the input. */
.footer-newsletter__form-wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.9rem;
	flex: 1 1 320px;
}

.footer-newsletter__label {
	margin: 0;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-ink);
	white-space: nowrap;
}

/* The field's own label ("Signup to get Latest Updates *") is hidden in
   favor of the real heading above — kept here as a CSS-side backstop so
   it can never show twice regardless of whether it's also disabled in
   the Form Maker admin. */
.footer-newsletter__form .wdform-label-section {
	display: none !important;
}

/* The shared .consultation-card__form rules stack every field/button as
   a full-width block, which suits the hero/contact forms' multiple
   fields but not this form's single-line "email + button" layout — so
   lay its one wdform_section out as a row instead.

   Form Maker's own CSS (`.fm-form-builder .wdform_section`) sets
   `flex-direction: column` — confirmed via DevTools, nothing to do with
   absolute positioning. display:flex alone wasn't enough to override
   just that one property, so flex-direction needs its own !important
   here too. */
.footer-newsletter__form .wdform_section {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.75rem !important;
	flex-wrap: wrap !important;
}

.footer-newsletter__form .wdform_column {
	width: auto !important;
}

.footer-newsletter__form .wdform-field {
	margin-bottom: 0 !important;
}

/* Form Maker's own responsive CSS (desktop only, ≥769px) adds
   `margin-top: 10px` to the email field's wrapper via its
   `.fm_empty_margin` class — nothing gives the button column the same
   margin, so the input sat 10px lower than the button beside it.
   Confirmed via DevTools. */
.footer-newsletter__form .fm_empty_margin {
	margin-top: 0 !important;
}

/* The shared rules give the input 0.5rem-tall padding and the button
   1rem-tall padding (sized for a full-width submit button below a
   stack of fields), which made the button noticeably taller than the
   input sitting right beside it here — force both to the same fixed
   height instead of relying on padding to match up. Background/border
   match the mockup's tinted, borderless input. */
.footer-newsletter__form input:not([type='submit']):not([type='hidden']):not(.fm-hide) {
	height: 3rem !important;
	padding: 0 1rem !important;
	background: var(--color-surface-tint-strong) !important;
	border-color: transparent !important;
}

.footer-newsletter__form button,
.footer-newsletter__form input[type='submit'] {
	height: 3rem !important;
	padding: 0 1.5rem !important;
	margin: 0 !important;
	width: auto !important;
	white-space: nowrap !important;
}

.footer-columns {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 2.5rem;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 2.5rem;
}

.footer-col-stack {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.footer-col__heading {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-ink);
	margin: 1.5rem 0 0.75rem;
}

.footer-col__heading--accent {
	color: var(--color-primary);
	margin-top: 0;
}

.footer-col--about p {
	font-size: 0.9375rem;
}

.footer-contact-line,
.footer-social-line {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.9375rem;
}

.footer-contact-line a:hover,
.footer-social-line a:hover {
	color: var(--color-primary);
}

.footer-social-line__disabled {
	opacity: 0.45;
}

.footer-menu {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: 0.9375rem;
}

.footer-menu--grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 1.5rem;
}

.footer-menu--flow {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 2rem;
	row-gap: 0.6rem;
}

.footer-menu a:hover,
.footer-menu a:focus-visible {
	color: var(--color-primary);
}

.footer-watermark {
	position: relative;
	text-align: center;
	overflow: hidden;
	height: clamp(80px, 12vw, 160px);
	margin-top: 1rem;
}

.footer-watermark__text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(2.5rem, 9vw, 7rem);
	color: var(--color-border);
	white-space: nowrap;
	letter-spacing: -0.02em;
}

.footer-watermark__palm {
	position: absolute;
	bottom: -10px;
	width: clamp(90px, 10vw, 180px);
	height: auto;
}

.footer-watermark__palm--left {
	left: 8%;
}

.footer-watermark__palm--right {
	right: 8%;
}

.footer-bottom {
	border-top: 1px solid var(--color-border);
	padding-block: 1.5rem;
}

.footer-bottom__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.875rem;
	color: var(--color-body);
}

.footer-bottom__inner p {
	margin: 0;
}

.footer-bottom__credit a {
	text-decoration: underline;
}

.footer-bottom__legal {
	display: flex;
	gap: 1.25rem;
}

.footer-bottom__legal a:hover {
	color: var(--color-primary);
}

/* -------------------------------------------------------------------------
   21. Inner pages
   ---------------------------------------------------------------------- */
.inner-page {
	padding-block: 3rem 5rem;
}

/* Empty-loop state (search with no matches, Case Studies with none
   published yet) — was entirely unstyled before (plain block text). */
.no-results {
	max-width: 60ch;
	margin: 0 auto;
	padding-block: 2rem;
	text-align: center;
}

.no-results h2 {
	margin-bottom: 0.75rem;
}

.no-results p {
	color: var(--color-body);
	font-size: 1.0625rem;
	margin-bottom: 1.5rem;
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: 0.875rem;
	color: var(--color-body);
	margin-bottom: 2rem;
}

.breadcrumbs__list li:not(:last-child)::after {
	content: '/';
	margin-left: 0.4rem;
	color: var(--color-border);
}

.breadcrumbs__list a:hover {
	color: var(--color-primary);
}

.post-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem;
}

.archive-header {
	margin-bottom: 2.5rem;
}

.archive-header__desc {
	margin-top: 1rem;
	max-width: 70ch;
}

/* Our Clients page (template-clients.php): logos grouped into
   sections (Food & FMCG, Real Estate & Construction, Hospitals &
   Healthcare, Others), each its own grid of white cards. */
.clients-page__section {
	margin-bottom: 3rem;
}

.clients-page__section:last-child {
	margin-bottom: 0;
}

.clients-page__section-heading {
	font-size: 1.375rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-border);
}

.clients-page__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.25rem;
}

.client-page-card {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 1.25rem;
	min-height: 110px;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.client-page-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-pop);
}

.client-page-card__img {
	max-width: 100%;
	max-height: 60px;
	width: auto;
	height: auto;
}

/* Products Page + Services Page templates */
.products-page .product-filters {
	margin-bottom: 2.5rem;
}

.products-page .product-grid {
	margin-bottom: 3rem;
}

a.product-filters__btn.is-active,
a.product-filters__btn:hover,
a.product-filters__btn:focus-visible {
	background: var(--color-ink);
	color: #fff;
}

.services-page__group {
	margin-bottom: 3.5rem;
}

.services-page__group:last-of-type {
	margin-bottom: 2.5rem;
}

.services-page__group-heading {
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--color-border);
}

.services-page__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.service-tile {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	text-align: center;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.service-tile:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-pop);
}

.service-tile__media {
	display: block;
	aspect-ratio: 1;
	background: linear-gradient(180deg, #fafafa, #f1f1f1);
}

.service-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-tile h3 {
	font-size: 1rem;
	margin: 1rem 1rem 0.25rem;
}

.service-tile p {
	font-size: 0.875rem;
	color: var(--color-body);
	padding: 0 1rem 1.25rem;
}

.single-article__title,
.single-page__title {
	margin-bottom: 0.75rem;
}

.single-article__meta {
	color: var(--color-body);
	font-size: 0.9375rem;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.single-article__thumb img,
.single-page__thumb img {
	border-radius: var(--radius-lg);
	margin-bottom: 2rem;
	width: 100%;
	object-fit: cover;
}

.entry-content > * + * {
	margin-top: 1.25em;
}

.entry-content h2,
.entry-content h3 {
	margin-top: 1.75em;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
	list-style: revert;
}

.entry-content img {
	border-radius: var(--radius-md);
}

.entry-content a {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

.single-article__tags {
	margin-top: 2rem;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
}

.author-box {
	display: flex;
	gap: 1.25rem;
	align-items: center;
	background: var(--color-surface-tint-strong);
	border-radius: var(--radius-md);
	padding: 1.5rem;
	margin-top: 2.5rem;
}

.author-box img {
	border-radius: 50%;
}

.comments-area {
	margin-top: 3rem;
}

.comment-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.comment-list .children {
	margin-top: 1.5rem;
	margin-left: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.comment-body {
	display: flex;
	gap: 1rem;
}

.comment-author img {
	border-radius: 50%;
}

.comment-metadata {
	font-size: 0.8125rem;
	color: var(--color-body);
}

.error-404 {
	text-align: center;
}

.error-404__content {
	max-width: 480px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.error-404__icon {
	margin-bottom: 1rem;
}

.error-404 .search-form {
	width: 100%;
	display: flex;
	gap: 0.5rem;
	margin: 1rem 0;
}

.search-form {
	display: flex;
	gap: 0.5rem;
}

.search-form__field {
	flex: 1;
}

.search-form__submit {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.contact-page__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	margin-top: 2rem;
}

.contact-page__list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 2rem;
}

.contact-page__list li {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.contact-page__list .icon {
	width: 24px;
	height: 24px;
	color: var(--color-primary);
	flex-shrink: 0;
	margin-top: 0.2rem;
}

.contact-page__list strong {
	display: block;
	color: var(--color-ink);
}

.contact-hero {
	max-width: 70ch;
	margin: 1.5rem 0 0;
}

.contact-hero p {
	color: var(--color-body);
	font-size: 1.125rem;
	margin-top: 1rem;
}

.contact-page__map {
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	margin-bottom: 1.5rem;
}

.contact-page__map iframe {
	display: block;
	width: 100%;
	height: 280px;
	border: 0;
}

.contact-page__prompt {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--color-surface-tint-strong);
	border-radius: var(--radius-md);
	font-weight: 600;
}

.contact-page__privacy {
	margin-top: 1.25rem;
	font-size: 0.8125rem;
	color: var(--color-body);
}

.contact-page__privacy a {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

.contact-service-area {
	padding-block: 3.5rem;
}

.contact-service-area__grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 3rem;
	align-items: center;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 2.5rem;
}

.contact-service-area__map img {
	width: 100%;
	height: auto;
	display: block;
}

.contact-service-area__body h2 {
	margin-bottom: 1rem;
}

.contact-service-area__body p {
	color: var(--color-body);
	margin-bottom: 1rem;
}

.contact-trust {
	padding-block: 1rem 4rem;
	text-align: center;
}

/* Overrides .trust-center__stats's default 2-col grid (sized for the
   Trust Center's own half-width layout) with the same flex row used
   for the Service/Industry hero stats elsewhere. */
.contact-trust__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem 3rem;
	max-width: 900px;
	margin: 0 auto;
}

.contact-trust__stats .trust-stat {
	flex: 1 1 180px;
}

.contact-trust__stats .trust-stat__label {
	margin-inline: auto;
}

.contact-trust__clients {
	max-width: 70ch;
	margin: 2.5rem auto 0;
	color: var(--color-body);
	font-weight: 600;
}

.contact-trust__standards-heading {
	font-size: 1.0625rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-body);
	margin: 3rem 0 1.5rem;
}

.contact-trust__standards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.25rem;
}

.contact-trust__standard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 1.5rem 1rem;
	text-align: center;
}

.contact-trust__standard .icon {
	width: 28px;
	height: 28px;
	color: var(--color-primary);
}

.contact-trust__standard strong {
	display: block;
	color: var(--color-ink);
	margin-bottom: 0.35rem;
}

.contact-trust__standard p {
	font-size: 0.8125rem;
	color: var(--color-body);
	margin: 0;
}

@media (max-width: 1023px) {
	.contact-service-area__grid {
		grid-template-columns: 1fr;
	}

	.contact-service-area__map {
		max-width: 260px;
		margin-inline: auto;
	}

	.contact-trust__standards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.contact-trust__standards {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   22. Back-to-top & floating actions
   ---------------------------------------------------------------------- */
.back-to-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-ink);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	z-index: 500;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover {
	background: var(--color-primary);
}

.floating-actions {
	position: fixed;
	right: 0;
	bottom: 5.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	z-index: 490;
}

.floating-actions__btn {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-pop);
	color: #fff;
	transition: transform var(--transition-fast);
}

.floating-actions__btn .icon,
.floating-actions__btn img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.floating-actions__btn:hover {
	transform: scale(1.08);
}

.floating-actions__btn--call {
	background: #0378ad;
}

.floating-actions__btn--whatsapp {
	background: #85c440;
}

/* -------------------------------------------------------------------------
   23. Responsive breakpoints
   ---------------------------------------------------------------------- */

/* Laptop */
@media (max-width: 1200px) {
	.footer-menu--grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Tablet */
@media (max-width: 1023px) {
	.hero__grid,
	.solutions__grid,
	.service-process__grid,
	.contact-page__grid {
		grid-template-columns: 1fr;
	}

	.solutions__side {
		flex-direction: row;
	}

	.testimonials__intro {
		flex-direction: column;
		text-align: center;
	}

	.testimonials__illustration {
		width: 60%;
	}

	.product-grid,
	.knowledge-grid,
	.post-grid,
	.services-page__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.clients-page__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.testimonial-card {
		flex: 0 0 calc(50% - 0.875rem);
	}

	.footer-columns {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.footer-menu--grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.menu-item--mega .mega-menu {
		width: min(760px, 94vw);
		padding: 2rem;
	}

	.mega-menu__inner {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.mega-menu__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.mega-menu--products .mega-menu__lists {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile nav breakpoint */
@media (max-width: 900px) {
	.mobile-nav-toggle {
		display: inline-flex;
	}

	.nav-panel {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(360px, 86vw);
		background: var(--color-surface);
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		padding: 6rem 1.75rem 2rem;
		transform: translateX(100%);
		transition: transform var(--transition-base);
		overflow-y: auto;
		z-index: 15;
	}

	.nav-panel.is-open {
		transform: translateX(0);
	}

	.nav-panel-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(15, 17, 20, 0.5);
		z-index: 12;
	}

	.nav-panel.is-open ~ .nav-panel-backdrop,
	.nav-panel-backdrop.is-open {
		display: block;
	}

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.menu-item {
		border-bottom: 1px solid var(--color-border);
	}

	.menu-link,
	.primary-menu > .menu-item > a {
		width: 100%;
		padding: 1rem 0;
		justify-content: space-between;
	}

	.submenu-toggle {
		display: inline-flex;
		position: absolute;
		right: 0;
		top: 0.4rem;
		width: 40px;
		height: 40px;
		align-items: center;
		justify-content: center;
	}

	/* The link's own chevron is desktop-only styling; on mobile the
	   separate .submenu-toggle button is the one and only dropdown
	   indicator, so hide the link's copy to avoid showing two. */
	.menu-item--has-children > .menu-link .icon,
	.menu-item--mega > .menu-link .icon {
		display: none;
	}

	.submenu-toggle .icon {
		transition: transform var(--transition-fast);
	}

	.menu-item.is-open .submenu-toggle .icon {
		transform: rotate(180deg);
	}

	.menu-item--has-children .sub-menu,
	.menu-item--mega .mega-menu {
		position: static;
		width: 100%;
		box-shadow: none;
		border-radius: 0;
		padding: 0 0 0 1rem;
		transform: none;
		opacity: 1;
		visibility: visible;
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--transition-base);
	}

	.menu-item.is-open > .sub-menu,
	.menu-item--mega.is-open .mega-menu {
		max-height: 2000px;
		padding-bottom: 1rem;
	}

	.mega-menu__inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.mega-menu__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.mega-menu--products .mega-menu__lists {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	/* Narrow slide-out panel: less padding so "Book a FREE Inspection"
	   reliably fits on one line instead of wrapping into a tall pill. */
	.mega-menu__cta {
		padding: 1.25rem 1.5rem;
	}

	.mega-menu__cta p {
		font-size: 1rem;
	}

	.mega-menu__cta-btn {
		font-size: 0.9375rem;
		padding: 0.75rem 0.75rem 0.75rem 1.25rem !important;
		gap: 0.6rem;
	}

	.mega-menu__cta-btn-icon {
		width: 26px;
		height: 26px;
	}

	.nav-panel__actions {
		flex-direction: column;
		align-items: stretch;
		margin-top: 1.5rem;
		gap: 1rem;
	}

	.nav-panel__actions .btn {
		justify-content: center;
	}
}

/* Small tablet / large mobile */
@media (max-width: 767px) {
	:root {
		--header-height: 72px;
	}

	/* The hero consultation form's Submit button is full-width with an
	   icon circle taking up some of that width — on narrow phones its
	   label could wrap to 2 lines at the desktop font-size. Shrink it
	   slightly so it reliably fits on one line. */
	.hero__form .consultation-card__form button,
	.hero__form .consultation-card__form input[type='submit'] {
		font-size: 0.9375rem !important;
	}

	.header-main__inner {
		justify-content: space-between;
	}

	.site-branding img,
	.custom-logo {
		height: 40px;
	}

	.topbar__ticker-group {
		font-size: 0.75rem;
		padding-inline: 1.25rem;
	}

	.hero {
		padding-block: 2rem 2rem;
	}

	.consultation-card {
		padding: 1.5rem;
	}

	.pest-selector__card {
		padding: 1.5rem;
	}

	.pest-selector__head {
		flex-direction: column;
		align-items: stretch;
	}

	.solutions__side {
		flex-direction: column;
	}

	.why-choose__grid,
	.product-grid,
	.knowledge-grid,
	.post-grid,
	.services-page__grid {
		grid-template-columns: 1fr;
	}

	.clients-page__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Map stacks above the cards on mobile; the cards themselves drop
	   to one per row too instead of a cramped 2x2. */
	.why-choose__cards {
		grid-template-columns: 1fr;
	}

	.reason-card {
		min-height: 0;
	}

	.reason-card img {
		position: static;
		transform: none;
		display: block;
		margin: 1rem auto 0;
	}

	.before-after-section__head {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}

	.testimonial-card {
		flex: 0 0 88%;
	}

	.trust-center__stats {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}

	/* .hero__stats and .service-stats .trust-center__stats are flex
	   (not grid) containers, so grid-template-columns here was a no-op
	   for them — that's why they weren't actually centering/stacking
	   one-per-row on mobile despite this rule existing. */
	.hero__stats,
	.service-stats .trust-center__stats {
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
	}

	.trust-stat,
	.hero-stat {
		text-align: center;
	}

	.trust-stat__label,
	.hero-stat__label {
		margin-left: auto;
		margin-right: auto;
	}

	.footer-columns {
		grid-template-columns: 1fr;
		padding: 2rem 1.5rem;
	}

	.footer-menu--grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-newsletter {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		padding: 1.5rem;
	}

	.footer-newsletter__form-wrap {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.footer-newsletter__form .wdform_section {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.footer-newsletter__form button,
	.footer-newsletter__form input[type='submit'] {
		width: 100% !important;
	}

	.footer-bottom__inner {
		flex-direction: column;
		text-align: center;
	}

	.cta-banner__inner {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 2rem 1.5rem;
	}

	/* Belt-and-braces on top of align-items: center above — guarantees
	   the button box itself is centered (not just its text) even if
	   its natural width leaves leftover space in the column. */
	.cta-banner__inner .btn {
		margin-inline: auto;
	}

	.cta-banner__text {
		white-space: normal;
		/* .cta-banner__inner is flex-direction: column here, and on
		   that cross (horizontal) axis flexbox never auto-shrinks an
		   item to fit the container — align-items: center only
		   centers whatever width the item computes to, it doesn't cap
		   it. `max-width: 26ch` alone could compute wider than the
		   actual card and overflow/get clipped instead of wrapping
		   (confirmed on-device). width: 100% binds it to the
		   container's real pixel width first; max-width then only
		   trims it narrower for more even, centered line breaks when
		   there's room to spare. */
		width: 100%;
		max-width: 26ch;
		margin-inline: auto;
	}

	/* Tag pills (e.g. "Termite Control", "Cockroach Control" on the
	   Solutions cards) otherwise wrap based on each tag's text length,
	   landing one-per-row or two-per-row inconsistently depending on
	   width — stack them one per row, centered, instead. */
	.solution-card__tags {
		flex-direction: column;
		align-items: center;
	}

	.contact-page__grid {
		grid-template-columns: 1fr;
	}
}

/* Small mobile */
@media (max-width: 480px) {
	.hero__badges {
		gap: 1rem;
		justify-content: space-between;
	}

	.hero__badge {
		max-width: 100px;
	}

	.hero__badge img {
		width: 48px;
		height: 48px;
	}

	.hero__badge span {
		font-size: 0.8125rem;
	}

	.mega-menu__grid {
		grid-template-columns: 1fr;
	}

	.trust-center__stats,
	.hero__stats,
	.service-stats .trust-center__stats {
		grid-template-columns: 1fr;
	}

	.floating-actions {
		right: 0;
	}

	.back-to-top {
		right: 1rem;
	}
}

/* Large screens */
@media (min-width: 1600px) {
	:root {
		--container-width: 1280px;
		--container-width-wide: 1480px;
	}

	body {
		font-size: 1.125rem;
	}
}

/* Anchor targets: offset scroll position so content doesn't hide under
   the sticky header when jumped to via #free-consultation links. */
#free-consultation {
	scroll-margin-top: calc(var(--header-height) + var(--topbar-height) + 1.5rem);
}

/* Scroll-reveal (progressive enhancement; content is fully visible
   without JS or when prefers-reduced-motion is set). */
.will-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 640ms ease, transform 640ms ease;
}

.will-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

/* -------------------------------------------------------------------------
   24. Reduced motion
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
   25. Service single template
   ---------------------------------------------------------------------- */
.service-hero {
	background: var(--color-surface-tint);
	padding-block: 3rem;
}

.service-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 4rem;
	align-items: center;
	margin-bottom: 2.5rem;
}

.service-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--color-body);
	margin-bottom: 0.75rem;
}

.service-hero__content h1 {
	/* Smaller than the global h1 clamp so "Protect Your Home from
	   Hidden Termite Damage" wraps to exactly 2 lines in this narrower
	   half-width column, matching the mockup, instead of 3+. */
	font-size: clamp(1.875rem, 2.6vw, 2.75rem);
	margin-bottom: 0;
}

.service-hero__description {
	text-align: center;
}

.service-hero__description p {
	color: var(--color-body);
	font-size: 1.125rem;
	margin-bottom: 1.5rem;
}

.service-hero__frame {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.service-hero__frame img {
	width: 100%;
	height: auto;
	display: block;
}

.service-stats {
	padding-block: 3rem;
}

/* The shared .trust-center__stats/.trust-stat classes default to a
   narrow 2-column grid (they were designed to sit in half of the old
   homepage Trust Center's two-column layout). Here they span the full
   page width, so switch to the same single-row, content-width-with-
   generous-gaps layout as the hero stats, instead of a stretched
   4-column grid. */
.service-stats .trust-center__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2rem 4rem;
}

.service-stats .trust-stat {
	flex: 0 0 auto;
}

.service-stats .trust-stat__label {
	text-align: center;
	margin-inline: auto;
}

.service-signs {
	padding-block: 1rem 3rem;
}

.service-signs__card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 2.5rem;
}

/* "Early signs of…" heading. Originally a very pale "ghost" watermark;
   the client found it hard to read, so it is now solid ink like the other
   section headings. */
.service-signs__card .section-heading {
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
	color: var(--color-ink);
	margin-bottom: 1.5rem;
}

.service-signs__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr 1fr;
	gap: 2rem;
	align-items: center;
	margin-top: 2rem;
}

.service-signs__col {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.service-signs__item {
	display: flex;
	gap: 1rem;
	background: var(--color-surface-tint);
	border-radius: var(--radius-md);
	padding: 1.25rem;
}

.service-signs__item-icon {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Icon images for this section are plain white silhouettes with no
   background of their own (whether bundled or uploaded fresh via the
   dashboard's image picker) — the colored circle behind them is drawn
   here in CSS instead of baked into the image, so any icon dropped in
   through wp-admin automatically gets the right color/size with zero
   image editing. Cycles the same 4 accent colors, by position, as the
   original Termite Control icons this pattern was matched to. Items
   are split across two .service-signs__col wrappers (2 each), so
   nth-child alone can't tell 4 apart — first/last-child narrows to the
   right column first. */
.service-signs__col:first-child .service-signs__item:nth-child(1) .service-signs__item-icon {
	background: #ae924e;
}

.service-signs__col:first-child .service-signs__item:nth-child(2) .service-signs__item-icon {
	background: #ee7545;
}

.service-signs__col:last-child .service-signs__item:nth-child(1) .service-signs__item-icon {
	background: #5a2f28;
}

.service-signs__col:last-child .service-signs__item:nth-child(2) .service-signs__item-icon {
	background: #9eab51;
}

.service-signs__item h3 {
	font-size: 1rem;
	margin-bottom: 0.35rem;
}

.service-signs__item p {
	font-size: 0.875rem;
	color: var(--color-body);
}

.service-signs__photo img {
	width: 100%;
	height: auto;
	display: block;
}

.service-safe {
	padding-block: 3rem;
}

/* Mockup: the heading sits above the photo (both in a left column),
   with the icon items in a second column that lines up with the
   heading's top, not the photo's — a plain "photo | heading+items"
   2-column split doesn't produce that. */
.service-safe__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 3rem;
	align-items: start;
}

.service-safe__left h2 {
	margin-bottom: 1.5rem;
}

.service-safe__right .btn {
	margin-top: 1.5rem;
}

.service-safe__photo img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	display: block;
}

.service-safe__items {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem 2rem;
}

.service-safe__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin-bottom: 0.75rem;
	border-radius: 50%;
	/* Same reasoning as .service-signs__item-icon above: the icon
	   image itself is a plain white silhouette, so any icon uploaded
	   via the dashboard picker gets the right color/size automatically
	   without needing the color baked into the image. Every "safe"
	   icon uses the same brand green, unlike "signs" which cycles 4
	   colors by position. */
	background: var(--color-primary);
}

.service-safe__item h3 {
	font-size: 1.0625rem;
	margin-bottom: 0.35rem;
}

.service-safe__item p {
	font-size: 0.875rem;
	color: var(--color-body);
}

.service-protect {
	padding-block: 3rem;
}

.service-protect__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.service-protect__head .section-heading {
	margin-bottom: 0;
}

.service-protect__grid {
	display: flex;
	gap: 1.75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.service-protect__grid::-webkit-scrollbar {
	display: none;
}

.service-protect__card {
	flex: 0 0 calc(33.333% - 1.17rem);
	scroll-snap-align: start;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 1.5rem;
}

.service-protect__card-media {
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: 1.25rem;
	aspect-ratio: 4 / 3;
}

.service-protect__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.service-protect__card h3 {
	font-size: 1.0625rem;
	margin-bottom: 0.4rem;
}

.service-protect__card p {
	font-size: 0.9375rem;
	color: var(--color-body);
}

.service-process-banner {
	padding-block: 1rem 3rem;
}

.service-process-banner__card {
	background: var(--color-primary);
	background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 24px 24px;
	border-radius: var(--radius-lg);
	padding: 3rem 2.5rem;
	text-align: center;
	color: #fff;
}

.service-process-banner__card h2 {
	color: #fff;
	margin-bottom: 0.75rem;
}

.service-process-banner__card > p {
	max-width: 60ch;
	margin: 0 auto 2.5rem;
	color: rgba(255, 255, 255, 0.9);
}

.service-process-banner__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.service-process-banner__step {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: 2.5rem 1.5rem 1.75rem;
	position: relative;
	text-align: center;
}

.service-process-banner__num {
	position: absolute;
	top: -28px;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-primary-light);
	color: #fff;
	font-weight: 800;
	font-size: 1.125rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.service-process-banner__step h3 {
	color: var(--color-ink);
	font-size: 1.0625rem;
	margin-bottom: 0.5rem;
}

.service-process-banner__step p {
	color: var(--color-body);
	font-size: 0.875rem;
}

.service-partner {
	padding-block: 3rem;
}

.service-partner__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

.service-partner__body p {
	color: var(--color-body);
	margin-top: 1rem;
}

/* Mockup: the first card ("25+ Years of expertise") spans the full
   width of the row with its icon beside the text, then the remaining
   two cards share a second row, each centered with the icon on top —
   not all three stacked one-per-row. */
.service-partner__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.service-partner__card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 1.5rem;
}

.service-partner__card:first-child {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.service-partner__card:first-child img {
	flex: 0 0 auto;
	margin-bottom: 0;
}

.service-partner__card:not(:first-child) {
	text-align: center;
}

.service-partner__card:not(:first-child) img {
	margin-inline: auto;
}

.service-partner__card img {
	margin-bottom: 0.75rem;
}

.service-partner__card h3 {
	font-size: 1.0625rem;
	margin-bottom: 0.35rem;
}

.service-partner__card p {
	font-size: 0.875rem;
	color: var(--color-body);
}

@media (max-width: 1023px) {
	.service-hero__grid {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.service-signs__grid {
		grid-template-columns: 1fr;
	}

	.service-signs__photo {
		order: -1;
		max-width: 320px;
		margin: 0 auto;
	}

	.service-safe__grid,
	.service-partner__grid {
		grid-template-columns: 1fr;
	}

	.service-protect__card {
		flex: 0 0 calc(50% - 0.875rem);
	}
}

@media (max-width: 767px) {
	.service-safe__items {
		grid-template-columns: 1fr;
	}

	.service-partner__cards {
		grid-template-columns: 1fr;
	}

	.service-partner__card:first-child {
		flex-direction: column;
		text-align: center;
	}

	.service-partner__card:first-child img {
		margin-inline: auto;
		margin-bottom: 0.75rem;
	}

	.service-process-banner__steps {
		grid-template-columns: 1fr 1fr;
	}

	.service-protect__card {
		flex: 0 0 88%;
	}

	.service-protect__head {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}
}

@media (max-width: 480px) {
	.service-process-banner__steps {
		grid-template-columns: 1fr;
	}

	.service-process-banner__card {
		padding: 2.5rem 1.25rem 1.75rem;
	}
}

/* -------------------------------------------------------------------------
   Industry pages (single-apco_industry.php) — the hero, "Why pest
   control matters" and "Compliance & safety standard" sections are
   unique to this template; the services-cards/process-banner/trusted-
   partner/before-after/FAQ sections deliberately reuse the .service-*
   classes above since the mockup uses the identical component there.
   ---------------------------------------------------------------------- */
.industry-hero {
	background: var(--color-surface-tint);
	padding-block: 3rem;
}

.industry-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 4rem;
	align-items: center;
	margin-bottom: 2.5rem;
}

.industry-hero__content h1 {
	/* Matches the mockup's bold, large hero headline — the global h1
	   clamp (assets/css/main.css §4 Typography), rather than the
	   smaller half-column override single-apco_service.php's hero
	   uses, since the Industry mockup's H1 is visibly larger than
	   that. */
	margin-bottom: 1.5rem;
}

.industry-hero__badges {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.industry-hero__badge {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-ink);
}

.industry-hero__badge-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
}

.industry-hero__badge-icon .icon {
	width: 14px;
	height: 14px;
}

.industry-hero__description {
	text-align: center;
}

.industry-hero__description p {
	color: var(--color-body);
	font-size: 1.125rem;
	margin-bottom: 1.5rem;
}

.industry-hero__frame {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.industry-hero__frame img {
	width: 100%;
	height: auto;
	display: block;
}

.industry-why {
	padding-block: 3rem;
}

.industry-why__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 3rem;
	/* Stretch (the grid default) instead of start, so the left column
	   matches the right column's full content height — combined with
	   .industry-why__left below, this is what lets the photo grow to
	   fill that height instead of stopping at its own natural aspect
	   ratio. */
	align-items: stretch;
}

.industry-why__left {
	display: flex;
	flex-direction: column;
	/* Grid/flex items default to min-height: auto, which lets their
	   content's own intrinsic size (the photo's natural aspect ratio,
	   via the img below) override "stretch" and inflate the row taller
	   than the right column actually needs — this opts back out, so
	   the row height is driven by the right column and the photo
	   genuinely shrinks/grows to match it instead of the other way
	   around. */
	min-height: 0;
}

.industry-why__left h2 {
	margin-bottom: 1.5rem;
}

.industry-why__photo {
	flex: 1;
	min-height: 0;
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* min-height: 0 alone isn't enough to stop the photo from dictating the
   row's height: grid auto-sizes a row to the *tallest* item's natural
   content size, and a normal-flow img's own aspect ratio still counts
   as "natural content size" even inside a min-height: 0 flex item.
   Taking the img out of flow entirely (absolute + inset: 0) removes
   that contribution altogether, so .industry-why__left's only natural
   height becomes its heading — letting the taller .industry-why__right
   column genuinely drive the row, with the photo (now sized purely by
   its stretched, positioned parent) filling exactly that. */
.industry-why__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.industry-why__right p {
	color: var(--color-body);
	margin-bottom: 1rem;
}

.industry-why__benefits-label {
	font-size: 1.0625rem;
	margin: 1.5rem 0 1rem;
}

.industry-why__benefits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}

.industry-why__benefit {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.industry-why__benefit-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-primary);
}

.industry-why__benefit h4 {
	font-size: 0.9375rem;
	margin: 0;
}

.industry-compliance {
	padding-block: 3rem;
}

.industry-compliance__grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 3rem;
	/* Same stretch approach as .industry-why__grid above, so the photo
	   fills the full height of the 5-item checklist beside it instead
	   of stopping short. */
	align-items: stretch;
}

.industry-compliance__left {
	display: flex;
	flex-direction: column;
	/* See .industry-why__left's comment above — opts out of the
	   flex/grid min-height: auto default so the row height (and thus
	   the photo's height) is driven by the checklist on the right,
	   instead of the photo's own aspect ratio inflating the row. */
	min-height: 0;
}

.industry-compliance__left h2 {
	margin-bottom: 1.5rem;
}

.industry-compliance__photo {
	flex: 1;
	min-height: 0;
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

/* See .industry-why__photo img's comment above — takes the img out of
   flow so it can't dictate the row's auto height, letting the taller
   checklist column genuinely drive it instead. */
.industry-compliance__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.industry-compliance__right {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.industry-compliance__item {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 1.25rem 1.5rem;
}

.industry-compliance__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-primary-light);
	color: #fff;
	font-weight: 800;
	font-size: 1rem;
}

.industry-compliance__item h3 {
	font-size: 1.0625rem;
	margin-bottom: 0.25rem;
}

.industry-compliance__item p {
	font-size: 0.875rem;
	color: var(--color-body);
	margin: 0;
}

@media (max-width: 1023px) {
	.industry-hero__grid,
	.industry-why__grid,
	.industry-compliance__grid {
		grid-template-columns: 1fr;
		align-items: start;
	}

	/* Stacked to one column here, so the equal-height stretch from the
	   desktop 2-column layout no longer applies — let the photo fall
	   back to its natural aspect ratio instead of flex:1 trying to fill
	   a height nothing constrains anymore. Also take the img back out
	   of absolute positioning (see the desktop rule's comment): with
	   nothing forcing .industry-why__photo's height here, an
	   absolute+inset:0 img would otherwise collapse its container to
	   zero height instead of following normal document flow. */
	.industry-why__photo,
	.industry-compliance__photo {
		flex: none;
		min-height: auto;
		position: static;
	}

	.industry-why__photo img,
	.industry-compliance__photo img {
		position: static;
		inset: auto;
		height: auto;
	}
}

@media (max-width: 767px) {
	.industry-hero__badges,
	.industry-why__benefits {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Location pages (single-apco_location.php) — one per Kerala district.
   Hero/services grid/process banner/trust cards/FAQ reuse the Service &
   Industry pages' shared classes verbatim (.service-process-banner,
   .service-partner, .pest-selector, .faq); the hero, trust row, "why
   choose" and services grid are unique to this template.
   ---------------------------------------------------------------------- */
.location-hero {
	background: var(--color-surface-tint);
	padding-block: 3rem;
}

.location-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 4rem;
	align-items: center;
	margin-bottom: 2.5rem;
}

.location-hero__description p {
	color: var(--color-body);
	font-size: 1.125rem;
	margin-bottom: 1.5rem;
}

.location-hero__frame {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

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

.location-trust {
	padding-block: 2.5rem;
}

.location-trust__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	text-align: center;
}

.location-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-primary);
	margin-bottom: 1rem;
}

.location-trust__icon img {
	width: 32px;
	height: 32px;
}

/* Reused inside .service-partner__card (the "Trusted pest control"
   stat cards) alongside its existing flex-row layout — that layout
   already spaces icon from text via `gap`, so drop this component's
   own standalone margin-bottom to avoid doubling up the space. */
.service-partner__card .location-trust__icon {
	margin-bottom: 0;
	flex: 0 0 auto;
}

.location-trust__card h3 {
	font-size: 1.0625rem;
	margin-bottom: 0.35rem;
}

.location-trust__card p {
	color: var(--color-body);
	font-size: 0.9375rem;
	margin: 0;
}

.location-why {
	padding-block: 2.5rem 3rem;
	text-align: center;
}

.location-why__head {
	margin-bottom: 2rem;
}

.location-why__subheading {
	color: var(--color-primary);
	font-weight: 700;
	margin-bottom: 1rem;
}

.location-why__head p:last-child {
	color: var(--color-body);
	max-width: 70ch;
	margin-inline: auto;
}

.location-why__bullets {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.location-why__bullets li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	color: var(--color-ink);
}

.location-why__bullets .icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--color-primary);
}

.location-services {
	padding-block: 2.5rem 3rem;
}

.location-services .section-heading {
	margin-bottom: 2rem;
}

.location-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.location-services__card {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 2.25rem 1.5rem 1.5rem;
	position: relative;
}

.location-services__num {
	position: absolute;
	top: -22px;
	left: 1.5rem;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-weight: 800;
	font-size: 0.9375rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.location-services__card h3 {
	font-size: 1.0625rem;
	margin-bottom: 0.35rem;
}

.location-services__card p {
	color: var(--color-body);
	font-size: 0.9375rem;
	margin: 0;
}

@media (max-width: 1023px) {
	.location-hero__grid {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.location-services__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.location-trust__grid,
	.location-why__bullets,
	.location-services__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Blog (home.php, archive.php, search.php) — hero + filter bar shared
   across all three, a "featured" spotlight for the latest post on the
   Blog listing's first page, and the .knowledge-card loop card (shared
   with the homepage Knowledge Center section) extended with a category
   badge, author/date/reading-time meta row.
   ---------------------------------------------------------------------- */
.blog-hero {
	background: var(--color-surface-tint);
	padding-block: 3.5rem 3rem;
	text-align: center;
}

.blog-hero__intro {
	max-width: 740px;
	margin-inline: auto;
}

.blog-hero h1 {
	font-size: clamp(2.5rem, 4.5vw, 3.75rem);
}

.blog-hero__desc {
	color: var(--color-body);
	font-size: 1.125rem;
	margin-bottom: 1.75rem;
}

/* Real counts (published post total, category total — see
   template-parts/blog-hero.php), not placeholder numbers. Reuses
   .trust-stat__value/__label (the homepage trust bar's stat styling,
   assets/css/main.css §12) at a smaller scale suited to a hero strip
   rather than a full section. */
.blog-hero__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem 2.75rem;
	margin-bottom: 2rem;
}

.blog-hero__stat .trust-stat__value {
	font-size: clamp(1.5rem, 2vw, 1.875rem);
	margin-bottom: 0;
}

.blog-hero__stat .trust-stat__label {
	font-size: 0.8125rem;
	color: var(--color-body);
	max-width: none;
}

.blog-hero__search {
	max-width: 460px;
	margin: 0 auto 2rem;
}

/* One seamless pill instead of a separate input box + a detached round
   button beside it — same "text on the left, icon-circle flush on the
   right, all inside one pill" language as .mega-menu__cta-btn/.btn
   elsewhere on the site. */
.blog-hero__search .search-form {
	display: flex;
	align-items: center;
	gap: 0;
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
	border-radius: var(--radius-pill);
	padding: 0.4rem 0.4rem 0.4rem 1.5rem;
}

.blog-hero__search .search-form__field {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 0.6rem 0;
	box-shadow: none;
}

.blog-hero__search .search-form__field:focus {
	outline: none;
	box-shadow: none;
}

.blog-hero__search .search-form__submit {
	flex-shrink: 0;
}

.blog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
}

.blog-filters__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1.25rem;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-body);
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
	transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.blog-filters__btn:hover {
	transform: translateY(-2px);
}

.blog-filters__btn.is-active,
.blog-filters__btn:hover,
.blog-filters__btn:focus-visible {
	background: var(--color-ink);
	color: #fff;
}

.blog-filters__count {
	background: rgba(21, 24, 29, 0.08);
	color: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.1rem 0.45rem;
	border-radius: var(--radius-pill);
}

.blog-filters__btn.is-active .blog-filters__count,
.blog-filters__btn:hover .blog-filters__count {
	background: rgba(255, 255, 255, 0.2);
}

/* .blog-hero already carries its own bottom padding immediately above
   this — knock down .inner-page's default top padding so the hero and
   the featured/grid content below it aren't separated by a double gap. */
.inner-page--blog {
	padding-top: 1.5rem;
}

/* Category badge — overlaid on a loop card's thumbnail, or shown
   plain (via .knowledge-card__media--plain) when a post has none. */
.post-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 1;
	background: var(--color-primary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.35rem 0.75rem;
	border-radius: var(--radius-pill);
}

/* Standalone context (the featured card, single post header) instead
   of overlaid on a thumbnail — same pill, normal document flow. */
.post-badge--static {
	position: static;
	display: inline-block;
	margin-bottom: 1rem;
}

.post-badge--static:hover {
	color: #fff;
}

.knowledge-card__media--plain {
	position: relative;
	aspect-ratio: 504 / 288;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}

.knowledge-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.35rem 1.5rem 0;
	color: var(--color-body);
	font-size: 0.8125rem;
}

.knowledge-card__meta img {
	border-radius: 50%;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

/* Overrides .knowledge-card time's display:block (correct for the
   homepage Knowledge Center's simpler card, which has no meta row) so
   the <time> here sits inline within this flex row instead. */
.knowledge-card__meta time {
	display: inline;
	padding: 0;
	font-size: inherit;
}

.knowledge-card__meta-dot {
	color: var(--color-border);
}

/* Featured spotlight — the latest post, shown large above the grid on
   the Blog listing's first page only. */
.blog-featured {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	/* stretch (default), not center: .blog-featured__media below relies
	   on filling exactly the row's real height — center would leave its
	   height indeterminate (a circular height: 100% / aspect-ratio
	   fight, since align-items: center never gives it a definite size
	   to resolve against), which is what let the image collapse to a
	   near-zero column and the text spill outside its own track. */
	align-items: stretch;
	gap: 2.5rem;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
	overflow: hidden;
	margin-bottom: 3.5rem;
	transition: transform var(--transition-base);
}

.blog-featured:hover {
	transform: translateY(-4px);
}

.blog-featured__media {
	display: block;
	position: relative;
	min-height: 340px;
}

.blog-featured__read-time {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	z-index: 1;
	background: rgba(21, 24, 29, 0.65);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.4rem 0.85rem;
	border-radius: var(--radius-pill);
}

/* Absolute + inset: 0 (same technique as the Industry pages'
   equal-height photo sections) instead of width/height: 100% on the
   img directly — that needs .blog-featured__media to already have a
   definite height to resolve against, which a grid row's auto/stretch
   sizing doesn't reliably provide; this fills whatever height the
   stretched grid cell actually ends up with. */
.blog-featured__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-featured__body {
	min-width: 0;
	padding: 2rem 2.5rem 2rem 0;
}

.blog-featured__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--color-primary-dark);
	margin: 0 0.75rem 0.75rem 0;
}

.blog-featured__eyebrow .icon {
	width: 15px;
	height: 15px;
	color: var(--color-primary);
}

.blog-featured .post-badge--static {
	margin-bottom: 0.75rem;
}

.blog-featured__body h2 {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	margin-bottom: 0.75rem;
}

.blog-featured__body .knowledge-card__meta {
	padding: 0;
	margin-bottom: 1.25rem;
}

.blog-featured__excerpt {
	color: var(--color-body);
	margin-bottom: 1.5rem;
}

.knowledge-grid--blog {
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

/* Staggers the existing scroll-reveal fade/slide-in (.will-reveal,
   assets/js/main.js) across the first row instead of every card
   appearing at once — a small, purely-CSS touch that reads as more
   deliberate than a flat reveal. Caps at 3 since that's a full row. */
.knowledge-grid--blog .knowledge-card:nth-child(1) { transition-delay: 0ms; }
.knowledge-grid--blog .knowledge-card:nth-child(2) { transition-delay: 90ms; }
.knowledge-grid--blog .knowledge-card:nth-child(3) { transition-delay: 180ms; }

@media (max-width: 1023px) {
	.blog-featured {
		grid-template-columns: 1fr;
	}

	/* Stacked to one column: the image is no longer stretched to match
	   a row height, so give it a proportional aspect ratio (still with
	   the same min-height as a floor) instead of relying on the
	   desktop grid to size it. */
	.blog-featured__media {
		aspect-ratio: 16 / 10;
	}

	.blog-featured__body {
		padding: 0 1.75rem 1.75rem;
	}
}

@media (max-width: 1023px) {
	.knowledge-grid--blog {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.knowledge-grid--blog {
		grid-template-columns: 1fr;
	}
}


/* A card lift-on-hover to match .product-card/.service-tile elsewhere
   on the site — the loop card previously only zoomed its image. */
.knowledge-card {
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.knowledge-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-pop);
}

/* Single post: full-width reading column (no sidebar anywhere on this
   site) plus the category badge / avatar+reading-time meta row that
   match the loop cards, and a link back to the Blog listing where the
   comments section used to sit. */
.single-article__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.single-article__meta img {
	border-radius: 50%;
	margin-right: 0.25rem;
}

.single-article__back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2.5rem;
	font-weight: 700;
	color: var(--color-primary-dark);
}

.single-article__back:hover,
.single-article__back:focus-visible {
	color: var(--color-primary);
}

.single-article__back .icon {
	width: 18px;
	height: 18px;
}

/* Pagination (the_posts_pagination() default markup, apco_pagination()
   in inc/template-tags.php) — previously completely unstyled, falling
   through to bare underlined browser-default links. Numbered pill
   circles matching the site's button language instead. */
.pagination {
	margin-top: 3.5rem;
}

.pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 0.4rem;
	border-radius: 50%;
	font-weight: 700;
	color: var(--color-ink);
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
	transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible {
	background: var(--color-ink);
	color: #fff;
	transform: translateY(-3px);
}

.pagination .page-numbers.current {
	background: var(--color-primary);
	color: #fff;
	box-shadow: none;
}

.pagination .page-numbers.dots {
	background: transparent;
	box-shadow: none;
	color: var(--color-body);
}

.pagination .page-numbers.dots:hover {
	transform: none;
}

.pagination .prev.page-numbers,
.pagination .next.page-numbers {
	background: var(--color-primary);
	color: #fff;
}

.pagination .prev.page-numbers:hover,
.pagination .next.page-numbers:hover {
	background: var(--color-primary-dark);
}

.pagination .page-numbers .icon {
	width: 18px;
	height: 18px;
}

/* -------------------------------------------------------------------------
   About Us page (page-templates/template-about.php) — three of its
   sections (client logos, Kerala coverage map + reason cards, and the
   green CTA look) are the existing homepage components reused
   wholesale; only the hero, "Who We Are", "Our Mission" and
   "Our Approach" sections below are unique to this page.
   ---------------------------------------------------------------------- */
.about-hero {
	background: var(--color-surface-tint);
	padding-block: 3.5rem;
}

.about-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.about-hero__content p {
	color: var(--color-body);
	font-size: 1.125rem;
	margin: 1.25rem 0 1.75rem;
}

.about-hero__photo img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	display: block;
}

.about-hero__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2rem 3rem;
	margin-top: 3.5rem;
}

.about-hero__stats .trust-stat {
	flex: 1 1 180px;
	text-align: center;
}

.about-hero__stats .trust-stat__label {
	margin-inline: auto;
}

.about-who {
	padding-block: 4rem 3rem;
}

.about-who__grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 3rem;
	margin-bottom: 2.5rem;
}

.about-who__copy p {
	color: var(--color-body);
}

.about-who__copy p + p {
	margin-top: 1.25rem;
}

.about-who__photo img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	display: block;
}

.about-mission {
	padding-block: 4rem;
}

.about-mission .container {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 3rem;
	align-items: center;
}

.about-mission__photo img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	display: block;
}

.about-mission__body {
	text-align: right;
}

.about-mission__body p {
	color: var(--color-body);
	margin-bottom: 1.25rem;
}

.about-mission__body .btn {
	margin-left: auto;
}

.about-approach {
	padding-block: 3rem;
}

.about-approach__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.75rem;
}

.about-approach__card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 2rem;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.about-approach__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-pop);
}

.about-approach__card h3 {
	font-size: 1.1875rem;
	margin-bottom: 0.6rem;
}

.about-approach__card p {
	color: var(--color-body);
	font-size: 0.9375rem;
}

.about-commitment {
	padding-block: 2rem 4rem;
}

.about-commitment__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2rem;
	background: var(--color-primary);
	background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 24px 24px;
	border-radius: var(--radius-lg);
	padding: 3rem 3.5rem;
}

.about-commitment__text {
	max-width: 640px;
}

.about-commitment__text h2 {
	color: #fff;
	margin-bottom: 1rem;
}

.about-commitment__text p {
	color: rgba(255, 255, 255, 0.9);
}

.about-commitment .btn {
	flex-shrink: 0;
}

/* About page, October 2026 content revamp. */
.about-hero__content .about-hero__lead {
	margin-bottom: 0;
	font-weight: 600;
	color: var(--color-ink);
}

.about-who__copy .btn {
	margin-top: 1.5rem;
}

/* "Who We Serve" / "Kerala Coverage" / "Our Commitment" are text-only
   uses of the "Who We Are" layout, so they sit tighter. */
.about-serve,
.about-coverage,
.about-commitment-text {
	padding-block: 2.5rem;
}

.about-serve .about-who__grid,
.about-coverage .about-who__grid,
.about-commitment-text .about-who__grid {
	margin-bottom: 0;
}

/* Five "Our Approach" cards: 3 on the first row, 2 centred below. */
.about-approach__grid--five {
	grid-template-columns: repeat(6, 1fr);
}

.about-approach__grid--five .about-approach__card {
	grid-column: span 2;
}

.about-approach__grid--five .about-approach__card:nth-child(4) {
	grid-column: 2 / span 2;
}

.about-approach__grid--five .about-approach__card:nth-child(5) {
	grid-column: 4 / span 2;
}

.about-final-cta {
	padding-bottom: 4rem;
}

/* Reason cards with longer text (About "What Sets Us Apart"): icon sits
   above the text instead of being pinned to the bottom of the card. */
.why-choose--detailed .reason-card {
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.why-choose--detailed .reason-card img {
	position: static;
	transform: none;
	order: -1;
	width: 96px;
	height: 96px;
	margin: 0 0 0.75rem;
}

@media (max-width: 1023px) {
	.about-approach__grid--five .about-approach__card,
	.about-approach__grid--five .about-approach__card:nth-child(4),
	.about-approach__grid--five .about-approach__card:nth-child(5) {
		grid-column: auto;
	}
}

@media (max-width: 1023px) {
	.about-hero__grid,
	.about-who__grid,
	.about-mission .container,
	.about-approach__grid {
		grid-template-columns: 1fr;
	}

	.about-mission__body {
		text-align: left;
	}

	.about-mission__body .btn {
		margin-left: 0;
	}

	.about-hero__photo {
		order: -1;
	}
}

@media (max-width: 767px) {
	.about-hero__stats {
		justify-content: center;
	}

	.about-commitment__card {
		justify-content: center;
		text-align: center;
		padding: 2.5rem;
	}

	.about-commitment__text {
		max-width: none;
	}
}

/* -------------------------------------------------------------------------
   Gallery page (page-templates/template-gallery.php) — filter pills
   (same interaction pattern as .product-filters__btn elsewhere), a CSS
   masonry grid with a lightbox (assets/js/main.js), and a stack of the
   site's existing before/after drag-compare sliders reused as-is.
   ---------------------------------------------------------------------- */
.gallery-hero {
	background: var(--color-surface-tint);
	padding-block: 3.5rem 3rem;
	text-align: center;
}

.gallery-hero h1 {
	margin-bottom: 0.75rem;
}

.gallery-hero p {
	color: var(--color-body);
	font-size: 1.125rem;
	max-width: 60ch;
	margin: 0 auto 2rem;
}

.gallery-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}

.gallery-filters__btn {
	padding: 0.6rem 1.25rem;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-body);
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
	transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.gallery-filters__btn:hover {
	transform: translateY(-2px);
}

.gallery-filters__btn.is-active,
.gallery-filters__btn:hover,
.gallery-filters__btn:focus-visible {
	background: var(--color-ink);
	color: #fff;
}

.gallery-grid-section {
	padding-block: 3.5rem;
}

/* CSS-columns masonry: no JS layout pass needed, and each photo keeps
   its own natural aspect ratio (mixed portrait/landscape/square) for a
   genuine Pinterest-style grid instead of a uniform cropped grid. */
.gallery-grid {
	column-count: 3;
	column-gap: 1.5rem;
}

.gallery-item {
	margin: 0 0 1.5rem;
	break-inside: avoid;
}

.gallery-item[hidden] {
	display: none;
}

.gallery-item__trigger {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	cursor: zoom-in;
}

.gallery-item__trigger img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 500ms ease;
}

.gallery-item__trigger:hover img,
.gallery-item__trigger:focus-visible img {
	transform: scale(1.05);
}

.gallery-item__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem;
	background: linear-gradient(0deg, rgba(21, 24, 29, 0.75) 0%, rgba(21, 24, 29, 0) 55%);
	opacity: 0;
	transition: opacity var(--transition-fast);
}

.gallery-item__trigger:hover .gallery-item__overlay,
.gallery-item__trigger:focus-visible .gallery-item__overlay {
	opacity: 1;
}

.gallery-item__caption {
	color: #fff;
	font-weight: 600;
	font-size: 0.9375rem;
	text-align: left;
}

.gallery-item__zoom {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--color-ink);
}

.gallery-before-after {
	padding-block: 1rem 4rem;
}

.gallery-before-after__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.gallery-before-after__head .section-heading {
	margin-bottom: 0;
}

/* One before/after at a time — .gallery-ba-track pages exactly like
   .service-protect__grid elsewhere (data-slider-nav/-track,
   assets/js/main.js), just with each slide at 100% width instead of a
   3-up row, since a single before/after card is already a full-width
   component on its own. */
.gallery-ba-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.gallery-ba-track::-webkit-scrollbar {
	display: none;
}

.gallery-ba-card {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.gallery-ba-card .before-after-section__head h3 {
	margin-bottom: 0;
}

.gallery-ba-card__count {
	color: var(--color-body);
	font-size: 0.9375rem;
	font-weight: 600;
	flex-shrink: 0;
}

/* Lightbox */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lightbox[hidden] {
	display: none;
}

.lightbox__backdrop {
	position: absolute;
	inset: 0;
	border: none;
	background: rgba(15, 17, 21, 0.92);
	cursor: zoom-out;
}

.lightbox__figure {
	position: relative;
	z-index: 1;
	max-width: min(1100px, 90vw);
	max-height: 85vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.lightbox__figure img {
	max-width: 100%;
	max-height: 72vh;
	width: auto;
	height: auto;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-pop);
}

.lightbox__figure figcaption {
	color: #fff;
	font-weight: 600;
	text-align: center;
}

.lightbox__close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	transition: background var(--transition-fast);
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
	background: rgba(255, 255, 255, 0.25);
}

.lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 52px;
	height: 52px;
	padding: 0;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	transition: background var(--transition-fast), transform var(--transition-fast);
}

.lightbox__nav:hover,
.lightbox__nav:focus-visible {
	background: rgba(255, 255, 255, 0.25);
}

.lightbox__nav--prev {
	left: 1.5rem;
}

.lightbox__nav--next {
	right: 1.5rem;
}

.lightbox__nav .icon,
.lightbox__close .icon {
	width: 22px;
	height: 22px;
}

@media (max-width: 1023px) {
	.gallery-grid {
		column-count: 2;
	}
}

@media (max-width: 640px) {
	.gallery-grid {
		column-count: 1;
	}

	.lightbox__nav {
		width: 42px;
		height: 42px;
	}

	.lightbox__nav--prev {
		left: 0.5rem;
	}

	.lightbox__nav--next {
		right: 0.5rem;
	}
}

/* ===================================================================
   Team page (page-templates/template-team.php)
   =================================================================== */

.team-hero {
	background: var(--color-surface-tint);
	padding-block: 3.5rem 3rem;
	text-align: center;
}

.team-hero__eyebrow {
	display: inline-block;
	color: var(--color-primary-dark);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

.team-hero h1 {
	max-width: 44ch;
	margin: 0 auto 0.75rem;
}

.team-hero > .container > p {
	color: var(--color-body);
	font-size: 1.125rem;
	max-width: 62ch;
	margin: 0 auto 2.5rem;
}

.team-hero__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem 3rem;
}

.team-hero__stats .trust-stat {
	flex: 1 1 180px;
	max-width: 220px;
}

.team-directory {
	padding-block: 3.5rem 2rem;
}

.team-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-bottom: 3rem;
}

.team-filters__btn {
	padding: 0.6rem 1.25rem;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-body);
	background: var(--color-surface);
	box-shadow: var(--shadow-card);
	transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.team-filters__btn:hover {
	transform: translateY(-2px);
}

.team-filters__btn.is-active,
.team-filters__btn:hover,
.team-filters__btn:focus-visible {
	background: var(--color-ink);
	color: #fff;
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.team-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.team-card[hidden] {
	display: none;
}

.team-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-pop);
}

.team-card__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Matches the source photos' own 1:1 shape exactly (was 4/3,
	   noticeably wider, which left visible gradient bars/frame around
	   the photo) — with the box and photo the same aspect ratio, the
	   photo fills it edge-to-edge with no border and nothing cropped. */
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.team-card--technical .team-card__media {
	background: linear-gradient(135deg, #2f7dd1 0%, var(--color-ink) 100%);
}

.team-card--operations .team-card__media {
	background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}

.team-card--sales .team-card__media {
	background: linear-gradient(135deg, #e8a23c 0%, #b9701f 100%);
}

.team-card--corporate .team-card__media {
	background: linear-gradient(135deg, #545a61 0%, var(--color-ink) 100%);
}

.team-card__avatar {
	font-family: var(--font-heading, inherit);
	font-weight: 700;
	font-size: 2.5rem;
	letter-spacing: 0.02em;
	color: #fff;
}

.team-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-card__badge {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	padding: 0.3rem 0.75rem;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: #fff;
	font-weight: 700;
	font-size: 0.8125rem;
}

.team-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem;
}

.team-card__name {
	font-size: 1.1875rem;
	margin-bottom: 0.15rem;
}

.team-card__role {
	color: var(--color-primary-dark);
	font-weight: 600;
	font-size: 0.875rem;
	margin-bottom: 0.85rem;
}

.team-card__teaser {
	color: var(--color-body);
	font-size: 0.9375rem;
	flex: 1;
	margin-bottom: 1.25rem;
}

.team-card__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-ink);
	font-weight: 700;
	font-size: 0.9375rem;
	align-self: flex-start;
}

.team-card__trigger .icon {
	width: 16px;
	height: 16px;
	transition: transform var(--transition-fast);
}

.team-card__trigger:hover .icon,
.team-card__trigger:focus-visible .icon {
	transform: translateX(4px);
}

/* Bio data only — never rendered directly by the browser. */
.team-card template {
	display: none;
}

/* Profile modal — same fixed-overlay pattern as .lightbox above, with a
   two-column content panel (avatar + bio) instead of a single image. */
.team-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.team-modal[hidden] {
	display: none;
}

.team-modal__overlay {
	position: absolute;
	inset: 0;
	border: none;
	background: rgba(15, 17, 21, 0.85);
	cursor: zoom-out;
}

.team-modal__panel {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	width: min(920px, 100%);
	max-height: 85vh;
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
}

/* A full-width toolbar row (prev / position counter / next / close) —
   kept entirely inside the panel's own box, unlike an earlier version
   that floated the prev/next buttons half outside the panel edge via
   negative offsets: that got silently clipped the moment the panel
   needed `overflow-x: hidden` to fix a separate grid-blowout bug,
   since a box clips its own overflowing children regardless of how
   they're positioned. */
.team-modal__toolbar {
	grid-column: 1 / -1;
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 0.85rem 4rem;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}

.team-modal__toolbar-btn,
.team-modal__close {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-surface-tint-strong);
	color: var(--color-ink);
	transition: background var(--transition-fast), transform var(--transition-fast);
}

.team-modal__toolbar-btn:hover,
.team-modal__close:hover,
.team-modal__toolbar-btn:focus-visible,
.team-modal__close:focus-visible {
	background: var(--color-primary);
	color: #fff;
}

.team-modal__count {
	min-width: 5ch;
	text-align: center;
	color: var(--color-body);
	font-weight: 600;
	font-size: 0.9375rem;
}

.team-modal__close {
	position: absolute;
	top: 0.85rem;
	right: 1rem;
}

.team-modal__toolbar-btn .icon,
.team-modal__close .icon {
	width: 18px;
	height: 18px;
}

.team-modal__media {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	padding: 2.5rem;
}

.team-modal__photo {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid rgba(255, 255, 255, 0.35);
}

.team-modal__avatar {
	font-family: var(--font-heading, inherit);
	font-weight: 700;
	font-size: 3.5rem;
	color: #fff;
}

.team-modal__content {
	min-width: 0;
	padding: 2.5rem 2.5rem 2.5rem 2rem;
}

.team-modal__content h3,
.team-modal__bio p {
	overflow-wrap: break-word;
}

.team-modal__badge {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border-radius: var(--radius-pill);
	background: var(--color-surface-tint-strong);
	color: var(--color-primary-dark);
	font-weight: 700;
	font-size: 0.8125rem;
	margin-bottom: 0.85rem;
}

.team-modal__content h3 {
	font-size: 1.5rem;
	margin-bottom: 0.15rem;
}

.team-modal__role {
	color: var(--color-primary-dark);
	font-weight: 600;
	margin-bottom: 1.25rem;
}

.team-modal__bio p {
	color: var(--color-body);
	margin-bottom: 1rem;
}

.team-modal__bio p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1023px) {
	.team-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.team-modal {
		padding: 0;
	}

	.team-modal__panel {
		grid-template-columns: 1fr;
		width: 100%;
		max-height: 100vh;
		border-radius: 0;
	}

	.team-modal__media {
		padding: 1.5rem;
	}

	.team-modal__avatar {
		font-size: 2.75rem;
	}

	.team-modal__photo {
		width: 150px;
		height: 150px;
	}

	.team-modal__toolbar {
		padding-inline: 3.5rem;
	}
}

@media (max-width: 640px) {
	.team-grid {
		grid-template-columns: 1fr;
	}

	.team-hero__stats {
		gap: 1.5rem;
	}

	.team-modal__media {
		padding: 1.25rem;
	}

	.team-modal__avatar {
		font-size: 2.25rem;
	}

	.team-modal__photo {
		width: 120px;
		height: 120px;
	}

	.team-modal__toolbar {
		padding-inline: 3.75rem;
		gap: 0.5rem;
	}

	.team-modal__content {
		padding: 1.75rem 1.25rem;
	}
}

/* -------------------------------------------------------------------------
   Product Page (single-apco_product.php)
   ------------------------------------------------------------------------- */

.product-hero {
	padding-block: 2.5rem 3rem;
	border-bottom: 1px solid var(--color-border);
}

.product-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 2.5rem;
	align-items: center;
}

.product-hero__content h1 {
	margin-bottom: 0.85rem;
}

/* The mockup's section headings (Product Overview, Key Features, How
   to Use, Where It Works Best, Technical Specifications, Benefits,
   Why Choose APCO) are all a modest, consistent size — noticeably
   smaller than the sitewide marketing section-heading clamp (up to
   2.5rem), which reads oversized repeated down a long product page.
   Deliberately does NOT touch .product-hero__content h1, nor
   "Where It Works Best" / "Technical Specifications" / "Benefits"
   (the mockup shows these three at full size, matching the hero) —
   scoped only to the remaining body-section headings. */
.product-overview h2,
.product-features h2,
.product-howto__card h2,
.product-trust__body h2 {
	font-size: clamp(1.375rem, 1.8vw, 1.75rem);
}

.product-hero__subhead {
	color: var(--color-body);
	max-width: 56ch;
	margin-bottom: 1.25rem;
}

.product-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0 0 1.75rem;
}

.product-hero__pills li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-ink);
}

.product-hero__pills .icon {
	width: 16px;
	height: 16px;
	color: var(--color-primary);
	flex-shrink: 0;
}

.product-hero__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-hero__media img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.product-overview {
	padding-block: 3rem;
}

.product-overview p {
	color: var(--color-body);
	margin-bottom: 1rem;
}

.product-overview p:last-child {
	margin-bottom: 0;
}

.product-features {
	padding-block: 2.5rem 3rem;
}

.product-features__card {
	background: var(--color-surface-tint);
	border-radius: var(--radius-lg);
	padding: 2.5rem;
}

.product-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2rem;
}

.product-features__item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: 1.5rem;
	box-shadow: var(--shadow-card);
}

.product-features__item img {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}

.product-features__item h3 {
	font-size: 1rem;
	margin-bottom: 0.35rem;
}

.product-features__item p {
	color: var(--color-body);
	font-size: 0.9375rem;
	margin: 0;
}

.product-howto {
	padding-block: 2.5rem 3rem;
}

.product-howto__card {
	background: var(--color-primary);
	background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 24px 24px;
	border-radius: var(--radius-lg);
	padding: 3rem 2.5rem;
	text-align: center;
	color: #fff;
}

.product-howto__card h2 {
	color: #fff;
	margin-bottom: 2rem;
}

.product-howto__steps {
	display: grid;
	/* Fixed max card width (not 1fr) + auto-fit + justify-content:center:
	   when a product has a full row's worth of steps this fills the row
	   edge-to-edge same as before, but when it has fewer (e.g. 4), the
	   row shrinks to fit only those cards and centers as a group instead
	   of stretching/left-aligning with a lopsided gap on one side. */
	grid-template-columns: repeat(auto-fit, minmax(180px, 208px));
	justify-content: center;
	gap: 1.5rem;
}

.product-howto__step {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: 2.25rem 1.25rem 1.5rem;
	position: relative;
}

.product-howto__num {
	position: absolute;
	top: -24px;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-primary-light);
	color: #fff;
	font-weight: 800;
	font-size: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.product-howto__step p {
	color: var(--color-ink);
	font-size: 0.9375rem;
	margin: 0;
}

/* Optional "Directions for Use" / "Cautions" block (single-apco_product.php)
   — only rendered for products whose copy supplies them. */
.product-directions {
	padding-block: 0.5rem 2.5rem;
}

.product-directions__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	align-items: start;
}

.product-directions__col {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 2rem;
}

.product-directions__col h2 {
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	margin-bottom: 1.25rem;
}

.product-directions__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.product-directions__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.9375rem;
	color: var(--color-ink);
}

.product-directions__list--steps {
	counter-reset: apco-direction;
}

.product-directions__list--steps li::before {
	counter-increment: apco-direction;
	content: counter(apco-direction);
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	font-weight: 700;
	font-size: 0.8125rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.product-directions__list .icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--color-primary);
	margin-top: 0.1rem;
}

.product-directions__note {
	margin: 1.25rem 0 0;
	font-size: 0.9375rem;
	color: var(--color-body);
}

.product-info {
	padding-block: 2.5rem 3rem;
}

.product-info__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: start;
}

.product-applications h2,
.product-specs h2 {
	margin-bottom: 1.5rem;
}

.product-applications {
	/* Sticky within its grid track: as the visitor scrolls past the
	   (usually much taller) Technical Specifications column next to
	   it, this shorter list stays pinned in view instead of scrolling
	   out of sight halfway down, unsticking naturally once the grid
	   row itself ends (native `position: sticky` behavior — no JS
	   needed). Matches the same top offset already used for
	   #free-consultation's scroll-margin, so it clears the fixed
	   header by the same amount. */
	position: sticky;
	top: calc(var(--header-height) + 1.5rem);
	align-self: start;
}

.product-applications__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.product-applications__list li {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: 1.5rem 1.75rem;
}

.product-applications__icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.product-applications__icon .icon {
	width: 24px;
	height: 24px;
}

.product-applications__list h3 {
	font-size: 1.25rem;
	margin-bottom: 0.2rem;
}

.product-applications__list p {
	color: var(--color-body);
	font-size: 0.9375rem;
	margin: 0;
}

.product-specs__table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.product-specs__table th,
.product-specs__table td {
	text-align: left;
	padding: 0.85rem 1.25rem;
	border-bottom: 1px solid var(--color-border);
	font-size: 0.9375rem;
}

.product-specs__table th {
	font-weight: 700;
	color: var(--color-ink);
	background: var(--color-surface);
}

.product-specs__table td {
	color: var(--color-body);
}

.product-specs__table td:first-child {
	font-weight: 600;
	color: var(--color-ink);
}

.product-specs__table tr:last-child th,
.product-specs__table tr:last-child td {
	border-bottom: none;
}

.product-cta-section {
	padding-block: 2.5rem 3rem;
}

.product-cta-section__card {
	/* Mockup wraps Benefits and the enquiry form together inside one
	   seamless white card, not two separately-boxed elements — the
	   .consultation-card below is neutralized to a plain block (see
	   .product-enquiry .consultation-card) so it doesn't create a
	   visible nested box-within-a-box. */
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: 2.5rem;
}

.product-cta-section__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: start;
}

.product-enquiry .consultation-card {
	background: none;
	box-shadow: none;
	padding: 0;
}

.product-benefits h2 {
	margin-bottom: 1.5rem;
}

.product-benefits {
	/* Same sticky-within-grid-track behavior as .product-applications
	   above — this list is usually much shorter than the enquiry form
	   beside it. */
	position: sticky;
	top: calc(var(--header-height) + 1.5rem);
	align-self: start;
}

.product-benefits__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem 1.5rem;
}

.product-benefits__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.9375rem;
	color: var(--color-ink);
}

.product-benefits__list .icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--color-primary);
	margin-top: 0.1rem;
}

.product-trust {
	padding-block: 2.5rem 3rem;
}

.product-trust__card {
	background: var(--color-surface-tint);
	border-radius: var(--radius-lg);
	padding: 2.5rem;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 2.5rem;
	align-items: center;
}

.product-trust__body h2 {
	margin-bottom: 0.75rem;
}

.product-trust__body p {
	color: var(--color-body);
	margin-bottom: 1.5rem;
}

.product-trust__stats {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: 1.5rem;
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.product-trust__stat {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.product-trust__stat p {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-ink);
}

.product-trust__stat--big {
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-border);
}

.product-trust__stat-value {
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--color-primary-dark);
	margin: 0;
}

.product-trust__stat-label {
	font-size: 0.9375rem;
	color: var(--color-body);
	margin: 0;
}

/* Optional per-product trust points (title + description) in place of
   the default stat column. */
.product-trust__stats--points .product-trust__stat {
	align-items: flex-start;
}

.product-trust__stats--points .product-trust__stat p {
	font-weight: 400;
	color: var(--color-body);
}

.product-trust__stats--points .product-trust__stat strong {
	display: inline-block;
	margin-bottom: 0.15rem;
	font-weight: 700;
	color: var(--color-ink);
}

.product-specs__note {
	margin: 0.85rem 0 0;
	font-size: 0.875rem;
	color: var(--color-body);
}

.consultation-card__text {
	margin: -0.5rem 0 1.1rem;
	font-size: 0.9375rem;
	color: var(--color-body);
}

.product-benefits__list strong {
	color: var(--color-ink);
}

.product-trust__stat-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-surface-tint-strong);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.product-trust__stat-icon .icon {
	width: 20px;
	height: 20px;
	color: var(--color-primary);
}

@media (max-width: 1023px) {
	.product-hero__grid {
		display: flex;
		flex-direction: column-reverse;
		gap: 1.5rem;
	}

	.product-features__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.product-howto__steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.product-info__grid,
	.product-directions__grid,
	.product-cta-section__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.product-cta-section__card {
		padding: 1.5rem;
	}

	/* Sticky only makes sense in the two-column desktop layout — once
	   the grid stacks to one column below this breakpoint, pinning
	   the first block in place while the page scrolls past it would
	   just look broken. */
	.product-applications,
	.product-benefits {
		position: static;
	}

	.product-trust__card {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.product-features__grid {
		grid-template-columns: 1fr;
	}

	.product-features__card,
	.product-directions__col {
		padding: 1.5rem;
	}

	.product-benefits__list {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Case Studies — listing (page-templates/template-case-studies.php) and
   single (single-apco_case_study.php) template. The listing reuses
   .gallery-hero and .no-results (Inner pages section above); everything
   else here is unique to this content type.
   ---------------------------------------------------------------------- */
.case-study-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
	gap: 2rem;
	margin-block: 3rem;
}

.case-study-card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.case-study-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--color-surface-tint);
}

.case-study-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-study-card__tag {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	background: var(--color-primary);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.35rem 0.85rem;
	border-radius: var(--radius-pill);
}

.case-study-card__body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1;
	/* Keeps cards a consistent height even when a future row's cards
	   don't all share a row with each other (grid's row-stretch only
	   equalizes cards within the same row) — a shorter description
	   still reserves this much space, with .case-study-card__link's
	   margin-top:auto still bottom-aligning the "Read the full story"
	   link within it. */
	min-height: 280px;
}

.case-study-card__location {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8125rem;
	color: var(--color-body);
	margin: 0;
}

.case-study-card__location .icon {
	width: 14px;
	height: 14px;
	color: var(--color-primary);
}

.case-study-card__body h3 {
	margin: 0;
	font-size: 1.1875rem;
}

.case-study-card__summary {
	font-size: 0.9375rem;
	color: var(--color-body);
	margin: 0;
}

.case-study-card__stat {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.25rem 0 0;
}

.case-study-card__stat strong {
	font-size: 1.375rem;
	color: var(--color-primary-dark);
}

.case-study-card__stat span {
	font-size: 0.8125rem;
	color: var(--color-body);
}

.case-study-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	color: var(--color-primary-dark);
	margin-top: auto;
	padding-top: 0.75rem;
}

.case-study-card__link .icon {
	width: 16px;
	height: 16px;
}

/* Hero */
.case-study-hero {
	padding-block: 3rem 0;
	text-align: center;
}

.case-study-hero__inner {
	max-width: 760px;
}

.case-study-hero__tag {
	display: inline-block;
	background: var(--color-primary);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.35rem 1rem;
	border-radius: var(--radius-pill);
	margin-bottom: 1rem;
}

.case-study-hero h1 {
	font-size: clamp(2rem, 4vw, 2.75rem);
	margin-bottom: 0.5rem;
}

.case-study-hero__location {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-body);
	font-weight: 500;
}

.case-study-hero__location .icon {
	width: 16px;
	height: 16px;
	color: var(--color-primary);
}

.case-study-hero__summary {
	font-size: 1.0625rem;
	margin-top: 1rem;
}

.case-study-hero__frame {
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-top: 2rem;
	box-shadow: var(--shadow-card);
	max-height: 80vh;
}

.case-study-hero__frame img {
	width: 100%;
	height: 100%;
	max-height: 80vh;
	object-fit: cover;
}

/* Challenge / Solution */
.case-study-block {
	padding-block: 3.5rem;
	text-align: center;
}

.case-study-block--alt {
	background: var(--color-surface-tint);
}

.case-study-block h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 0.75rem;
}

.case-study-block p {
	font-size: 1.0625rem;
}

/* Before-photos evidence gallery */
.case-study-evidence {
	padding-block: 3.5rem;
}

.case-study-evidence .section-heading {
	margin-bottom: 0.5rem;
}

.case-study-evidence__caption {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 2rem;
}

.case-study-evidence__gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 2rem;
}

.case-study-evidence__photo {
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	aspect-ratio: 1 / 1;
}

.case-study-evidence__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Results / stats card */
.case-study-results {
	padding-block: 1rem 3.5rem;
}

.case-study-results__card {
	background: var(--color-dark);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: clamp(2rem, 4vw, 3.5rem);
	text-align: center;
}

.case-study-results__card h2 {
	color: #fff;
	margin-bottom: 0.5rem;
}

.case-study-results__card .rich-text {
	color: rgba(255, 255, 255, 0.75);
	max-width: 760px;
	margin-inline: auto;
}

/* Nothing but the description filled in (no stats/verified-by/report)
   — let the text use the card's full width at a larger size instead of
   sitting as a narrow strip in a lot of otherwise-empty dark space. */
.case-study-results__card--desc-only {
	padding-block: clamp(2.75rem, 6vw, 5rem);
}

.case-study-results__card--desc-only .rich-text {
	max-width: 920px;
	font-size: 1.1875rem;
}

.case-study-results__stats {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin: 2rem 0;
}

.case-study-results__stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.case-study-results__stat-value {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	color: var(--color-primary-light);
}

.case-study-results__stat-label {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
}

.case-study-results__verified {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 1.5rem;
}

.case-study-results__verified .icon {
	width: 18px;
	height: 18px;
	color: var(--color-primary-light);
	flex-shrink: 0;
}

/* Testimonial */
.case-study-testimonial {
	padding-block: 3.5rem;
	text-align: center;
}

.case-study-testimonial blockquote {
	margin: 0;
}

.case-study-testimonial p {
	font-size: 1.25rem;
	font-style: italic;
	color: var(--color-ink);
}

.case-study-testimonial cite {
	display: block;
	font-style: normal;
	font-weight: 600;
	margin-top: 1rem;
}

.case-study-testimonial cite span {
	display: block;
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--color-body);
}

/* Quote marks now come from CSS (not literal characters wrapped around
   the text in PHP) since the quote field holds real HTML — arbitrary
   block content like a <ul> can't safely sit inside a literal
   "&ldquo;...&rdquo;" wrapper the old plain-text version used. */
.case-study-testimonial blockquote::before {
	content: '\201C';
	display: block;
	font-size: 3rem;
	line-height: 1;
	color: var(--color-primary-light);
	font-family: Georgia, 'Times New Roman', serif;
	margin-bottom: 0.25rem;
}

/* Case Study rich-text fields (inc/case-study-fields.php's wp_editor()
   description fields) — the global list reset (ul, ol { list-style:
   none; margin:0; padding:0; }) would otherwise leave bullet/numbered
   lists typed into these fields with no marks or indent at all, so
   list styling is restored here, scoped to just this wrapper rather
   than undoing the reset site-wide. */
.rich-text p {
	margin: 0 0 1em;
}

.rich-text p:last-child {
	margin-bottom: 0;
}

.rich-text ul,
.rich-text ol {
	margin: 0 0 1em;
	padding-left: 1.375em;
}

.rich-text ul {
	list-style: disc;
}

.rich-text ol {
	list-style: decimal;
}

.rich-text li {
	margin-bottom: 0.4em;
}

.rich-text li:last-child {
	margin-bottom: 0;
}

.rich-text a {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

/* Used on .case-study-results__card's description, which sits on a
   dark background — link/marker colors need to stay visible against
   it instead of the default (near-black-on-white) rich-text palette. */
.rich-text--invert a {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, 0.5);
}

.rich-text--invert li::marker {
	color: var(--color-primary-light);
}

@media (max-width: 1023px) {
	.case-study-grid {
		grid-template-columns: 1fr 1fr;
	}

	.case-study-evidence__gallery {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.case-study-grid {
		grid-template-columns: 1fr;
	}

	.case-study-evidence__gallery {
		grid-template-columns: 1fr;
	}

	.case-study-results__stats {
		gap: 1.5rem;
	}
}

/* =========================================================================
   Design system layer (v1.76.0)
   One place that makes buttons, hovers and type sizes behave the same on
   every page. Uses only the existing colour tokens — no new colours — and
   sits last in the file so it wins over the per-component rules above.
   ========================================================================= */
:root {
	/* Type scale */
	--fs-xs: 0.8125rem;      /* labels, meta, eyebrows */
	--fs-sm: 0.9375rem;      /* card descriptions, pills, small UI */
	--fs-base: 1.0625rem;    /* body copy */
	--fs-lead: 1.125rem;     /* hero / intro paragraphs */
	--fs-item-title: 1.0625rem; /* compact item titles (icon lists) */
	--fs-card-title: 1.125rem;  /* card titles */
	--fs-h2-sub: clamp(1.5rem, 2.2vw, 2rem); /* headings inside columns/cards */

	/* Motion */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-fast: 180ms;
	--dur-base: 280ms;
	--lift-card: translateY(-6px);
	--lift-info: translateY(-4px);

	/* Elevation & focus (built from existing palette values) */
	--shadow-hover: 0 24px 48px -24px rgba(21, 24, 29, 0.32);
	--shadow-btn: 0 14px 30px -12px rgba(63, 125, 51, 0.55);
	--focus-ring: 0 0 0 3px rgba(86, 168, 70, 0.35);
}

/* ---- Headings: same rhythm everywhere ---------------------------------- */
h1,
h2,
h3 {
	text-wrap: balance;
}

h2,
.section-heading {
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* Headings that sit inside a column or card (not a full section title). */
.product-overview h2,
.product-features h2,
.product-howto__card h2,
.product-trust__body h2,
.product-applications h2,
.product-specs h2,
.product-benefits h2,
.product-directions__col h2,
.case-study-block h2,
.blog-featured__body h2 {
	font-size: var(--fs-h2-sub);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Card titles */
.product-card h3,
.service-safe__item h3,
.service-protect__card h3,
.service-process-banner__step h3,
.service-partner__card h3,
.knowledge-card h3,
.about-approach__card h3,
.team-card__name,
.case-study-card__body h3,
.reason-card h3,
.product-applications__list h3,
.location-services__card h3,
.industry-why__benefit h3,
.industry-compliance__item h3 {
	font-size: var(--fs-card-title);
	line-height: 1.3;
}

/* Compact item titles (icon + short text) */
.service-signs__item h3,
.service-tile h3,
.product-features__item h3,
.pest-selector__card h3 {
	font-size: var(--fs-item-title);
	line-height: 1.3;
}

/* Card descriptions: one readable size */
.product-card p,
.service-tile p,
.service-signs__item p,
.service-safe__item p,
.service-process-banner__step p,
.service-protect__card p,
.service-partner__card p,
.reason-card p,
.knowledge-card__excerpt,
.about-approach__card p,
.product-features__item p,
.product-applications__list p,
.product-howto__step p,
.location-services__card p,
.industry-why__benefit p,
.industry-compliance__item p {
	font-size: var(--fs-sm);
	line-height: 1.6;
}

/* ---- Buttons: one system ---------------------------------------------- */
.btn {
	min-height: 48px;
	padding: 0.875rem 1.625rem;
	font-size: 1rem;
	line-height: 1.2;
	letter-spacing: 0.005em;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		background-color var(--dur-fast) ease,
		color var(--dur-fast) ease;
}

/* Soft light sweep across primary buttons on hover. */
.btn--primary::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 650ms var(--ease-out);
	pointer-events: none;
}

.btn--primary:hover::after,
.btn--primary:focus-visible::after {
	transform: translateX(120%);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow-btn);
}

.btn--white:hover,
.btn--white:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
}

.btn:active {
	transform: translateY(0) scale(0.98);
	box-shadow: none;
}

.btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring), var(--shadow-btn);
}

/* Form Maker submit buttons: same size and feel as .btn */
.consultation-card__form button,
.consultation-card__form input[type='submit'] {
	min-height: 48px !important;
	font-size: 1rem !important;
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		background-color var(--dur-fast) ease !important;
}

.consultation-card__form button:hover,
.consultation-card__form input[type='submit']:hover {
	box-shadow: var(--shadow-btn) !important;
}

.consultation-card__form button:active,
.consultation-card__form input[type='submit']:active {
	transform: translateY(0) scale(0.98) !important;
}

/* ---- Filter pills: products, team, gallery, blog --------------------- */
.product-filters__btn,
.team-filters__btn,
.gallery-filters__btn,
.blog-filters__btn {
	font-size: var(--fs-sm);
	font-weight: 600;
	padding: 0.6rem 1.25rem;
	transition:
		background-color var(--dur-fast) ease,
		color var(--dur-fast) ease,
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.product-filters__btn:hover,
.team-filters__btn:hover,
.gallery-filters__btn:hover,
.blog-filters__btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
}

.product-filters__btn.is-active,
.team-filters__btn.is-active,
.gallery-filters__btn.is-active,
.blog-filters__btn.is-active {
	transform: none;
}

/* ---- Slider arrows ----------------------------------------------------- */
.slider-nav__btn {
	transition:
		background-color var(--dur-fast) ease,
		color var(--dur-fast) ease,
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.slider-nav__btn:hover:not(.slider-nav__btn--disabled) {
	transform: scale(1.08);
	box-shadow: var(--shadow-btn);
}

.slider-nav__btn:active:not(.slider-nav__btn--disabled) {
	transform: scale(0.96);
}

/* ---- Cards: one hover language ---------------------------------------- */
/* Clickable cards lift a little more. */
.product-card,
.knowledge-card,
.team-card,
.service-tile,
.case-study-card,
.client-page-card,
.gallery-ba-card,
.blog-featured {
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.product-card:hover,
.knowledge-card:hover,
.team-card:hover,
.service-tile:hover,
.case-study-card:hover,
.client-page-card:hover,
.gallery-ba-card:hover,
.blog-featured:hover {
	transform: var(--lift-card);
	box-shadow: var(--shadow-hover);
}

/* Information cards get a gentler lift. */
.reason-card,
.testimonial-card,
.about-approach__card,
.service-signs__item,
.service-protect__card,
.service-partner__card,
.service-process-banner__step,
.product-features__item,
.product-applications__list li,
.product-howto__step,
.industry-why__benefit,
.industry-compliance__item,
.location-services__card,
.contact-trust__standard {
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.reason-card:hover,
.testimonial-card:hover,
.about-approach__card:hover,
.service-signs__item:hover,
.service-protect__card:hover,
.service-partner__card:hover,
.service-process-banner__step:hover,
.product-features__item:hover,
.product-applications__list li:hover,
.product-howto__step:hover,
.industry-why__benefit:hover,
.industry-compliance__item:hover,
.location-services__card:hover,
.contact-trust__standard:hover {
	transform: var(--lift-info);
	box-shadow: var(--shadow-hover);
}

/* Slow photo zoom inside cards with images. */
.product-card__media,
.knowledge-card__media,
.service-protect__card-media,
.solution-card__media {
	overflow: hidden;
}

.product-card__media img,
.knowledge-card__media img,
.service-protect__card-media img,
.solution-card__media img {
	transition: transform 600ms var(--ease-out);
}

.product-card:hover .product-card__media img,
.knowledge-card:hover .knowledge-card__media img,
.service-protect__card:hover .service-protect__card-media img,
.solution-card:hover .solution-card__media img {
	transform: scale(1.05);
}

/* ---- Navigation -------------------------------------------------------- */
.menu-link,
.primary-menu > .menu-item > a {
	font-size: 1rem;
	position: relative;
	transition: color var(--dur-fast) ease;
}

.menu-link::after,
.primary-menu > .menu-item > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.15rem;
	height: 2px;
	border-radius: 2px;
	background: var(--color-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-base) var(--ease-out);
}

.menu-link:hover,
.primary-menu > .menu-item > a:hover,
.menu-item--has-children:hover > a,
.menu-item--mega:hover > a {
	color: var(--color-primary-dark);
}

.menu-link:hover::after,
.primary-menu > .menu-item > a:hover::after,
.menu-item--has-children:hover > a::after,
.menu-item--mega:hover > a::after,
.primary-menu > .current-menu-item > a::after,
.primary-menu > .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.sub-menu .submenu-link,
.mega-menu__grid a {
	transition: color var(--dur-fast) ease, transform var(--dur-base) var(--ease-out);
}

.sub-menu .submenu-link:hover,
.mega-menu__grid a:hover {
	transform: translateX(3px);
}

/* ---- Text links inside content ----------------------------------------- */
.rich-text a,
.single-article__content a,
.entry-content a {
	color: var(--color-primary-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}

.rich-text a:hover,
.single-article__content a:hover,
.entry-content a:hover {
	color: var(--color-primary);
}

/* Footer and small text links: same subtle colour shift. */
.footer-menu a,
.footer-contact-line a,
.footer-social-line a,
.footer-bottom__legal a,
.breadcrumbs__list a {
	transition: color var(--dur-fast) ease;
}

/* ---- Keyboard focus (visible only for keyboard users) ------------------ */
:where(a, button, [role='button'], input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.btn:focus-visible,
.slider-nav__btn:focus-visible {
	outline: none;
}

.slider-nav__btn:focus-visible {
	box-shadow: var(--focus-ring);
}

/* ---- Testimonial meta line (location · company) ------------------------ */
.testimonial-card figcaption .testimonial-card__meta {
	display: block;
	color: var(--color-body);
	font-size: var(--fs-xs);
	margin-top: 0.15rem;
}

/* ---- Respect "reduce motion" ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.btn,
	.btn--primary::after,
	.slider-nav__btn,
	.product-filters__btn,
	.team-filters__btn,
	.gallery-filters__btn,
	.blog-filters__btn,
	.product-card,
	.knowledge-card,
	.team-card,
	.service-tile,
	.case-study-card,
	.client-page-card,
	.gallery-ba-card,
	.blog-featured,
	.reason-card,
	.testimonial-card,
	.about-approach__card,
	.service-signs__item,
	.service-protect__card,
	.service-partner__card,
	.service-process-banner__step,
	.product-features__item,
	.product-applications__list li,
	.product-howto__step,
	.industry-why__benefit,
	.industry-compliance__item,
	.location-services__card,
	.contact-trust__standard,
	.product-card__media img,
	.knowledge-card__media img,
	.service-protect__card-media img,
	.solution-card__media img,
	.menu-link::after,
	.primary-menu > .menu-item > a::after {
		transition: none !important;
	}

	.btn:hover,
	.slider-nav__btn:hover,
	.product-card:hover,
	.knowledge-card:hover,
	.team-card:hover,
	.service-tile:hover,
	.case-study-card:hover,
	.reason-card:hover,
	.testimonial-card:hover,
	.about-approach__card:hover,
	.service-protect__card:hover,
	.product-card:hover .product-card__media img,
	.knowledge-card:hover .knowledge-card__media img {
		transform: none !important;
	}
}

/* Stat numbers count up: equal-width digits so the row doesn't jitter. */
.hero-stat__value,
.trust-stat__value {
	font-variant-numeric: tabular-nums;
}

/* Client logo scroller waits until it's in view (assets/js/main.js). */
.client-marquee.is-waiting .client-marquee__track {
	animation-play-state: paused;
}

/* Wide enough that the first logo starts clear of the edge fade. */
.client-marquee__group {
	padding-inline: clamp(2.75rem, 5.5vw, 6rem);
}

/* Cochin International Airport's logo is nearly square, so at the shared
   logo height its "International Airport" line is too small to read. */
.client-strip__logo-img--cochin-international-airport {
	height: 76px;
	max-width: none;
}

.client-page-card--cochin-international-airport .client-page-card__img {
	max-height: 118px;
}

.client-page-card--infopark .client-page-card__img {
	max-height: 72px;
}

/* About page: Our Vision */
.about-who__copy p.about-vision__lead {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--color-ink, #15181d);
}

/* Upcoming project notice on the Products page and product pages. */
.upcoming-notice {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0.85rem 0;
	color: #fff;
	background:
		radial-gradient(120% 220% at 0% 50%, rgba(165, 226, 122, 0.28), transparent 55%),
		radial-gradient(90% 200% at 100% 50%, rgba(86, 168, 70, 0.35), transparent 60%),
		linear-gradient(100deg, #0f2a17 0%, #1d4a26 45%, #2c6b31 100%);
	background-size: 160% 100%, 160% 100%, 100% 100%;
	border-bottom: 1px solid rgba(165, 226, 122, 0.35);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
	animation: upcoming-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both, upcoming-glow 9s ease-in-out infinite alternate;
}

.upcoming-notice__sheen {
	position: absolute;
	inset: 0 auto 0 -40%;
	width: 35%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
	transform: skewX(-20deg);
	animation: upcoming-sheen 5.5s ease-in-out 1s infinite;
	pointer-events: none;
}

.upcoming-notice__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6rem 1rem;
	text-align: center;
}

.upcoming-notice__emblem {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
}

.upcoming-notice__emblem svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.upcoming-notice__orbit {
	fill: none;
	stroke: rgba(196, 240, 160, 0.75);
	stroke-width: 1.4;
	transform-origin: 24px 24px;
	animation: upcoming-spin 12s linear infinite;
}

.upcoming-notice__core {
	fill: #c4f0a0;
	filter: drop-shadow(0 0 4px rgba(196, 240, 160, 0.9));
	transform-origin: 24px 24px;
	animation: upcoming-core 2.4s ease-in-out infinite;
}

.upcoming-notice__ring {
	fill: none;
	stroke: rgba(196, 240, 160, 0.8);
	stroke-width: 1.2;
	transform-origin: 24px 24px;
	opacity: 0;
	animation: upcoming-wave 3s ease-out infinite;
}

.upcoming-notice__ring--2 { animation-delay: 1s; }
.upcoming-notice__ring--3 { animation-delay: 2s; }

.upcoming-notice__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.8rem 0.3rem 0.65rem;
	border: 1px solid rgba(196, 240, 160, 0.55);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #d9f5c2;
	backdrop-filter: blur(4px);
}

.upcoming-notice__dot {
	position: relative;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #a5e27a;
	box-shadow: 0 0 0 0 rgba(165, 226, 122, 0.7);
	animation: upcoming-dot 1.8s ease-out infinite;
}

.upcoming-notice__project {
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
	font-weight: 800;
	letter-spacing: 0.01em;
	background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #c4f0a0 50%, #ffffff 60%, #ffffff 100%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: upcoming-text 4s linear infinite;
}

.upcoming-notice__place {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: #a5e27a;
	color: #0f2a17;
	font-size: 0.85rem;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(165, 226, 122, 0.3);
}

.upcoming-notice__place .icon {
	width: 0.95rem;
	height: 0.95rem;
	fill: currentColor;
	animation: upcoming-pin 2.4s ease-in-out infinite;
}

@keyframes upcoming-in {
	from { opacity: 0; transform: translateY(-100%); }
	to { opacity: 1; transform: none; }
}

@keyframes upcoming-glow {
	from { background-position: 0% 0, 100% 0, 0 0; }
	to { background-position: 100% 0, 0% 0, 0 0; }
}

@keyframes upcoming-sheen {
	0% { left: -40%; }
	60%, 100% { left: 120%; }
}

@keyframes upcoming-spin {
	to { transform: rotate(360deg); }
}

@keyframes upcoming-core {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.3); }
}

@keyframes upcoming-wave {
	0% { opacity: 0.9; transform: scale(0.4); }
	100% { opacity: 0; transform: scale(2.6); }
}

@keyframes upcoming-dot {
	0% { box-shadow: 0 0 0 0 rgba(165, 226, 122, 0.7); }
	100% { box-shadow: 0 0 0 0.6rem rgba(165, 226, 122, 0); }
}

@keyframes upcoming-text {
	from { background-position: 100% 0; }
	to { background-position: -150% 0; }
}

@keyframes upcoming-pin {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-2px); }
}

@media (max-width: 600px) {
	.upcoming-notice__emblem {
		width: 2rem;
		height: 2rem;
	}

	.upcoming-notice__project {
		flex-basis: 100%;
		order: 3;
	}

	.upcoming-notice__place {
		order: 4;
	}
}

@media (prefers-reduced-motion: reduce) {
	.upcoming-notice,
	.upcoming-notice *,
	.upcoming-notice__sheen {
		animation: none !important;
	}

	.upcoming-notice__sheen,
	.upcoming-notice__ring {
		display: none;
	}
}

/* Product pages: supply note under the product photo. */
.product-hero__media {
	flex-direction: column;
	gap: 0.85rem;
}

.product-hero__note {
	max-width: 32rem;
	margin: 0;
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--color-body);
	text-align: center;
}

/* Lists in centred case study text: keep bullets next to their text. */
.case-study-block .rich-text ul,
.case-study-block .rich-text ol {
	width: fit-content;
	margin-inline: auto;
	text-align: left;
}

/* Case study photos: optional heading above each photo. */
.case-study-evidence__item {
	margin: 0;
}

.case-study-evidence__label {
	margin: 0 0 0.75rem;
	text-align: center;
	font-size: var(--fs-card-title, 1.125rem);
	color: var(--color-ink);
}