/* Limit custom logo size in header (same as fallback: 182×140) */
#header .header-logo img,
#header .header-logo .custom-logo {
	max-width: 182px;
	max-height: 140px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Fix header overlap on pages with transparent header */
.main-header-fix {
	padding-top: 180px !important;
}

@media (max-width: 991px) {
	.main-header-fix {
		padding-top: 160px !important;
	}
}

@media (max-width: 575px) {
	.main-header-fix {
		padding-top: 140px !important;
	}
}

/* Change header background color to #212529 on all pages except front page */
body:not(.home) #header .header-body.bg-dark {
	background-color: #212529 !important;
}

/* Also change header-top background if it has a background color */
body:not(.home) #header .header-top {
	background-color: #212529 !important;
}

/* Fix word-rotator text truncation on mobile */
@media (max-width: 991px) {
	/* Reduce font size on mobile to ensure text fits within container */
	.word-rotator.text-12 {
		font-size: 2.2em !important;
		line-height: 1.3 !important;
	}
	
	/* Ensure word-rotator-words width is constrained to container */
	.word-rotator .word-rotator-words {
		max-width: 100% !important;
	}
	
	/* Ensure the word rotator container doesn't clip text */
	.word-rotator {
		overflow-x: visible !important;
	}
	
	/* Ensure parent column doesn't clip */
	.section .container .row .col {
		overflow-x: visible !important;
	}
}

@media (max-width: 575px) {
	/* Further reduce font size on very small screens */
	.word-rotator.text-12 {
		font-size: 1.8em !important;
		line-height: 1.2 !important;
	}
}

/* Fix blog archive featured image alignment - ensure consistent 16:9 aspect ratio */
.blog-posts .post-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	/* Fallback for older browsers */
	padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
	height: 0;
}

.blog-posts .post-image a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

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

/* Modern browser support - override padding-bottom when aspect-ratio is supported */
@supports (aspect-ratio: 16 / 9) {
	.blog-posts .post-image {
		padding-bottom: 0;
		height: auto;
	}
}

/* Fix front page blog section featured image alignment - ensure consistent 16:9 aspect ratio */
.card > a {
	position: relative;
	overflow: hidden;
	display: block;
	aspect-ratio: 16 / 9;
	/* Fallback for older browsers */
	padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
	height: 0;
}

.card .card-img-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Modern browser support - override padding-bottom when aspect-ratio is supported */
@supports (aspect-ratio: 16 / 9) {
	.card > a {
		padding-bottom: 0;
		height: auto;
	}
}

.wp-block-heading{
	margin-bottom: 13px !important;
	margin-top: 33px;
}

.page-header{
margin: 0 !important;
}

/* Hero Parallax Effect */
.hero-parallax {
	position: relative;
	overflow: hidden;
}

.hero-parallax-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	min-height: 120%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	will-change: transform;
	z-index: 1; /* Behind overlay (z-index: 2) but visible */
	transform: translate3d(0, var(--parallax-y, 0), 0);
}

/* Ensure content is above overlay */
.hero-parallax .container {
	position: relative;
	z-index: 3; /* Above overlay (z-index: 2) */
}

/* Disable parallax on mobile devices for better performance */
@media (max-width: 991px) {
	.hero-parallax-bg {
		height: 100%;
		transform: translate3d(0, 0, 0) !important;
	}
}

/* Explore Capabilities - card-based layout */
.explore-capabilities-section a,
.explore-capabilities-section a:hover,
.explore-capabilities-section a:focus {
	text-decoration: none;
	color: inherit;
}

.explore-capabilities-section {
	background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%);
	padding: 4.5rem 0 5rem;
}

.explore-capabilities-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.explore-capabilities-header {
	margin-bottom: 3rem;
}

.explore-capabilities-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0 0 0.75rem 0;
}

.explore-capabilities-intro {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #475569;
	margin: 0;
}

.explore-capabilities-nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.explore-capabilities-card {
	display: block;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 36px 40px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.2s ease;
}

.explore-capabilities-card:hover {
	border-color: #cbd5e1;
}

.explore-capabilities-card:hover .explore-capabilities-cta {
	color: #0f172a;
}

.explore-capabilities-card:hover .explore-capabilities-arrow {
	transform: translateX(4px);
}

.explore-capabilities-number {
	display: block;
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1;
	color: #94a3b8;
	opacity: 0.5;
	letter-spacing: -0.02em;
	margin-bottom: 0.75rem;
}

.explore-capabilities-card:hover .explore-capabilities-number {
	text-decoration: underline;
	text-decoration-color: #007ecc;
}

.explore-capabilities-card-title {
	font-size: 1.25rem;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin: 0 0 0.75rem 0;
}

.explore-capabilities-card-desc {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #64748b;
	margin: 0 0 1.25rem 0;
}

.explore-capabilities-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #334155;
	transition: color 0.2s ease;
}

.explore-capabilities-arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

/* Desktop: 3 columns, more gap between cards */
@media (min-width: 992px) {
	.explore-capabilities-section {
		padding: 5.5rem 0 6rem;
	}

	.explore-capabilities-nav {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.75rem;
	}

	.explore-capabilities-card {
		padding: 38px 40px;
	}
}

@media (max-width: 991px) {
	.explore-capabilities-card {
		padding: 32px 36px;
	}
}

/* Service sections: outcome-focused layouts (#web-applications, #websites, #maintenance) */
#web-applications .service-outcomes,
#websites .service-outcomes,
#maintenance .service-outcomes,
#web-applications .service-outcomes-list,
#websites .service-outcomes-list,
#maintenance .service-outcomes-list {
	margin-bottom: 1rem;
}

.service-outcome-block {
	font-size: 1rem;
	line-height: 1.55;
	margin-bottom: 1rem;
}

.service-outcome-block:last-child {
	margin-bottom: 0;
}

.service-outcomes-list {
	list-style: disc;
	padding-left: 1.25rem;
}

.service-outcomes-list li {
	margin-bottom: 0.5rem;
}

.service-outcomes-list li:last-child {
	margin-bottom: 0;
}

.service-typical-outcomes {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	font-weight: 600;
	text-transform: uppercase;
	opacity: 0.75;
	margin: 0;
}

/* First Week Deliverables – clean steps bar (no cards) */
.first-week-deliverables-section {
	padding-top: 4.5rem;
	padding-bottom: 5rem;
}

.first-week-steps {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0;
}

.first-week-step {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	position: relative;
}

.first-week-dot {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #007ecc;
	margin-bottom: 0.5rem;
}

.first-week-step-num {
	display: block;
	font-size: 1.125rem;
	font-weight: 600;
	color: #64748b;
	letter-spacing: -0.02em;
	margin-bottom: 0.35rem;
}

.first-week-step-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0 0 0.25rem 0;
}

.first-week-step-desc {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #64748b;
	margin: 0;
}

.first-week-line {
	flex: 0 0 1.5rem;
	width: 1.5rem;
	height: 1px;
	min-height: 1px;
	align-self: center;
	background: #e2e8f0;
	margin: 0 0.5rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 992px) {
	.first-week-steps {
		flex-wrap: nowrap;
	}

	.first-week-step {
		flex: 1 1 0;
	}

	.first-week-line {
		flex: 0 0 2rem;
		width: 2rem;
		margin: 2.5rem 0.25rem 0;
	}
}

@media (max-width: 991px) {
	.first-week-steps {
		flex-direction: column;
	}

	.first-week-step {
		padding-bottom: 1rem;
	}

	.first-week-line {
		width: 1px;
		height: 1.25rem;
		min-height: 1.25rem;
		margin: 0 0 0 0.6rem;
		align-self: flex-start;
	}
}

/* Section 3: Web Applications – Product Preview Frame */
.product-preview-frame {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}

.product-preview-frame-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: #f1f5f9;
	border-bottom: 1px solid #e2e8f0;
}

.product-preview-frame-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #cbd5e1;
}

.product-preview-frame-dot:first-child { background: #94a3b8; }
.product-preview-frame-content {
	background: #f8fafc;
	min-height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-preview-frame-content img {
	display: block;
}

.product-preview-frame-caption {
	font-size: 0.8125rem;
	color: #64748b;
	margin: 0;
	padding: 10px 14px;
	border-top: 1px solid #e2e8f0;
	background: #fafbfc;
}

/* Tech stack pills (Section 3) */
.tech-stack-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tech-stack-pill {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #475569;
	background: #e2e8f0;
	padding: 4px 10px;
	border-radius: 4px;
	letter-spacing: 0.01em;
}

/* Section 4: Websites – What You Get capability cards */
.what-you-get-cards {
	margin-top: 0;
}

/* Section 5: Maintenance feature cards */
.maintenance-feature-cards {
	margin-bottom: 0;
}

.maintenance-feature-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1.5rem 1.25rem;
	height: 100%;
}

.maintenance-feature-card-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f5f9;
	border-radius: 6px;
	margin-bottom: 1rem;
	color: #007ecc;
	font-size: 1.125rem;
}

.maintenance-feature-card-title {
	font-size: 1rem;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 0.5rem 0;
	line-height: 1.3;
}

.maintenance-feature-card-desc {
	font-size: 0.875rem;
	line-height: 1.5;
	color: #64748b;
	margin: 0;
}

/* ==========================================================================
   Homepage CTA section – premium dark block (after service sections)
   ========================================================================== */
.home-cta-section {
	position: relative;
	/* Slightly darker, more decisive navy base (same family as hero, not identical) */
	background: linear-gradient(145deg, #0a0f1a 0%, #0d1321 45%, #0f172a 100%);
}

.home-cta-section .hero-parallax-bg {
	z-index: 1;
}

/* Optional background image: keep but make subtle (low opacity + blur) */
.home-cta-section-bg {
	opacity: 0.28;
	filter: blur(3px);
}

/* Main dark overlay – improves text readability */
.home-cta-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 15, 26, 0.82) 0%, rgba(13, 19, 33, 0.88) 100%);
	pointer-events: none;
	z-index: 2;
}

/* Subtle diagonal accent gradient – custom, not flat */
.home-cta-section::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(15, 23, 42, 0.4) 0%, transparent 50%, rgba(30, 41, 59, 0.25) 100%);
	pointer-events: none;
	z-index: 2;
}

.home-cta-section .container {
	z-index: 3;
}

/* Typography: bigger headline, improved spacing */
.home-cta-section-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.home-cta-section-desc {
	line-height: 1.65;
	opacity: 0.92;
	max-width: 42em;
	margin-left: auto;
	margin-right: auto;
}

/* CTA button – slightly larger, pop with shadow and clear hover/focus */
.home-cta-section-btn {
	font-size: 1.0625rem;
	padding: 0.75rem 1.75rem !important;
	min-height: 52px;
	box-shadow: 0 4px 14px rgba(0, 126, 204, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.home-cta-section-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 126, 204, 0.45);
}

.home-cta-section-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.8);
	outline-offset: 3px;
}

/* Micro-trust line under button */
.home-cta-section-trust {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 400;
}