/*
 * Javixor theme baseline CSS variables.
 * Matches the client-approved static site's design tokens so Elementor
 * page designs and this theme's fallback templates look consistent.
 * Elementor Pro page layouts will add their own styling on top of this.
 */
:root {
	--navy: #081B3A;
	--navy-light: #0F2A4A;
	--blue: #1F6FEB;
	--blue-light: #4A8CF7;
	--blue-muted: rgba(31, 111, 235, 0.10);
	--white: #FFFFFF;
	--gray-50: #F8F9FC;
	--gray-100: #F1F3F7;
	--gray-200: #E4E7EC;
	--gray-300: #CDD2DA;
	--gray-400: #9CA3AF;
	--gray-500: #6B7280;
	--gray-600: #4B5563;
	--gray-700: #374151;
	--gray-800: #1F2937;
	--gray-900: #111827;
	--green: #10B981;
	--red: #EF4444;
	--gold: #F59E0B;
	--radius: 8px;
	--radius-lg: 12px;
	--shadow: 0 4px 24px rgba(8, 27, 58, 0.06);
	--shadow-lg: 0 12px 48px rgba(8, 27, 58, 0.10);
	--shadow-xl: 0 24px 64px rgba(8, 27, 58, 0.14);
	--transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--max-width: 1200px;
	--header-height: 72px;
}

body {
	font-family: var(--font);
	color: var(--gray-900);
}

.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--radius);
	padding: 12px 24px;
	font-weight: 600;
	transition: var(--transition);
	cursor: pointer;
	border: 1px solid transparent;
}

.btn-primary {
	background: var(--blue);
	color: var(--white);
}

.btn-primary:hover {
	background: var(--blue-light);
}

/* Fallback header/footer used only when Elementor Pro Theme Builder
   is not managing these areas yet. */
.site-header {
	background: var(--navy);
	color: var(--white);
	position: sticky;
	top: 0;
	z-index: 999;
}

.site-header .logo { flex-shrink: 0; }

.nav-links {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: nowrap;
}

.nav-links > li {
	position: relative;
}

.nav-links > li > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 600;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	padding: 8px 2px;
	white-space: nowrap;
}

.nav-links > li > a:hover,
.nav-links > li.current-menu-item > a,
.nav-links > li.current_page_item > a {
	color: var(--white);
}

.nav-links li.menu-item-has-children > a::after {
	content: '\f107';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 10px;
	opacity: 0.7;
}

.nav-links .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background: var(--white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: 8px;
	margin-top: 8px;
	z-index: 1000;
}

/* Invisible bridge covering the margin-top gap above the dropdown, so
   moving the mouse from the trigger link down into the panel never
   leaves the hoverable area (which would otherwise close the menu
   before a click can land — the "menu closes when I try to select"
   bug). Applies to both the simple .sub-menu dropdowns and the
   Services .mega-menu below. */
.nav-links .sub-menu::before,
.mega-menu::before {
	content: '';
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
}

.nav-links li.menu-item-has-children:hover > .sub-menu,
.nav-links li.menu-item-has-children:focus-within > .sub-menu,
.nav-links li.menu-item-has-children.menu-open > .sub-menu {
	display: block;
}

.nav-links .sub-menu li a {
	display: block;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--gray-800);
	white-space: nowrap;
}

.nav-links .sub-menu li a:hover {
	background: var(--gray-50);
	color: var(--blue);
}

/* Services mega-menu: multi-column dropdown grouped by technology
   category, reuses the same hover/focus trigger as the simple .sub-menu
   dropdown above (li.menu-item-has-children:hover/:focus-within).

   The panel is wider than its trigger link, and "Services" sits near the
   left edge of the nav bar — so it can't be centered relative to its own
   <li> (that pins the left half of the panel outside the header on
   narrower screens, hugging the browser edge instead of the page). It's
   positioned relative to .site-header-inner (the same 1200px container
   everything else on the page uses) instead, via .mega-menu-parent
   overriding the default li position:relative below. */
.site-header-inner {
	position: relative;
}

.nav-links > li.mega-menu-parent {
	position: static;
}

.mega-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: min(880px, 92vw);
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: 28px 28px 18px;
	margin-top: 8px;
	z-index: 1000;
}

.nav-links li.menu-item-has-children:hover > .mega-menu,
.nav-links li.menu-item-has-children:focus-within > .mega-menu,
.nav-links li.menu-item-has-children.menu-open > .mega-menu {
	display: block;
}

.mega-menu-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 24px;
}

.mega-menu-col-heading {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--blue);
	margin: 0 0 12px;
}

.mega-menu-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-menu-col ul li a {
	display: block;
	padding: 7px 0;
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--gray-800);
	white-space: normal;
	line-height: 1.35;
}

.mega-menu-col ul li a:hover {
	color: var(--blue);
}

.mega-menu-footer {
	border-top: 1px solid var(--gray-200);
	margin-top: 16px;
	padding-top: 14px;
	text-align: right;
}

.mega-menu-footer a {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--blue);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mega-menu-footer a:hover {
	color: var(--navy);
}

@media (max-width: 1200px) {
	.mega-menu-grid {
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		row-gap: 28px;
	}
}

.header-actions a[href^="tel:"] {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}

.hamburger {
	display: none;
	background: none;
	border: none;
	color: var(--white);
	font-size: 20px;
	cursor: pointer;
	padding: 8px;
}

@media (max-width: 960px) {
	nav#navLinks {
		display: none;
	}

	.header-actions a[href^="tel:"] {
		display: none;
	}

	.hamburger {
		display: block;
	}

	nav#navLinks.active {
		display: block;
		position: absolute;
		top: var(--header-height);
		left: 0;
		right: 0;
		background: var(--navy);
		padding: 16px 24px 24px;
		max-height: calc(100vh - var(--header-height));
		overflow-y: auto;
	}

	nav#navLinks.active .nav-links {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		width: 100%;
	}

	nav#navLinks.active .nav-links > li {
		width: 100%;
	}

	nav#navLinks.active .nav-links > li > a {
		display: flex;
		width: 100%;
		padding: 12px 4px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	nav#navLinks.active .nav-links .sub-menu {
		display: block;
		position: static;
		background: transparent;
		box-shadow: none;
		padding: 0 0 8px 16px;
		margin-top: 0;
	}

	nav#navLinks.active .nav-links .sub-menu li a {
		color: rgba(255, 255, 255, 0.75);
		padding: 8px 4px;
	}

	nav#navLinks.active .nav-links .sub-menu li a:hover {
		background: transparent;
		color: var(--white);
	}

	nav#navLinks.active .nav-links .mega-menu {
		display: block;
		position: static;
		width: 100%;
		background: transparent;
		box-shadow: none;
		padding: 0 0 8px 16px;
		margin-top: 0;
		transform: none;
	}

	nav#navLinks.active .mega-menu-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	nav#navLinks.active .mega-menu-col-heading {
		color: var(--blue-light);
	}

	nav#navLinks.active .mega-menu-col ul li a {
		color: rgba(255, 255, 255, 0.75);
		padding: 8px 4px;
	}

	nav#navLinks.active .mega-menu-col ul li a:hover {
		color: var(--white);
	}

	nav#navLinks.active .mega-menu-footer {
		border-top-color: rgba(255, 255, 255, 0.1);
		text-align: left;
	}
}

.site-footer {
	background: var(--navy);
	color: var(--gray-200);
	padding: 56px 0 0;
}

.site-footer a {
	color: var(--gray-300);
	text-decoration: none;
	transition: var(--transition);
}

.site-footer a:hover {
	color: var(--white);
}

.site-footer {
	position: relative;
}

.site-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--blue) 0%, var(--blue-light) 50%, var(--gold) 100%);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
	gap: 32px;
	align-items: start;
}

.footer-brand-name {
	font-weight: 700;
	font-size: 1.35rem;
	color: var(--white);
	margin: 0 0 12px;
}

.footer-tagline {
	color: var(--gray-300);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 24px;
	max-width: 340px;
}

.footer-social-hint {
	font-size: 0.78rem;
	color: var(--gray-500);
	font-style: italic;
	margin: 10px 0 0;
}

.footer-cta-btn {
	margin-top: 20px;
	align-self: flex-start;
}

.footer-contact-list {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-contact-list p {
	margin: 0 0 12px;
	font-size: 0.9rem;
}

.footer-contact-list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.footer-contact-list i {
	width: 16px;
	color: var(--blue-light);
}

.footer-social {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}

.footer-social a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	transition: var(--transition);
}

.footer-social a:hover {
	background: var(--blue);
	border-color: var(--blue);
	transform: translateY(-2px);
}

.footer-social a.is-placeholder {
	opacity: 0.45;
	cursor: default;
}

.footer-social a.is-placeholder:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
	transform: none;
}

.footer-col-heading {
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gray-400);
	margin: 0 0 20px;
}

.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links li {
	margin-bottom: 14px;
}

.footer-links li:last-child {
	margin-bottom: 0;
}

.footer-links a {
	font-size: 0.9rem;
	line-height: 1.4;
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: 48px;
	padding: 20px 0;
	font-size: 0.85rem;
	color: var(--gray-400);
}

.footer-bottom-inner {
	text-align: center;
}

@media (max-width: 1100px) {
	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 36px 32px;
	}

	.footer-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.footer-brand {
		grid-column: auto;
	}
}

/* =========================================================================
 * Page template component styles.
 * Copied from the client-approved static site (home.html, industry sub.html,
 * industy main.html, contact.html) so the WordPress templates in
 * page-home.php, page-industries-hub.php, single-industry.php, and
 * page-contact.php look right immediately after theme activation, before
 * anyone touches Elementor. The --navy/--blue/--gold tokens above already
 * match the static site, this block adds the section and card styles that
 * use them.
 * ========================================================================= */

body {
	background: var(--gray-50);
	line-height: 1.7;
}

a {
	color: var(--blue);
}

a:hover {
	color: var(--navy);
}

.section-padding {
	padding: 80px 0;
}

.section-padding-sm {
	padding: 48px 0;
}

/* .section-padding was a fixed 80px top/bottom at every viewport width,
   which stacks to 160px of dead space between two back-to-back sections
   (e.g. the Industries button and the "Proof" tag above it) — barely
   noticeable on a 1440px desktop, but disproportionate on a narrower
   window or phone where the content next to it has shrunk but the gap
   didn't. Scaled down at the same breakpoints the rest of the layout
   already uses. */
@media (max-width: 900px) {
	.section-padding {
		padding: 56px 0;
	}
}

@media (max-width: 600px) {
	.section-padding {
		padding: 44px 0;
	}
}

.bg-gray-50 {
	background: var(--gray-50);
}

.bg-navy {
	background: var(--navy);
	color: var(--white);
}

.bg-blue-gradient {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
	color: var(--white);
}

.bg-fintech {
	background: linear-gradient(135deg, #0A1628 0%, #1A2A4A 50%, #0F1F3A 100%);
	color: var(--white);
}

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

.text-navy {
	color: var(--navy);
}

.section-tag {
	display: inline-flex;
	align-items: center;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--blue);
	background: var(--blue-muted);
	padding: 4px 16px 4px 14px;
	border-radius: 100px;
	margin-bottom: 12px;
}

/* Brand "orange dot" accent -- echoes the dot in the Javixor Labs logo mark. Sits before every section tag / hero tag label, sitewide. */
.section-tag::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	min-width: 6px;
	border-radius: 50%;
	background: #FCA00D;
	margin-right: 8px;
}

.section-tag-white {
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.80);
}

.section-tag-gold {
	background: rgba(245, 158, 11, 0.15);
	color: var(--gold);
}

.section-title {
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 16px;
	text-align: center;
}

.section-title span {
	color: var(--blue);
}

.section-title-gold span {
	color: var(--gold);
}

.section-title-white span {
	color: #8AB4F8;
}

.section-subtitle {
	font-size: 1.15rem;
	color: var(--gray-500);
	max-width: 700px;
	margin: 0 auto 32px;
	line-height: 1.6;
	text-align: center;
}

.section-subtitle-white {
	color: rgba(255, 255, 255, 0.70);
}

.section-subtitle-left {
	max-width: 700px;
	margin: 0 0 32px;
	text-align: left;
}

/* Button variants beyond the base .btn/.btn-primary defined above. */
.btn-outline {
	background: transparent;
	color: var(--blue);
	border: 2px solid var(--blue);
}

.btn-outline:hover {
	background: var(--blue);
	color: #fff;
	transform: translateY(-2px);
}

.btn-outline-white {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.40);
}

.btn-outline-white:hover {
	background: rgba(255, 255, 255, 0.10);
	border-color: #fff;
	transform: translateY(-2px);
}

.btn-white {
	background: var(--white);
	color: var(--navy);
}

.btn-white:hover {
	background: var(--gray-100);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(255, 255, 255, 0.20);
}

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

.btn-gold:hover {
	background: #D97706;
	color: #fff;
}

.btn-sm {
	padding: 10px 24px;
	font-size: 0.85rem;
}

.btn-lg {
	padding: 18px 40px;
	font-size: 1.05rem;
}

.grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.mt-32 {
	margin-top: 32px;
}

.grid-5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

@media (max-width: 900px) {
	.grid-2, .grid-3, .grid-4, .grid-5 {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 601px) and (max-width: 900px) {
	.grid-5 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 901px) and (max-width: 1180px) {
	.grid-5 {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ===== BREADCRUMB ===== */
.breadcrumb-wrap {
	background: var(--white);
	border-bottom: 1px solid var(--gray-200);
	padding: 10px 0;
}

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	color: var(--gray-500);
	flex-wrap: wrap;
}

.breadcrumb a {
	color: var(--gray-500);
}

.breadcrumb a:hover {
	color: var(--blue);
}

.breadcrumb .sep {
	color: var(--gray-300);
	font-size: 0.6rem;
}

.breadcrumb .current {
	color: var(--gray-900);
	font-weight: 500;
}

/* ===== HERO ===== */
.hero {
	padding: 40px 0 64px;
	background: linear-gradient(135deg, #F0F4FF 0%, #FFFFFF 70%);
	position: relative;
	overflow: hidden;
}

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

.hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

@media (max-width: 900px) {
	.hero-grid {
		grid-template-columns: 1fr;
	}
}

.hero h1 {
	font-size: 3.2rem;
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 20px;
	color: var(--navy);
}

.hero h1 span {
	color: var(--blue);
}

.hero p {
	font-size: 1.15rem;
	color: var(--gray-600);
	max-width: 520px;
	margin-bottom: 28px;
	line-height: 1.7;
}

.hero-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 28px;
	row-gap: 14px;
	margin-top: 24px;
}

.hero-badges span {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--gray-700);
	white-space: nowrap;
}

.hero-badges i {
	color: var(--green);
}

/* Review-platform score badges (Clutch/Trustpilot/Google), rendered as their
   own row underneath the hero photo/stat card -- see .hero-visual-trust-row
   below, not mixed into the left-column USP badges row. */
.trust-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--gray-700);
	white-space: nowrap;
}

.trust-item-logo {
	height: 16px;
	width: auto;
	display: block;
}

.trust-item strong {
	color: var(--navy);
}

/* Wraps .hero-visual (photo + floating stat card) and the review-score row
   so the review row stacks below the photo column instead of sharing a
   grid cell with it (only rendered when trust_items are supplied). */
.hero-visual-col {
	display: flex;
	flex-direction: column;
}

/* Sits below the hero photo. margin-top clears the floating stat card,
   which overlaps the bottom of the photo via negative positioning (see
   .floating-card below) -- without this gap the two would overlap. */
.hero-visual-trust-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: 24px;
	row-gap: 8px;
	margin-top: 150px;
}

@media (max-width: 600px) {
	.hero-visual-trust-row {
		margin-top: 190px;
	}
}

/* Hero primary/secondary buttons: sized to comfortably sit on one line at normal desktop widths (the hero left column is only ~50% of the container). */
.hero-buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.hero-buttons .btn {
	padding: 14px 22px;
	font-size: 0.95rem;
	white-space: nowrap;
}

@media (max-width: 400px) {
	.hero-buttons .btn {
		white-space: normal;
	}
}

.hero-visual {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.hero-photo-frame {
	width: 100%;
	aspect-ratio: 4 / 3.1;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.hero-photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.content-photo-frame {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	width: 100%;
	height: 100%;
	min-height: 320px;
}

.content-photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ===== STATEMENT BANNER ===== */
.statement-banner {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 15% 20%, rgba(74,140,247,0.35) 0%, transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(245,158,11,0.12) 0%, transparent 40%),
		linear-gradient(135deg, #081B3A 0%, #0F2A4A 55%, #1F6FEB 100%);
	border-radius: 28px;
	padding: 56px 48px;
	text-align: center;
	margin: 48px 0;
}

.statement-banner p {
	font-size: 1.9rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: rgba(255,255,255,0.92);
	max-width: 880px;
	margin: 0 auto;
}

.statement-banner p strong {
	font-weight: 800;
	color: #fff;
}

@media (max-width: 768px) {
	.statement-banner { padding: 36px 24px; border-radius: 20px; }
	.statement-banner p { font-size: 1.35rem; }
}

/* ===== SERVICE CARDS ===== */
.service-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 28px 24px;
	border: 1px solid var(--gray-200);
	transition: var(--transition);
	height: 100%;
}

.service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--blue-light);
}

.service-card .icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius);
	background: var(--blue-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	color: var(--blue);
	margin-bottom: 14px;
}

.service-card h4 {
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--navy);
}

.service-card p {
	color: var(--gray-500);
	font-size: 0.92rem;
	line-height: 1.6;
}

.service-card .badge {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 600;
	color: var(--blue);
	background: var(--blue-muted);
	padding: 2px 12px;
	border-radius: 100px;
	margin-top: 8px;
}

.card-link {
	margin-top: 14px;
	font-weight: 600;
	font-size: 0.85rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--blue);
}

.card-link:hover {
	color: var(--navy);
}

/* ===== INDUSTRY CARD ===== */
.industry-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 24px;
	border: 1px solid var(--gray-200);
	transition: var(--transition);
	text-align: center;
	height: 100%;
	display: block;
}

.industry-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--blue-light);
}

.industry-card .icon {
	font-size: 2rem;
	color: var(--blue);
	margin-bottom: 10px;
	display: block;
}

.industry-card h4,
.industry-card h5 {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--navy);
}

.industry-card p {
	font-size: 0.8rem;
	color: var(--gray-500);
	margin-top: 4px;
}

/* ===== STATS ===== */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

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

.stat-item {
	text-align: center;
	padding: 24px 16px;
	background: var(--white);
	border-radius: var(--radius-lg);
	border: 1px solid var(--gray-200);
}

.stat-item .num {
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--blue);
	display: block;
	line-height: 1.1;
}

.stat-item .lbl {
	color: var(--gray-500);
	font-size: 0.85rem;
	margin-top: 4px;
}

/* ===== ACCORDION (FAQ) ===== */
.accordion-item {
	border-bottom: 1px solid var(--gray-200);
}

.accordion-item:last-child {
	border-bottom: none;
}

.accordion-trigger {
	width: 100%;
	padding: 18px 0;
	background: none;
	border: none;
	font-size: 0.98rem;
	font-weight: 600;
	font-family: var(--font);
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	color: var(--gray-900);
	text-align: left;
	transition: var(--transition);
}

.accordion-trigger:hover {
	color: var(--blue);
}

.accordion-trigger i {
	transition: var(--transition);
	font-size: 0.9rem;
	color: var(--gray-400);
}

.accordion-item.open .accordion-trigger i {
	transform: rotate(180deg);
	color: var(--blue);
}

.accordion-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, padding 0.3s ease;
	padding: 0;
	color: var(--gray-600);
}

.accordion-item.open .accordion-body {
	max-height: 400px;
	padding: 0 0 20px 0;
}

/* ===== CTA BANNER ===== */
.cta-banner {
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
	border-radius: var(--radius-lg);
	padding: 48px 56px;
	color: #fff;
	text-align: center;
}

.cta-banner h2 {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 12px;
}

.cta-banner p {
	opacity: 0.80;
	max-width: 600px;
	margin: 0 auto 24px;
	font-size: 1.05rem;
}

.cta-banner .btn-group {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ===== COMPLIANCE TAGS (used on single-industry.php trust badges) ===== */
.compliance-tag {
	display: inline-block;
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: 100px;
	padding: 6px 18px;
	font-weight: 500;
	font-size: 0.8rem;
	color: var(--gray-700);
	transition: var(--transition);
	margin: 4px;
}

.compliance-tag:hover {
	border-color: var(--gold);
	color: var(--gold);
	background: rgba(245, 158, 11, 0.05);
}

.compliance-tag i {
	color: var(--gold);
}

/* ===== CONTACT PAGE ===== */
.contact-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

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

.contact-option {
	text-align: center;
	padding: 24px;
	background: var(--white);
	border-radius: var(--radius-lg);
	border: 1px solid var(--gray-200);
	transition: var(--transition);
}

.contact-option:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--blue-light);
}

.contact-option .icon {
	font-size: 2rem;
	color: var(--blue);
	display: block;
	margin-bottom: 8px;
}

.contact-option h5 {
	font-weight: 700;
	color: var(--navy);
}

.contact-option p {
	font-size: 0.9rem;
	color: var(--gray-500);
}

.contact-option a {
	color: var(--blue);
	font-weight: 600;
}

.contact-option a:hover {
	color: var(--navy);
}

.trust-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px 48px;
	padding: 16px 0;
}

.trust-strip .item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--gray-600);
}

.trust-strip .item i {
	color: var(--blue);
	font-size: 1.2rem;
}

.contact-form-wrap {
	max-width: 720px;
	margin: 0 auto;
	background: var(--white);
	border-radius: var(--radius-lg);
	border: 1px solid var(--gray-200);
	padding: 32px;
}

.form-group {
	margin-bottom: 18px;
}

.form-group label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 6px;
	color: var(--gray-800);
}

.form-group .required {
	color: var(--red);
}

.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius);
	font-family: var(--font);
	font-size: 0.95rem;
	color: var(--gray-900);
	background: var(--white);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--blue);
}

/* ===== ABOUT / WHY-US STAT ROW (home page) ===== */
.about-mini {
	background: var(--gray-50);
	border-radius: var(--radius-lg);
	border: 1px solid var(--gray-200);
	padding: 48px 56px;
	margin-top: 32px;
}

.about-mini .about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

@media (max-width: 900px) {
	.about-mini .about-grid {
		grid-template-columns: 1fr;
	}
	.about-mini {
		padding: 32px 24px;
	}
}

.about-mini .about-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 16px;
}

.about-mini .about-stats .stat {
	text-align: center;
	padding: 12px 8px;
	background: var(--white);
	border-radius: var(--radius);
	border: 1px solid var(--gray-200);
}

.about-mini .about-stats .stat .num {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--blue);
	display: block;
	line-height: 1.2;
}

.about-mini .about-stats .stat .lbl {
	font-size: 0.75rem;
	color: var(--gray-500);
}

/* =========================================================================
 * Added for the marketing page templates (page-about.php, page-agency.php,
 * page-dedicated-teams.php, page-staff-augmentation.php, page-white-label.php,
 * page-ai-development.php, page-technologies.php, page-digital-marketing.php,
 * page-seo.php, page-blog.php, single.php). Copied/adapted from each page's
 * own <style> block in the client-approved static site
 * (javixorlabs-final-site-v13/*.html). Accent color variables below are
 * namespaced per section family so pages can share this one stylesheet
 * without clobbering each other's palette.
 * ========================================================================= */

:root {
	--trust-blue: #2563EB;
	--trust-blue-muted: rgba(37, 99, 235, 0.08);
	--agency-orange: #F97316;
	--agency-orange-light: #FB923C;
	--agency-orange-muted: rgba(249, 115, 22, 0.10);
	--agency-gradient: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
	--ai-purple: #3B4FD1;
	--ai-purple-light: #6B7FE8;
	--ai-purple-muted: rgba(59, 79, 209, 0.10);
	--ai-gradient: linear-gradient(135deg, var(--navy) 0%, #3B4FD1 100%);
	--cyan: #0891B2;
	--cyan-light: #22D3EE;
	--cyan-muted: rgba(8, 145, 178, 0.10);
	--cyan-gradient: linear-gradient(135deg, #0891B2 0%, #0E7490 100%);
	--dm-purple: #3B4FD1;
	--dm-purple-light: #6B7FE8;
	--dm-purple-muted: rgba(59, 79, 209, 0.10);
	--dm-pink: #2563EB;
	--dm-gradient: linear-gradient(135deg, var(--navy) 0%, #3B4FD1 100%);
	--teal: #0D9488;
	--teal-light: #2DD4BF;
	--teal-muted: rgba(13, 148, 136, 0.10);
	--teal-gradient: linear-gradient(135deg, var(--navy) 0%, #0D9488 100%);
	--content-width: 720px;
}

/* ===== HERO STAT CARD (used by parts/sections/hero-light.php on every page) ===== */
.hero-visual-inner {
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 28px 32px;
	border: 1px solid var(--gray-200);
	box-sizing: border-box;
}

.hero-visual-inner.floating-card {
	position: absolute;
	bottom: -24px;
	left: -24px;
	max-width: 300px;
	z-index: 2;
	padding: 22px 22px;
}

.hero-stat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

/* Mobile fix: .floating-card uses position:absolute with a negative left/bottom
   offset and a 300px max-width -- on narrow viewports (where .hero-grid above
   already stacks to one column) this can overflow past the left edge of the
   page or overlap the H1 text below it. At the same breakpoint the hero grid
   itself stacks (900px), let the card flow in normal document order instead. */
@media (max-width: 900px) {
	.hero-visual-inner.floating-card {
		position: static;
		left: auto;
		bottom: auto;
		max-width: 100%;
		margin-top: 16px;
	}
}

.hero-stat {
	text-align: center;
	padding: 8px 4px;
	min-width: 0;
}

.hero-stat .number {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--blue);
	display: block;
	line-height: 1.2;
}

.hero-stat .label {
	font-size: 0.7rem;
	color: var(--gray-500);
	font-weight: 500;
}

/* Hero stat card: give the number and wrapped label breathing room (fix cramped spacing) */
.hero-stat .label {
	display: block;
	margin-top: 4px;
}

/* Homepage hero: tighten the trust-bar/badges spacing so it doesn't trail far below the hero photo */
#home .trust-bar-label {
	margin: 10px 0;
}
#home .hero-badges {
	margin-top: 12px;
}
#home .hero-visual-trust-row {
	margin-top: 60px;
}
@media (max-width: 900px) {
	#home .hero-visual-trust-row {
		margin-top: 30px;
	}
}

.trust-bar-label {
	display: flex;
	align-items: center;
	gap: 18px;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--gray-400);
	margin: 18px 0;
}

.trust-bar-label::before,
.trust-bar-label::after {
	content: '';
	flex: 1;
	max-width: 160px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gray-300), transparent);
}

/* ===== ABOUT: VALUES / LEADERSHIP / PROCESS / LOGO WALL ===== */
.value-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 28px 24px;
	border: 1px solid var(--gray-200);
	transition: var(--transition);
	height: 100%;
	text-align: center;
}

.value-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--blue-light);
}

.value-card .icon {
	font-size: 2.2rem;
	color: var(--blue);
	display: block;
	margin-bottom: 12px;
}

.value-card h4 {
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--navy);
}

.value-card p {
	color: var(--gray-500);
	font-size: 0.92rem;
	line-height: 1.6;
}

.leader-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 24px;
	border: 1px solid var(--gray-200);
	transition: var(--transition);
	text-align: center;
	height: 100%;
}

.leader-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--blue-light);
}

.leader-card .avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 2rem;
	margin: 0 auto 12px;
}

.leader-card .avatar.secondary { background: var(--blue-light); }
.leader-card .avatar.tertiary { background: var(--navy-light); }
.leader-card .avatar.quaternary { background: #0D9488; }

.leader-card .avatar.photo {
	overflow: hidden;
	background: var(--gray-200);
}

.leader-card .avatar.photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.leader-card h5 {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--navy);
}

.leader-card .title {
	font-size: 0.85rem;
	color: var(--gray-500);
	margin-bottom: 6px;
}

.leader-card p {
	font-size: 0.9rem;
	color: var(--gray-600);
	line-height: 1.6;
}

.leader-card .social {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 12px;
}

.leader-card .social a { color: var(--gray-400); font-size: 1.1rem; }
.leader-card .social a:hover { color: var(--blue); }

.process-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	position: relative;
	margin-top: 32px;
}

.process-steps::before {
	content: '';
	position: absolute;
	top: 28px;
	left: 10%;
	right: 10%;
	height: 2px;
	background: var(--gray-200);
	z-index: 0;
}

.process-steps .step {
	text-align: center;
	position: relative;
	z-index: 1;
	border-radius: 16px;
	padding: 12px 8px;
	transition: var(--transition);
}

.process-steps .step.active { background: #F0F4FF; }

.process-steps .step .circle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--white);
	border: 3px solid var(--gray-200);
	color: var(--gray-400);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0 auto 12px;
	transition: var(--transition);
}

.process-steps .step.active .circle {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

.process-steps .step.done .circle {
	background: var(--green);
	border-color: var(--green);
	color: #fff;
}

.process-steps .step h5 { font-weight: 600; font-size: 0.9rem; color: var(--navy); }
.process-steps .step p { font-size: 0.78rem; color: var(--gray-500); margin: 0; }

.logo-wall {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px 48px;
	padding: 16px 0;
}

.logo-wall .logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.6;
	transition: var(--transition);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--gray-500);
	letter-spacing: 1px;
}

.logo-wall .logo-item:hover { opacity: 1; color: var(--navy); }
.logo-wall .logo-item i { font-size: 2.4rem; margin-right: 8px; color: var(--gray-400); }

/* ===== PRICING PACKAGE CARDS (Agency, Digital Marketing, SEO) ===== */
.package-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 32px 28px;
	border: 1px solid var(--gray-200);
	transition: var(--transition);
	height: 100%;
	position: relative;
}

.package-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--blue-light);
}

.package-card.popular {
	border-color: var(--blue);
	box-shadow: 0 0 0 2px var(--blue), var(--shadow-lg);
}

.package-card .popular-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--blue);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	padding: 4px 16px;
	border-radius: 100px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.package-card h4 { font-size: 1.2rem; font-weight: 700; color: var(--navy); }

.package-card .price {
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--blue);
	margin: 8px 0;
}

.package-card .price span { font-size: 1rem; font-weight: 400; color: var(--gray-500); }

.package-card ul { list-style: none; padding: 0; margin: 16px 0; }

.package-card ul li {
	padding: 6px 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9rem;
	color: var(--gray-700);
}

.package-card ul li i { color: var(--green); width: 18px; }

.package-card .offer-badge {
	display: inline-block;
	background: #FEF3C7;
	color: #92400E;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 4px 14px;
	border-radius: 100px;
	margin-top: 8px;
}

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

.btn-pink:hover {
	background: var(--navy);
	color: #fff;
	transform: translateY(-2px);
}

/* ===== TECHNOLOGY / SOLUTION CARDS ===== */
.tech-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 28px 24px;
	border: 1px solid var(--gray-200);
	transition: var(--transition);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.tech-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--blue-light);
}

.tech-card .icon {
	width: 52px;
	height: 52px;
	border-radius: var(--radius);
	background: var(--blue-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	color: var(--blue);
	margin-bottom: 14px;
}

.tech-card .badge {
	display: inline-block;
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--blue);
	background: var(--blue-muted);
	padding: 2px 12px;
	border-radius: 100px;
	align-self: flex-start;
	margin-bottom: 8px;
}

.tech-card h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; color: var(--navy); }
.tech-card p { color: var(--gray-500); font-size: 0.92rem; line-height: 1.6; flex: 1; }
.tech-card .card-link { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blue); }
.tech-card .card-link:hover { color: var(--navy); }

.tech-card-stack {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

.tech-card-stack span {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--gray-600);
	background: var(--gray-50);
	border: 1px solid var(--gray-200);
	padding: 3px 10px;
	border-radius: 100px;
}

.tech-group {
	margin-bottom: 48px;
	scroll-margin-top: calc(var(--header-height) + 20px);
}

.tech-group:last-child {
	margin-bottom: 0;
}

.tech-group-heading {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--gray-200);
}

.mt-16 {
	margin-top: 16px;
}

.included-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 24px;
}

.included-list .item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.92rem;
	color: var(--gray-700);
}

.included-list .item i { color: var(--blue); margin-top: 3px; flex-shrink: 0; }

@media (max-width: 700px) {
	.included-list { grid-template-columns: 1fr; }
}

/* ===== EXAMPLE ENGINEER PROFILE CARDS (Solutions + AI Development pages) ===== */
.engineer-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 24px;
	border: 1px solid var(--gray-200);
	transition: var(--transition);
	text-align: center;
	height: 100%;
}

.engineer-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--blue-light);
}

.engineer-card .avatar {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--blue);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.5rem;
	margin: 0 auto 14px;
}

.engineer-card .avatar.alt1 { background: var(--blue-light); }
.engineer-card .avatar.alt2 { background: var(--navy-light); }
.engineer-card .avatar.alt3 { background: var(--navy); }

.engineer-card h5 { font-weight: 700; font-size: 1rem; color: var(--navy); margin-bottom: 2px; }
.engineer-card .exp { font-size: 0.8rem; color: var(--gray-500); margin-bottom: 10px; font-weight: 500; }
.engineer-card p { font-size: 0.85rem; color: var(--gray-600); line-height: 1.6; margin-bottom: 12px; }
.engineer-card .tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

.engineer-card .tags span {
	background: var(--gray-100);
	color: var(--gray-700);
	font-size: 0.72rem;
	font-weight: 500;
	padding: 3px 10px;
	border-radius: 100px;
}

/* ===== HORIZONTAL SCROLL CAROUSEL (pod configs, project types, capabilities) ===== */
.carousel-row {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 8px 4px 20px;
	-webkit-overflow-scrolling: touch;
}

.carousel-row::-webkit-scrollbar { height: 8px; }
.carousel-row::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 100px; }

.carousel-card {
	flex: 0 0 260px;
	scroll-snap-align: start;
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	padding: 24px;
	transition: var(--transition);
}

.carousel-card:hover { border-color: var(--blue-light); box-shadow: var(--shadow-lg); }

.carousel-card .icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius);
	background: var(--blue-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	color: var(--blue);
	margin-bottom: 14px;
}

.carousel-card h4 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.carousel-card p { font-size: 0.85rem; color: var(--gray-600); line-height: 1.6; }
.carousel-card .role-list { font-size: 0.78rem; color: var(--gray-500); margin-bottom: 8px; }

/* ===== PILL TAGS (tech stack, roles, industries) ===== */
.tech-tag,
.role-tag {
	display: inline-block;
	background: var(--gray-100);
	color: var(--gray-700);
	padding: 6px 18px;
	border-radius: 100px;
	font-size: 0.8rem;
	font-weight: 500;
	margin: 4px;
}

.industry-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: 100px;
	padding: 8px 18px;
	font-weight: 500;
	font-size: 0.85rem;
	color: var(--gray-700);
	transition: var(--transition);
	margin: 4px;
}

.industry-tag:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-muted); }
.industry-tag i { color: var(--blue); }

/* ===== RESOURCE / CATEGORY / BLOG CARDS (page-blog.php) ===== */
.category-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 24px;
	border: 1px solid var(--gray-200);
	transition: var(--transition);
	text-align: center;
	height: 100%;
}

.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue-light); }
.category-card .icon { font-size: 2.2rem; color: var(--blue); display: block; margin-bottom: 12px; }
.category-card h5 { font-weight: 700; font-size: 1rem; color: var(--navy); }
.category-card p { font-size: 0.85rem; color: var(--gray-500); margin: 4px 0 8px; }
.category-card .count { font-size: 0.75rem; color: var(--gray-400); }

.filter-controls {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 32px;
}

.filter-controls button {
	padding: 8px 20px;
	border-radius: 100px;
	border: 1px solid var(--gray-200);
	background: var(--white);
	font-family: var(--font);
	font-weight: 500;
	font-size: 0.8rem;
	cursor: pointer;
	transition: var(--transition);
	color: var(--gray-500);
}

.filter-controls button:hover { border-color: var(--blue); color: var(--blue); }
.filter-controls button.active { background: var(--blue); color: #fff; border-color: var(--blue); }

.blog-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 24px;
	border: 1px solid var(--gray-200);
	transition: var(--transition);
	height: 100%;
	position: relative;
}

.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue-light); }

.blog-card-thumb {
	margin: -24px -24px 16px -24px;
	height: 160px;
	overflow: hidden;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	position: relative;
}

.blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-card .meta { font-size: 0.75rem; color: var(--gray-400); display: flex; gap: 12px; margin-bottom: 8px; }
.blog-card .meta .category { color: var(--blue); font-weight: 600; }
.blog-card h5 { font-weight: 700; font-size: 1rem; color: var(--navy); margin-bottom: 6px; }
.blog-card p { font-size: 0.88rem; color: var(--gray-500); line-height: 1.6; }
.blog-card .card-link { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blue); }

.pill-tag-overlay {
	position: absolute;
	bottom: 14px;
	left: 14px;
	background: rgba(8, 27, 58, 0.80);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 100px;
	z-index: 2;
	backdrop-filter: blur(3px);
}

/* ===== SINGLE BLOG ARTICLE (single.php) ===== */
.blog-post { padding: 40px 0 64px; background: var(--white); }
.blog-post .post-header { max-width: var(--content-width); margin: 0 auto 40px; }

.blog-post .post-header .meta {
	display: flex;
	gap: 16px;
	align-items: center;
	font-size: 0.85rem;
	color: var(--gray-500);
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.blog-post .post-header .meta .category {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--blue-muted);
	border: 1.5px solid rgba(31,111,235,0.30);
	color: var(--blue);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.5px;
	padding: 5px 14px;
	border-radius: 100px;
}

.blog-post .post-header .meta .reading-time { display: flex; align-items: center; gap: 4px; }

.blog-post .post-header h1 {
	font-size: 2.8rem;
	font-weight: 800;
	line-height: 1.15;
	color: var(--navy);
	margin-bottom: 12px;
	letter-spacing: -0.02em;
}

.blog-post .post-header .excerpt { font-size: 1.2rem; color: var(--gray-600); line-height: 1.7; max-width: 640px; }

.blog-post .post-header .author {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--gray-200);
	margin-top: 16px;
}

.blog-post .post-header .author .avatar,
.blog-post .post-footer .author-bio .avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.2rem;
	flex-shrink: 0;
}

.blog-post .post-footer .author-bio .avatar { width: 64px; height: 64px; font-size: 1.4rem; }

.blog-post .post-header .author .avatar.photo,
.blog-post .post-footer .author-bio .avatar.photo {
	overflow: hidden;
	background: var(--gray-200);
}

.blog-post .post-header .author .avatar.photo img,
.blog-post .post-footer .author-bio .avatar.photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-post .post-header .author .info { display: flex; flex-direction: column; }
.blog-post .post-header .author .info .name { font-weight: 600; color: var(--navy); }
.blog-post .post-header .author .info .title { font-size: 0.85rem; color: var(--gray-500); }
.blog-post .post-header .author .info .title a { color: var(--blue); }

.post-cover-photo {
	width: 100%;
	aspect-ratio: 21 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	margin: 24px 0 8px;
}

.post-cover-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-post .post-body { max-width: var(--content-width); margin: 0 auto; }

/* Blog post table of contents (H2-only), Home Page Changes batch item 14 */
.post-toc {
	max-width: var(--content-width);
	margin: 0 auto 32px;
	background: var(--gray-50);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	padding: 20px 24px;
}
.post-toc h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--navy);
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.post-toc h3 i { color: var(--blue); }
.post-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.post-toc li { counter-increment: toc-item; }
.post-toc ul { counter-reset: toc-item; }
.post-toc a {
	color: var(--gray-700);
	font-size: 0.95rem;
	line-height: 1.5;
	text-decoration: none;
	transition: var(--transition);
}
.post-toc a:before {
	content: counter(toc-item) '. ';
	color: var(--blue);
	font-weight: 600;
}
.post-toc a:hover { color: var(--blue); text-decoration: underline; }
.blog-post .post-body h2 { font-size: 1.8rem; font-weight: 700; color: var(--navy); margin-top: 40px; margin-bottom: 12px; line-height: 1.3; }
.blog-post .post-body h3 { font-size: 1.3rem; font-weight: 700; color: var(--navy); margin-top: 28px; margin-bottom: 10px; line-height: 1.3; }
.blog-post .post-body p { font-size: 1.05rem; color: var(--gray-700); line-height: 1.8; margin-bottom: 20px; }
.blog-post .post-body ul,
.blog-post .post-body ol { margin: 16px 0 20px 24px; color: var(--gray-700); font-size: 1.05rem; line-height: 1.8; }
.blog-post .post-body ul li,
.blog-post .post-body ol li { margin-bottom: 6px; }
.blog-post .post-body img { max-width: 100%; height: auto; border-radius: var(--radius-lg); margin: 16px 0; }
.blog-post .post-body a { color: var(--blue); font-weight: 600; }

.blog-post .post-body .comparison-table-wrap {
	overflow-x: auto;
	margin: 32px 0;
	background: var(--gray-50);
	border-radius: var(--radius-lg);
	border: 1px solid var(--gray-200);
}

.blog-post .post-body .comparison-table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.blog-post .post-body .comparison-table-wrap th { padding: 14px 20px; text-align: left; font-weight: 600; background: var(--gray-100); color: var(--navy); border-bottom: 2px solid var(--gray-200); }
.blog-post .post-body .comparison-table-wrap td { padding: 12px 20px; border-bottom: 1px solid var(--gray-200); color: var(--gray-700); }
.blog-post .post-body .comparison-table-wrap tr:last-child td { border-bottom: none; }
.blog-post .post-body .comparison-table-wrap .check { color: var(--green); }
.blog-post .post-body .comparison-table-wrap .xmark { color: var(--red); }
.blog-post .post-body .comparison-table-wrap .highlight { color: var(--blue); font-weight: 600; }

.blog-post .post-body .callout {
	background: var(--blue-muted);
	border-left: 4px solid var(--blue);
	padding: 20px 24px;
	border-radius: var(--radius);
	margin: 24px 0;
}

.blog-post .post-body .callout h4 { font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.blog-post .post-body .callout p { margin-bottom: 0; color: var(--gray-700); }

.blog-post .post-body .pro-con-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; }
.blog-post .post-body .pro-con-grid .pro { background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.20); border-radius: var(--radius-lg); padding: 20px 24px; }
.blog-post .post-body .pro-con-grid .pro h4 { color: var(--green); font-weight: 700; margin-bottom: 8px; }
.blog-post .post-body .pro-con-grid .pro ul { margin: 0 0 0 20px; font-size: 0.95rem; }
.blog-post .post-body .pro-con-grid .con { background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.20); border-radius: var(--radius-lg); padding: 20px 24px; }
.blog-post .post-body .pro-con-grid .con h4 { color: var(--red); font-weight: 700; margin-bottom: 8px; }
.blog-post .post-body .pro-con-grid .con ul { margin: 0 0 0 20px; font-size: 0.95rem; }

.blog-post .post-body .decision-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin: 24px 0; }
.blog-post .post-body .decision-grid .card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 24px; text-align: center; }
.blog-post .post-body .decision-grid .card .icon { font-size: 2.4rem; color: var(--blue); display: block; margin-bottom: 8px; }
.blog-post .post-body .decision-grid .card h4 { font-weight: 700; color: var(--navy); }
.blog-post .post-body .decision-grid .card p { font-size: 0.95rem; margin-bottom: 0; }

.blog-post .post-footer { max-width: var(--content-width); margin: 48px auto 0; padding-top: 32px; border-top: 1px solid var(--gray-200); }
.blog-post .post-footer .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.blog-post .post-footer .tags span { background: var(--gray-100); color: var(--gray-600); padding: 4px 14px; border-radius: 100px; font-size: 0.75rem; font-weight: 500; }
.blog-post .post-footer .author-bio { display: flex; gap: 20px; padding: 24px; background: var(--gray-50); border-radius: var(--radius-lg); border: 1px solid var(--gray-200); align-items: flex-start; }
.blog-post .post-footer .author-bio .info h4 { font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.blog-post .post-footer .author-bio .info .title { font-size: 0.9rem; color: var(--gray-500); margin-bottom: 6px; }
.blog-post .post-footer .author-bio .info p { font-size: 0.95rem; color: var(--gray-600); margin: 0; }
.blog-post .post-footer .author-bio .info .social { display: flex; gap: 12px; margin-top: 8px; }
.blog-post .post-footer .author-bio .info .social a { color: var(--gray-400); font-size: 1.1rem; }
.blog-post .post-footer .author-bio .info .social a:hover { color: var(--blue); }

.related-posts .card,
.related-posts .card-thumb {
	position: relative;
}

.related-posts .card {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 24px;
	border: 1px solid var(--gray-200);
	transition: var(--transition);
	height: 100%;
}

.related-posts .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue-light); }
.related-posts .card-thumb { margin: -24px -24px 16px -24px; height: 160px; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.related-posts .card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-posts .card .meta { font-size: 0.75rem; color: var(--gray-400); display: flex; gap: 12px; margin-bottom: 8px; }
.related-posts .card .meta .category { color: var(--blue); font-weight: 600; }
.related-posts .card h5 { font-weight: 700; font-size: 1rem; color: var(--navy); margin-bottom: 6px; }
.related-posts .card p { font-size: 0.88rem; color: var(--gray-500); line-height: 1.6; }
.related-posts .card .card-link { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blue); }

.card-link i,
.card-link .fa-arrow-right {
	transition: transform 0.25s ease;
	display: inline-block;
}

.card-link:hover i,
.card-link:hover .fa-arrow-right {
	transform: translateX(4px);
}

/* ===== ALTERNATING CARD BACKGROUNDS (matches the static site's subtle zebra tint) ===== */
.service-card:nth-child(odd),
.value-card:nth-child(odd),
.leader-card:nth-child(odd),
.resource-card:nth-child(odd),
.category-card:nth-child(odd),
.blog-card:nth-child(odd),
.package-card:nth-child(odd),
.tech-card:nth-child(odd),
.industry-card:nth-child(odd) {
	background: #F0F4FF;
}

.service-card:nth-child(even),
.value-card:nth-child(even),
.leader-card:nth-child(even),
.resource-card:nth-child(even),
.category-card:nth-child(even),
.blog-card:nth-child(even),
.package-card:nth-child(even),
.tech-card:nth-child(even),
.industry-card:nth-child(even) {
	background: #FAF9F7;
}

/* ===== RESOURCE CARDS (page-blog.php featured resources) ===== */
.resource-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 28px 24px;
	border: 1px solid var(--gray-200);
	transition: var(--transition);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.resource-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue-light); }
.resource-card .icon { width: 48px; height: 48px; border-radius: var(--radius); background: var(--blue-muted); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--blue); margin-bottom: 14px; }
.resource-card .type-badge { display: inline-block; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--blue); background: var(--blue-muted); padding: 2px 12px; border-radius: 100px; margin-bottom: 8px; align-self: flex-start; }
.resource-card h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; color: var(--navy); }
.resource-card p { color: var(--gray-500); font-size: 0.92rem; line-height: 1.6; flex: 1; }
.resource-card .gated-badge { display: inline-block; font-size: 0.65rem; font-weight: 600; color: var(--blue); background: var(--blue-muted); padding: 2px 12px; border-radius: 100px; margin-top: 8px; }
.resource-card .card-link { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blue); }
.resource-card .download-count { font-size: 0.75rem; color: var(--gray-400); margin-top: 8px; }

/* ===== GRADIENT SECTION BACKGROUNDS + MATCHING CTA BANNER VARIANTS ===== */
.bg-agency-gradient { background: var(--agency-gradient); color: var(--white); }
.bg-ai-gradient { background: var(--ai-gradient); color: var(--white); }
.bg-cyan-gradient { background: var(--cyan-gradient); color: var(--white); }
.bg-dm-gradient { background: var(--dm-gradient); color: var(--white); }
.bg-teal-gradient { background: var(--teal-gradient); color: var(--white); }

.cta-banner.bg-agency { background: var(--agency-gradient); }
.cta-banner.bg-ai { background: var(--ai-gradient); }
.cta-banner.bg-cyan { background: var(--cyan-gradient); }
.cta-banner.bg-dm { background: var(--dm-gradient); }
.cta-banner.bg-teal { background: var(--teal-gradient); }

@media (max-width: 900px) {
	.process-steps { grid-template-columns: 1fr 1fr; }
	.pro-con-grid,
	.decision-grid,
	.blog-post .post-body .pro-con-grid,
	.blog-post .post-body .decision-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.blog-post .post-header h1 { font-size: 2rem; }
}

/* ===== CASE STUDIES (parts/cards/case-study-card.php, page-case-studies-hub.php, single-case_study.php) =====
   Copied verbatim from the <style> block in "Case Studies Main.html" /
   "Case Study Detail.html" (client-approved static reference), scoped
   narrowly to new selectors so nothing existing changes. */

/* .industry-card already exists above; this only adds the badge style
   that Case Studies Main.html defines for it and that this theme's
   industry-card.php partial also renders but had no rule for yet. */
.industry-card .badge {
	display: inline-block;
	font-size: 0.6rem;
	font-weight: 600;
	color: var(--blue);
	background: var(--blue-muted);
	padding: 2px 12px;
	border-radius: 100px;
	margin-top: 4px;
}

.case-card-stat {
	margin: 12px 0;
	padding: 12px;
	background: var(--gray-50);
	border-radius: var(--radius);
}

.case-card-stat .value {
	font-weight: 700;
	color: var(--blue);
}

.case-card-stat .label {
	color: var(--gray-500);
	font-size: 0.85rem;
}

/* =====================================================================
 * TRACK SWITCHER — Packages Hub (Enterprise / Agency Blocks / Digital
 * Marketing). Plain CSS + a few lines of JS in main.js, no dependency.
 * ================================================================== */

.track-switcher {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 32px auto 0;
}

.track-btn {
	padding: 12px 26px;
	border-radius: 999px;
	border: 1.5px solid var(--gray-200);
	background: var(--white);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--gray-600);
	cursor: pointer;
	transition: all 0.2s;
	font-family: inherit;
}

.track-btn:hover {
	border-color: var(--blue);
	color: var(--blue);
}

.track-btn.active {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

.track-panel {
	display: none;
}

.track-panel.active {
	display: block;
}

.custom-quote-card {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.custom-quote-card h4 { font-size: 1.2rem; font-weight: 700; color: var(--navy); }
.custom-quote-card .persona { color: var(--blue); font-weight: 600; font-size: 0.85rem; margin: 4px 0 12px; }
.custom-quote-card .quote-price { font-size: 1.5rem; font-weight: 700; color: var(--navy); margin: 8px 0; }
.custom-quote-card .quote-price span { font-size: 0.9rem; font-weight: 500; color: var(--gray-500); display: block; }
.custom-quote-card ul { list-style: none; padding: 0; margin: 16px 0; flex: 1; }
.custom-quote-card ul li { display: flex; gap: 8px; padding: 6px 0; font-size: 0.9rem; color: var(--gray-600); align-items: flex-start; }
.custom-quote-card ul li i { color: var(--green); width: 18px; margin-top: 3px; }

/* =====================================================================
 * RESOURCES HUB + CTO'S GUIDE
 * ================================================================== */

.resource-tile {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	padding: 28px 24px;
	text-align: center;
	transition: all 0.2s;
}

.resource-tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg, 0 12px 28px rgba(0,0,0,0.08));
	border-color: var(--blue);
}

.resource-tile .icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--blue-muted, #EAF1FE);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	font-size: 1.3rem;
	color: var(--blue);
}

.featured-resource {
	background: var(--navy, #0B1E3B);
	border-radius: var(--radius-lg);
	padding: 40px;
	color: #fff;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: center;
}

.featured-resource .tag { color: #8AB4F8; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.featured-resource h3 { color: #fff; font-size: 1.6rem; margin: 8px 0 12px; }
.featured-resource p { color: rgba(255,255,255,0.75); }
.featured-resource .author-line { margin-top: 16px; font-size: 0.85rem; color: rgba(255,255,255,0.55); }

@media (max-width: 780px) {
	.featured-resource { grid-template-columns: 1fr; text-align: center; }
}

.cto-guide-body {
	max-width: 760px;
	margin: 0 auto;
	color: var(--gray-700, #374151);
	line-height: 1.8;
	font-size: 1.02rem;
}

.cto-guide-body h2 { color: var(--navy); font-size: 1.5rem; margin: 40px 0 14px; }
.cto-guide-body h3 { color: var(--navy); font-size: 1.15rem; margin: 28px 0 10px; }
.cto-guide-body p { margin-bottom: 16px; }
.cto-guide-body ul, .cto-guide-body ol { margin: 0 0 16px 20px; }
.cto-guide-body li { margin-bottom: 8px; }
.cto-guide-body blockquote {
	border-left: 3px solid var(--blue);
	padding: 4px 0 4px 20px;
	margin: 24px 0;
	color: var(--gray-600);
	font-style: italic;
}

.email-gate-box {
	max-width: 560px;
	margin: 40px auto 0;
	background: var(--gray-50);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	padding: 32px;
	text-align: center;
}

.email-gate-form {
	display: flex;
	gap: 10px;
	margin-top: 16px;
	flex-wrap: wrap;
	justify-content: center;
}

.email-gate-form input[type="email"] {
	flex: 1;
	min-width: 220px;
	padding: 12px 16px;
	border: 1.5px solid var(--gray-200);
	border-radius: var(--radius);
	font-size: 0.95rem;
	font-family: inherit;
}

/* =====================================================================
 * LOCATIONS HUB
 * ================================================================== */

.country-tile {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	padding: 22px;
	text-align: center;
	transition: all 0.2s;
}

.country-tile:hover { border-color: var(--blue); transform: translateY(-3px); }
.country-tile .flag { font-size: 2rem; display: block; margin-bottom: 8px; }
.country-tile .name { font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.country-tile .tier-badge { font-size: 0.7rem; color: var(--gray-500); margin-top: 4px; display: block; }

.presence-card {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: var(--radius-lg);
	padding: 24px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.presence-card .flag { font-size: 1.8rem; }
.presence-card h4 { font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.presence-card .contact { font-size: 0.85rem; color: var(--blue); font-weight: 600; margin-bottom: 6px; }
.presence-card p { color: var(--gray-500); font-size: 0.88rem; line-height: 1.6; }

.trust-signal-card {
	background: var(--gray-50);
	border: 1px dashed var(--gray-300, #D1D5DB);
	border-radius: var(--radius-lg);
	padding: 32px;
	max-width: 720px;
	margin: 0 auto;
}

.trust-signal-card .role { font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.trust-signal-card blockquote {
	font-size: 1.1rem;
	font-style: italic;
	color: var(--gray-700, #374151);
	border-left: 3px solid var(--blue);
	padding-left: 18px;
	margin: 0 0 12px;
}
.trust-signal-card .context { color: var(--gray-500); font-size: 0.88rem; }
.trust-signal-card .illustrative-note { margin-top: 16px; font-size: 0.75rem; color: var(--gray-400, #9CA3AF); border-top: 1px solid var(--gray-200); padding-top: 12px; }

/* =====================================================================
 * CONTACT FORM STATUS BANNER
 * ================================================================== */

.form-status {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-radius: var(--radius);
	font-size: 0.92rem;
	font-weight: 600;
	margin-bottom: 20px;
}

.form-status-success {
	background: #EAFBF1;
	color: #0F7A42;
	border: 1px solid #B7ECD0;
}

.form-status-error {
	background: #FDECEC;
	color: #B3261E;
	border: 1px solid #F5C2C0;
}

/* =====================================================================
 * LONG-FORM CONTENT (optional, per-page rich-text section)
 * Added when a page needs 2-3K+ words without breaking the design.
 * Renders only when the editor fills in the "Long-Form Content" field --
 * see javixor_render_longform_content() in functions.php.
 * ================================================================== */

.long-form-content {
	background: #fff;
	border-top: 1px solid var(--gray-200);
}

.long-form-content-inner {
	max-width: 760px;
	margin: 0 auto;
	color: var(--gray-700, #374151);
	font-size: 1.05rem;
	line-height: 1.8;
}

.long-form-content-inner h1,
.long-form-content-inner h2,
.long-form-content-inner h3,
.long-form-content-inner h4 {
	color: var(--navy);
	font-weight: 700;
	line-height: 1.3;
	margin: 2em 0 0.6em;
}

.long-form-content-inner h1:first-child,
.long-form-content-inner h2:first-child,
.long-form-content-inner h3:first-child,
.long-form-content-inner h4:first-child {
	margin-top: 0;
}

.long-form-content-inner h1 { font-size: 2rem; }
.long-form-content-inner h2 { font-size: 1.6rem; }
.long-form-content-inner h3 { font-size: 1.3rem; }
.long-form-content-inner h4 { font-size: 1.1rem; }

.long-form-content-inner p {
	margin: 0 0 1.2em;
}

.long-form-content-inner ul,
.long-form-content-inner ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.long-form-content-inner li {
	margin-bottom: 0.5em;
}

.long-form-content-inner a {
	color: var(--blue);
	text-decoration: underline;
}

.long-form-content-inner a:hover {
	color: var(--blue-light);
}

.long-form-content-inner strong {
	color: var(--gray-900, #111827);
}

.long-form-content-inner blockquote {
	margin: 1.6em 0;
	padding: 4px 22px;
	border-left: 3px solid var(--blue);
	color: var(--gray-600, #4B5563);
	font-style: italic;
}

.long-form-content-inner img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
	margin: 1.2em 0;
}

.long-form-content-inner hr {
	border: none;
	border-top: 1px solid var(--gray-200);
	margin: 2.4em 0;
}

@media (max-width: 640px) {
	.long-form-content-inner {
		font-size: 0.98rem;
		line-height: 1.75;
	}

	.long-form-content-inner h1 { font-size: 1.6rem; }
	.long-form-content-inner h2 { font-size: 1.35rem; }
	.long-form-content-inner h3 { font-size: 1.15rem; }
}

/* ==========================================================================
   Scroll progress bar -- fixed under the header, fills as the visitor
   scrolls the page. See header.php (#scrollProgressBar) and site.js.
   ========================================================================== */
.scroll-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 3px;
	background: #FCA00D;
	z-index: 1001; /* above .site-header's z-index: 999 */
	transition: width 0.1s linear;
	pointer-events: none;
}

/* ==========================================================================
   How It Works -- 6-stage agile process diagram (Home page).
   A responsive S-curve connector line (SVG, viewBox-scaled) sits behind a
   3-column x 2-row grid of stage nodes; nodes are placed on the grid via
   nth-child so the DOM keeps natural reading order (1-6) while the visual
   layout zigzags left-right-left, matching the reference "agile process"
   diagram video the client provided.
   ========================================================================== */
.process-6-section {
	background: linear-gradient(135deg, #081B3A 0%, #0F2A4A 100%);
}

.process-6-section .section-subtitle {
	color: var(--gray-300, #CDD2DA);
}

/* Fix: "Our" and "Process" (the text outside the <span>) inherit the default
   navy .section-title color, which is invisible against this section's dark navy
   background -- only the blue <span>Agile Development</span> portion was visible. */
.process-6-section .section-title {
	color: var(--white);
}

/* Remove the connecting line + yellow dots overlay across the 6 process boxes
   per client request -- .process-6-line is a purely decorative absolute-positioned
   SVG overlay (path = line, circle = dots), safe to hide without affecting the
   .process-6-nodes grid layout underneath it. */
.process-6-line {
	display: none;
}

.process-6-diagram {
	position: relative;
}

.process-6-line {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.process-6-line path {
	fill: none;
	stroke: var(--blue-light);
	stroke-width: 1.5;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	opacity: 0.55;
}

.process-6-line circle {
	fill: #FCA00D;
}

.process-6-nodes {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, auto);
	gap: 40px 24px;
}

.process-6-node:nth-child(1) { grid-column: 1; grid-row: 1; }
.process-6-node:nth-child(2) { grid-column: 2; grid-row: 1; }
.process-6-node:nth-child(3) { grid-column: 3; grid-row: 1; }
.process-6-node:nth-child(4) { grid-column: 3; grid-row: 2; }
.process-6-node:nth-child(5) { grid-column: 2; grid-row: 2; }
.process-6-node:nth-child(6) { grid-column: 1; grid-row: 2; }

.process-6-node {
	position: relative;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--radius);
	padding: 24px 20px;
	text-align: center;
}

.process-6-num {
	position: absolute;
	top: 12px;
	right: 16px;
	font-size: 0.7rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.35);
	letter-spacing: 1px;
}

.process-6-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(252, 160, 13, 0.15);
	color: #FCA00D;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	margin: 0 auto 14px;
}

.process-6-node h4 {
	color: var(--white);
	font-size: 1.05rem;
	margin-bottom: 8px;
}

.process-6-node p {
	color: var(--gray-300, #CDD2DA);
	font-size: 0.85rem;
	line-height: 1.6;
	margin: 0;
}

/* Sprint-loop callout under the Development node, echoing the reference video's sprint-cycle visual for the agile phase of the process. */
.process-6-sprint-loop {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}

.process-6-sprint-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #FCA00D;
	opacity: 0.85;
}

.process-6-sprint-label {
	width: 100%;
	margin-top: 6px;
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.3px;
}

.process-6-sprint-label i {
	margin-right: 4px;
	color: #FCA00D;
}

@media (max-width: 900px) {
	.process-6-line { display: none; }
	.process-6-nodes {
		grid-template-columns: 1fr;
	}
	.process-6-node:nth-child(1),
	.process-6-node:nth-child(2),
	.process-6-node:nth-child(3),
	.process-6-node:nth-child(4),
	.process-6-node:nth-child(5),
	.process-6-node:nth-child(6) {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ==========================================================================
   Permanent WhatsApp floating button (Home Page Changes batch, item 4).
   Bottom-right, fixed. Reserved space on the left for a future Tawk.to
   chat widget (added separately once the client supplies its widget code)
   so the two don't overlap.
   ========================================================================== */
.whatsapp-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 56px;
	height: 56px;
	background: #25D366;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	z-index: 1500;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	color: #fff;
}
@media (max-width: 600px) {
	.whatsapp-float {
		right: 16px;
		bottom: 16px;
		width: 50px;
		height: 50px;
		font-size: 24px;
	}
}

/* ==========================================================================
   Exit-intent lead-capture popup. See parts/modals/exit-intent.php and
   the trigger/submit logic in site.js.
   ========================================================================== */
.exit-intent-overlay {
	position: fixed;
	inset: 0;
	background: rgba(8, 27, 58, 0.65);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 2000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
}

.exit-intent-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

body.exit-intent-open {
	overflow: hidden;
}

.exit-intent-modal {
	position: relative;
	background: var(--white);
	border-radius: var(--radius);
	max-width: 540px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 32px;
	box-shadow: 0 24px 64px rgba(8, 27, 58, 0.35);
	transform: translateY(12px);
	transition: transform 0.25s ease;
}

.exit-intent-overlay.is-active .exit-intent-modal {
	transform: translateY(0);
}

.exit-intent-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--gray-100);
	color: var(--gray-600);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.exit-intent-close:hover {
	background: var(--gray-200);
}

.exit-intent-modal h3 {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--navy);
	margin: 0 0 8px;
	padding-right: 32px;
}

.exit-intent-sub {
	color: var(--gray-500);
	font-size: 0.92rem;
	margin: 0 0 20px;
	line-height: 1.6;
}

.exit-intent-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.exit-intent-field {
	margin-bottom: 14px;
}

.exit-intent-field label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--gray-600);
	margin-bottom: 6px;
}

.exit-intent-field .req {
	color: #E53E3E;
}

.exit-intent-field input[type="text"],
.exit-intent-field input[type="email"],
.exit-intent-field input[type="tel"],
.exit-intent-field select,
.exit-intent-field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--gray-200);
	border-radius: var(--radius);
	font-size: 0.9rem;
	font-family: inherit;
	background: var(--gray-50);
	color: var(--navy);
}

.exit-intent-field input:focus,
.exit-intent-field select:focus,
.exit-intent-field textarea:focus {
	outline: none;
	border-color: var(--blue);
	background: var(--white);
}

.exit-intent-field textarea {
	resize: vertical;
}

.exit-intent-checks {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.exit-intent-checks label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--gray-700);
	margin: 0;
}

.exit-intent-checks input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.exit-intent-consent {
	font-size: 0.78rem;
	color: var(--gray-500);
	line-height: 1.5;
	margin: 4px 0 18px;
}

.exit-intent-consent a {
	color: var(--blue);
	text-decoration: underline;
}

.exit-intent-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}

.exit-intent-submit {
	width: 100%;
}

.exit-intent-status {
	margin: 12px 0 0;
	font-size: 0.85rem;
	text-align: center;
	min-height: 1.2em;
}

.exit-intent-status.is-success {
	color: var(--green, #16A34A);
}

.exit-intent-status.is-error {
	color: #E53E3E;
}

@media (max-width: 480px) {
	.exit-intent-modal {
		padding: 24px 20px;
	}
	.exit-intent-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}


/* ==========================================================================
   Hiring comparison table (Javixor vs In-House Hiring vs Freelance
   Marketplaces) -- PILOT: currently only rendered on /hire-react-developer/
   pending sign-off, see javixor_render_hiring_comparison_table() in
   functions.php.
   ========================================================================== */

.hiring-comparison-section .section-subtitle {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.hiring-comparison-wrap {
	overflow-x: auto;
	border-radius: var(--radius-lg);
	border: 1px solid var(--gray-200);
	background: var(--gray-50);
}

.hiring-comparison-table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.hiring-comparison-table th,
.hiring-comparison-table td {
	padding: 16px 20px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--gray-200);
}

.hiring-comparison-table thead th {
	background: var(--gray-100);
	color: var(--navy);
	font-weight: 700;
	border-bottom: 2px solid var(--gray-200);
	white-space: nowrap;
}

.hiring-comparison-table tbody tr:last-child th,
.hiring-comparison-table tbody tr:last-child td {
	border-bottom: none;
}

.hiring-comparison-table .row-label-col {
	font-weight: 600;
	color: var(--navy);
	white-space: nowrap;
}

.hiring-comparison-table td i {
	margin-right: 8px;
}

.hiring-comparison-table td span {
	color: var(--gray-700);
}

.hiring-comparison-table .check { color: var(--green); }
.hiring-comparison-table .xmark { color: var(--red); }
.hiring-comparison-table .neutral { color: var(--gray-400); }

.hiring-comparison-table td.javixor-col {
	background: var(--blue-muted);
}

.hiring-comparison-table thead th.javixor-col {
	background: var(--blue);
	color: var(--white);
}


/* Newsletter signup status text (Blog page "Subscribe" section, on the
   teal gradient background -- see .newsletterForm in page-blog.php). */
.newsletter-status {
	margin: 12px 0 0;
	font-size: 0.85rem;
	text-align: center;
	min-height: 1.2em;
	color: rgba(255, 255, 255, 0.85);
}

.newsletter-status.is-success {
	color: #5EEAD4;
	font-weight: 600;
}

.newsletter-status.is-error {
	color: #FCA5A5;
	font-weight: 600;
}