/**
 * Borshoff Labs - Minimal Custom Styles
 * Only styles that cannot be achieved via theme.json.
 */

/* ==========================================================================
   ANIMATIONS — Scroll-reveal system & micro-interactions
   ========================================================================== */

/* --- Base reveal states (hidden before animation) --- */
.bl-reveal {
	opacity: 0;
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.bl-reveal--up {
	transform: translateY(40px);
}

.bl-reveal--left {
	transform: translateX(-50px);
}

.bl-reveal--right {
	transform: translateX(50px);
}

.bl-reveal--scale {
	transform: scale(0.92);
}

/* --- Revealed state --- */
.bl-revealed {
	opacity: 1 !important;
	transform: none !important;
	will-change: auto;
}

/* --- Stagger children (hidden until parent triggers) --- */
.bl-stagger {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bl-stagger.bl-revealed {
	opacity: 1;
	transform: none;
}

/* --- Respect prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
	.bl-reveal,
	.bl-stagger {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --- Button hover glow effect --- */
.wp-block-button__link {
	transition: background-color 0.3s ease, color 0.3s ease,
	            transform 0.2s ease, box-shadow 0.3s ease;
}

.wp-block-button__link:hover {
	box-shadow: 0 4px 20px rgba(32, 189, 204, 0.3);
}

/* --- Card tilt shine effect on pricing cards --- */
.pricing-card {
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.pricing-card::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(
		circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
		rgba(32, 189, 204, 0.06) 0%,
		transparent 60%
	);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 0;
}

.pricing-card:hover::before {
	opacity: 1;
}

.pricing-card > * {
	position: relative;
	z-index: 1;
}

/* --- Showcase/blog tile image zoom on hover --- */
.showcase-tile .wp-block-post-featured-image img,
.blog-tile .wp-block-post-featured-image img {
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	border-radius: 10px 10px 0 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.showcase-tile:hover .wp-block-post-featured-image img,
.blog-tile:hover .wp-block-post-featured-image img {
	transform: scale(1.06);
}

/* --- FAQ accordion answer smooth transition --- */
.bl-faq-answer {
	will-change: max-height, opacity;
}

/* --- Smooth text selection color --- */
::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* --- Link underline animation (non-button links) --- */
main a:not(.wp-block-button__link):not(.wp-block-post-title a) {
	position: relative;
	text-decoration: none;
}

main a:not(.wp-block-button__link):not(.wp-block-post-title a)::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 0;
	height: 2px;
	background: currentColor;
	transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

main a:not(.wp-block-button__link):not(.wp-block-post-title a):hover::after {
	width: 100%;
}

/* --- Smooth page load fade-in --- */
@keyframes pageLoad {
	from { opacity: 0; }
	to { opacity: 1; }
}

.wp-site-blocks {
	animation: pageLoad 0.6s ease forwards;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.wp-site-blocks > main {
	flex-grow: 1;
}

/* Sticky header — template-part wrapper needs the sticky, not the inner group */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

/* Target the inner nav row (where the vertical padding actually lives in the
   DB template part) so the scroll-shrink animates the right element. */
header.wp-block-template-part .wp-block-group.alignwide.is-layout-flex {
	transition: padding-top 0.4s ease, padding-bottom 0.4s ease;
}

header.wp-block-template-part.is-scrolled {
	background-color: rgba(19, 19, 19, 0.85);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

/* Remove backdrop-filter when mobile nav is open — it creates a containing block
   that traps position:fixed overlay inside the header bounds. */
header.wp-block-template-part.is-scrolled:has(.is-menu-open) {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

header.wp-block-template-part.is-scrolled .wp-block-group.alignwide.is-layout-flex {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

/* Hero video — overlaps into next section */
.hero-video-wrap {
	position: relative;
	z-index: 2;
}

.hero-video {
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 1428 / 673;
	opacity: 0;
	clip-path: inset(12% 18% 12% 18% round 20px);
	transform: scale(0.92);
	animation: heroVideoReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

@keyframes heroVideoReveal {
	0% {
		opacity: 0;
		clip-path: inset(12% 18% 12% 18% round 20px);
		transform: scale(0.92);
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		clip-path: inset(0% 0% 0% 0% round 20px);
		transform: scale(1);
	}
}

.hero-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 20px;
}

/* Tech-graphic decorations — shared base */
.content-intro-section,
.contact-hero-section {
	position: relative;
}

.content-intro-graphic {
	position: absolute;
	pointer-events: none;
	right: -60px;
	top: 371px;
	transform: rotate(180deg);
	width: 510px;
	height: 493px;
	opacity: 0.85;
}

.content-intro-graphic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (max-width: 1023px) {
	.content-intro-graphic {
		display: none;
	}
}

/* FAQ card accordion styling */
.faq-card summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 24px;
	color: var(--wp--preset--color--base);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.faq-card summary::-webkit-details-marker {
	display: none;
}

.faq-card summary::after {
	content: "";
	display: inline-flex;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='7' x2='12' y2='17'/%3E%3Cline x1='7' y1='12' x2='17' y2='12'/%3E%3C/svg%3E");
	background-size: 16px;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.2s ease;
}

.faq-card[open] summary::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='7' y1='12' x2='17' y2='12'/%3E%3C/svg%3E");
}

.faq-accordion-list {
	width: 100%;
}

.faq-accordion-list .faq-card {
	width: 100%;
}

/* Getting Started — splatter background on the section */
.gs-splash-bg {
	position: relative;
	overflow: hidden;
}

.gs-splash-bg::before {
	content: "";
	position: absolute;
	top: -10%;
	left: -11%;
	width: 55%;
	height: 120%;
	background: url('../images/splatter.png') center center / contain no-repeat;
	opacity: 0.1;
	z-index: 0;
	pointer-events: none;
}

.gs-splash-bg > * {
	position: relative;
	z-index: 1;
}

/* Getting Started — step rows with number images */
.gs-steps .wp-block-image {
	flex-shrink: 0;
}

.gs-steps .wp-block-image img {
	object-fit: contain;
}

/* How It Works — splat number steps with line */
.hiw-steps-wrap {
	position: relative;
}

.hiw-steps-wrap > .hiw-line-img {
	position: absolute;
	top: 60px;
	left: 0;
	right: 0;
	z-index: 0;
	margin: 0;
}

.hiw-steps-wrap > .hiw-line-img img {
	width: 100%;
	height: auto;
}

.hiw-step-columns {
	position: relative;
	z-index: 1;
}

/* How It Works — hover highlight animation on step columns */
.hiw-step-columns > .wp-block-column {
	cursor: default;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.hiw-step-columns > .wp-block-column .wp-block-image img {
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.hiw-step-columns > .wp-block-column p {
	opacity: 1;
	max-height: none;
	overflow: visible;
}

.hiw-step-columns > .wp-block-column:hover .wp-block-image img {
	transform: scale(1.12);
	filter: drop-shadow(0 4px 16px rgba(32, 189, 204, 0.35));
}

.hiw-step-columns > .wp-block-column:hover {
	transform: translateY(-6px);
}

/* Dim sibling steps when one is hovered */
.hiw-step-columns:hover > .wp-block-column:not(:hover) {
	opacity: 0.5;
}

@media (max-width: 767px) {
	.hiw-step-columns > .wp-block-column p {
		opacity: 1;
		max-height: none;
	}

	.hiw-step-columns:hover > .wp-block-column:not(:hover) {
		opacity: 1;
	}

	.hiw-steps-wrap > .hiw-line-img {
		display: none;
	}

	.hiw-step-columns {
		margin-top: 0;
	}
}

/* FAQ video */
.faq-video-wrap {
	position: relative;
	z-index: 1;
	max-width: 1428px;
	margin: 0 auto;
	padding: 60px 0;
}

.faq-video {
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 1428 / 673;
	position: relative;
}

.faq-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Prevent horizontal scroll on mobile from absolutely-positioned decorations.
   Use clip instead of hidden to preserve position:sticky on the header. */
html, body {
	overflow-x: clip;
}

/* Desktop nav — enlarge clickable area on nav links and buttons */
.wp-block-navigation .wp-block-navigation-item__content {
	display: inline-block;
	padding: 12px 14px;
	margin: -12px -14px;
}

header.wp-block-template-part .wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

/* Keep nav labels on a single line so items never squish/wrap on narrow desktops */
header.wp-block-template-part .wp-block-navigation-item__content {
	white-space: nowrap;
}

/* Responsive nav spacing. The block markup sets a generous 10rem gap that only
   fits ultra-wide screens; on 13" laptops (~1280px) it forces items to wrap.
   Clamp the gap so it stays spacious on large monitors but tightens down
   gracefully. (blockGap can't hold a clamp() — WP's sanitizer strips it — so
   the responsive value lives here in CSS.) */
header.wp-block-template-part .wp-block-navigation.is-layout-flex {
	gap: clamp(1.75rem, 6vw, 10rem);
}

/* NOTE: the horizontal-nav ↔ hamburger handoff (and the Contact link / pill CTA
   swap) lives in the RESPONSIVE section below (search "Force hamburger menu"). */

/* Focus visible for keyboard navigation */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ==========================================================================
   MOBILE NAV OVERLAY — Cinematic full-screen reveal
   Inspired by premium agency navigation with split-screen reveal,
   staggered character-level animation, and interactive hover effects.
   ========================================================================== */

/* --- Keyframes --- */
@keyframes navOverlayReveal {
	0% {
		clip-path: circle(0% at calc(100% - 40px) 40px);
	}
	100% {
		clip-path: circle(150% at calc(100% - 40px) 40px);
	}
}

@keyframes navItemReveal {
	0% {
		opacity: 0;
		transform: translateY(60px) skewY(4deg);
		filter: blur(8px);
	}
	100% {
		opacity: 1;
		transform: translateY(0) skewY(0);
		filter: blur(0);
	}
}

@keyframes navAccentLine {
	0% { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}

@keyframes navCounterFade {
	0% { opacity: 0; transform: translateX(-10px); }
	100% { opacity: 1; transform: translateX(0); }
}

/* Subtle glow pulse on the accent line */
@keyframes accentPulse {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 1; }
}

/* --- Overlay container — cinematic circle-wipe reveal --- */
.wp-block-navigation__responsive-container.is-menu-open {
	animation: navOverlayReveal 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards !important;
	background: var(--wp--preset--color--dark) !important;
	padding: 0 !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 100000 !important;
}

/* Gradient overlay for depth */
.wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(ellipse at 20% 80%, rgba(32, 189, 204, 0.08) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, rgba(32, 189, 204, 0.05) 0%, transparent 40%);
	pointer-events: none;
	z-index: 0;
}

/* --- Inner dialog — items packed to the top, no scroll needed --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	justify-content: flex-start !important;
	gap: 8px !important;
	height: 100%;
	padding: 16px 32px 32px;
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 1;
}

/* --- Close button — animated X with ring, tight to top --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	align-self: flex-end;
	color: var(--wp--preset--color--base);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.15);
	transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
	margin-bottom: 0;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
	border-color: var(--wp--preset--color--accent);
	background-color: rgba(32, 189, 204, 0.1);
	transform: rotate(180deg) scale(1.05);
}

/* --- Nav list — packed to the top so all items fit without scrolling --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 0 0 auto !important;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding-top: 8px !important;
	padding-left: 8px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	gap: 0 !important;
	width: 100%;
	padding: 0;
	counter-reset: nav-counter;
}

/* Override WP's right-justify on the nav container */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right {
	justify-content: center !important;
	align-items: flex-start !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	text-align: left !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	opacity: 0;
	animation: navItemReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	width: 100%;
	position: relative;
	overflow: hidden;
	counter-increment: nav-counter;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.25s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.35s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.45s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.55s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.65s; }

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: none;
}

/* --- Nav links — oversized bold with number counter and sweep hover --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: clamp(36px, 10vw, 52px) !important;
	font-weight: 700 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--base) !important;
	text-decoration: none !important;
	padding: 16px 0 !important;
	/* Reset the desktop -12px -14px margin so the link stays inside the
	   overlay padding instead of overflowing past the left edge. */
	margin: 0 !important;
	position: relative;
	transition: color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
	content: "0" counter(nav-counter);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--wp--preset--color--accent);
	opacity: 0;
	animation: navCounterFade 0.4s ease forwards;
	animation-delay: inherit;
	min-width: 32px;
	font-family: var(--wp--preset--font-family--body);
	align-self: flex-start;
	padding-top: 22px;
}
/* Accent sweep line under each item */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	bottom: 8px;
	left: 40px;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent) 0%, transparent 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover: text shifts right, accent color, line sweeps in */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent) !important;
	transform: translateX(8px);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover::after,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus::after {
	transform: scaleX(1);
}

/* Dim siblings on hover */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container:hover .wp-block-navigation-item:not(:hover) .wp-block-navigation-item__content {
	opacity: 0.3;
	transition: opacity 0.3s ease, color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Contact link — accent CTA pill at bottom --- */
.wp-block-navigation__responsive-container.is-menu-open .bl-nav-contact {
	margin-top: 24px;
	border-bottom: none;
}

.wp-block-navigation__responsive-container.is-menu-open .bl-nav-contact .wp-block-navigation-item__content {
	font-size: clamp(18px, 5vw, 22px) !important;
	color: var(--wp--preset--color--dark) !important;
	background: var(--wp--preset--color--accent);
	border-radius: 24.5px;
	padding: 12px 32px !important;
	display: inline-flex;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .bl-nav-contact .wp-block-navigation-item__content::before {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .bl-nav-contact .wp-block-navigation-item__content::after {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .bl-nav-contact .wp-block-navigation-item__content:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 30px rgba(32, 189, 204, 0.35);
	color: var(--wp--preset--color--dark) !important;
}

/* --- Decorative accent line at left edge --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: "";
	position: absolute;
	top: 10%;
	left: 0;
	width: 2px;
	height: 80%;
	background: linear-gradient(
		180deg,
		transparent 0%,
		var(--wp--preset--color--accent) 20%,
		var(--wp--preset--color--accent) 80%,
		transparent 100%
	);
	border-radius: 2px;
	opacity: 0.3;
}

/* --- Decorative dot grid in bottom right corner --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::after {
	content: "";
	position: absolute;
	bottom: 40px;
	right: 32px;
	width: 60px;
	height: 60px;
	background-image: radial-gradient(circle, var(--wp--preset--color--accent) 1.5px, transparent 1.5px);
	background-size: 12px 12px;
	opacity: 0.15;
	pointer-events: none;
}

/* Contact Form 7 — base styling (replaces hand-rolled form) */
.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.wpcf7-form p {
	margin: 0;
}

.wpcf7-form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--base);
}

.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	width: 100%;
	box-sizing: border-box;
	background-color: #fff;
	border: none;
	border-radius: 4px;
	padding: 14px 22px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--dark);
}

.wpcf7-form textarea {
	resize: vertical;
}

.wpcf7-form input[type="submit"] {
	align-self: flex-start;
	border: none;
	border-radius: 24.5px;
	padding: 8px 21px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus {
	background-color: var(--wp--preset--color--accent);
}

/* CTA Contact section uses inverted button colors (accent default, dark hover) */
.bl-cta-contact-section .wpcf7-form input[type="submit"] {
	background-color: var(--wp--preset--color--accent);
}

.bl-cta-contact-section .wpcf7-form input[type="submit"]:hover,
.bl-cta-contact-section .wpcf7-form input[type="submit"]:focus {
	background-color: var(--wp--preset--color--dark);
}

/* CF7 validation error messages — white text on the teal/dark backgrounds */
.wpcf7-form .wpcf7-not-valid-tip,
.wpcf7-form .wpcf7-response-output,
.wpcf7-form-control-wrap .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--base);
}

/* Showcase card image overlay text positioning */
.wp-block-post-featured-image {
	overflow: hidden;
}

/* Card tiles — shared base for showcase and blog tiles */
.showcase-tile,
.blog-tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 0.2s ease;
}

.showcase-tile:hover,
.blog-tile:hover {
	transform: translateY(-4px);
}

.showcase-tile .wp-block-post-featured-image,
.blog-tile .wp-block-post-featured-image {
	margin: 0;
	flex-shrink: 0;
}
.showcase-tile .wp-block-post-featured-image img {
	image-rendering: -webkit-optimize-contrast;
}

.showcase-tile > .wp-block-group:last-child,
.blog-tile > .wp-block-group:last-child {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.showcase-tile .wp-block-post-title a,
.blog-tile .wp-block-post-title a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.showcase-tile .wp-block-post-excerpt,
.blog-tile .wp-block-post-excerpt {
	margin: 0;
}

.showcase-tile .wp-block-post-excerpt__excerpt,
.blog-tile .wp-block-post-excerpt__excerpt {
	margin-bottom: 0;
	word-break: break-word;
	overflow-wrap: break-word;
}

.showcase-tile .wp-block-post-title {
	width: 100%;
}

.showcase-tile .wp-block-post-excerpt {
	width: 100%;
	overflow: hidden;
}

.showcase-grid,
.blog-grid {
	gap: 40px;
}

/* Pricing cards — aligned content rows via CSS Grid + subgrid */
@media (min-width: 782px) {
	.pricing-columns.wp-block-columns {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(7, auto);
		column-gap: 36px;
		row-gap: 0;
	}

	.pricing-columns > .wp-block-column {
		display: grid;
		grid-row: span 7;
		grid-template-rows: subgrid;
	}

	.pricing-columns .pricing-card {
		display: grid;
		grid-row: span 7;
		grid-template-rows: subgrid;
	}

	.pricing-columns .pricing-card > * {
		align-self: start;
	}

	.pricing-columns .pricing-card > .wp-block-buttons {
		align-self: end;
	}
}
.pricing-card .has-accent-color,
.pricing-card .has-base-color,
.pricing-card h3,
.pricing-card h4,
.pricing-card p {
	transition: color 0.3s ease;
}

.pricing-card:hover {
	transform: translateY(-4px);
	background-color: rgba(32, 189, 204, 0.85) !important;
	border-color: rgba(32, 189, 204, 0.85) !important;
}

.pricing-card:hover .has-accent-color,
.pricing-card:hover .has-base-color,
.pricing-card:hover h3,
.pricing-card:hover h4,
.pricing-card:hover p {
	color: #fff !important;
}

.pricing-card .wp-block-list li {
	transition: color 0.3s ease;
}

.pricing-card:hover .wp-block-list li {
	color: #000 !important;
}

.pricing-card:hover .wp-block-button__link {
	background-color: var(--wp--preset--color--dark) !important;
	color: #fff !important;
}

.pricing-card .wp-block-list {
	padding-left: 20px;
}

/* Override the wp_global_styles body weight (100) which makes bullets render
   too thin — particularly noticeable on the capital "A" in "Annual". */
.pricing-card .wp-block-list,
.pricing-card .wp-block-list li {
	font-weight: 400;
}

.pricing-card .wp-block-buttons {
	width: 100%;
}

.pricing-card .wp-block-button {
	width: 100%;
}

.pricing-card .wp-block-button__link {
	width: 100%;
	text-align: center;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Pricing card spacing (client request) --- */
/* The three cards share a CSS subgrid (see the .pricing-columns grid rules
   above), so the TERM group sits on the same grid row in every card. Applying
   equal margins to that group therefore keeps all three TERM subheads aligned
   horizontally from container to container. (Order of .pricing-card children:
   1 title, 2 price, 3 "Each month you get", 4 DELIVERABLES, 5 PRODUCTION,
   6 TERM, 7 button — so :nth-child(6) is the TERM group.)
   - margin-top  → space ABOVE the TERM subhead
   - margin-bottom → space BELOW the copy, before the CTA button */
.pricing-columns .pricing-card > .wp-block-group:nth-child(6) {
	margin-top: 32px;
	margin-bottom: 36px;
}

/* Make each box taller / bigger via extra internal bottom padding. The gap
   between the cards and the footer is the pricing section's own bottom padding
   (untouched here), so it stays exactly as it is now. */
@media (min-width: 768px) {
	.pricing-columns .pricing-card {
		padding-bottom: 112px !important;
	}
}

/* Blog featured post */
.blog-featured-image-wrap {
	position: relative;
}

.blog-featured-image-wrap::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 130%;
	height: 130%;
	transform: translate(-50%, -50%);
	background: url('../images/splatter-teal-bg.webp') center center / contain no-repeat;
	z-index: 0;
	pointer-events: none;
}

.blog-featured-image-wrap .wp-block-post-featured-image {
	position: relative;
	z-index: 1;
}

.blog-featured-post .wp-block-post-excerpt__excerpt {
	margin-bottom: 24px;
}

.blog-featured-post .wp-block-post-date {
	margin-top: 8px;
}

/* ==========================================================================
   RESPONSIVE — Overrides for fixed inline styles at smaller viewports
   ========================================================================== */

/* --- Header --- */

/* Hide the "Contact" nav link on desktop — the pill button handles it */
@media (min-width: 1120px) {
	.bl-nav-contact {
		display: none !important;
	}
}

/* Force hamburger menu below 1120px. WP's default is 600px (too narrow), and
   1024px still let the four links + CONTACT pill squish/wrap on ~13" laptops,
   so the handoff happens at 1120px where the horizontal nav comfortably fits. */
@media (max-width: 1119.98px) {
	/* Hide inline nav links */
	header.wp-block-template-part .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* Show the hamburger button */
	header.wp-block-template-part .wp-block-navigation__responsive-container-open {
		display: flex;
		color: var(--wp--preset--color--base);
		transition: transform 0.2s ease;
	}

	header.wp-block-template-part .wp-block-navigation__responsive-container-open:hover {
		transform: scale(1.1);
	}

	/* Hide the separate CONTACT button (accessible via hamburger overlay) */
	header.wp-block-template-part .wp-block-buttons {
		display: none;
	}

	/* Overlay open state */
	header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
	}
}

@media (max-width: 767px) {
	header.wp-block-template-part > .wp-block-group {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) !important;
	}

	header.wp-block-template-part .wp-block-image img {
		width: 110px !important;
		height: auto !important;
	}

	header.wp-block-template-part.is-scrolled > .wp-block-group {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	header.wp-block-template-part > .wp-block-group {
		padding-left: var(--wp--preset--spacing--50) !important;
		padding-right: var(--wp--preset--spacing--50) !important;
	}

	header.wp-block-template-part .wp-block-image img {
		width: 140px !important;
		height: auto !important;
	}
}

/* --- Hero Section --- */
@media (max-width: 767px) {
	.hero-section > .wp-block-group:first-child {
		padding-top: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--30);
	}

	.hero-section .has-hero-font-size {
		font-size: clamp(2.2rem, 10vw, 4rem);
	}

	.hero-section p.has-body-font-family {
		font-size: clamp(14px, 3.8vw, 22px);
		letter-spacing: 2px;
	}

	.hero-video-wrap {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
		margin-bottom: -100px !important;
	}

	.hero-video {
		aspect-ratio: 16 / 9;
		border-radius: 12px;
	}

	.hero-video video {
		border-radius: 12px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.hero-section .has-hero-font-size {
		font-size: clamp(3rem, 8vw, 5rem);
	}

	.hero-video-wrap {
		padding-left: var(--wp--preset--spacing--60) !important;
		padding-right: var(--wp--preset--spacing--60) !important;
		margin-bottom: -200px !important;
	}
}

/* --- Content Intro Section --- */
@media (max-width: 767px) {
	.content-intro-section {
		padding-top: 140px !important;
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
		padding-bottom: var(--wp--preset--spacing--60);
	}

	.content-intro-section h2 {
		font-size: clamp(26px, 6vw, 40px) !important;
	}

	.content-intro-section p {
		font-size: 16px;
		line-height: 1.6;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.content-intro-section {
		padding-top: 260px !important;
		padding-left: var(--wp--preset--spacing--50) !important;
		padding-right: var(--wp--preset--spacing--50) !important;
	}
}

/* --- Perfect For Section — mobile: 2-up grid of icon-chip tiles ---
   White line icons on a bright teal background don't read well loose, so each
   icon is dropped into a dark circular chip. All six items form one continuous
   2-column grid with equal-height, top-aligned tiles so the icons and labels
   line up across every row. */
@media (max-width: 767px) {
	/* display:contents collapses the two wp:columns rows so their columns
	   become grid items of the section itself (balanced 2-up, 3 rows). */
	.bl-perfect-for-section {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--wp--preset--spacing--40);
		row-gap: var(--wp--preset--spacing--50);
		align-items: stretch;
		padding-left: var(--wp--preset--spacing--40);
		padding-right: var(--wp--preset--spacing--40);
	}

	.bl-perfect-for-section > h2,
	.bl-perfect-for-section > .wp-block-buttons {
		grid-column: 1 / -1;
		max-width: none;
	}

	.bl-perfect-for-section h2 {
		font-size: clamp(26px, 7vw, 40px) !important;
		margin-bottom: var(--wp--preset--spacing--40) !important;
	}

	.bl-perfect-for-section .wp-block-columns {
		display: contents;
	}

	/* Each item is an equal-height tile with content stacked + centered. */
	.bl-perfect-for-section .wp-block-column {
		width: auto;
		flex-basis: auto;
		margin: 0;
		display: flex;
	}

	.bl-perfect-for-section .wp-block-column > .wp-block-group {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 14px;
	}

	/* display:contents on the rows stops the scroll-reveal observer firing —
	   keep the tiles visible. */
	.bl-perfect-for-section .wp-block-column.bl-stagger {
		opacity: 1 !important;
		transform: none !important;
	}

	/* Dark circular chip behind each white icon. */
	.bl-perfect-for-section .wp-block-image.aligncenter {
		margin: 0 !important;
		width: 84px;
		height: 84px;
		border-radius: 50%;
		background: var(--wp--preset--color--dark);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8px 20px rgba(33, 33, 33, 0.18);
	}

	.bl-perfect-for-section .wp-block-image.aligncenter img {
		width: 46px !important;
		height: 46px !important;
	}

	/* Label — dark, bold, centered, uniform size. */
	.bl-perfect-for-section .wp-block-column p {
		margin: 0;
		font-size: 14px;
		line-height: 1.3;
		text-align: center;
	}
}

/* --- Benefits Section --- */
@media (max-width: 767px) {
	.bl-benefits-section {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}

	/* Image first (natural order), text below */
	.bl-benefits-section .wp-block-columns {
		flex-direction: column;
		gap: var(--wp--preset--spacing--40);
	}

	.bl-benefits-section .wp-block-column {
		flex-basis: 100%;
		width: 100% !important;
	}

	/* Make image fill width nicely */
	.bl-benefits-section .wp-block-image {
		margin: 0;
	}

	.bl-benefits-section .wp-block-image img {
		border-radius: 12px;
		width: 100% !important;
		height: auto !important;
	}

	.bl-benefits-section h2 {
		font-size: clamp(26px, 6vw, 40px) !important;
		margin-bottom: var(--wp--preset--spacing--30);
	}

	.bl-benefits-section ul {
		font-size: 16px;
		padding-left: 20px;
		line-height: 1.5;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.bl-benefits-section {
		padding-left: var(--wp--preset--spacing--50) !important;
		padding-right: var(--wp--preset--spacing--50) !important;
	}
}

/* --- CTA Contact Section --- */
@media (max-width: 767px) {
	.bl-cta-contact-section {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}

	.bl-cta-contact-section .wp-block-columns {
		flex-direction: column;
		gap: var(--wp--preset--spacing--50) !important;
	}

	.bl-cta-contact-section .wp-block-column {
		flex-basis: 100%;
		width: 100% !important;
	}

	.bl-cta-contact-section h2 {
		font-size: clamp(24px, 5.5vw, 40px) !important;
		line-height: 1.3 !important;
	}

	.bl-cta-contact-section p[style*="font-size:24px"] {
		font-size: 16px;
	}

	.wpcf7-form input[type="text"],
	.wpcf7-form input[type="email"],
	.wpcf7-form input[type="tel"],
	.wpcf7-form textarea {
		padding: 12px 14px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.bl-cta-contact-section {
		padding-left: var(--wp--preset--spacing--50) !important;
		padding-right: var(--wp--preset--spacing--50) !important;
	}
}

/* --- Footer --- */
footer.wp-block-template-part a {
	text-decoration: none;
}

@media (max-width: 767px) {
	footer.wp-block-template-part > .wp-block-group {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}

	footer.wp-block-template-part .wp-block-group[class*="flex"] {
		flex-direction: column;
		align-items: center;
		gap: var(--wp--preset--spacing--40) !important;
	}

	footer.wp-block-template-part .wp-block-group[class*="flex"] > .wp-block-group {
		align-items: center;
	}

	footer.wp-block-template-part .wp-block-image img {
		height: auto !important;
	}

	footer.wp-block-template-part .wp-block-image img[alt="Borshoff Labs"] {
		width: 140px;
	}

	footer.wp-block-template-part .wp-block-image img[alt="YouTube"] {
		width: 42px;
		height: 30px;
	}

	footer.wp-block-template-part p[style*="font-size:12px"] {
		font-size: 11px !important;
		line-height: 1.5 !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	footer.wp-block-template-part > .wp-block-group {
		padding-left: var(--wp--preset--spacing--50) !important;
		padding-right: var(--wp--preset--spacing--50) !important;
	}
}

/* ==========================================================================
   GLOBAL — Override large inline paddings for mobile/tablet
   WP converts spacing tokens to hardcoded px (e.g. spacing-90 → 300px).
   Target by section class names instead of attribute selectors.
   ========================================================================== */

@media (max-width: 767px) {
	/* All main .alignfull sections: cap side padding */
	main .wp-block-group.alignfull,
	main.wp-block-group.alignfull {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}

	/* Scale down large headings (WP converts to clamp, target via class) */
	.has-heading-font-family {
		font-size: clamp(28px, 7vw, 48px) !important;
	}

	/* Scale 24px body text */
	main p.has-body-font-family[style*="font-weight:700"],
	main p.has-base-alt-color {
		font-size: 16px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	main .wp-block-group.alignfull,
	main.wp-block-group.alignfull {
		padding-left: var(--wp--preset--spacing--50) !important;
		padding-right: var(--wp--preset--spacing--50) !important;
	}

	.has-heading-font-family {
		font-size: clamp(36px, 5.5vw, 60px) !important;
	}
}

/* ==========================================================================
   FAQ PAGE — Getting Started Section
   ========================================================================== */

@media (max-width: 767px) {
	/* Trim the top gap above the first header. The pattern bakes an inline
	   padding-top of spacing|80 on the section AND an inline margin-top of
	   spacing|80 on the columns (~160px combined), which dwarfs other pages.
	   Match the ~54px (spacing|50) first-header offset used elsewhere. */
	.gs-splash-bg {
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
		/* The pattern inlines min-height:715px (a desktop value). On mobile the
		   stacked content is shorter, so the flex centring leaves a big empty
		   gap above the heading — let the section size to its content. */
		min-height: 0 !important;
	}

	.gs-splash-bg > .wp-block-columns {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/* Stack heading / steps columns */
	.gs-splash-bg .wp-block-columns {
		flex-direction: column;
		gap: var(--wp--preset--spacing--50);
	}

	.gs-splash-bg .wp-block-column {
		flex-basis: 100%;
		width: 100% !important;
	}

	/* Tame the 67px desktop heading. */
	.gs-splash-bg h2 {
		font-size: clamp(30px, 8vw, 46px) !important;
		line-height: 1.2 !important;
	}

	/* Steps are a connected vertical timeline. The three steps are forced to
	   equal height (CSS grid 1fr rows) so the numbered nodes are perfectly,
	   evenly spaced regardless of copy length, and the copy is centred against
	   its circle. A vertical rule joins the node centres. */
	.gs-steps {
		display: flex !important;
		flex-direction: column;
		gap: 20px !important;
	}

	.gs-steps > .wp-block-group {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 18px;
		position: relative;
		background: none;
		border: none;
		border-radius: 0;
		padding: 0;
		/* Equal-height rows → the numbered nodes are perfectly, evenly spaced
		   regardless of copy length. Value covers the longest step. */
		min-height: 140px;
	}

	/* Connector: rows are equal height, so each node centre sits at 50% of its
	   row. The line spans this node's centre down to the next — one row height
	   plus the gap (calc(100% + gap)). */
	.gs-steps > .wp-block-group:not(:last-child)::before {
		content: "";
		position: absolute;
		left: 23px;
		top: 50%;
		height: calc(100% + 20px);
		width: 2px;
		background: rgba(32, 189, 204, 0.4);
		z-index: 0;
	}

	.gs-steps .wp-block-image {
		flex-shrink: 0;
		margin: 0 !important;
		position: relative;
		z-index: 1;
	}

	.gs-steps .wp-block-image img {
		width: 48px;
		height: 48px;
	}

	.gs-steps p {
		font-size: 14px;
		line-height: 1.45;
		text-align: left;
		flex: 1;
		min-width: 0;
		margin: 0;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.gs-splash-bg .wp-block-columns {
		gap: 40px;
	}
}

/* Desktop/laptop: replicate the BENEFITS-OF-LABS fix. That section never
   squishes because it uses a constrained layout capped at 1400px with modest
   side padding. This Getting Started section instead uses a flex layout with a
   fixed 300px of side padding and NO width cap, which crushes the content
   (especially noticeable on the live site's wider viewport). Mirror benefits:
   trim the side padding and cap + center the inner content at 1400px. */
@media (min-width: 1024px) {
	.gs-splash-bg {
		padding-left: clamp(40px, 6vw, 80px) !important;
		padding-right: clamp(40px, 6vw, 80px) !important;
	}

	.gs-splash-bg > .wp-block-columns {
		max-width: 1400px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ==========================================================================
   FAQ PAGE — How It Works Section
   ========================================================================== */

@media (max-width: 767px) {
	/* Tighten vertical rhythm — the desktop preset padding/margin is ~80px
	   which dominates the mobile viewport. */
	/* The pattern bakes inline spacing|80 (~81px) into the section padding and
	   the heading's bottom margin, which is far more than other sections — beat
	   it with !important so the section rhythm matches the rest of the page. */
	.hiw-section {
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}

	.hiw-section > .wp-block-heading {
		margin-bottom: var(--wp--preset--spacing--50) !important;
	}

	/* Pattern-inlined horizontal padding on the wrap squeezes the content
	   to ~65% of the viewport on small screens — drop it. */
	/* Drop the wrap's inline 40px side padding (DB-rendered, so !important is
	   required) so the steps use the full section width on mobile. */
	.hiw-steps-wrap {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Stack the six steps as a numbered timeline: each teal splatter badge sits
	   in a fixed-width column on the left so every number lines up on the same
	   vertical axis, with its copy in a soft accent card alongside. */
	.hiw-step-columns.wp-block-columns {
		flex-direction: column;
		gap: 12px !important;
		/* The pattern inlines margin-top:-60px so the steps overlap the desktop
		   connecting line. That line is hidden on mobile, so the negative margin
		   just pulls the steps up over the heading — zero it out (!important to
		   beat the inline style). */
		margin-top: 0 !important;
	}

	.hiw-step-columns .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}

	/* Badge — fixed box keeps every number on the same vertical line. */
	.hiw-step-columns .wp-block-image {
		flex-shrink: 0;
		margin: 0 !important;
		width: 50px;
	}

	.hiw-step-columns .wp-block-image img {
		width: 50px !important;
		height: 50px !important;
	}

	/* Copy — left aligned inside a soft card with a teal edge. !important
	   defeats the pattern's has-text-align-center class and inline 36px padding. */
	.hiw-step-columns p {
		font-size: 14px;
		text-align: left !important;
		line-height: 1.45;
		flex: 1;
		min-width: 0;
		margin: 0;
		padding: 10px 14px !important;
		background: var(--wp--preset--color--base-alt);
		border-left: 3px solid var(--wp--preset--color--accent);
		border-radius: 10px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.hiw-step-columns.wp-block-columns {
		flex-wrap: wrap !important;
		gap: var(--wp--preset--spacing--40) !important;
	}

	.hiw-step-columns .wp-block-column {
		flex-basis: calc(33.333% - 20px) !important;
		min-width: 150px;
	}

	.hiw-step-columns .wp-block-image img {
		width: 90px !important;
		height: 90px !important;
	}
}

/* ==========================================================================
   FAQ PAGE — FAQ Accordion Section
   ========================================================================== */

@media (max-width: 767px) {
	/* Normalise the FAQ accordion section's vertical padding to match every
	   other section (the pattern inlines padding-top:100px and
	   padding-bottom:spacing|80, far more than the rest of the page). */
	.wp-block-group.has-global-padding:has(> .faq-accordion-list) {
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}

	/* Reduce top padding on the FAQ section */
	.faq-accordion-list {
		padding-top: 0;
	}

	.faq-card summary {
		font-size: 16px;
		gap: 12px;
	}

	.faq-card summary::after {
		width: 28px;
		height: 28px;
		background-size: 14px;
	}

	.faq-card {
		padding: 16px;
		border-radius: 10px;
	}

	.faq-card p {
		font-size: 14px;
	}

	/* FAQ section heading */
	.faq-accordion-list ~ h2,
	.faq-accordion-list + h2 {
		margin-bottom: var(--wp--preset--spacing--40);
	}
}

/* ==========================================================================
   FAQ PAGE — FAQ Video
   ========================================================================== */

@media (max-width: 767px) {
	.faq-video-wrap {
		padding: var(--wp--preset--spacing--50) 0;
	}

	.faq-video {
		border-radius: 12px;
	}

	.faq-video video {
		border-radius: 12px;
	}
}

/* ==========================================================================
   CONTACT PAGE — Hero Section
   ========================================================================== */

@media (max-width: 767px) {
	.contact-hero-section {
		padding-top: var(--wp--preset--spacing--60) !important;
	}

	.contact-hero-section .wp-block-columns {
		flex-direction: column-reverse;
		gap: var(--wp--preset--spacing--50);
	}

	.contact-hero-section .wp-block-column {
		flex-basis: 100%;
		width: 100% !important;
	}

	.contact-hero-section .wp-block-image img {
		border-radius: 12px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.contact-hero-section {
		padding-top: var(--wp--preset--spacing--70) !important;
	}

	.contact-hero-section .wp-block-columns {
		gap: 40px;
	}
}

/* ==========================================================================
   CONTACT PAGE — Contact Form Section (accent background)
   ========================================================================== */

@media (max-width: 767px) {
	.wpcf7-form {
		width: 100%;
	}
}

/* ==========================================================================
   PRICING PAGE — Features list
   ========================================================================== */

/* Pricing features — uniform icon sizing */
.page-template-page-pricing main > .wp-block-group.alignfull > .wp-block-columns .wp-block-image {
	flex-shrink: 0;
	width: 80px;
	min-width: 80px;
}

.page-template-page-pricing main > .wp-block-group.alignfull > .wp-block-columns .wp-block-image img {
	width: 80px;
	height: 80px;
	object-fit: contain;
}

/* Scope to pricing page only via body class */
@media (max-width: 767px) {
	/* Single-column list of feature rows. Each feature = white icon + light
	   copy inside a translucent accent card — same card language as the FAQ
	   "How It Works" / "Getting Started" steps, so the whole site reads
	   consistently on mobile. The long feature copy stays readable instead of
	   being squeezed into a cramped 2-up grid. Scoped with :not(.pricing-columns)
	   so the pricing cards below are untouched. */
	.page-template-page-pricing main > .wp-block-group.alignfull > .wp-block-columns:not(.pricing-columns) {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-bottom: 12px !important;
	}

	.page-template-page-pricing main > .wp-block-group.alignfull > .wp-block-columns:not(.pricing-columns) > .wp-block-column {
		flex-basis: 100%;
		width: 100% !important;
		min-width: 0;
	}

	/* Each feature row: icon left, copy right, vertically centred in a card. */
	.page-template-page-pricing main > .wp-block-group.alignfull > .wp-block-columns:not(.pricing-columns) > .wp-block-column > .wp-block-group {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		text-align: left;
		gap: 14px;
		background: rgba(255, 255, 255, 0.05);
		border-left: 3px solid var(--wp--preset--color--accent);
		border-radius: 10px;
		padding: 14px 16px;
	}

	.page-template-page-pricing main > .wp-block-group.alignfull > .wp-block-columns:not(.pricing-columns) > .wp-block-column .wp-block-image {
		width: 46px !important;
		min-width: 46px !important;
		flex-shrink: 0;
	}

	.page-template-page-pricing main > .wp-block-group.alignfull > .wp-block-columns:not(.pricing-columns) > .wp-block-column .wp-block-image img {
		width: 46px !important;
		height: 46px !important;
	}

	.page-template-page-pricing main > .wp-block-group.alignfull > .wp-block-columns:not(.pricing-columns) > .wp-block-column p.has-base-alt-color {
		font-size: 15px;
		line-height: 1.4;
		text-align: left;
		flex: 1;
		min-width: 0;
		margin: 0;
	}
}

/* ==========================================================================
   PRICING PAGE — Pricing Cards
   ========================================================================== */

/* Card content alignment — make all inner groups full-width */
.pricing-card > .wp-block-group {
	width: 100%;
}

.pricing-card > .wp-block-group > .wp-block-list {
	width: 100%;
}

/* Section headings (DELIVERABLES, PRODUCTION, TERM) left-aligned */
.pricing-card > .wp-block-group > p.has-accent-color {
	width: 100%;
}

/* "Each month you get:" — center it */
.pricing-card > p {
	text-align: center;
	width: 100%;
}

@media (max-width: 767px) {
	/* Single-column (1×1) stack on mobile — override flex-wrap so cards
	   never sit side by side. */
	.pricing-columns.wp-block-columns {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	.pricing-columns > .wp-block-column {
		flex-basis: 100%;
		width: 100% !important;
	}

	/* Outer wrapper padding */
	.pricing-columns {
		padding-left: 0;
		padding-right: 0;
	}

	/* Keep the original teal-outline card, just tighter on mobile so each card
	   is more compact (smaller padding, gaps and type). */
	.pricing-card {
		padding: 24px 20px !important;
		border-radius: 24px !important;
		gap: 16px;
	}

	/* Card headings */
	.pricing-card h3 {
		font-size: 22px !important;
	}

	.pricing-card h4 {
		font-size: 22px !important;
	}

	/* "Each month you get:" */
	.pricing-card > p {
		font-size: 17px;
	}

	/* Section labels */
	.pricing-card .has-accent-color.has-body-font-family {
		font-size: 15px;
	}

	/* Lists — consistent left-aligned, controlled padding.
	   Override the centered text-align inherited from the card's flex layout
	   so bullets and their text track together on the left. */
	.pricing-card .wp-block-list {
		padding-left: 22px;
		font-size: 14px;
		text-align: left;
		line-height: 1.5;
	}

	.pricing-card .wp-block-list li {
		text-align: left;
		margin-bottom: 6px;
	}

	/* Section labels (DELIVERABLES, PRODUCTION, TERM) — left align so they
	   sit flush with their bullets. */
	.pricing-card > .wp-block-group > p.has-accent-color {
		text-align: left;
	}

	/* Annual-term sub-price line — match the rest of the card body weight. */
	.pricing-card > .wp-block-group p:not(.has-accent-color) {
		font-weight: 400;
	}

	/* CTA button — full width */
	.pricing-card .wp-block-buttons {
		width: 100% !important;
	}

	.pricing-card .wp-block-button {
		width: 100% !important;
	}

	.pricing-card .wp-block-button__link {
		width: 100% !important;
		text-align: center;
		padding: 12px 18px;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.pricing-card {
		padding: 50px 30px !important;
		border-radius: 30px !important;
	}
}

/* ==========================================================================
   SHOWCASE (Case Study Archive)
   ========================================================================== */

/* Showcase page heading — clamp for mobile */
@media (max-width: 767px) {
	.showcase-grid {
		grid-template-columns: 1fr !important;
		gap: 24px;
	}

	.blog-grid {
		grid-template-columns: 1fr !important;
		gap: 24px;
	}

	/* Archive heading (80px inline) — scale down */
	main h1.has-heading-font-family[style*="font-size:80px"] {
		font-size: clamp(32px, 9vw, 50px);
		margin-bottom: var(--wp--preset--spacing--50);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.showcase-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 30px;
	}

	.blog-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 30px;
	}

	/* Archive heading (80px inline) — scale down for tablet */
	main h1.has-heading-font-family[style*="font-size:80px"] {
		font-size: clamp(40px, 7vw, 60px);
	}
}
/* ==========================================================================
   BLOG — Featured Post
   ========================================================================== */

@media (max-width: 767px) {
	.blog-featured-post.wp-block-columns {
		flex-direction: column;
		gap: var(--wp--preset--spacing--50);
	}

	.blog-featured-post .wp-block-column {
		flex-basis: 100%;
		width: 100% !important;
	}

	.blog-featured-post .wp-block-post-title {
		font-size: 28px !important;
	}

	.blog-featured-post .wp-block-post-excerpt {
		font-size: 16px;
	}

	/* Reduce splatter size on mobile */
	.blog-featured-image-wrap::before {
		width: 110% !important;
		height: 110% !important;
	}
}

/* ==========================================================================
   SINGLE POST
   ========================================================================== */

@media (max-width: 767px) {
	/* Post navigation links — stack on mobile */
	.single-post main > .wp-block-group[style*="space-between"] {
		flex-direction: column;
		gap: var(--wp--preset--spacing--30);
	}
}

/* ==========================================================================
   VIDEO MODAL — Showcase Lightbox
   ========================================================================== */

/* Showcase tile hover effects */
.bl-video-trigger[data-video-url] {
	cursor: pointer;
}

.bl-video-trigger[data-video-url] .wp-block-post-featured-image {
	position: relative;
	overflow: hidden;
}

/* Play button — hidden by default, shown on hover */
.bl-video-trigger[data-video-url] .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.8);
	width: 80px;
	height: 80px;
	background: transparent;
	border: 3px solid #fff;
	border-radius: 50%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpolygon points='9,6.5 17.5,12 9,17.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40px 40px;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.bl-video-trigger[data-video-url]:hover .wp-block-post-featured-image::after {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* Text container — darken on hover */
.bl-video-trigger[data-video-url] > .wp-block-group:last-child {
	transition: background-color 0.3s ease;
}

.bl-video-trigger[data-video-url]:hover > .wp-block-group:last-child {
	background-color: rgba(0, 0, 0, 0.25);
}

/* Modal overlay */
.bl-video-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bl-video-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.bl-video-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.bl-video-modal__content {
	position: relative;
	width: 90vw;
	max-width: 960px;
	z-index: 1;
}

.bl-video-modal__close {
	position: absolute;
	top: -40px;
	right: 0;
	background: none;
	border: none;
	color: var(--wp--preset--color--base);
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	z-index: 2;
	transition: color 0.2s ease;
}

.bl-video-modal__close:hover,
.bl-video-modal__close:focus-visible {
	color: var(--wp--preset--color--accent);
}

.bl-video-modal__player {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	background: #000;
	border-radius: var(--wp--custom--border-radius--medium, 10px);
	overflow: hidden;
}

.bl-video-modal__player iframe,
.bl-video-modal__player video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 767px) {
	.bl-video-modal__content {
		width: 95vw;
	}

	.bl-video-modal__close {
		top: -36px;
		font-size: 28px;
	}

	.bl-video-trigger[data-video-url] .wp-block-post-featured-image::after {
		width: 60px;
		height: 60px;
		background-size: 32px 32px;
		border-width: 2px;
		/* Show play button by default on touch devices */
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* ==========================================================================
   NAV — Teal hover state on menu items
   ========================================================================== */

header.wp-block-template-part .wp-block-navigation a.wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content {
	transition: color 0.2s ease;
}

header.wp-block-template-part .wp-block-navigation a.wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation a.wp-block-navigation-item__content:focus,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent) !important;
}

/* ==========================================================================
   STICKY HEADER — Shrink logo when scrolled
   The vertical padding shrink is handled on the inner nav row above
   (.is-scrolled .alignwide.is-layout-flex); the outer group keeps its 0
   padding from the template part, so no rule re-pads it here.
   ========================================================================== */

header.wp-block-template-part.is-scrolled .wp-block-image img {
	height: 60px !important;
	width: auto !important;
	transition: height 0.25s ease;
}
.faq-video__sound {
	position: absolute;
	bottom: 16px;
	right: 16px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background-color: rgba(33, 33, 33, 0.65);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.faq-video__sound:hover,
.faq-video__sound:focus-visible {
	background-color: var(--wp--preset--color--accent);
	transform: scale(1.05);
}

.faq-video__sound-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.faq-video__sound-icon--on { display: none; }
.faq-video--unmuted .faq-video__sound-icon--off { display: none; }
.faq-video--unmuted .faq-video__sound-icon--on { display: inline-flex; }

.faq-video .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   CONTACT FORM — Submission success popup
   ========================================================================== */

.bl-form-success {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--40);
}

.bl-form-success.is-open {
	display: flex;
	animation: blFormSuccessFadeIn 0.25s ease forwards;
}

.bl-form-success__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(33, 33, 33, 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.bl-form-success__content {
	position: relative;
	max-width: 460px;
	width: 100%;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--dark);
	border-radius: 20px;
	padding: 48px 32px 40px;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	transform: translateY(8px);
	animation: blFormSuccessLift 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bl-form-success__close {
	position: absolute;
	top: 12px;
	right: 16px;
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: var(--wp--preset--color--dark);
}

.bl-form-success__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	margin: 0 auto 20px;
}

.bl-form-success__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 28px;
	margin: 0 0 12px;
	color: var(--wp--preset--color--accent);
}

.bl-form-success__copy {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

@keyframes blFormSuccessFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes blFormSuccessLift {
	from { transform: translateY(20px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   FAQ — Body copy color override (white over dark background, fixes legibility)
   ========================================================================== */

.faq-card .has-base-color,
.faq-card p.has-base-color {
	color: var(--wp--preset--color--base);
}

/* ==========================================================================
   BLOG ARCHIVE — Tighter side margins so content feels less squeezed
   ========================================================================== */

@media (min-width: 1024px) {
	body.blog main.wp-block-group.alignfull,
	body.archive.category main.wp-block-group.alignfull,
	body.archive.tag main.wp-block-group.alignfull,
	body.archive main.wp-block-group.alignfull {
		padding-left: var(--wp--preset--spacing--60) !important;
		padding-right: var(--wp--preset--spacing--60) !important;
	}
}

/* ==========================================================================
   BLOG POST CONTENT — Restore vertical rhythm between blocks.
   theme.json has settings.spacing.blockGap unset, so WP zeroes block margins
   (:where(.is-layout-constrained) > *) without emitting a gap rule.
   ========================================================================== */

body.single-post .wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}

body.single-post .wp-block-post-content > h2,
body.single-post .wp-block-post-content > h3 {
	margin-block-start: var(--wp--preset--spacing--60);
}