/* ==========================================================================
   AK ENTERPRISES — HOMEPAGE-ONLY CSS
   Enqueued only on the front page (see functions.php: ak_enqueue_home_assets).
   Covers the hero's layered background and the process timeline connector.
   Static/CSS-only for Phase 2; Phase 4 adds GSAP motion on top of this
   structure without changing these classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* "Pure Water Better Tomorrow" hero redesign (reference-matched, 2026-08-16;
   moved to a LIGHT theme same day after a clearer reference showed a
   white-to-pale-blue background with dark navy text; moved back to a DARK
   theme 2026-08-16 once the static hero photo was replaced with a looping
   background video on the hero container itself (Elementor's native
   background_background:'video' + background_overlay_* controls on
   000001r -- no underscore prefix, unlike the common/advanced "_background_*"
   controls every widget/container also exposes; verified via
   elements_manager->get_element_types('container')->get_controls() after an
   underscore-prefixed attempt silently no-op'd). The dark navy overlay over
   the video is what guarantees text contrast regardless of what's playing
   underneath, so the text goes back to white/light rather than navy. */
.ak-hero {
	position: relative;
	overflow: hidden;
	background: var(--ak-dark-bg) !important;
}

.ak-hero__title {
	font-family: var(--ak-font-heading);
	font-weight: 700;
	font-size: var(--fs-h1);
	line-height: 1.15;
	color: var(--ak-white);
	margin: 0;
}
.ak-hero__accent {
	position: relative;
	display: inline-block;
}
.ak-hero__accent::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 4px;
	border-radius: var(--radius-pill);
	background: #FDB813;
}

/* Trust-badge row (Expert Technicians / Quality Products / Reliable Service).
   Built as an Elementor icon-list widget (view: inline) rather than raw
   <i> icon tags -- confirmed live that its icons render as inline SVG via
   Elementor's own icon pipeline (.e-font-icon-svg, tinted with currentColor,
   same approach already proven for .elementor-icon-box-icon elsewhere), so
   they don't depend on a separate Font Awesome webfont/CSS being loaded. */
.ak-hero__badges-list .elementor-icon-list-items {
	gap: var(--space-6);
	row-gap: var(--space-4);
}
.ak-hero__badges-list .elementor-icon-list-item { color: var(--ak-white); }
.ak-hero__badges-list .elementor-icon-list-text {
	color: var(--ak-white) !important;
	font-family: var(--ak-font-heading);
	font-weight: 500;
	font-size: var(--fs-small);
}
.ak-hero__badges-list .elementor-icon-list-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-inline-end: var(--space-2);
	color: var(--ak-teal);
}
.ak-hero__badges-list .elementor-icon-list-icon svg { width: 16px; height: 16px; }

/* Decorative CSS-only layers (blueprint grid, particle dots, wave
   silhouette, glow) were built to add visual interest behind a flat
   gradient. Now that the hero has a real background video (Elementor's
   native container background_background:'video'), they'd just compete
   with it, so the whole layer is hidden rather than deleting the markup
   (000001l-o text-editor widgets) that renders them. */
.ak-hero__bg { display: none !important; }

.ak-hero > .elementor-container,
.ak-hero > div { position: relative; z-index: 1; }

.ak-hero__scroll-indicator {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: rgba(255,255,255,0.75);
	font-size: var(--fs-small);
	justify-content: center;
}
.ak-hero__scroll-indicator span {
	width: 22px;
	height: 36px;
	border: 2px solid rgba(255,255,255,0.35);
	border-radius: var(--radius-pill);
	position: relative;
	flex-shrink: 0;
}
.ak-hero__scroll-indicator span::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 50%;
	width: 4px;
	height: 8px;
	background: var(--ak-teal);
	border-radius: var(--radius-pill);
	transform: translateX(-50%);
	animation: ak-scroll-dot 1.8s ease-in-out infinite;
}
@keyframes ak-scroll-dot {
	0% { top: 6px; opacity: 1; }
	80% { top: 20px; opacity: 0; }
	100% { top: 6px; opacity: 0; }
}

/* Process timeline CSS moved to components.css (site-wide) since Phase 3's
   About page reuses .ak-timeline and this file only loads on the front page. */

/* --------------------------------------------------------------------------
   Process section (reference-matched 2026-08-16, redesigned 2026-08-18) --
   deliberately a NEW .ak-process* namespace rather than restyling
   .ak-timeline, since that class is shared with the About page's simpler
   timeline (components.css) and this structure would break it there.

   First pass put the 5 icons in their own connector row above the cards,
   floating and disconnected. At real desktop widths (>1400px) that read as
   unfinished: cards stretched wide with lots of dead space, the circle row
   didn't line up precisely with the cards under it, and the separate small
   badge icon at the bottom of each card sat isolated in whitespace.
   Redesigned to fold the icon + step number into the top of each card
   (one less moving part, no cross-row alignment to maintain), dropped the
   redundant badge icon, and replaced the fragile per-gap dot connectors
   with a single line drawn behind the whole row: since every card has the
   same opaque white background and identical top padding/icon size, the
   line only shows through in the gaps *between* cards -- no per-viewport
   math needed for it to line up correctly. */
.ak-process__lead {
	max-width: 640px;
	text-align: center;
	color: var(--ak-text-muted);
	margin: 0 auto;
}

.ak-process { gap: var(--space-8); }

/* Cards row: equal-width flex row (not CSS grid -- Elementor's own Container
   element ships dormant grid-mode custom properties, e.g. a default
   grid-auto-flow, that activate the moment `display:grid` is forced from
   outside and stack items into one column instead of 5; flex sidesteps
   that entirely). */
.ak-process__cards {
	position: relative;
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--space-5);
}
/* !important throughout: Elementor's own generated CSS gives every
   container's ::before a background-overlay/border role (content, height,
   position etc.), which loads after this stylesheet and otherwise wins the
   cascade outright for every property on this pseudo-element, not just the
   ones it actually sets meaningfully -- confirmed via computed style
   showing content:none and Elementor's own overlay height formula here
   before !important was added. */
.ak-process__cards::before {
	content: '' !important;
	position: absolute !important;
	left: 0 !important; right: 0 !important;
	top: calc(var(--space-5) + 32px) !important; /* card padding-top + half the 64px icon */
	height: 2px !important;
	background: linear-gradient(90deg, var(--ak-teal), var(--ak-blue)) !important;
	opacity: 0.35 !important;
	z-index: 0 !important;
}
@media (max-width: 991px) {
	.ak-process__cards { flex-wrap: wrap !important; }
	.ak-process__cards::before { display: none; }
}
.ak-process__card {
	position: relative;
	z-index: 1;
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0;
	background: var(--ak-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	border: 1px solid rgba(11,31,58,0.06);
	overflow: hidden;
	padding: var(--space-5);
	gap: var(--space-2);
	transition: transform var(--dur-section) var(--ease-out), box-shadow var(--dur-section) var(--ease-out);
}
.ak-process__card::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important; left: 0 !important; right: 0 !important;
	height: 4px !important;
	background: linear-gradient(90deg, var(--ak-teal), var(--ak-blue)) !important;
	opacity: 0 !important;
	transition: opacity var(--dur-section) var(--ease-out);
}
@media (max-width: 991px) {
	.ak-process__card { flex: 1 1 45% !important; }
}
@media (max-width: 575px) {
	.ak-process__card { flex: 1 1 100% !important; }
}
.ak-process__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ak-process__card:hover::before { opacity: 1 !important; }

.ak-process__card-head {
	flex: 0 0 auto !important;
	margin-bottom: var(--space-3);
}
.ak-process__icon {
	flex: 0 0 auto !important;
	width: auto !important;
}
.ak-process__icon .elementor-icon-box-icon {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--ak-white) !important;
	box-shadow: var(--shadow-sm);
}
.ak-process__icon .elementor-icon-box-icon::before {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	background: conic-gradient(from 200deg, var(--ak-teal), var(--ak-blue) 55%, var(--ak-navy) 100%);
	z-index: -1;
}
.ak-process__icon .elementor-icon-box-icon .elementor-icon {
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--ak-blue-text) !important;
}
.ak-process__icon .elementor-icon-box-icon svg { width: 24px; height: 24px; fill: var(--ak-blue-text) !important; }
.ak-process__number {
	font-family: var(--ak-font-heading);
	font-weight: 700;
	font-size: 1.75rem;
	color: var(--ak-teal);
	opacity: 0.9;
}
.ak-process__title {
	font-family: var(--ak-font-heading);
	font-weight: 700;
	font-size: var(--fs-h4);
	color: var(--ak-navy);
	margin: 0 0 var(--space-3);
	position: relative;
	padding-bottom: var(--space-3);
	flex: 0 0 auto;
}
.ak-process__title::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 32px; height: 3px;
	border-radius: var(--radius-pill);
	background: linear-gradient(90deg, var(--ak-teal), var(--ak-blue));
}
.ak-process__desc {
	color: var(--ak-text-muted);
	font-size: var(--fs-small);
	margin: 0;
	flex: 1 1 auto;
}

/* Trust bar: 4 compact icon+text items in a bordered card below the steps. */
.ak-process__trust {
	margin-top: var(--space-6);
	background: var(--ak-white);
	border: 1px solid rgba(11,31,58,0.08);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--space-5);
	padding: var(--space-5) var(--space-6);
}
.ak-process__trust-item {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0;
}
@media (max-width: 767px) {
	.ak-process__trust { flex-wrap: wrap !important; }
	.ak-process__trust-item { flex: 1 1 45% !important; }
}
.ak-process__trust-item .elementor-icon-box-icon {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50%;
	background: rgba(0,159,227,0.1) !important;
	flex-shrink: 0;
}
.ak-process__trust-item .elementor-icon-box-icon .elementor-icon {
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--ak-blue-text) !important;
}
.ak-process__trust-item .elementor-icon-box-icon svg { width: 18px; height: 18px; fill: var(--ak-blue-text) !important; }
.ak-process__trust-item .elementor-icon-box-title {
	color: var(--ak-navy);
	font-size: var(--fs-body);
	font-weight: 700;
	margin: 0 0 4px;
}
.ak-process__trust-item .elementor-icon-box-description {
	font-size: var(--fs-small);
	color: var(--ak-text-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Anchor offset so #services doesn't hide under the fixed header
   -------------------------------------------------------------------------- */
[id]::before {
	content: '';
	display: block;
	height: 100px;
	margin-top: -100px;
	visibility: hidden;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Compact card variant used for the 8-up Industries grid (elevated
   2026-08-18: all 8 previously shared one generic fa-building icon with no
   description, reading as flat and repetitive -- each now has its own
   icon + one-line description, set via an Elementor data patch on post 22,
   with the card styling refined here to match.)
   -------------------------------------------------------------------------- */
.ak-card--compact {
	padding: var(--space-6) var(--space-4);
	text-align: center;
	border: 1px solid rgba(11,31,58,0.06);
}
.ak-card--compact .elementor-icon-box-icon {
	margin: 0 auto var(--space-4);
	transition: transform var(--dur-section) var(--ease-out);
}
.ak-card--compact:hover .elementor-icon-box-icon { transform: scale(1.08) rotate(-4deg); }
.ak-card--compact .elementor-icon-box-title {
	font-size: var(--fs-body-lg);
	margin-bottom: var(--space-2);
}
.ak-card--compact .elementor-icon-box-description {
	font-size: var(--fs-small);
	color: var(--ak-text-muted);
	line-height: 1.6;
	margin: 0;
}