/* ============================================================
   modern.css — Modernization overlay for Unique Pollution Control
   Loaded AFTER legacy CSS to override/enhance without removing.
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
	--upc-primary: #0b6fb8;
	--upc-primary-dark: #075689;
	--upc-primary-light: #e8f3fb;
	--upc-accent: #25D366;
	--upc-accent-dark: #128c7e;
	--upc-text: #1f2937;
	--upc-text-soft: #4b5563;
	--upc-text-muted: #6b7280;
	--upc-bg: #ffffff;
	--upc-bg-soft: #f8fafc;
	--upc-bg-muted: #f1f5f9;
	--upc-border: #e5e7eb;
	--upc-border-strong: #d1d5db;

	--upc-radius-sm: 4px;
	--upc-radius: 8px;
	--upc-radius-lg: 14px;
	--upc-radius-pill: 999px;

	--upc-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
	--upc-shadow-sm: 0 2px 8px rgba(15, 23, 42, .08);
	--upc-shadow: 0 6px 18px rgba(15, 23, 42, .10);
	--upc-shadow-lg: 0 18px 40px rgba(15, 23, 42, .14);

	--upc-ease: cubic-bezier(.4, 0, .2, 1);
	--upc-dur: .25s;

	--upc-font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
	--upc-font-display: 'Lora', Georgia, 'Times New Roman', serif;

	--upc-container: 1200px;
}

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

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

body {
	font-family: var(--upc-font-sans);
	color: var(--upc-text);
	background: var(--upc-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-size: clamp(14px, 0.95vw + 10px, 16px);
	line-height: 1.6;
}

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

img {
	transition: opacity var(--upc-dur) var(--upc-ease), transform var(--upc-dur) var(--upc-ease);
}

img[loading="lazy"]:not([src]) { opacity: 0; }

/* ---------- Typography ---------- */
h1, .headTitle {
	font-family: var(--upc-font-display);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
}
h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); line-height: 1.25; }
h3 { font-size: clamp(1.15rem, .9rem + .8vw, 1.55rem); line-height: 1.3; }
h4 { font-size: clamp(1rem, .85rem + .4vw, 1.2rem); line-height: 1.35; }

p { color: var(--upc-text-soft); }

/* ---------- Focus & accessibility ---------- */
a, button, input, select, textarea, [tabindex] {
	outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--upc-primary);
	outline-offset: 2px;
	border-radius: var(--upc-radius-sm);
}

::selection { background: var(--upc-primary); color: #fff; }

/* ---------- Buttons ---------- */
.button,
a.button,
button.button,
input[type="submit"].button {
	display: inline-block;
	padding: 12px 28px;
	border-radius: var(--upc-radius);
	font-weight: 600;
	letter-spacing: .02em;
	border: 0;
	cursor: pointer;
	transition: transform var(--upc-dur) var(--upc-ease),
		box-shadow var(--upc-dur) var(--upc-ease),
		background-color var(--upc-dur) var(--upc-ease),
		color var(--upc-dur) var(--upc-ease);
	box-shadow: var(--upc-shadow-sm);
	text-decoration: none;
}
.button:hover,
a.button:hover,
button.button:hover,
input[type="submit"].button:hover {
	transform: translateY(-2px);
	box-shadow: var(--upc-shadow);
}
.button:active { transform: translateY(0); box-shadow: var(--upc-shadow-xs); }
.button.solid.blue, .button.primary { background: var(--upc-primary); color: #fff; }
.button.solid.blue:hover, .button.primary:hover { background: var(--upc-primary-dark); color: #fff; }
.button.solid.grey { background: #6b7280; color: #fff; }
.button.solid.grey:hover { background: #4b5563; color: #fff; }

/* ---------- Header / Navigation ---------- */
#header_wrapper #header {
	transition: background-color var(--upc-dur) var(--upc-ease),
		box-shadow var(--upc-dur) var(--upc-ease);
}

/* Header logo — modern SVG mark, sized cleanly (the legacy PNG had negative
   margins + an un-sized background that clipped the wordmark). */
/* The sticky header renders on a solid white background on every page in this
   build, so the dark wordmark is used throughout. (logo-white.svg is kept for
   any future genuinely-transparent header over a dark hero.) */
#logo,
#header #logo,
#header.header-scheme-dark #logo,
#header.transparent-header #logo {
	background-image: url(../images/logo-upc.png) !important;
	background-size: contain !important;
	background-position: left center !important;
	background-repeat: no-repeat !important;
	height: 56px !important;
	max-height: 56px !important;
	width: 124px !important;
	max-width: 60vw !important;
	margin-left: 0 !important;
	margin-top: 0 !important;
}
@media (max-width: 600px) {
	#header #logo, #header.transparent-header #logo {
		height: 46px !important; width: 102px !important;
	}
}
#header.stuck, #header.shrinked {
	box-shadow: var(--upc-shadow-sm);
}

/* ---- Modern solid header (fixes white-on-white visibility) ----
   The header always renders on white in this build, yet kept the
   transparent-header class (white links). Force a clean solid white bar
   with dark, legible links on every page and state. */
#header_wrapper #header,
#header.transparent-header,
#header.transparent-header #main_navigation,
#header #main_navigation {
	background: #ffffff !important;
}
#header_wrapper #header { border-bottom: 1px solid var(--upc-border); }

nav .menu li a {
	transition: color var(--upc-dur) var(--upc-ease);
}

/* Modern nav links: legible dark text + sleek animated underline */
@media (min-width: 768px) {
	#header .menu.scrollmenu li a,
	#header.transparent-header .menu.scrollmenu li a {
		color: var(--upc-text) !important;
		font-size: 13.5px;
		font-weight: 600;
		letter-spacing: .03em;
		padding: 6px 2px !important;
		line-height: 1.5;
	}
	#header .menu.scrollmenu li a:hover,
	#header .menu.scrollmenu li.active > a,
	#header .menu.scrollmenu li a[aria-current="page"] {
		color: var(--upc-primary) !important;
	}
	/* replace the chunky 5px underline with a 2px centre-out underline */
	#header .menu.scrollmenu li.link > a:after,
	#home #header.transparent-header .menu.scrollmenu li.link > a:after {
		height: 2px !important;
		top: auto !important;
		bottom: 0 !important;
		left: 50% !important;
		width: 0 !important;
		opacity: 1 !important;
		transform: translateX(-50%) !important;
		background: var(--upc-primary) !important;
		border-radius: 2px;
		transition: width .25s var(--upc-ease) !important;
	}
	#header .menu.scrollmenu li.link > a:hover:after,
	#header .menu.scrollmenu li.link.active > a:after,
	#header .menu.scrollmenu li.link > a[aria-current="page"]:after {
		width: 100% !important;
		height: 2px !important;
		transform: translateX(-50%) !important;
	}
	/* the CTA pill is not underlined */
	#header .menu.scrollmenu li.upc-cta-li > a:after { display: none !important; }
	#header .menu.scrollmenu li.upc-cta-li > a { color: #fff !important; padding: 9px 20px !important; }
	#main_navigation { padding-top: 8px; padding-bottom: 8px; }
}

/* Keep the top menu on one line and vertically centred with the CTA pill */
@media (min-width: 768px) {
	nav .menu.scrollmenu {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
		white-space: nowrap;
	}
	nav .menu.scrollmenu > li {
		float: none;
		margin: 0 9px 0 0;
	}
	nav .menu.scrollmenu > li.upc-cta-li { margin-right: 0; }
}
@media (min-width: 768px) and (max-width: 1100px) {
	nav .menu.scrollmenu > li { margin-right: 6px; }
	nav .menu.scrollmenu > li > a { font-size: 12px; }
	.upc-nav-cta { padding: 8px 15px !important; }
	#logo, #header #logo { width: 190px !important; }
}
nav .menu li a:hover, nav .menu li.active > a, nav .menu li[aria-current="page"] > a {
	color: var(--upc-primary);
}

#trigger {
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border-radius: var(--upc-radius);
	transition: background-color var(--upc-dur) var(--upc-ease);
}
#trigger:hover { background: var(--upc-bg-muted); }
/* Hamburger only on mobile; full menu takes over on desktop */
@media (min-width: 768px) { #trigger { display: none !important; } }
@media (max-width: 767px) { #trigger { display: inline-flex !important; } }

#mobile_navigation {
	background: linear-gradient(180deg, var(--upc-primary) 0%, var(--upc-primary-dark) 100%);
	color: #fff;
	box-shadow: -8px 0 24px rgba(15, 23, 42, .25);
	transition: right 0.35s var(--upc-ease), transform .35s var(--upc-ease);
}
#mobile_navigation .sidebarcontent { padding-top: 24px; }
#mobile_navigation .sidemenu li a {
	color: rgba(255, 255, 255, .92);
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-weight: 500;
	letter-spacing: .02em;
	transition: background-color var(--upc-dur) var(--upc-ease), color var(--upc-dur) var(--upc-ease), padding-left var(--upc-dur) var(--upc-ease);
}
#mobile_navigation .sidemenu li:first-child a { border-top: 0; }
#mobile_navigation .sidemenu li:last-child a { border-bottom: 1px solid rgba(255, 255, 255, .08); }
#mobile_navigation .sidemenu li a:hover,
#mobile_navigation .sidemenu li.active a,
#mobile_navigation .sidemenu li[aria-current="page"] a {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	padding-left: 26px;
}
.sidebarclose { color: #fff; }
.sidebarclose span:after, .sidebarclose span:before { background: #fff; }

/* ---------- Section spacing ---------- */
.cmnPadSec { padding: clamp(36px, 5vw, 72px) 0; }

.cmnPageHeadSec.themeBg {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(232, 243, 251, 0.92) 0%, rgba(255, 255, 255, 0.78) 50%, rgba(220, 234, 247, 0.92) 100%),
		linear-gradient(180deg, #f1f7fc 0%, #e8f3fb 100%);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid rgba(11, 111, 184, 0.12);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 6px 24px -16px rgba(11, 111, 184, 0.18);
	padding: clamp(28px, 4vw, 56px) 0;
}
.cmnPageHeadSec.themeBg::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 220px at 18% 0%, rgba(11, 111, 184, 0.12), transparent 70%),
		radial-gradient(700px 220px at 82% 100%, rgba(37, 211, 102, 0.08), transparent 72%);
	pointer-events: none;
	z-index: 0;
}
.cmnPageHeadSec .titleWrap { position: relative; z-index: 1; }
.cmnPageHeadSec .headTitle {
	color: var(--upc-primary-dark);
	letter-spacing: 3px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
	margin: 0;
}
.cmnPageHeadSec .hrWrap span,
.cmnPageHeadSec .hrWrap.blue span { background: var(--upc-primary); }

/* ---------- Cards / Feature boxes ---------- */
.featurebox {
	background: #fff;
	border: 1px solid var(--upc-border);
	border-radius: var(--upc-radius);
	padding: 16px;
	transition: transform var(--upc-dur) var(--upc-ease),
		box-shadow var(--upc-dur) var(--upc-ease),
		border-color var(--upc-dur) var(--upc-ease);
}
.featurebox:hover {
	transform: translateY(-3px);
	box-shadow: var(--upc-shadow);
	border-color: var(--upc-primary-light);
}
.featurebox img { display: block; margin: 0 auto; }

#busP, #detailInfoWrap .col-md-4 > div {
	background: var(--upc-bg-soft);
	border-radius: var(--upc-radius-lg);
	padding: 22px;
	box-shadow: var(--upc-shadow-xs);
}

/* ---------- Forms ---------- */
input.inp, .txt, input[type="text"], input[type="email"],
input[type="tel"], input[type="search"], textarea, select {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--upc-border);
	border-radius: var(--upc-radius);
	background: #fff;
	color: var(--upc-text);
	font-size: 14px;
	transition: border-color var(--upc-dur) var(--upc-ease),
		box-shadow var(--upc-dur) var(--upc-ease);
}
input.inp:focus, .txt:focus, input:focus, textarea:focus, select:focus {
	border-color: var(--upc-primary);
	box-shadow: 0 0 0 3px rgba(11, 111, 184, .15);
}
.error, .cf-error { color: #b91c1c; font-size: 12px; }
.cf-error { display: none; margin-top: 5px; }

/* ---------- Contact page ---------- */
#contactFormSection { background: var(--upc-bg-soft); }

/* Quick-contact method cards */
.upc-contact-methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
	margin-bottom: 40px;
}
.upc-contact-method {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--upc-border);
	border-radius: var(--upc-radius-lg);
	text-decoration: none;
	color: var(--upc-text);
	box-shadow: var(--upc-shadow-xs);
	transition: transform var(--upc-dur) var(--upc-ease),
		box-shadow var(--upc-dur) var(--upc-ease),
		border-color var(--upc-dur) var(--upc-ease);
}
.upc-contact-method:hover {
	transform: translateY(-3px);
	box-shadow: var(--upc-shadow);
	border-color: rgba(11, 111, 184, .28);
	color: var(--upc-text);
}
.upc-cm-icon {
	flex: 0 0 auto;
	width: 46px; height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--upc-primary-light);
	color: var(--upc-primary);
}
.upc-cm-icon svg { width: 22px; height: 22px; }
.upc-contact-method.is-wa .upc-cm-icon { background: rgba(37, 211, 102, .15); color: var(--upc-accent-dark); }
.upc-cm-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.upc-cm-text strong { font-size: 15px; color: var(--upc-text); }
.upc-cm-text span { font-size: 13px; color: var(--upc-text-muted); overflow: hidden; text-overflow: ellipsis; }

/* Form card */
.upc-contact-card {
	max-width: 860px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--upc-border);
	border-radius: var(--upc-radius-lg);
	box-shadow: var(--upc-shadow);
	padding: clamp(22px, 4vw, 44px);
}
.upc-form-sub {
	color: var(--upc-text-muted);
	max-width: 620px;
	margin: 10px auto 0;
	font-size: 14px;
	line-height: 1.6;
}
.upc-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.upc-field { margin-bottom: 18px; display: flex; flex-direction: column; }
.upc-form-grid .upc-field { margin-bottom: 0; }
.upc-field label {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--upc-text-soft);
	letter-spacing: .01em;
}
.upc-field .req { color: #e11d48; }
.upc-field input, .upc-field select, .upc-field textarea { font-family: inherit; }

/* CAPTCHA row */
.upc-captcha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.upc-captcha-q {
	background: var(--upc-bg-muted);
	border: 1px dashed var(--upc-border-strong);
	padding: 11px 18px;
	border-radius: var(--upc-radius);
	font-weight: 700;
	font-size: 16px;
	color: var(--upc-text);
	letter-spacing: 3px;
	min-width: 140px;
	text-align: center;
	user-select: none;
}
.upc-captcha-in { width: 160px !important; }
.upc-captcha-refresh {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--upc-bg-muted);
	color: var(--upc-text-soft);
	border: 1px solid var(--upc-border);
	border-radius: var(--upc-radius);
	cursor: pointer;
	transition: background-color var(--upc-dur) var(--upc-ease), color var(--upc-dur) var(--upc-ease), transform var(--upc-dur) var(--upc-ease);
}
.upc-captcha-refresh:hover { background: var(--upc-primary-light); color: var(--upc-primary); }
.upc-captcha-refresh:active { transform: rotate(-90deg); }
.upc-captcha-refresh svg { width: 18px; height: 18px; }

/* WhatsApp submit button */
.upc-submit-wrap { text-align: center; margin-top: 26px; }
.upc-wa-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 38px;
	background: var(--upc-accent);
	color: #fff;
	border: 0;
	border-radius: var(--upc-radius-pill);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .01em;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(18, 140, 126, .30);
	transition: transform var(--upc-dur) var(--upc-ease),
		box-shadow var(--upc-dur) var(--upc-ease),
		background-color var(--upc-dur) var(--upc-ease);
}
.upc-wa-submit svg { width: 22px; height: 22px; }
.upc-wa-submit:hover { background: var(--upc-accent-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18, 140, 126, .40); }
.upc-wa-submit:active { transform: translateY(0); }
.upc-submit-note { margin-top: 12px; font-size: 12px; color: var(--upc-text-muted); }

@media (max-width: 600px) {
	.upc-form-grid { grid-template-columns: 1fr; gap: 0; }
	.upc-form-grid .upc-field { margin-bottom: 18px; }
	.upc-captcha-in { width: 100% !important; }
}

/* ---------- Footer ---------- */
footer {
	background: #0d1726;
	color: #cbd5e1;
	padding-top: 36px;
}
footer a { color: #cbd5e1; transition: color var(--upc-dur) var(--upc-ease); }
footer a:hover { color: #fff; }
footer #copyright { color: #94a3b8; font-size: 13px; }

/* Footer "Designed & Maintained by" credit */
#ftr-logo {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}
.upc-credit-label {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #94a3b8;
}
.upc-credit-link {
	display: inline-flex;
	align-items: center;
	background: #fff;
	padding: 8px 14px;
	border-radius: var(--upc-radius);
	box-shadow: var(--upc-shadow-xs);
	transition: transform var(--upc-dur) var(--upc-ease), box-shadow var(--upc-dur) var(--upc-ease);
}
.upc-credit-link:hover { transform: translateY(-2px); box-shadow: var(--upc-shadow-sm); }
.upc-credit-link img { display: block; height: 30px; width: auto; }
@media (max-width: 767px) {
	#ftr-logo { align-items: center; margin-top: 18px; }
}
.social-icon a { transition: transform var(--upc-dur) var(--upc-ease), opacity var(--upc-dur) var(--upc-ease); }
.social-icon a:hover { transform: translateY(-2px); opacity: .9; }

/* ---------- Title wrap ---------- */
.titleWrap .hrWrap span {
	display: inline-block;
	width: 56px; height: 3px;
	border-radius: var(--upc-radius-pill);
}
.titleWrap.blue .hrWrap span,
.titleWrap .hrWrap.blue span { background: var(--upc-primary); }

/* ---------- Scroll to top ---------- */
#scrolltop a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	background: var(--upc-primary) !important;
	color: #fff;
	border-radius: 50%;
	box-shadow: var(--upc-shadow);
	transition: transform var(--upc-dur) var(--upc-ease),
		background-color var(--upc-dur) var(--upc-ease);
	text-decoration: none;
}
#scrolltop a:hover { background: var(--upc-primary-dark) !important; transform: translateY(-3px); }
#scrolltop a i { display: none; }
#scrolltop a::before {
	content: '';
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(-45deg);
	margin-top: 4px;
	border-radius: 1px;
}

/* ---------- Floating WhatsApp button ---------- */
#upcWhatsFab {
	position: fixed;
	right: clamp(14px, 2.5vw, 28px);
	bottom: clamp(14px, 2.5vw, 28px);
	z-index: 1200;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px 12px 14px;
	background: var(--upc-accent);
	color: #fff;
	border-radius: var(--upc-radius-pill);
	box-shadow: 0 8px 22px rgba(18, 140, 126, .35);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	transition: transform var(--upc-dur) var(--upc-ease),
		box-shadow var(--upc-dur) var(--upc-ease),
		background-color var(--upc-dur) var(--upc-ease);
}
#upcWhatsFab:hover {
	background: var(--upc-accent-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(18, 140, 126, .45);
	color: #fff;
}
#upcWhatsFab svg { flex: 0 0 auto; }
.upc-fab-label { white-space: nowrap; }
@media (max-width: 600px) {
	#upcWhatsFab { padding: 13px; }
	.upc-fab-label { display: none; }
}

/* ---------- Header "Get a Quote" CTA ---------- */
.upc-nav-cta,
nav .menu li.upc-cta-li > a.upc-nav-cta {
	display: inline-block;
	margin-left: 8px;
	padding: 9px 20px;
	background: var(--upc-primary);
	color: #fff !important;
	border-radius: var(--upc-radius-pill);
	font-weight: 600;
	letter-spacing: .01em;
	box-shadow: var(--upc-shadow-xs);
	transition: background-color var(--upc-dur) var(--upc-ease),
		transform var(--upc-dur) var(--upc-ease),
		box-shadow var(--upc-dur) var(--upc-ease);
}
.upc-nav-cta:hover {
	background: var(--upc-primary-dark);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: var(--upc-shadow-sm);
}
/* In the mobile slide-out menu the CTA renders as a full-width pill */
#mobile_navigation .sidemenu li.upc-cta-li > a.upc-nav-cta {
	display: block;
	margin: 16px 14px 0;
	text-align: center;
	border: 0;
}

/* ---------- Reveal-on-scroll (used by modern.js) ---------- */
.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s var(--upc-ease), transform .6s var(--upc-ease);
	will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Modern feature grid ---------- */
.upc-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin: 28px 0 8px;
}
.upc-feature {
	background: #fff;
	border: 1px solid var(--upc-border);
	border-radius: var(--upc-radius-lg);
	padding: 24px 22px;
	transition: transform var(--upc-dur) var(--upc-ease),
		box-shadow var(--upc-dur) var(--upc-ease),
		border-color var(--upc-dur) var(--upc-ease);
	text-align: left;
}
.upc-feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--upc-shadow);
	border-color: rgba(11, 111, 184, .25);
}
.upc-feature-icon {
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--upc-primary-light);
	color: var(--upc-primary);
	margin-bottom: 14px;
}
.upc-feature-icon svg { width: 22px; height: 22px; }
.upc-feature h4 {
	margin: 0 0 8px;
	font-family: var(--upc-font-sans);
	color: var(--upc-text);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	line-height: 1.35;
}
.upc-feature p {
	margin: 0;
	color: var(--upc-text-soft);
	font-size: 14px;
	line-height: 1.6;
}

/* Stat strip */
.upc-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin: 32px 0 8px;
}
.upc-stat {
	background: linear-gradient(180deg, #ffffff 0%, var(--upc-bg-soft) 100%);
	border: 1px solid var(--upc-border);
	border-radius: var(--upc-radius-lg);
	padding: 20px 16px;
	text-align: center;
}
.upc-stat-num {
	display: block;
	font-family: var(--upc-font-display);
	font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem);
	font-weight: 700;
	color: var(--upc-primary);
	line-height: 1.1;
}
.upc-stat-label {
	display: block;
	color: var(--upc-text-muted);
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-top: 6px;
}

/* Lead paragraph */
.upc-lead {
	font-size: clamp(1rem, .9rem + .3vw, 1.15rem);
	color: var(--upc-text-soft);
	line-height: 1.7;
	max-width: 780px;
	margin: 0 auto 12px;
	text-align: center;
}

/* Industry / client cards */
.upc-industry-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 28px;
}
.upc-industry-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--upc-border);
	border-radius: var(--upc-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform var(--upc-dur) var(--upc-ease),
		box-shadow var(--upc-dur) var(--upc-ease),
		border-color var(--upc-dur) var(--upc-ease);
}
.upc-industry-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--upc-shadow);
	border-color: rgba(11, 111, 184, .28);
}
.upc-industry-img {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--upc-bg-muted);
}
.upc-industry-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .55s var(--upc-ease);
}
.upc-industry-card:hover .upc-industry-img img { transform: scale(1.06); }
.upc-industry-body { padding: 18px 20px 20px; }
.upc-industry-body h4 {
	margin: 0 0 8px;
	font-family: var(--upc-font-sans);
	font-weight: 600;
	font-size: 1.08rem;
	color: var(--upc-text);
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.3;
}
.upc-industry-body p {
	margin: 0 0 12px;
	color: var(--upc-text-soft);
	font-size: 14px;
	line-height: 1.55;
}
.upc-industry-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--upc-primary);
	letter-spacing: .04em;
	transition: gap var(--upc-dur) var(--upc-ease), color var(--upc-dur) var(--upc-ease);
}
.upc-industry-card:hover .upc-industry-link {
	color: var(--upc-primary-dark);
	gap: 8px;
}

/* Product grid (modern catalogue) — tighter columns + category eyebrow tag */
.upc-product-grid {
	grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
	gap: 22px;
	margin-top: 22px;
}
.upc-card-tag {
	display: inline-block;
	margin-bottom: 8px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--upc-primary);
	background: var(--upc-primary-light);
	border-radius: var(--upc-radius-pill);
}

/* ---------- Responsive (mobile-first additive) ---------- */
@media (max-width: 1023px) {
	.container { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 767px) {
	#header.transparent-header,
	#header.header-v1 { background: #fff; }
	#header.transparent-header #logo,
	#header #logo { color: var(--upc-primary); margin-left: 0 !important; }

	nav .menu.scrollmenu { display: none; }

	.cmnPageHeadSec.themeBg { padding: 36px 0 28px; }

	#address .col-md-4 { margin-bottom: 24px; }

	#detailInfoWrap .col-md-4 { margin-bottom: 18px; }

	footer #ftrMenu { display: flex; flex-wrap: wrap; gap: 8px 18px; }

	#map { width: 100% !important; height: 320px !important; }
	#map iframe { width: 100% !important; height: 100% !important; }
}

@media (max-width: 480px) {
	.button, a.button { padding: 11px 22px; font-size: 14px; }
	.cmnPageHeadSec.themeBg { padding: 28px 0 22px; }
	.cmnPageHeadSec .headTitle { letter-spacing: 2px; }
	#scrolltop a { width: 40px; height: 40px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.reveal { opacity: 1; transform: none; }
}

/* ---------- Print ---------- */
@media print {
	#header_wrapper, footer, #scrolltop, #mobile_navigation,
	#whatsappQuickContact, #contactFormSection { display: none !important; }
	body { color: #000; background: #fff; }
}