/* ==========================================================================
   Web CircleZ Pro — Premium UI Refine (final cascade)
   Unifies brand, elevates buttons/cards/header/footer/forms sitewide.
   Brand locked: cyan #00c2e5 · navy #0a1628 · Plus Jakarta + DM Sans
   ========================================================================== */

:root {
	--wcz-primary: #00c2e5;
	--wcz-primary-dark: #0099b8;
	--wcz-accent: #007a94;
	--wcz-accent-light: #00c2e5;
	--wcz-link: #00c2e5;
	--wcz-link-hover: #007a94;
	--wcz-gradient: linear-gradient(135deg, #00d4f0 0%, #00c2e5 48%, #0099b8 100%);
	--wcz-gradient-text: linear-gradient(135deg, #00c2e5 0%, #007a94 100%);

	--wcz-radius: 14px;
	--wcz-radius-lg: 20px;
	--wcz-radius-xl: 28px;
	--wcz-radius-full: 9999px;

	--wcz-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
	--wcz-shadow: 0 8px 28px rgba(15, 23, 42, 0.07);
	--wcz-shadow-md: 0 16px 40px rgba(15, 23, 42, 0.1);
	--wcz-shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.12);
	--wcz-shadow-glow: 0 12px 40px rgba(0, 194, 229, 0.22);
	--wcz-shadow-glow-lg: 0 16px 48px rgba(0, 194, 229, 0.32), 0 0 0 1px rgba(0, 194, 229, 0.08);

	--wcz-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--wcz-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--wcz-transition: 0.35s var(--wcz-ease);
	--wcz-transition-slow: 0.55s var(--wcz-ease);

	--wcz-section-pad-y: clamp(48px, 6vw, 88px);
	--wcz-section-header-gap: clamp(28px, 3.5vw, 44px);
	--wcz-prose-width: 62ch;

	--wcz-glass: rgba(255, 255, 255, 0.78);
	--wcz-glass-border: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   Typography — clearer hierarchy
   -------------------------------------------------------------------------- */
.wcz-section-title,
.wcz-home-section-title,
.wcz-premium-services-title,
.wcz-home-about-title,
.wcz-section-title--live {
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.wcz-section-desc,
.wcz-home-section-desc,
.wcz-premium-services-desc {
	max-width: 42rem;
	line-height: 1.75;
	color: var(--wcz-text-muted);
}

.wcz-section-label,
.wcz-home-section-eyebrow,
.wcz-premium-services-eyebrow {
	letter-spacing: 0.12em;
	color: var(--wcz-primary-text, #007a94);
}

/* Global keyboard focus */
:focus-visible {
	outline: 2px solid var(--wcz-primary);
	outline-offset: 3px;
}

.wcz-btn:focus:not(:focus-visible),
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
	outline: none;
}

/* --------------------------------------------------------------------------
   Buttons — luxurious, consistent, GPU-friendly
   -------------------------------------------------------------------------- */
.wcz-btn {
	--wcz-btn-pad-y: 12px;
	--wcz-btn-pad-x: 24px;
	--wcz-btn-font: 0.875rem;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: var(--wcz-btn-pad-y) var(--wcz-btn-pad-x);
	font-family: var(--wcz-font);
	font-size: var(--wcz-btn-font);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.1;
	border-radius: var(--wcz-radius-full);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transform: translateZ(0);
	transition:
		transform var(--wcz-transition),
		box-shadow var(--wcz-transition),
		border-color var(--wcz-transition),
		background var(--wcz-transition),
		color var(--wcz-transition),
		filter var(--wcz-transition);
}

.wcz-btn-sm {
	--wcz-btn-pad-y: 9px;
	--wcz-btn-pad-x: 18px;
	--wcz-btn-font: 0.8125rem;
}

.wcz-btn-lg {
	--wcz-btn-pad-y: 14px;
	--wcz-btn-pad-x: 30px;
	--wcz-btn-font: 0.9375rem;
}

.wcz-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 35%,
		rgba(255, 255, 255, 0.28) 50%,
		transparent 65%
	);
	transform: translateX(-120%);
	transition: transform 0.65s var(--wcz-ease);
	pointer-events: none;
	z-index: 1;
}

.wcz-btn:hover::before {
	transform: translateX(120%);
}

.wcz-btn > * {
	position: relative;
	z-index: 2;
}

.wcz-btn-primary {
	background: var(--wcz-gradient);
	color: #fff !important;
	border-color: transparent;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.25) inset,
		0 8px 24px rgba(0, 194, 229, 0.32);
}

.wcz-btn-primary:hover {
	transform: translateY(-3px);
	color: #fff !important;
	box-shadow: var(--wcz-shadow-glow-lg);
	filter: brightness(1.04);
}

.wcz-btn-primary:active {
	transform: translateY(-1px) scale(0.985);
	filter: brightness(0.98);
}

.wcz-btn-outline {
	background: rgba(255, 255, 255, 0.88);
	color: var(--wcz-text-heading);
	border: 1.5px solid rgba(0, 194, 229, 0.45);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--wcz-shadow-sm);
}

.wcz-btn-outline:hover {
	transform: translateY(-2px);
	color: var(--wcz-primary-dark);
	border-color: var(--wcz-primary);
	background: rgba(0, 194, 229, 0.08);
	box-shadow: 0 10px 28px rgba(0, 194, 229, 0.14);
}

.wcz-btn-ghost {
	background: var(--wcz-bg-elevated);
	color: var(--wcz-text);
	border: 1px solid var(--wcz-border);
}

.wcz-btn-ghost:hover {
	transform: translateY(-2px);
	border-color: var(--wcz-border-hover);
	background: rgba(0, 194, 229, 0.06);
	color: var(--wcz-text-heading);
}

.wcz-btn-ghost-light {
	background: rgba(255, 255, 255, 0.1);
	color: #fff !important;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.wcz-btn-ghost-light:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: #fff;
	color: #fff !important;
	transform: translateY(-2px);
}

.wcz-btn:focus-visible {
	outline: 2px solid var(--wcz-primary);
	outline-offset: 3px;
}

.wcz-btn svg,
.wcz-btn .wcz-btn-arrow {
	transition: transform 0.35s var(--wcz-ease);
}

.wcz-btn:hover svg,
.wcz-btn:hover .wcz-btn-arrow {
	transform: translateX(3px);
}

.wcz-btn-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	transform: scale(0);
	animation: wcz-btn-ripple 0.6s ease-out forwards;
	pointer-events: none;
	z-index: 3;
}

@keyframes wcz-btn-ripple {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

/* CF7 / form submits match premium CTAs */
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"],
.wcz-cf7-wrap input.wpcf7-submit,
.wcz-home-cta-btn,
.wcz-pricing-live-btn,
.wcz-pricing-ecom-btn {
	border-radius: var(--wcz-radius-full) !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: transform var(--wcz-transition), box-shadow var(--wcz-transition), filter var(--wcz-transition);
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover,
.wcz-cf7-wrap input.wpcf7-submit:hover,
.wcz-home-cta-btn:hover,
.wcz-pricing-live-btn:hover,
.wcz-pricing-ecom-btn:hover {
	transform: translateY(-3px);
	box-shadow: var(--wcz-shadow-glow-lg);
}

/* --------------------------------------------------------------------------
   Cards — depth, soft glass, premium hover
   -------------------------------------------------------------------------- */
.wcz-premium-service-card,
.wcz-service-card,
.wcz-service-live-card,
.wcz-core-card,
.wcz-quick-card,
.wcz-feature-showcase,
.wcz-testimonial-card,
.wcz-contact-channel-card,
.wcz-process-icons-item,
.wcz-service-live-why-item,
.wcz-service-live-offer-card,
.wcz-review-live-card,
.wcz-pricing-card,
.wcz-pricing-ecom-card,
.wcz-home-why-card {
	border-radius: var(--wcz-radius-lg) !important;
	transition:
		transform 0.45s var(--wcz-ease),
		box-shadow 0.45s var(--wcz-ease),
		border-color 0.35s ease,
		background 0.35s ease !important;
}

.wcz-premium-service-card {
	background: linear-gradient(165deg, #ffffff 0%, #f7fbfd 100%);
	border: 1px solid rgba(15, 23, 42, 0.06);
	box-shadow: var(--wcz-shadow-sm);
}

@media (hover: hover) {
	.wcz-premium-service-card:hover,
	.wcz-service-card:hover,
	.wcz-service-live-card:hover,
	.wcz-core-card:hover,
	.wcz-quick-card:hover,
	.wcz-feature-showcase:hover,
	.wcz-testimonial-card:hover,
	.wcz-contact-channel-card:hover,
	.wcz-process-icons-item:hover,
	.wcz-service-live-why-item:hover,
	.wcz-service-live-offer-card:hover,
	.wcz-review-live-card:hover,
	.wcz-pricing-card:hover,
	.wcz-pricing-ecom-card:hover,
	.wcz-home-why-card:hover {
		transform: translateY(-8px);
		border-color: rgba(0, 194, 229, 0.28);
		box-shadow:
			0 22px 50px rgba(15, 23, 42, 0.1),
			0 0 0 1px rgba(0, 194, 229, 0.1),
			0 12px 36px rgba(0, 194, 229, 0.1);
	}

	.wcz-premium-service-card:hover .wcz-premium-service-icon,
	.wcz-service-card:hover .wcz-service-icon,
	.wcz-process-icons-item:hover .wcz-process-icons-icon {
		transform: translateY(-2px) scale(1.06);
		box-shadow: 0 8px 20px rgba(0, 194, 229, 0.2);
	}
}

.wcz-premium-service-icon,
.wcz-service-icon,
.wcz-feature-showcase-icon,
.wcz-quick-icon,
.wcz-core-icon,
.wcz-contact-channel-icon {
	border-radius: 16px;
	transition: transform 0.4s var(--wcz-ease), background 0.35s ease, box-shadow 0.35s ease;
}

/* --------------------------------------------------------------------------
   Header — glass sticky
   -------------------------------------------------------------------------- */
html:not(.wcz-dark-mode) body.wcz-header-scrolled .wcz-header::before,
html:not(.wcz-dark-mode) .wcz-header.scrolled::before {
	background: var(--wcz-glass) !important;
	border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
	box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06) !important;
	backdrop-filter: saturate(1.4) blur(16px) !important;
	-webkit-backdrop-filter: saturate(1.4) blur(16px) !important;
}

.wcz-nav-list > li > a {
	font-weight: 500;
	letter-spacing: -0.01em;
}

.wcz-nav-list > li > a::after {
	height: 2px;
	bottom: 4px;
	border-radius: 2px;
	background: var(--wcz-gradient);
	box-shadow: 0 0 12px rgba(0, 194, 229, 0.45);
}

/* --------------------------------------------------------------------------
   Footer — elegant soft surfaces
   -------------------------------------------------------------------------- */
.wcz-footer-live {
	background:
		radial-gradient(ellipse 80% 50% at 20% 0%, rgba(0, 194, 229, 0.12) 0%, transparent 55%),
		radial-gradient(ellipse 60% 40% at 90% 100%, rgba(0, 122, 148, 0.15) 0%, transparent 50%),
		#06274e;
}

.wcz-footer-live-accent {
	height: 3px;
	background: var(--wcz-gradient);
}

.wcz-footer-live-social-link {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	transition:
		transform 0.35s var(--wcz-ease),
		background 0.3s ease,
		border-color 0.3s ease,
		color 0.3s ease,
		box-shadow 0.35s ease;
}

.wcz-footer-live-social-link:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 194, 229, 0.25);
}

.wcz-footer-live-newsletter-panel {
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(0, 0, 0, 0.22);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.wcz-footer-live-subscribe input.wcz-footer-live-subscribe-input,
.wcz-footer-live-subscribe-input[type="email"] {
	border-radius: 12px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.wcz-footer-live-subscribe input.wcz-footer-live-subscribe-input:focus,
.wcz-footer-live-subscribe-input[type="email"]:focus {
	border-color: rgba(0, 194, 229, 0.65);
	box-shadow: 0 0 0 3px rgba(0, 194, 229, 0.18);
}

.wcz-footer-live-subscribe .wcz-footer-live-subscribe-btn,
.wcz-footer-live-subscribe-btn[type="submit"] {
	border-radius: 12px;
	background: var(--wcz-gradient);
	letter-spacing: 0.08em;
	transition: transform 0.35s var(--wcz-ease), box-shadow 0.35s ease, filter 0.3s ease;
}

.wcz-footer-live-subscribe .wcz-footer-live-subscribe-btn:hover,
.wcz-footer-live-subscribe-btn[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 194, 229, 0.35);
	filter: brightness(1.05);
}

.wcz-footer-live .wcz-back-to-top {
	border-radius: 12px;
	transition: transform 0.35s var(--wcz-ease), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.wcz-footer-live .wcz-back-to-top:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 194, 229, 0.35);
}

.wcz-footer-live-links a:hover {
	padding-left: 6px;
}

/* --------------------------------------------------------------------------
   Forms — soft focus rings
   -------------------------------------------------------------------------- */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="password"],
.wpcf7-form textarea,
.wpcf7-form select,
.wcz-cf7-wrap .wpcf7-form-control.wcz-cf7-field,
.wcz-cf7-wrap input.wpcf7-form-control:not([type="submit"]),
.wcz-cf7-wrap select.wpcf7-form-control,
.wcz-cf7-wrap textarea.wpcf7-form-control {
	border-radius: 12px !important;
	border: 1px solid rgba(15, 23, 42, 0.1);
	background: rgba(255, 255, 255, 0.95);
	transition:
		border-color 0.3s ease,
		box-shadow 0.3s ease,
		background 0.25s ease,
		transform 0.25s var(--wcz-ease);
}

/* Contact + Request a Quote — sharp (no radius) form controls */
.wcz-contact-page .wpcf7-form input[type="text"],
.wcz-contact-page .wpcf7-form input[type="email"],
.wcz-contact-page .wpcf7-form input[type="tel"],
.wcz-contact-page .wpcf7-form input[type="url"],
.wcz-contact-page .wpcf7-form textarea,
.wcz-contact-page .wpcf7-form select,
.wcz-contact-page .wcz-cf7-wrap .wpcf7-form-control.wcz-cf7-field,
.wcz-contact-page .wcz-cf7-wrap input.wpcf7-form-control:not([type="submit"]),
.wcz-contact-page .wcz-cf7-wrap select.wpcf7-form-control,
.wcz-contact-page .wcz-cf7-wrap textarea.wpcf7-form-control,
.wcz-contact-page .wpcf7-form input[type="submit"],
.wcz-contact-page .wcz-cf7-wrap input.wpcf7-submit,
.wcz-contact-page .wcz-btn-contact-send,
.wcz-quote-live-page .wpcf7-form input[type="text"],
.wcz-quote-live-page .wpcf7-form input[type="email"],
.wcz-quote-live-page .wpcf7-form input[type="tel"],
.wcz-quote-live-page .wpcf7-form input[type="url"],
.wcz-quote-live-page .wpcf7-form textarea,
.wcz-quote-live-page .wpcf7-form select,
.wcz-quote-live-page .wcz-cf7-wrap .wpcf7-form-control.wcz-cf7-field,
.wcz-quote-live-page .wcz-cf7-wrap input.wpcf7-form-control:not([type="submit"]),
.wcz-quote-live-page .wcz-cf7-wrap select.wpcf7-form-control,
.wcz-quote-live-page .wcz-cf7-wrap textarea.wpcf7-form-control,
.wcz-quote-live .wpcf7-form input[type="text"],
.wcz-quote-live .wpcf7-form input[type="email"],
.wcz-quote-live .wpcf7-form input[type="tel"],
.wcz-quote-live .wpcf7-form input[type="url"],
.wcz-quote-live .wpcf7-form textarea,
.wcz-quote-live .wpcf7-form select,
.wcz-quote-live .wcz-cf7-wrap .wpcf7-form-control.wcz-cf7-field,
.wcz-quote-live .wcz-cf7-wrap input.wpcf7-form-control:not([type="submit"]),
.wcz-quote-live .wcz-cf7-wrap select.wpcf7-form-control,
.wcz-quote-live .wcz-cf7-wrap textarea.wpcf7-form-control,
.wcz-quote-live .wpcf7-form input[type="submit"],
.wcz-quote-live .wcz-cf7-wrap input.wpcf7-submit,
.wcz-quote-live .wcz-btn-quote-send {
	border-radius: 0 !important;
}

.wcz-quote-live-shell {
	border-radius: 0 !important;
}

.wcz-contact-page .wcz-contact-form-wrap,
.wcz-contact-page .wcz-contact-form-panel,
.wcz-contact-page .wpcf7-response-output,
.wcz-quote-live .wpcf7-response-output {
	border-radius: 0 !important;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus,
.wcz-cf7-wrap .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--wcz-primary) !important;
	box-shadow: 0 0 0 4px rgba(0, 194, 229, 0.14), 0 8px 24px rgba(0, 194, 229, 0.08) !important;
	transform: translateY(-1px);
}

.wpcf7-not-valid-tip {
	font-size: 0.8125rem;
	color: var(--wcz-error, #ef4444);
	margin-top: 6px;
}

.wpcf7-form-control.wpcf7-not-valid {
	border-color: rgba(239, 68, 68, 0.55) !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* --------------------------------------------------------------------------
   Page banners & heroes
   -------------------------------------------------------------------------- */
.inner-page-banner__content,
.wcz-page-hero-banner-content {
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.inner-page-banner__title,
.wcz-page-hero-banner-title {
	letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Home sections — breathing room & polish
   -------------------------------------------------------------------------- */
.wcz-premium-services,
.wcz-home-about,
.wcz-home-why,
.wcz-home-process {
	padding-top: var(--wcz-section-pad-y);
	padding-bottom: var(--wcz-section-pad-y);
}

.wcz-premium-services {
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0, 194, 229, 0.06) 0%, transparent 60%),
		#f3f4f6;
}

.wcz-home-section-eyebrow,
.wcz-premium-services-eyebrow {
	box-shadow: 0 4px 16px rgba(0, 194, 229, 0.08);
}

/* --------------------------------------------------------------------------
   Service / contact / quote pages
   -------------------------------------------------------------------------- */
.wcz-service-live-includes .wcz-section-title--live::after,
.wcz-premium-services-divider-line {
	background: var(--wcz-gradient);
}

.wcz-contact-page {
	background:
		radial-gradient(circle at 12% 0%, rgba(0, 194, 229, 0.1), transparent 42%),
		radial-gradient(circle at 88% 20%, rgba(0, 153, 184, 0.06), transparent 40%),
		linear-gradient(180deg, #f8fbfd 0%, #ffffff 55%, #f6f9fb 100%);
}

/* --------------------------------------------------------------------------
   Scroll progress + loader polish
   -------------------------------------------------------------------------- */
.wcz-scroll-progress {
	height: 3px;
	background: var(--wcz-gradient);
	box-shadow: 0 0 16px rgba(0, 194, 229, 0.55);
}

/* --------------------------------------------------------------------------
   Dark mode compatibility
   -------------------------------------------------------------------------- */
html.wcz-dark-mode {
	--wcz-glass: rgba(10, 16, 28, 0.82);
	--wcz-glass-border: rgba(255, 255, 255, 0.08);
}

html.wcz-dark-mode body.wcz-header-scrolled .wcz-header::before,
html.wcz-dark-mode .wcz-header.scrolled::before {
	background: var(--wcz-glass) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	backdrop-filter: saturate(1.3) blur(16px) !important;
	-webkit-backdrop-filter: saturate(1.3) blur(16px) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

html.wcz-dark-mode .wcz-btn-outline {
	background: rgba(15, 23, 42, 0.65);
	color: #e2e8f0;
	border-color: rgba(0, 194, 229, 0.4);
}

html.wcz-dark-mode .wcz-premium-service-card,
html.wcz-dark-mode .wcz-service-card,
html.wcz-dark-mode .wcz-quick-card {
	background: linear-gradient(165deg, rgba(15, 23, 42, 0.95), rgba(10, 16, 28, 0.98));
	border-color: rgba(255, 255, 255, 0.08);
}

html.wcz-dark-mode .wpcf7-form input[type="text"],
html.wcz-dark-mode .wpcf7-form input[type="email"],
html.wcz-dark-mode .wpcf7-form input[type="tel"],
html.wcz-dark-mode .wpcf7-form textarea,
html.wcz-dark-mode .wpcf7-form select,
html.wcz-dark-mode .wcz-cf7-wrap input.wpcf7-form-control:not([type="submit"]),
html.wcz-dark-mode .wcz-cf7-wrap textarea.wpcf7-form-control {
	background: rgba(8, 12, 22, 0.9) !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	color: #e2e8f0;
}

/* --------------------------------------------------------------------------
   Quote + top bar polish
   -------------------------------------------------------------------------- */
.wcz-quote-live-shell {
	border-radius: 0;
	box-shadow:
		0 28px 64px rgba(0, 153, 184, 0.14),
		0 0 0 1px rgba(0, 194, 229, 0.12);
	backdrop-filter: blur(4px);
}

.wcz-top-bar {
	backdrop-filter: saturate(1.2) blur(8px);
	-webkit-backdrop-filter: saturate(1.2) blur(8px);
}

.wcz-top-bar .wcz-container,
.wcz-header > .wcz-container {
	max-width: var(--wcz-container) !important;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(16px, 4vw, 28px) !important;
	padding-right: clamp(16px, 4vw, 28px) !important;
	box-sizing: border-box;
}

.wcz-about-team-card,
.wcz-about-cta-live {
	transition: transform 0.45s var(--wcz-ease), box-shadow 0.45s var(--wcz-ease);
}

@media (hover: hover) {
	.wcz-about-team-card:hover {
		transform: translateY(-6px);
		box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
	}
}

/* --------------------------------------------------------------------------
   Responsive — container, sections, images, footer-safe spacing
   -------------------------------------------------------------------------- */
.wcz-section {
	padding-left: 0;
	padding-right: 0;
}

.wcz-section > .wcz-container,
.wcz-main .wcz-container {
	padding-left: clamp(16px, 4vw, 28px);
	padding-right: clamp(16px, 4vw, 28px);
}

.wcz-section img,
.wcz-content-visual img,
.wcz-service-intro-visual img,
.wcz-laptop-mockup {
	display: block;
	max-width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	.wcz-content-layout,
	.wcz-content-layout-form,
	.wcz-service-intro-layout,
	.wcz-about-story-grid,
	.wcz-about-live-grid {
		grid-template-columns: 1fr !important;
		justify-items: center;
	}

	.wcz-about-live-copy,
	.wcz-content-copy,
	.wcz-service-intro-text {
		width: 100%;
		max-width: 100%;
	}

	.wcz-about-live-photo,
	.wcz-about-team-photo,
	.wcz-about-team-photo-wrap,
	.wcz-content-visual,
	.wcz-service-intro-visual,
	.wcz-service-live-intro-visual,
	.wcz-service-live-block-visual,
	.wcz-hero-visual,
	.wcz-laptop-mockup {
		margin-left: auto !important;
		margin-right: auto !important;
		justify-self: center;
		width: 100%;
		max-width: 100%;
	}

	.wcz-about-live-photo img,
	.wcz-content-visual img,
	.wcz-service-intro-visual img,
	.wcz-service-live-intro-visual img,
	.wcz-service-live-block-visual img,
	.wcz-hero-visual img,
	.wcz-laptop-mockup {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* Mobile only — center all page content + images */
@media (max-width: 767px) {
	:root {
		--wcz-section-pad-y: clamp(40px, 8vw, 56px);
	}

	.wcz-container,
	.wcz-section > .wcz-container,
	.wcz-main .wcz-container,
	.wcz-footer-live .wcz-container {
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	/* Keep header/top bar vertically centered — no extra Y padding */
	.wcz-header > .wcz-container,
	.wcz-top-bar .wcz-container {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		display: flex !important;
		align-items: center !important;
	}

	.wcz-header-inner,
	.wcz-header-right,
	.wcz-header-actions,
	.wcz-nav,
	.wcz-nav-list {
		align-items: center !important;
	}

	.wcz-section {
		padding-top: var(--wcz-section-pad-y);
		padding-bottom: var(--wcz-section-pad-y);
	}

	/* Center text/content across all pages */
	.wcz-main,
	.wcz-main .wcz-section,
	.wcz-main .wcz-container,
	.wcz-section-header,
	.wcz-section-title,
	.wcz-section-desc,
	.wcz-section-cta,
	.wcz-section p,
	.wcz-section h1,
	.wcz-section h2,
	.wcz-section h3,
	.wcz-section h4,
	.wcz-section h5,
	.wcz-section h6,
	.wcz-section li,
	.wcz-page-hero-banner-content,
	.inner-page-banner__content,
	.wcz-service-live-intro,
	.wcz-service-live-copy,
	.wcz-about-intro-copy,
	.wcz-about-story,
	.wcz-contact-live-copy,
	.wcz-contact-live-form-head,
	.wcz-contact-live-title,
	.wcz-contact-live-lead,
	.wcz-contact-live-eyebrow,
	.wcz-quote-live-aside,
	.wcz-home-about,
	.wcz-home-why,
	.wcz-premium-services,
	.wcz-content-copy,
	.wcz-feature-showcase,
	.wcz-core-card,
	.wcz-quick-card,
	.wcz-service-card,
	.wcz-premium-service-card,
	.wcz-process-icons-item,
	.wcz-service-live-why-item,
	.wcz-service-live-offer-card,
	.wcz-review-live-card,
	.wcz-testimonial-card,
	.wcz-pricing-card,
	.wcz-legal-content {
		text-align: center !important;
	}

	.wcz-section-header .wcz-section-desc,
	.wcz-section-header p,
	.wcz-section p,
	.wcz-content-copy,
	.wcz-service-live-copy,
	.wcz-about-intro-copy {
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: 36rem;
	}

	/* Center flex/grid children */
	.wcz-section-cta,
	.wcz-hero-cta-actions,
	.wcz-premium-service-card,
	.wcz-service-card,
	.wcz-core-card,
	.wcz-quick-card,
	.wcz-feature-showcase,
	.wcz-process-icons-item,
	.wcz-contact-services-head,
	.wcz-contact-services-tags,
	.wcz-contact-live-channels,
	.wcz-footer-live-social {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-items: center !important;
	}

	.wcz-contact-services-tags,
	.wcz-contact-live-channels {
		flex-direction: column;
	}

	.wcz-section ul,
	.wcz-section ol,
	.wcz-features-list,
	.wcz-service-live-list {
		padding-left: 0 !important;
		list-style-position: inside;
		text-align: center !important;
	}

	/* Center all images + framed visuals (aspect-ratio + max-height shrinks left-align) */
	.wcz-main img:not(.inner-page-banner__img):not(.wcz-page-hero-banner-photo):not(.wcz-page-hero-laptop-photo):not(.wcz-page-hero-screen-photo):not(.wcz-hero-live-photo),
	.wcz-section img:not(.inner-page-banner__img):not(.wcz-page-hero-banner-photo),
	.wcz-content-visual img,
	.wcz-service-intro-visual img,
	.wcz-laptop-mockup,
	.wcz-about-team img,
	.wcz-about-live-photo-img,
	.wcz-about-team-photo-img {
		display: block !important;
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: 100%;
	}

	.wcz-about-live-photo,
	.wcz-about-team-photo,
	.wcz-about-team-photo-wrap,
	.wcz-content-visual,
	.wcz-service-intro-visual,
	.wcz-service-live-intro-visual,
	.wcz-service-live-block-visual,
	.wcz-hero-visual,
	.wcz-laptop-mockup {
		justify-self: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
		width: 100%;
		max-width: 100%;
	}

	.wcz-section figure,
	.wcz-section .alignnone,
	.wcz-section .alignleft,
	.wcz-section .alignright,
	.wcz-section .aligncenter,
	.wcz-section .wp-block-image,
	.wcz-main figure,
	.wcz-main .wp-block-image {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		justify-self: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
		float: none !important;
		text-align: center !important;
		max-width: 100%;
	}

	.wcz-about-live-grid,
	.wcz-about-grid,
	.wcz-content-layout,
	.wcz-content-layout-form,
	.wcz-service-intro-layout {
		justify-items: center;
	}

	.wcz-about-live-copy,
	.wcz-content-copy,
	.wcz-service-intro-text {
		width: 100%;
		max-width: 100%;
	}

	.wcz-btn,
	.wcz-section-cta .wcz-btn,
	.wcz-hero-cta-actions .wcz-btn {
		margin-left: auto;
		margin-right: auto;
	}

	/* Keep form fields readable (left) while headings stay centered */
	.wcz-main .wpcf7-form,
	.wcz-main .wcz-cf7-wrap,
	.wcz-main .wpcf7-form input,
	.wcz-main .wpcf7-form textarea,
	.wcz-main .wpcf7-form select,
	.wcz-main .wpcf7-form p,
	.wcz-contact-page .wcz-contact-form-wrap,
	.wcz-contact-page .wcz-contact-field,
	.wcz-quote-live .wcz-cf7-wrap,
	.wcz-quote-live .wcz-quote-label,
	.wcz-quote-live .wcz-quote-field {
		text-align: left !important;
	}

	.wcz-contact-page .wcz-contact-label,
	.wcz-contact-live .wcz-contact-label,
	.wcz-main .wpcf7-form label {
		text-align: left !important;
	}

	.wcz-contact-page .wcz-contact-submit-wrap {
		text-align: left !important;
	}

	.wcz-quote-live .wcz-quote-submit-wrap {
		text-align: center !important;
	}

	.wcz-btn {
		--wcz-btn-pad-y: 11px;
		--wcz-btn-pad-x: 20px;
	}

	.wcz-btn-lg {
		--wcz-btn-pad-y: 12px;
		--wcz-btn-pad-x: 24px;
	}

	.wcz-core-grid,
	.wcz-quick-grid,
	.wcz-features-row,
	.wcz-spec-grid,
	.wcz-content-layout,
	.wcz-content-layout-form,
	.wcz-service-intro-layout,
	.wcz-about-story-grid,
	.wcz-contact-live-grid,
	.wcz-contact-channels-grid {
		grid-template-columns: 1fr !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcz-btn,
	.wcz-btn::before,
	.wcz-premium-service-card,
	.wcz-service-card,
	.wcz-footer-live-social-link,
	.wpcf7-form input,
	.wpcf7-form textarea {
		transition: none !important;
		animation: none !important;
	}

	.wcz-btn:hover,
	.wcz-premium-service-card:hover,
	.wcz-service-card:hover {
		transform: none !important;
	}
}