/**
 * Whitepeak Elementor Addon — Widget Styles
 * Loads after tokens.css. All color/type/spacing values come from
 * custom properties defined there — no hardcoded hex here.
 *
 * Layout numbers below are ported from the approved final build
 * (homepage.html), not the earlier Figma-export estimate.
 */

/* ---------- Base / layout ---------- */

.wpk-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wpk-content-max-width);
	margin-inline: auto;
	padding-inline: var(--wpk-gutter);
}

.wpk-container--narrow {
	max-width: var(--wpk-content-max-width-narrow);
}

.wpk-section {
	padding-top: var(--wpk-section-spacing);
	padding-bottom: var(--wpk-section-spacing);
}

.wpk-eyebrow {
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-semibold);
	color: var(--wpk-accent);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 13px;
	margin: 0 0 12px;
}

.wpk-header,
.wpk-hero,
.wpk-trust-bar,
.wpk-media-features,
.wpk-services-grid,
.wpk-before-after,
.wpk-process-steps,
.wpk-cta-banner,
.wpk-photo-cta,
.wpk-faq,
.wpk-hover-cards,
.wpk-installer-checklist,
.wpk-photo-steps,
.wpk-highlight-grid,
.wpk-photo-cards,
.wpk-content-image,
.wpk-footer {
	font-family: var(--wpk-font-body);
	color: var(--wpk-ink);
}

.wpk-header h1, .wpk-header h2, .wpk-header h3,
.wpk-hero h1, .wpk-hero h2, .wpk-hero h3,
.wpk-trust-bar h1, .wpk-trust-bar h2, .wpk-trust-bar h3,
.wpk-media-features h1, .wpk-media-features h2, .wpk-media-features h3,
.wpk-services-grid h1, .wpk-services-grid h2, .wpk-services-grid h3,
.wpk-before-after h1, .wpk-before-after h2, .wpk-before-after h3,
.wpk-process-steps h1, .wpk-process-steps h2, .wpk-process-steps h3,
.wpk-cta-banner h1, .wpk-cta-banner h2, .wpk-cta-banner h3,
.wpk-photo-cta h1, .wpk-photo-cta h2, .wpk-photo-cta h3,
.wpk-faq h1, .wpk-faq h2, .wpk-faq h3,
.wpk-hover-cards h1, .wpk-hover-cards h2, .wpk-hover-cards h3,
.wpk-installer-checklist h1, .wpk-installer-checklist h2, .wpk-installer-checklist h3 {
	font-family: var(--wpk-font-display);
	font-weight: var(--wpk-weight-display);
	color: var(--wpk-ink);
	line-height: 1.16;
	letter-spacing: -0.6px;
	margin: 0;
	font-size: 36px;
}

/* Fallback baseline for wpk_render_section_header()'s three pieces.
   Class-based (not tag-based) on purpose: the HTML tag for the heading and
   sub-heading is now a per-instance choice (h1–h6/div/span/p), so a widget
   that used to hardcode an h2-based selector for its own fine-tuned sizing
   still wins for the default h2 (a class+tag selector outranks a bare
   class), but switching to a different tag falls through to this instead
   of losing all styling outright. */
.wpk-section-heading {
	display: block;
	font-family: var(--wpk-font-display);
	font-weight: var(--wpk-weight-display);
	color: var(--wpk-ink);
	line-height: 1.16;
	letter-spacing: -0.6px;
	margin: 0;
	font-size: 36px;
}
.wpk-section-subcopy {
	display: block;
	margin-top: 22px;
	color: var(--wpk-muted);
	font-size: 17px;
	line-height: 1.55;
}
.wpk-section-subcopy p {
	margin: 0;
}
.wpk-section-subcopy p + p {
	margin-top: 1em;
}
.wpk-section-subheading {
	display: block;
	margin-top: 16px;
	color: var(--wpk-accent);
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-bold);
	font-size: 18px;
	line-height: 1.5;
}

.wpk-media-features h4,
.wpk-process-step h3,
.wpk-service-card h3,
.wpk-checklist strong,
.wpk-trust-bar strong {
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-bold);
}

/* Keyboard focus visible everywhere */
.wpk-header a:focus-visible,
.wpk-btn:focus-visible,
.wpk-ba__handle:focus-visible,
.wpk-media-features__play:focus-visible,
.wpk-mobile-menu__close:focus-visible,
.wpk-menu__toggle:focus-visible,
.wpk-submenu__toggle:focus-visible,
.wpk-mobile-nav__link:focus-visible,
.wpk-mobile-nav__toggle:focus-visible {
	outline: 3px solid var(--wpk-accent-deep);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}

/* ---------- Buttons ---------- */

.wpk-btn,
.wpk-btn:link,
.wpk-btn:visited,
.wpk-btn:hover,
.wpk-btn:focus,
.wpk-btn:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	min-height: 50px;
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-bold);
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--wpk-radius-pill);
	padding: 12px 23px;
	border: 1px solid transparent;
	white-space: nowrap;
	transition: background 0.2s, transform 0.2s;
}

.wpk-btn:hover {
	transform: translateY(-2px);
}

.wpk-btn--small {
	min-height: 46px;
	padding: 10px 17px;
	gap: 14px;
	font-size: 14px;
}

.wpk-btn--primary {
	background: var(--wpk-accent);
	color: #fff;
}
.wpk-btn--primary:hover {
	background: var(--wpk-accent-deep);
}

.wpk-btn--dark {
	background: var(--wpk-ink);
	color: #fff;
}
.wpk-btn--dark:hover {
	background: #444;
}

.wpk-btn--white {
	background: #fff;
	color: var(--wpk-ink);
}
.wpk-btn--white:hover {
	background: var(--wpk-surface-alt);
}

.wpk-btn--outline {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}
.wpk-btn--outline:hover {
	background: rgba(255, 255, 255, 0.14);
}

.wpk-btn__arrow {
	display: inline-flex;
	flex: none;
	transition: transform 0.15s ease;
}
.wpk-btn__arrow svg {
	display: block;
	width: 24px;
	height: 9px;
	stroke: currentColor;
	stroke-width: 1.2;
	fill: none;
}
.wpk-btn:hover .wpk-btn__arrow {
	transform: translateX(3px);
}

/* ---------- Background video layer ---------- */
/* Paired with wpk_render_background_video() — sits behind the section's
   own scrim/content, cover-sized regardless of the source video's ratio. */

.wpk-bg-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.wpk-bg-video video,
.wpk-bg-video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	border: 0;
}

/* ---------- Shared icon sizing ---------- */

.wpk-icon {
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.35;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Checklist / icon columns ---------- */

.wpk-checklist {
	list-style: none;
	margin: 30px 0;
	padding: 0;
}

.wpk-checklist__item {
	position: relative;
	padding-left: 39px;
	margin-bottom: 30px;
}
.wpk-checklist__item:last-child {
	margin-bottom: 0;
}

.wpk-checklist__icon {
	position: absolute;
	left: 0;
	top: 2px;
	width: 26px;
	height: 26px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wpk-accent);
	color: #fff;
	font-size: 16px;
}
.wpk-checklist__icon .wpk-icon,
.wpk-checklist__icon img {
	width: 16px;
	height: 16px;
	stroke-width: 2;
}
.wpk-checklist__icon i {
	line-height: 1;
}

.wpk-checklist__item h3 {
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-bold);
	font-size: 21px;
	line-height: 1.3;
	margin: 0 0 11px;
	letter-spacing: 0;
}

.wpk-checklist__item p {
	margin: 0;
	color: var(--wpk-muted);
	font-size: 16px;
	line-height: 1.55;
}

.wpk-icon-col {
	text-align: left;
}
.wpk-icon-col__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	color: var(--wpk-accent);
	margin-bottom: 16px;
	font-size: 35px;
}
.wpk-icon-col__icon .wpk-icon,
.wpk-icon-col__icon img {
	width: 100%;
	height: 100%;
}
.wpk-icon-col__icon i {
	line-height: 1;
}
.wpk-icon-col h4 {
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-bold);
	color: var(--wpk-ink);
	margin: 0 0 10px;
	font-size: 17px;
	line-height: 1.4;
}
.wpk-icon-col p {
	margin: 0;
	color: var(--wpk-muted);
	font-size: 14px;
	line-height: 1.65;
}

/* ================= Header ================= */

.wpk-header {
	position: relative;
	width: 100%;
	z-index: 40;
}

.wpk-header--sticky {
	position: fixed;
	top: 0;
	left: 0;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, top 0.2s ease;
}

/* The WP admin toolbar is also position:fixed at the viewport top, so our
   fixed header has to yield to it explicitly rather than sitting under it. */
body.admin-bar .wpk-header--sticky {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .wpk-header--sticky {
		top: 46px;
	}
}

.wpk-header.wpk-is-solid {
	background: var(--wpk-surface);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.wpk-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 35px;
	min-height: 142px;
}

.wpk-header__logo {
	display: block;
	width: 133px;
	flex: none;
}
.wpk-header__logo img {
	display: block;
	width: 100%;
	max-height: 108px;
	object-fit: contain;
}

.wpk-header__nav {
	display: flex;
	align-items: center;
	gap: 46px;
}

.wpk-menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 46px;
	margin: 0;
	padding: 0;
}

.wpk-menu__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
}

.wpk-menu__separator {
	flex: none;
	width: var(--wpk-nav-sep-size, 2px);
	height: 18px;
	margin-inline: var(--wpk-nav-sep-gap, 8px);
	background: var(--wpk-nav-sep-color, rgba(255, 255, 255, 0.35));
}
.wpk-header.wpk-is-solid .wpk-menu__separator {
	background: var(--wpk-nav-sep-color-solid, rgba(37, 37, 37, 0.15));
}

/* Scoped to ".wpk-menu > .wpk-menu__item > a" specifically — the CTA
   button lives in a sibling .wpk-header__cta, not inside .wpk-menu, and
   dropdown links inside .wpk-submenu get their own color controls below,
   so a bare ".wpk-menu a" would repaint those too. */
.wpk-menu > .wpk-menu__item > a,
.wpk-menu > .wpk-menu__item > a:link,
.wpk-menu > .wpk-menu__item > a:visited {
	text-decoration: none;
	color: #fff;
	font-weight: var(--wpk-weight-body-semibold);
	font-size: 16px;
	transition: opacity 0.2s;
}
.wpk-menu > .wpk-menu__item > a:hover,
.wpk-menu > .wpk-menu__item > a:focus-visible {
	opacity: 0.7;
}
.wpk-header.wpk-is-solid .wpk-menu > .wpk-menu__item > a {
	color: var(--wpk-ink);
}

.wpk-menu__toggle,
.wpk-submenu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	padding: 4px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.wpk-menu__toggle {
	color: #fff;
}
.wpk-header.wpk-is-solid .wpk-menu__toggle {
	color: var(--wpk-ink);
}
.wpk-menu__toggle .wpk-icon,
.wpk-submenu__toggle .wpk-icon {
	width: 12px;
	height: 12px;
	stroke-width: 2;
	transition: transform 0.2s ease;
}
.wpk-menu__item.is-open > .wpk-menu__toggle .wpk-icon {
	transform: rotate(180deg);
}
.wpk-submenu__item.is-open > .wpk-submenu__toggle .wpk-icon {
	transform: rotate(90deg);
}

/* Dropdown panel. Opens on hover/focus for pointer users that can hover;
   the toggle button (JS-driven .is-open + aria-expanded, header-nav.js)
   is the authoritative control for touch and keyboard, where CSS :hover
   never fires — so hover here is a convenience layer, not the only way in. */
.wpk-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	list-style: none;
	min-width: var(--wpk-submenu-width, 240px);
	margin: 12px 0 0;
	padding: 10px;
	border-radius: 12px;
	background: var(--wpk-surface);
	box-shadow: 0 18px 48px rgba(16, 27, 19, 0.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.wpk-submenu.wpk-submenu--nested {
	top: 0;
	left: 100%;
	margin: 0 0 0 6px;
}
@media (hover: hover) and (pointer: fine) {
	.wpk-menu__item:hover > .wpk-submenu,
	.wpk-menu__item:focus-within > .wpk-submenu,
	.wpk-submenu__item:hover > .wpk-submenu,
	.wpk-submenu__item:focus-within > .wpk-submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.18s ease, transform 0.18s ease;
	}
}
.wpk-menu__item.is-open > .wpk-submenu,
.wpk-submenu__item.is-open > .wpk-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.wpk-submenu__item {
	position: relative;
}
.wpk-submenu__item.wpk-has-children {
	display: flex;
	align-items: center;
}
.wpk-submenu__item > a {
	display: block;
	flex: 1;
	padding: 10px 14px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--wpk-ink);
	font-size: 15px;
	font-weight: var(--wpk-weight-body-medium);
	transition: background 0.15s, color 0.15s;
}
.wpk-submenu__item > a:hover,
.wpk-submenu__item > a:focus-visible {
	background: var(--wpk-surface-alt);
	color: var(--wpk-accent-deep);
}

.wpk-submenu__separator {
	height: var(--wpk-nav-sep-size, 2px);
	margin: 8px 6px;
	background: var(--wpk-submenu-sep-color, var(--wpk-hairline));
}

.wpk-header__cta .wpk-btn {
	min-width: 236px;
}

.wpk-header__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: background 0.2s, transform 0.2s;
	cursor: pointer;
}
.wpk-header__burger:hover {
	background: rgba(255, 255, 255, 0.16);
	transform: scale(1.04);
}
.wpk-header__burger .wpk-icon {
	width: 24px;
	height: 24px;
	stroke-width: 1.8;
}
.wpk-header.wpk-is-solid .wpk-header__burger {
	border-color: rgba(37, 37, 37, 0.16);
	background: var(--wpk-surface-alt);
	color: var(--wpk-ink);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

@media (max-width: 980px) {
	.wpk-header__inner {
		min-height: 120px;
	}
	.wpk-header__logo {
		width: 110px;
	}
	.wpk-menu {
		gap: 23px;
	}
	.wpk-menu > .wpk-menu__item > a {
		font-size: 14px;
	}
	.wpk-header__cta .wpk-btn {
		min-width: auto;
		font-size: 13px;
		padding: 12px 18px;
		gap: 16px;
	}
}

@media (max-width: 700px) {
	.wpk-header__inner {
		min-height: 103px;
	}
	.wpk-header__logo {
		width: 102px;
	}
	.wpk-header__nav,
	.wpk-header__cta {
		display: none;
	}
	.wpk-header__burger {
		display: grid;
		place-items: center;
	}
}

/* ---------- Mobile menu (native <dialog>) ---------- */

body.wpk-menu-open {
	position: fixed;
	inset-inline: 0;
	top: var(--wpk-menu-scroll-top, 0);
	width: 100%;
	overflow: hidden;
}

.wpk-mobile-menu {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(88vw, 390px);
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 26px 0 0 26px;
	overflow: hidden;
	background: #fff;
	color: var(--wpk-ink);
	box-shadow: -24px 0 90px rgba(16, 27, 19, 0.18);
	transform: translateX(105%);
	transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 100;
}
.wpk-mobile-menu::backdrop {
	background: rgba(19, 33, 22, 0.55);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	opacity: 0;
	transition: opacity 0.28s ease 0.08s;
}
.wpk-mobile-menu.is-open {
	transform: translateX(0);
	transition: transform 0.54s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.wpk-mobile-menu.is-open::backdrop {
	opacity: 1;
	transition: opacity 0.26s ease;
}

.wpk-mobile-menu__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: max(24px, env(safe-area-inset-top)) 28px max(28px, env(safe-area-inset-bottom));
	overflow-y: auto;
	overscroll-behavior: contain;
}

.wpk-mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-shrink: 0;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(37, 37, 37, 0.07);
}
.wpk-mobile-menu__logo {
	width: 112px;
	height: 74px;
	object-fit: contain;
}
.wpk-mobile-menu__close {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(91, 129, 53, 0.12);
	border-radius: 50%;
	background: var(--wpk-surface-alt);
	color: var(--wpk-accent-deep);
	cursor: pointer;
	transition: background 0.2s, transform 0.25s;
}
.wpk-mobile-menu__close:hover {
	background: #e4ebdd;
	transform: rotate(90deg);
}
.wpk-mobile-menu__close .wpk-icon {
	width: 20px;
	height: 20px;
	stroke-width: 1.6;
}

.wpk-mobile-menu__eyebrow {
	margin: 29px 0 10px;
	color: var(--wpk-accent);
	font-size: 11px;
	font-weight: var(--wpk-weight-body-bold);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.wpk-mobile-nav {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	list-style: none;
	margin: 0;
	padding: 0 0 28px;
}

.wpk-mobile-nav__item {
	position: relative;
}

.wpk-mobile-nav__row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 70px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(37, 37, 37, 0.07);
}

.wpk-mobile-nav__link {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	text-decoration: none;
	color: var(--wpk-ink);
	font-size: clamp(24px, 7vw, 30px);
	font-weight: var(--wpk-weight-body-medium);
	line-height: 1.3;
	letter-spacing: -0.7px;
	transition: color 0.2s;
}
.wpk-mobile-nav__link .wpk-icon {
	width: 22px;
	height: 22px;
	flex: none;
	stroke: var(--wpk-accent);
	stroke-width: 1.5;
	transition: transform 0.25s;
}
.wpk-mobile-nav__link:hover {
	color: var(--wpk-accent);
}
.wpk-mobile-nav__link:hover .wpk-icon {
	transform: translateX(4px);
}

.wpk-mobile-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wpk-surface-alt);
	color: var(--wpk-accent-deep);
	cursor: pointer;
	transition: background 0.2s;
}
.wpk-mobile-nav__toggle:hover {
	background: #e4ebdd;
}
.wpk-mobile-nav__toggle .wpk-icon {
	width: 18px;
	height: 18px;
	stroke-width: 1.8;
	transition: transform 0.25s ease;
}
.wpk-mobile-nav__item.is-open > .wpk-mobile-nav__row > .wpk-mobile-nav__toggle .wpk-icon {
	transform: rotate(180deg);
}

.wpk-mobile-nav__separator {
	height: var(--wpk-nav-sep-size, 2px);
	margin: 10px 0;
	background: var(--wpk-submenu-sep-color, var(--wpk-hairline));
}

/* CSS-grid accordion: a single explicit row collapsed to 0fr expands to 1fr
   on .is-open, animating height without measuring scrollHeight in JS. */
.wpk-mobile-submenu-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}
.wpk-mobile-nav__item.is-open > .wpk-mobile-submenu-wrap {
	grid-template-rows: 1fr;
}
.wpk-mobile-submenu {
	min-height: 0;
	margin: 0;
	padding-left: 20px;
	list-style: none;
	overflow: hidden;
}
.wpk-mobile-submenu .wpk-mobile-nav__row {
	min-height: 56px;
}
.wpk-mobile-submenu .wpk-mobile-nav__link {
	color: var(--wpk-muted);
	font-size: 19px;
	letter-spacing: -0.3px;
}
.wpk-mobile-submenu .wpk-mobile-nav__link:hover {
	color: var(--wpk-accent);
}

.wpk-mobile-nav > .wpk-mobile-nav__item > .wpk-mobile-nav__row {
	opacity: 0;
	transform: translateX(24px);
	transition: opacity 0.15s ease, transform 0.2s ease, color 0.2s;
}
.wpk-mobile-menu.is-open .wpk-mobile-nav > .wpk-mobile-nav__item > .wpk-mobile-nav__row {
	opacity: 1;
	transform: translateX(0);
	transition: opacity 0.4s ease calc(0.18s + var(--wpk-item-index) * 0.045s), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(0.18s + var(--wpk-item-index) * 0.045s), color 0.2s;
}

.wpk-mobile-menu__footer {
	flex-shrink: 0;
	margin-top: auto;
	padding-top: 20px;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.15s, transform 0.2s;
}
.wpk-mobile-menu.is-open .wpk-mobile-menu__footer {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.4s ease 0.34s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.34s;
}
.wpk-mobile-menu__footer p {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--wpk-muted);
}
.wpk-mobile-menu__footer .wpk-btn {
	width: 100%;
	min-height: 53px;
	gap: 24px;
	font-size: 15px;
}
.wpk-mobile-menu__call {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	margin-top: 9px;
	text-decoration: none;
	font-size: 14px;
	font-weight: var(--wpk-weight-body-semibold);
	color: var(--wpk-accent-deep);
}
.wpk-mobile-menu__call .wpk-icon {
	width: 17px;
	height: 17px;
	stroke-width: 1.6;
}

/* ================= Hero ================= */

.wpk-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 750px;
	color: #fff;
	background-color: #303a25;
	background-size: cover;
	background-position: center 56%;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* Scoped to Hero, not the shared .wpk-container utility: the content
   block (.wpk-hero__inner) has its own max-width and previously had no
   way to move as a whole, so "Content Alignment: Center" only centered
   the text/buttons inside a box that stayed pinned to the left edge.
   justify-content here (set by the Content Alignment control) now
   repositions the block itself; default 'left' keeps the current
   flex-start position, so untouched instances don't change. */
.wpk-hero .wpk-container {
	display: flex;
}

.wpk-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.14) 70%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.08));
}

.wpk-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	padding-top: 113px;
	padding-bottom: 175px;
}

.wpk-hero .wpk-hero__heading {
	font-size: 52px;
	line-height: 1.13;
	letter-spacing: -1px;
	color: #fff;
}

.wpk-hero__subcopy {
	/* inline-block, not block: its own max-width is narrower than
	   .wpk-hero__inner, so as a block it always sat flush against the
	   left edge regardless of Content Alignment — inline-block lets the
	   ancestor's text-align actually reposition this box, not just the
	   text inside it. */
	display: inline-block;
	font-size: 17px;
	line-height: 1.5;
	max-width: 430px;
	color: var(--wpk-surface-alt);
	margin: 34px 0 0;
}

.wpk-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 34px;
}
.wpk-hero__buttons .wpk-btn:first-child {
	min-width: 236px;
}
.wpk-hero__buttons .wpk-btn--outline {
	min-width: 126px;
}

@media (max-width: 1200px) {
	.wpk-hero {
		min-height: 660px;
	}
	.wpk-hero__inner {
		padding-top: 85px;
	}
	.wpk-hero .wpk-hero__heading {
		font-size: 46px;
	}
}

@media (max-width: 700px) {
	.wpk-hero {
		min-height: 650px;
		background-position: 60% center;
	}
	.wpk-hero__scrim {
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.2)), linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent);
	}
	.wpk-hero__inner {
		padding-top: 74px;
		padding-bottom: 132px;
	}
	.wpk-hero .wpk-hero__heading {
		font-size: 39px;
		line-height: 1.13;
		max-width: 540px;
		letter-spacing: -0.8px;
	}
	.wpk-hero__subcopy {
		font-size: 16px;
		max-width: 330px;
		margin-top: 26px;
	}
	.wpk-hero__buttons {
		margin-top: 28px;
		gap: 12px;
	}
	.wpk-hero__buttons .wpk-btn:first-child {
		min-width: 196px;
		gap: 16px;
	}
	.wpk-hero__buttons .wpk-btn--outline {
		min-width: 105px;
		padding-inline: 16px;
	}
}

@media (max-width: 370px) {
	.wpk-hero .wpk-hero__heading {
		font-size: 35px;
	}
	.wpk-hero__buttons .wpk-btn:first-child {
		min-width: 180px;
	}
	.wpk-hero__buttons .wpk-btn--outline {
		min-width: 95px;
	}
}

/* ================= Trust bar ================= */

.wpk-trust-bar {
	position: relative;
	z-index: 2;
}

.wpk-trust-bar__card {
	list-style: none;
	margin: 0;
	min-height: 136px;
	padding: 28px 38px;
	box-sizing: border-box;
	background: var(--wpk-surface);
	border-radius: 16px;
	box-shadow: 0 16px 28px rgba(0, 0, 0, 0.125);
	display: grid;
	grid-template-columns: 1fr 1.15fr 1.12fr 1.28fr;
	align-items: center;
}

.wpk-trust-bar__item {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 8px 34px;
	border-right: 1px solid var(--wpk-hairline);
	min-width: 0;
}
.wpk-trust-bar__item:first-child {
	padding-left: 4px;
}
.wpk-trust-bar__item:last-child {
	border-right: 0;
	padding-right: 0;
}

.wpk-trust-bar__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 49px;
	height: 49px;
	color: var(--wpk-accent);
	font-size: 49px;
}
.wpk-trust-bar__icon .wpk-icon,
.wpk-trust-bar__icon img {
	width: 100%;
	height: 100%;
}
.wpk-trust-bar__icon i {
	line-height: 1;
}

.wpk-trust-bar__text {
	font-size: 15px;
	line-height: 1.5;
}
.wpk-trust-bar__text strong {
	font-weight: var(--wpk-weight-body-bold);
	display: block;
}

@media (max-width: 1200px) {
	.wpk-trust-bar__card {
		padding-inline: 22px;
	}
	.wpk-trust-bar__item {
		gap: 12px;
		padding-inline: 19px;
	}
	.wpk-trust-bar__text {
		font-size: 13px;
	}
	.wpk-trust-bar__icon {
		width: 40px;
		height: 40px;
		font-size: 40px;
	}
}

@media (max-width: 980px) {
	.wpk-trust-bar__card {
		grid-template-columns: 1fr 1fr;
		gap: 20px 0;
		padding: 26px;
	}
	.wpk-trust-bar__item {
		padding: 10px 22px !important;
	}
	.wpk-trust-bar__item:nth-child(2) {
		border-right: 0;
	}
	.wpk-trust-bar__text {
		font-size: 14px;
	}
}

@media (max-width: 700px) {
	.wpk-trust-bar__card {
		gap: 20px 0;
		padding: 23px 12px;
		min-height: 170px;
		border-radius: 14px;
	}
	.wpk-trust-bar__item {
		padding: 0 12px !important;
		gap: 10px;
	}
	.wpk-trust-bar__icon {
		width: 32px;
		height: 32px;
		font-size: 32px;
	}
	.wpk-trust-bar__text {
		font-size: 12px;
	}
	.wpk-trust-bar__item:nth-child(3) {
		border-right: 1px solid var(--wpk-hairline);
	}
}

@media (max-width: 370px) {
	.wpk-trust-bar__item {
		padding-inline: 8px !important;
		gap: 7px;
	}
	.wpk-trust-bar__icon {
		width: 27px;
		height: 27px;
		font-size: 27px;
	}
	.wpk-trust-bar__text {
		font-size: 11px;
	}
}

/* ================= Media features ================= */

.wpk-media-features__grid {
	display: grid;
	grid-template-columns: 0.932fr 1.068fr;
	gap: 112px;
	align-items: start;
}

.wpk-media-features__media {
	position: relative;
	order: var(--wpk-order, 1);
}
.wpk-media-features__content {
	order: calc(3 - var(--wpk-order, 1));
}

.wpk-media-features--offset_image .wpk-media-features__media {
	margin-left: 48px;
	padding-bottom: 66px;
}

.wpk-media-features__media .wpk-media-features__primary {
	display: block;
	width: 100%;
	height: 650px;
	object-fit: cover;
	border-radius: var(--wpk-radius-media);
}

.wpk-media-features--single_image .wpk-media-features__media .wpk-media-features__primary {
	height: 551px;
}

.wpk-media-features--offset_image .wpk-media-features__media .wpk-media-features__offset-frame {
	position: absolute;
	left: -48px;
	bottom: 0;
	width: 316px;
	height: 388px;
	display: block;
	background: var(--wpk-surface);
	border: 14px solid var(--wpk-surface);
	border-radius: 13px;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
	overflow: hidden;
}
.wpk-media-features--offset_image .wpk-media-features__media .wpk-media-features__offset {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.wpk-media-features__video {
	position: relative;
	width: 100%;
	height: 678px;
	border-radius: var(--wpk-radius-media);
	background: var(--wpk-ink);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wpk-media-features__video img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.wpk-media-features__play {
	position: relative;
	z-index: 1;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--wpk-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	text-decoration: none;
}

.wpk-media-features__content {
	max-width: 570px;
}

.wpk-media-features__subcopy {
	/* inline-block so Content Alignment's text-align can reposition this
	   box (narrower than .wpk-media-features__content) instead of just
	   the text inside it. */
	display: inline-block;
	margin-top: 21px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--wpk-muted);
	max-width: 60ch;
}

.wpk-media-features__subheading {
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-bold);
	color: var(--wpk-ink);
	font-size: 21px;
	margin: 31px 0 0;
}

.wpk-media-features__columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-top: 27px;
}

.wpk-media-features__cta {
	margin-top: 30px;
}

@media (max-width: 1200px) {
	.wpk-media-features__grid {
		gap: 70px;
	}
	.wpk-media-features--offset_image .wpk-media-features__media {
		margin-left: 30px;
	}
	.wpk-media-features__media .wpk-media-features__primary {
		height: 600px;
	}
	.wpk-media-features--offset_image .wpk-media-features__media .wpk-media-features__offset-frame {
		left: -30px;
		width: 260px;
		height: 335px;
	}
	.wpk-media-features--single_image .wpk-media-features__media .wpk-media-features__primary {
		height: 550px;
	}
	.wpk-media-features__columns {
		gap: 18px;
	}
}

@media (max-width: 980px) {
	.wpk-media-features__grid {
		grid-template-columns: 42% 1fr;
		gap: 46px;
	}
	.wpk-media-features--single_image .wpk-media-features__grid {
		grid-template-columns: 35% 1fr;
		gap: 40px;
	}
	.wpk-media-features__video {
		height: 620px;
	}
}

@media (max-width: 700px) {
	.wpk-media-features__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.wpk-media-features--offset_image .wpk-media-features__media {
		max-width: 460px;
		width: calc(100% - 23px);
		margin-left: 23px;
		padding-bottom: 48px;
	}
	.wpk-media-features__media .wpk-media-features__primary {
		height: 440px;
	}
	.wpk-media-features--single_image .wpk-media-features__media .wpk-media-features__primary {
		height: 370px;
	}
	.wpk-media-features--offset_image .wpk-media-features__media .wpk-media-features__offset-frame {
		width: 205px;
		height: 253px;
		left: -23px;
		border-width: 9px;
	}
	.wpk-media-features__video {
		height: 430px;
	}
	.wpk-media-features__content {
		max-width: 540px;
	}
	.wpk-media-features__columns {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ================= Services grid ================= */

.wpk-services-grid__header {
	text-align: center;
	margin: 0 auto;
	max-width: 860px;
}
.wpk-services-grid__subcopy {
	margin-top: 22px;
	font-size: 17px;
	line-height: 1.55;
}

.wpk-services-grid__cards {
	--wpk-services-columns: 5;
	display: grid;
	grid-template-columns: repeat(var(--wpk-services-columns), minmax(0, 1fr));
	gap: 18px;
	margin-top: 42px;
}

.wpk-services-grid--overlay-wide .wpk-services-grid__cards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wpk-service-card {
	position: relative;
	isolation: isolate;
	min-height: 530px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-radius: var(--wpk-radius-card);
	background: #50534e;
	color: #fff;
	text-align: center;
}
.wpk-services-grid--overlay-wide .wpk-service-card {
	min-height: 430px;
	text-align: left;
	align-items: flex-end;
}

.wpk-service-card .wpk-service-card__image {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}
.wpk-service-card:hover .wpk-service-card__image {
	transform: scale(1.035);
}

.wpk-service-card__overlay {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(180deg, transparent 20%, rgba(36, 36, 36, 0.25) 35%, var(--wpk-ink) 59%);
}
.wpk-services-grid--overlay-wide .wpk-service-card__overlay {
	background: linear-gradient(180deg, transparent 30%, rgba(36, 36, 36, 0.35) 50%, var(--wpk-ink) 78%);
}

/* Grid variant's imageless card (Sod Installation) gets the measured flat
   gray-green gradient; overlay-wide's imageless cards (Commercial section)
   are plain ink — that's what the approved build actually shows for each. */
.wpk-services-grid--grid .wpk-service-card--flat {
	background: linear-gradient(180deg, var(--wpk-card-flat-start), var(--wpk-card-flat-end));
}
.wpk-services-grid--overlay-wide .wpk-service-card--flat {
	background: var(--wpk-ink);
}
.wpk-service-card--flat .wpk-service-card__overlay {
	display: none;
}

.wpk-service-card__content {
	position: relative;
	width: 100%;
	padding: 24px 21px 32px;
}
.wpk-services-grid--overlay-wide .wpk-service-card__content {
	padding: 46px 40px;
}

.wpk-service-card__content h3 {
	color: #fff;
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-bold);
	font-size: 20px;
	line-height: 1.17;
	margin: 0 0 11px;
}
.wpk-services-grid--overlay-wide .wpk-service-card__content h3 {
	font-size: 21px;
	line-height: 1.2;
	margin-bottom: 10px;
}

.wpk-service-card__content p {
	font-size: 14px;
	line-height: 1.43;
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.9);
}
.wpk-services-grid--overlay-wide .wpk-service-card__content p {
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 0;
}

.wpk-service-card__content .wpk-btn {
	width: 100%;
	white-space: normal;
}

.wpk-services-grid__cta {
	text-align: center;
	margin-top: 40px;
}

@media (max-width: 1200px) {
	.wpk-services-grid__cards {
		gap: 14px;
	}
	.wpk-service-card {
		min-height: 500px;
	}
	.wpk-service-card__content {
		padding-inline: 13px;
	}
	.wpk-service-card__content h3 {
		font-size: 18px;
	}
	.wpk-service-card__content p {
		font-size: 13px;
	}
}

@media (max-width: 980px) {
	/* Uniform 2-up regardless of the chosen column count (3/4/5) — an odd
	   count just leaves the last card alone on its own row, same pattern
	   already used for process steps and before/after at this width. */
	.wpk-services-grid__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
	.wpk-service-card {
		min-height: 460px;
	}
	.wpk-service-card__content h3 {
		font-size: 21px;
	}
	.wpk-service-card__content p {
		font-size: 14px;
	}
	.wpk-services-grid--overlay-wide .wpk-service-card {
		padding: 35px;
		min-height: 390px;
	}
}

@media (max-width: 700px) {
	.wpk-services-grid__subcopy {
		font-size: 16px;
		margin-top: 18px;
	}
	.wpk-services-grid__cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		margin-top: 32px;
	}
	.wpk-service-card {
		grid-column: auto;
		min-height: 430px;
	}
	/* :nth-child(odd):last-child only matches when the card count is odd —
	   an even count's last card sits normally in the 2nd column instead of
	   getting stretched full-width, so this works for 3, 4, or 5 cards. */
	.wpk-service-card:nth-child(odd):last-child {
		grid-column: 1 / -1;
		min-height: 400px;
	}
	.wpk-service-card__content {
		padding: 22px 15px;
	}
	.wpk-service-card__content h3 {
		font-size: 19px;
	}
	.wpk-service-card__content p {
		font-size: 13px;
	}
	.wpk-services-grid--overlay-wide .wpk-services-grid__cards {
		grid-template-columns: 1fr;
		margin-top: 32px;
	}
	.wpk-services-grid--overlay-wide .wpk-service-card {
		min-height: 370px;
		padding: 36px 30px;
	}
}

@media (max-width: 370px) {
	.wpk-services-grid__cards {
		grid-template-columns: 1fr;
	}
	.wpk-service-card {
		min-height: 430px;
	}
	.wpk-service-card__content h3 {
		font-size: 22px;
	}
	.wpk-service-card__content p {
		font-size: 15px;
	}
}

/* ================= Before / after ================= */

.wpk-before-after__grid {
	display: grid;
	grid-template-columns: 1fr 1.18fr;
	align-items: center;
	gap: 94px;
}

/* Title & Text switched off — the slider is the grid's only child now,
   so let it take the full width instead of half a 2-column layout. */
.wpk-before-after__grid--full {
	grid-template-columns: 1fr;
}

.wpk-before-after__content {
	order: var(--wpk-order, 1);
}
.wpk-before-after__slider {
	order: calc(3 - var(--wpk-order, 1));
}

/* Stacked layout: text on top, full-width slider, button below — a
   plain vertical stack, so none of the side-by-side grid/order rules
   above apply here. */
.wpk-before-after__stacked {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.wpk-before-after__stacked .wpk-before-after__content {
	order: initial;
	max-width: none;
}
.wpk-before-after__stacked .wpk-before-after__slider {
	order: initial;
	width: 100%;
}
.wpk-before-after__stacked-cta {
	display: flex;
	justify-content: flex-start;
}

@media (max-width: 700px) {
	.wpk-before-after__stacked {
		gap: 28px;
	}
}

.wpk-before-after__content h2 {
	/* inline-block so Content Alignment's text-align (set on the ancestor
	   .wpk-before-after__content) can reposition this box, not just the
	   text inside it — as a block it always sat flush left regardless. */
	display: inline-block;
	max-width: 475px;
}
.wpk-before-after__content p {
	margin-top: 26px;
	color: var(--wpk-muted);
	font-size: 17px;
	line-height: 1.6;
}
.wpk-before-after__content .wpk-btn {
	margin-top: 28px;
}

.wpk-ba {
	--wpk-ba-pos: 50%;
	--wpk-ba-gap: 8px;
	--wpk-ba-radius: 20px;
	position: relative;
	height: 500px;
	border-radius: var(--wpk-ba-radius);
	overflow: hidden;
	background: #fff;
	isolation: isolate;
	touch-action: none;
	user-select: none;
}

.wpk-ba .wpk-ba__before,
.wpk-ba .wpk-ba__after {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wpk-ba__after {
	clip-path: inset(0 0 0 calc(var(--wpk-ba-pos) + var(--wpk-ba-gap) / 2));
}
.wpk-ba__before {
	clip-path: inset(0 calc(100% - var(--wpk-ba-pos) + var(--wpk-ba-gap) / 2) 0 0);
}

.wpk-ba__divider {
	position: absolute;
	left: var(--wpk-ba-pos);
	top: 0;
	bottom: 0;
	width: var(--wpk-ba-gap);
	background: #fff;
	transform: translateX(-50%);
	pointer-events: none;
}

.wpk-ba__handle {
	position: absolute;
	left: var(--wpk-ba-pos);
	top: 50%;
	width: 44px;
	height: 80px;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	color: #94ab7a;
	cursor: ew-resize;
}
.wpk-ba__handle::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	-webkit-mask: url("../icons/comparison-handle-mask.svg") center / 100% 100% no-repeat;
	mask: url("../icons/comparison-handle-mask.svg") center / 100% 100% no-repeat;
}
.wpk-ba__handle .wpk-icon {
	position: relative;
	width: 24px;
	height: 26px;
	stroke-width: 1.4;
}
.wpk-ba__handle:focus-visible {
	outline: none;
}
.wpk-ba__handle:focus-visible .wpk-icon {
	outline: 3px solid var(--wpk-accent);
	outline-offset: 4px;
	border-radius: 50%;
}

.wpk-ba__label {
	position: absolute;
	bottom: 16px;
	background: rgba(20, 24, 16, 0.6);
	color: #fff;
	font-size: 12px;
	font-weight: var(--wpk-weight-body-semibold);
	padding: 6px 12px;
	border-radius: var(--wpk-radius-pill);
	pointer-events: none;
}
.wpk-ba__label--before {
	left: 16px;
}
.wpk-ba__label--after {
	right: 16px;
}

@media (max-width: 1200px) {
	.wpk-before-after__grid {
		gap: 60px;
	}
	.wpk-ba {
		height: 460px;
	}
}

@media (max-width: 980px) {
	.wpk-before-after__grid {
		gap: 38px;
	}
	.wpk-before-after__content h2 {
		font-size: 30px;
	}
	.wpk-before-after__content p {
		font-size: 15px;
	}
	.wpk-ba {
		height: 420px;
	}
}

@media (max-width: 700px) {
	.wpk-before-after__grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	.wpk-before-after__content h2 {
		font-size: 29px;
	}
	.wpk-before-after__content p {
		font-size: 16px;
		margin-top: 20px;
	}
	.wpk-before-after__content .wpk-btn {
		margin-top: 24px;
	}
	.wpk-ba {
		height: auto;
		aspect-ratio: 1.1;
		--wpk-ba-gap: 7px;
		--wpk-ba-radius: 18px;
	}
	.wpk-ba__handle {
		width: 39px;
		height: 72px;
	}
}

/* Project carousel — the viewer above reuses .wpk-ba as-is, driven by the
   same pointer/keyboard slider (assets/js/before-after.js). This just adds
   the thumbnail switcher row and its "view all" CTA below it. */
.wpk-ba-carousel__nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
	margin-top: 24px;
}

.wpk-ba-carousel__thumb,
.wpk-ba-carousel__all {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-width: 0;
	height: 110px;
	padding: 18px 20px;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	text-align: left;
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-bold);
	font-size: 16px;
	line-height: 1.3;
	cursor: pointer;
	isolation: isolate;
	transition: transform 0.25s, box-shadow 0.25s;
}

.wpk-ba-carousel__thumb {
	background-color: var(--wpk-ink);
	background-size: cover;
	background-position: center;
	color: #fff;
}
.wpk-ba-carousel__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
}
.wpk-ba-carousel__thumb[aria-pressed="true"] {
	box-shadow: inset 0 0 0 2px var(--wpk-accent);
}
.wpk-ba-carousel__thumb span {
	position: relative;
}

.wpk-ba-carousel__nav .wpk-btn.wpk-ba-carousel__all {
	height: 100%;
	align-items: center;
	justify-content: center;
	text-align: center;
}

@media (hover: hover) {
	.wpk-ba-carousel__thumb:hover {
		transform: translateY(-2px);
	}
}

.wpk-ba-carousel__thumb:focus-visible,
.wpk-ba-carousel__all:focus-visible {
	outline: 3px solid var(--wpk-accent);
	outline-offset: 4px;
}

.wpk-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 700px) {
	.wpk-ba-carousel__thumb,
	.wpk-ba-carousel__all {
		height: 90px;
		padding: 14px 16px;
		font-size: 14px;
	}
}

/* ================= Process steps ================= */

.wpk-process-steps__header {
	max-width: 765px;
	margin: 0 auto;
	text-align: center;
}

.wpk-process-steps__list {
	--wpk-joint-width: 22px;
	--wpk-joint-height: 66px;
	--wpk-joint-top: 20px;
	--wpk-joint-radius: 20px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 40px;
	text-align: center;
}

.wpk-process-step {
	position: relative;
	/* Per-step inline --wpk-step-card-color (set only when that step's own
	   Content-tab color is used) wins over the Style tab's ambient default,
	   which itself falls back to the original flat pale-green. */
	background: var(--wpk-step-card-color, var(--wpk-pale-green));
	border-radius: var(--wpk-joint-radius);
	padding: 48px 24px 32px;
	min-height: 350px;
}

.wpk-process-step:not(:first-child)::before,
.wpk-process-step:not(:last-child)::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: var(--wpk-joint-top);
	width: var(--wpk-joint-width);
	height: var(--wpk-joint-height);
	pointer-events: none;
	-webkit-mask: url("../icons/process-joint-mask.svg") center / 100% 100% no-repeat;
	mask: url("../icons/process-joint-mask.svg") center / 100% 100% no-repeat;
}
.wpk-process-step:not(:first-child)::before {
	left: 0;
	background: var(--wpk-surface-alt);
}
.wpk-process-step:not(:last-child)::after {
	right: calc(-1 * var(--wpk-joint-width));
	/* Matches this same card's own background (not the next card's), so
	   the tab reads as protruding from this card regardless of override. */
	background: var(--wpk-step-card-color, var(--wpk-pale-green));
}

.wpk-process-step__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 32px;
	color: var(--wpk-accent);
	font-size: 56px;
}
.wpk-process-step__icon .wpk-icon,
.wpk-process-step__icon img {
	display: block;
	width: 100%;
	height: 100%;
	stroke-width: 2;
}
.wpk-process-step__icon i {
	line-height: 1;
}

.wpk-process-step__badge {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	background: var(--wpk-accent);
	color: #fff;
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-bold);
	font-size: 15px;
	line-height: 1;
}

.wpk-process-step h3 {
	font-size: 22px;
	line-height: 28px;
	max-width: none;
	margin: 0 auto 10px;
	color: var(--wpk-step-title-color, inherit);
}
.wpk-process-step p {
	font-size: 17px;
	line-height: 24px;
	color: var(--wpk-step-desc-color, var(--wpk-muted));
	max-width: 214px;
	margin: 0 auto;
}

/* Big Number marker style — a large number instead of the icon+badge,
   for steps with no icon. Left-aligned and taller, so the number sits
   at the top of the card with the title/description pinned to the
   bottom (space-between), matching the taller reference cards. */
.wpk-process-steps__list--number {
	text-align: left;
}
.wpk-process-steps__list--number .wpk-process-step {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 56px;
	min-height: 460px;
}
.wpk-process-step__number {
	position: relative;
	z-index: 2;
	display: block;
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-bold);
	font-size: 36px;
	line-height: 1.25;
	color: var(--wpk-step-title-color, inherit);
}
.wpk-process-step__body {
	position: relative;
	z-index: 2;
}
.wpk-process-steps__list--number .wpk-process-step h3,
.wpk-process-steps__list--number .wpk-process-step p {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.wpk-process-steps__cta {
	text-align: center;
	margin-top: 39px;
}

/* Side-by-side header layout: the section's own heading on the left,
   its description on the right, in fixed grid columns — not flex, which
   let a long heading claim the whole row and push the description onto
   its own (left-aligned) line below, looking just like Stacked. Grid
   columns guarantee both always share the row, wrapping their own text
   internally instead of wrapping to a new line. */
.wpk-process-steps__header--inline {
	display: grid;
	/* minmax(0, ...), not bare fr: a grid track's implicit minimum is
	   "auto" (its content's natural width), which for a long unwrapped
	   heading would stretch that column past its fr share instead of
	   wrapping the text — exactly the failure this replaced. */
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: start;
	gap: 16px 40px;
	max-width: none;
	margin: 0;
	text-align: left;
}
.wpk-process-steps__header--inline .wpk-section-heading {
	text-align: left;
}
.wpk-process-steps__header--inline .wpk-section-subcopy {
	margin-top: 0;
	text-align: right;
}

@media (max-width: 700px) {
	.wpk-process-steps__header--inline {
		grid-template-columns: 1fr;
	}
	.wpk-process-steps__header--inline .wpk-section-subcopy {
		text-align: left;
	}
}

@media (max-width: 1200px) {
	.wpk-process-step {
		padding-inline: 18px;
	}
}

@media (max-width: 980px) {
	.wpk-process-steps__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px;
	}
	.wpk-process-step {
		min-height: 310px;
	}
	.wpk-process-steps__list--number .wpk-process-step {
		min-height: 340px;
		gap: 40px;
	}
	.wpk-process-step:nth-child(even)::after,
	.wpk-process-step:nth-child(odd)::before {
		display: none;
	}
	.wpk-process-step p {
		font-size: 15px;
		max-width: 220px;
	}
	.wpk-process-steps__list--number .wpk-process-step p {
		max-width: none;
	}
	.wpk-process-step h3 {
		font-size: 22px;
		max-width: none;
	}
}

@media (max-width: 700px) {
	.wpk-process-steps__list {
		--wpk-joint-width: 22px;
		--wpk-joint-height: 54px;
		--wpk-joint-top: 14px;
		--wpk-joint-radius: 14px;
		gap: 18px 14px;
		margin-top: 32px;
	}
	.wpk-process-step {
		padding: 31px 16px;
		min-height: 315px;
	}
	.wpk-process-steps__list--number .wpk-process-step {
		min-height: 0;
		gap: 28px;
	}
	.wpk-process-step h3 {
		font-size: 20px;
		line-height: 25px;
	}
	.wpk-process-step p {
		font-size: 15px;
		line-height: 22px;
	}
	.wpk-process-step__icon {
		width: 48px;
		height: 48px;
		margin-bottom: 24px;
		font-size: 48px;
	}
	.wpk-process-step__badge {
		width: 21px;
		height: 21px;
		font-size: 14px;
	}
	.wpk-process-step__number {
		font-size: 30px;
	}
}

@media (max-width: 370px) {
	.wpk-process-steps__list {
		grid-template-columns: 1fr;
	}
	.wpk-process-step {
		min-height: 0;
	}
	.wpk-process-step::before,
	.wpk-process-step::after {
		display: none;
	}
	.wpk-process-step p {
		font-size: 15px;
	}
}

/* ================= CTA banner ================= */

.wpk-cta-banner__card {
	position: relative;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	align-items: center;
	gap: 85px;
	min-height: 465px;
	border-radius: 25px;
	background:
		radial-gradient(ellipse at 103% 89%, var(--wpk-cta-glow, var(--wpk-pale-green-glow)) 0, transparent 56%),
		linear-gradient(115deg, #fff 30%, var(--wpk-cta-tint, var(--wpk-pale-green-tint)) 75%);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.15);
	padding: 75px 86px;
	overflow: hidden;
}

.wpk-cta-banner .wpk-cta-banner__heading {
	/* inline-block so Content Alignment's text-align (set on the ancestor
	   .wpk-cta-banner__text) can reposition this box, not just the text
	   inside it — as a block it always sat flush left regardless. */
	display: inline-block;
	font-size: 36px;
	line-height: 1.18;
	max-width: 440px;
	margin: 0;
}
.wpk-cta-banner__heading-accent {
	color: var(--wpk-accent);
}
.wpk-cta-banner__heading-ink {
	color: var(--wpk-ink);
	display: block;
}

/* Same inline-block treatment for the paragraph wrapper and the emphasis
   line — scoped to these two, not the broader ".wpk-cta-banner__text p"
   selector below, so paragraphs nested *inside* .wpk-cta-banner__paragraph
   (from the WYSIWYG field) keep stacking normally instead of also
   becoming inline-block. */
.wpk-cta-banner__paragraph,
.wpk-cta-banner__emphasis {
	display: inline-block;
}

.wpk-cta-banner__text p,
.wpk-cta-banner__paragraph {
	margin: 22px 0 0;
	font-size: 16px;
	line-height: 1.5;
	max-width: 460px;
}
.wpk-cta-banner__paragraph p {
	margin: 0;
}
.wpk-cta-banner__paragraph p + p {
	margin-top: 1em;
}
.wpk-cta-banner__emphasis {
	margin-top: 26px !important;
}
.wpk-cta-banner__emphasis strong {
	color: var(--wpk-ink);
	font-weight: var(--wpk-weight-body-bold);
}

.wpk-cta-banner__buttons {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding-left: 31px;
}
.wpk-cta-banner__buttons .wpk-btn:first-child {
	min-width: 235px;
}
.wpk-cta-banner__buttons .wpk-btn--dark {
	min-width: 168px;
}

@media (max-width: 1200px) {
	.wpk-cta-banner__card {
		padding: 64px;
		gap: 45px;
	}
	.wpk-cta-banner__buttons {
		padding-left: 0;
	}
}

@media (max-width: 980px) {
	.wpk-cta-banner__card {
		padding: 52px 45px;
		gap: 35px;
		grid-template-columns: 1.3fr 1fr;
	}
	.wpk-cta-banner .wpk-cta-banner__heading {
		font-size: 31px;
	}
	.wpk-cta-banner__text p,
	.wpk-cta-banner__paragraph {
		font-size: 15px;
	}
	.wpk-cta-banner__buttons .wpk-btn:first-child {
		min-width: 205px;
		font-size: 14px;
	}
}

@media (max-width: 700px) {
	.wpk-cta-banner__card {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 37px 28px;
		min-height: 0;
		border-radius: 20px;
		background: radial-gradient(ellipse at 110% 110%, var(--wpk-cta-glow, var(--wpk-pale-green-glow)) 0, transparent 63%), #fbfcfa;
	}
	.wpk-cta-banner .wpk-cta-banner__heading {
		font-size: 29px;
	}
	.wpk-cta-banner__text p,
	.wpk-cta-banner__paragraph {
		font-size: 15px;
		margin-top: 18px;
	}
	.wpk-cta-banner__emphasis {
		margin-top: 20px !important;
	}
	.wpk-cta-banner__buttons {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px;
		padding-left: 0;
	}
	.wpk-cta-banner__buttons .wpk-btn:first-child {
		min-width: 190px;
	}
	.wpk-cta-banner__buttons .wpk-btn--dark {
		min-width: 142px;
	}
}

@media (max-width: 370px) {
	.wpk-cta-banner__card {
		padding: 32px 23px;
	}
}

/* ================= Photo CTA ================= */

.wpk-photo-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 490px;
	padding: 110px 24px 108px;
	background: #262a22;
	color: #fff;
	text-align: center;
}
.wpk-photo-cta__image {
	position: absolute;
	z-index: -2;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 58%;
}
.wpk-photo-cta::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--wpk-photo-cta-scrim, rgba(0, 0, 0, 0.68));
}
.wpk-photo-cta__inner {
	position: relative;
	width: 100%;
	max-width: var(--wpk-content-max-width);
	margin: 0 auto;
}
.wpk-photo-cta__lead {
	margin-top: 22px;
	font-size: 18px;
	line-height: 1.55;
}
.wpk-photo-cta__copy {
	/* inline-block so Content Alignment's text-align (set on the ancestor
	   .wpk-photo-cta) actually repositions this box when set to Left or
	   Right — the old hardcoded auto margin kept it centered regardless
	   of that control (harmless by coincidence only because Center is
	   the default). */
	display: inline-block;
	max-width: 575px;
	margin: 30px 0 0;
	font-size: 18px;
	line-height: 1.55;
}
.wpk-photo-cta__actions {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px 40px;
	margin-top: 42px;
}
.wpk-photo-cta .wpk-btn {
	min-height: 54px;
	padding: 14px 20px;
	border: 1px solid #fff;
	font-size: 18px;
}
.wpk-photo-cta .wpk-btn--outline {
	border-color: #fff;
}

@media (max-width: 700px) {
	.wpk-photo-cta {
		min-height: 0;
		padding: 74px 22px;
	}
	.wpk-photo-cta__lead,
	.wpk-photo-cta__copy {
		font-size: 16px;
	}
	.wpk-photo-cta__copy {
		margin-top: 24px;
	}
	.wpk-photo-cta__actions {
		gap: 15px;
		margin-top: 32px;
	}
	.wpk-photo-cta .wpk-btn {
		font-size: 16px;
		min-height: 52px;
	}
}
@media (max-width: 420px) {
	.wpk-photo-cta__actions {
		flex-direction: column;
	}
	.wpk-photo-cta .wpk-btn {
		width: 100%;
		max-width: 320px;
	}
}

/* ================= FAQ accordion ================= */

.wpk-faq {
	padding: 94px 24px;
	background: var(--wpk-surface);
	color: var(--wpk-ink);
}
.wpk-faq__inner {
	max-width: var(--wpk-content-max-width);
	margin: 0 auto;
}
.wpk-faq__heading {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 42px;
}
.wpk-faq__heading p {
	margin: 22px 0 0;
	font-size: 18px;
	line-height: 1.55;
}
.wpk-faq__list {
	display: grid;
	gap: 17px;
}
.wpk-faq__item {
	margin: 0;
	border: 0;
	border-radius: 20px;
	background: var(--wpk-pale-green);
	color: var(--wpk-ink);
	overflow: hidden;
	transition: background 0.25s, color 0.25s;
}
.wpk-faq__item[open] {
	background: var(--wpk-accent);
	color: #fff;
}
.wpk-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-height: 114px;
	margin: 0;
	padding: 38px 51px;
	list-style: none;
	cursor: pointer;
	font-family: var(--wpk-font-body);
	font-size: 22px;
	font-weight: var(--wpk-weight-body-bold);
	line-height: 1.36;
	color: inherit;
	-webkit-tap-highlight-color: transparent;
}
.wpk-faq__question::-webkit-details-marker {
	display: none;
}
.wpk-faq__question::marker {
	content: "";
}
.wpk-faq__question:focus-visible {
	outline: 3px solid var(--wpk-accent-deep);
	outline-offset: -6px;
	border-radius: 20px;
}
.wpk-faq__item[open] .wpk-faq__question {
	min-height: 0;
	padding-top: 42px;
	padding-bottom: 9px;
}
.wpk-faq__item[open] .wpk-faq__question:focus-visible {
	outline-color: #fff;
}
.wpk-faq__toggle {
	position: relative;
	display: block;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border: 1px solid currentColor;
	border-radius: 50%;
}
.wpk-faq__toggle::before,
.wpk-faq__toggle::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.wpk-faq__toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform 0.22s, opacity 0.22s;
}
.wpk-faq__item[open] .wpk-faq__toggle::after {
	transform: translate(-50%, -50%) rotate(0);
	opacity: 0;
}
.wpk-faq__answer {
	padding: 0 105px 43px 51px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	line-height: 1.55;
}
.wpk-faq__answer p {
	margin: 0;
	font: inherit;
	color: inherit;
}
.wpk-faq__answer p + p {
	margin-top: 27px;
}
.wpk-faq__item[open] .wpk-faq__answer {
	animation: wpk-faq-enter 0.25s ease both;
}
@keyframes wpk-faq-enter {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 700px) {
	.wpk-faq {
		padding: 66px 20px;
	}
	.wpk-faq__heading {
		margin-bottom: 30px;
	}
	.wpk-faq__heading p {
		font-size: 16px;
		margin-top: 18px;
	}
	.wpk-faq__list {
		gap: 13px;
	}
	.wpk-faq__item {
		border-radius: 16px;
	}
	.wpk-faq__question {
		font-size: 18px;
		line-height: 1.44;
		min-height: 92px;
		padding: 26px 23px;
		gap: 18px;
	}
	.wpk-faq__toggle {
		width: 28px;
		height: 28px;
		flex-basis: 28px;
	}
	.wpk-faq__item[open] .wpk-faq__question {
		padding-top: 28px;
		padding-bottom: 12px;
	}
	.wpk-faq__answer {
		font-size: 16px;
		line-height: 1.6;
		padding: 0 23px 28px;
	}
	.wpk-faq__answer p + p {
		margin-top: 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.wpk-faq *,
	.wpk-faq *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ================= Hover cards ================= */

.wpk-hover-cards {
	padding: 106px 24px 76px;
	background: var(--wpk-surface-alt);
	color: var(--wpk-ink);
}
.wpk-hover-cards__inner {
	max-width: var(--wpk-content-max-width);
	margin: 0 auto;
}
.wpk-hover-cards__heading {
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
}
.wpk-hover-cards__heading p {
	max-width: 655px;
	margin: 22px auto 0;
	font-size: 18px;
	line-height: 1.55;
}
.wpk-hover-cards__grid {
	--wpk-hover-cards-columns: 4;
	display: grid;
	grid-template-columns: repeat(var(--wpk-hover-cards-columns), minmax(0, 1fr));
	gap: 20px;
	margin-top: 42px;
}
.wpk-hover-card {
	position: relative;
	isolation: isolate;
	min-width: 0;
	height: 490px;
	overflow: hidden;
	border-radius: 20px;
	background: var(--wpk-ink);
	color: #fff;
}
.wpk-hover-card__image {
	position: absolute;
	z-index: -3;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.wpk-hover-card__shade {
	position: absolute;
	z-index: -2;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 20, 12, 0.13) 0%, rgba(17, 23, 17, 0.27) 38%, rgba(17, 23, 17, 0.79) 100%);
}
.wpk-hover-card__shade::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(17, 32, 20, 0.85);
	opacity: 0;
	transition: opacity 0.45s;
}
.wpk-hover-card__toggle,
.wpk-hover-card__toggle:hover,
.wpk-hover-card__toggle:focus,
.wpk-hover-card__toggle:active {
	position: absolute;
	z-index: 2;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: inherit;
	/* This button is a full-card invisible hit target. A bare theme rule
	   like Astra's "button:hover { background: <theme-color> }" outranks
	   a class-only selector on specificity (a type selector + :hover beats
	   a single class), so without a same-state override here, hovering
	   silently painted the whole card in the theme's default button color.
	   Repeating :hover/:focus/:active here — not just the resting state —
	   keeps every interactive state pinned to transparent. */
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.wpk-hover-card__toggle:focus-visible {
	outline: 3px solid var(--wpk-pale-green);
	outline-offset: -7px;
}
.wpk-hover-card__title {
	position: absolute;
	z-index: 3;
	top: calc(100% - 67px);
	left: 24px;
	right: 24px;
	margin: 0;
	color: #fff;
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-bold);
	font-size: 21px;
	line-height: 1.33;
	text-align: center;
	pointer-events: none;
	transition: top 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.wpk-hover-card__details {
	position: absolute;
	z-index: 3;
	inset: 101px 27px 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(22px);
	pointer-events: none;
	transition: opacity 0.25s, transform 0.45s, visibility 0s 0.45s;
}
.wpk-hover-card__details p {
	margin: 0;
	color: #f2f5ee;
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
}
.wpk-hover-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	max-width: 100%;
	min-height: 48px;
	margin-top: auto;
	padding: 12px 16px;
	border: 1px solid transparent;
	border-radius: var(--wpk-radius-pill);
	background: var(--wpk-accent);
	color: var(--wpk-hover-card-cta-color, #fff);
	font-family: var(--wpk-font-body);
	font-size: 14px;
	font-weight: var(--wpk-weight-body-bold);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	pointer-events: auto;
	transition: background 0.2s, transform 0.2s;
}
.wpk-hover-card__cta svg {
	width: 28px;
	height: 12px;
	flex: 0 0 auto;
}
.wpk-hover-card__cta:hover {
	/* Reasserts color, not just background — a theme's own bare
	   "a:hover { color: ... }" outranks a class-only color rule on
	   specificity (type selector + :hover beats a single class), so
	   without this the text color could flip to the theme's link-hover
	   color instead of staying whatever this button's color is set to. */
	color: var(--wpk-hover-card-cta-color, #fff);
	background: var(--wpk-accent-deep);
	transform: translateY(-2px);
}
.wpk-hover-card__cta:focus-visible {
	outline: 3px solid var(--wpk-pale-green);
	outline-offset: 4px;
}
.wpk-hover-card[data-card-open="true"] .wpk-hover-card__title,
.wpk-hover-cards:not([data-hover-cards-ready]) .wpk-hover-card:is(:hover, :focus-within) .wpk-hover-card__title {
	top: 40px;
}
.wpk-hover-card[data-card-open="true"] .wpk-hover-card__details,
.wpk-hover-cards:not([data-hover-cards-ready]) .wpk-hover-card:is(:hover, :focus-within) .wpk-hover-card__details {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.4s 0.12s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s, visibility 0s;
}
.wpk-hover-card[data-card-open="true"] .wpk-hover-card__shade::after,
.wpk-hover-cards:not([data-hover-cards-ready]) .wpk-hover-card:is(:hover, :focus-within) .wpk-hover-card__shade::after {
	opacity: 1;
}
.wpk-hover-card[data-card-open="true"] .wpk-hover-card__image,
.wpk-hover-cards:not([data-hover-cards-ready]) .wpk-hover-card:is(:hover, :focus-within) .wpk-hover-card__image {
	transform: scale(1.055);
}
.wpk-hover-cards__note {
	margin: 39px auto 0;
	text-align: center;
	font-size: 18px;
	line-height: 1.55;
}

@media (max-width: 1050px) {
	.wpk-hover-cards__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wpk-hover-card {
		height: 470px;
	}
	.wpk-hover-card__details {
		max-width: 300px;
		margin: 0 auto;
	}
}
@media (max-width: 700px) {
	.wpk-hover-cards {
		padding: 70px 20px 60px;
	}
	.wpk-hover-cards__heading p {
		font-size: 16px;
		margin-top: 18px;
	}
	.wpk-hover-cards__grid {
		margin-top: 30px;
		gap: 16px;
	}
	.wpk-hover-card {
		height: 455px;
		border-radius: 17px;
	}
	.wpk-hover-card__title {
		left: 14px;
		right: 14px;
		font-size: 19px;
		line-height: 1.37;
	}
	.wpk-hover-card__details {
		inset: 91px 16px 25px;
		gap: 18px;
	}
	.wpk-hover-card__details p {
		font-size: 15px;
		line-height: 1.53;
	}
	.wpk-hover-card__cta {
		font-size: 13px;
		padding: 10px 12px;
		gap: 8px;
	}
	.wpk-hover-card[data-card-open="true"] .wpk-hover-card__title,
	.wpk-hover-cards:not([data-hover-cards-ready]) .wpk-hover-card:is(:hover, :focus-within) .wpk-hover-card__title {
		top: 31px;
	}
	.wpk-hover-cards__note {
		font-size: 16px;
		line-height: 1.6;
		margin-top: 28px;
	}
}
@media (max-width: 540px) {
	.wpk-hover-cards__grid {
		grid-template-columns: 1fr;
	}
	.wpk-hover-card {
		height: 430px;
	}
	.wpk-hover-card__title {
		font-size: 22px;
	}
	.wpk-hover-card__details {
		inset: 97px 30px 32px;
		max-width: 340px;
	}
	.wpk-hover-card__details p {
		font-size: 16px;
		line-height: 1.6;
	}
	.wpk-hover-card__cta {
		font-size: 15px;
		gap: 16px;
		padding: 12px 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.wpk-hover-cards *,
	.wpk-hover-cards *::after {
		transition: none !important;
	}
}

/* ================= Installer checklist ================= */

.wpk-installer-checklist {
	padding: 155px 24px 100px;
	background: var(--wpk-surface);
	color: var(--wpk-ink);
}
.wpk-installer-checklist__inner {
	display: grid;
	grid-template-columns: 370px minmax(0, 1fr);
	gap: 88px;
	align-items: center;
	max-width: var(--wpk-content-max-width);
	margin: 0 auto;
}
.wpk-installer-checklist__intro {
	position: relative;
	padding-top: 20px;
	order: var(--wpk-order, 1);
}
.wpk-installer-checklist__intro-copy {
	margin: 22px 0 0;
	font-size: 18px;
	line-height: 1.55;
}
.wpk-installer-checklist__intro-copy p {
	margin: 0;
}
.wpk-installer-checklist__intro-copy p + p {
	margin-top: 1em;
}
.wpk-installer-checklist__arrow {
	position: absolute;
	top: calc(100% + 10px);
	left: 116px;
	display: block;
	width: 292px;
	height: 184px;
	max-width: 100%;
	margin: 0;
	overflow: visible;
	fill: none;
	stroke: var(--wpk-accent);
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.wpk-installer-checklist__list {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	order: calc(3 - var(--wpk-order, 1));
}
.wpk-installer-checklist__card {
	display: grid;
	grid-template-columns: 27px minmax(0, 1fr);
	gap: 30px;
	align-items: start;
	min-height: 134px;
	padding: 23px 40px 22px;
	border-radius: 20px;
	background: var(--wpk-surface);
	box-shadow: 0 17px 35px rgba(0, 0, 0, 0.09);
}
.wpk-installer-checklist__check {
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	margin-top: 0;
	border-radius: 50%;
	background: var(--wpk-accent);
	color: #fff;
}
.wpk-installer-checklist__check .wpk-icon {
	width: 18px;
	height: 18px;
	stroke-width: 1.8;
}
.wpk-installer-checklist__card h3 {
	margin: 0 0 10px;
	color: var(--wpk-ink);
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-bold);
	font-size: 22px;
	line-height: 1.27;
}
.wpk-installer-checklist__card p {
	margin: 0;
	color: var(--wpk-muted);
	font-size: 18px;
	line-height: 1.55;
}

/* Text + Media layout: intro and checklist stack together in one column
   (.wpk-installer-checklist__content) instead of sitting side by side,
   freeing the second grid column for the media panel. */
.wpk-installer-checklist--with-media .wpk-installer-checklist__inner {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: stretch;
}
.wpk-installer-checklist--with-media .wpk-installer-checklist__content {
	position: relative;
	min-width: 0;
}
.wpk-installer-checklist--with-media .wpk-installer-checklist__intro {
	padding-top: 0;
}
/* No with-media-specific override for the arrow itself — it keeps the
   same absolute 292x184 size/position as the columns layout (matching
   04-installer-checklist-section.html exactly, not shrunk to fit).
   Since intro and list now stack in one column here (instead of sitting
   in separate grid columns like the columns layout), the list needs
   enough margin-top to clear the arrow's absolute footprint below the
   intro (184px tall + its own 10px offset) instead of overlapping it. */
.wpk-installer-checklist--with-media .wpk-installer-checklist__list {
	margin-top: 220px;
}
.wpk-installer-checklist__media {
	position: relative;
	min-height: 500px;
	overflow: hidden;
	border-radius: var(--wpk-radius-media);
	background: #252525;
}

@media (max-width: 900px) {
	.wpk-installer-checklist--with-media .wpk-installer-checklist__inner {
		grid-template-columns: 1fr;
	}
	.wpk-installer-checklist--with-media .wpk-installer-checklist__media {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 1120px) {
	.wpk-installer-checklist__inner {
		grid-template-columns: 32% minmax(0, 1fr);
		gap: 60px;
	}
	.wpk-installer-checklist__arrow {
		width: 230px;
		left: 55px;
	}
	.wpk-installer-checklist__card {
		padding-inline: 30px;
		gap: 23px;
	}
}
@media (max-width: 800px) {
	.wpk-installer-checklist {
		padding: 76px 24px;
	}
	.wpk-installer-checklist__inner {
		grid-template-columns: 1fr;
		gap: 35px;
		max-width: 650px;
	}
	.wpk-installer-checklist__intro {
		padding: 0;
	}
	.wpk-installer-checklist__intro-copy {
		font-size: 17px;
		line-height: 1.59;
	}
	.wpk-installer-checklist__arrow {
		display: none;
	}
	.wpk-installer-checklist--with-media .wpk-installer-checklist__list {
		margin-top: 35px;
	}
	.wpk-installer-checklist__card {
		min-height: 0;
		padding: 26px;
		gap: 20px;
	}
	.wpk-installer-checklist__card h3 {
		font-size: 21px;
		line-height: 1.29;
	}
	.wpk-installer-checklist__card p {
		font-size: 16px;
		line-height: 1.63;
	}
}
@media (max-width: 420px) {
	.wpk-installer-checklist {
		padding: 64px 20px;
	}
	.wpk-installer-checklist__card {
		padding: 24px 21px;
		gap: 15px;
		grid-template-columns: 25px minmax(0, 1fr);
		border-radius: 17px;
	}
	.wpk-installer-checklist__check {
		width: 25px;
		height: 25px;
	}
	.wpk-installer-checklist__card h3 {
		font-size: 19px;
		line-height: 1.32;
	}
}

/* ================= Photo steps ================= */

.wpk-photo-steps {
	padding: 105px 24px;
	background: var(--wpk-surface);
	color: var(--wpk-ink);
}
.wpk-photo-steps__inner {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 73px;
	align-items: center;
}
.wpk-photo-steps__intro {
	order: var(--wpk-order, 1);
}
.wpk-photo-steps__heading {
	margin: 0;
	font-family: var(--wpk-font-display);
	font-weight: var(--wpk-weight-display);
	font-size: 36px;
	line-height: 1.25;
	letter-spacing: -0.6px;
	color: inherit;
}
.wpk-photo-steps__intro-copy {
	margin-top: 22px;
	font-size: 18px;
	line-height: 1.55;
	color: inherit;
}
.wpk-photo-steps__intro-copy p {
	margin: 0;
}
.wpk-photo-steps__intro-copy p + p {
	margin-top: 24px;
}
.wpk-photo-steps__list {
	--wpk-photo-steps-columns: 3;
	order: calc(3 - var(--wpk-order, 1));
	display: grid;
	grid-template-columns: repeat(var(--wpk-photo-steps-columns), minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wpk-photo-steps__step {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-start;
	min-width: 0;
	min-height: 450px;
	overflow: hidden;
	border-radius: var(--wpk-radius-media);
	background: var(--wpk-ink);
	color: #fff;
	text-align: center;
}
.wpk-photo-steps__photo {
	position: absolute;
	z-index: -2;
	inset: 0;
	background-color: var(--wpk-ink);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.wpk-photo-steps__step::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(180deg, transparent 27%, rgba(16, 22, 14, 0.12) 43%, rgba(9, 12, 7, 0.76) 100%);
}
.wpk-photo-steps__body {
	width: 100%;
	padding: 236px 25px 32px;
}
.wpk-photo-steps__number {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: var(--wpk-accent);
	color: #fff;
	font-size: 16px;
	font-weight: var(--wpk-weight-body-bold);
	line-height: 1;
}
.wpk-photo-steps__step h3 {
	margin: 0 0 12px;
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-bold);
	font-size: 14px;
	line-height: 1.5;
	color: #fff;
}
.wpk-photo-steps__step p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #fff;
}

@media (max-width: 1150px) {
	.wpk-photo-steps__inner {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 38px;
	}
	.wpk-photo-steps__heading {
		font-size: 32px;
	}
	.wpk-photo-steps__list {
		gap: 14px;
	}
	.wpk-photo-steps__body {
		padding-inline: 18px;
	}
	.wpk-photo-steps__step {
		min-height: 465px;
	}
}
@media (max-width: 940px) {
	.wpk-photo-steps__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.wpk-photo-steps__step {
		min-height: 450px;
	}
	.wpk-photo-steps__body {
		padding-inline: 25px;
	}
}
@media (max-width: 650px) {
	.wpk-photo-steps {
		padding: 68px 20px;
	}
	.wpk-photo-steps__heading {
		font-size: 29px;
	}
	.wpk-photo-steps__intro-copy {
		font-size: 16px;
		line-height: 1.63;
	}
	.wpk-photo-steps__list {
		grid-template-columns: 1fr;
		gap: 20px;
		max-width: 420px;
		width: 100%;
		margin: 0 auto;
	}
	.wpk-photo-steps__step {
		min-height: 440px;
		aspect-ratio: 3 / 4;
		align-items: flex-end;
	}
	.wpk-photo-steps__body {
		max-width: 340px;
		margin: 0 auto;
		padding: 0 30px 32px;
	}
	.wpk-photo-steps__step h3 {
		font-size: 18px;
		line-height: 1.4;
	}
	.wpk-photo-steps__step p {
		font-size: 16px;
		line-height: 1.55;
	}
	.wpk-photo-steps__number {
		width: 36px;
		height: 36px;
		margin-bottom: 15px;
	}
}

/* ================= Highlight grid ================= */

.wpk-highlight-grid {
	padding: 105px 24px;
	background: var(--wpk-surface);
	color: var(--wpk-ink);
}
.wpk-highlight-grid__heading {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 90px;
	align-items: center;
}
.wpk-highlight-grid__heading-text {
	margin: 0;
	font-family: var(--wpk-font-display);
	font-weight: var(--wpk-weight-display);
	font-size: 36px;
	line-height: 1.25;
	letter-spacing: -0.6px;
	color: inherit;
}
.wpk-highlight-grid__subcopy {
	margin: 0;
	font-size: 18px;
	line-height: 1.55;
	text-align: right;
	color: inherit;
}
.wpk-highlight-grid__grid {
	--wpk-highlight-grid-columns: 4;
	display: grid;
	grid-template-columns: repeat(var(--wpk-highlight-grid-columns), minmax(0, 1fr));
	gap: 22px;
	margin-top: 41px;
}
.wpk-highlight-grid__card {
	--wpk-highlight-ring: #B0C19E;
	--wpk-highlight-title-color: var(--wpk-accent);
	min-width: 0;
	text-align: center;
	transition: opacity 0.32s ease;
	outline: 0;
}
.wpk-highlight-grid__image {
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--wpk-radius-media);
	background-color: var(--wpk-surface-alt);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 0 0 0 transparent;
	filter: saturate(0.85);
	transition: filter 0.35s ease, box-shadow 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wpk-highlight-grid__card h3 {
	margin: 36px 0 8px;
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-bold);
	font-size: 20px;
	line-height: 1.3;
	color: var(--wpk-ink);
	transition: color 0.25s;
}
.wpk-highlight-grid__card p {
	max-width: 210px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.3;
	color: var(--wpk-muted);
}
.wpk-highlight-grid__note {
	margin: 43px auto 0;
	text-align: center;
	font-size: 18px;
	font-weight: var(--wpk-weight-body-semibold);
	line-height: 1.55;
	color: inherit;
}
.wpk-highlight-grid__cta {
	margin-top: 40px;
	text-align: center;
}

/* Icon Labels card style — centered heading, a narrower 2-up grid of
   pill-shaped icon+title labels (no image). Hover/focus just recolors
   that one label; it doesn't dim its neighbors like the image style. */
.wpk-highlight-grid__heading--icon-label {
	display: block;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}
.wpk-highlight-grid__heading--icon-label .wpk-highlight-grid__subcopy {
	margin-top: 18px;
	text-align: center;
}
.wpk-highlight-grid__grid--icon-label {
	max-width: 834px;
	margin-inline: auto;
}
.wpk-highlight-grid__card--icon-label {
	text-align: left;
}
.wpk-highlight-grid__label {
	--wpk-label-bg: #F3F5EF;
	--wpk-label-muted: #A5BB8E;
	--wpk-label-active: #5B8135;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	min-height: 96px;
	padding: 25px 24px;
	border: 1px solid transparent;
	border-radius: 20px;
	background: var(--wpk-label-bg);
	color: var(--wpk-label-muted);
	transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.3s;
}
.wpk-highlight-grid__icon {
	display: block;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
}
.wpk-highlight-grid__icon .wpk-icon,
.wpk-highlight-grid__icon img {
	display: block;
	width: 100%;
	height: 100%;
	stroke-width: 1.8;
}
.wpk-highlight-grid__icon i {
	font-size: 30px;
	line-height: 1;
}
.wpk-highlight-grid__card--icon-label h3 {
	margin: 0;
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-semibold);
	font-size: 18px;
	line-height: 1.45;
	color: inherit;
}
.wpk-highlight-grid__card--icon-label p {
	max-width: 390px;
	margin: 28px auto 0;
	text-align: center;
	font-size: 16px;
	line-height: 1.5;
	color: var(--wpk-ink);
}
.wpk-highlight-grid__card--icon-label:focus-visible .wpk-highlight-grid__label {
	color: var(--wpk-label-active);
	border-color: var(--wpk-label-active);
	background: #fff;
	box-shadow: 0 19px 30px rgba(0, 0, 0, 0.2);
	outline: 2px solid var(--wpk-label-active);
	outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
	.wpk-highlight-grid__card--icon-label:hover .wpk-highlight-grid__label {
		color: var(--wpk-label-active);
		border-color: var(--wpk-label-active);
		background: #fff;
		box-shadow: 0 19px 30px rgba(0, 0, 0, 0.2);
	}
}
@media (hover: none) {
	.wpk-highlight-grid__label {
		color: var(--wpk-label-active);
	}
}

.wpk-highlight-grid__card:focus-visible .wpk-highlight-grid__image {
	filter: saturate(1);
	box-shadow: 0 0 0 5px var(--wpk-highlight-ring), 0 20px 32px rgba(0, 0, 0, 0.2);
	outline: 2px solid var(--wpk-accent);
	outline-offset: 5px;
	transform: translateY(-1px);
}
.wpk-highlight-grid__card:focus-visible h3 {
	color: var(--wpk-highlight-title-color);
}
.wpk-highlight-grid__grid:has(.wpk-highlight-grid__card:focus-visible) .wpk-highlight-grid__card:not(:focus-visible) {
	opacity: 0.32;
}
@media (hover: hover) and (pointer: fine) {
	.wpk-highlight-grid__grid:has(.wpk-highlight-grid__card:hover) .wpk-highlight-grid__card:not(:hover) {
		opacity: 0.32;
	}
	.wpk-highlight-grid__grid .wpk-highlight-grid__card:hover {
		opacity: 1;
	}
	.wpk-highlight-grid__card:hover .wpk-highlight-grid__image {
		filter: saturate(1);
		box-shadow: 0 0 0 5px var(--wpk-highlight-ring), 0 20px 32px rgba(0, 0, 0, 0.2);
		transform: translateY(-1px);
	}
	.wpk-highlight-grid__card:hover h3 {
		color: var(--wpk-highlight-title-color);
	}
}

@media (max-width: 1050px) {
	.wpk-highlight-grid__heading {
		gap: 45px;
	}
	.wpk-highlight-grid__heading-text {
		font-size: 32px;
	}
	.wpk-highlight-grid__grid {
		gap: 20px;
	}
	.wpk-highlight-grid__card h3 {
		font-size: 18px;
		margin-top: 28px;
	}
	.wpk-highlight-grid__card p {
		font-size: 15px;
	}
	.wpk-highlight-grid__label {
		gap: 17px;
	}
}
@media (max-width: 800px) {
	.wpk-highlight-grid__heading {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.wpk-highlight-grid__subcopy {
		text-align: left;
		max-width: 580px;
	}
	.wpk-highlight-grid__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px 24px;
	}
	.wpk-highlight-grid__card h3 {
		font-size: 20px;
		margin-top: 25px;
	}
	.wpk-highlight-grid__card p {
		font-size: 16px;
		line-height: 1.5;
		max-width: 270px;
	}
}
@media (max-width: 540px) {
	.wpk-highlight-grid {
		padding: 65px 20px 70px;
	}
	.wpk-highlight-grid__heading-text {
		font-size: 29px;
		line-height: 1.25;
	}
	.wpk-highlight-grid__subcopy {
		font-size: 16px;
		line-height: 1.63;
	}
	.wpk-highlight-grid__grid {
		gap: 30px 18px;
		margin-top: 30px;
	}
	.wpk-highlight-grid__image {
		border-radius: 15px;
	}
	.wpk-highlight-grid__card h3 {
		font-size: 17px;
		line-height: 1.35;
		margin-top: 22px;
	}
	.wpk-highlight-grid__card p {
		font-size: 14px;
		line-height: 1.5;
	}
	.wpk-highlight-grid__note {
		font-size: 16px;
		line-height: 1.63;
		margin-top: 32px;
	}
	.wpk-highlight-grid__cta {
		margin-top: 32px;
	}
	.wpk-highlight-grid__grid--icon-label {
		grid-template-columns: 1fr;
		max-width: 460px;
		gap: 30px;
	}
	.wpk-highlight-grid__label {
		min-height: 88px;
		padding: 22px;
		border-radius: 17px;
	}
	.wpk-highlight-grid__card--icon-label p {
		margin-top: 20px;
	}
}
@media (max-width: 360px) {
	.wpk-highlight-grid__grid {
		grid-template-columns: 1fr;
		max-width: 280px;
		margin-inline: auto;
	}
	.wpk-highlight-grid__card h3 {
		font-size: 20px;
	}
	.wpk-highlight-grid__card p {
		font-size: 16px;
		line-height: 1.5;
	}
}
@media (prefers-reduced-motion: reduce) {
	.wpk-highlight-grid * {
		transition: none !important;
	}
}

/* ================= Photo cards ================= */

.wpk-photo-cards__header {
	max-width: 765px;
	margin: 0 auto 36px;
	text-align: center;
}
.wpk-photo-cards__grid {
	--wpk-photo-cards-columns: 3;
	display: grid;
	grid-template-columns: repeat(var(--wpk-photo-cards-columns), minmax(0, 1fr));
	align-items: stretch;
	gap: 18px;
}
.wpk-photo-cards__card {
	min-width: 0;
	overflow: hidden;
	border-radius: var(--wpk-radius-card);
	background: var(--wpk-surface-alt);
}
.wpk-photo-cards__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 335 / 200;
	object-fit: cover;
}
.wpk-photo-cards__body {
	padding: 28px 32px 29px;
	text-align: center;
}
.wpk-photo-cards__card h3 {
	margin: 0 0 8px;
	font-family: var(--wpk-font-body);
	font-weight: var(--wpk-weight-body-bold);
	font-size: 22px;
	line-height: 1.27;
	color: var(--wpk-ink);
}
.wpk-photo-cards__card p {
	margin: 0;
	font-size: 16px;
	line-height: 1.25;
	color: var(--wpk-muted);
}

@media (max-width: 1000px) {
	.wpk-photo-cards__body {
		padding: 24px;
	}
	.wpk-photo-cards__card p {
		line-height: 1.375;
	}
}
@media (max-width: 760px) {
	.wpk-photo-cards__grid {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin-inline: auto;
		gap: 24px;
	}
	.wpk-photo-cards__body {
		padding: 26px 30px 30px;
	}
	.wpk-photo-cards__card p {
		max-width: 365px;
		margin-inline: auto;
		line-height: 1.5;
	}
}
@media (max-width: 380px) {
	.wpk-photo-cards__body {
		padding-inline: 22px;
	}
}

/* ================= Content + image ================= */

.wpk-content-image__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr);
	gap: 65px;
	align-items: center;
}
.wpk-content-image__content {
	order: var(--wpk-order, 1);
	min-width: 0;
}
.wpk-content-image__image {
	order: calc(3 - var(--wpk-order, 1));
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 650 / 419;
	object-fit: cover;
	border-radius: var(--wpk-radius-card);
}
.wpk-content-image__content .wpk-section-subcopy {
	max-width: 310px;
	font-size: 18px;
	line-height: 1.5;
}
.wpk-content-image__content .wpk-btn {
	margin-top: 26px;
}

@media (max-width: 1100px) {
	.wpk-content-image {
		padding-block: 80px;
	}
	.wpk-content-image__grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr);
		gap: 40px;
	}
	.wpk-content-image__content .wpk-section-subcopy {
		font-size: 17px;
		line-height: 1.53;
	}
}
@media (max-width: 760px) {
	.wpk-content-image {
		padding: 58px 20px;
	}
	.wpk-content-image__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.wpk-content-image__content {
		order: initial;
	}
	.wpk-content-image__image {
		order: initial;
	}
	.wpk-content-image__content .wpk-section-subcopy {
		max-width: none;
		font-size: 16px;
		line-height: 1.63;
	}
	.wpk-content-image__content .wpk-btn {
		margin-top: 24px;
	}
}

/* ================= Footer ================= */

.wpk-footer {
	padding: 84px 24px 90px;
	background: var(--wpk-surface);
}
.wpk-footer *,
.wpk-footer *::before,
.wpk-footer *::after {
	box-sizing: border-box;
}
.wpk-footer__inner {
	max-width: var(--wpk-content-max-width);
	margin: 0 auto;
}
.wpk-footer__top {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) 190px;
	gap: 52px;
	align-items: start;
}
.wpk-footer__logo {
	display: block;
	width: 134px;
}
.wpk-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 91px;
	object-fit: contain;
}
.wpk-footer__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 34px;
	flex-wrap: wrap;
	padding-top: 21px;
}
.wpk-footer a {
	color: inherit;
	text-decoration: none;
}
.wpk-footer__nav a {
	font-size: 15px;
	font-weight: var(--wpk-weight-body-medium);
	line-height: 1.6;
	white-space: nowrap;
	transition: color 0.2s;
}
.wpk-footer__nav a:hover {
	color: var(--wpk-accent);
}
.wpk-footer__socials {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 47px;
	padding-top: 20px;
}
.wpk-footer__icon-link {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 27px;
	height: 30px;
	padding: 0;
	color: var(--wpk-accent);
	border: 0;
	background: transparent;
	font-size: 22px;
	transition: transform 0.2s, color 0.2s;
}
a.wpk-footer__icon-link:hover {
	transform: translateY(-2px);
	color: var(--wpk-accent-deep);
}
.wpk-footer__icon-link .wpk-icon,
.wpk-footer__icon-link svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: currentColor;
}
.wpk-footer__icon-link i {
	line-height: 1;
}
.wpk-footer__icon-link[aria-disabled="true"] {
	cursor: default;
	opacity: 0.5;
}
.wpk-footer__middle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-top: 12px;
}
.wpk-footer__contact {
	display: flex;
	align-items: center;
	gap: 29px;
}
.wpk-footer__tagline {
	margin: 0;
	max-width: 365px;
	text-align: right;
	font-size: 14px;
	line-height: 1.55;
	color: inherit;
}
.wpk-footer__hours {
	position: relative;
}
.wpk-footer__hours summary {
	list-style: none;
	cursor: pointer;
}
.wpk-footer__hours summary::-webkit-details-marker {
	display: none;
}
.wpk-footer__hours summary::marker {
	content: "";
}
.wpk-footer__hours-panel {
	position: absolute;
	z-index: 3;
	left: -12px;
	bottom: calc(100% + 12px);
	width: 235px;
	padding: 20px;
	border: 1px solid var(--wpk-hairline);
	border-radius: var(--wpk-radius-card);
	background: var(--wpk-surface);
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.13);
	font-size: 14px;
	line-height: 1.55;
}
.wpk-footer__hours-panel strong {
	display: block;
	margin-bottom: 7px;
	color: var(--wpk-accent);
}
.wpk-footer__hours-panel p {
	margin: 0;
}
.wpk-footer__hours-panel a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wpk-footer__bottom {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	gap: 24px;
	align-items: center;
	min-height: 42px;
	margin-top: 35px;
	padding: 8px 51px;
	border-radius: var(--wpk-radius-pill);
	background: var(--wpk-surface);
	box-shadow: 0 15px 27px rgba(0, 0, 0, 0.16);
	color: var(--wpk-muted);
	font-size: 16px;
	line-height: 1.5;
}
.wpk-footer__copyright {
	margin: 0;
	text-align: center;
	font: inherit;
	color: inherit;
}
.wpk-footer__bottom > a:last-child {
	text-align: right;
	white-space: nowrap;
}
.wpk-footer__bottom a:hover {
	color: var(--wpk-accent);
}
.wpk-footer a:focus-visible,
.wpk-footer summary:focus-visible {
	outline: 3px solid var(--wpk-accent);
	outline-offset: 5px;
	border-radius: 4px;
}

@media (max-width: 1030px) {
	.wpk-footer__top {
		grid-template-columns: 155px minmax(0, 1fr) 140px;
		gap: 30px;
	}
	.wpk-footer__nav {
		gap: 23px;
	}
	.wpk-footer__socials {
		gap: 26px;
	}
	.wpk-footer__bottom {
		padding-inline: 30px;
		font-size: 14px;
	}
}

@media (max-width: 750px) {
	.wpk-footer {
		padding: 58px 22px 65px;
	}
	.wpk-footer__top {
		grid-template-columns: 1fr auto;
		gap: 24px 30px;
		align-items: center;
	}
	.wpk-footer__logo {
		width: 125px;
	}
	.wpk-footer__nav {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-content: flex-start;
		padding-top: 4px;
		gap: 18px 30px;
	}
	.wpk-footer__socials {
		padding-top: 0;
		gap: 24px;
	}
	.wpk-footer__middle {
		margin-top: 28px;
		align-items: flex-start;
	}
	.wpk-footer__tagline {
		font-size: 13px;
		line-height: 1.6;
		max-width: 270px;
	}
	.wpk-footer__contact {
		gap: 19px;
	}
	.wpk-footer__bottom {
		grid-template-columns: 1fr 1fr;
		gap: 15px;
		padding: 22px 25px;
		border-radius: 22px;
		text-align: center;
		margin-top: 30px;
	}
	.wpk-footer__bottom > a:first-child {
		grid-column: 1;
		grid-row: 1;
	}
	.wpk-footer__bottom > a:last-child {
		grid-column: 2;
		grid-row: 1;
		text-align: center;
		white-space: normal;
	}
	.wpk-footer__copyright {
		grid-column: 1 / -1;
		grid-row: 2;
		font-size: 13px;
	}
}

@media (max-width: 430px) {
	.wpk-footer__top {
		column-gap: 20px;
	}
	.wpk-footer__socials {
		gap: 18px;
	}
	.wpk-footer__middle {
		flex-direction: column;
		gap: 19px;
	}
	.wpk-footer__tagline {
		text-align: left;
	}
	.wpk-footer__nav {
		justify-content: space-between;
		gap: 12px;
		font-size: 14px;
	}
	.wpk-footer__nav a {
		font-size: 14px;
	}
	.wpk-footer__hours-panel {
		left: -85px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpk-footer * {
		transition: none !important;
	}
}

/* ---------- Print ---------- */

@media print {
	.wpk-hero {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}
	.wpk-header__burger,
	.wpk-mobile-menu {
		display: none;
	}
	.wpk-service-card,
	.wpk-process-step,
	.wpk-cta-banner__card {
		break-inside: avoid;
	}
}