/* ==========================================================================
   Reusable site-wide elements (template-parts/elements/*), callable from code
   templates via wf_element() and from Elementor via [wf_element name="..."].

   SPECIFICITY NOTE -- Elementor's kit stylesheet ships element rules at 0-1-1
   (.elementor-kit-6 a / button / img), which beat a bare single class. Every
   selector below is therefore at least two classes deep, rooted at the element's
   own block class (.wf-el-*), which is present on the element wherever it is
   used -- inside .wf-home on the front page and inside Elementor content
   elsewhere. That keeps the specificity win without tying these blocks to the
   homepage. Each block also re-asserts link colour, image radius and button
   styling inside its own scope.
   ========================================================================== */

/* ---------- Certification / partner badges ---------- */
.wf-el-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px 36px;
}

.wf-el-badges .wf-el-badges__item {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	color: inherit;
	text-decoration: none;
}

.wf-el-badges .wf-el-badges__img {
	display: block;
	height: 44px;
	width: auto;
	max-width: none;
	border-radius: 0;
	filter: grayscale(1);
	opacity: .7;
	transition: filter var(--wf-dur) var(--wf-ease), opacity var(--wf-dur) var(--wf-ease);
}

.wf-el-badges .wf-el-badges__item:hover .wf-el-badges__img,
.wf-el-badges .wf-el-badges__item:focus-visible .wf-el-badges__img {
	filter: grayscale(0);
	opacity: 1;
}

/* ---------- Results stat cards ---------- */
.wf-el-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}

.wf-el-stats .wf-el-stats__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 28px 24px;
	background: var(--wf-white);
	border: 1px solid var(--wf-border);
	border-radius: var(--wf-radius-md);
	box-shadow: var(--wf-shadow-sm);
}

.wf-el-stats .wf-el-stats__num {
	font: 800 clamp(1.75rem, 3.4vw, 2.5rem)/1 var(--wf-font-display);
	color: var(--wf-blue);
}

.wf-el-stats .wf-el-stats__label {
	font: 600 .75rem/1.35 var(--wf-font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wf-text-mute);
}

/* ---------- Get Started CTA banner ---------- */
.wf-el-cta {
	background: var(--wf-grad-cta);
	color: var(--wf-white);
	padding-block: clamp(56px, 7vw, 88px);
}

.wf-el-cta .wf-el-cta__inner {
	max-width: 820px;
	text-align: center;
}

.wf-el-cta .wf-el-cta__title {
	color: var(--wf-white);
	margin: 0;
}

.wf-el-cta .wf-el-cta__hl {
	color: var(--wf-navy);
}

.wf-el-cta .wf-el-cta__sub {
	margin: 16px 0 0;
	font: 400 1.125rem/1.6 var(--wf-font-body);
	color: rgba(255, 255, 255, .92);
}

.wf-el-cta .wf-el-cta__btn {
	margin-top: 32px;
	background: var(--wf-white);
	color: var(--wf-navy);
	text-decoration: none;
	text-transform: uppercase;
}

.wf-el-cta .wf-el-cta__btn:hover {
	background: var(--wf-bg-blue);
	color: var(--wf-navy);
}

/* ---------- Plans / packages pricing cards ----------
   Three fixed treatments, left to right: Basic white with a dark hairline,
   Advanced solid WP Blue and lifted, Pro navy. The coloured cards carry two
   concentric decorative arcs in the top-right corner, clipped by the card.
   Every selector is at least two classes deep so Elementor's kit rules
   (.elementor-kit-6 a / button) lose, and link + button colour is re-asserted
   inside the scope. */
body .wf-plans a {
	color: inherit;
	text-decoration: none;
}

.wf-plans {
	padding-block: clamp(64px, 8vw, 112px);
	background: var(--wf-bg);
	color: var(--wf-text);
	scroll-margin-top: 140px;
}

.wf-plans .wf-home-head {
	margin-bottom: clamp(32px, 4vw, 56px);
}

.wf-plans .wf-home-head--center {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.wf-plans .wf-home-head__eyebrow {
	margin: 0 0 12px;
}

.wf-plans .wf-home-head__title {
	color: var(--wf-text-dark);
}

.wf-plans .wf-home-head__intro {
	margin: 16px 0 0;
	font: 400 1.0625rem/1.6 var(--wf-font-body);
	color: var(--wf-text);
}

.wf-plans .wf-plans__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: 24px;
}

.wf-plans .wf-plan {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-sizing: border-box;
	padding: 32px 28px;
	border: 1px solid var(--wf-navy);
	border-radius: 16px;
	background: var(--wf-white);
	color: var(--wf-text-dark);
	box-shadow: var(--wf-shadow-sm);
}

/* Card content sits above the decorative arcs. */
.wf-plans .wf-plan > * {
	position: relative;
	z-index: 1;
}

.wf-plans .wf-plan--advanced {
	background: var(--wf-blue);
	border-color: var(--wf-blue);
	color: var(--wf-white);
	order: -1;
}

.wf-plans .wf-plan--pro {
	background: var(--wf-navy);
	border-color: var(--wf-navy);
	color: var(--wf-white);
}

.wf-plans .wf-plan--advanced::before,
.wf-plans .wf-plan--advanced::after,
.wf-plans .wf-plan--pro::before,
.wf-plans .wf-plan--pro::after {
	content: '';
	position: absolute;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	pointer-events: none;
}

.wf-plans .wf-plan--advanced::before,
.wf-plans .wf-plan--pro::before {
	top: -96px;
	right: -96px;
	width: 240px;
	height: 240px;
}

.wf-plans .wf-plan--advanced::after,
.wf-plans .wf-plan--pro::after {
	top: -60px;
	right: -60px;
	width: 168px;
	height: 168px;
	border-color: rgba(255, 255, 255, .12);
}

.wf-plans .wf-plan__icon {
	width: 28px;
	height: 28px;
	color: var(--wf-blue);
}

.wf-plans .wf-plan--advanced .wf-plan__icon,
.wf-plans .wf-plan--pro .wf-plan__icon {
	color: var(--wf-white);
}

.wf-plans .wf-plan__name {
	margin: 0;
	font: 700 1.75rem/1.15 var(--wf-font-heading);
	color: inherit;
}

.wf-plans .wf-plan__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: -4px 0 0;
}

.wf-plans .wf-plan__amount {
	font: 700 1.5rem/1.1 var(--wf-font-display);
}

.wf-plans .wf-plan__period {
	font: 500 .8125rem/1.2 var(--wf-font-body);
	opacity: .75;
}

.wf-plans .wf-plan__desc {
	margin: 0;
	font: italic 400 .9375rem/1.55 var(--wf-font-body);
	opacity: .85;
}

.wf-plans .wf-plan__features {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 4px 0 0;
}

.wf-plans .wf-plan__group {
	margin: 0 0 8px;
	font: 700 .75rem/1.3 var(--wf-font-body);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.wf-plans .wf-plan__list {
	margin: 0;
	padding: 0 0 0 10px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wf-plans .wf-plan__item {
	display: flex;
	gap: 8px;
	font: 400 .9375rem/1.5 var(--wf-font-body);
}

.wf-plans .wf-plan__marker {
	flex: none;
	opacity: .55;
}

.wf-plans .wf-plan__item--off {
	opacity: .5;
}

.wf-plans .wf-plan__note {
	margin: 4px 0 0;
	font: italic 400 .8125rem/1.5 var(--wf-font-body);
	opacity: .7;
}

.wf-plans .wf-plan .wf-plan__cta {
	align-self: stretch;
	justify-content: center;
	margin-top: auto;
	text-align: center;
	text-decoration: none;
}

.wf-plans .wf-plan--basic .wf-plan__cta {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--wf-navy);
	color: var(--wf-navy);
}

.wf-plans .wf-plan--advanced .wf-plan__cta,
.wf-plans .wf-plan--pro .wf-plan__cta {
	background: var(--wf-white);
	color: var(--wf-navy);
}

.wf-plans .wf-plan--basic .wf-plan__cta:hover,
.wf-plans .wf-plan--basic .wf-plan__cta:focus-visible,
.wf-plans .wf-plan--advanced .wf-plan__cta:hover,
.wf-plans .wf-plan--advanced .wf-plan__cta:focus-visible,
.wf-plans .wf-plan--pro .wf-plan__cta:hover,
.wf-plans .wf-plan--pro .wf-plan__cta:focus-visible {
	background: var(--wf-gold);
	box-shadow: none;
	color: var(--wf-navy);
}

.wf-plans .wf-plans__footnote {
	max-width: 760px;
	margin: clamp(24px, 3vw, 36px) auto 0;
	text-align: center;
	font: 400 .875rem/1.6 var(--wf-font-body);
	color: var(--wf-text-mute);
}

@media (min-width: 1000px) {
	.wf-plans .wf-plans__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}

	/* Mobile stacks Advanced first; the three-up grid restores source order. */
	.wf-plans .wf-plan--advanced {
		order: 0;
	}

	.wf-plans .wf-plan.is-highlighted {
		transform: translateY(-12px);
		box-shadow: var(--wf-shadow-lg);
	}
}

/* ---------- Team spotlight ----------
   Photo-led cards, three up on desktop. The `--2` / `--1` variants centre a
   short row instead of stretching two portraits across the full width. The
   headshots are transparent PNG cutouts, so the media box carries its own
   off-white ground rather than showing the section behind them. Same two-class
   minimum as every other block here, and link colour plus image radius are
   re-asserted inside the scope. */
body .wf-el-team a {
	color: inherit;
	text-decoration: none;
}

body .wf-el-team img {
	border-radius: var(--wf-radius-md);
	max-width: 100%;
	height: auto;
}

.wf-el-team .wf-el-team__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wf-el-team .wf-el-team__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	text-align: center;
}

.wf-el-team .wf-el-team__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	max-width: 100%;
	background: var(--wf-bg);
	border: 1px solid var(--wf-border);
	border-radius: var(--wf-radius-md);
}

.wf-el-team .wf-el-team__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wf-radius-md);
}

.wf-el-team .wf-el-team__name {
	margin: 0;
	font-size: 1.125rem;
	color: var(--wf-text-dark);
}

.wf-el-team .wf-el-team__role {
	margin: 0;
	font: 500 .9375rem/1.5 var(--wf-font-body);
	color: var(--wf-text-mute);
}

.wf-el-team .wf-el-team__more {
	display: flex;
	justify-content: center;
	margin-top: clamp(28px, 3.5vw, 40px);
}

.wf-el-team .wf-el-team__more .wf-ind-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 0;
	padding-top: 0;
	font: 600 .875rem/1 var(--wf-font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wf-blue);
	transition: gap var(--wf-dur) var(--wf-ease);
}

.wf-el-team .wf-el-team__more .wf-ind-more:hover,
.wf-el-team .wf-el-team__more .wf-ind-more:focus-visible {
	gap: 12px;
	color: var(--wf-blue-hover);
}

@media (min-width: 600px) {
	.wf-el-team .wf-el-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* One card never stretches to half the page. */
	.wf-el-team .wf-el-team__grid--1 {
		grid-template-columns: minmax(0, 320px);
		justify-content: center;
	}
}

@media (min-width: 900px) {
	.wf-el-team .wf-el-team__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px;
	}

	.wf-el-team .wf-el-team__grid--1,
	.wf-el-team .wf-el-team__grid--2 {
		grid-template-columns: repeat(auto-fit, minmax(0, 320px));
		justify-content: center;
	}
}

/* =======================================================================
 * Howler newsletter CTA element (template-parts/elements/howler-cta.php).
 * Moved here from blog.css on 2026-09-13 so [wf_element name="howler-cta"]
 * and the Sections template render it styled on any page.
 * ===================================================================== */
/* ==========================================================================
   Howler newsletter CTA element (template-parts/elements/howler-cta.php).

   Two variants: `band` (full-width navy closer on the posts page and archives)
   and `card` (light inline card mid-article). The element is registered for any
   template, but its styling ships in this file, so it is only styled on blog
   templates today.
   ========================================================================== */

.wf-el-howler--band {
	background: var(--wf-navy);
	color: var(--wf-text-offwhite);
}

.wf-el-howler--band .wf-el-howler__inner {
	max-width: var(--wf-container);
	margin-inline: auto;
	padding-block: clamp(48px, 6vw, 88px);
	padding-inline: var(--wf-gutter);
	box-sizing: border-box;
	text-align: center;
}

.wf-el-howler--card {
	padding: clamp(24px, 3vw, 36px);
	background: var(--wf-bg);
	border: 1px solid var(--wf-border);
	border-radius: var(--wf-radius-md);
}

.wf-el-howler--card .wf-el-howler__inner {
	max-width: 780px;
	margin-inline: auto;
}

.wf-el-howler__eyebrow {
	margin: 0 0 12px;
}

.wf-el-howler__title {
	margin: 0;
	color: var(--wf-text-dark);
}

.wf-el-howler--band .wf-el-howler__title {
	color: var(--wf-white);
}

.wf-el-howler__hl {
	color: var(--wf-cyan);
}

.wf-el-howler--card .wf-el-howler__title {
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
}

.wf-el-howler__desc {
	margin: 16px 0 0;
	font: 400 1.0625rem/1.65 var(--wf-font-body);
	color: var(--wf-text);
}

.wf-el-howler--band .wf-el-howler__desc {
	max-width: 680px;
	margin-inline: auto;
	color: var(--wf-text-offwhite);
}

.wf-el-howler__form {
	margin-top: 24px;
}

.wf-el-howler--band .wf-el-howler__form {
	max-width: 560px;
	margin-inline: auto;
}

.wf-el-howler__note {
	margin: 14px 0 0;
	font: 400 .8125rem/1.4 var(--wf-font-body);
	color: var(--wf-text-mute);
}

.wf-el-howler--band .wf-el-howler__note {
	color: var(--wf-silver);
}

/* ---------- WPForms inside the element ---------- */
.wf-el-howler__form .wpforms-container {
	margin: 0;
}

.wf-el-howler__form .wpforms-form .wpforms-field {
	padding: 0;
}

.wf-el-howler__form .wpforms-form input[type="text"],
.wf-el-howler__form .wpforms-form input[type="email"],
.wf-el-howler__form .wpforms-form input[type="tel"],
.wf-el-howler__form .wpforms-form input[type="url"],
.wf-el-howler__form .wpforms-form select,
.wf-el-howler__form .wpforms-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--wf-border);
	border-radius: var(--wf-radius-sm);
	background: var(--wf-white);
	font: 400 1rem/1.4 var(--wf-font-body);
	color: var(--wf-text-dark);
}

.wf-el-howler__form .wpforms-form input:focus-visible,
.wf-el-howler__form .wpforms-form select:focus-visible,
.wf-el-howler__form .wpforms-form textarea:focus-visible {
	outline: 2px solid var(--wf-cyan);
	outline-offset: 2px;
}

.wf-el-howler__form .wpforms-form .wpforms-field-label {
	font: 600 .9375rem/1.4 var(--wf-font-body);
	color: var(--wf-text-dark);
}

.wf-el-howler--band .wf-el-howler__form .wpforms-form .wpforms-field-label,
.wf-el-howler--band .wf-el-howler__form .wpforms-form .wpforms-field-description {
	color: var(--wf-text-offwhite);
}

.wf-el-howler__form .wpforms-form button.wpforms-submit,
.wf-el-howler__form .wpforms-form input.wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 13px 25px;
	border: 0;
	border-radius: var(--wf-radius-sm);
	background: linear-gradient(90deg, var(--wf-blue) 0%, var(--wf-cyan) 100%);
	color: var(--wf-white);
	font: 600 1rem/1 var(--wf-font-body);
	text-transform: uppercase;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background var(--wf-dur) var(--wf-ease), color var(--wf-dur) var(--wf-ease);
}

.wf-el-howler__form .wpforms-form button.wpforms-submit:hover,
.wf-el-howler__form .wpforms-form input.wpforms-submit:hover,
.wf-el-howler__form .wpforms-form button.wpforms-submit:focus-visible,
.wf-el-howler__form .wpforms-form input.wpforms-submit:focus-visible {
	background: var(--wf-gold);
	color: var(--wf-navy);
}

/* One-line email + submit wherever the form is a single field. */
@media (min-width: 640px) {
	.wf-el-howler__form .wpforms-form {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: center;
		gap: 12px;
	}

	.wf-el-howler__form .wpforms-form .wpforms-field-container {
		flex: 1 1 260px;
		min-width: 0;
		text-align: left;
	}

	.wf-el-howler__form .wpforms-form .wpforms-submit-container {
		flex: none;
		padding: 0;
	}
}