/*
Theme Name: Shopify Agency
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.14.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shopify-agency
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the
   template's top-level sections (header part, main, footer part) — a gap that
   exists even when no markup asks for it. Zero it so sections butt edge-to-edge
   and own their vertical rhythm via padding; this does not affect block gaps
   inside nested layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* With that gap gone, main carries its own vertical padding so templates this
   theme does not author (WooCommerce shop, product, cart…) still clear the
   header and footer. A descendant selector, not a child one: WooCommerce wraps
   the single-product main in an extra group. Templates built from full-bleed
   sections opt out with is-flush and let the sections own the rhythm. */
.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

:root {
	--ease: cubic-bezier(0.33, 0, 0.2, 1);
	--duration: 0.22s;
	--fs-display: clamp(3rem, 6.5vw, 6rem);
	--fs-section: clamp(2.3rem, 4.8vw, 3.6rem);
}

/* === site header === */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.site-header .wp-block-site-title a {
	color: var(--wp--preset--color--primary);
}
.main-nav {
	gap: 1.75rem;
}
.nav-link {
	margin: 0;
}
.nav-link a {
	color: var(--wp--preset--color--text);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--duration) var(--ease);
}
.nav-link a:hover,
.nav-link a:focus {
	color: var(--wp--preset--color--primary);
}
.nav-item.has-mega {
	position: relative;
}
.nav-item.has-mega::after {
	content: "";
	position: absolute;
	top: 100%;
	left: -30px;
	right: -30px;
	height: 28px;
}
.mega-panel {
	position: absolute;
	top: calc(100% + 10px);
	margin-top: 0;
	left: 50%;
	width: 860px;
	max-width: 90vw;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgb(43 76 126 / 0.18), 0 6px 16px rgb(0 0 0 / 0.06);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 6px);
	transition: opacity var(--duration) var(--ease), visibility var(--duration) var(--ease), transform var(--duration) var(--ease);
	z-index: 60;
}
.nav-item.has-mega:hover .mega-panel,
.nav-item.has-mega:focus-within .mega-panel,
.nav-item.has-mega.open .mega-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}
.mega-panel::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 50%;
	margin-left: -7px;
	width: 14px;
	height: 14px;
	background: #ffffff;
	border-left: 1px solid var(--wp--preset--color--rule);
	border-top: 1px solid var(--wp--preset--color--rule);
	transform: rotate(45deg);
}
.mega-cols {
	margin: 0;
}
.mega-menu-label {
	margin: 0 0 0.6rem;
	padding: 0 14px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.mega-service {
	margin: 0;
}
.mega-service-link {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 9px 14px;
	border-radius: 10px;
	color: var(--wp--preset--color--text);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.mega-service-link:hover {
	background: rgb(43 76 126 / 0.08);
	color: var(--wp--preset--color--primary);
}
.mega-service svg {
	flex: none;
	color: var(--wp--preset--color--primary);
}
.mega-col-cta {
	display: flex;
	flex-direction: column;
	background: rgb(43 76 126 / 0.06);
	border-radius: 12px;
	padding: 20px !important;
	margin: 8px;
}
.mega-cta-title {
	margin: 0 0 0.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--text);
}
.mega-cta-link {
	margin: 0 0 0.35rem;
}
.mega-cta-link a {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: color var(--duration) var(--ease);
}
.mega-cta-link a:hover {
	color: var(--wp--preset--color--text);
}
.mobile-menu-head,
.menu-close,
.mobile-phone,
.header-cta-mobile {
	display: none !important;
}
.menu-toggle {
	display: none !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	background: rgb(43 76 126 / 0.06);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 8px;
	transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.menu-toggle-icon {
	display: flex;
	align-items: center;
	margin: 0;
	color: var(--wp--preset--color--text);
}
.menu-toggle-icon svg { display: none; }
.menu-toggle-icon .icon-open { display: block; }
.site-header.open .menu-toggle-icon .icon-open { display: none; }
.site-header.open .menu-toggle-icon .icon-close { display: block; }
body.menu-open { overflow: hidden; }
@media (max-width: 900px) {
	.header-cta {
		display: none !important;
	}
	.menu-toggle {
		display: inline-flex !important;
	}
	.site-header-inner {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 0;
	}

	/* full-width drawer, slides in from the right, items top-aligned */
	.main-nav {
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		gap: 0;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		margin: 0;
		background: var(--wp--preset--color--white);
		padding: 0;
		z-index: 80;
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--duration) var(--ease), visibility var(--duration) var(--ease);
	}
	.site-header.open .main-nav {
		transform: translateX(0);
		visibility: visible;
	}

	/* drawer head: brand + close */
	.mobile-menu-head {
		display: flex !important;
		width: 100%;
		padding: 16px 20px 12px;
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}
	.menu-close {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		cursor: pointer;
		background: rgb(43 76 126 / 0.06);
		border: 1px solid var(--wp--preset--color--rule);
		border-radius: 8px;
	}
	.menu-close-icon {
		display: flex;
		align-items: center;
		margin: 0;
		color: var(--wp--preset--color--text);
	}

	/* top-level menu items */
	.nav-link {
		margin: 0;
		padding: 1rem 22px;
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}
	.nav-link a {
		font-size: 1.125rem;
	}

	.nav-item.has-mega {
		width: 100%;
	}
	.nav-item.has-mega > .nav-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.nav-item.has-mega > .nav-link::after {
		content: "";
		width: 8px;
		height: 8px;
		flex: none;
		align-self: center;
		border-right: 2px solid var(--wp--preset--color--text);
		border-bottom: 2px solid var(--wp--preset--color--text);
		transform: rotate(45deg);
		transition: transform var(--duration) var(--ease);
	}
	.nav-item.has-mega.open > .nav-link::after {
		transform: rotate(225deg);
	}

	.nav-item.has-mega .mega-panel {
		position: static;
		transform: none;
		left: auto;
		width: 100%;
		max-width: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		max-height: 0;
		overflow: hidden;
		margin: 0;
		padding: 0 22px;
		transition: opacity var(--duration) var(--ease), max-height var(--duration) var(--ease), padding var(--duration) var(--ease), margin var(--duration) var(--ease);
	}
	.nav-item.has-mega.open .mega-panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		max-height: 720px;
		transform: none;
		padding: 0.5rem 22px 0.75rem;
	}
	.mega-panel::before {
		display: none;
	}
	.mega-cols {
		display: block;
		width: 100%;
		margin: 0;
		gap: 0;
	}
	.mega-cols > .wp-block-column {
		margin: 0;
	}
	.mega-menu-label {
		padding: 0 14px;
		margin-bottom: 0.25rem;
	}
	.mega-col-cta {
		margin: 10px 0 0;
	}

	.header-cta-mobile {
		display: flex !important;
		margin: 3.5rem 26px 0;
		justify-content: center;
	}
	.header-cta-mobile .wp-block-button {
		flex: 0 0 auto;
	}
	.header-cta-mobile .wp-element-button {
		justify-content: center;
	}
	.mobile-phone {
		display: block !important;
		margin: 2.25rem 26px 3rem;
		text-align: center;
	}
	.mobile-phone a {
		color: var(--wp--preset--color--primary);
		font-weight: 600;
		text-decoration: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.mega-panel {
		transition: none;
	}
}

/* === hero === */
.hero {
	padding-block: 0;
	padding-inline: 0 !important;
}
.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--wp--preset--color--primary);
	background: rgba(43, 76, 126, 0.08);
	border-radius: 999px;
	padding: 0.45rem 1rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
}
.hero-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	flex: none;
}
.hero-title {
	font-size: clamp(2.75rem, 6.5vw, 5.25rem) !important;
	line-height: 1.04;
	letter-spacing: -0.02em;
	font-weight: 700;
	max-width: 16ch;
	margin-block: 0 1.5rem;
}
.hero-sub {
	color: #000000;
	font-size: 1.125rem;
	max-width: 52ch;
}
.hero-cta {
	margin-top: 2.25rem;
}
/* === hero two-column, full-bleed (copy left, dashboard right) === */
.hero-grid {
	align-items: stretch;
	column-gap: 0;
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.hero-copy {
	display: flex;
	align-items: center;
	padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 5rem);
}.hero-content {
	max-width: 50rem;
}
.hero-media {
	padding: 0;
}
.hero-media .wp-block-image {
	width: 100%;
	height: 100%;
	margin: 0;
}
.hero-img {
	margin: 0;
}
.hero-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* === button hover states (mutual invert) === */
/* Filled primary buttons (bg primary, white text) invert to white bg / primary text on hover */
.wp-element-button {
	border: 1px solid var(--wp--preset--color--primary);
	transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.wp-element-button:hover {
	background-color: #ffffff;
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* Ghost / inverse buttons are the reverse: default white bg / primary text, fill to primary on hover */
.hero-btn-ghost .wp-element-button {
	background: #ffffff;
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary);
}
.hero-btn-ghost .wp-element-button:hover,
.transform-btn .wp-element-button:hover,
.cta-btn .wp-element-button:hover {
	background: var(--wp--preset--color--primary) !important;
	color: #ffffff !important;
	border-color: var(--wp--preset--color--primary);
}
.site-footer .footer-cta .wp-element-button:hover {
	background-color: #ffffff !important;
	color: var(--wp--preset--color--primary) !important;
}
/* side-by-side hero CTAs on small screens (tighter gap + smaller buttons so both fit one line) */
@media (max-width: 640px) {
	.hero-cta {
		gap: 0.75rem;
	}
	.hero-cta .wp-element-button {
		padding-inline: 0.85rem;
		font-size: 0.78rem;
		letter-spacing: 0.005em;
	}
}
@media (prefers-reduced-motion: reduce) {
	.wp-element-button { transition: none; }
}

/* === section bands === */
.services-band,
.work-band,
.about-band,
.faq-band {
	padding-block: var(--wp--preset--spacing--70);
}

/* dark "What we do" band with blue glow (esterling-style) */
.services-band {
	position: relative;
	overflow: hidden;
}
.services-band::before {
	content: "";
	position: absolute;
	top: -200px;
	right: -160px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(64 120 255 / 0.55) 0%, rgb(0 108 255 / 0) 70%);
	pointer-events: none;
}
.services-band > * {
	position: relative;
	z-index: 1;
}
.services-band .section-title {
	color: #ffffff;
}
.services-band .section-note a {
	color: #9db8ff;
}
.services-band .service-cards .is-style-card {
	background: rgb(255 255 255 / 0.04);
	border-color: rgb(255 255 255 / 0.14);
	position: relative;
}
.services-band .service-cards .is-style-card:hover {
	background: rgb(255 255 255 / 0.08);
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.28);
}
.services-band .is-style-card h3 {
	color: #ffffff;
}
.services-band .is-style-card p {
	color: #b9c4d6;
}
.services-band .card-link a {
	color: #9db8ff;
}
/* Make the whole “What we do” tile clickable */
.services-band .service-cards .card-link a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.section-head {
	column-gap: 1.5rem;
	row-gap: 0.5rem;
}
.section-title {
	margin: 0;
}
.section-head-left {
	display: flex;
	flex-direction: column;
}
.section-label {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}
.services-band .section-label {
	color: #9db8ff;
}
.services-band .section-title {
	font-size: clamp(2.1rem, 4.2vw, 3.25rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.01em;
}
.work-band .section-title {
	font-size: clamp(2.1rem, 4.2vw, 3.25rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.01em;
}
.section-note a {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
	white-space: nowrap;
}

/* === services cards === */
.service-cards {
	margin-top: var(--wp--preset--spacing--50);
}
.service-cards .wp-block-column {
	display: flex;
}
.service-cards .is-style-card {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.is-style-card {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--rounded--md);
	height: 100%;
	transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.is-style-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgb(43 76 126 / 0.08);
}
.is-style-card h3 {
	color: var(--wp--preset--color--primary);
	font-size: 1.15rem;
	margin-block: 0 0.75rem;
}
.is-style-card p {
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	margin-bottom: 0;
}
.is-style-card .card-link {
	margin-top: auto;
	padding-top: 1.25rem;
}
.card-link a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* === transform banner (dark band, matches “What we do” treatment) === */
.transform-band {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--70);
}
.transform-band::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -10%;
	width: 620px;
	height: 620px;
	background: radial-gradient(circle, rgb(64 120 255 / 0.55), transparent 70%);
	pointer-events: none;
}
.transform-band > * {
	position: relative;
	z-index: 1;
}
.transform-panel {
	color: #ffffff;
}
.transform-title {
	color: #ffffff;
	font-size: clamp(2.1rem, 4.2vw, 3.25rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin-block: 0 1.25rem;
	margin-inline: 0 auto !important;
}
.transform-text {
	color: #c7d2e3;
	font-size: 1.125rem;
	max-width: 58ch;
	margin-block: 0 2rem;
	margin-inline: 0 auto !important;
}
.transform-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-inline: 0 auto !important;
}
.transform-btns {
	margin: 0;
}
.transform-btn .wp-element-button {
	font-weight: 600;
	color: var(--wp--preset--color--primary) !important;
	background: #ffffff;
}
.transform-note {
	color: #9db8ff;
	font-size: 0.95rem;
	margin: 0;
}

/* === work === */
.work-grid {
	margin-top: var(--wp--preset--spacing--50);
}
.work-grid .wp-block-column {
	display: flex;
	flex-direction: column;
}
.work-img {
	margin-block: 0 1.25rem;
	border-radius: var(--wp--custom--rounded--md);
	overflow: hidden;
}
.work-img img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
	filter: saturate(0.9) brightness(1.03);
}
.work-tag {
	color: var(--wp--preset--color--primary);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-block: 1rem 0.5rem;
}
.work-grid h3 {
	margin: 0;
	font-size: 1.15rem;
}

/* === about === */
.about-text {
	color: var(--wp--preset--color--muted);
	max-width: 56ch;
	margin-top: 1.25rem;
}
.about-link {
	margin-top: 0;
}
.about-link a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* === faq (accordion) === */
.faq-list {
	margin-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--rule);
}
.faq-item {
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.faq-item h3 {
	font-size: 1.15rem;
	margin-block: 0;
	padding: 0.25rem 0.25rem 0.25rem 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	transition: color var(--duration) var(--ease);
}
.faq-item h3::after {
	content: "+";
	flex-shrink: 0;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	transition: transform var(--duration) var(--ease);
}
.faq-item.is-open h3::after {
	content: "−";
}
.faq-item h3:hover {
	color: var(--wp--preset--color--primary);
}
.faq-item p {
	color: var(--wp--preset--color--muted);
	max-width: 70ch;
	margin: 0;
	padding-top: 0.75rem;
}

/* === cta (dark, glow matches services band) === */
.cta-band {
	padding-block: clamp(4rem, 9vw, 6.5rem);
	position: relative;
	overflow: hidden;
}
.cta-band::before {
	content: "";
	position: absolute;
	top: -200px;
	right: -160px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(64 120 255 / 0.55) 0%, rgb(0 108 255 / 0) 70%);
	pointer-events: none;
}
.cta-band > * {
	position: relative;
	z-index: 1;
}
.cta-band .cta-title {
	color: #ffffff;
	font-weight: 700;
	margin-block: 0 1rem;
}
.cta-band .cta-sub {
	color: #c7d2e3;
	max-width: 52ch;
	font-size: 1.125rem;
}
.cta-buttons {
	margin-top: 2rem;
}
.cta-btn .wp-element-button {
	font-weight: 600;
}

/* === why choose (dark) + leading agency + 2x2 stats (Design & Development subpage) === */
.why-band {
	padding-block: clamp(4rem, 9vw, 6.5rem);
	position: relative;
	overflow: hidden;
}
.why-band::before {
	content: "";
	position: absolute;
	top: -200px;
	right: -160px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(64 120 255 / 0.55) 0%, rgb(0 108 255 / 0) 70%);
	pointer-events: none;
}
.why-band > * {
	position: relative;
	z-index: 1;
}
.why-inner {
	max-width: 46rem;
}
.why-title {
	color: #ffffff;
	font-size: clamp(2rem, 4vw, 3.1rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin-block: 0 1.25rem;
}
.why-text {
	color: #c7d2e3;
	font-size: 1.125rem;
	max-width: 52ch;
	margin-block: 0 1.5rem;
}
.why-list {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}
.why-list li {
	position: relative;
	padding: 0.85rem 0 0.85rem 2rem;
	border-bottom: 1px solid rgb(255 255 255 / 0.12);
	color: #ffffff;
	font-size: 1.05rem;
}
.why-list li:last-child {
	border-bottom: 0;
}
.why-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.3rem;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}
.why-cta {
	margin-top: 0.5rem;
}
.agency-band {
	padding-block: clamp(4rem, 9vw, 6.5rem);
}
.agency-cols {
	align-items: center;
	column-gap: clamp(2rem, 5vw, 4rem);
}
.agency-title {
	font-size: clamp(2rem, 4vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin-block: 0 1.25rem;
}
.agency-text {
	color: var(--wp--preset--color--muted);
	font-size: 1.125rem;
	max-width: 46ch;
	margin-block: 0 2rem;
}
.agency-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
.agency-stat {
	padding: 1.75rem 1.5rem;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
}
.agency-stat-value {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	margin-block: 0 0.6rem;
}
.agency-stat-label {
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	margin: 0;
}

/* === full-bleed bands: stretch hero + bands edge-to-edge while content stays at its reading width === */
.entry-content > .alignfull {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* === footer (light) === */
.site-footer {
	color: var(--wp--preset--color--text);
	border-top: 1px solid var(--wp--preset--color--rule);
}
.site-footer .wp-block-site-title {
	color: var(--wp--preset--color--primary);
}
.site-footer h3 {
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text);
}
.site-footer .footer-tagline,
.site-footer .footer-copy,
.site-footer .footer-bottom .wp-block-paragraph {
	color: var(--wp--preset--color--muted);
}
.site-footer .wp-block-column > p {
	font-size: 0.9rem;
}
.site-footer a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.site-footer a:hover {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.site-footer .footer-cta .wp-element-button {
	font-weight: 600;
	color: #ffffff !important;
}
.site-footer .wp-block-columns {
	column-gap: 2rem;
}

/* === subpages === */
.page-hero {
	padding-block: clamp(3.5rem, 7vw, 6rem);
}
/* release the subpage hero content from centering so the copy hugs the left edge, full-bleed (matches homepage) */
.page-hero .hero-content {
	margin-inline: 0 auto !important;
}
/* service-page hero: widen the content on large screens so it fills more of the viewport */
@media (min-width: 1200px) {
	.page-hero .hero-content { max-width: 74rem; }
}
.page-hero-title {
	font-size: var(--wp--preset--font-size--display) !important;
	line-height: 1.08;
	letter-spacing: -0.02em;
	max-width: 21ch;
	margin-block: 0 1.25rem;
}
.page-hero-sub {
	color: var(--wp--preset--color--muted);
	font-size: 1.125rem;
	max-width: 58ch;
}
.contact-band,
.service-band {
	padding-block: var(--wp--preset--spacing--70);
}
.contact-h {
	color: var(--wp--preset--color--primary);
}
.contact-line {
	color: var(--wp--preset--color--muted);
}
.contact-line strong {
	color: var(--wp--preset--color--text);
}
.contact-sub {
	margin-top: 2rem;
}
.contact-list {
	color: var(--wp--preset--color--muted);
}

/* === contact (dark, glow matches services band) === */
.contact-band {
	padding-block: clamp(4rem, 9vw, 6.5rem);
	position: relative;
	overflow: hidden;
}
.contact-band::before {
	content: "";
	position: absolute;
	top: -200px;
	right: -160px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(64 120 255 / 0.55) 0%, rgb(0 108 255 / 0) 70%);
	pointer-events: none;
}
.contact-band > * {
	position: relative;
	z-index: 1;
}
.contact-title {
	color: #ffffff;
	font-size: var(--wp--preset--font-size--display) !important;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin-block: 0 1.1rem;
}
.contact-intro {
	color: #c7d2e3;
	max-width: 52ch;
	font-size: 1.125rem;
	margin-block: 0;
}
.contact-cols {
	column-gap: clamp(2rem, 5vw, 4rem);
	align-items: flex-start;
	margin-top: 3rem;
}
.contact-form-card {
	background: rgb(255 255 255 / 0.04);
	border: 1px solid rgb(255 255 255 / 0.12);
	border-radius: var(--wp--custom--rounded--md);
	padding: var(--wp--preset--spacing--40);
}
.contact-form-card .wp-block-button {
	margin-top: 1.25rem;
}
.contact-form-card .wp-block-jetpack-contact-form {
	gap: 1.25rem;
}
.contact-form-card .wp-block-jetpack-contact-form label {
	color: #ffffff;
	font-weight: 600;
	font-size: 0.9rem;
	margin-block: 0 0.4rem;
}
.contact-form-card .wp-block-jetpack-contact-form :is(input, textarea, select) {
	width: 100%;
	background: rgb(255 255 255 / 0.06);
	border: 1px solid rgb(255 255 255 / 0.18);
	border-radius: var(--wp--custom--rounded--sm);
	color: #ffffff;
	padding: 0.8rem 1rem;
	font-size: 1rem;
	transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.contact-form-card .wp-block-jetpack-contact-form textarea {
	min-height: 150px;
	resize: vertical;
}
.contact-form-card .wp-block-jetpack-contact-form :is(input, textarea, select)::placeholder {
	color: rgb(199 210 227 / 0.6);
}
.contact-form-card .wp-block-jetpack-contact-form :is(input, textarea, select):focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	background: rgb(255 255 255 / 0.1);
}
.contact-submit {
	margin-top: 0.5rem;
}
.contact-submit .wp-element-button {
	background: #ffffff;
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	font-weight: 700;
}
.contact-submit .wp-element-button:hover {
	background: var(--wp--preset--color--primary) !important;
	color: #ffffff !important;
	border-color: var(--wp--preset--color--primary);
}
.contact-details-h {
	color: #ffffff;
	font-size: var(--wp--preset--font-size--headline) !important;
	line-height: 1.15;
	margin-block: 0 1rem;
}
.contact-details-intro {
	color: #b9c4d6;
	max-width: 34ch;
	margin-block: 0 2rem;
}
.contact-detail {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: #ffffff;
	margin-block: 0 1.1rem;
	font-size: 1rem;
}
.contact-detail .contact-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	color: #ffffff;
	border: 1px solid rgb(255 255 255 / 0.7);
	border-radius: 50%;
	padding: 9px;
	box-sizing: border-box;
}
.contact-detail a {
	color: #ffffff;
	text-decoration: none;
}
.contact-detail a:hover {
	color: #c7d2e3;
}
.contact-phone {
	color: #ffffff;
}
.service-lead {
	color: var(--wp--preset--color--muted);
	font-size: 1.15rem;
	max-width: 60ch;
}
.service-features {
	margin-top: var(--wp--preset--spacing--50);
}
.service-features .is-style-card h3 {
	font-size: 1rem;
}

/* === process === */
.process-band {
	padding-block: var(--wp--preset--spacing--70);
	position: relative;
	overflow: hidden;
}
.process-band::before {
	content: "";
	position: absolute;
	top: -200px;
	right: -160px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(64 120 255 / 0.55) 0%, rgb(0 108 255 / 0) 70%);
	pointer-events: none;
}
.process-band > * {
	position: relative;
	z-index: 1;
}
.process-title {
	font-size: clamp(2.1rem, 4.2vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	font-weight: 700;
	color: #ffffff;
	max-width: 22ch;
	margin-block: 0 2.5rem;
}
.process-steps {
	border-top: 1px solid rgb(255 255 255 / 0.14);
}
.process-step {
	gap: clamp(1.25rem, 3vw, 3rem);
	align-items: flex-start;
	padding-block: 2rem;
	border-bottom: 1px solid rgb(255 255 255 / 0.14);
}
.process-num {
	color: #9db8ff;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
	margin: 0;
	flex: none;
	width: 3rem;
}
.process-body {
	min-width: 0;
}
.process-body h3 {
	font-size: 1.35rem;
	line-height: 1.2;
	color: #ffffff;
	margin-block: 0 0.5rem;
}
.process-body p {
	color: #b9c4d6;
	max-width: 60ch;
	margin: 0;
}

/* === testimonial === */
.testimonial-band {
	padding-block: var(--wp--preset--spacing--70);
}
.testimonial-cols {
	align-items: center;
	column-gap: clamp(2rem, 5vw, 4.5rem);
}
.testimonial-title {
	font-size: clamp(1.8rem, 3.6vw, 2.9rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin-block: 0 1.5rem;
	max-width: 18ch;
}
.testimonial-quote {
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text);
	max-width: 46ch;
	margin-block: 0 1.25rem;
}
.testimonial-byline {
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	margin-block: 0 2.25rem;
}
.testimonial-buttons {
	column-gap: 0.75rem;
}
.testimonial-media {
	display: flex;
}
.testimonial-media .wp-block-image {
	flex: 1;
	margin: 0;
}
.testimonial-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}
.testimonial-btn-ghost .wp-element-button {
	background: #ffffff;
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary);
}
.testimonial-btn-ghost .wp-element-button:hover {
	background: var(--wp--preset--color--primary) !important;
	color: #ffffff !important;
}

/* === stats + migrate-from === */
.stats-band {
	padding-block: var(--wp--preset--spacing--70);
}
.stats-row {
	column-gap: 1.5rem;
}
.stats-row .wp-block-column {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.stat-value {
	font-size: clamp(2.1rem, 4.2vw, 3.5rem);
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
	margin-block: 0 0.6rem;
}
.stat-label {
	color: var(--wp--preset--color--muted);
	margin: 0;
	font-size: 0.95rem;
}
.migrate-row {
	align-items: baseline;
	column-gap: 2rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}
.migrate-label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.migrate-platforms {
	color: var(--wp--preset--color--text);
	font-weight: 600;
	margin: 0;
}
/* === built-with tech badges (Design & Development subpage) === */
.builtwith-items {
	gap: 0.9rem 1.75rem;
}
.builtwith-item {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
	color: var(--wp--preset--color--text);
	margin: 0;
}
.builtwith-item::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	flex: none;
}
/* === what's included === */
.includes-band {
	padding-block: var(--wp--preset--spacing--70);
}
.includes-title {
	font-size: clamp(1.8rem, 3.4vw, 2.7rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	font-weight: 700;
	max-width: 22ch;
	margin-block: 0 2rem;
}
.includes-cols {
	column-gap: clamp(2rem, 5vw, 4rem);
}
.includes-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.includes-list li {
	padding: 0.9rem 0 0.9rem 1.75rem;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	position: relative;
	color: var(--wp--preset--color--text);
}
.includes-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.3rem;
	width: 0.6rem;
	height: 0.6rem;
	background: var(--wp--preset--color--primary);
}
.includes-list li:last-child {
	border-bottom: 0;
}

/* === motion === */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* === unified type scale === */
.hero-title,
.page-hero-title {
	font-size: var(--fs-display);
	line-height: 1.02;
	letter-spacing: -0.02em;
	font-weight: 700;
}
.section-title,
.services-band .section-title,
.work-band .section-title,
.transform-title,
.why-title,
.agency-title,
.process-title,
.testimonial-title,
.includes-title {
	font-size: var(--fs-section);
	line-height: 1.08;
	letter-spacing: -0.01em;
	font-weight: 700;
}

/* === refined ink glow (premium, directional) === */
.hero::before,
.services-band::before,
.transform-band::before,
.cta-band::before,
.why-band::before,
.contact-band::before,
.process-band::before {
	background: radial-gradient(900px 540px at 88% -12%, rgb(64 120 255 / 0.30), transparent 60%) !important;
}

/* === focus visibility === */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* === scroll reveals === */
html.js .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
html.js .reveal.is-inview {
	opacity: 1;
	transform: none;
}