/**
 * ERP Peers — Main Stylesheet
 * Modern Enterprise Design System v6.0
 * Dark × Glass × Bento × Motion
 * ============================================================ */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
	/* Effects — custom.css-only tokens (not defined in design-system.css) */
	--glow-electric: 0 0 40px rgba(108,92,231,0.35);
	--shadow-hover:  0 16px 56px rgba(42,40,93,0.16);
}

/* ============================================================
   1. BASE RESET & GLOBAL
   ============================================================ */

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

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

body {
	font-family: var(--font-family);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-text-body);
	background: #ffffff;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--color-primary); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--color-electric); }

/* ============================================================
   2. FONT FACES
   ============================================================ */

@font-face {
	font-family: "IBM Plex Sans";
	src: url('../fonts/IBMPlexSans-Variable.woff2') format('woff2-variations'), url('../fonts/IBMPlexSans-Variable.woff2') format('woff2');
	font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url('../fonts/IBMPlexSans-Italic-Variable.woff2') format('woff2-variations'), url('../fonts/IBMPlexSans-Italic-Variable.woff2') format('woff2');
	font-weight: 100 700; font-style: italic; font-display: swap;
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family);
	font-weight: 800;
	color: var(--color-text-heading);
	margin: 0 0 1rem;
	line-height: 1.2;
}

/* Professional enterprise-grade type scale for C-level / B2B audience */
h1 { font-size: clamp(1.875rem, 4vw, 3rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.875rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.375rem, 2.75vw, 1.875rem); letter-spacing: -0.01em; }
h4 { font-size: clamp(1.125rem, 2vw, 1.375rem); }
h5 { font-size: 1.0625rem; }
h6 { font-size: 0.9375rem; }
p  { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
h1,h2,h3,h4,h5,h6,li,a,span,p { font-family: inherit; color: inherit; }

/* Gradient text utility */
.grad-text {
	background: linear-gradient(135deg, #ffffff 0%, #c8c4ff 60%, var(--color-electric) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.grad-text-dark {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-electric) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ============================================================
   4. UTILITIES
   ============================================================ */

.mobile-hide { display: block; }
*:focus-visible { outline: 2px solid var(--color-electric); outline-offset: 3px; border-radius: 4px; }
.error404 { margin: 0 !important; }

/* Eyebrow label */
.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-electric);
	margin-bottom: 14px;
}
.section-eyebrow::before {
	content: '';
	width: 24px;
	height: 2px;
	background: var(--color-electric);
	border-radius: 2px;
}

/* ============================================================
   5. ANIMATIONS
   ============================================================ */

@keyframes pulse-glow {
	0%, 100% { transform: scale(1); opacity: 0.5; }
	50%       { transform: scale(1.2); opacity: 0.9; }
}
@keyframes float {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-14px); }
}
@keyframes rotation {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes shimmer {
	0%   { background-position: -1000px 0; }
	100% { background-position: 1000px 0; }
}
@keyframes slide-in-up {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   6. BUTTONS
   ============================================================ */

.with-background, .with-background:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: linear-gradient(135deg, var(--color-electric) 0%, var(--color-primary) 100%);
	color: #ffffff !important;
	font-family: var(--font-family);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 14px 32px;
	border-radius: 50px;
	border: none;
	text-decoration: none;
	line-height: 1;
	transition: all 0.3s ease;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
}
.with-background::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.with-background:hover::after { opacity: 1; }
.with-background:hover {
	box-shadow: 0 8px 28px rgba(108,92,231,0.45);
	transform: translateY(-3px);
	color: #ffffff !important;
	text-decoration: none;
}

.without-background, .without-background:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: transparent;
	color: #ffffff !important;
	font-family: var(--font-family);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 13px 32px;
	border-radius: 50px;
	border: 1.5px solid rgba(255,255,255,0.5);
	text-decoration: none;
	line-height: 1;
	transition: all 0.3s ease;
	cursor: pointer;
	white-space: nowrap;
}
.without-background:hover {
	background: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.9);
	box-shadow: 0 0 24px rgba(255,255,255,0.15);
	transform: translateY(-2px);
	text-decoration: none;
}

/* On light backgrounds, use dark outline button */
.homepage-new-secondsec .without-background,
.homepage-fourthsection .without-background,
.homepage-step-section .without-background,
.homepage-thiredsection .without-background,
.blog-detail .without-background {
	color: var(--color-primary) !important;
	border-color: var(--color-primary);
}
.homepage-new-secondsec .without-background:hover,
.homepage-fourthsection .without-background:hover,
.homepage-thiredsection .without-background:hover,
.blog-detail .without-background:hover {
	background: var(--color-primary);
	color: #ffffff !important;
	border-color: var(--color-primary);
}

.banner-btn {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 36px;
	align-items: center;
}

/* ============================================================
   7. HEADER & NAV
   ============================================================ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: var(--color-bg);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--color-border);
	transition: box-shadow 0.25s ease, background 0.25s ease;
}
.site-header.scrolled {
	box-shadow: var(--shadow-md);
}

nav.navbar { height: 72px; padding: 0; box-shadow: none; }

.navbar-brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0;
	border-radius: var(--radius-sm);
}
.navbar-brand img { height: 56px; width: auto; }
.navbar-brand-text {
	color: var(--color-text-heading);
	font-family: var(--font-family);
	font-size: var(--text-md);
	font-weight: var(--font-weight-bold);
}

.navbar-collapse.header-menu-main {
	justify-content: center;
	min-width: 0;
}
.header-menu-main .navbar-nav { align-items: center; }

.navbar-nav .nav-item .nav-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-family);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-body) !important;
	padding: 8px 14px;
	border-radius: 8px;
	transition: color 0.2s ease, background 0.2s ease;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .current-menu-item > .nav-link,
.navbar-nav .current-menu-ancestor > .nav-link {
	color: var(--color-electric) !important;
	background: var(--color-primary-subtle);
}
.nav-chevron {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
	opacity: 0.7;
	flex-shrink: 0;
}

.navbar-toggler {
	border: 1.5px solid var(--color-border);
	border-radius: 10px;
	padding: 6px 10px;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.navbar-toggler:hover {
	background: var(--color-primary-subtle);
	border-color: var(--color-primary-light);
}
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler:focus-visible,
.navbar-brand:focus-visible,
.navbar-nav .nav-link:focus-visible,
.navbar-rightside-btn .nav-link:focus-visible,
.mega-menu-main-heading:focus-visible,
.mega-menu-inner-links:focus-visible,
.navbar-nav .dropdown-item:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	box-shadow: none;
}

.navbar-rightside { display: flex; align-items: center; gap: 8px; }

.navbar-rightside-btn .nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--gradient-primary);
	color: var(--color-text-inverse) !important;
	font-family: var(--font-family);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 10px 22px;
	border-radius: 50px;
	box-shadow: var(--shadow-btn);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	white-space: nowrap;
}
.navbar-rightside-btn .nav-link:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
}

/* Client support portal link — deliberately secondary/outline styling,
   not a filled primary-color pill, so it never reads as a sales CTA. */
.navbar-rightside-support {
	margin-left: 14px;
}
.navbar-rightside-support .nav-link-support {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--color-primary) !important;
	border: 1.5px solid var(--color-primary);
	font-family: var(--font-family);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 9px 18px;
	border-radius: 50px;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
	text-decoration: none !important;
}
.navbar-rightside-support .nav-link-support:hover,
.navbar-rightside-support .nav-link-support:focus-visible {
	background: var(--color-primary-subtle);
	color: var(--color-primary-dark) !important;
}
/* Hidden in the top bar below the mobile breakpoint to avoid crowding
   next to the hamburger toggle; the same link is also included inside
   the mobile dropdown menu (see functions.php's wp_nav_menu_items
   filter), so it remains reachable on mobile. */
@media (max-width: 991.98px) {
	.navbar-rightside-support { display: none; }
}

/* Mobile-menu copy of the support link (appended via functions.php's
   wp_nav_menu_items filter) — shown only in the collapsed mobile
   dropdown; hidden on desktop where the standalone header button
   above already covers it, avoiding a duplicate. Styled as its own
   outlined pill button (matching the desktop .nav-link-support
   treatment) rather than a plain list-style link, and separated from
   the regular nav items with a top divider, so it reads as a
   secondary action next to "Book Consultation" rather than a menu
   item — per direct owner feedback (Phase 2.8-L21-P3). */
@media (max-width: 991.98px) {
	.erpp-mobile-support-item {
		margin: 10px 4px 4px;
		padding-top: 14px;
		border-top: 1px solid var(--color-border);
	}
	.erpp-mobile-support-item > a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-height: 44px;
		padding: 11px 20px;
		border: 1.5px solid var(--color-primary);
		border-radius: 50px;
		color: var(--color-primary) !important;
		background: transparent;
		font-family: var(--font-family);
		font-size: 0.875rem;
		font-weight: 700;
		letter-spacing: 0.01em;
		text-decoration: none !important;
		white-space: nowrap;
	}
	.erpp-mobile-support-item > a:hover,
	.erpp-mobile-support-item > a:focus-visible {
		background: var(--color-primary-subtle);
		color: var(--color-primary-dark) !important;
	}
}
@media (min-width: 992px) {
	.erpp-mobile-support-item { display: none; }
}

.navbar-socialicon {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.navbar-socialicon a.with-background {
	width: 38px; height: 38px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255,255,255,0.14);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255,255,255,0.28);
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
}
.navbar-socialicon a.with-background:hover {
	background: var(--color-electric);
	border-color: var(--color-electric);
	transform: translateY(-2px);
}

.hp-main-banner-mobile { display: none; margin-top: 24px; }
.hp-main-banner-mobile img { max-width: 100%; border-radius: 16px; }

/* ============================================================
   8. HERO BANNER
   ============================================================ */

.homepage-banner {
	position: relative;
	overflow: hidden;
}

/* Service / Integration / Industry / About / Contact hero — Enterprise
   Experience Implementation Spec, Hero Experience System (M1, 2026-07-06).
   Converged onto Homepage V2's own .erpp-hero-overlay gradient verbatim
   (same colors, same stops, same angle) instead of the narrower legacy
   scrim this replaces — Homepage's profile never drops below ~45%
   opacity at any point across the width, which is what makes it safe
   regardless of where a page's heading happens to wrap, at any
   viewport. This also structurally supersedes the RC1 mobile-only
   override (removed below, now redundant): the previous fix widened
   the scrim only under 767.98px, but the real two-column-to-stacked
   breakpoint this markup uses is Bootstrap's lg (991.98px, col-lg-8),
   so pages were still exposed in the 768-991px range — reproduced live
   on a Service page at 834px width before this fix. Scoped to
   .seo-banner/.contact-banner only; the homepage hero (.erpp-hero-overlay
   itself) is untouched. */
.homepage-banner.seo-banner::before,
.homepage-banner.contact-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8,7,22,.90) 0%, rgba(10,9,28,.85) 35%, rgba(10,9,28,.68) 55%, rgba(10,9,28,.45) 100%);
	z-index: 1;
	pointer-events: none;
}

/* Service / Integration / Industry / About hero — desktop proportion fix.
   .homepage-banner.seo-banner has no min-height, so its box is purely
   content-driven (just the heading/paragraph/button stack) — much
   shorter than intended, giving background-size:cover a short vertical
   slice to work with (tight, "zoomed" photo crop) and almost no top/
   bottom breathing room around the text. Reuses the same min-height +
   flex-centering pattern already proven on .home-slider-inner.item.
   Desktop-only (matches the existing col-lg-8/col-lg-4 breakpoint) so
   mobile proportions are untouched. */
@media (min-width: 992px) {
	.homepage-banner.seo-banner,
	.homepage-banner.contact-banner {
		min-height: 560px;
		display: flex;
		align-items: center;
	}
}

/* Hero Experience System (M1): below the same col-lg-8 breakpoint above,
   .banner-text loses its grid-column width constraint and spans the
   full section — capped independently of the grid, matching the
   principle behind Homepage's own grid-independent .erpp-hero-col
   (a fixed measure here rather than a percentage, since below this
   breakpoint the layout is single-column with no second "photo half"
   for a percentage to stay proportionate to). Keeps heading/paragraph
   line lengths comfortable and keeps text away from the section edge
   regardless of the overlay gradient above. */
@media (max-width: 991.98px) {
	.banner-text {
		max-width: 640px;
	}
}

/* Blog listing / Case Study listing / Sitemap title banner — completely
   unstyled before this (Design System Phase 3, Visual Polish Sprint 1):
   no background-size/position (the photo tiled at native resolution
   instead of covering), no padding, no contrast scrim, and heading/body
   text using the default dark heading color against a dark photo or the
   solid --color-primary background sitemap-template.php sets inline —
   all three rendering with the heading nearly invisible. Reuses the
   exact scrim technique already proven on .homepage-banner.seo-banner
   (line ~433 above) for consistency, scoped to this class only so no
   other banner is affected. */
.services-banner {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 88px 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 260px;
}

.services-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(15,14,42,0.82) 0%, rgba(15,14,42,0.6) 60%, rgba(15,14,42,0.4) 100%);
	z-index: 1;
	pointer-events: none;
}

.services-banner h1,
.services-banner p {
	position: relative;
	z-index: 2;
	max-width: var(--container-xxl);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.services-banner h1 {
	color: var(--color-text-inverse);
	margin-bottom: var(--space-3);
}

.services-banner p {
	color: var(--color-footer-text);
	margin-bottom: 0;
}

@media (max-width: 767.98px) {
	.services-banner {
		padding: 56px 20px;
		min-height: 200px;
	}
}

/* RC1 audit (2026-07-05): search.php previously rendered with zero Design
   System styling — WordPress's raw Underscores starter markup, no card
   treatment on results, unstyled pagination. Now reuses the same
   .homepage-blogsection/.blog card grid every other listing page already
   uses (erpp_render_blog_post_card()); this block only adds the spacing
   the raw page-header/pagination wrappers still need. */
.erpp-search-results__header {
	padding: 56px 24px 0;
}
.erpp-search-results__header .page-title span {
	color: var(--color-primary);
}
.erpp-search-results__pagination {
	padding: 0 24px 56px;
}
.erpp-search-results__pagination .nav-links {
	display: flex;
	gap: 12px;
	font-weight: 600;
}
.erpp-search-results__none {
	padding: 56px 24px;
}

.home-slider-inner.item {
	min-height: 680px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	position: relative;
}

/* Rich layered overlay — left dark focus + electric glow top-right */
.home-slider-inner.item::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 70% at 15% 50%, rgba(7,6,26,0.92) 0%, rgba(7,6,26,0.6) 60%, transparent 100%),
		radial-gradient(ellipse 50% 50% at 85% 15%, rgba(108,92,231,0.25) 0%, transparent 60%),
		linear-gradient(160deg, rgba(7,6,26,0.88) 0%, rgba(42,40,93,0.55) 100%);
	z-index: 1;
}

/* Animated purple orb top-right */
.home-slider-inner.item::after {
	content: '';
	position: absolute;
	top: -120px;
	right: -120px;
	width: 560px;
	height: 560px;
	background: radial-gradient(circle, rgba(108,92,231,0.2) 0%, transparent 65%);
	border-radius: 50%;
	z-index: 1;
	animation: pulse-glow 7s ease-in-out infinite;
	pointer-events: none;
}

.banner-text {
	position: relative;
	z-index: 2;
	padding-right: 40px;
}

.banner-text h1,
.banner-text h2 {
	font-size: clamp(1.875rem, 4vw, 3rem);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.025em;
	margin-bottom: 1.5rem;
	background: linear-gradient(135deg, #ffffff 0%, #dbd8ff 50%, #c8c4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.banner-text p {
	font-size: clamp(1rem, 2vw, 1.125rem);
	color: rgba(255,255,255,0.72);
	max-width: 500px;
	line-height: 1.75;
}

/* Floating stat badges shown in the banner social area */
.homepage-banner .navbar-rightside {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	flex-direction: row;
	gap: 12px;
}
.homepage-banner .navbar-socialicon {
	flex-direction: row;
}
.homepage-banner .navbar-socialicon a.with-background {
	width: 40px; height: 40px;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.2);
	backdrop-filter: blur(8px);
}

/* ============================================================
   BANNER TRUST / PARTNER BADGES (Clutch, Celigo, etc.)
   These are <img> elements stored in the banner content field
   ============================================================ */
.banner-text img,
.banner-text p img {
	max-height: 110px !important;
	width: auto !important;
	object-fit: contain;
	border-radius: 0;
	filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
	transition: transform 0.25s ease, filter 0.25s ease;
}
.banner-text img:hover,
.banner-text p img:hover {
	transform: scale(1.07) translateY(-2px);
	filter: drop-shadow(0 8px 24px rgba(108,92,231,0.35));
}
/* Paragraph/div containing only images → glass badge strip */
.banner-text p:has(img) {
	display: inline-flex !important;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 28px !important;
	padding: 14px 20px;
	background: rgba(255,255,255,0.07);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 14px;
	width: auto;
}

/* ============================================================
   9. HOME — SECTION 2: WHY US
   ============================================================ */

.homepage-new-secondsec {
	padding: 120px 0;
	background: var(--color-section-alt);
	position: relative;
	overflow: hidden;
}

/* Ghost decorative number in background */
.homepage-new-secondsec::before {
	content: '01';
	position: absolute;
	top: -40px;
	right: -30px;
	font-size: 280px;
	font-weight: 900;
	color: rgba(108,92,231,0.04);
	line-height: 1;
	pointer-events: none;
	font-family: var(--font-family);
	user-select: none;
}

/* Image with purple offset frame */
.chooseus-img {
	position: relative;
	padding: 0 0 20px 20px;
}
.chooseus-img::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	background: linear-gradient(135deg, var(--color-electric) 0%, var(--color-teal) 100%);
	border-radius: 20px;
	z-index: 0;
	opacity: 0.12;
}
.chooseus-img::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, var(--color-electric) 0%, var(--color-teal) 100%);
	border-radius: 0 0 0 20px;
	opacity: 0.2;
	z-index: 0;
}
.chooseus-img img {
	position: relative;
	z-index: 1;
	width: 100%;
	border-radius: 20px;
	box-shadow: 0 32px 80px rgba(42,40,93,0.15);
	animation: float 6s ease-in-out infinite;
}

/* Equal-height columns in Who We Are section */
.homepage-new-secondsec .row {
	align-items: center;
}
.homepage-new-secondsec .col-lg-6:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* NetSuite N + orbiting words SVG */
.wwa-3d-scene {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	display: block;
}
.wwa-3d-scene svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.homepage-new-secondsec-content {
	padding-left: 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}
.homepage-new-secondsec-content::before {
	content: 'WHO WE ARE';
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-electric);
	margin-bottom: 16px;
}
.homepage-new-secondsec-content-title h2 {
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	font-weight: 900;
	color: var(--color-text-heading);
	line-height: 1.15;
	margin-bottom: 8px;
}
.homepage-new-secondsec-content-title p {
	font-size: 1.0625rem;
	font-weight: 600;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-electric) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 20px;
}
.homepage-new-secondsec-content-desc {
	font-size: 1rem;
	line-height: 1.8;
	color: #4a5568;
}
.homepage-new-secondsec-content-desc p { margin-bottom: 1.25rem; }
.homepage-new-secondsec-content-desc .with-background { margin-top: 8px; }

/* ============================================================
   10. HOME — SERVICES (DARK + BENTO)
   ============================================================ */

.homepage-service {
	padding: 120px 0;
	background: var(--color-dark);
	position: relative;
	overflow: hidden;
}

/* Mesh glow orbs */
.homepage-service::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background:
		radial-gradient(ellipse 50% 50% at 15% 85%, rgba(108,92,231,0.18) 0%, transparent 55%),
		radial-gradient(ellipse 40% 40% at 85% 10%, rgba(0,203,169,0.12) 0%, transparent 55%);
	pointer-events: none;
}

/* Grid dots pattern */
.homepage-service::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: 36px 36px;
	pointer-events: none;
}

.homepage-service .homepage-contactsection-title {
	position: relative;
	z-index: 2;
}
.homepage-service .homepage-contactsection-title h2 {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	font-weight: 900;
	background: linear-gradient(135deg, #ffffff 0%, #c8c4ff 60%, var(--color-electric) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.homepage-service .homepage-contactsection-title p {
	color: rgba(255,255,255,0.55);
}
.homepage-service .homepage-contactsection-title::before {
	content: 'KEY SOLUTIONS';
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-electric);
	margin-bottom: 14px;
}

/* Point 11: Bento grid — 2×2 equal grid for 4 service cards */
.homepage-service .container { position: relative; z-index: 2; }
.homepage-service .row {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	align-items: stretch;
	margin: 0 !important;
}
.homepage-service .row > [class*="col-"] {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	flex: unset !important;
}
/* With 4 cards: all are equal — first card no longer spans full row */
.homepage-service .row > [class*="col-"]:first-child {
	grid-column: span 1;
}

/* Dark glass cards — !important needed to beat design-system.css (loads after) */
.service-part {
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: var(--radius-lg) !important;
	padding: 40px 36px;
	height: 100%;
	transition: all 0.35s ease;
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
	overflow: visible !important;
	cursor: default;
}
.service-part:hover {
	background: rgba(108,92,231,0.12) !important;
	border-color: rgba(108,92,231,0.4) !important;
	transform: translateY(-6px);
	box-shadow: 0 24px 64px rgba(108,92,231,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* All 4 service cards equal — consistent vertical layout with featured tint for first */
.homepage-service .row > [class*="col-"]:first-child .service-part {
	background: linear-gradient(135deg, rgba(108,92,231,0.15) 0%, rgba(42,40,93,0.2) 100%) !important;
	border-color: rgba(108,92,231,0.25) !important;
}
.homepage-service .row > [class*="col-"]:first-child .service-part:hover {
	background: linear-gradient(135deg, rgba(108,92,231,0.22) 0%, rgba(42,40,93,0.28) 100%) !important;
}

.hp-service-section-link-wrapper {
	display: flex; flex-direction: column; flex: 1;
	text-decoration: none; color: inherit;
}
.hp-service-section-link-wrapper:hover { text-decoration: none; color: inherit; }

.service-part img {
	width: 52px; height: 52px;
	object-fit: contain;
	margin-bottom: 22px;
	border-radius: 14px;
	padding: 10px;
	background: linear-gradient(135deg, rgba(108,92,231,0.25) 0%, rgba(0,203,169,0.15) 100%);
	filter: brightness(0) invert(1);
	flex-shrink: 0;
}

.service-part h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #ffffff !important;
	margin-bottom: 10px;
}
.service-part p {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: rgba(255,255,255,0.58) !important;
	margin: 0;
	flex: 1;
}
.service-part:hover h3 { color: #c8c4ff !important; }

/* ============================================================
   11. HOME — CLIENTS (MARQUEE STYLE)
   ============================================================ */

.our-clients {
	padding: 52px 0;
	background: var(--color-section-alt);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.our-clients .homepage-contactsection-title {
	margin-bottom: 32px;
}
/* "FEATURED IN" title — visible, professional */
.our-clients .homepage-contactsection-title h2 {
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--color-text-body) !important;
	-webkit-text-fill-color: var(--color-text-body) !important;
	background: none !important;
}

/* Override carousel widget plugin's injected inline CSS (padding:60px; height:357px) */
.our-clients .carousel_widget,
.our-clients .clients-image.carousel_widget {
	padding: 0 !important;
	height: auto !important;
}

.clients-image_items {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 24px;
}
/* Point 10: Show logos in full colour; darken blend removes white image backgrounds on any light bg */
.clients-image_items img {
	max-height: 44px; width: auto;
	filter: none;
	mix-blend-mode: darken;
	transition: all 0.35s ease;
}
.clients-image_items img:hover {
	filter: grayscale(100%) opacity(0.4);
	transform: scale(0.97);
}
/* Hide empty carousel slides in Featured In */
.clients-image_items:empty { display: none !important; }
.clients-image .owl-item:has(.clients-image_items:empty) { display: none !important; }

/* ============================================================
   12. HOME — REVIEWS SECTION
   ============================================================ */

/* Point 9: Reduce gap between blog section and reviews */
.homepage-blogsection { padding-bottom: 72px; }

.customer-reviews-section {
	padding: 72px 0 100px;
	background: var(--color-dark);
	overflow: hidden;
	position: relative;
}
.customer-reviews-section::before {
	content: '';
	position: absolute;
	top: -100px; left: -100px;
	width: 500px; height: 500px;
	background: radial-gradient(circle, rgba(108,92,231,0.14) 0%, transparent 65%);
	border-radius: 50%;
	pointer-events: none;
}
.customer-reviews-section::after {
	content: '';
	position: absolute;
	bottom: -100px; right: -100px;
	width: 400px; height: 400px;
	background: radial-gradient(circle, rgba(0,203,169,0.09) 0%, transparent 65%);
	border-radius: 50%;
	pointer-events: none;
}

/* ── REVIEW CARDS ─────────────────────────────────────────────────────── */
.customer-reviews-section .review-card,
.customer-reviews-section .review_item,
.customer-reviews-section .item {
	background: linear-gradient(145deg, rgba(108,92,231,0.18) 0%, rgba(255,255,255,0.03) 100%);
	border: 1px solid rgba(108,92,231,0.28);
	border-top: 3px solid var(--color-electric);
	border-radius: 20px;
	padding: 0;
	margin: 6px 8px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.25);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}
.customer-reviews-section .review-card:hover,
.customer-reviews-section .review_item:hover {
	background: linear-gradient(145deg, rgba(108,92,231,0.28) 0%, rgba(0,203,169,0.06) 100%);
	border-color: rgba(108,92,231,0.5);
	box-shadow: 0 20px 56px rgba(108,92,231,0.28);
	transform: translateY(-4px);
}
/* Quote decoration */
.customer-reviews-section .review-card::before,
.customer-reviews-section .review_item::before {
	content: '\201C';
	position: absolute;
	top: 12px; right: 18px;
	font-size: 56px;
	line-height: 1;
	color: rgba(108,92,231,0.25);
	font-family: Georgia, serif;
	pointer-events: none;
}

/* ALL text white */
.customer-reviews-section .review-card *,
.customer-reviews-section .review_item *,
.customer-reviews-section .item * {
	color: rgba(255,255,255,0.92) !important;
	-webkit-text-fill-color: rgba(255,255,255,0.92) !important;
}
/* Review body text */
.customer-reviews-section .review-card p,
.customer-reviews-section .review_item p,
.customer-reviews-section .item p,
.customer-reviews-section [class*="review-text"],
.customer-reviews-section [class*="review-content"],
.customer-reviews-section [class*="review-body"] {
	font-size: 0.9rem !important;
	line-height: 1.72 !important;
	color: rgba(255,255,255,0.82) !important;
	-webkit-text-fill-color: rgba(255,255,255,0.82) !important;
	margin-bottom: 12px !important;
	font-style: italic;
}
/* Reviewer name */
.customer-reviews-section [class*="reviewer-name"],
.customer-reviews-section [class*="review-author"] strong,
.customer-reviews-section [class*="author-name"],
.customer-reviews-section strong,
.customer-reviews-section b {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 0.9rem !important;
	display: block;
	margin-bottom: 2px;
}
/* Reviewer company / designation */
.customer-reviews-section [class*="reviewer-company"],
.customer-reviews-section [class*="reviewer-position"],
.customer-reviews-section [class*="author-company"],
.customer-reviews-section span,
.customer-reviews-section small {
	color: rgba(200,196,255,0.75) !important;
	-webkit-text-fill-color: rgba(200,196,255,0.75) !important;
	font-size: 0.8125rem !important;
}

/* Star ratings */
.reviews-totals-stars {
	position: relative;
	display: inline-block;
	font-size: 18px;
	letter-spacing: 2px;
	line-height: 1;
	margin-bottom: 14px;
}
.reviews-totals-stars .stars-outer { display: block; }
.reviews-totals-stars .stars-outer::before { content: "★★★★★"; color: rgba(255,255,255,0.15); }
.reviews-totals-stars .stars-inner {
	position: absolute;
	top: 0; left: 0;
	overflow: hidden;
	white-space: nowrap;
}
.reviews-totals-stars .stars-inner::before { content: "★★★★★"; color: #f5a623; }

/* ── SECTION TITLE ───────────────────────────────────────────────────── */
.customer-reviews-section .homepage-contactsection-title::before {
	content: 'WHAT OUR CLIENTS SAY';
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-electric);
	margin-bottom: 14px;
}
.customer-reviews-section .homepage-contactsection-title h2 {
	font-size: clamp(1.75rem, 4vw, 2.875rem) !important;
	background: linear-gradient(135deg, #ffffff 0%, #c8c4ff 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	color: transparent !important;
}
.customer-reviews-section .homepage-contactsection-title p {
	color: rgba(255,255,255,0.55) !important;
	-webkit-text-fill-color: rgba(255,255,255,0.55) !important;
}

/* ── CAROUSEL WIDGET: override inline <style> from erp_customer_reviews shortcode ─ */

/* Section title rendered as <h2 class="text-center"> by the shortcode */
.customer-reviews-section .container > h2.text-center {
	font-size: clamp(1.75rem, 4vw, 2.875rem) !important;
	font-weight: 700 !important;
	background: linear-gradient(135deg, #ffffff 0%, #c8c4ff 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	color: transparent !important;
	margin-bottom: 48px !important;
	letter-spacing: -0.02em;
}
/* Outer carousel wrapper */
/* ============================================================
   REVIEWS CAROUSEL — Professional Premium Layout
   ============================================================ */
.customer-reviews-section {
	padding: 80px 0 100px !important;
	overflow: hidden !important;
}
.customer-reviews-section .carousel_widget {
	background: transparent !important;
	height: auto !important;
	padding: 0 55px 10px !important;
	max-width: 1060px !important;
	width: 100% !important;
	margin: 0 auto !important;
}

/* Card — premium glass design */
.customer-reviews-section .carousel_widget__card {
	background: linear-gradient(145deg, rgba(108,92,231,0.16) 0%, rgba(15,12,41,0.55) 100%) !important;
	border: 1px solid rgba(108,92,231,0.25) !important;
	border-top: 3px solid var(--color-electric) !important;
	border-radius: 20px !important;
	box-shadow: 0 8px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06) !important;
	padding: 32px 28px 24px !important;
	height: auto !important;
	min-height: 260px !important;
	margin: 0 10px 4px !important;
	display: flex !important;
	flex-direction: column !important;
	text-decoration: none !important;
	overflow: visible !important;
	box-sizing: border-box !important;
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
	position: relative !important;
	backdrop-filter: blur(6px) !important;
}
.customer-reviews-section .carousel_widget__card::before {
	content: '\201C';
	position: absolute;
	top: 12px; right: 18px;
	font-size: 56px;
	line-height: 1;
	color: rgba(108,92,231,0.25);
	font-family: Georgia, serif;
	pointer-events: none;
}
.customer-reviews-section .carousel_widget__card:hover {
	background: linear-gradient(145deg, rgba(108,92,231,0.26) 0%, rgba(0,203,169,0.05) 100%) !important;
	border-color: rgba(108,92,231,0.5) !important;
	border-top-color: var(--color-teal) !important;
	box-shadow: 0 20px 60px rgba(108,92,231,0.28) !important;
	transform: translateY(-4px) !important;
}
/* All text white */
.customer-reviews-section .carousel_widget__card,
.customer-reviews-section .carousel_widget__card * {
	color: rgba(255,255,255,0.9) !important;
	-webkit-text-fill-color: rgba(255,255,255,0.9) !important;
}
/* Rating */
.customer-reviews-section .carousel_widget .rating {
	color: #f5a623 !important;
	-webkit-text-fill-color: #f5a623 !important;
	font-weight: 700 !important;
	font-size: 1.1rem !important;
}
/* Stars */
.customer-reviews-section .stars-outer {
	color: rgba(255,255,255,0.18) !important;
	-webkit-text-fill-color: rgba(255,255,255,0.18) !important;
}
.customer-reviews-section .stars-inner {
	color: #f5a623 !important;
	-webkit-text-fill-color: #f5a623 !important;
}
/* Review text */
.customer-reviews-section .carousel_widget__text,
.customer-reviews-section .carousel_widget__text p {
	color: rgba(255,255,255,0.82) !important;
	-webkit-text-fill-color: rgba(255,255,255,0.82) !important;
	font-size: 0.925rem !important;
	line-height: 1.75 !important;
	font-style: italic !important;
	margin: 14px 0 0 !important;
	padding-bottom: 18px !important;
	display: block !important;
	height: auto !important;
	max-height: none !important;
	-webkit-line-clamp: unset !important;
	-webkit-box-orient: horizontal !important;
	overflow: visible !important;
	flex: 0 0 auto !important;
}
/* Author — separator line for clear visual break */
.customer-reviews-section .carousel_widget__author {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	font-size: 0.8375rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em !important;
	line-height: 1.5 !important;
	padding-top: 14px !important;
	margin: 0 0 12px !important;
	border-top: 1px solid rgba(108,92,231,0.35) !important;
	height: auto !important;
	max-height: none !important;
	flex-shrink: 0 !important;
	overflow: visible !important;
	white-space: normal !important;
	display: block !important;
	position: static !important;
}
/* Bottom row: verified + logo */
.customer-reviews-section .carousel_widget__card .row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0 !important;
}
.customer-reviews-section .carousel_widget__card .row .col-6 {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
}
/* Verified badge */
.customer-reviews-section .carousel_widget__verified {
	background: rgba(0,203,169,0.1) !important;
	border: 1px solid rgba(0,203,169,0.28) !important;
	border-radius: 20px !important;
	padding: 4px 10px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
}
.customer-reviews-section .carousel_widget__verified,
.customer-reviews-section .carousel_widget__verified * {
	color: #00cba9 !important;
	-webkit-text-fill-color: #00cba9 !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
}
.customer-reviews-section .carousel_widget__verified img {
	filter: brightness(0) saturate(100%) invert(60%) sepia(90%) saturate(400%) hue-rotate(120deg) !important;
	width: 12px !important; height: 12px !important;
}
/* Platform logo */
.customer-reviews-section .carousel_widget_power_by {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
}
.customer-reviews-section .carousel_widget_power_by img {
	filter: brightness(0) invert(1) !important;
	opacity: 0.8 !important;
	max-height: 22px !important;
	display: block !important;
}
/* Nav arrows */
.customer-reviews-section .owl-carousel-reviews .owl-prev,
.customer-reviews-section .owl-carousel-reviews .owl-next {
	background: rgba(108,92,231,0.75) !important;
	color: #ffffff !important;
	border-radius: 50% !important;
	width: 36px !important;
	height: 36px !important;
	line-height: 36px !important;
}
.customer-reviews-section .owl-carousel-reviews .owl-prev:hover,
.customer-reviews-section .owl-carousel-reviews .owl-next:hover {
	background: var(--color-electric) !important;
	box-shadow: 0 4px 20px rgba(108,92,231,0.5) !important;
}
/* Responsive */
@media (max-width: 991px) {
	.customer-reviews-section .carousel_widget {
		padding: 0 45px 10px !important;
		max-width: 100% !important;
	}
}
@media (max-width: 575px) {
	.customer-reviews-section .carousel_widget {
		padding: 0 35px 10px !important;
	}
	.customer-reviews-section .carousel_widget__card {
		padding: 24px 20px 20px !important;
		margin: 0 4px 4px !important;
	}
}

/* ============================================================
   13. HOME — CTA STRIP
   ============================================================ */

.homepage-cta {
	padding: 80px 0;
	background: linear-gradient(135deg, var(--color-electric) 0%, var(--color-primary) 60%, var(--color-dark-2) 100%);
	position: relative;
	overflow: hidden;
}
/* Grid dots on CTA */
.homepage-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
}
/* Glow orb right */
.homepage-cta::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 5%;
	transform: translateY(-50%);
	width: 360px; height: 360px;
	background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 65%);
	border-radius: 50%;
	pointer-events: none;
}

/* Point 7: vertically align both columns in CTA strip */
.homepage-cta .row { align-items: center; }
.homepage-cta-leftside { position: relative; z-index: 2; }
.homepage-cta-leftside h2,
.homepage-cta-leftside h3,
.homepage-cta-leftside h4,
.homepage-cta-leftside p { color: #ffffff; }
.homepage-cta-leftside h2,
.homepage-cta-leftside h3 {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 900;
	line-height: 1.2;
	margin-bottom: 0.625rem;
}
.homepage-cta-leftside p { font-size: 1.0625rem; opacity: 0.8; margin-bottom: 0; }
.homepage-cta-rightside {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
	gap: 10px;
}
/* Ensure the CTA row is vertically aligned */
.homepage-cta .row { align-items: center; }
.homepage-cta-rightside p { color: rgba(255,255,255,0.65); font-size: 0.875rem; text-align: right; margin: 0; }
.homepage-cta-rightside .without-background {
	border-color: rgba(255,255,255,0.5);
	color: #ffffff !important;
	font-size: 0.9375rem;
	padding: 14px 36px;
}

/* ============================================================
   14. HOME — THIRD SECTION (FEATURE)
   ============================================================ */

.homepage-thiredsection {
	padding: 120px 0;
	background: var(--color-section-alt) !important;
	position: relative;
	overflow: hidden;
}
/* Ghost decorative number */
.homepage-thiredsection::before {
	content: '03';
	position: absolute;
	bottom: -40px;
	left: -20px;
	font-size: 280px;
	font-weight: 900;
	color: rgba(108,92,231,0.04);
	line-height: 1;
	pointer-events: none;
	font-family: var(--font-family);
	user-select: none;
}
.homepage-thiredsection-top-shape { display: none; }

.homepage-thiredsection-text { padding-right: 60px; }
.homepage-thiredsection-text::before {
	content: 'OUR APPROACH';
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-electric);
	margin-bottom: 16px;
}
.homepage-thiredsection-text h2 {
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	font-weight: 900;
	color: var(--color-text-heading);
	line-height: 1.15;
	margin-bottom: 1.25rem;
}
.homepage-thiredsection-text p { font-size: 1rem; line-height: 1.82; margin-bottom: 1.25rem; color: #4a5568; }
.homepage-thiredsection-text .with-background { margin-top: 12px; }

/* Point 6: Our Approach image container + CSS fallback when ACF image is empty */
.homepage-thiredsection-img {
	position: relative;
	min-height: 380px;
}
.homepage-thiredsection-img::before {
	content: '';
	position: absolute;
	top: -16px; right: -16px;
	width: calc(100% - 16px); height: calc(100% - 16px);
	border: 2px solid rgba(108,92,231,0.2);
	border-radius: 22px;
	pointer-events: none;
	z-index: 0;
}
.homepage-thiredsection-img img {
	border-radius: 20px;
	box-shadow: 0 32px 80px rgba(42,40,93,0.15);
	width: 100%;
	position: relative;
	z-index: 1;
}
/* Fallback visible placeholder when no image is provided */
.homepage-thiredsection-img:empty,
.homepage-thiredsection-img:not(:has(img)) {
	background: linear-gradient(135deg,
		rgba(108,92,231,0.12) 0%,
		rgba(0,203,169,0.08) 50%,
		rgba(42,40,93,0.1) 100%);
	border-radius: 20px;
	border: 1.5px dashed rgba(108,92,231,0.25);
	display: flex;
	align-items: center;
	justify-content: center;
}
.homepage-thiredsection-img:empty::after,
.homepage-thiredsection-img:not(:has(img))::after {
	content: 'Approach Image';
	font-family: var(--font-family);
	font-size: 0.875rem;
	color: rgba(108,92,231,0.5);
	font-weight: 600;
	letter-spacing: 0.05em;
}

/* ============================================================
   15. HOME — STATS
   ============================================================ */

.homepage-project {
	padding: 100px 0;
	background: var(--color-dark);
	position: relative;
	overflow: hidden;
}
/* Grid dots */
.homepage-project::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(108,92,231,0.2) 1px, transparent 1px);
	background-size: 40px 40px;
	opacity: 0.5;
	pointer-events: none;
}
/* Electric glow top-right */
.homepage-project::after {
	content: '';
	position: absolute;
	top: -150px; right: -150px;
	width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(108,92,231,0.15) 0%, transparent 65%);
	border-radius: 50%;
	pointer-events: none;
}

.homepage-how-help-grow-title {
	text-align: center;
	margin-bottom: 72px;
	position: relative;
	z-index: 2;
}
.homepage-how-help-grow-title::before {
	content: 'OUR IMPACT';
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-electric);
	margin-bottom: 14px;
}
.homepage-how-help-grow-title h2 {
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	font-weight: 900;
	background: linear-gradient(135deg, #ffffff 0%, #c8c4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 0.75rem;
}
.homepage-how-help-grow-title p { font-size: 1.0625rem; color: rgba(255,255,255,0.55); max-width: 540px; margin: 0 auto; }

.hompage-project-detail { position: relative; z-index: 2; }

/* Stat cards — glass */
.hompage-project-detail-text {
	text-align: center;
	padding: 40px 24px;
	position: relative;
}
.hompage-project-detail-text::before {
	content: '';
	position: absolute;
	inset: 12px 8px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: var(--radius-md);
	transition: all 0.3s ease;
}
.col-md-3:hover .hompage-project-detail-text::before {
	background: rgba(108,92,231,0.1);
	border-color: rgba(108,92,231,0.3);
	box-shadow: var(--glow-electric);
}

.hompage-project-detail-text h2 {
	font-size: clamp(3rem, 7vw, 5rem);
	font-weight: 900;
	background: linear-gradient(135deg, #ffffff 10%, var(--color-electric) 60%, var(--color-teal) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
	margin-bottom: 10px;
	letter-spacing: -0.04em;
	position: relative;
	z-index: 1;
}
.hompage-project-detail-text p {
	font-size: 0.9375rem;
	color: rgba(255,255,255,0.6);
	margin: 0;
	position: relative;
	z-index: 1;
	font-weight: 500;
}

/* ============================================================
   16. HOME — PROCESS STEPS (HORIZONTAL TIMELINE)
   ============================================================ */

.homepage-step-section {
	padding: 120px 0;
	background: var(--color-section-alt);
	position: relative;
	overflow: hidden;
}
.homepage-step-section::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(to right, var(--color-electric), var(--color-teal), var(--color-electric));
}
.homepage-step-section-title {
	text-align: center;
	margin-bottom: 72px;
}
.homepage-step-section-title::before {
	content: 'HOW WE WORK';
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-electric);
	margin-bottom: 14px;
}
.homepage-step-section-title h2 {
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	font-weight: 900;
	color: var(--color-text-heading);
}

/* Horizontal connector line */
.steps { position: relative; }
.steps .row {
	position: relative;
}
.steps .row::before {
	content: '';
	position: absolute;
	top: 54px;
	left: calc(12.5% + 26px);
	right: calc(12.5% + 26px);
	height: 2px;
	background: linear-gradient(to right, var(--color-electric), var(--color-teal));
	z-index: 0;
}

.step_main_parent { margin-bottom: 0; }
.step_block {
	position: relative;
	z-index: 1;
	background: #ffffff;
	border: none;
	border-radius: var(--radius-lg);
	padding: 44px 28px 36px;
	height: 100%;
	transition: all 0.35s ease;
	text-align: center;
	box-shadow: 0 2px 20px rgba(42,40,93,0.06);
}
.step_block:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 60px rgba(108,92,231,0.15);
}

.step_block .number {
	width: 56px;
	height: 56px;
	background: linear-gradient(135deg, var(--color-electric) 0%, var(--color-primary) 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
	box-shadow: 0 4px 20px rgba(108,92,231,0.45);
	position: relative;
}
/* White ring around step circle */
.step_block .number::before {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid rgba(108,92,231,0.25);
}

.step_block .number span {
	font-size: 1.125rem;
	font-weight: 900;
	color: #ffffff;
	line-height: 1;
}
.step_block h4 {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text-heading);
	line-height: 1.6;
	margin: 0;
	text-align: center;
}

/* ============================================================
   17. HOME — CHOOSE US
   ============================================================ */

/* Section Rhythm System (M2, 2026-07-06): was --color-section-alt,
   identical to .service-last-section immediately before it and
   .homepage-new-secondsec immediately after it on the Service/Industry
   template (3 consecutive sections sharing one background) — also
   directly follows another --color-section-alt section on About Us.
   Switched to --color-bg so both templates alternate correctly; this
   class is otherwise only reachable from the confirmed-orphaned
   home_page_template.php (0 live pages), so no other page is affected. */
.homepage-fourthsection {
	padding: 120px 0;
	background: var(--color-bg);
	position: relative;
	overflow: hidden;
}
.homepage-fourthsection::before {
	content: '04';
	position: absolute;
	top: -40px;
	left: -20px;
	font-size: 280px;
	font-weight: 900;
	color: rgba(108,92,231,0.04);
	line-height: 1;
	pointer-events: none;
	font-family: var(--font-family);
	user-select: none;
}

.homepage-fourthsection-title {
	text-align: center;
	margin-bottom: 64px;
}
.homepage-fourthsection-title::before {
	content: 'WHY CHOOSE US';
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-electric);
	margin-bottom: 14px;
}
.homepage-fourthsection-title h2 {
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	font-weight: 900;
	color: var(--color-text-heading);
}

/* Point 1: Choose Us — 2-column grid list to match image height, more compact */
.chooseus-text {
	padding-left: 56px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.chooseus-text p { font-size: 1rem; line-height: 1.82; margin-bottom: 1rem; color: #4a5568; }
.chooseus-text ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.chooseus-text ul li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 11px 14px;
	margin-bottom: 0;
	border-bottom: none;
	background: var(--color-section-alt);
	border-radius: 10px;
	transition: all 0.2s ease;
	color: var(--color-text-heading);
	line-height: 1.4;
}
.chooseus-text ul li:hover {
	background: rgba(108,92,231,0.08);
	transform: translateX(3px);
}
.chooseus-text ul li i {
	font-size: 1rem;
	background: linear-gradient(135deg, var(--color-electric) 0%, var(--color-teal) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	flex-shrink: 0;
	margin-top: 1px;
}
/* Gradient check-mark badge via pseudo */
.chooseus-text ul li::before {
	content: '✓';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	min-width: 20px;
	background: linear-gradient(135deg, var(--color-electric), var(--color-teal));
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	border-radius: 5px;
	flex-shrink: 0;
	margin-top: 1px;
}
.chooseus-text ul li:last-child { border-bottom: none; }

/* ============================================================
   18. HOME — BLOG (DARK)
   ============================================================ */

.homepage-blogsection {
	padding: 120px 0;
	background: var(--color-dark);
	position: relative;
	overflow: hidden;
}
.homepage-blogsection::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background:
		radial-gradient(ellipse 55% 55% at 5% 50%, rgba(108,92,231,0.1) 0%, transparent 55%),
		radial-gradient(ellipse 55% 55% at 95% 50%, rgba(0,203,169,0.07) 0%, transparent 55%);
	pointer-events: none;
}
.homepage-blogsection .container { position: relative; z-index: 2; }

.homepage-blogsection-title {
	text-align: center;
	margin-bottom: 64px;
	position: relative;
	z-index: 2;
}
.homepage-blogsection-title::before {
	content: 'LATEST INSIGHTS';
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-electric);
	margin-bottom: 14px;
}
.homepage-blogsection-title h2 {
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	font-weight: 900;
	background: linear-gradient(135deg, #ffffff 0%, #c8c4ff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Dark glass blog cards — !important needed to beat design-system.css */
.blog {
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: var(--radius-lg) !important;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: all 0.35s ease;
	margin-bottom: 28px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: none !important;
}
.blog:hover {
	background: rgba(108,92,231,0.1) !important;
	border-color: rgba(108,92,231,0.35) !important;
	box-shadow: 0 20px 60px rgba(108,92,231,0.18) !important;
	transform: translateY(-6px);
}

.list-post-thumbnail-wrapper { height: 220px; overflow: hidden; flex-shrink: 0; }
.list-post-thumbnail-wrapper .list-post-thumbnail-link { display: block; width: 100%; height: 100%; }
.list-post-thumbnail-wrapper .list-post-thumbnail-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.blog:hover .list-post-thumbnail-img { transform: scale(1.07); }

.blog .data { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.blog .author {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255,255,255,0.07);
}
.blog .author .author-thumbnail { flex-shrink: 0; }
.blog .author .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.blog .author p { margin: 0; line-height: 1.3; }
.blog .author p.name { font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.85); }
.blog .author p.name a { color: rgba(255,255,255,0.85); text-decoration: none; }
.blog .author p.date { font-size: 0.75rem; color: rgba(255,255,255,0.4); }
.blog .title { flex: 1; margin-bottom: 22px; }
.blog .title .erpp-blog-card-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.45; margin: 0; }
/* Card & CTA Experience (M3, 2026-07-06): neither this rule nor its
   light-background override (below) ever set text-decoration, so every
   card title on Blog listing, Case Study listing, Author archive, and
   Search results rendered with the browser's default underline —
   confirmed live on /blog/. */
.blog .title .erpp-blog-card-title a { color: rgba(255,255,255,0.92); text-decoration: none; }
.blog .title .erpp-blog-card-title a:hover { color: #c8c4ff; }
.blog .more { margin-top: auto; }

.more .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: rgba(255,255,255,0.55) !important;
	border: 1.5px solid rgba(255,255,255,0.18);
	border-radius: 50px;
	font-family: var(--font-family);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 8px 20px;
	transition: all 0.25s ease;
	text-decoration: none;
}
.blog:hover .more .btn,
.more .btn:hover {
	background: rgba(108,92,231,0.2);
	color: #ffffff !important;
	border-color: rgba(108,92,231,0.6);
	box-shadow: none;
}
.more .btn i { font-size: 0.75rem; transition: transform 0.2s ease; }
.blog:hover .more .btn i { transform: translateX(4px); }

/* Blog page (white) — keep readable */
.homepage-blogsection.blog-page {
	background: #ffffff !important;
}
.homepage-blogsection.blog-page .blog {
	background: #ffffff;
	border: 1px solid var(--color-border);
	backdrop-filter: none;
}
.homepage-blogsection.blog-page .blog:hover {
	background: #ffffff;
	border-color: #d4d3ee;
	box-shadow: var(--shadow-hover);
}
.homepage-blogsection.blog-page .blog .author p.name { color: var(--color-text-heading); }
.homepage-blogsection.blog-page .blog .author p.name a { color: var(--color-text-heading); }
.homepage-blogsection.blog-page .blog .author p.date { color: #6a7a7e; }
.homepage-blogsection.blog-page .blog .author { border-color: #f0f0f0; }
.homepage-blogsection.blog-page .blog .title .erpp-blog-card-title a { color: var(--color-text-heading); }
.homepage-blogsection.blog-page .blog .title .erpp-blog-card-title a:hover { color: var(--color-primary); }
.homepage-blogsection.blog-page .more .btn { color: var(--color-primary) !important; border-color: var(--color-border); }
.homepage-blogsection.blog-page .blog:hover .more .btn { background: var(--color-primary); color: #ffffff !important; border-color: var(--color-primary); }
.homepage-blogsection.blog-page .homepage-blogsection-title::before { color: var(--color-electric); }
.homepage-blogsection.blog-page .homepage-blogsection-title h2 { background: none; -webkit-text-fill-color: var(--color-text-heading); }

.loadmore-btn-wrapper {
	margin: 56px auto 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column-reverse;
	gap: 16px;
}
.loadmore-btn-wrapper .blog-load-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary);
	color: #ffffff !important;
	font-family: var(--font-family);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	border-radius: 50px;
	padding: 13px 32px;
	transition: all 0.25s ease;
	text-decoration: none;
}
.loadmore-btn-wrapper .blog-load-more-btn:hover {
	background: var(--color-electric);
	box-shadow: 0 6px 20px rgba(108,92,231,0.35);
	transform: translateY(-2px);
}
.loadmore-spinner {
	width: 40px; height: 40px;
	border: 3px solid rgba(42,40,93,0.1);
	border-bottom-color: var(--color-electric);
	border-radius: 50%;
	display: none;
	animation: rotation 0.8s linear infinite;
}

/* ============================================================
   19. HOME — CONTACT SECTION (DARK MESH)
   ============================================================ */

.homepage-contactsection {
	padding: 100px 0;
	background: linear-gradient(160deg, var(--color-dark) 0%, var(--color-dark-2) 50%, #1a1742 100%);
	position: relative;
	overflow: hidden;
}
/* Dot grid pattern */
.homepage-contactsection::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
}
/* Bottom glow */
.homepage-contactsection::after {
	content: '';
	position: absolute;
	bottom: -200px; left: -100px;
	width: 700px; height: 700px;
	background: radial-gradient(circle, rgba(108,92,231,0.18) 0%, transparent 60%);
	border-radius: 50%;
	pointer-events: none;
}

.homepage-contactsection .container { position: relative; z-index: 2; }

.contactus-leftside { padding-right: 48px; }

.leftside-title h3 {
	font-size: clamp(1.625rem, 3.5vw, 2.25rem);
	font-weight: 900;
	background: linear-gradient(135deg, #ffffff 0%, #c8c4ff 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	color: transparent !important;
	margin-bottom: 0.875rem;
}
.leftside-title p { font-size: 1.0625rem; color: rgba(255,255,255,0.62); line-height: 1.7; margin-bottom: 2rem; }

.footer-contact-outer { margin-bottom: 28px; }
.footer-contact-inner {
	font-size: 0.9375rem;
	font-family: var(--font-family);
	color: rgba(255,255,255,0.8);
	margin: 0 0 14px;
	padding: 14px 16px 14px 48px;
	position: relative;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 12px;
	transition: all 0.2s ease;
}
.footer-contact-inner:hover {
	background: rgba(108,92,231,0.1);
	border-color: rgba(108,92,231,0.3);
}
.footer-contact-inner a { color: rgba(255,255,255,0.9); font-weight: 500; transition: color 0.2s; }
.footer-contact-inner a:hover { color: #c8c4ff; }
.footer-contact-inner::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	background-position: left center;
	background-size: contain;
	background-repeat: no-repeat;
	width: 22px; height: 22px;
	filter: brightness(0) invert(1) opacity(0.6);
}
/* Point 4: Contact icons — phone (call us) + WhatsApp + email + location */
/* Call Us — phone handset icon */
.footer-contact-inner.skype-icon::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}
/* Email icon */
.footer-contact-inner.gmail-icon::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
/* WhatsApp icon for india-map-icon (phone_content links to wa.me) */
.footer-contact-inner.india-map-icon::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
}
/* USA phone — location pin icon */
.footer-contact-inner.usa-map-icon::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

.footer-social-section-part {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}
.footer-social-section-part .footerttl {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.4);
	margin-right: 4px;
	width: 100%;
}
.social-links__link {
	width: 40px; height: 40px;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.25s ease;
	position: relative;
	flex-shrink: 0;
}
.social-links__link:hover {
	background: var(--color-electric);
	border-color: var(--color-electric);
	transform: translateY(-3px);
	box-shadow: 0 4px 16px rgba(108,92,231,0.4);
}
/* Icon span — centered inside the circular button */
.social-links__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
}
.social-links__icon svg {
	fill: rgba(255,255,255,0.85);
	width: 16px;
	height: 16px;
	display: block;
	transition: fill 0.2s;
}
.social-links__link:hover .social-links__icon svg { fill: #ffffff; }

.footer-certificate { margin-top: 24px; filter: none; }

/* Point 2: Contact form card — compact, 2-col fields, matches left column height */
.home-contact-frm {
	background: #ffffff;
	border-radius: var(--radius-lg);
	padding: 32px 32px 28px;
	box-shadow: 0 32px 100px rgba(0,0,0,0.35);
	position: relative;
	align-self: flex-start;
}
/* Electric top accent line */
.home-contact-frm::before {
	content: '';
	position: absolute;
	top: 0; left: 40px; right: 40px;
	height: 3px;
	background: linear-gradient(to right, var(--color-electric), var(--color-teal));
	border-radius: 0 0 4px 4px;
}

.contactus-rightside-title h3 {
	font-size: 1.25rem;
	font-weight: 900;
	color: var(--color-text-heading);
	margin-bottom: 1rem;
}

/* ============================================================
   20. CF7 FORM STYLES
   ============================================================ */

.wpcf7 br { display: none; }
.wpcf7-form p { margin-bottom: 0; }
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-bottom: 8px; }

/* 2-column grid for contact form fields: Name|Company, Email|Phone, then full-width below */
.home-contact-frm .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 12px;
}
/* CF7 uses <div class="form-grop"> — children 2-5 are Name/Company/Email/Phone → 2-col */
.home-contact-frm .wpcf7-form > div.form-grop:nth-child(-n+5) { grid-column: auto; }
/* Children 6+ (Message, reCAPTCHA, Submit) and response → full width */
.home-contact-frm .wpcf7-form > div:nth-child(n+6),
.home-contact-frm .wpcf7-form > fieldset,
.home-contact-frm .wpcf7-form > .wpcf7-response-output { grid-column: 1 / -1; }
/* reCAPTCHA and spinner also full width */
.home-contact-frm .wpcf7 .wpcf7-spinner { grid-column: 1 / -1; }
.home-contact-frm .g-recaptcha,
.home-contact-frm .wpcf7-recaptcha { grid-column: 1 / -1; display: block; margin-bottom: 8px; }
.wpcf7 label {
	font-family: var(--font-family);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text-heading);
	margin-bottom: 4px;
	display: block;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	font-family: var(--font-family);
	font-size: 0.875rem;
	color: var(--color-text-body);
	background: #f8f8fc;
	border: 1.5px solid var(--color-border);
	border-radius: 8px;
	padding: 9px 12px;
	transition: border-color 0.2s, box-shadow 0.2s;
	margin-bottom: 0;
	line-height: 1.5;
}
.wpcf7 textarea { height: 70px !important; resize: vertical; }
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	outline: none;
	border-color: var(--color-electric);
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(108,92,231,0.12);
}
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	width: 100%;
	background: linear-gradient(135deg, var(--color-electric) 0%, var(--color-primary) 100%);
	color: #ffffff;
	font-family: var(--font-family);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: none;
	border-radius: 50px;
	padding: 14px 32px;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-top: 8px;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
	box-shadow: 0 8px 28px rgba(108,92,231,0.45);
	transform: translateY(-2px);
}
.wpcf7 .wpcf7-spinner { display: none; }
.wpcf7 .wpcf7-not-valid-tip { font-size: 0.75rem; color: #e53e3e; margin-top: 3px; }

/* ============================================================
   21. FAQ
   ============================================================ */

.service-faq-section { padding: 96px 0; background: #ffffff; }
.faq-text-leftside { text-align: center; margin-bottom: 52px; }
.faq-text-leftside h2 {
	font-size: clamp(1.5rem, 3vw, 2.125rem);
	font-weight: 800;
	color: var(--color-text-heading);
	margin-bottom: 0.625rem;
}
.faq-text-leftside p { font-size: 1.0625rem; color: #6a7a7e; max-width: 600px; margin: 0 auto; }

.accordion-item {
	border: 1px solid var(--color-border) !important;
	border-radius: 12px !important;
	margin-bottom: 10px;
	overflow: hidden;
}
#seoservice-faq button.accordion-button.collapsed {
	background: #ffffff;
	color: var(--color-text-heading);
	font-family: var(--font-family);
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 18px 24px;
	border-radius: 12px;
	box-shadow: none;
}
#seoservice-faq button.accordion-button,
#seoservice-faq button.accordion-button:not(.collapsed) {
	background: var(--color-electric);
	color: #ffffff;
	font-family: var(--font-family);
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 18px 24px;
	box-shadow: none;
}
#seoservice-faq .accordion-button::after { filter: brightness(0) invert(1); }
#seoservice-faq .accordion-button.collapsed::after { filter: none; }
#seoservice-faq .accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); }
.accordion-button::after { background-size: 16px; }
.accordion-body {
	font-size: 0.9375rem;
	line-height: 1.78;
	padding: 16px 24px 28px;
	background: #ffffff;
}

/* ============================================================
   22. FOOTER
   ============================================================ */

footer.footer-container {
	background: #ffffff !important;
	padding: 64px 0 48px !important;
	border-top: 1px solid var(--color-border);
}
.footer-main-title {
	font-family: var(--font-family) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: #6a7a7e !important;
	margin-bottom: 36px !important;
}
.erp-locations .footer-loaction-title {
	font-family: var(--font-family) !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	color: var(--color-text-heading) !important;
	margin-bottom: 10px;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding-left: 0 !important;
	position: static !important;
}
.erp-locations .footer-loaction-title img {
	position: static !important;
	margin-top: 0 !important;
	width: 24px !important;
	height: 16px !important;
	border-radius: 2px;
	flex-shrink: 0;
	display: inline-block !important;
}
.erp-locations p {
	font-family: var(--font-family) !important;
	font-size: 0.875rem !important;
	color: #6a7a7e !important;
	line-height: 1.72 !important;
}
.erp-locations a.addresslink {
	color: var(--color-electric) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	font-size: 0.875rem !important;
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	transition: color 0.2s;
}
.erp-locations a.addresslink:hover { color: var(--color-primary) !important; }
.erp-locations a.addresslink svg { width: 13px; height: 13px; flex-shrink: 0; }
.erp-locations a.addresslink svg path { fill: currentColor; }

.copyright-section {
	background: #f8f8fc !important;
	border-top: 1px solid var(--color-border);
	padding: 14px 0 !important;
	margin: 0;
	font-family: var(--font-family) !important;
	font-size: 0.8125rem !important;
}
.copyright-section .ft-bottom-outer {
	display: flex;
	align-items: center;
	column-gap: 15px;
	max-width: 1242px;
	margin: 0 auto;
	padding: 0 15px;
}
.copyright-section .ft-bottom-outer .ft-bottom-inner { width: calc(33.33% - 10px); }
.copyright-section .ft-bottom-outer .ft-bottom-inner.copyright-text { color: #6a7a7e; font-size: 0.8125rem; }
.copyright-section .ft-bottom-outer .ft-bottom-inner.privacy_certificate { display: flex; align-items: center; justify-content: center; gap: 12px; }
.copyright-section .ft-bottom-outer .ft-bottom-inner.footer-links { text-align: right; }
.copyright-section .ft-bottom-outer .ft-bottom-inner.footer-links a {
	display: inline-block;
	font-size: 0.8125rem;
	line-height: 1;
	position: relative;
	margin: 0 12px;
	color: #6a7a7e;
	text-decoration: none;
	transition: color 0.2s;
}
.copyright-section .ft-bottom-outer .ft-bottom-inner.footer-links a:hover { color: var(--color-electric); }
.copyright-section .ft-bottom-outer .ft-bottom-inner.footer-links .a_line::after { display: none; }

/* ============================================================
   23. SECTION TITLES — SHARED
   ============================================================ */

.homepage-contactsection-title {
	text-align: center;
	margin-bottom: 60px;
	padding: 0 16px;
}
.homepage-contactsection-title h2 {
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	font-weight: 900;
	color: var(--color-text-heading);
	margin-bottom: 0.75rem;
}
.homepage-contactsection-title p {
	font-size: 1.0625rem;
	color: #6a7a7e;
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.7;
}

/* ============================================================
   24. SERVICE PAGES
   ============================================================ */

.service-secondsection { padding: 96px 0; background: var(--color-bg); }
.service-secondsection-img img { width: 100%; max-width: 90%; border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(42,40,93,0.12); }
.service-secondsection-text { padding-left: 52px; display: flex; flex-direction: column; justify-content: center; }
.service-secondsection-text h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--color-text-heading); margin-bottom: 1.125rem; }
/* Visual Polish Sprint 1: this class had no margin-bottom at all, so
   consecutive paragraphs in the Service/Industry intro section ran
   together with zero visual break — every other section on this site
   (homepage sections, .erpp-rcs__body, etc.) gives body paragraphs a
   spacing rhythm; this one was the one gap. */
.service-secondsection-text p { font-size: 1rem; line-height: 1.78; margin-bottom: 1.25rem; }
.service-secondsection-text p:last-child { margin-bottom: 0; }

/* Section Rhythm System (M2, 2026-07-06): .service-thiredsection had zero
   CSS anywhere in the codebase — no padding, no background — so this
   section (reusing .service-secondsection-text/-img, styled above) sat
   flush against its neighbors with no breathing room, and defaulted to
   the page's white background regardless of what came before/after it.
   Matches its sibling sections' established padding exactly; background
   alternates against the gradient CTA section above and the white
   "how it works" section below it. */
.service-thiredsection { padding: 96px 0; background: var(--color-section-alt); }

.services-fifthsection {
	padding: 96px 0;
	background: var(--color-section-alt);
	background-image: url(/wp-content/uploads/2021/09/SEO-Offering-Background-Image.png);
	background-repeat: repeat-x;
	background-position: center bottom;
}
.fifthsection-titletext .fifthsection-subheading { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-electric); margin-bottom: 10px; }
.fifthsection-titletext h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--color-text-heading); margin-bottom: 0.5rem; }
.fifthsection-line { margin-bottom: 52px; }
.fifthsection-line::after { display: none; }
.fifthsection-desctext p { font-size: 1rem; line-height: 1.78; padding-left: 28px; }
.fifthsection-areas { margin-top: 40px; }

/* Visual Polish Sprint 2: this 6-item feature grid (Service/Industry
   family — shared with dozens of pages via service_page_template.php)
   had no card treatment or link-style reset at all. .areas itself now
   gets the shared .erpp-card look via the Card System group above; the
   rules below add the internal layout, icon sizing, and — most
   importantly — reset the whole-card <a> wrapper's default browser
   link styling (blue, underlined), which was bleeding through to every
   heading and paragraph inside it. Mirrors the equivalent, already-correct
   .hp-service-section-link-wrapper reset used on the homepage's own
   service cards. */
.fifthsection-areas .row > [class*="col-"] { margin-bottom: 28px; }
.areas { height: 100%; }
.service-section-link-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px;
	text-decoration: none !important;
	color: inherit;
}
.service-section-link-wrapper:hover,
.service-section-link-wrapper:focus {
	text-decoration: none !important;
	color: inherit;
}
.areas-img { margin-bottom: 20px; }
.areas-img img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: var(--radius-sm);
	padding: 8px;
	background: var(--color-section-alt);
}
.areas-title h3 {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-text-heading);
	margin-bottom: 10px;
}
.areas-desc p {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--color-text-body);
	margin-bottom: 0;
}

.service-last-section { padding: 96px 0; background: var(--color-section-alt); }
.lastsection-features {
	background: #ffffff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 20px;
	margin-bottom: 16px;
	transition: all 0.25s ease;
}
.lastsection-features:hover { border-color: var(--color-electric); box-shadow: 0 4px 18px rgba(108,92,231,0.12); }

section.service-fourthsection {
	padding: 72px 0;
	background: linear-gradient(135deg, var(--color-electric) 0%, var(--color-primary) 100%) !important;
	position: relative;
	overflow: hidden;
}
.fourthsection-title { text-align: center; margin-bottom: 44px; }
.fourthsection-title h2, .fourthsection-title h5 { color: #ffffff; }
.fourthsection-title h5 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.72; margin-bottom: 8px; }
.fourthsection-title h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; }

.service-fourthsection form input[type="text"],
.service-fourthsection form input[type="email"],
.service-fourthsection form input[type="tel"] {
	background: rgba(255,255,255,0.12);
	border: 1.5px solid rgba(255,255,255,0.25);
	color: #ffffff;
	border-radius: 10px;
	padding: 12px 16px;
	font-family: var(--font-family);
	font-size: 0.9375rem;
	width: 100%;
}
.service-fourthsection form input::placeholder { color: rgba(255,255,255,0.55); }
.service-fourthsection form input:focus { outline: none; border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.18); }
.service-fourthsection form input[type="submit"] {
	background: var(--color-teal);
	color: #ffffff;
	font-family: var(--font-family);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: none;
	border-radius: 50px;
	padding: 14px 32px;
	cursor: pointer;
	transition: all 0.25s ease;
	max-width: 200px;
}
.service-fourthsection form input[type="submit"]:hover { box-shadow: 0 4px 14px rgba(0,203,169,0.4); transform: translateY(-2px); }
.service-cta-form input[type="submit"] { background-color: var(--color-teal) !important; border-color: var(--color-teal) !important; color: #ffffff; border-radius: 50px; }

.services-modules { padding: 96px 0; background: var(--color-bg); }
.services-modules .module-plate .modulePlateWrapperLink:hover { text-decoration: none; }
.module-plate {
	background: var(--color-section-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 28px;
	height: 100%;
	transition: all 0.3s ease;
	margin-bottom: 24px;
}
.module-plate:hover { border-color: var(--color-electric); box-shadow: 0 10px 36px rgba(108,92,231,0.12); background: #ffffff; transform: translateY(-3px); }
.modulePlateWrapperLink,
.modulePlateWrapperLink:visited {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none !important;
}
.modulePlateWrapperLink:hover,
.modulePlateWrapperLink:focus {
	color: inherit;
	text-decoration: none !important;
}
.wwd-icon {
	width: 64px;
	height: 64px;
	object-fit: contain;
	margin-bottom: 20px;
}
.module-plate h5 {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-text-heading);
	margin-bottom: 10px;
}
.module-plate p {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--color-text-body);
	margin-bottom: 0;
}

/* ============================================================
   25. MEGA MENU & STANDARD DROPDOWNS
   ============================================================ */

/* ── Desktop: make the navbar's .container the positioning context.
      This means left:0/right:0 on the mega menu panel = container edges,
      not full viewport — matching the red boundary lines exactly. ── */
@media (min-width: 992px) {
	nav.navbar > .container { position: relative; }
	.mega-menu-nav-item { position: static !important; }
	/* Hide Bootstrap dropdown caret on desktop */
	.navbar-nav .dropdown-toggle::after,
	.navbar-nav .nav-link::after { display: none !important; }
	/* Preserve the approved desktop appearance; chevrons are mobile-only. */
	.nav-chevron { display: none !important; }

	/* ── Desktop nav-link: sliding underline accent on hover ── */
	.navbar-nav .nav-item > .nav-link {
		position: relative;
	}
	.navbar-nav .nav-item > .nav-link::before {
		content: '';
		position: absolute;
		bottom: 4px;
		left: 50%;
		right: 50%;
		height: 2px;
		background: var(--color-electric);
		border-radius: 2px;
		opacity: 0;
		transition: left 0.26s cubic-bezier(0.4,0,0.2,1),
		            right 0.26s cubic-bezier(0.4,0,0.2,1),
		            opacity 0.26s ease;
		pointer-events: none;
	}
	.navbar-nav .nav-item:hover > .nav-link::before {
		left: 14px;
		right: 14px;
		opacity: 1;
	}
	/* Boost desktop mega menu inner link hover feel */
	.mega-menu-inner-links,
	a.mega-menu-inner-links {
		transition: background 0.18s ease, color 0.18s ease,
		            padding-left 0.2s cubic-bezier(0.34,1.2,0.64,1),
		            transform 0.18s ease;
	}
	.mega-menu-inner-links:hover,
	a.mega-menu-inner-links:hover {
		transform: translateX(2px);
	}
	/* Dropdown item spring hover */
	.navbar-nav .dropdown-item {
		transition: background 0.18s ease, color 0.18s ease,
		            padding-left 0.2s cubic-bezier(0.34,1.2,0.64,1),
		            transform 0.18s ease;
	}
	.navbar-nav .dropdown-item:hover,
	.navbar-nav .dropdown-item:focus {
		transform: translateX(2px);
	}
}

/* ── MEGA MENU PANEL — always display:flex; hidden with visibility ──
   Using visibility+opacity instead of display:none removes the gap-
   collapse problem: the panel stays in the pointer-events tree while
   invisible, so moving from the nav link into the panel never loses hover. */
.mega-menu-wrapper {
	position: absolute;
	top: 100%; left: 0; right: 0; width: 100%;
	/* design — left+right borders now visible since box is container-width */
	background: var(--color-bg);
	border-top: 3px solid var(--color-electric);
	border-left: 1px solid var(--color-border);
	border-right: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-lg);
	padding: 28px 20px 24px;
	border-radius: 0 0 18px 18px;
	z-index: 1050;
	/* layout */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0;
	/* hidden state — opacity+visibility so pointer-events still work */
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-10px) scale(0.97);
	transform-origin: top center;
	transition: opacity 0.26s ease,
	            transform 0.26s cubic-bezier(0.34, 1.28, 0.64, 1),
	            visibility 0s linear 0.26s;
}

/* Desktop show on hover or JS .mm-open class — instant reveal, delayed hide */
@media (min-width: 992px) {
	.mega-menu-nav-item:hover > .mega-menu-wrapper,
	.mega-menu-nav-item:focus-within > .mega-menu-wrapper,
	.mega-menu-nav-item.mm-open > .mega-menu-wrapper {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0) scale(1);
		transition: opacity 0.24s ease,
		            transform 0.24s cubic-bezier(0.34, 1.28, 0.64, 1),
		            visibility 0s linear 0s;
	}
}
/* Mobile: JS toggles .active class */
.mega-menu-nav-item.active > .mega-menu-wrapper {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

/* ── Inner container — fills the wrapper (which is now container-width) ── */
.mega-menu-wrapper > .container {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: 0;
	width: 100%;
	max-width: 100%;
	padding: 0;
}

/* Each column — equal width shares of the container */
.mega-menu-inner-wrapper {
	flex: 1;
	min-width: 0;
	padding: 0 16px;
	border-right: 1px solid var(--color-border);
}
.mega-menu-inner-wrapper:first-child { padding-left: 0; }
.mega-menu-inner-wrapper:last-child  { border-right: none; padding-right: 0; }

/* Strip any extra spacing from auto-formatted content inside mega menu */
.mega-menu-inner-wrapper p,
.mega-menu-inner-wrapper ul,
.mega-menu-inner-wrapper ol { margin: 0; padding: 0; }
.mega-menu-inner-wrapper li { list-style: none; margin: 0; padding: 0; }
.mega-menu-wrapper br { display: none; }
/* Hide empty image slots in mega menu (unset ACF images on dev) */
.mega-menu-inner-wrapper > div:empty,
.mega-menu-inner-wrapper > p:empty { display: none !important; }
.mega-menu-wrapper img[src=""],
.mega-menu-wrapper img:not([src]),
.mega-menu-wrapper img[src="false"],
.mega-menu-wrapper img[src="undefined"] { display: none !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; }

/* Column heading */
.mega-menu-main-heading {
	appearance: none;
	width: 100%;
	background: transparent;
	border: 0;
	border-radius: var(--radius-sm);
	cursor: default;
	text-align: left;
	font-family: var(--font-family);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--color-electric);
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1.5px solid var(--color-primary-subtle);
}
.mega-menu-main-heading span { display: block; }

/* Links — tight vertical spacing */
.mega-menu-inner-links,
a.mega-menu-inner-links {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-family);
	font-size: 0.8375rem;
	color: var(--color-text-body) !important;
	padding: 5px 8px;
	border-radius: 7px;
	transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
	text-decoration: none;
	font-weight: 500;
	line-height: 1.35;
	margin-bottom: 1px;
}
.mega-menu-inner-links::before {
	content: '';
	width: 4px; height: 4px;
	min-width: 4px;
	background: var(--color-electric);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.15s ease;
	flex-shrink: 0;
}
.mega-menu-inner-links:hover::before { opacity: 1; }
.mega-menu-inner-links:hover,
a.mega-menu-inner-links:hover {
	background: var(--color-primary-subtle);
	color: var(--color-electric) !important;
	padding-left: 12px;
}

/* ── STANDARD BOOTSTRAP DROPDOWNS (Company, Industries)
      Styled to match the mega menu: same font, white panel, electric accent ── */
.navbar-nav .nav-item.dropdown { position: relative; }

.navbar-nav .dropdown-menu {
	position: absolute;
	top: calc(100% + 2px);
	left: 50%;
	min-width: 220px;
	background: var(--color-bg);
	border: none;
	border-top: 3px solid var(--color-electric);
	border-radius: 0 0 16px 16px;
	box-shadow: var(--shadow-lg);
	padding: 10px 8px 12px;
	z-index: 1051;
	/* Override Bootstrap display:none with block + visibility approach */
	display: block !important;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(-10px) scale(0.96);
	transform-origin: top center;
	transition: opacity 0.24s ease,
	            transform 0.24s cubic-bezier(0.34, 1.28, 0.64, 1),
	            visibility 0s linear 0.24s;
}
/* Shown via CSS hover or JS .dd-hover class — desktop only */
.navbar-nav .nav-item.dropdown:hover > .dropdown-menu,
.navbar-nav .nav-item.dropdown.dd-hover > .dropdown-menu,
.navbar-nav .dropdown-menu.show {
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	transform: translateX(-50%) translateY(0) scale(1) !important;
	transition: opacity 0.22s ease,
	            transform 0.22s cubic-bezier(0.34, 1.28, 0.64, 1),
	            visibility 0s linear 0s !important;
}
/* :focus-within only on true hover devices (not mobile touch) */
@media (hover: hover) and (pointer: fine) {
	.navbar-nav .nav-item.dropdown:focus-within > .dropdown-menu {
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		transform: translateX(-50%) translateY(0) scale(1) !important;
	}
}

.navbar-nav .dropdown-item {
	font-family: var(--font-family);
	font-size: 0.8375rem;
	font-weight: 500;
	color: var(--color-text-body) !important;
	border-radius: 8px;
	padding: 7px 12px;
	transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: normal;
	line-height: 1.35;
	margin-bottom: 1px;
}
.navbar-nav .dropdown-item::before {
	content: '';
	width: 4px; height: 4px;
	min-width: 4px;
	background: var(--color-electric);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.15s ease;
	flex-shrink: 0;
}
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
	background: var(--color-primary-subtle) !important;
	color: var(--color-electric) !important;
	padding-left: 16px;
}
.navbar-nav .dropdown-item:hover::before { opacity: 1; }

/* ── MOBILE MEGA MENU & DROPDOWNS ─────────────────────────────── */
/* Strategy: use max-height CSS transition — avoids display:none !important conflicts.
   JS toggles .active (mega) / .dd-open (dropdown) classes only. No slideDown/Up. */
@media (max-width: 991px) {
	.header-menu-main .navbar-nav {
		align-items: stretch;
		gap: 0;
	}

	/* ── Mega menu wrapper ── */
	.mega-menu-wrapper {
		position: static !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
		max-height: 0;                   /* inline style overrides — no !important needed */
		overflow: hidden !important;
		transition: max-height 0.42s cubic-bezier(0.4,0,0.2,1) !important;
		box-shadow: none !important;
		border: none !important;
		border-left: 3px solid var(--color-primary-light) !important;
		border-radius: 0 0 12px 0 !important;
		margin: 0 0 4px 14px !important;
		padding: 0 !important;
		background: var(--color-primary-subtle) !important;
	}
	.mega-menu-wrapper > .container {
		flex-direction: column !important;
		padding: 8px 0 4px !important;
		max-width: 100% !important;
	}
	.mega-menu-inner-wrapper {
		border-right: none !important;
		border-bottom: 1px solid var(--color-border) !important;
		padding: 8px 14px 10px !important;
		min-width: 0 !important;
	}
	.mega-menu-inner-wrapper:last-child { border-bottom: none !important; }
	/* ── Column heading: clickable accordion toggle ── */
	.mega-menu-main-heading {
		cursor: pointer !important;
		user-select: none !important;
		margin-bottom: 0 !important;
		padding: 6px 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
	.mega-menu-main-heading span {
		font-size: 0.68rem !important;
		font-weight: 800 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.1em !important;
		color: var(--color-electric) !important;
		border-bottom: none !important;
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
		width: 100% !important;
	}
	.mega-menu-main-heading span::after {
		content: '' !important;
		display: inline-block !important;
		width: 6px !important;
		height: 6px !important;
		border-right: 2px solid currentColor !important;
		border-bottom: 2px solid currentColor !important;
		transform: rotate(45deg) translateY(-2px) !important;
		margin-left: auto !important;
		flex-shrink: 0 !important;
		transition: transform 0.22s ease !important;
		opacity: 0.7 !important;
	}
	.mega-menu-inner-wrapper.col-open .mega-menu-main-heading span::after {
		transform: rotate(-135deg) translateY(1px) !important;
	}

	/* ── Column links: hidden by default, JS sets actual height on open ── */
	.mm-links-wrap {
		max-height: 0;
		overflow: hidden !important;
		transition: max-height 0.34s cubic-bezier(0.4,0,0.2,1) !important;
	}

	/* ── Stagger-in links when a column is opened ── */
	@keyframes gmdLinkIn {
		from { opacity: 0; transform: translateX(-8px); }
		to   { opacity: 1; transform: translateX(0); }
	}
	.mega-menu-inner-wrapper.col-open .mm-links-wrap a {
		animation: gmdLinkIn 0.22s ease forwards;
		opacity: 0;
	}
	.mega-menu-inner-wrapper.col-open .mm-links-wrap a:nth-child(1)  { animation-delay: 0.06s; }
	.mega-menu-inner-wrapper.col-open .mm-links-wrap a:nth-child(2)  { animation-delay: 0.10s; }
	.mega-menu-inner-wrapper.col-open .mm-links-wrap a:nth-child(3)  { animation-delay: 0.14s; }
	.mega-menu-inner-wrapper.col-open .mm-links-wrap a:nth-child(4)  { animation-delay: 0.18s; }
	.mega-menu-inner-wrapper.col-open .mm-links-wrap a:nth-child(5)  { animation-delay: 0.22s; }
	.mega-menu-inner-wrapper.col-open .mm-links-wrap a:nth-child(6)  { animation-delay: 0.26s; }
	.mega-menu-inner-wrapper.col-open .mm-links-wrap a:nth-child(7)  { animation-delay: 0.30s; }
	.mega-menu-inner-wrapper.col-open .mm-links-wrap a:nth-child(8)  { animation-delay: 0.34s; }
	.mega-menu-inner-wrapper.col-open .mm-links-wrap a:nth-child(9)  { animation-delay: 0.38s; }
	.mega-menu-inner-wrapper.col-open .mm-links-wrap a:nth-child(10) { animation-delay: 0.42s; }

	/* ── Mega menu links ── */
	.mega-menu-inner-wrapper a.mega-menu-inner-links {
		display: flex !important;
		font-size: 0.875rem !important;
		font-weight: 500 !important;
		padding: 7px 8px !important;
		margin: 1px 0 !important;
		color: var(--color-text-body) !important;
		background: none !important;
		border-radius: 6px !important;
		line-height: 1.4 !important;
	}
	.mega-menu-inner-wrapper a.mega-menu-inner-links:hover,
	.mega-menu-inner-wrapper a.mega-menu-inner-links:active {
		background: var(--color-bg) !important;
		color: var(--color-electric) !important;
	}

	/* ── Standard dropdown menu ── */
	/* High-specificity kill-switch — overrides ANY desktop :hover/:focus-within rule */
	.navbar-nav .nav-item.dropdown:hover > .dropdown-menu,
	.navbar-nav .nav-item.dropdown:focus-within > .dropdown-menu,
	.navbar-nav .nav-item.dropdown.dd-hover > .dropdown-menu,
	.navbar-nav .dropdown-menu,
	.navbar-nav .dropdown-menu.show {
		position: static !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		left: auto !important;
		pointer-events: auto !important;
		max-height: 0;                   /* no !important — inline style always overrides CSS */
		overflow: hidden !important;
		transition: max-height 0.36s cubic-bezier(0.4,0,0.2,1) !important;
		box-shadow: none !important;
		border: none !important;
		border-left: 3px solid var(--color-primary-light) !important;
		border-radius: 0 0 12px 0 !important;
		margin: 0 0 4px 14px !important;
		padding: 0 !important;
		background: var(--color-primary-subtle) !important;
	}
	/* JS sets actual scrollHeight on .dd-open — no CSS max-height open rule needed */
	.navbar-nav .dropdown-item {
		padding: 9px 14px !important;
		font-size: 0.875rem !important;
		font-weight: 500 !important;
		color: var(--color-text-body) !important;
		border-radius: 6px !important;
		margin: 2px 4px !important;
		display: block !important;
	}
	.navbar-nav .dropdown-item:hover,
	.navbar-nav .dropdown-item:active {
		background: var(--color-bg) !important;
		color: var(--color-electric) !important;
	}

	/* ── Chevron on expandable top-level links ── */
	.mega-menu-nav-item.active > .nav-link .nav-chevron,
	.navbar-nav .nav-item.dropdown.dd-open > .nav-link .nav-chevron {
		transform: rotate(-135deg) translateY(-1px);
	}

	/* Active nav-link highlight */
	.mega-menu-nav-item.active > a.nav-link,
	.nav-item.dropdown.dd-open > a.nav-link {
		color: var(--color-electric) !important;
		background: var(--color-primary-subtle) !important;
		border-radius: 8px !important;
	}

	/* Smooth Bootstrap collapse animation */
	.navbar-collapse.collapsing {
		transition-duration: 0.32s !important;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
	}
}

/* ── Mobile nav overlay (dims page content behind open nav) ── */
.gmd-nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(7, 6, 26, 0.42);
	z-index: 1029; /* below sticky header (1030), above all page content */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	/* will-change applied via JS only during transition — avoids permanent GPU layer */
}
.gmd-nav-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

/* ── Respect user motion preferences ── */
@media (prefers-reduced-motion: reduce) {
	.mega-menu-wrapper,
	.mm-links-wrap,
	.navbar-nav .dropdown-menu { transition: none !important; }
	.gmd-nav-overlay { transition: none !important; }
	/* Disable stagger animation — show links instantly */
	.mega-menu-inner-wrapper.col-open .mm-links-wrap a {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	/* Keep desktop transitions short rather than removed */
	.mega-menu-wrapper,
	.navbar-nav .dropdown-menu {
		transition: opacity 0.01s, visibility 0s !important;
	}
}

/* ============================================================
   26. BLOG LIST PAGE
   ============================================================ */

.homepage-mainblog { padding: 64px 0; background: #ffffff; }
.main-blog img { width: 100%; border-radius: var(--radius-md); box-shadow: 0 10px 32px rgba(42,40,93,0.1); }
.blog-detail {
	background: #ffffff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 32px;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.blog-detail .blog-detail-date { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #6a7a7e; margin-bottom: 12px; }
.blog-detail h2 a, .blog-detail h2 a.nobefore {
	color: var(--color-text-heading);
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	font-weight: 800;
	line-height: 1.3;
	transition: color 0.2s;
	text-decoration: none;
}
.blog-detail h2 a:hover { color: var(--color-electric); }

/* ============================================================
   27. SINGLE BLOG POST
   ============================================================ */

/* Table of Contents System (M4, 2026-07-06): .StickySidebar already had
   position:sticky + scrollbar styling, but .singlebolg-main (its parent)
   had no display:flex at all, so the TOC and the article content simply
   stacked as two full-width blocks — the TOC rendered above the article,
   not beside it, which is what made the sticky positioning invisible in
   practice (nothing to stay pinned beside once scrolled past). Below adds
   the actual two-column layout the sticky behavior needs, plus the
   typography/spacing the list itself never had. */
.singlebolg-main { padding: 56px 0 96px; background: #ffffff; max-width: var(--container-xxl); margin-left: auto; margin-right: auto; }
@media (min-width: 992px) {
	.singlebolg-main { display: flex; gap: var(--space-10); align-items: flex-start; }
	.singlebolg-main .leftsideTOC { flex: 0 0 280px; }
	.singlebolg-main .singlebolg-text { flex: 1; min-width: 0; }
}
.StickySidebar {
	position: sticky;
	top: 90px;
	max-height: calc(100vh - 110px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color-border) transparent;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	/* No top padding — .detail_blog_header supplies its own, matching
	   production's compact rhythm (Enterprise Blog Experience
	   Refinement V1). The card's own height is driven by content
	   (max-height + overflow only), so a short TOC never stretches
	   taller than it needs to. */
	padding: 0 var(--space-5) var(--space-5);
}
.StickySidebar::-webkit-scrollbar { width: 4px; }
.StickySidebar::-webkit-scrollbar-track { background: transparent; }
.StickySidebar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
.detail_blog_header {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-heading);
	margin-bottom: var(--space-2);
	padding: var(--space-4) 0 var(--space-2);
}
.blogSidebarInfo, .sub_content_ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.blogSidebarInfo + .blogSidebarInfo { margin-top: var(--space-1); }
.sub_content_ul { padding-left: var(--space-4); margin-top: 0; }
.scroll_ids {
	display: block;
	padding: 3px 0;
	font-size: var(--text-sm);
	line-height: 1.4;
	color: var(--color-text-body);
	text-decoration: none;
	transition: color 0.2s ease;
	cursor: pointer;
}
.scroll_ids:hover { color: var(--color-primary); }
.scroll_ids.is-active { color: var(--color-primary) !important; font-weight: var(--font-weight-semibold); }
@media (max-width: 991.98px) {
	.leftsideTOC { margin-bottom: var(--space-8); }
	.StickySidebar { position: static; max-height: none; }
}

/* ============================================================
   Blog Reading Experience V1 (2026-07-06), refined in Enterprise Blog
   Experience Refinement V1 (2026-07-06).
   Matches the erppeers.com production blog reading experience:
   diagonal-pattern banner, nested-bullet TOC, left-aligned (not
   centered) article column, and a premium Previous/Next nav.
   Markup for all of these already existed in single.php/CPT data —
   this is a CSS-only pass plus one already-existing theme asset
   (assets/images/BlogsingleBanner.png) that was never referenced
   anywhere; `.singlebolg-banner` and its children had zero CSS at
   all before this (the same "zero CSS anywhere" defect class found
   and fixed repeatedly elsewhere in this project).

   Refinement pass measured production's actual computed styles
   directly (getComputedStyle on https://erppeers.com/netsuite-
   implementation-guide/) rather than guessing from a screenshot:
   the banner has NO solid background-color at all — the dark visual
   comes entirely from BlogsingleBanner.png (confirmed 1400×430px,
   `background-size: auto`, top-left, no-repeat) inside a 1400px-max
   container, which is exactly why production's banner reads as an
   inset "card" with white space around it rather than a full-bleed
   block. The V1 pass had added a solid dark background-color and
   `background-size: contain`, which is what made dev's version look
   like a flat, full-bleed template block instead. */

/* --- Banner --- */
.singlebolg-banner {
	overflow: hidden;
	padding-top: 50px;
}
.singlebolg-banner .container { max-width: 1400px; }
.singlebolg-banner-main {
	background-image: url('../images/BlogsingleBanner.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: auto;
}
.singlebolg-banner .blog_custom_title {
	color: var(--color-text-inverse);
	max-width: 600px;
	font-size: var(--text-4xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	text-align: left;
	margin: 140px var(--space-10) var(--space-6) 0;
}
.blog_header_left { padding-bottom: var(--space-10); }
.blogouter { display: flex; align-items: center; gap: var(--space-4); }
/* Plain white text directly on the banner, matching production —
   no card chrome here; the light card wrapper the V1 pass added
   worked against the calm, restrained look production actually has. */
.blog_header_left .blog-author { background: none; border: none; padding: 0; margin: 0; }
.blog_header_left .blog-author a { gap: var(--space-2); }
.blog_header_left .blog-author a .author-img { width: 36px; height: 36px; }
.blog_header_left .blog-author .author-name,
.blog_header_left .blog-author a { color: var(--color-text-inverse); }
.blog_header_left .post-date { color: var(--color-text-inverse); opacity: 0.85; font-size: var(--text-sm); }
.blog_header_right { display: flex; align-items: flex-start; }
.blog-top-image { width: 100%; }
.blog-top-image img {
	width: 100%;
	height: auto;
	max-height: 400px;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}
@media (max-width: 767.98px) {
	/* Below the two-column breakpoint the 1400px-wide background image
	   no longer lines up with a stacked layout (this is true of
	   production too), so mobile gets a solid fallback fill instead of
	   a mostly-empty corner of pattern — a deliberate, small improvement
	   over production's own narrow-viewport edge case, not a redesign.
	   NOTE: the fallback color paints *behind* the PNG, not instead of
	   it — BlogsingleBanner.png itself is opaque, with a solid white
	   band across its own top ~70px (verified against the source
	   asset). The title's margin-top below is deliberately sized
	   (80px, not a spacing token) to clear that fixed, asset-native
	   white band — a smaller value here silently produces white-on-
	   white title text, a real contrast bug caught during mobile
	   verification, not a cosmetic tweak. */
	.singlebolg-banner-main { background-color: var(--color-text-heading); }
	.singlebolg-banner .blog_custom_title { margin: 80px 0 var(--space-6); font-size: var(--text-2xl); }
	.blog-top-image img { margin-top: var(--space-6); margin-bottom: var(--space-6); }
}

/* --- Article column: left-aligned, not centered/floating.
   .erpp-rcs__body's own rule (design-system.css) centers itself via
   max-width + auto margins — correct for its other, full-width-container
   usages, but fights the two-column TOC layout here, where the article
   should start flush at the left edge next to the sticky TOC. Scoped
   override, not a change to the shared component. --- */
.singlebolg-text .erpp-rcs__body {
	max-width: 100% !important;
	margin-left: 0;
	margin-right: 0;
}

/* --- Nested TOC bullets, matching the reference nested-heading style
   (top-level: filled indigo marker; nested sub-entries: lighter, indented,
   no marker of their own — matches the production reading experience's
   "Workato vs Celigo"-style nested TOC exactly). --- */
.blogSidebarInfo { position: relative; }
.blogSidebarInfo > li { position: relative; padding-left: var(--space-5); }
.blogSidebarInfo > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 10px;
	height: 10px;
	background-color: var(--color-primary);
	border-radius: 60px;
	border-bottom-right-radius: 0;
}
.sub_content_ul .scroll_ids { font-weight: var(--font-weight-regular); color: var(--color-text-muted); }

/* --- Suppress a hand-pasted duplicate TOC baked directly into some
   posts' own WYSIWYG content (ARCHITECTURE_BACKLOG.md #52) — confirmed
   live: the real TOC is always a sibling of .singlebolg-text, never a
   descendant of the article body, so any .leftsideTOC found *inside*
   the content is the redundant hand-pasted copy. CSS-only: the stored
   post content is never modified, only its visibility for this one
   specific redundant block. --- */
.single-contet .leftsideTOC,
.erpp-rcs__body .leftsideTOC {
	display: none !important;
}

/* --- Previous/Next navigation (upgraded from bare, unstyled arrow
   icons — this exact markup previously had zero CSS anywhere). --- */
.blog-nav-single {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: var(--space-6);
	margin-top: var(--space-12);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}
.blog-nav-single__spacer { flex: 1; }
.blog-nav-single__link {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.blog-nav-single__link:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.blog-nav-single__link--next { justify-content: flex-end; text-align: right; }
.blog-nav-single__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-primary-subtle);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: background 0.2s ease;
}
/* Pure-CSS chevron (same border-based technique already used for
   .nav-chevron elsewhere in this theme) rather than a FontAwesome icon —
   confirmed FontAwesome is not enqueued on this template at all, so the
   original <i class="fa fa-arrow-*"> markup never rendered anything. */
.blog-nav-single__icon::before {
	content: '';
	width: 8px;
	height: 8px;
	border-style: solid;
	border-color: var(--color-primary);
	border-width: 0 2px 2px 0;
	transition: border-color 0.2s ease;
}
.blog-nav-single__icon--prev::before { transform: rotate(135deg); margin-left: 3px; }
.blog-nav-single__icon--next::before { transform: rotate(-45deg); margin-right: 3px; }
.blog-nav-single__link:hover .blog-nav-single__icon { background: var(--color-primary); }
.blog-nav-single__link:hover .blog-nav-single__icon::before { border-color: var(--color-text-inverse); }
.blog-nav-single__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.blog-nav-single__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.blog-nav-single__title {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-heading);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (max-width: 575.98px) {
	.blog-nav-single { flex-direction: column; }
	.blog-nav-single__link--next { justify-content: flex-start; text-align: left; }
}

/* .entry-content typography rules removed (Design System Phase 2 —
   Milestone 2): single.php has never used an .entry-content wrapper
   (it uses .single-contet), so these rules never matched anything —
   confirmed dead. Typography for the post body is now provided by the
   Rich Content Foundation (.erpp-rcs__body, assets/css/design-system.css)
   applied directly to .single-contet. */
.blog-author { background: var(--color-section-alt); border-radius: 14px; border: 1px solid var(--color-border); padding: 24px; margin-top: 40px; }
.blog-author a { display: flex; align-items: center; gap: 14px; color: var(--color-text-body); text-decoration: none; transition: color 0.2s; }
.blog-author a:hover { color: var(--color-electric); }
.blog-author a .author-img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.singlebolg-main .social-links__link { width: 34px; height: 34px; background: var(--color-section-alt); border: 1px solid var(--color-border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: all 0.25s ease; position: relative; }
.singlebolg-main .social-links__link:hover { background: var(--color-electric); border-color: var(--color-electric); }
.singlebolg-main .social-links__icon svg { fill: #6a7a7e; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: 13px; }
.singlebolg-main .social-links__link:hover svg { fill: #ffffff; }

/* ============================================================
   28. OWL CAROUSEL
   ============================================================ */

.owl-dots { margin-top: 28px; text-align: center; }
.owl-dot span { width: 8px; height: 8px; background: rgba(255,255,255,0.15) !important; border-radius: 50%; display: block; transition: all 0.2s; }
.owl-dot.active span { background: var(--color-electric) !important; width: 24px; border-radius: 4px; }

.owl-theme .owl-nav { margin-top: 28px; text-align: center; }
.owl-theme .owl-nav button.owl-prev,
.owl-theme .owl-nav button.owl-next {
	width: 46px !important; height: 46px !important;
	background: rgba(255,255,255,0.08) !important;
	border: 1.5px solid rgba(255,255,255,0.15) !important;
	border-radius: 50% !important;
	color: #ffffff !important;
	font-size: 20px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.25s ease;
	padding: 0 !important;
	margin: 0 5px !important;
	line-height: 1 !important;
	backdrop-filter: blur(8px);
}
.owl-theme .owl-nav button.owl-prev:hover,
.owl-theme .owl-nav button.owl-next:hover {
	background: var(--color-electric) !important;
	border-color: var(--color-electric) !important;
	box-shadow: 0 4px 20px rgba(108,92,231,0.4);
	transform: scale(1.1);
}
.owl-theme .owl-nav button span { font-size: 26px; display: block; line-height: 0.9; }
.our-clients .owl-theme .owl-nav { display: none; }

/* ============================================================
   29. 404 / MISC
   ============================================================ */

.blog-newsletter { display: none; }
.main-main_404-sec { padding: 96px 24px; text-align: center; position: relative; overflow: hidden; }

/* Thank You + 404 hero — same contrast bug, same fix (Visual Polish
   Sprint 3). Shared by both templates (thank_you_page_template.php,
   404.php). Neither .main-main_404-heading nor .main-main_404-content
   had a color rule at all, so they rendered in the default dark heading
   color against a mid-tone photo background with no separation — on
   Thank You specifically, the confirmation text right after a prospect
   converts was nearly unreadable. Same scrim technique already proven
   on .seo-banner/.contact-banner, plus explicit white text (this
   section has no .banner-text gradient-clip heading to inherit from). */
.main-main_404-sec::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15,14,42,0.78) 0%, rgba(15,14,42,0.6) 100%);
	z-index: 1;
	pointer-events: none;
}
.main-main_404-container { position: relative; z-index: 2; }
.main-main_404-heading { color: #ffffff; }
.main-main_404-content { color: rgba(255,255,255,0.75); }
/* Design System Phase 2 — Milestone 3: this section now also carries the
   shared .erpp-hero class (blocks/blocks.css) for Hero-system semantic
   consistency. .erpp-hero sets padding:0, which would otherwise collapse
   this page's existing padding via a same-specificity cascade conflict —
   this compound-selector override (higher specificity, order-independent)
   preserves the exact original value. */
.main-main_404-sec.erpp-hero { padding: 96px 24px; }
.main-main_404-link {
	display: inline-flex;
	align-items: center;
	background: linear-gradient(135deg, var(--color-electric) 0%, var(--color-primary) 100%);
	color: #ffffff;
	font-family: var(--font-family);
	font-size: 1rem;
	font-weight: 700;
	padding: 14px 34px;
	border-radius: 50px;
	transition: all 0.25s ease;
	margin-top: 24px;
}
.main-main_404-link:hover { box-shadow: 0 6px 20px rgba(108,92,231,0.4); transform: translateY(-2px); color: #ffffff; }
.title .erpp-blog-card-title a { color: rgba(255,255,255,0.9); transition: color 0.2s; }
.title .erpp-blog-card-title a:hover { color: #c8c4ff; }

/* ============================================================
   30. RESPONSIVE
   ============================================================ */

/* ── Tablet (< 992px) ── */
@media (max-width: 991.98px) {
	/* Bento grid stays 2×2 on tablet — all cards equal size */

	/* Layout resets */
	.homepage-new-secondsec-content { padding-left: 0; margin-top: 40px; }
	.homepage-thiredsection-text { padding-right: 0; margin-bottom: 44px; }
	.chooseus-text { padding-left: 0; margin-top: 36px; }
	.contactus-leftside { padding-right: 0; margin-bottom: 36px; }
	.service-secondsection-text { padding-left: 0; margin-top: 36px; }

	/* Stats: vertical divider → horizontal */
	.homepage-project .col-md-3:not(:last-child) .hompage-project-detail-text::before {
		box-shadow: none;
	}

	/* CTA strip */
	.homepage-cta-rightside { align-items: flex-start; margin-top: 28px; }
	.homepage-cta-rightside p { text-align: left; }

	/* Contact form */
	.home-contact-frm { margin-top: 44px; padding: 36px; }

	/* Nav */
	.navbar-socialicon { display: none; }
	.banner-text { padding-right: 0; }

	div#navbarNavDropdown {
		background: var(--color-bg);
		border-radius: 18px;
		box-shadow: var(--shadow-lg);
		margin: 8px 0 4px;
		padding: 12px 16px 20px;
		border: 1px solid var(--color-primary-subtle);
		border-top: 3px solid var(--color-electric);
		overflow-y: auto;
		overflow-x: hidden;
		max-height: calc(100vh - 80px);
		scrollbar-width: thin;
		scrollbar-color: var(--color-primary-light) transparent;
	}
	div#navbarNavDropdown::-webkit-scrollbar { width: 3px; }
	div#navbarNavDropdown::-webkit-scrollbar-track { background: transparent; }
	div#navbarNavDropdown::-webkit-scrollbar-thumb { background: var(--color-primary-light); border-radius: 2px; }
	.navbar-nav .nav-item a.nav-link {
		padding: 10px 14px;
		border-bottom: 1px solid #f0f0f0;
		border-radius: 0;
		background: none;
		color: var(--color-text-body) !important;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		margin: 0;
	}
	/* Nav carets handled entirely by mobile-mega-menu block above */
	.navbar-nav .dropdown-toggle::after { display: none !important; }

	/* Timeline — hide connector on tablet */
	.steps .row::before { display: none; }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767.98px) {
	/* Banner */
	.home-slider-inner.item { min-height: 520px; }
	.banner-text h1, .banner-text h2 { font-size: clamp(1.75rem, 7.5vw, 2.5rem); }
	.hp-main-banner-mobile { display: block; }
	.mobile-hide { display: none !important; }

	/* Bento → 1 col */
	.homepage-service .row {
		grid-template-columns: 1fr !important;
	}
	.homepage-service .row > [class*="col-"]:first-child {
		grid-column: span 1;
	}

	/* Section padding */
	.homepage-new-secondsec, .homepage-service, .homepage-step-section,
	.homepage-fourthsection, .homepage-blogsection, .service-secondsection,
	.services-fifthsection, .service-last-section, .service-faq-section,
	.services-modules, .homepage-project, .homepage-cta, .our-clients,
	.customer-reviews-section, .homepage-thiredsection,
	.homepage-contactsection { padding: 64px 0; }

	/* Ghost numbers — smaller */
	.homepage-new-secondsec::before,
	.homepage-thiredsection::before,
	.homepage-fourthsection::before { font-size: 160px; }

	/* Image frames — remove offset on small */
	.chooseus-img { padding: 0; }
	.chooseus-img::before, .chooseus-img::after { display: none; }
	.chooseus-img img { animation: none; }

	/* Process steps — 2 col grid */
	.homepage-step-section .row .col-lg-3 { flex: 0 0 50%; max-width: 50%; }

	/* Stats — 2x2 grid */
	.homepage-project .col-md-3 { flex: 0 0 50%; max-width: 50%; }
	.hompage-project-detail-text { padding: 24px 12px; }

	/* Contact */
	.contactus-leftside { padding-right: 0; margin-bottom: 0; }
	.home-contact-frm { margin-top: 36px; padding: 28px 24px; border-radius: 18px; }
	.home-contact-frm::before { left: 24px; right: 24px; }
	.contactus-rightside-title h3 { font-size: 1.125rem; }

	/* Blog */
	.blog { margin-bottom: 20px; }
	.homepage-blogsection-title { margin-bottom: 40px; }

	/* Cards */
	.service-part { margin-bottom: 0; }
	.step_main_parent { margin-bottom: 16px; }

	/* Copyright */
	.copyright-section .ft-bottom-outer { flex-wrap: wrap; justify-content: center; gap: 10px; }
	.copyright-section .ft-bottom-outer .ft-bottom-inner { width: 100%; text-align: center !important; }

	/* Carousel nav — hide on mobile, use swipe */
	.customer-reviews-section .owl-theme .owl-nav { display: none; }
}

/* ── Small mobile (< 480px) ── */
@media (max-width: 479px) {
	nav.navbar { height: auto; min-height: 60px; padding: 8px 0; }
	nav.navbar .container { padding: 0 12px; }

	.banner-btn { flex-direction: column; align-items: flex-start; }
	.with-background, .without-background { width: 100%; text-align: center; justify-content: center; }

	header .navbar .navbar-nav .nav-link { font-size: 14px; }
	.mega-menu-inner-wrapper.mega-menu-item-4 { padding: 10px 0; }

	/* Stats → 1 col */
	.homepage-project .col-md-3 { flex: 0 0 100%; max-width: 100%; }

	/* Steps → 1 col */
	.homepage-step-section .row .col-lg-3 { flex: 0 0 100%; max-width: 100%; }

	.home-contact-frm { padding: 22px 18px; border-radius: 16px; }
	footer.footer-container { padding: 44px 0 32px !important; }

	/* Case studies carousel → 1 col on mobile */
	.case-studies-carousel .owl-nav { display: none; }
}

/* ============================================================
   CASE STUDIES / BLOG CAROUSEL
   ============================================================ */
.homepage-blogsection {
	padding: 72px 0 80px;
}
.homepage-blogsection .case-studies-carousel {
	padding-bottom: 8px;
}
.homepage-blogsection .blog-carousel-item {
	padding: 0 10px;
}
.homepage-blogsection .blog {
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(42,40,93,0.08);
	transition: box-shadow 0.22s ease, transform 0.22s ease;
	height: 100%;
}
.homepage-blogsection .blog:hover {
	box-shadow: 0 8px 32px rgba(108,92,231,0.18);
	transform: translateY(-4px);
}
.homepage-blogsection .list-post-thumbnail-wrapper {
	overflow: hidden;
	border-radius: 18px 18px 0 0;
}
.homepage-blogsection .list-post-thumbnail-img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	transition: transform 0.32s ease;
}
.homepage-blogsection .blog:hover .list-post-thumbnail-img {
	transform: scale(1.04);
}
.homepage-blogsection .data {
	padding: 20px 20px 16px;
}
/* OWL nav arrows for case-studies carousel */
.homepage-blogsection .case-studies-carousel .owl-nav {
	margin-top: 24px;
	display: flex;
	justify-content: center;
	gap: 12px;
}
.homepage-blogsection .case-studies-carousel .owl-nav button {
	width: 40px;
	height: 40px;
	border-radius: 50% !important;
	background: rgba(108,92,231,0.12) !important;
	border: 1px solid rgba(108,92,231,0.25) !important;
	color: var(--color-electric) !important;
	font-size: 18px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}
.homepage-blogsection .case-studies-carousel .owl-nav button:hover {
	background: var(--color-electric) !important;
	color: #fff !important;
}

/* ============================================================
   KEY SOLUTIONS — compact horizontal card redesign
   ============================================================ */
.homepage-service {
	padding: 64px 0 72px;
	background: var(--color-dark);
	position: relative;
}
.homepage-service .homepage-contactsection-title {
	margin-bottom: 40px;
}
.homepage-service .homepage-contactsection-title h2 {
	color: #fff;
}
.homepage-service .homepage-contactsection-title p {
	color: rgba(255,255,255,0.65);
}
.homepage-service .row {
	gap: 0;
}
.homepage-service .col-xl-6,
.homepage-service .col-md-6 {
	padding: 10px;
}
.homepage-service .service-part {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(108,92,231,0.22);
	border-left: 3px solid transparent;
	border-radius: 16px;
	height: 100%;
	padding: 0;
	transition: border-color 0.25s ease, transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
	overflow: hidden;
}
.homepage-service .service-part:hover {
	border-color: rgba(108,92,231,0.55);
	border-left-color: var(--color-electric);
	background: rgba(108,92,231,0.08);
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(108,92,231,0.18);
}
.homepage-service .service-card-ipaas .service-part:hover {
	border-left-color: var(--color-teal);
	border-color: rgba(0,203,169,0.55);
	background: rgba(0,203,169,0.06);
	box-shadow: 0 10px 30px rgba(0,203,169,0.15);
}
.homepage-service .hp-service-section-link-wrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start;
	gap: 18px;
	padding: 24px 22px !important;
	text-decoration: none !important;
	color: inherit;
	width: 100%;
	height: 100%;
}
img.svc-icon {
	width: 52px !important;
	height: 52px !important;
	min-width: 52px;
	max-width: 52px;
	object-fit: contain;
	background: rgba(108,92,231,0.12);
	border-radius: 12px;
	padding: 10px;
	margin: 0 !important;
	display: block;
	flex-shrink: 0;
	filter: none !important;
}
.service-card-ipaas img.svc-icon {
	background: rgba(108,92,231,0.12);
}
.svc-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.svc-content h3 {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: #fff !important;
	margin-bottom: 8px !important;
	margin-top: 0 !important;
	line-height: 1.35 !important;
}
.svc-content p {
	font-size: 0.875rem !important;
	color: rgba(255,255,255,0.62) !important;
	line-height: 1.65 !important;
	margin-bottom: 8px !important;
	flex: 1;
}
.svc-arrow {
	display: inline-flex;
	align-items: center;
	color: var(--color-electric);
	transition: transform 0.2s ease;
}
.service-card-ipaas .svc-arrow {
	color: var(--color-electric);
}
.homepage-service .service-part:hover .svc-arrow {
	transform: translateX(4px);
}

/* ============================================================
   STATS SECTION — animated counters, light background
   ============================================================ */
.homepage-project {
	background: var(--color-dark);
	padding: 72px 0;
	position: relative;
}
.homepage-how-help-grow-title h2 {
	color: #fff;
}
.homepage-how-help-grow-title p {
	color: rgba(255,255,255,0.65);
}
.hompage-project-detail-text {
	text-align: center;
	padding: 24px 16px;
	position: relative;
}
.hompage-project-detail-text::after {
	content: '';
	position: absolute;
	right: 0;
	top: 20%;
	height: 60%;
	width: 1px;
	background: rgba(108,92,231,0.35);
}
.homepage-project .col-md-3:last-child .hompage-project-detail-text::after {
	display: none;
}
.hompage-project-detail-text h2 {
	font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
	font-weight: 900 !important;
	background: linear-gradient(135deg, var(--color-electric) 0%, var(--color-teal) 100%);
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	line-height: 1 !important;
	margin-bottom: 10px !important;
	display: block;
}
.hompage-project-detail-text p {
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	color: rgba(255,255,255,0.55) !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0 !important;
}

/* ============================================================
   REVIEWS SECTION — keep dark but improve card contrast
   ============================================================ */
.customer-reviews-section {
	background: linear-gradient(135deg, #1a1040 0%, #07061a 50%, #0b1a35 100%) !important;
}
.customer-reviews-section .carousel_widget__card {
	background: rgba(255,255,255,0.07) !important;
	border: 1px solid rgba(255,255,255,0.13) !important;
	border-top: 3px solid var(--color-electric) !important;
	position: relative !important;
	overflow: visible !important;
}

/* ============================================================
   FEATURED IN — remove logo white backgrounds
   multiply on pure white = logo pixel × 1 = logo colour; white px × 1 = white → transparent
   ============================================================ */
.our-clients {
	background: #ffffff !important;
}
.clients-image_items img {
	mix-blend-mode: multiply !important;
	background: transparent !important;
	-webkit-filter: none;
	filter: none;
}

/* ============================================================
   FOOTER CERTIFICATE — award badge sprite (marquee ticker)
   ============================================================ */
@keyframes translateinfinite {
	to { transform: translateX(calc(-145px * 9)); }
}
.footer-certificate {
	width: 605px !important;
	overflow: hidden !important;
	margin: 15px 0 !important;
	height: 120px !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	filter: none !important;
}
.footer-certificate > span {
	animation: translateinfinite 25s linear infinite !important;
	display: block !important;
	margin: 0 15px !important;
	position: relative !important;
	flex-shrink: 0 !important;
}
.footer-certificate > span::after {
	content: "" !important;
	position: absolute !important;
	right: -17px !important;
	top: 0 !important;
	bottom: 0 !important;
	width: 1px !important;
	height: 50px !important;
	margin: auto !important;
	background-color: rgba(255,255,255,0.15) !important;
}
.footer-certificate > span .card-image,
.footer-certificate .card-image {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 115px !important;
	max-width: 115px !important;
	height: 120px !important;
	background-repeat: no-repeat !important;
	background-size: 906% !important;
	background-image: url('../images/footer-certification-logos.webp') !important;
	margin: 0 auto !important;
}
.footer-logo-good-firms  { background-position: left 11px center !important; }
.footer-logo-clutch      { background-position: left -109px center !important; }
.footer-logo-td          { background-position: left -229px center !important; }
.footer-logo-it-firms    { background-position: left -350px center !important; }
.footer-logo-app-futura  { background-position: right -460px center !important; }
.footer-logo-app-firms   { background-position: right -340px center !important; }
.footer-logo-bit-map     { background-position: right -222px center !important; }

/* ============================================================
   MEGA MENU — desktop positioning note
   nav.navbar > .container has position:relative (set above in media query)
   so left:0/right:0/width:100% on .mega-menu-wrapper = container edges only.
   No further overrides needed here — handled by the base rules above.
   ============================================================ */

/* ============================================================
   CAROUSEL NAV — suppress original erpCarousel nav buttons
   (replaced by pure JS slider in erpp-case-studies.php)
   ============================================================ */
.homepage-blogsection .erp-c__prev,
.homepage-blogsection .erp-c__next,
.homepage-blogsection .cs-nav-row,
.erpp-orig-hidden,
.erpp-rev-rebuilt { display: none !important; }
/* Phase 2.8-L7-P3: .erpp-rev-nav removed from this suppression list — it
   used to be an older, unrelated reviews-carousel nav element being hidden
   here, but the class name is now reused by the real, current reviews
   rotator's dot/arrow controls (blocks/testimonials/render.php), which must
   stay visible. */

/* ============================================================
   CASE STUDIES — homepage section styles
   Phase 2.8-L7-P1: rebuilt as a static full-bleed-photo overlay grid,
   matching the approved design-system reference exactly (was an
   infinite side-by-side-panel slider — see DECISIONS.md DEC-066).
   This is the real, active stylesheet for this component.
   ============================================================ */
.homepage-blogsection { padding: 72px 0 80px !important; background: #fff !important; }
.homepage-blogsection-title, .homepage-project { display: none !important; }
.erpp-cs-header-wrap { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; width: 100%; box-sizing: border-box; }
.erpp-cs-header-left .erpp-eyebrow { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #4f46e5; margin-bottom: 10px; }
.erpp-cs-header-left h2 { font-size: clamp(1.75rem,2.8vw,2.4rem) !important; font-weight: 800 !important; color: #1e1b4b !important; margin: 0 !important; line-height: 1.18 !important; letter-spacing: -.03em !important; }
.erpp-cs-viewall { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 700; color: #4f46e5 !important; text-decoration: none !important; padding: 10px 20px; border: 1.5px solid rgba(79,70,229,.3); border-radius: 8px; flex-shrink: 0; transition: background .2s, border-color .2s; }
.erpp-cs-viewall:hover { color: #3730a3 !important; border-color: rgba(79,70,229,.55); background: rgba(79,70,229,.06); }

/* Phase 2.8-L7-P2: the reference's `.case-grid` base grid rule is overridden
   later in its own stylesheet by an unconditional `display:flex;overflow-x:auto`
   rule — confirmed via computed styles on the live rendered reference, not
   just reading its first CSS rule (that mistake produced the L7-P1 static
   wrap-grid). The real reference behavior is a horizontally-scrolling row of
   equal-width cards at every breakpoint, including desktop; "featured" only
   changes the card's color treatment, not its width. */
.erpp-cs-grid { display: flex; gap: 16px; overflow-x: auto; padding: 2px 2px 13px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #c8c4ff transparent; }
.erpp-cs-card {
	position: relative; display: flex; flex: 0 0 calc((100% - 32px) / 3); min-height: 330px; overflow: hidden;
	border: 1px solid #dedfec; border-radius: 22px; background: #fff;
	text-decoration: none !important; box-shadow: 0 8px 24px rgba(15,14,42,.06);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
	scroll-snap-align: start;
}
.erpp-cs-card:hover { transform: translateY(-4px); border-color: #c8c4ff; box-shadow: 0 18px 48px rgba(15,14,42,.09); }
.erpp-cs-card--featured { background: #0f0e2a; border-color: #0f0e2a; }
.erpp-cs-card--no-image.erpp-cs-card--featured { background: linear-gradient(145deg,#0f0e2a,#232052); }
.erpp-cs-card__image { position: absolute; inset: 0; }
.erpp-cs-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.erpp-cs-card__image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,14,42,.08), rgba(15,14,42,.94)); }
.erpp-cs-card--featured:not(.erpp-cs-card--no-image) .erpp-cs-card__image::after { background: linear-gradient(180deg, rgba(15,14,42,.15), rgba(15,14,42,.9)); }
.erpp-cs-card__content { position: relative; z-index: 1; align-self: flex-end; width: 100%; padding: 26px; color: #fff; }
.erpp-cs-tag { display: inline-flex !important; margin-bottom: 13px !important; color: #c8c4ff !important; font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .09em !important; text-transform: uppercase !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
.erpp-cs-card__title { font-size: 1.05rem !important; font-weight: 800 !important; line-height: 1.35 !important; color: #fff !important; margin: 0 !important; }
.erpp-cs-metrics-wrap { display: flex; gap: 22px; margin-top: 20px; }
.erpp-cs-metric-col { display: flex; flex-direction: column; gap: 2px; }
.erpp-cs-metric-num { display: block !important; color: #fff !important; font-size: 1rem !important; font-weight: 800 !important; line-height: 1 !important; }
.erpp-cs-metric-label { display: block; color: #d6d4e3 !important; font-size: .77rem !important; line-height: 1.4 !important; }

@media (max-width: 1040px) {
  .erpp-cs-card { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 767px) {
  .erpp-cs-header-wrap { flex-direction: column; align-items: flex-start; }
  .erpp-cs-card { flex-basis: 86%; min-height: 315px; }
  .erpp-cs-card__content { padding: 22px; }
}

/* ============================================================
   TYPOGRAPHY SYSTEM
   (moved from erpp-typography.php mu-plugin)
   ============================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body, div, p, span, a, li, ul, ol, td, th, blockquote, cite, small, strong, em, b,
input, textarea, select, label, button,
.footer-contact-inner, .footer-contact-inner a, .footerttl,
.footer-social-section-part, .footer-main-title, .erp-locations p, .erp-locations a,
.copyright-section, .ft-bottom-inner, .footer-container, .footer-container p, .footer-container a,
.homepage-contactsection, .wpcf7, .wpcf7 * { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; }
h1, h2, h3, h4, h5, h6,
.blog-title, .case-studies-carousel h3, .entry-title, .page-title,
.contactus-leftside h3, .contactus-rightside-title h3, .footer-main-title,
.erp-locations .footer-loaction-title, .faq-text-leftside h2, .service-faq-section h2,
.erpp-fi-heading { font-family: 'IBM Plex Sans', sans-serif !important; }
h1 { font-size: clamp(1.85rem,3.8vw,2.8rem) !important; font-weight: 700 !important; line-height: 1.12 !important; letter-spacing: -.028em !important; }
h2 { font-size: clamp(1.75rem,3.5vw,2.5rem) !important; font-weight: 700 !important; line-height: 1.16 !important; letter-spacing: -.025em !important; }
h3 { font-size: clamp(1.125rem,2vw,1.5rem) !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: -.015em !important; }
h4 { font-size: clamp(1rem,1.5vw,1.125rem) !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: -.01em !important; }
h5, h6 { font-size: .9375rem !important; font-weight: 600 !important; line-height: 1.45 !important; }
p { font-size: 1rem !important; font-weight: 400 !important; line-height: 1.72 !important; letter-spacing: -.003em !important; }
.navbar-nav .nav-link, .navbar-nav .nav-item > a, .header-menu-main a { font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 500 !important; font-size: .875rem !important; letter-spacing: .01em !important; }
.navbar-rightside-btn .nav-link { font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 700 !important; font-size: .875rem !important; letter-spacing: .02em !important; }
.mega-menu a, .mega-menu .mega-menu-inner-links, .dropdown-menu a, .dropdown-item { font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 500 !important; font-size: .875rem !important; }
.mega-menu-main-heading, .mega-menu-main-heading span { font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 600 !important; font-size: .8125rem !important; letter-spacing: .03em !important; }
.with-background, .without-background, .btn, [class*="btn-"], .wp-block-button__link, .wpcf7-submit,
input[type="submit"], button[type="submit"] { font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 700 !important; letter-spacing: .02em !important; }
.erpp-fi-eyebrow { font-family: 'IBM Plex Sans', sans-serif !important; font-size: .6875rem !important; font-weight: 700 !important; letter-spacing: .14em !important; line-height: 1 !important; }
.homepage-project .hompage-project-detail-text h3,
.homepage-seventhsection h3 { font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 700 !important; font-size: clamp(2rem,4vw,2.75rem) !important; line-height: 1.05 !important; letter-spacing: -.03em !important; }
.homepage-project .hompage-project-detail-text p,
.homepage-seventhsection p { font-size: .75rem !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; line-height: 1.4 !important; }
.customer-reviews-section p, .owl-carousel-reviews p { font-style: italic !important; font-size: .9375rem !important; font-weight: 400 !important; line-height: 1.72 !important; }
.customer-reviews-section h4, .customer-reviews-section strong { font-family: 'IBM Plex Sans', sans-serif !important; font-style: normal !important; font-weight: 700 !important; font-size: .9375rem !important; letter-spacing: -.01em !important; }
.blog-title, .blog-detail h3, .case-studies-carousel h3 { font-weight: 700 !important; font-size: 1rem !important; line-height: 1.4 !important; letter-spacing: -.01em !important; }
.blog-date, .blog-read-more, .blog-detail p { font-size: .8125rem !important; }
.blog-read-more { font-weight: 600 !important; }
.erpp-fi-heading { font-weight: 700 !important; letter-spacing: -.02em !important; }
.footer-contact-inner, .footer-contact-inner a { font-size: .9375rem !important; line-height: 1.65 !important; }
.footerttl { font-size: .8125rem !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
.footer-main-title { font-weight: 700 !important; font-size: 1.25rem !important; letter-spacing: -.015em !important; }
.erp-locations .footer-loaction-title { font-weight: 700 !important; font-size: 1.0625rem !important; letter-spacing: -.01em !important; }
.erp-locations p { font-size: .9375rem !important; font-weight: 400 !important; line-height: 1.7 !important; }
.copyright-section, .copyright-section a, .a_line_span { font-size: .8125rem !important; }
.accordion-button { font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 500 !important; font-size: .9375rem !important; line-height: 1.5 !important; }
.accordion-body { font-family: 'IBM Plex Sans', sans-serif !important; font-size: .9375rem !important; line-height: 1.72 !important; }
.faq-text-leftside h2, .service-faq-section h2 { font-weight: 700 !important; letter-spacing: -.025em !important; }
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea, select { font-family: 'IBM Plex Sans', sans-serif !important; font-size: .9375rem !important; font-weight: 400 !important; }
.customer-reviews-section .container, .customer-reviews-section > div { max-width: 1320px !important; padding-left: 24px !important; padding-right: 24px !important; }
.owl-carousel-reviews .erp-c__track { align-items: stretch !important; }
.owl-carousel-reviews .item { height: 100% !important; padding: 0 4px !important; }
.owl-carousel-reviews .carousel_widget__card { height: 100% !important; display: flex !important; flex-direction: column !important; min-height: 270px !important; box-sizing: border-box !important; }
.owl-carousel-reviews .carousel_widget__text { flex: 1 !important; overflow: hidden !important; }
.owl-carousel-reviews .carousel_widget__author { margin-top: auto !important; display: block !important; font-weight: 600 !important; font-size: .85rem !important; }
.owl-carousel-reviews .row { margin-top: 14px !important; align-items: center !important; }
.owl-carousel-reviews .carousel_widget__verified img { width: 14px !important; height: 14px !important; }
.owl-carousel-reviews .carousel_widget_power_by img,
.owl-carousel-reviews .carousel_widget_power_by svg { height: 20px !important; width: auto !important; max-width: none !important; display: block !important; object-fit: contain !important; }
.homepage-cta-rightside { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 10px !important; }
.homepage-cta-rightside p { margin: 0 !important; }
.wwa-3d-scene { max-width: 480px; margin: 0 auto; }

/* Phase 2.8-L4-P3 — hide the USA phone number sitewide, in both places
   it appears: the "Get In Touch" footer panel (footer.php,
   .footer-contact-inner.usa-map-icon) and the compact footer's USA
   office block (mu-plugins/erpp-footer.php). CSS-only per explicit
   request — the underlying contact data/markup is untouched and
   fully reversible; only display is hidden. The USA office address
   itself is not affected, only its phone number line/link. */
.footer-contact-inner.usa-map-icon { display: none !important; }
.erpp-pf-office a[href="tel:+17135976152"] { display: none !important; }