/*
Theme Name: ImpactFlow
Theme URI: https://impactflow.theme
Author: Alex Marek (Infinity Seeker)
Author URI: https://github.com/alexmarek
Description: A block-first WordPress master theme for small businesses and creative professionals. One codebase, many brands: each brand is a style variation, each section is a pattern. Built on the Twenty Twenty-Five structure, extended with a GSAP animation layer.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 2.2.0-alpha.18
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: impact-flow
Tags: full-site-editing, block-patterns, style-variations, blog, portfolio, business, wide-blocks, block-styles, editor-style, translation-ready
*/

/*
 * Frontend runtime CSS. theme.json is the design system; this file is
 * only for what theme.json cannot express. Keep it tiny.
 */

/* Top-level sections own their vertical rhythm through their padding.
   WordPress's root flow layout otherwise inserts blockGap between the
   header, page, footer and every full-width section, exposing a strip of
   the page background between solid colour fields. Keep blockGap for
   ordinary editorial content and remove it only at those boundaries. */
.wp-site-blocks > :where( header, main, footer, .wp-block-template-part ),
.wp-site-blocks .wp-block-post-content > .alignfull {
	margin-block-start: 0;
}

/* ---- Accessibility ----------------------------------------------------
   No custom skip link — WordPress core already injects one for block
   themes (targets `#wp--skip-link--target` on `<main>`, its own
   screen-reader-text styling). What's here is a low-specificity default
   focus ring for anything that doesn't already define its own
   (hero-slider nav, theme/lang switches keep their bespoke rings — a
   bare element selector never outranks a class one, regardless of
   source order). `:focus-visible` only shows for keyboard/programmatic
   focus, never a mouse click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: var(--wp--custom--shape--radius);
}

/* ---- Motion layer ----------------------------------------------------
   `.js-motion` is added by the motion script only after initialization, so no-JS and reduced-motion users see content immediately.
   assets/js/motion.js drives the reveal: with GSAP when present (it
   adds `.gsap-motion` and owns inline opacity/transform), otherwise via
   an IntersectionObserver that toggles `.is-revealed`. The personality
   token (`--wp--custom--motion--personality`) tunes timing per brand. */
/* Hidden until revealed. `.is-revealed` (added by motion.js — GSAP or
   the IntersectionObserver fallback) is the single source of truth, so
   a cleared inline style can never strand an element off-screen.
   Cover background/image layers are excluded from the stagger — they
   must keep their own opacity if the class lands on a Cover block. */
.js-motion .if-anim:not(.if-anim--stagger):not(.is-revealed) {
	opacity: 0;
	transform: translateY(48px);
}
.js-motion .if-anim--stagger:not(.is-revealed) .if-anim-child {
	opacity: 0;
	transform: translateY(32px);
}

/* No-GSAP fallback: CSS transitions carry the reveal. When GSAP is
   present it owns the frames, so the transition is left off. */
.js-motion:not(.gsap-motion) .if-anim {
	transition: opacity 1.2s ease-out, transform 1.2s ease-out;
	will-change: opacity, transform;
}
.js-motion:not(.gsap-motion) .if-anim--stagger .if-anim-child {
	transition: opacity 1.1s ease-out, transform 1.1s ease-out;
	transition-delay: calc(var(--if-anim-index, 0) * 0.13s);
}

@media (prefers-reduced-motion: reduce) {
	.js-motion .if-anim:not(.if-anim--stagger):not(.is-revealed),
	.js-motion .if-anim--stagger:not(.is-revealed) .if-anim-child {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---- Motion: scroll + accent ---------------------------------------
   `<html>` carries `.if-brand-<name>` (set in wp_head). motion.js drives
   the scroll effects on `.if-motion-parallax` / `.if-motion-pin` for the
   bold brands; these rules are the CSS side. */
.if-motion-parallax .wp-block-cover__image-background {
	will-change: transform;
}
.if-motion-pin {
	position: relative;
}

/* Accent — a small hover lift on the punchy brands only, motion
   permitting. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.if-brand-amplified .if-card,
	.if-brand-modern .if-card {
		transition: transform 0.18s ease, box-shadow 0.18s ease;
	}
	.if-brand-amplified .if-card:hover {
		transform: translateY(-4px);
	}
	.if-brand-modern .if-card:hover {
		transform: translateY(-3px);
	}
}

/* ---- Image heroes: text always light on the dark overlay -----------
   The overlay guarantees contrast, so keep copy light regardless of what
   image the editor auto-detects as "light". */
.if-hero-large .wp-block-cover__inner-container,
.if-hero-slider .wp-block-cover__inner-container {
	color: #fff;
}
.if-hero-large .wp-block-cover__inner-container :where(h1, h2, h3, p),
.if-hero-slider .wp-block-cover__inner-container :where(h1, h2, h3, p) {
	color: inherit;
}

/* Full-bleed background image, but the copy is held to the content
   container — aligned to the same left edge as the header, never
   spanning the whole page. */
.if-hero-large > .wp-block-cover__inner-container,
.if-hero-slider .wp-block-cover > .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1320px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1.5rem)
		var(--wp--style--root--padding-right, 1.5rem);
}
.if-hero-copy {
	max-width: 40rem;
	/* Left-aligned in the container — core's constrained-cover layout
	   centres children with `margin-inline: auto !important`, so match it. */
	margin-inline: 0 !important;
}
/* Slider: inset the copy far enough to clear the edge arrows at any width. */
.if-hero-slider .wp-block-cover > .wp-block-cover__inner-container {
	padding-inline: clamp(3.5rem, 5vw, 4.5rem);
}

/* ---- Inverted button (block style `is-style-if-inverted`) ----------
   Solid light chip, brand-colour label. Keeps the brand's own radius,
   typography and padding from theme.json. The image heroes apply it by
   default; available on any button for placement on a dark surface. */
.wp-block-button.is-style-if-inverted > .wp-block-button__link {
	background-color: #ffffff;
	border-color: #ffffff;
	/* The chip is always white (it sits on a dark photo overlay), so the
	   label needs the brand's *base* primary even in dark mode, where
	   `--wp--preset--color--primary` is lifted light. `--if-brand-ink`
	   is set per brand and never remapped. */
	color: var(--if-brand-ink, var(--wp--preset--color--primary));
}
.wp-block-button.is-style-if-inverted > .wp-block-button__link:hover,
.wp-block-button.is-style-if-inverted > .wp-block-button__link:focus {
	background-color: color-mix( in srgb, #ffffff 86%, transparent );
	border-color: color-mix( in srgb, #ffffff 86%, transparent );
	color: var(--if-brand-ink, var(--wp--preset--color--primary));
}

/* Per-brand canonical primary ("ink"), unaffected by dark-mode
   remapping — used by the inverted button and anywhere a fixed light
   chip needs a dark brand mark. */
.if-brand-amplified {
	--if-brand-ink: #a6121b;
}
.if-brand-clinical {
	--if-brand-ink: #2f7a6c;
}
.if-brand-elegant {
	--if-brand-ink: #16223d;
}
.if-brand-essential {
	--if-brand-ink: #a8501f;
}
.if-brand-gallery {
	--if-brand-ink: #1a1a1a;
}
.if-brand-modern {
	--if-brand-ink: #5b4fe9;
}

/* ---- Hero slider (see assets/js/hero-slider.js) ---------------------- */
.if-hero-slider.is-ready {
	position: relative;
	display: grid;
}

/* Sequential fade, not a crossfade: the outgoing slide fades out first,
   then the incoming fades in (its fade-in is delayed). Text slides never
   overlap / double up. */
.if-hero-slider.is-ready > .wp-block-cover {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	pointer-events: none;
}

.if-hero-slider.is-ready > .wp-block-cover.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease 0.3s, visibility 0s;
	pointer-events: auto;
}

/* First paint: show the opening slide with no transition. */
.if-hero-slider.is-instant > .wp-block-cover {
	transition: none;
}


.if-hero-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #111;
	cursor: pointer;
}
.if-hero-slider__nav--prev { left: clamp(0.5rem, 3vw, 2rem); }
.if-hero-slider__nav--next { right: clamp(0.5rem, 3vw, 2rem); }
.if-hero-slider__nav:hover { background: #fff; }
.if-hero-slider__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.if-hero-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(1rem, 4vh, 2rem);
	z-index: 2;
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}

.if-hero-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: width 0.3s ease, background 0.3s ease;
}
.if-hero-slider__dot[aria-current='true'] {
	width: 28px;
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.if-hero-slider.is-ready > .wp-block-cover { transition: none; }
}

/* ---- Hero — Contained: rounded surface panel ---------------------- */
.if-hero-contained {
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--shape--radius-lg);
}
@media (max-width: 781px) {
	.if-hero-contained {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}

/* ---- Hero — Text: bordered card + short accent rule -------------- */
.if-hero-text {
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
}
.if-hero-text > * + * {
	margin-top: var(--wp--preset--spacing--30);
}
.if-hero-text::before {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin: 0 auto var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--accent);
}

/* ---- Hero — Contained: image slot --------------------------------- */
.if-hero-media {
	margin: 0;
}
.if-hero-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--wp--custom--shape--radius);
}

/* ---- Hero — Editorial split -------------------------------------- */
.if-hero-editorial-split {
	padding-block: clamp( 2rem, 3.5vw, 3.5rem );
	overflow: clip;
}
.if-hero-editorial-split__layout {
	min-height: min( 38rem, calc( 100svh - 8rem ) );
	gap: clamp( 2.5rem, 6vw, 6rem );
}
.if-hero-editorial-split__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--wp--preset--spacing--50);
}
.if-hero-editorial-split__copy > * {
	max-width: 40rem;
}
.if-hero-editorial-split__copy .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--30);
}
.if-hero-editorial-split__facts {
	gap: 0;
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--outline);
}
.if-hero-editorial-split__facts p {
	flex: 1 1 12rem;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: color-mix( in srgb, currentColor 68%, transparent );
}
.if-hero-editorial-split__facts p + p {
	padding-left: var(--wp--preset--spacing--40);
	border-left: 1px solid var(--wp--preset--color--outline);
}
.if-hero-editorial-split__facts strong {
	color: var(--wp--preset--color--contrast);
}
.if-hero-editorial-split__media {
	position: relative;
}
.if-hero-editorial-split__media figure {
	height: 100%;
	margin: 0;
}
.if-hero-editorial-split__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 32rem;
	object-fit: cover;
	border-radius: var(--wp--custom--shape--radius-lg);
}
.if-hero-editorial-split__caption {
	position: absolute;
	right: -1px;
	bottom: -1px;
	max-width: 16rem;
	margin: 0;
	padding: 0.9rem 1.1rem;
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--shape--radius) 0 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
}

/* ---- Hero — Sequence --------------------------------------------- */
.if-hero-sequence {
	padding-block: clamp( 3rem, 7vw, 7rem );
	overflow: clip;
}
.if-hero-sequence__intro {
	display: grid;
	grid-template-columns: minmax( 0, 1.65fr ) minmax( 18rem, 0.7fr );
	gap: clamp( 2.5rem, 7vw, 7rem );
	align-items: end;
}
.if-hero-sequence__heading > *,
.if-hero-sequence__action > * {
	margin-top: 0;
}
.if-hero-sequence__heading h1 {
	max-width: 56rem;
}
.if-hero-sequence__gallery {
	display: grid;
	grid-template-columns: minmax( 0, 0.78fr ) minmax( 0, 1.25fr ) minmax( 0, 0.78fr );
	gap: clamp( 1rem, 2.5vw, 2rem );
	align-items: end;
	margin-top: var(--wp--preset--spacing--60);
}
.if-hero-sequence__stage {
	min-width: 0;
}
.if-hero-sequence__stage:nth-child( 1 ) {
	padding-bottom: clamp( 1rem, 5vw, 4rem );
}
.if-hero-sequence__stage:nth-child( 3 ) {
	padding-bottom: clamp( 2rem, 8vw, 7rem );
}
.if-hero-sequence__image {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--shape--radius);
}
.if-hero-sequence__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 500ms cubic-bezier( 0.2, 0.7, 0.2, 1 );
}
.if-hero-sequence__stage:nth-child( 2 ) .if-hero-sequence__image img {
	aspect-ratio: 5 / 6;
}
.if-hero-sequence__label {
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--outline);
	font-size: 0.85rem;
	font-weight: 700;
}
.if-hero-sequence__label p,
.if-hero-sequence__foot p {
	margin: 0;
}
.if-hero-sequence__number {
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.1em;
}
.if-hero-sequence__foot {
	gap: 0;
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--outline);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: color-mix( in srgb, currentColor 68%, transparent );
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.if-hero-sequence__stage:hover .if-hero-sequence__image img {
		transform: scale( 1.025 );
	}
}

.if-brand-clinical .if-hero-editorial-split__media img,
.if-brand-clinical .if-hero-sequence__image {
	border-radius: var(--wp--custom--shape--radius);
}

@media (max-width: 900px) {
	.if-hero-sequence__intro {
		grid-template-columns: minmax( 0, 1fr ) minmax( 15rem, 0.65fr );
		gap: var(--wp--preset--spacing--50);
	}
}

@media (max-width: 781px) {
	.if-hero-editorial-split {
		padding-block: var(--wp--preset--spacing--50);
	}
	.if-hero-editorial-split__layout {
		min-height: 0;
		gap: var(--wp--preset--spacing--40);
	}
	.if-hero-editorial-split__copy {
		padding-block: 0;
	}
	.if-hero-editorial-split__facts {
		margin-top: var(--wp--preset--spacing--40);
	}
	.if-hero-editorial-split__media img {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
	.if-hero-sequence__intro {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}
	.if-hero-sequence__action {
		max-width: 38rem;
	}
	.if-hero-sequence__gallery {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		align-items: start;
	}
	.if-hero-sequence__stage:nth-child( 1 ),
	.if-hero-sequence__stage:nth-child( 3 ) {
		padding-bottom: 0;
	}
	.if-hero-sequence__stage:nth-child( 2 ) {
		grid-column: 1 / -1;
		grid-row: 1;
	}
	.if-hero-sequence__stage:nth-child( 2 ) .if-hero-sequence__image img {
		aspect-ratio: 4 / 3;
	}
	.if-hero-sequence__stage:nth-child( 1 ),
	.if-hero-sequence__stage:nth-child( 3 ) {
		grid-row: 2;
	}
}

@media (max-width: 520px) {
	.if-hero-editorial-split__copy .wp-block-buttons {
		display: grid;
	}
	.if-hero-editorial-split__copy .wp-block-button,
	.if-hero-editorial-split__copy .wp-block-button__link {
		width: 100%;
	}
	.if-hero-editorial-split__facts {
		display: grid;
		gap: 1rem;
	}
	.if-hero-editorial-split__facts p + p {
		padding: 1rem 0 0;
		border-top: 1px solid var(--wp--preset--color--outline);
		border-left: 0;
	}
	.if-hero-editorial-split__caption {
		position: static;
		max-width: none;
		padding-inline: 0;
		background: transparent;
	}
	.if-hero-sequence__foot {
		display: grid;
		gap: 0.5rem;
	}
}

/* ---- Cards ---------------------------------------------------------
   One card = a core/group with class `if-card`. The active
   `is-style-if-card-*` style may sit on the card itself OR on an
   ancestor (the grid / section wrapper) — the :is() selectors below
   match both, so switching the style on a grid restyles every card in
   it. Every card ships every part; the style shows/hides the rest. */
.if-cards-section {
	margin-block: 0;
	padding-block: var(--wp--custom--section-gap);
	/* Tinted by default — Clinical / Gallery / Amplified / Modern.
	   Essential + Elegant invert to plain base below. */
	background: var(--wp--preset--color--surface);
}
.if-cards-section > .if-cards-grid,
.if-cards-section > .if-cards-list {
	margin-top: var(--wp--preset--spacing--40);
}

/* A plain single-column list — for horizontal cards (post / event
   lists). Not a grid, so it always stays one column. */
.if-cards-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

/* The grid block sets a fixed column count; keep it usable on small
   screens no matter what count the editor chose. */
@media (max-width: 900px) {
	.if-cards-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 560px) {
	.if-cards-grid {
		grid-template-columns: 1fr !important;
	}
}

.if-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--wp--custom--shape--radius-lg);
	overflow: hidden;
}

.if-card__media {
	margin: 0;
}
.if-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.if-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1 1 auto;
	padding: var(--wp--preset--spacing--40);
}

.if-card__title {
	margin: 0;
}
.if-card__subtitle {
	color: color-mix( in srgb, currentColor 65%, transparent );
}
.if-card__text {
	margin-bottom: 0;
}

.if-card__actions {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

/* The "Read more" link only belongs to the Link and Icon styles — every
   other style has a button, so keep it hidden by default (no duplicate
   call to action, whatever style is applied). */
.if-card__link {
	display: none;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}
.is-style-if-card-link .if-card__link,
.is-style-if-card-icon .if-card__link {
	display: block;
}
.if-card__link a {
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}
.if-card__link a:hover {
	text-decoration: underline;
}

/* -- Full: image, all text, button ------------------------------------ */
:is(.if-card.is-style-if-card-full, .is-style-if-card-full .if-card) {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--outline);
}

/* -- Link: no button; the whole card is the link -------------------- */
:is(.if-card.is-style-if-card-link, .is-style-if-card-link .if-card) {
	position: relative;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--outline);
	transition: border-color 0.15s ease;
}
:is(.if-card.is-style-if-card-link, .is-style-if-card-link .if-card):hover {
	border-color: var(--wp--preset--color--primary);
}
:is(.if-card.is-style-if-card-link, .is-style-if-card-link .if-card) .if-card__actions {
	display: none;
}
:is(.if-card.is-style-if-card-link, .is-style-if-card-link .if-card) .if-card__link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* -- Icon: icon + title only; the whole card is the link ------------ */
:is(.if-card.is-style-if-card-icon, .is-style-if-card-icon .if-card) {
	position: relative;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--outline);
	transition: border-color 0.15s ease;
}
:is(.if-card.is-style-if-card-icon, .is-style-if-card-icon .if-card):hover {
	border-color: var(--wp--preset--color--primary);
}
:is(.if-card.is-style-if-card-icon, .is-style-if-card-icon .if-card) .if-card__eyebrow,
:is(.if-card.is-style-if-card-icon, .is-style-if-card-icon .if-card) .if-card__subtitle,
:is(.if-card.is-style-if-card-icon, .is-style-if-card-icon .if-card) .if-card__text,
:is(.if-card.is-style-if-card-icon, .is-style-if-card-icon .if-card) .if-card__actions {
	display: none;
}
:is(.if-card.is-style-if-card-icon, .is-style-if-card-icon .if-card) .if-card__body {
	gap: 0.75rem;
}
:is(.if-card.is-style-if-card-icon, .is-style-if-card-icon .if-card) .if-card__media {
	width: 56px;
}
:is(.if-card.is-style-if-card-icon, .is-style-if-card-icon .if-card) .if-card__media img {
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: var(--wp--custom--shape--radius);
}
:is(.if-card.is-style-if-card-icon, .is-style-if-card-icon .if-card) .if-card__link {
	margin: 0;
	padding: 0;
}
:is(.if-card.is-style-if-card-icon, .is-style-if-card-icon .if-card) .if-card__link a {
	position: absolute;
	inset: 0;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 110%;
}

/* -- Text: no image; accent rule above the copy -------------------- */
:is(.if-card.is-style-if-card-text, .is-style-if-card-text .if-card) {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--surface-contrast);
	border: 1px solid transparent;
}
:is(.if-card.is-style-if-card-text, .is-style-if-card-text .if-card) .if-card__media,
:is(.if-card.is-style-if-card-text, .is-style-if-card-text .if-card) .if-card__link {
	display: none;
}
:is(.if-card.is-style-if-card-text, .is-style-if-card-text .if-card) .if-card__body {
	padding: var(--wp--preset--spacing--50);
}
:is(.if-card.is-style-if-card-text, .is-style-if-card-text .if-card) .if-card__body::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--accent);
}

/* -- Horizontal: media left, meta + title + text. Whole card links.
   For post and event lists. -------------------------------------------- */
:is(.if-card.is-style-if-card-horizontal, .is-style-if-card-horizontal .if-card) {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 38%) 1fr;
	align-items: stretch;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--outline);
	transition: border-color 0.15s ease;
}
:is(.if-card.is-style-if-card-horizontal, .is-style-if-card-horizontal .if-card):hover {
	border-color: var(--wp--preset--color--primary);
}
:is(.if-card.is-style-if-card-horizontal, .is-style-if-card-horizontal .if-card) .if-card__media {
	position: relative;
	min-height: 160px;
	border-right: 1px solid var(--wp--preset--color--outline);
}
:is(.if-card.is-style-if-card-horizontal, .is-style-if-card-horizontal .if-card) .if-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}
:is(.if-card.is-style-if-card-horizontal, .is-style-if-card-horizontal .if-card) .if-card__body {
	justify-content: center;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
:is(.if-card.is-style-if-card-horizontal, .is-style-if-card-horizontal .if-card) .if-card__eyebrow {
	color: var(--wp--preset--color--primary);
}
:is(.if-card.is-style-if-card-horizontal, .is-style-if-card-horizontal .if-card) .if-card__subtitle,
:is(.if-card.is-style-if-card-horizontal, .is-style-if-card-horizontal .if-card) .if-card__actions {
	display: none;
}
:is(.if-card.is-style-if-card-horizontal, .is-style-if-card-horizontal .if-card) .if-card__link {
	display: block;
	margin: 0;
	padding: 0;
}
:is(.if-card.is-style-if-card-horizontal, .is-style-if-card-horizontal .if-card) .if-card__link a {
	position: absolute;
	inset: 0;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 110%;
}
@media (max-width: 600px) {
	:is(.if-card.is-style-if-card-horizontal, .is-style-if-card-horizontal .if-card) {
		grid-template-columns: 1fr;
	}
	:is(.if-card.is-style-if-card-horizontal, .is-style-if-card-horizontal .if-card) .if-card__media {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--outline);
	}
	:is(.if-card.is-style-if-card-horizontal, .is-style-if-card-horizontal .if-card) .if-card__media img {
		aspect-ratio: 3 / 2;
		min-height: 0;
	}
}

/* -- Quote: testimonial on the brand colour ------------------------- */
:is(.if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card) {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	border: 1px solid var(--wp--preset--color--primary);
}
:is(.if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card) .if-card__eyebrow,
:is(.if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card) .if-card__actions,
:is(.if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card) .if-card__link {
	display: none;
}
/* The Quote card is type-only — the placeholder avatar reads as noise and
   most testimonials ship without a photo. Hidden by default; delete the
   image block in the card, or (to use a real avatar) add a custom class
   `if-card__media--show` to it. */
:is(.if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card) .if-card__media {
	display: none;
}
:is(.if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card) .if-card__media.if-card__media--show {
	order: 2;
	display: block;
	width: 44px;
	margin: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
}
:is(.if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card) .if-card__media.if-card__media--show img {
	aspect-ratio: 1;
	border-radius: 9999px;
	object-fit: cover;
}
:is(.if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card) .if-card__body {
	order: 1;
	padding: var(--wp--preset--spacing--50);
}
:is(.if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card) .if-card__body::before {
	content: "\201C";
	order: -2;
	display: block;
	font-family: var(--wp--preset--font-family--heading), serif;
	font-size: 3.5rem;
	line-height: 0.5;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.5rem;
}
:is(.if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card) .if-card__text {
	order: -1;
	font-size: 1.25rem;
	line-height: 1.5;
	margin-bottom: var(--wp--preset--spacing--30);
}
:is(.if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card) .if-card__title {
	font-size: 1rem;
}
:is(.if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card) .if-card__subtitle {
	color: color-mix( in srgb, currentColor 80%, transparent );
}

/* -- Card on a "Loud" fill (styles/sections/section-loud.json) ------
   The accent eyebrow is low-contrast on the brand-colour fill, so take
   the card's own (contrasting) text colour instead. */
.is-style-section-loud .if-card__eyebrow {
	color: var(--wp--preset--color--primary-contrast) !important;
}

/* ---- Sliders --------------------------------------------------------
   Four patterns (slider-carousel / -logos / -testimonials / -gallery).
   Everything works with no JS; sliders.js adds arrows, dots, a counter,
   a thumbnail strip and doubles the marquee track. Style-agnostic:
   semantic slugs + var:custom shape tokens only. */
.if-slider-section {
	position: relative;
	margin-block: 0;
	padding-block: var(--wp--custom--section-gap);
}
.if-slider-section > .wp-block-heading {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Injected prev / next group (carousel), pinned to the section's top-right. */
.if-slider-nav {
	position: absolute;
	top: var(--wp--preset--spacing--60);
	right: max(
		var(--wp--style--root--padding-right, 0px),
		calc( ( 100% - var(--wp--style--global--wide-size) ) / 2 )
	);
	display: flex;
	gap: 0.5rem;
}
.if-slider-nav__btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: border-color 0.15s ease, opacity 0.15s ease;
}
.if-slider-nav__btn:hover {
	border-color: var(--wp--preset--color--primary);
}
.if-slider-nav__btn:disabled {
	opacity: 0.35;
	cursor: default;
}
/* impactflow-skins.json calls out arrow_background as "muted_bg" for
   Amplified specifically — every other skin gets the default "white"
   (i.e. this skin's own `base`), which for every other skin literally
   is white/off-white and needs no override. Amplified's `base` is
   near-black (#0C0C0D) same as the page itself, so the arrow's own
   backdrop would otherwise be indistinguishable from what's behind
   it — `surface` (#17171A) is only one step lighter, enough to read
   as a distinct button rather than just a border floating in place. */
.if-brand-amplified .if-slider-nav__btn {
	background: var(--wp--preset--color--surface);
}
@media (max-width: 600px) {
	.if-slider-nav {
		position: static;
		margin-bottom: var(--wp--preset--spacing--30);
	}
}

/* -- 01 · Content carousel ----------------------------------------- */
.if-slider-carousel {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-block: 4px 8px;
}
.if-slider-carousel::-webkit-scrollbar {
	display: none;
}
.if-slider-carousel > .if-slide-card {
	margin-block: 0;
	scroll-snap-align: start;
	flex: 0 0 auto;
	width: min(82%, 320px);
}
@media (min-width: 700px) {
	.if-slider-carousel > .if-slide-card {
		width: min(44%, 320px);
	}
}
@media (min-width: 1000px) {
	.if-slider-carousel > .if-slide-card {
		width: min(31%, 340px);
	}
}
.if-slide-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.if-slide-card:hover {
	border-color: var(--wp--preset--color--primary);
}
.if-slide-card__media {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--outline);
}
.if-slide-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.if-slide-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--wp--preset--spacing--40);
}
.if-slide-card__meta {
	color: var(--wp--preset--color--primary);
	margin: 0;
}
.if-slide-card__title {
	margin: 0;
}
.if-slide-card__text {
	margin: 0;
	color: color-mix( in srgb, currentColor 66%, transparent );
}

/* -- 02 · Logo marquee ------------------------------------------- */
.if-logo-marquee {
	margin-block: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--40);
	border-block: 1px solid var(--wp--preset--color--outline);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--surface-contrast);
	overflow: hidden;
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent );
}
.if-logo-marquee__track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 0;
}
.if-logo-marquee.is-animating .if-logo-marquee__track {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	animation: if-marquee var( --if-marquee-duration, 34s ) linear infinite;
}
.if-logo-marquee.is-animating:hover .if-logo-marquee__track {
	animation-play-state: paused;
}
@keyframes if-marquee {
	to {
		transform: translateX( -50% );
	}
}
.if-logo-marquee__item {
	flex: 0 0 auto;
	width: 190px;
	height: 40px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --wp--preset--font-family--heading ), sans-serif;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
	opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
	.if-logo-marquee.is-animating .if-logo-marquee__track {
		animation: none;
	}
}

/* -- 03 · Testimonial slider ----------------------------------- */
.if-quote-slider {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--surface-contrast);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	margin-block: var(--wp--preset--spacing--50);
}
.if-quote-slider__slide {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
}
.if-quote-slider.is-ready .if-quote-slider__slide {
	display: none;
}
.if-quote-slider.is-ready .if-quote-slider__slide.is-active {
	display: flex;
}
.if-quote-slider.is-ready .if-quote-slider__slide + .if-quote-slider__slide {
	margin-top: 0;
}
.if-quote-slider__slide::before {
	content: "\201C";
	font-family: var( --wp--preset--font-family--heading ), serif;
	font-size: 3.75rem;
	line-height: 0.5;
	color: var(--wp--preset--color--accent);
	margin-bottom: 1rem;
}
.if-quote-slider__quote {
	margin: 0 0 1.5rem;
	line-height: 1.45;
	text-wrap: pretty;
}
.if-quote-slider__cite {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
}
.if-quote-slider__avatar {
	width: 48px;
	flex: 0 0 auto;
	margin: 0;
}
.if-quote-slider__avatar img {
	width: 48px;
	height: 48px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 9999px;
}
.if-quote-slider__who {
	text-align: left;
}
.if-quote-slider__name {
	margin: 0;
	font-weight: 700;
}
.if-quote-slider__role {
	margin: 0;
	font-size: 0.9rem;
	color: color-mix( in srgb, currentColor 65%, transparent );
}
.if-quote-slider__live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
}
.if-quote-slider__dots {
	display: flex;
	gap: 0.6rem;
	justify-content: center;
	margin-top: 1.75rem;
}
.if-quote-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: var(--wp--preset--color--outline);
	cursor: pointer;
	transition: width 0.2s ease, background 0.2s ease;
}
.if-quote-slider__dot[aria-current="true"] {
	width: 32px;
	background: var(--wp--preset--color--primary);
}

/* -- 04 · Gallery slider ------------------------------------- */
.if-gallery-slider {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin-block: var(--wp--preset--spacing--50);
}
.if-gallery-slider__stage {
	position: relative;
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.if-gallery-slider.is-ready .if-gallery-slider__stage {
	aspect-ratio: 16 / 9;
}
.if-gallery-slider__shot {
	margin: 0;
}
.if-gallery-slider.is-ready .if-gallery-slider__shot {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.if-gallery-slider.is-ready .if-gallery-slider__shot.is-active {
	opacity: 1;
}
.if-gallery-slider__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.if-gallery-slider.is-ready .if-gallery-slider__shot figcaption {
	display: none;
}
.if-gallery-slider__counter {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 0.45rem 0.75rem;
	border-radius: var(--wp--custom--shape--radius);
}
.if-gallery-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--shape--radius-lg);
	background: rgba( 255, 255, 255, 0.94 );
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}
.if-gallery-slider__arrow--prev {
	left: 1rem;
}
.if-gallery-slider__arrow--next {
	right: 1rem;
}
.if-gallery-slider__caption {
	margin: 0;
	font-size: 0.9rem;
	color: color-mix( in srgb, currentColor 66%, transparent );
}
.if-gallery-slider__strip {
	display: flex;
	gap: 0.6rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}
.if-gallery-slider__strip::-webkit-scrollbar {
	display: none;
}
.if-gallery-slider__thumb {
	flex: 0 0 auto;
	width: 96px;
	height: 64px;
	scroll-snap-align: start;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--shape--radius);
	background: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--outline);
	color: var(--wp--preset--color--primary);
	font-family: monospace;
	font-size: 0.8rem;
	opacity: 0.7;
	cursor: pointer;
	transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.if-gallery-slider__thumb.is-active {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
}

/* ---- Pricing -------------------------------------------------------
   Three patterns (pricing-tiers / -table / -list). Style-agnostic:
   semantic slugs + var:custom shape tokens. The featured treatment, the
   grids and the leaders are all CSS; pricing.js only adds the optional
   monthly / annual toggle. */
.if-pricing-section {
	position: relative;
	margin-block: 0;
	padding-block: var(--wp--custom--section-gap);
}

/* -- Shared: section head + billing toggle (variant 1) -------------- */
.if-pricing-head {
	max-width: 660px;
	margin-inline: auto;
	text-align: center;
}
.if-pricing-head__eyebrow {
	margin-bottom: 0.75rem;
}
.if-pricing-head__sub {
	margin: 0.75rem auto 0;
	color: color-mix( in srgb, currentColor 66%, transparent );
}
.if-pricing-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	flex-wrap: wrap;
	margin-top: var(--wp--preset--spacing--40);
}
.if-pricing-toggle__shell {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 9999px;
}
.if-pricing-toggle__seg {
	padding: 0.55rem 1.25rem;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}
.if-pricing-toggle__seg[aria-pressed="true"] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
}
.if-pricing-toggle__savings {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--shape--radius);
	padding: 0.35rem 0.7rem;
}

/* -- 01 · Tiered cards -------------------------------------------- */
.if-pricing-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 260px, 100% ), 1fr ) );
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	margin-top: var(--wp--preset--spacing--50);
}
.if-price-tier {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
}
.if-price-tier--featured {
	position: relative;
	z-index: 1;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border: 2px solid var(--wp--preset--color--primary);
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.1 );
}
.if-price-tier__badge {
	align-self: flex-start;
	margin: 0 0 1rem;
	padding: 0.35rem 0.7rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	border-radius: var(--wp--custom--shape--radius);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}
.if-price-tier__name {
	margin: 0 0 0.75rem;
}
.if-price-tier__pricing {
	width: 100%;
	margin-bottom: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--outline);
}
.if-price-tier__price {
	margin: 0;
	color: color-mix( in srgb, currentColor 66%, transparent );
}
.if-price-tier__price strong {
	margin-right: 0.35rem;
	font-family: var( --wp--preset--font-family--heading ), sans-serif;
	font-size: 2.25rem;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}
.if-price-tier--featured .if-price-tier__price strong {
	font-size: 2.75rem;
}
.if-price-tier__price--annual {
	display: none;
}
.if-pricing-tiers.is-annual .if-price-tier__price--monthly {
	display: none;
}
.if-pricing-tiers.is-annual .if-price-tier__price--annual {
	display: block;
}
.if-price-tier__features {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-bottom: var(--wp--preset--spacing--40);
}
.if-price-tier__feature {
	position: relative;
	margin: 0;
	padding-left: 1.5rem;
	font-size: 0.95rem;
	line-height: 1.5;
	color: color-mix( in srgb, currentColor 72%, transparent );
}
.if-price-tier__feature::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}
.if-price-tier__cta {
	width: 100%;
	margin-top: auto;
}
.if-price-tier__cta .wp-block-button,
.if-price-tier__cta .wp-block-button__link {
	width: 100%;
}

/* -- 02 · Comparison table -------------------------------------- */
.if-pricing-table__scroll {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
}
.if-pricing-table {
	min-width: 720px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.if-pricing-row {
	display: grid;
	grid-template-columns: minmax( 160px, 1.4fr ) repeat( 3, minmax( 110px, 1fr ) );
}
.if-pricing-row + .if-pricing-row {
	border-top: 1px solid var(--wp--preset--color--outline);
}
.if-pricing-row:nth-of-type( even ):not( .if-pricing-row--head ) {
	background: color-mix( in srgb, var(--wp--preset--color--outline) 22%, transparent );
}
.if-pricing-row--head {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--outline);
}
.if-pricing-cell {
	margin: 0;
	padding: 0.9rem 1.25rem;
	display: flex;
	align-items: center;
	font-size: 0.92rem;
}
.if-pricing-cell:not( .if-pricing-cell--label ):not( .if-pricing-cell--corner ) {
	border-left: 1px solid var(--wp--preset--color--outline);
	color: color-mix( in srgb, currentColor 66%, transparent );
}
.if-pricing-cell--corner {
	align-items: flex-end;
}
.if-pricing-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: 1.25rem 1.1rem;
	border-left: 1px solid var(--wp--preset--color--outline);
}
.if-pricing-col--featured {
	background: var(--wp--preset--color--base);
	box-shadow: inset 0 3px 0 0 var(--wp--preset--color--primary);
}
.if-pricing-cell--featured {
	background: color-mix( in srgb, var(--wp--preset--color--primary) 7%, transparent );
}
.if-pricing-col__badge {
	margin: 0;
	padding: 0.25rem 0.55rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	border-radius: var(--wp--custom--shape--radius);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}
.if-pricing-col__name {
	margin: 0;
}
.if-pricing-col__price {
	margin: 0 0 0.35rem;
	font-family: var( --wp--preset--font-family--heading ), sans-serif;
	font-size: 1.6rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.if-pricing-col__period {
	display: block;
	font-family: var( --wp--preset--font-family--body ), sans-serif;
	font-size: 0.8rem;
	font-weight: 400;
	color: color-mix( in srgb, currentColor 60%, transparent );
}
.if-pricing-col .wp-block-buttons {
	width: 100%;
	margin-top: 0.25rem;
}
.if-pricing-col .wp-block-button,
.if-pricing-col .wp-block-button__link {
	width: 100%;
}

/* -- 03 · Price list ------------------------------------------- */
.if-price-list {
	max-width: 820px;
}
.if-price-list__group {
	margin-bottom: var(--wp--preset--spacing--50);
}
.if-price-list__group-title {
	margin: 0 0 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.if-price-list__row {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	padding: 0.9rem 0.25rem;
	border-bottom: 1px solid var(--wp--preset--color--outline);
}
.if-price-list__main {
	flex: 0 1 auto;
	min-width: 0;
}
.if-price-list__name {
	margin: 0;
	font-weight: 500;
}
.if-price-list__meta {
	margin: 0.2rem 0 0;
	font-size: 0.82rem;
	color: color-mix( in srgb, currentColor 62%, transparent );
}
.if-price-list__leader {
	flex: 1 1 auto;
	min-width: 20px;
	margin: 0;
	align-self: flex-end;
	transform: translateY( -0.3rem );
	border-bottom: 1px dotted color-mix( in srgb, currentColor 55%, transparent );
}
.if-price-list__price {
	flex: 0 0 auto;
	margin: 0;
	font-family: var( --wp--preset--font-family--heading ), sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: -0.01em;
}
.if-price-list__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
}
.if-price-list__foot-text {
	flex: 1 1 320px;
	margin: 0;
	font-size: 0.95rem;
	color: color-mix( in srgb, currentColor 66%, transparent );
}
.if-price-list__foot .wp-block-buttons {
	flex: 0 0 auto;
	margin: 0;
}

/* ==== Section library — batch 1 ====================================
   CTA, Steps, Feature grid, Testimonials wall, Logos & trust.
   Style-agnostic: semantic slugs + var:custom shape tokens only.
   Desktop-first; the responsive rules are minimal until the mobile
   designs land. */

.if-cta,
.if-steps,
.if-feature,
.if-quotes,
.if-logos {
	margin-block: var(--wp--custom--section-gap);
}
.if-steps__head,
.if-feature__head,
.if-quotes__head {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Flow-layout blockGap lands as `margin-block-start` on every child after
   the first. Any ImpactFlow container that CSS turns into a flex row or a
   grid must clear it, or row 1 sits 1 blockGap out of line and flex
   columns double their spacing. One place, all of them. */
.if-steps__row > *,
.if-steps__flow > *,
.if-steps__grid > *,
.if-steps__list > *,
.if-feature__grid > *,
.if-feature__checklist > *,
.if-quotes__grid > *,
.if-quotes-featured > *,
.if-quotes__cite > *,
.if-quotes__who > *,
.if-logos__track > *,
.if-logos-split > *,
.if-logos-stats > *,
.if-logos__cells > *,
.if-cta-split > *,
.if-cta-minimal > *,
.if-cta-card > *,
.if-cta__actions > *,
.if-pricing-grid > *,
.if-pricing-row > *,
.if-price-tier__features > *,
.if-price-list__row > * {
	margin-block: 0;
}

/* -- CTA ------------------------------------------------------------ */
.if-cta-fullbleed {
	border-radius: var(--wp--custom--shape--radius-lg);
	overflow: hidden;
}
.if-cta-fullbleed > .wp-block-cover__inner-container {
	color: #fff;
}
.if-cta-fullbleed > .wp-block-cover__inner-container :where(h2, p) {
	color: inherit;
}
.if-cta__copy {
	max-width: 40rem;
	margin-inline: auto;
}
.if-cta-fullbleed .if-cta__actions {
	justify-content: center;
}
.if-cta-split,
.if-cta-minimal,
.if-cta-card {
	border-radius: var(--wp--custom--shape--radius-lg);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}
.if-cta-split,
.if-cta-minimal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	flex-wrap: wrap;
}
.if-cta-split .if-cta__copy,
.if-cta-minimal .if-cta__copy {
	max-width: 40rem;
	margin-inline: 0;
}
.if-cta-split .if-cta__copy > *,
.if-cta-minimal .if-cta__copy > * {
	margin: 0;
}
.if-cta-minimal {
	border: 1px solid var(--wp--preset--color--outline);
}
.if-cta-card {
	background: var(--wp--preset--color--surface);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--60);
}
.if-cta__icon {
	width: 56px;
	margin: 0;
}
.if-cta__icon img {
	width: 100%;
}
.if-cta-card .if-cta__actions,
.if-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}
.if-cta-card .if-cta__actions {
	justify-content: center;
}

/* -- Steps -------------------------------------------------------- */
.if-steps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	border-radius: 9999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	font-weight: 700;
	font-family: var( --wp--preset--font-family--heading ), sans-serif;
}
.if-steps__title {
	margin: 0;
}
.if-steps__text {
	margin: 0;
	color: color-mix( in srgb, currentColor 68%, transparent );
}

/* 01 horizontal */
.if-steps-horizontal .if-steps__row {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: var(--wp--preset--spacing--50);
}
.if-steps-horizontal .if-steps__row:where( :has( > .if-steps__item:only-child ) ) {
	grid-template-columns: minmax( 0, 1fr );
}
.if-steps-horizontal .if-steps__row:where( :has( > .if-steps__item:nth-child( 2 ):last-child ) ) {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.if-steps-horizontal .if-steps__row:where( :has( > .if-steps__item:nth-child( 3 ):last-child ) ) {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}
.if-steps-horizontal .if-steps__item {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	position: relative;
}
.if-steps-horizontal .if-steps__item::before {
	content: "";
	position: absolute;
	top: 1.25rem;
	left: calc( 2.5rem + var(--wp--preset--spacing--30) );
	right: calc( -1 * var(--wp--preset--spacing--50) );
	height: 2px;
	background: var(--wp--preset--color--outline);
}
.if-steps-horizontal .if-steps__item:last-child::before {
	display: none;
}

/* 02 timeline */
.if-steps-timeline .if-steps__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	max-width: 44rem;
}
.if-steps-timeline .if-steps__item {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: var(--wp--preset--spacing--40);
	position: relative;
}
.if-steps-timeline .if-steps__item::before {
	content: "";
	position: absolute;
	left: calc( 1.25rem - 1px );
	top: 2.5rem;
	bottom: calc( -1 * var(--wp--preset--spacing--40) );
	width: 2px;
	background: var(--wp--preset--color--outline);
}
.if-steps-timeline .if-steps__item:last-child::before {
	display: none;
}
.if-steps-timeline .if-steps__body > * {
	margin: 0;
}

/* 03 icon cards */
.if-steps-cards .if-steps__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var(--wp--preset--spacing--40);
}
.if-steps__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
}
.if-steps__icon {
	width: 44px;
	margin: 0 0 0.5rem;
}
.if-steps__icon img {
	width: 100%;
}
.if-steps__kicker {
	margin: 0;
}

/* 04 big numbers */
.if-steps-numbers .if-steps__flow {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var(--wp--preset--spacing--50);
}
.if-steps-numbers .if-steps__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.if-steps__digit {
	margin: 0;
	font-family: var( --wp--preset--font-family--heading ), sans-serif;
	font-size: 3.5rem;
	line-height: 1;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.if-steps-numbers .if-steps__item::after {
	content: "\2192";
	position: absolute;
	top: 1rem;
	right: calc( -0.5 * var(--wp--preset--spacing--50) - 0.4em );
	color: var(--wp--preset--color--outline);
	font-size: 1.5rem;
}
.if-steps-numbers .if-steps__item:last-child::after {
	display: none;
}

/* -- Feature grid ------------------------------------------------ */
.if-feature-grid .if-feature__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.if-feature__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}
.if-feature__icon {
	width: 44px;
	margin: 0 0 0.25rem;
}
.if-feature__icon img {
	width: 100%;
}
.if-feature__title {
	margin: 0;
}
.if-feature__text {
	margin: 0;
	color: color-mix( in srgb, currentColor 68%, transparent );
}
.if-feature-split .if-feature__media {
	margin: 0;
	border-radius: var(--wp--custom--shape--radius-lg);
	overflow: hidden;
}
.if-feature-split .if-feature__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.if-feature__checklist {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin-top: var(--wp--preset--spacing--30);
}
.if-feature__check {
	position: relative;
	margin: 0;
	padding-left: 1.75rem;
	line-height: 1.5;
}
.if-feature__check::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0.05em;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

/* -- Testimonials wall ----------------------------------------- */
.if-quotes__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var(--wp--preset--spacing--40);
}
.if-quotes__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
}
.if-quotes__quote {
	margin: 0;
	line-height: 1.55;
}
.if-quotes__cite {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: auto;
}
.if-quotes__avatar {
	width: 40px;
	flex: 0 0 auto;
	margin: 0;
}
.if-quotes__avatar img {
	width: 40px;
	height: 40px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 9999px;
}
.if-quotes__name {
	margin: 0;
	font-weight: 600;
}
.if-quotes__role {
	margin: 0;
	font-size: 0.85rem;
	color: color-mix( in srgb, currentColor 62%, transparent );
}
.if-quotes__stars {
	margin: 0;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--accent);
}

/* 02 rated — tinted, no avatar */
.if-quotes-rated .if-quotes__card {
	background: var(--wp--preset--color--surface);
	border-color: transparent;
}

/* 03 text wall */
.if-quotes-text .if-quotes__cols {
	columns: 2;
	column-gap: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--40);
}
.if-quotes-text .if-quotes__entry {
	break-inside: avoid;
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--outline);
}
.if-quotes-text .if-quotes__quote {
	margin: 0 0 0.5rem;
}
.if-quotes__attr {
	margin: 0;
	font-size: 0.85rem;
	color: color-mix( in srgb, currentColor 62%, transparent );
}

/* 04 featured */
.if-quotes-featured {
	display: grid;
	grid-template-columns: minmax( 0, 1.2fr ) minmax( 0, 1fr );
	gap: var(--wp--preset--spacing--40);
	/* stretch, not start: the small-card grid on the right is usually
	   taller than the hero quote, especially on Essential/Elegant's
	   "plain" hero (border-block, no icon, minimal padding) — start
	   left dead whitespace under the shorter card instead of a
	   balanced two-column band. */
	align-items: stretch;
}
.if-quotes__hero {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--shape--radius-lg);
}
/* Pushes the citation to the bottom edge when stretch gives the hero
   more height than its content needs, instead of leaving the gap
   between the quote and the citation. */
.if-quotes-featured .if-quotes__cite {
	margin-top: auto;
}
.if-quotes__hero .if-quotes__quote {
	color: inherit;
}
.if-quotes__mark {
	margin: 0 0 0.5rem;
	font-family: var( --wp--preset--font-family--heading ), serif;
	font-size: 3.5rem;
	line-height: 0.4;
	color: var(--wp--preset--color--accent);
}
.if-quotes-featured .if-quotes__grid {
	grid-template-columns: repeat( 2, 1fr );
}
.if-quotes-featured .if-quotes__card {
	gap: 0.4rem;
	background: var(--wp--preset--color--surface);
	border-color: transparent;
}

/* -- Logos & trust -------------------------------------------- */
.if-logos__label {
	color: color-mix( in srgb, currentColor 75%, transparent );
	margin: 0 0 var(--wp--preset--spacing--40);
}
.if-logos__track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}
.if-logos__item {
	margin: 0;
	font-family: var( --wp--preset--font-family--heading ), sans-serif;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	opacity: 0.65;
	white-space: nowrap;
}
.if-logos-split {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	flex-wrap: wrap;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
}
.if-logos-split .if-logos__label {
	margin: 0;
	flex: 0 0 auto;
}
.if-logos-split .if-logos__track {
	justify-content: flex-end;
	flex: 1 1 auto;
}

/* stats bar */
.if-logos-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--shape--radius-lg);
}
.if-logos__stat {
	flex: 1 1 140px;
	padding-inline: var(--wp--preset--spacing--40);
}
.if-logos__stat + .if-logos__stat {
	border-left: 1px solid color-mix( in srgb, currentColor 30%, transparent );
}
.if-logos__num {
	margin: 0;
	font-family: var( --wp--preset--font-family--heading ), sans-serif;
	font-size: 2.25rem;
	line-height: 1;
	font-weight: 700;
}
.if-logos__stat-label {
	margin: 0.4rem 0 0;
	font-size: 0.9rem;
	opacity: 0.85;
}

/* logo grid */
.if-logos-grid .if-logos__cells {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
	overflow: hidden;
}
.if-logos__cell {
	margin: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	text-align: center;
	font-family: var( --wp--preset--font-family--heading ), sans-serif;
	letter-spacing: 0.02em;
	opacity: 0.7;
	border-top: 1px solid var(--wp--preset--color--outline);
	border-left: 1px solid var(--wp--preset--color--outline);
}
.if-logos-grid .if-logos__cells > .if-logos__cell:nth-child(-n+4) {
	border-top: 0;
}
.if-logos-grid .if-logos__cells > .if-logos__cell:nth-child(4n+1) {
	border-left: 0;
}

/* Credentials — Associations */
.if-credentials-associations {
	padding-block: var(--wp--preset--spacing--70);
}
.if-credentials-associations__head {
	display: grid;
	grid-template-columns: minmax( 0, 1.08fr ) minmax( 20rem, 0.72fr );
	gap: clamp( 3rem, 8vw, 8rem );
	align-items: end;
	margin-bottom: var(--wp--preset--spacing--60);
}
.if-credentials-associations__head > *,
.if-credentials-associations__title > *,
.if-credentials-associations__intro > *,
.if-credentials-associations__grid > *,
.if-credentials-associations__item > *,
.if-credentials-associations__body > *,
.if-credentials-associations__note > * {
	margin-block: 0;
}
.if-credentials-associations__title {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}
.if-credentials-associations__title h2 {
	max-width: 14ch;
}
.if-credentials-associations__intro {
	display: flex;
	max-width: 38rem;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	color: color-mix( in srgb, currentColor 72%, transparent );
}
.if-credentials-associations__lead {
	font-size: clamp( 1.12rem, 1.6vw, 1.3rem );
	font-weight: 650;
	color: var(--wp--preset--color--contrast);
}
.if-credentials-associations__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	border-top: 1px solid var(--wp--preset--color--outline);
}
.if-credentials-associations__item {
	display: grid;
	grid-template-columns: 5.5rem minmax( 0, 1fr );
	gap: clamp( 1.25rem, 3vw, 2.25rem );
	min-width: 0;
	padding: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--outline);
}
.if-credentials-associations__item:nth-child( odd ) {
	padding-left: 0;
	border-right: 1px solid var(--wp--preset--color--outline);
}
.if-credentials-associations__item:nth-child( even ) {
	padding-right: 0;
}
.if-credentials-associations__mark {
	display: grid;
	width: 5.5rem;
	height: 5.5rem;
	place-items: center;
	align-self: start;
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp( 0.9rem, 1.4vw, 1.1rem );
	font-weight: 750;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 50%;
}
.if-credentials-associations__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 0.55rem;
}
.if-credentials-associations__type {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.if-credentials-associations__description {
	color: color-mix( in srgb, currentColor 68%, transparent );
}
.if-credentials-associations__link {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}
.if-credentials-associations__link a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	text-decoration: none;
}
.if-credentials-associations__link a::after {
	content: "\2197";
	font-size: 0.9em;
}
.if-credentials-associations__note {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--shape--radius);
}

@media (max-width: 900px) {
	.if-credentials-associations__head {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
		margin-bottom: var(--wp--preset--spacing--50);
	}
	.if-credentials-associations__intro {
		max-width: 44rem;
	}
}

@media (max-width: 781px) {
	.if-credentials-associations__grid {
		grid-template-columns: 1fr;
	}
	.if-credentials-associations__item,
	.if-credentials-associations__item:nth-child( odd ),
	.if-credentials-associations__item:nth-child( even ) {
		padding-inline: 0;
		border-right: 0;
	}
}

@media (max-width: 520px) {
	.if-credentials-associations {
		padding-block: var(--wp--preset--spacing--60);
	}
	.if-credentials-associations__item {
		grid-template-columns: 4rem minmax( 0, 1fr );
	}
	.if-credentials-associations__mark {
		width: 4rem;
		height: 4rem;
		font-size: 0.8rem;
	}
	.if-credentials-associations__note {
		align-items: flex-start;
		padding: var(--wp--preset--spacing--30);
	}
}

/* ==== Section library — batch 2: FAQ / accordion ==================
   Native <details> rows. accordion.js adds single-open behaviour and
   the tabbed variant's tab bar; everything works with no JS. */
.if-faq {
	margin-block: var(--wp--custom--section-gap);
}
.if-faq > .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--50);
}
.if-faq__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
/* Boxed by default (Clinical / Essential / Gallery / Amplified / Modern);
   Elegant switches to divider rules in the per-skin block below. */
.if-faq__item {
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius);
	padding-inline: 1.375rem;
}
.if-faq__item > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 0;
	font-family: var( --wp--preset--font-family--heading ), sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.4;
}
.if-faq__item > summary::-webkit-details-marker {
	display: none;
}
.if-faq__item > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.15rem;
	background: currentColor;
	-webkit-mask: no-repeat center / contain
		url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E" );
	mask: no-repeat center / contain
		url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E" );
	color: var(--wp--preset--color--primary);
	transition: transform 0.2s ease;
}
.if-faq__item[open] > summary::after {
	-webkit-mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E" );
}
.if-faq__item > summary + * {
	margin-top: 0;
}
.if-faq__item > :not( summary ) {
	margin-bottom: var(--wp--preset--spacing--40);
	max-width: 60ch;
	color: color-mix( in srgb, currentColor 78%, transparent );
}
.if-faq__item > :not( summary ):first-of-type {
	margin-top: calc( -1 * var(--wp--preset--spacing--20) );
}

/* 02 two-column */
.if-faq-twocol .if-faq__list {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	column-gap: var(--wp--preset--spacing--50);
	align-content: start;
}
.if-faq-twocol .if-faq__item {
	display: block;
	margin-block-start: 0;
}
@media (max-width: 781px) {
	.if-faq-twocol .if-faq__list {
		grid-template-columns: 1fr;
	}
}

/* 03 categorized */
.if-faq__group {
	margin-bottom: var(--wp--preset--spacing--50);
}
.if-faq__cat {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--primary);
}

/* 04 tabbed */
.if-faq__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--outline);
}
.if-faq__tab {
	padding: 0.6rem 1rem;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}
.if-faq__tab[aria-selected="true"] {
	opacity: 1;
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.if-faq-tabbed.is-ready .if-faq__topic {
	display: none;
}
.if-faq-tabbed:not( .is-ready ) .if-faq__panel + .if-faq__panel {
	margin-top: var(--wp--preset--spacing--50);
}

/* ==== Section library — batch 3: Blog / article list =============
   Query Loop patterns bound to real posts. Style-agnostic. */
.if-blog {
	margin-block: var(--wp--custom--section-gap);
}
.if-blog > .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--50);
}
.if-blog__media {
	margin: 0 0 0.9rem;
	border-radius: var(--wp--custom--shape--radius-lg);
	overflow: hidden;
}
.if-blog__media img {
	width: 100%;
	object-fit: cover;
}
.if-blog__cat {
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--primary);
}
.if-blog__cat a {
	color: inherit;
	text-decoration: none;
}
.if-blog__title {
	margin: 0 0 0.4rem;
	line-height: 1.25;
}
.if-blog__title a {
	color: inherit;
	text-decoration: none;
}
.if-blog__title a:hover {
	text-decoration: underline;
}
.if-blog__excerpt {
	margin: 0 0 0.5rem;
	color: color-mix( in srgb, currentColor 72%, transparent );
}
.if-blog__meta {
	margin: 0;
	color: color-mix( in srgb, currentColor 55%, transparent );
}

/* 01 grid */
.if-blog-grid .if-blog__grid {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.if-blog-grid .if-blog__grid > .wp-block-post {
	display: flex;
	flex-direction: column;
}

/* 02 featured + list */
.if-blog-featured {
	display: grid;
	grid-template-columns: minmax( 0, 1.5fr ) minmax( 0, 1fr );
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}
.if-blog-featured .if-blog__lead .if-blog__title {
	margin-block: 0.5rem;
}
.if-blog-featured .if-blog__aside .wp-block-post {
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--outline);
}
.if-blog-featured .if-blog__aside .wp-block-post:first-child {
	padding-top: 0;
}

/* 03 horizontal feed */
.if-blog-horizontal .if-blog__feed > .wp-block-post {
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--outline);
}
.if-blog-horizontal .if-blog__feed > .wp-block-post:first-child {
	border-top: 1px solid var(--wp--preset--color--outline);
}
.if-blog-horizontal .if-blog__row {
	margin: 0;
	gap: var(--wp--preset--spacing--40);
}
.if-blog-horizontal .if-blog__media {
	margin: 0;
}
/* No featured image on this post → drop the empty media column. */
.if-blog-horizontal .if-blog__row:not( :has( .if-blog__media img ) ) > .wp-block-column:first-child {
	display: none;
}
.if-blog-horizontal .if-blog__row:not( :has( .if-blog__media img ) ) > .wp-block-column:last-child {
	flex-basis: 100% !important;
}

/* 04 minimal index */
.if-blog-minimal .if-blog__line {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
	padding-block: 0.8rem;
	border-bottom: 1px solid var(--wp--preset--color--outline);
}
.if-blog-minimal .if-blog__index > .wp-block-post:first-child .if-blog__line {
	border-top: 1px solid var(--wp--preset--color--outline);
}
.if-blog-minimal .if-blog__meta {
	flex: 0 0 auto;
	width: 8.5rem;
	font-variant-numeric: tabular-nums;
}
.if-blog-minimal .if-blog__title {
	margin: 0;
}

/* ==== Section library — batch 4: Headers + light/dark ============ */

/* Dark palettes.
   The generic block is the fallback (JS off, or an unrecognised brand):
   it remaps the neutrals and lets primary / accent carry over. Each
   `.if-brand-*` block below then tunes its own dark mode — most
   importantly lifting `primary` so buttons, links and the header CTA
   stay visible on a dark ground. `<html>` gets `.if-brand-<name>` in
   wp_head from the active palette, so these apply before first paint. */
:root[data-theme="dark"] {
	--wp--preset--color--base: #15150f;
	--wp--preset--color--contrast: #f2f2ec;
	--wp--preset--color--surface: #20201a;
	--wp--preset--color--surface-contrast: #f2f2ec;
	--wp--preset--color--outline: color-mix( in srgb, #ffffff 16%, transparent );
	--wp--custom--text--muted: rgba( 255, 255, 255, 0.68 );
	--wp--custom--text--subtle: rgba( 255, 255, 255, 0.5 );
	--wp--custom--text--meta: rgba( 255, 255, 255, 0.58 );
	color-scheme: dark;
}

/* Clinical — cool eucalyptus charcoal; teal lifts bright. */
:root[data-theme="dark"].if-brand-clinical {
	--wp--preset--color--base: #0f1211;
	--wp--preset--color--contrast: #e7ece9;
	--wp--preset--color--surface: #182120;
	--wp--preset--color--surface-contrast: #e7ece9;
	--wp--preset--color--outline: color-mix( in srgb, #ffffff 14%, transparent );
	--wp--preset--color--primary: #5cb3a1;
	--wp--preset--color--primary-contrast: #0f1211;
	--wp--preset--color--accent: #e3b25e;
}

/* Elegant — cool slate blue-black; navy lifts to a dusty blue (navy is
   invisible on a dark ground). */
:root[data-theme="dark"].if-brand-elegant {
	--wp--preset--color--base: #0e121b;
	--wp--preset--color--contrast: #e9ecf1;
	--wp--preset--color--surface: #161c28;
	--wp--preset--color--surface-contrast: #e9ecf1;
	--wp--preset--color--outline: color-mix( in srgb, #ffffff 15%, transparent );
	--wp--preset--color--primary: #97acd7;
	--wp--preset--color--primary-contrast: #0e121b;
	--wp--preset--color--accent: #cba455;
}

/* Gallery — editorial mono; the near-black ink flips to near-white so
   solid buttons read as white-on-black. */
:root[data-theme="dark"].if-brand-gallery {
	--wp--preset--color--base: #100f0e;
	--wp--preset--color--contrast: #f1f0eb;
	--wp--preset--color--surface: #1a1917;
	--wp--preset--color--surface-contrast: #f1f0eb;
	--wp--preset--color--outline: color-mix( in srgb, #ffffff 15%, transparent );
	--wp--preset--color--primary: #f1f0eb;
	--wp--preset--color--primary-contrast: #100f0e;
	--wp--preset--color--accent: #b8ab97;
}

/* Essential — warm sage near-black, lifted terracotta + green. */
:root[data-theme="dark"].if-brand-essential {
	--wp--preset--color--base: #12140e;
	--wp--preset--color--contrast: #ece9df;
	--wp--preset--color--surface: #1b1f16;
	--wp--preset--color--surface-contrast: #ece9df;
	--wp--preset--color--outline: color-mix( in srgb, #ffffff 14%, transparent );
	--wp--preset--color--primary: #d1723f;
	--wp--preset--color--primary-contrast: #12140e;
	--wp--preset--color--accent: #72a460;
}

/* Modern — blue-black, lifted indigo + bright cyan. */
:root[data-theme="dark"].if-brand-modern {
	--wp--preset--color--base: #0d0e16;
	--wp--preset--color--contrast: #e8e9f2;
	--wp--preset--color--surface: #161726;
	--wp--preset--color--surface-contrast: #e8e9f2;
	--wp--preset--color--outline: color-mix( in srgb, #ffffff 14%, transparent );
	--wp--preset--color--primary: #8b83f4;
	--wp--preset--color--primary-contrast: #0d0e16;
	--wp--preset--color--accent: #20c4dc;
}

/* Hospitality — warm near-black, lifted brick-red + warm gold. Authored
   for the dark-mode toggle, not from a design mockup — no dark variant
   was in the handoff canvas for this skin, unlike the other five.
   Same recipe as the others: lift primary/accent enough to read on a
   dark ground, verified at 5.22:1 (primary) and 8.34:1 (accent)
   against this base, not just eyeballed. */
:root[data-theme="dark"].if-brand-hospitality {
	--wp--preset--color--base: #171310;
	--wp--preset--color--contrast: #f0e9e3;
	--wp--preset--color--surface: #201a16;
	--wp--preset--color--surface-contrast: #f0e9e3;
	--wp--preset--color--outline: color-mix( in srgb, #ffffff 14%, transparent );
	--wp--preset--color--primary: #d16a5f;
	--wp--preset--color--primary-contrast: #171310;
	--wp--preset--color--accent: #e0a25a;
}

/* Wellness — warm near-black, lifted moss + gold. Authored for the
   dark-mode toggle, not from a design mockup — the style doc doesn't
   cover dark mode at all. Same recipe as the others, verified at
   6.43:1 (primary) and 9.33:1 (accent) against this base. */
:root[data-theme="dark"].if-brand-wellness {
	--wp--preset--color--base: #15160f;
	--wp--preset--color--contrast: #f0ede2;
	--wp--preset--color--surface: #1e1f16;
	--wp--preset--color--surface-contrast: #f0ede2;
	--wp--preset--color--outline: color-mix( in srgb, #ffffff 14%, transparent );
	--wp--preset--color--primary: #87a17c;
	--wp--preset--color--primary-contrast: #15160f;
	--wp--preset--color--accent: #d9b568;
}

/* Amplified is dark-native — "dark" is its own palette unchanged (a
   true no-op), and "light" is the inverted poster look. */
:root[data-theme="dark"].if-brand-amplified {
	--wp--preset--color--base: #0c0c0d;
	--wp--preset--color--contrast: #f2f2f0;
	--wp--preset--color--surface: #17171a;
	--wp--preset--color--surface-contrast: #f2f2f0;
	--wp--preset--color--outline: #2a2a2c;
	--wp--preset--color--primary: #a6121b;
	--wp--preset--color--primary-contrast: #f2f2f0;
	--wp--preset--color--accent: #d4ff3d;
}
:root[data-theme="light"].if-brand-amplified {
	--wp--preset--color--base: #f4f2ec;
	--wp--preset--color--contrast: #121213;
	--wp--preset--color--surface: #e7e4da;
	--wp--preset--color--surface-contrast: #121213;
	--wp--preset--color--outline: #d8d4c7;
	--wp--preset--color--primary: #a6121b;
	--wp--preset--color--primary-contrast: #f4f2ec;
	--wp--preset--color--accent: #55750a;
	--wp--custom--text--muted: rgba( 0, 0, 0, 0.66 );
	--wp--custom--text--subtle: rgba( 0, 0, 0, 0.5 );
	--wp--custom--text--meta: rgba( 0, 0, 0, 0.58 );
	color-scheme: light;
}

/* -- Header shell ------------------------------------------------- */
.if-header {
	position: relative;
	z-index: 10;
}

/* Sticky on desktop — the nav stays reachable from anywhere on the
   page. Applies to the default header part and every header pattern
   (both render as `.wp-site-blocks > header`). Below the nav's mobile
   breakpoint the header scrolls away normally and the burger is only a
   short scroll up. */
/* A header template part is often wrapped in a bare
   `.wp-block-template-part` div that boxes only the header — sticky
   inside it has no room to move. Drop that wrapper's box so the header
   sticks against the page. */
.wp-site-blocks > .wp-block-template-part:has( > header ) {
	display: contents;
}

@media (min-width: 782px) {
	.wp-site-blocks > header,
	.wp-site-blocks > .wp-block-template-part > header {
		position: sticky;
		top: 0;
		z-index: 20;
		background-color: var(--wp--preset--color--base);
	}
	.admin-bar .wp-site-blocks > header,
	.admin-bar .wp-site-blocks > .wp-block-template-part > header {
		top: 32px;
	}
	/* The border/shadow only reads as a seam once the header is actually
	   pinned mid-scroll — at rest it just drew an extra line between the
	   header and the hero. `.is-stuck` comes from header-sticky.js (a
	   zero-height sentinel + IntersectionObserver — position: sticky has
	   no matching CSS selector, so JS is the only way to know).
	   header-sticky.js animates the transition itself with GSAP when
	   it's already loaded on the page (padding + box-shadow, tweened as
	   real values — a CSS `transition` can't reliably animate a
	   var()-driven padding or a `box-shadow: none` start point across
	   browsers). This rule is the instant fallback for when GSAP isn't
	   on the page (motion assets are dropped on pages with no `if-anim`
	   content) or reduced-motion is on — same end state, no animation.
	   The padding override reuses the *variable* the header's own
	   inline style already reads (`--wp--preset--spacing--30`), so it
	   wins without `!important`. */
	.wp-site-blocks > header.is-stuck,
	.wp-site-blocks > .wp-block-template-part > header.is-stuck {
		--wp--preset--spacing--30: 0.5rem;
		box-shadow: 0 1px 0 var(--wp--preset--color--outline),
			0 6px 16px -12px rgba( 0, 0, 0, 0.25 );
	}
}
.if-header__brand {
	gap: 0.6rem;
	text-decoration: none;
}
.if-header__brand .wp-block-site-title {
	margin: 0;
}
.if-header__brand .wp-block-site-title a {
	text-decoration: none;
	color: inherit;
}
.if-header__end {
	gap: var(--wp--preset--spacing--40);
}
.if-header__tools {
	gap: 0.6rem;
}

/* Language switcher — built by theme-toggle.js from Polylang / WPML
   (only when >1 language). Compact inline codes; current is marked. */
.if-langswitch {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.if-langswitch > * + * {
	padding-left: 0.4rem;
	border-left: 1px solid color-mix( in srgb, currentColor 25%, transparent );
}
.if-langswitch__link {
	color: inherit;
	text-decoration: none;
	opacity: 0.55;
	transition: opacity 0.15s ease;
}
.if-langswitch__link:hover,
.if-langswitch__link:focus-visible {
	opacity: 1;
}
.if-langswitch__current {
	color: var(--wp--preset--color--primary);
}

/* Light / dark switch */
.if-theme-switch {
	flex: 0 0 auto;
	width: 44px;
	height: 26px;
	padding: 3px;
	border: 0;
	border-radius: 9999px;
	background: color-mix( in srgb, currentColor 22%, transparent );
	display: flex;
	align-items: center;
	justify-content: flex-start;
	cursor: pointer;
	transition: background 0.18s ease;
}
.if-theme-switch[aria-checked="true"] {
	background: var(--wp--preset--color--primary);
	justify-content: flex-end;
}
.if-theme-switch__knob {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 9999px;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
}
.if-theme-switch:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* 02 centered logo — 3-column grid keeps the logo dead centre */
@media (min-width: 782px) {
	.if-header-centered .if-header__bar {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}
	.if-header-centered .if-header__end {
		justify-content: flex-end;
	}
}

/* 03 minimal */
.if-header-minimal .if-header__aside {
	margin: 0;
	color: color-mix( in srgb, currentColor 65%, transparent );
}
.if-header-minimal .if-header__aside a {
	color: var(--wp--preset--color--primary);
}

/* 04 utility bar */
.if-header-utility__utility,
.if-header-utility .if-header__utility {
	border-bottom: 1px solid var(--wp--preset--color--outline);
	font-size: 0.85rem;
}
.if-header-utility .if-header__utility-bar {
	padding-block: 0.4rem;
	gap: 1rem;
}
.if-header-utility .if-header__loc {
	margin: 0;
	color: color-mix( in srgb, currentColor 65%, transparent );
}
.if-header-utility .if-header__tools .if-langswitch {
	font-size: 0.75rem;
}

/* ==== Section library — Contact + Fluent Forms ====================
   The Contact patterns (impactflow-contact) embed a Fluent Forms form
   via a shortcode. Fluent Forms ships its own default stylesheet; this
   block re-skins every front-end Fluent Form onto the theme's semantic
   tokens so it inherits each style variation and dark mode. The submit
   button is handled in functions.php (force_no_style + a
   `wp-element-button` class) so it is styled by theme.json
   `elements.button` exactly like every other button.
   ================================================================== */
.if-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.if-contact__grid > * {
	margin-block: 0;
}
.if-contact__details {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}
.if-contact__details > * {
	margin-block: 0;
}
.if-contact__detail {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.if-contact__detail > * {
	margin-block: 0;
}
.if-contact__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	opacity: 0.65;
}
.if-contact__value {
	font-size: 1.0625rem;
}

/* Contact — Panel */
.if-contact-panel {
	padding-block: var(--wp--preset--spacing--70);
}
.if-contact-panel__layout {
	display: grid;
	grid-template-columns: minmax( 0, 0.78fr ) minmax( 28rem, 0.86fr );
	gap: clamp( 2.5rem, 6vw, 6rem );
	align-items: stretch;
}
.if-contact-panel__layout > *,
.if-contact-panel__copy > *,
.if-contact-panel__methods > *,
.if-contact-panel__method > *,
.if-contact-panel__form > * {
	margin-block: 0;
}
.if-contact-panel__copy {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	min-height: 100%;
}
.if-contact-panel__intro {
	max-width: 42rem;
	font-size: clamp( 1.0625rem, 1.6vw, 1.25rem );
	color: color-mix( in srgb, currentColor 76%, transparent );
}
.if-contact-panel__methods {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0;
	margin-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--outline);
}
.if-contact-panel__method {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
	border-bottom: 1px solid var(--wp--preset--color--outline);
}
.if-contact-panel__method:nth-child( 2n ) {
	padding-inline: var(--wp--preset--spacing--40) 0;
	border-left: 1px solid var(--wp--preset--color--outline);
}
.if-contact-panel__method-label,
.if-contact-panel__form-label {
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.if-contact-panel__method-value {
	font-weight: 650;
	line-height: 1.45;
}
.if-contact-panel__method-value a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
.if-contact-panel__note {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--50);
	font-size: 0.9rem;
	color: color-mix( in srgb, currentColor 72%, transparent );
}
.if-contact-panel__note::before {
	content: "";
	width: 0.65rem;
	height: 0.65rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 0.3rem color-mix( in srgb, var(--wp--preset--color--accent) 18%, transparent );
}
.if-contact-panel__form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: clamp( 1.5rem, 4vw, 3rem );
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
	box-shadow: 0 24px 56px rgba( 0, 0, 0, 0.1 );
}
.if-contact-panel__form-intro {
	color: color-mix( in srgb, currentColor 68%, transparent );
}
.if-contact-panel__form .if-form {
	margin-top: var(--wp--preset--spacing--30);
}
.if-contact-panel__form .fluentform textarea.ff-el-form-control {
	min-height: clamp( 12rem, 16vw, 15rem );
}
.if-contact-panel__form .fluentform .ff_submit_btn_wrapper {
	margin-bottom: 0;
}

/* -- Fluent Forms re-skin ---------------------------------------- */
/* Retarget Fluent Forms' own custom properties (defined on :root in its
   default stylesheet) at the theme tokens — its own rules then paint in
   the active variation's colours and radius. `.fluentform` is Fluent
   Forms' own wrapper div; it holds both the <form> and the success
   message. */
.wp-site-blocks .fluentform {
	--fluentform-primary: var(--wp--preset--color--primary);
	--fluentform-secondary: var(--wp--preset--color--contrast);
	--fluentform-border-color: var(--wp--preset--color--outline);
	--fluentform-border-radius: var(--wp--custom--shape--radius, 4px);
}
.wp-site-blocks .fluentform .ff-el-group {
	margin-bottom: var(--wp--preset--spacing--40);
}
.wp-site-blocks .fluentform .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 0.4rem;
}
.wp-site-blocks .fluentform .ff-el-is-required.asterisk-right label:after {
	color: var(--wp--preset--color--primary);
}
.wp-site-blocks .fluentform .ff-el-form-control {
	width: 100%;
	/* padding + line-height chosen so a single-line input matches the
	   height of the theme button beside it (inline subscribe layout). */
	padding: 0.9rem 1rem;
	font-family: var(--wp--preset--font-family--body), sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast) !important;
	background: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius, 4px);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wp-site-blocks .fluentform textarea.ff-el-form-control {
	min-height: 8rem;
	resize: vertical;
}
.wp-site-blocks .fluentform .ff-el-form-control::placeholder {
	color: color-mix(in srgb, currentColor 45%, transparent);
}
.wp-site-blocks .fluentform .ff-el-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}
.wp-site-blocks .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--wp--preset--color--primary);
}
.wp-site-blocks .fluentform .error-text,
.wp-site-blocks .fluentform .text-danger {
	color: var(--wp--preset--color--primary);
	font-size: 0.85rem;
	margin-top: 0.3rem;
}
.wp-site-blocks .fluentform .ff-el-help-message {
	font-size: 0.85rem;
	opacity: 0.7;
}
/* The submit button is a `wp-element-button` (see functions.php) so
   theme.json styles it — just keep it inline-sized, not full width. */
.wp-site-blocks .fluentform .ff-btn-submit {
	width: auto;
	cursor: pointer;
}
.wp-site-blocks .fluentform .ff-message-success {
	padding: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius, 4px);
}

@media (max-width: 900px) {
	.if-contact-panel__layout {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
	.if-contact-panel__copy {
		max-width: 48rem;
	}
	.if-contact-panel__note {
		margin-top: var(--wp--preset--spacing--40);
		padding-top: 0;
	}
	.if-contact-panel__form {
		max-width: 48rem;
	}
}

@media (max-width: 768px) {
	.if-contact__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.if-contact-panel {
		padding-block: var(--wp--preset--spacing--60);
	}
	.if-contact-panel__methods {
		grid-template-columns: 1fr;
	}
	.if-contact-panel__method,
	.if-contact-panel__method:nth-child( 2n ) {
		padding-inline: 0;
		border-left: 0;
	}
}

/* ==== WooCommerce ================================================
   WooCommerce's blockified templates + blocks already inherit the
   global styles (buttons carry `.wp-element-button`, so they match
   `theme.json` `elements.button` per variation). This block only
   re-skins what WooCommerce styles itself — form fields, the sale
   flash, catalog sorting, the quantity input, store notices, the
   cart/checkout summary — onto the semantic tokens, so the shop
   follows every variation and dark mode. No per-brand rules.
   ================================================================ */

/* Vertical rhythm — WooCommerce's `main` butts against the header. */
body.woocommerce-page .wp-site-blocks main,
body.woocommerce .wp-site-blocks main {
	padding-block-start: var(--wp--preset--spacing--50);
}

/* -- Form fields (block cart/checkout, my-account, classic) -------- */
.woocommerce .wc-block-components-text-input input,
.woocommerce .wc-block-components-text-input textarea,
.woocommerce .wc-blocks-components-select__select,
.woocommerce-page .wc-block-components-text-input input,
.woocommerce-page .wc-block-components-text-input textarea,
.woocommerce-page .wc-blocks-components-select__select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-ordering select.orderby,
.woocommerce .quantity input.qty,
.wc-block-components-quantity-selector__input {
	color: var(--wp--preset--color--contrast) !important;
	background: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--outline) !important;
	border-radius: var(--wp--custom--shape--radius, 4px) !important;
	box-shadow: none !important;
}
.woocommerce .wc-block-components-text-input input:focus,
.woocommerce .wc-blocks-components-select__select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--wp--preset--color--primary) 22%, transparent ) !important;
}
.woocommerce .wc-block-components-text-input label,
.woocommerce .wc-block-components-checkout-step__heading {
	color: var(--wp--preset--color--contrast);
}

/* -- Sale flash + block sale badge (the inner pill only — the block
   wrapper `.wp-block-woocommerce-product-sale-badge` is a full-width
   flex container, leave it alone). */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--shape--radius, 4px);
	min-height: 0;
	line-height: 1.4;
	padding: 0.25em 0.7em;
	font-weight: 600;
}

/* -- Price: brand-colour amount, muted was-price ------------------ */
.woocommerce .price ins .woocommerce-Price-amount,
.woocommerce .price > .woocommerce-Price-amount,
.wc-block-components-product-price ins,
.wc-block-components-product-price > .wc-block-components-product-price__value {
	color: var(--wp--preset--color--contrast);
}
.woocommerce .price del,
.wc-block-components-product-price del {
	opacity: 0.55;
}

/* -- Star ratings -------------------------------------------------- */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before,
.wc-block-components-product-rating .wc-block-components-product-rating__stars > span::before {
	color: var(--wp--preset--color--accent);
}

/* -- Store notices ---------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-noreviews,
.wc-block-components-notice-banner:not(.is-error):not(.is-success) {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--outline);
	border-left-width: 3px;
	border-left-color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--shape--radius, 4px);
}
.woocommerce-message a,
.woocommerce-info a {
	color: var(--wp--preset--color--primary);
}
.wc-block-components-notice-banner.is-error,
.woocommerce-error {
	border-radius: var(--wp--custom--shape--radius, 4px);
}

/* -- Cart / checkout summary panel — recolour only, no layout ---- */
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-cart__totals-title + .wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-order-summary-block {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius, 4px);
}

/* -- Product tabs (classic single-product) ---------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom: 2px solid var(--wp--preset--color--primary);
}

/* ==== Section library — Blog templates ===========================
   Single post + post index (home / category / tag / date). One set of
   patterns carries every part; the active style is chosen in Appearance
   → Impact Flow and switched here entirely in CSS via a body class:
     .if-blog-a  — Sidebar : article + 300px sidebar, card-grid index
     .if-blog-b  — Reading : centred 720px column, list index
     .if-blog-c  — Rail    : share rail + slim aside, magazine index
   `.if-blog-first-page` marks page 1 of an index (the "featured" card).
   All values map to theme tokens → every brand + dark mode. */

.if-article,
.if-index {
	--if-blog-radius: var(--wp--custom--shape--radius-lg);
	--if-blog-sec: color-mix( in srgb, var(--wp--preset--color--contrast) 66%, var(--wp--preset--color--base) );
	--if-blog-muted: var(--wp--custom--text--muted, color-mix( in srgb, var(--wp--preset--color--contrast) 52%, var(--wp--preset--color--base) ));
	/* Card edges / heading rules / section dividers — the skin outline. */
	--if-blog-line: var(--wp--preset--color--outline);
}

/* ---- Single post — shared ---------------------------------------- */
.if-article__cat,
.if-index__cat {
	letter-spacing: 0.07em;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.if-article__cat a,
.if-index__cat a {
	color: inherit;
	text-decoration: none;
}
.if-article__cat {
	margin: 0 0 0.9rem;
}
.if-article__title {
	font-family: var(--wp--preset--font-family--heading);
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 1rem;
}
.if-article__byline {
	color: var(--if-blog-muted);
	font-size: 0.8125rem;
	margin: 0 0 1.75rem;
	gap: 0.5rem;
	align-items: baseline;
}
.if-article__byline p {
	margin: 0;
}
.if-article__media,
.if-index__media {
	/* core `:where(figure){margin:0 0 1em}` otherwise leaves a gap that
	   breaks the image's edge-to-edge fill inside a card. */
	margin: 0;
}
.if-article__media {
	border: 1px solid var(--if-blog-line);
	border-radius: var(--if-blog-radius);
	overflow: hidden;
}
.if-article__media img {
	width: 100%;
	object-fit: cover;
}

.if-article__content {
	font-size: 1.0625rem;
	line-height: 1.75;
}
/* The article column and its post-content are constrained-layout groups,
   so core centres their capped children (`margin-inline: auto !important`).
   The blog designs left-align the prose within the column instead. */
.if-article .if-article__main > *,
.if-article .if-article__content > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}
.if-blog-b .if-article .if-article__main > *,
.if-blog-b .if-article .if-article__content > * {
	margin-inline: auto !important;
}
.if-article__content p {
	margin: 0 0 1.25rem;
}
.if-article__content h2,
.if-article__content h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 2.25rem 0 0.9rem;
}
.if-article__content h3 {
	font-size: 1.625rem;
}
.if-article__content ul,
.if-article__content ol {
	margin: 0 0 1.4rem;
	padding-left: 1.4rem;
}
.if-article__content li {
	margin-bottom: 0.5rem;
}
.if-article__content blockquote {
	margin: 2rem 0;
	padding-left: 1.4rem;
	border-left: 3px solid var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: 1.375rem;
	line-height: 1.4;
	color: var(--wp--preset--color--primary);
}
.if-article__content blockquote p {
	margin: 0;
}

.if-article__tags {
	margin-top: 2.25rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--if-blog-line);
	gap: 0.5rem;
	align-items: center;
}
.if-article__tags-label {
	color: var(--if-blog-muted);
	margin: 0 0.25rem 0 0;
}
.if-article__taglist {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.if-article__taglist a,
.if-article__tagcloud a {
	font-size: 0.78rem !important;
	padding: 6px 13px;
	border-radius: 9999px;
	border: 1px solid var(--wp--preset--color--outline);
	color: var(--if-blog-sec);
	text-decoration: none;
}

.if-article__bio {
	gap: 1.25rem;
	align-items: center;
	background: var(--wp--preset--color--surface);
	border-radius: var(--if-blog-radius);
	padding: 1.6rem;
	margin-top: 2.1rem;
}
.if-article__bio-avatar img,
.if-article__aside-author .wp-block-avatar img {
	border-radius: 50%;
}
.if-article__bio-name,
.if-article__aside-author .wp-block-post-author-name {
	font-weight: 600;
	font-size: 1.0625rem;
	margin: 0 0 0.25rem;
}
.if-article__bio-text,
.if-article__aside-author .wp-block-post-author-biography {
	color: var(--if-blog-sec);
	margin: 0;
}

.if-article__nav {
	margin-top: 2.75rem;
	padding-top: 1.9rem;
	border-top: 1px solid var(--if-blog-line);
	gap: 1.5rem;
}
/* Richer prev/next — a thumbnail + title, not just a bare link (the
   core post-navigation-link block this replaced had no option for
   either). impactflow_article_nav_link() in inc/blog.php returns ''
   at either end of the series, so there's simply no element here to
   style at that point — no :empty rule needed the way the old core
   block markup required one. */
.if-article__nav-link {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}
.if-article__nav-next {
	flex-direction: row-reverse;
	text-align: right;
	justify-self: end;
}
.if-article__nav-thumb {
	flex: none;
	width: 4rem;
	height: 4rem;
	border-radius: var(--wp--custom--shape--radius);
	overflow: hidden;
}
.if-article__nav-thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.if-article__nav-body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}
.if-article__nav-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--if-blog-muted);
}
.if-article__nav-previous .if-article__nav-label::before {
	content: "\2190\00a0";
}
.if-article__nav-next .if-article__nav-label::after {
	content: "\00a0\2192";
}
.if-article__nav-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	line-height: 1.3;
	/* Clamp so a long title can't blow out the two-column grid. */
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.if-article__related {
	position: relative;
	margin-top: 2.75rem;
}
/* "More from the blog" is a Reading-style (B) touch only. */
.if-blog-a .if-article__related {
	display: none;
}
/* The carousel itself (.if-slider-carousel, .if-slide-card) is the
   shared component from slider-carousel.php — style.css's existing
   rules for it cover layout/spacing already. This is only the one
   thing that component's other usages didn't need: an actual link on
   the title, which style.css never had to style before. */
.if-slide-card__title a {
	color: inherit;
	text-decoration: none;
}

/* ---- Sidebar / aside ------------------------------------------------- */
.if-article__aside {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
/* These groups keep the `is-layout-flow` class, whose core rule adds a
   block-gap margin between children on top of our flex/grid gaps. */
.if-article__aside > *,
.if-article__aside-block > *,
.if-index__toolbar > *,
.if-index__meta > * {
	margin-block: 0 !important;
}
.if-article__aside-h {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--if-blog-line);
}
.if-article__search .wp-block-search__inside-wrapper,
.if-index__search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 9999px;
	background: var(--wp--preset--color--surface);
	padding: 3px 4px 3px 8px;
	overflow: hidden;
}
.if-article__search .wp-block-search__input,
.if-index__search .wp-block-search__input {
	border: 0;
	background: transparent;
	padding-block: 0.4rem;
}
.if-article__search .wp-block-search__button,
.if-index__search .wp-block-search__button {
	border-radius: 9999px;
	margin: 0;
	padding-block: 0.45rem;
}
.if-article__cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.if-article__cat-list li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.3rem 0;
}
.if-article__cat-list a {
	text-decoration: none;
	color: inherit;
}
.if-article__cat-list .wp-block-categories__post-count {
	color: var(--if-blog-muted);
}
.if-article__recent {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.if-article__recent li {
	display: grid;
	grid-template-columns: 56px 1fr;
	column-gap: 0.75rem;
}
.if-article__recent li:not( :has( .wp-block-latest-posts__featured-image ) ) {
	grid-template-columns: minmax( 0, 1fr );
}
.if-article__recent .wp-block-latest-posts__featured-image {
	grid-row: 1 / span 2;
}
.if-article__recent .wp-block-latest-posts__featured-image img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
}
.if-article__recent a {
	text-decoration: none;
	color: inherit;
	font-weight: 600;
	font-size: 0.84rem;
	line-height: 1.35;
}
.if-article__recent time {
	display: block;
	font-size: 0.75rem;
	color: var(--if-blog-muted);
	margin-top: 0.2rem;
}
.if-article__promo {
	border-radius: var(--if-blog-radius);
	padding: 1.25rem;
}
.if-article__promo .if-article__aside-h {
	color: inherit;
	border-bottom-color: color-mix( in srgb, currentColor 30%, transparent );
}
.if-article__promo a {
	color: inherit;
	text-decoration: none;
}
.if-article__promo-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-weight: 600;
	font-size: 0.84rem;
}
.if-article__tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}
.if-article__aside-author {
	display: none;
	background: var(--wp--preset--color--surface);
	border-radius: var(--if-blog-radius);
	padding: 1.4rem;
	text-align: center;
}
/* Style C's aside is just the author card + tags. */
.if-blog-c .if-article__aside-author {
	display: block;
}
.if-blog-c .if-article__aside-search,
.if-blog-c .if-article__aside-cats,
.if-blog-c .if-article__aside-recent,
.if-blog-c .if-article__promo,
.if-blog-c .if-article__bio,
.if-blog-c .if-article__related {
	display: none;
}
.if-article__aside-author .wp-block-avatar {
	margin: 0 auto 0.6rem;
	width: 52px;
}

/* Share rail (style C) */
.if-article__rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	position: sticky;
	top: 6.5rem;
	/* Line the rail up with the article's category eyebrow, not the very
	   top edge, and keep it clear of the sticky header when it sticks. */
	padding-top: 0.15rem;
	scroll-margin-top: 6.5rem;
}
.admin-bar .if-article__rail {
	top: 8.5rem;
	scroll-margin-top: 8.5rem;
}
.if-article__rail-label {
	writing-mode: vertical-rl;
	transform: rotate( 180deg );
	margin-bottom: 0.35rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.if-article__rail-link {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--outline);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	line-height: 1;
	color: var(--if-blog-sec);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.if-article__rail-link:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* ---- Desktop layout: the three styles ------------------------------ */
@media (min-width: 1025px) {
	.if-article {
		display: grid;
		align-items: start;
		column-gap: 56px;
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
	}
	/* .if-article is itself a constrained-layout group, so core adds
	   `margin-inline: auto !important` + a content-size max-width to its
	   children — which cancels grid stretch and shrink-wraps the columns.
	   Undo it for the grid styles (B keeps the centring — it is one column). */
	.if-blog-a .if-article > *,
	.if-blog-c .if-article > * {
		max-width: none;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* A — Sidebar */
	.if-blog-a .if-article {
		grid-template-columns: minmax( 0, 1fr ) 300px;
	}
	.if-blog-a .if-article__rail-wrap {
		display: none;
	}
	.if-blog-a .if-article__main {
		grid-column: 1;
	}
	.if-blog-a .if-article__aside {
		grid-column: 2;
	}

	/* B — Reading: one centred column */
	.if-blog-b .if-article {
		display: block;
		max-width: 720px;
	}
	.if-blog-b .if-article__rail-wrap,
	.if-blog-b .if-article__aside {
		display: none;
	}
	.if-blog-b .if-article__cat,
	.if-blog-b .if-article__title,
	.if-blog-b .if-article__byline {
		text-align: center;
	}
	.if-blog-b .if-article__byline {
		justify-content: center;
	}
	.if-blog-b .if-article__title {
		font-size: clamp( 2rem, 4vw, 2.875rem );
		line-height: 1.1;
	}
	.if-blog-b .if-article__content {
		font-size: 1.125rem;
		line-height: 1.8;
	}
	.if-blog-b .if-article__media img {
		aspect-ratio: 2.2 / 1;
	}
	.if-blog-b .if-article__nav {
		display: none;
	}

	/* C — Rail + slim aside */
	.if-blog-c .if-article {
		grid-template-columns: 72px minmax( 0, 1fr ) 240px;
		column-gap: 44px;
	}
	.if-blog-c .if-article__rail-wrap {
		grid-column: 1;
	}
	.if-blog-c .if-article__main {
		grid-column: 2;
	}
	.if-blog-c .if-article__aside {
		grid-column: 3;
	}
}

/* ---- Post index — shared ------------------------------------------- */
.if-index__intro {
	margin-bottom: var(--wp--preset--spacing--50);
}
/* The intro group is a normal `alignwide` container (same as .if-index),
   so it lines up with the toolbar + card grid. Its text, though, is a
   flush-left column capped at 760 — override the constrained layout's
   centring on the children only. */
.if-index__intro > * {
	max-width: 760px;
	margin-left: 0 !important;
	margin-right: auto !important;
	text-align: left;
}
.if-index__eyebrow {
	letter-spacing: 0.1em;
	font-weight: 700;
	margin: 0 0 0.9rem;
}
.if-index__heading {
	font-family: var(--wp--preset--font-family--heading);
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 0.9rem;
}
.if-index__lead {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--if-blog-sec);
	max-width: 60ch;
	margin: 0;
}
.if-index.is-layout-constrained > * {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}
.if-index__toolbar {
	gap: 1.1rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--wp--preset--color--outline);
	margin-bottom: 2rem;
}
.if-index__search {
	max-width: 320px;
	flex: 1 1 220px;
}
.if-index__pills {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}
.if-index__pills li {
	margin: 0;
}
.if-index__pills a {
	display: inline-block;
	padding: 9px 17px;
	border-radius: 9999px;
	border: 1px solid var(--wp--preset--color--outline);
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--if-blog-sec);
}
.if-index__pills .current-cat a,
.if-index__pills a:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
}

.if-index__list {
	gap: 24px;
}
.if-index__list > li {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--if-blog-line);
	border-radius: var(--if-blog-radius);
	overflow: hidden;
	background: var(--wp--preset--color--base);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.if-index__media {
	border-bottom: 1px solid var(--if-blog-line);
}
.if-index__media img {
	width: 100%;
	object-fit: cover;
}
.if-index__cat {
	letter-spacing: 0.07em;
	padding: 18px 22px 0;
	margin: 0;
}
.if-index__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp( 1.5rem, 2.8vw, 1.75rem );
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 10px 0 8px;
	padding: 0 22px;
}
.if-index__title a {
	color: inherit;
	text-decoration: none;
}
.if-index__excerpt {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--if-blog-sec);
	padding: 0 22px;
	margin: 0 0 14px;
}
.if-index__meta {
	color: var(--if-blog-muted);
	font-size: 0.78rem;
	padding: 0 22px 20px;
	margin: 0;
	gap: 0.4rem;
	align-items: baseline;
}
.if-index__meta > * {
	margin: 0;
	font-size: inherit;
}
.if-index__meta > * + *::before {
	content: "·";
	margin-right: 0.4rem;
}
.if-index__pagination {
	gap: 0.5rem;
	margin-top: 2.25rem;
}
.if-index__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 0.5rem;
	border-radius: 9999px;
	border: 1px solid var(--wp--preset--color--outline);
	text-decoration: none;
	color: inherit;
	font-size: 0.82rem;
	font-weight: 600;
}
.if-index__pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	border-color: var(--wp--preset--color--primary);
}
.if-index__empty {
	padding: 3.75rem 0;
	text-align: center;
	color: var(--if-blog-muted);
}
/* assets/js/blog-filter.js: replaces .if-index__pagination while a
   search/category filter is active. */
.if-index__load-more {
	display: block;
	margin: 2.25rem auto 0;
	padding: 0.75rem 1.75rem;
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: 9999px;
	background: transparent;
	color: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}
.if-index__load-more:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.if-index__list[aria-busy="true"] {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease-out;
}

@media (hover: hover) {
	.if-index__list > li:hover {
		border-color: var(--wp--preset--color--primary);
		box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.1 );
		transform: translateY( -3px );
	}
}
:root[data-theme="dark"] .if-index__list > li:hover {
	box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.5 );
}

/* ---- Post index — the three styles -------------------------------- */
/* A — card grid (4 → 3 → 2 → 1) + a featured split card on page one */
.if-blog-a .if-index__list,
.if-blog-c .if-index__list {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}
@media (max-width: 1279px) {
	.if-blog-a .if-index__list,
	.if-blog-c .if-index__list {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}
@media (max-width: 1023px) {
	.if-blog-a .if-index__list,
	.if-blog-c .if-index__list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}
@media (max-width: 767px) {
	.if-blog-a .if-index__list,
	.if-blog-c .if-index__list {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media (min-width: 768px) {
	.if-blog-a.if-blog-first-page .if-index__list > li:first-child:has( .if-index__media ) {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: min-content;
		align-content: center;
	}
	.if-blog-a.if-blog-first-page .if-index__list > li:first-child .if-index__media {
		grid-column: 1;
		grid-row: 1 / span 4;
		border-bottom: 0;
		border-right: 0;
	}
	.if-blog-a.if-blog-first-page .if-index__list > li:first-child .if-index__media img {
		height: 100%;
		min-height: 260px;
	}
	.if-blog-a.if-blog-first-page .if-index__list > li:first-child > :not( .if-index__media ) {
		grid-column: 2;
	}
	.if-blog-a.if-blog-first-page .if-index__list > li:first-child .if-index__cat {
		padding: 36px 36px 0;
	}
	.if-blog-a.if-blog-first-page .if-index__list > li:first-child .if-index__title {
		padding: 0 36px;
		margin-top: 12px;
		font-size: clamp( 1.875rem, 3vw, 2.5rem );
	}
	.if-blog-a.if-blog-first-page .if-index__list > li:first-child .if-index__excerpt {
		padding: 0 36px;
	}
	.if-blog-a.if-blog-first-page .if-index__list > li:first-child .if-index__meta {
		padding: 0 36px 36px;
		margin-top: 0;
	}
}

/* B — list rows with dividers */
.if-blog-b .if-index__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.if-blog-b .if-index__list > li {
	border: 0;
	border-bottom: 1px solid var(--if-blog-line);
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}
.if-blog-b .if-index__list > li:hover {
	transform: none;
	box-shadow: none;
	border-color: transparent;
	border-bottom-color: var(--if-blog-line);
	background: var(--wp--preset--color--surface);
}
@media (min-width: 768px) {
	.if-blog-b .if-index__list > li {
		display: grid;
		grid-template-columns: 220px minmax( 0, 1fr );
		column-gap: 28px;
		align-items: center;
		padding: 24px 4px;
	}
	.if-blog-b .if-index__media {
		grid-row: 1 / span 4;
		border: 1px solid var(--if-blog-line);
		border-radius: 12px;
		overflow: hidden;
	}
	.if-blog-b .if-index__media img {
		aspect-ratio: 16 / 11;
	}
	.if-blog-b .if-index__cat,
	.if-blog-b .if-index__title,
	.if-blog-b .if-index__excerpt,
	.if-blog-b .if-index__meta {
		grid-column: 2;
		padding-inline: 0;
	}
	/* No featured image → drop the empty thumbnail column. */
	.if-blog-b .if-index__list > li:not( :has( .if-index__media ) ) {
		grid-template-columns: minmax( 0, 1fr );
	}
	.if-blog-b .if-index__list > li:not( :has( .if-index__media ) ) > * {
		grid-column: 1;
	}
	.if-blog-b .if-index__cat {
		padding-top: 0;
		margin-bottom: 8px;
	}
	.if-blog-b .if-index__title {
		font-size: clamp( 1.5rem, 2.5vw, 2rem );
		margin: 0 0 8px;
	}
	.if-blog-b .if-index__excerpt {
		margin: 0 0 10px;
		max-width: 56ch;
	}
	.if-blog-b .if-index__meta {
		padding-bottom: 0;
	}
}

/* C — magazine: a wide lead story, no excerpts on the rest */
.if-blog-c .if-index__excerpt {
	display: none;
}
/* Cards stretch to their grid row so a row reads as one band; the meta
   line drops to the bottom edge so short cards don't look unfinished. */
.if-blog-a .if-index__meta,
.if-blog-c .if-index__meta {
	margin-top: auto;
}
@media (min-width: 1025px) {
	/* Lead is a media-left split card spanning two columns; the two cards
	   beside it stretch to the same height (grid rows + card stretch). */
	.if-blog-c.if-blog-first-page .if-index__list > li:first-child:has( .if-index__media ) {
		grid-column: span 2;
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		/* cat/title/excerpt/meta each get their own snug `auto` row so
		   they stay one tight block; the two `1fr` spacers around that
		   block do the vertical centering against the media's height.
		   Meta previously shared the trailing 1fr row via
		   `align-self: end`, which put it at the card's bottom edge
		   rather than under the excerpt — fine on a short image, but on
		   a tall one (a portrait photo, say) that 1fr track grows and
		   the date line visibly detaches from the text above it. */
		grid-template-rows: 1fr auto auto auto auto 1fr;
	}
	.if-blog-c.if-blog-first-page .if-index__list > li:first-child .if-index__media {
		grid-column: 1;
		grid-row: 1 / -1;
		border-bottom: 0;
		border-right: 0;
	}
	.if-blog-c.if-blog-first-page .if-index__list > li:first-child .if-index__media img {
		height: 100%;
		min-height: 240px;
		aspect-ratio: auto;
	}
	.if-blog-c.if-blog-first-page .if-index__list > li:first-child .if-index__cat {
		grid-column: 2;
		grid-row: 2;
		padding: 0 28px;
	}
	.if-blog-c.if-blog-first-page .if-index__list > li:first-child .if-index__title {
		grid-column: 2;
		grid-row: 3;
		padding: 0 28px;
		margin: 10px 0 0;
		font-size: clamp( 1.75rem, 2.8vw, 2.25rem );
	}
	.if-blog-c.if-blog-first-page .if-index__list > li:first-child .if-index__excerpt {
		display: block;
		grid-column: 2;
		grid-row: 4;
		padding: 10px 28px 0;
	}
	.if-blog-c.if-blog-first-page .if-index__list > li:first-child .if-index__meta {
		grid-column: 2;
		grid-row: 5;
		padding: 16px 28px 0;
	}
	/* Single-column fallback when the lead post has no featured image. */
	.if-blog-c.if-blog-first-page .if-index__list > li:first-child:not( :has( .if-index__media ) ) {
		grid-column: span 2;
	}
	.if-blog-c.if-blog-first-page .if-index__list > li:first-child:not( :has( .if-index__media ) ) .if-index__title {
		font-size: clamp( 1.75rem, 2.8vw, 2.25rem );
	}
	.if-blog-c.if-blog-first-page .if-index__list > li:first-child:not( :has( .if-index__media ) ) .if-index__excerpt {
		display: block;
	}
}

/* ---- Blog templates: tablet / phone ------------------------------- */
@media (max-width: 1024px) {
	.if-article {
		display: block;
		max-width: 720px;
		margin-inline: auto;
	}
	.if-article__rail-wrap {
		display: none;
	}
	.if-article__aside {
		margin-top: 3rem;
	}
	.if-blog-b .if-article__aside {
		display: none;
	}
}
/* Tablet: the sidebar becomes a wrapping row of blocks. */
@media (min-width: 769px) and (max-width: 1024px) {
	.if-article__aside {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1.75rem;
	}
	.if-article__aside-block {
		flex: 1 1 240px;
	}
}
@media (max-width: 768px) {
	.if-article__aside {
		flex-direction: column;
	}
	.if-index__toolbar {
		flex-direction: column;
		align-items: stretch;
	}
	.if-index__search {
		max-width: none;
	}
	.if-article__nav {
		grid-template-columns: minmax( 0, 1fr );
	}
	.if-article__nav-next {
		text-align: left;
	}
}

/* ==================================================================
   Editorial impact patterns
   Additive compositions for pages that need hierarchy beyond cards.
   They use shared palette and shape tokens so every skin remains valid;
   Clinical receives a more restrained, line-led treatment below.
   ================================================================== */

/* Proof — Facts bar */
.if-proof-facts {
	padding-block: clamp( 2rem, 5vw, 3.5rem );
}
.if-proof-facts__grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}
.if-proof-facts__grid > * {
	margin-block: 0;
}
.if-proof-facts__item {
	min-width: 0;
	padding-inline: clamp( 1rem, 3vw, 2.25rem );
}
.if-proof-facts__item:first-child {
	padding-left: 0;
}
.if-proof-facts__item:last-child {
	padding-right: 0;
}
.if-proof-facts__item + .if-proof-facts__item {
	border-left: 1px solid color-mix( in srgb, currentColor 32%, transparent );
}
.if-proof-facts__value,
.if-proof-facts__label {
	margin: 0;
}
.if-proof-facts__value {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp( 1.5rem, 3vw, 2.25rem );
	font-weight: 700;
	line-height: 1.05;
}
.if-proof-facts__label {
	margin-top: 0.45rem;
	font-size: 0.875rem;
	line-height: 1.35;
	opacity: 0.78;
}

/* Service — Detail introduction */
.if-service-detail-intro {
	padding-block: var(--wp--preset--spacing--70);
	overflow: clip;
}
.if-service-detail-intro__layout {
	display: grid;
	grid-template-columns: minmax( 0, 0.86fr ) minmax( 0, 1.14fr );
	gap: clamp( 3rem, 8vw, 8rem );
	align-items: center;
}
.if-service-detail-intro__layout > *,
.if-service-detail-intro__copy > *,
.if-service-detail-intro__fact > *,
.if-service-detail-intro__visual > *,
.if-service-detail-intro__panel > * {
	margin-block: 0;
}
.if-service-detail-intro__copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}
.if-service-detail-intro__lead {
	max-width: 40rem;
	font-size: clamp( 1.15rem, 1.8vw, 1.4rem );
	line-height: 1.55;
}
.if-service-detail-intro__text {
	max-width: 38rem;
	color: color-mix( in srgb, currentColor 72%, transparent );
}
.if-service-detail-intro__actions {
	margin-top: var(--wp--preset--spacing--30);
}
.if-service-detail-intro__facts {
	margin-top: var(--wp--preset--spacing--50);
	border-block: 1px solid var(--wp--preset--color--outline);
}
.if-service-detail-intro__facts > * {
	margin-block: 0;
}
.if-service-detail-intro__fact {
	display: grid;
	grid-template-columns: minmax( 8rem, 0.72fr ) minmax( 0, 1fr );
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	padding-block: var(--wp--preset--spacing--30);
}
.if-service-detail-intro__fact + .if-service-detail-intro__fact {
	border-top: 1px solid var(--wp--preset--color--outline);
}
.if-service-detail-intro__fact-label {
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.if-service-detail-intro__fact-value {
	font-weight: 700;
	line-height: 1.45;
}
.if-service-detail-intro__visual {
	position: relative;
	min-width: 0;
}
.if-service-detail-intro__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--shape--radius-lg);
	background: var(--wp--preset--color--outline);
}
.if-service-detail-intro__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.if-service-detail-intro__panel {
	position: absolute;
	left: clamp( -3.5rem, -4vw, -2rem );
	bottom: clamp( 1.5rem, 4vw, 3.5rem );
	width: min( 23rem, 78% );
	padding: clamp( 1.5rem, 3.5vw, 2.5rem );
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
	box-shadow: 0 20px 48px rgba( 0, 0, 0, 0.12 );
}
.if-service-detail-intro__list {
	display: grid;
	gap: 0.8rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}
.if-service-detail-intro__list li {
	display: grid;
	grid-template-columns: 0.8rem minmax( 0, 1fr );
	gap: 0.7rem;
	align-items: baseline;
}
.if-service-detail-intro__list li::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

@media (max-width: 1100px) {
	.if-service-detail-intro__layout {
		grid-template-columns: minmax( 0, 0.92fr ) minmax( 0, 1.08fr );
		gap: var(--wp--preset--spacing--60);
	}
	.if-service-detail-intro__panel {
		left: -1.5rem;
		width: min( 22rem, 84% );
	}
}

@media (max-width: 781px) {
	.if-service-detail-intro__layout {
		grid-template-columns: 1fr;
	}
	.if-service-detail-intro__copy {
		max-width: 44rem;
	}
	.if-service-detail-intro__visual {
		width: 100%;
		max-width: 44rem;
	}
	.if-service-detail-intro__media img {
		aspect-ratio: 4 / 3;
	}
	.if-service-detail-intro__panel {
		position: relative;
		left: auto;
		bottom: auto;
		width: calc( 100% - 2rem );
		margin: -3rem 1rem 0 auto;
	}
}

@media (max-width: 520px) {
	.if-service-detail-intro {
		padding-block: var(--wp--preset--spacing--60);
	}
	.if-service-detail-intro__fact {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
	.if-service-detail-intro__media img {
		aspect-ratio: 4 / 5;
	}
}

/* Services — Editorial list */
.if-services-editorial {
	padding-block: var(--wp--preset--spacing--70);
}
.if-services-editorial__layout {
	gap: clamp( 2.5rem, 7vw, 7rem );
}
.if-services-editorial__intro {
	align-self: flex-start;
	position: sticky;
	top: 7rem;
}
.if-services-editorial__intro > * {
	max-width: 34rem;
}
.if-services-editorial__list {
	border-top: 1px solid var(--wp--preset--color--outline);
}
.if-services-editorial__item {
	display: grid;
	grid-template-columns: 2.5rem minmax( 0, 1fr ) 2rem;
	gap: var(--wp--preset--spacing--30);
	align-items: start;
	padding-block: clamp( 1.5rem, 3vw, 2.25rem );
	border-bottom: 1px solid var(--wp--preset--color--outline);
	transition: padding-inline 180ms ease, background-color 180ms ease;
}
.if-services-editorial__number,
.if-services-editorial__copy > * {
	margin: 0;
}
.if-services-editorial__number {
	padding-top: 0.2rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--primary);
}
.if-services-editorial__copy {
	display: grid;
	grid-template-columns: minmax( 11rem, 0.8fr ) minmax( 14rem, 1.2fr );
	gap: var(--wp--preset--spacing--40);
	align-items: baseline;
}
.if-services-editorial__copy p {
	color: color-mix( in srgb, currentColor 68%, transparent );
}
.if-services-editorial__item::after {
	content: "\2192";
	font-size: 1.5rem;
	line-height: 1;
	text-align: right;
	color: var(--wp--preset--color--primary);
	transition: transform 180ms ease;
}
@media (hover: hover) {
	.if-services-editorial__item:hover {
		padding-inline: 1rem;
		background: var(--wp--preset--color--surface);
	}
	.if-services-editorial__item:hover::after {
		transform: translateX( 0.25rem );
	}
}

/* Feature — Editorial offset */
.if-feature-editorial-offset {
	padding-block: var(--wp--preset--spacing--70);
	overflow: clip;
}
.if-feature-editorial-offset__layout {
	gap: 0;
}
.if-feature-editorial-offset__media {
	position: relative;
}
.if-feature-editorial-offset__media figure {
	margin: 0;
}
.if-feature-editorial-offset__media img {
	display: block;
	width: 100%;
	min-height: 34rem;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: var(--wp--custom--shape--radius-lg);
}
.if-feature-editorial-offset__panel {
	position: relative;
	z-index: 1;
	margin-left: clamp( -5rem, -6vw, -2.5rem );
	padding: clamp( 2rem, 5vw, 4rem );
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
}
.if-feature-editorial-offset__fact {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-block: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--30);
	border-block: 1px solid var(--wp--preset--color--outline);
}
.if-feature-editorial-offset__fact > * {
	margin: 0;
}
.if-feature-editorial-offset__value {
	font-family: var(--wp--preset--font-family--heading), sans-serif;
	font-size: clamp( 2.5rem, 5vw, 4.5rem );
	font-weight: 700;
	line-height: 0.9;
	color: var(--wp--preset--color--primary);
}

/* Testimonial — Outcome story */
.if-testimonial-outcome {
	padding-block: var(--wp--preset--spacing--70);
}
.if-testimonial-outcome__layout {
	gap: clamp( 2.5rem, 6vw, 6rem );
}
.if-testimonial-outcome__media figure,
.if-testimonial-outcome__quote {
	margin: 0;
}
.if-testimonial-outcome__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 30rem;
	object-fit: cover;
	border-radius: var(--wp--custom--shape--radius-lg);
}
.if-testimonial-outcome__story {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.if-testimonial-outcome__mark {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--heading), serif;
	font-size: 5rem;
	line-height: 0.55;
	color: var(--wp--preset--color--accent);
}
.if-testimonial-outcome__quote {
	padding: 0;
	border: 0;
}
.if-testimonial-outcome__quote p {
	margin-top: 0;
	line-height: 1.25;
}
.if-testimonial-outcome__quote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
	font-style: normal;
	font-weight: 700;
}
.if-testimonial-outcome__meta {
	gap: 0;
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid color-mix( in srgb, currentColor 32%, transparent );
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.78;
}
.if-testimonial-outcome__meta p {
	margin: 0;
}
.if-testimonial-outcome__meta p + p::before {
	content: "·";
	margin-inline: 0.75rem;
}

/* Team — Profile grid */
.if-team-profile-grid {
	padding-block: var(--wp--preset--spacing--70);
	overflow: clip;
}
.if-team-profile-grid__head {
	display: grid;
	grid-template-columns: minmax( 0, 1.35fr ) minmax( 18rem, 0.65fr );
	gap: clamp( 2rem, 7vw, 7rem );
	align-items: end;
	margin-bottom: var(--wp--preset--spacing--60);
}
.if-team-profile-grid__head > *,
.if-team-card__body > * {
	margin-block: 0;
}
.if-team-profile-grid__intro {
	max-width: 38rem;
	color: color-mix( in srgb, currentColor 72%, transparent );
}
.if-team-profile-grid__grid {
	--if-team-grid-gap: clamp( 1.5rem, 3vw, 2.5rem );
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 15rem ), 1fr ) );
	gap: var(--if-team-grid-gap);
}
.if-team-profile-grid__grid > * {
	margin-block-start: 0;
}
.if-team-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
}
.if-team-card__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--shape--radius-lg);
	background: var(--wp--preset--color--outline);
}
.if-team-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 420ms cubic-bezier( 0.22, 1, 0.36, 1 );
}
.if-team-card__body {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.55rem;
	margin: -2rem 1rem 0;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--shape--radius-lg);
	box-shadow: 0 14px 32px rgba( 0, 0, 0, 0.08 );
}
.if-team-card__role,
.if-team-card__credentials {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}
.if-team-card__role {
	color: var(--wp--preset--color--primary);
}
.if-team-card__credentials {
	color: color-mix( in srgb, currentColor 62%, transparent );
}
.if-team-card__bio {
	color: color-mix( in srgb, currentColor 72%, transparent );
}
.if-team-card__link {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}
.if-team-card__link a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	text-decoration: none;
}
.if-team-card__link a::after {
	content: "\2192";
	transition: transform 180ms ease;
}
@media (hover: hover) {
	.if-team-card:hover .if-team-card__media img {
		transform: scale( 1.025 );
	}
	.if-team-card__link a:hover::after {
		transform: translateX( 0.25rem );
	}
}

@media (max-width: 1100px) {
	.if-team-profile-grid__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
	.if-team-profile-grid__grid:where( :has( > .if-team-card:nth-child( 3 ):last-child ) ) > .if-team-card:last-child {
		grid-column: 1 / -1;
		width: calc( ( 100% - var(--if-team-grid-gap) ) / 2 );
		justify-self: center;
	}
}

/* CTA — Appointment panel */
.if-cta-appointment {
	padding-block: var(--wp--preset--spacing--70);
}
.if-cta-appointment__eyebrow {
	margin-bottom: var(--wp--preset--spacing--40);
	color: inherit;
	opacity: 0.8;
}
.if-cta-appointment__main {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	gap: clamp( 2rem, 7vw, 7rem );
	align-items: end;
}
.if-cta-appointment__copy {
	max-width: 48rem;
}
.if-cta-appointment__copy > * {
	margin-block-start: 0;
}
.if-cta-appointment__actions {
	display: grid;
	gap: 0.75rem;
}
.if-cta-appointment__actions .wp-block-button,
.if-cta-appointment__actions .wp-block-button__link {
	width: 100%;
}
.if-cta-appointment__actions .is-style-outline .wp-block-button__link {
	color: inherit;
	border-color: color-mix( in srgb, currentColor 60%, transparent );
}
.if-cta-appointment__details {
	gap: 0;
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid color-mix( in srgb, currentColor 32%, transparent );
	font-size: 0.875rem;
	opacity: 0.8;
}
.if-cta-appointment__details p {
	margin: 0;
}
.if-cta-appointment__details p + p::before {
	content: "·";
	margin-inline: 0.75rem;
}

/* Clinical uses harder edges and rules so the new compositions feel
   precise beside its elevated service cards, not like more cards. */
.if-brand-clinical :is( .if-feature-editorial-offset__media img, .if-feature-editorial-offset__panel, .if-testimonial-outcome__media img ) {
	border-radius: var(--wp--custom--shape--radius);
}
.if-brand-clinical .if-feature-editorial-offset__panel {
	box-shadow: 0 18px 45px rgba( 21, 49, 44, 0.1 );
}

@media (max-width: 900px) {
	.if-team-profile-grid__head {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
		margin-bottom: var(--wp--preset--spacing--50);
	}
	.if-services-editorial__intro {
		position: static;
	}
	.if-services-editorial__copy {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}
	.if-feature-editorial-offset__panel {
		margin-left: -2rem;
	}
	.if-cta-appointment__main {
		grid-template-columns: 1fr;
	}
	.if-cta-appointment__actions {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media (max-width: 781px) {
	.if-proof-facts__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		row-gap: 1.5rem;
	}
	.if-proof-facts__item,
	.if-proof-facts__item:first-child,
	.if-proof-facts__item:last-child {
		padding-inline: 1rem;
	}
	.if-proof-facts__item:nth-child( odd ) {
		padding-left: 0;
		border-left: 0;
	}
	.if-proof-facts__item:nth-child( even ) {
		padding-right: 0;
		border-left: 1px solid color-mix( in srgb, currentColor 32%, transparent );
	}
	.if-services-editorial,
	.if-feature-editorial-offset,
	.if-testimonial-outcome,
	.if-cta-appointment {
		padding-block: var(--wp--preset--spacing--60);
	}
	.if-services-editorial__layout,
	.if-feature-editorial-offset__layout,
	.if-testimonial-outcome__layout {
		gap: var(--wp--preset--spacing--50);
	}
	.if-feature-editorial-offset__media img,
	.if-testimonial-outcome__media img {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
	.if-feature-editorial-offset__panel {
		margin: -4rem 1rem 0;
		padding: clamp( 1.5rem, 6vw, 2.5rem );
	}
}

@media (max-width: 640px) {
	.if-team-profile-grid__grid {
		grid-template-columns: 1fr;
	}
	.if-team-profile-grid__grid:where( :has( > .if-team-card:nth-child( 3 ):last-child ) ) > .if-team-card:last-child {
		grid-column: auto;
		width: auto;
	}
}

@media (max-width: 520px) {
	.if-team-profile-grid {
		padding-block: var(--wp--preset--spacing--60);
	}
	.if-team-card__body {
		margin: -1.5rem 0.75rem 0;
		padding: var(--wp--preset--spacing--30);
	}
	.if-services-editorial__item {
		grid-template-columns: 2rem minmax( 0, 1fr );
	}
	.if-services-editorial__item::after {
		display: none;
	}
	.if-testimonial-outcome__meta,
	.if-cta-appointment__details {
		display: grid;
		gap: 0.5rem;
	}
	.if-testimonial-outcome__meta p + p::before,
	.if-cta-appointment__details p + p::before {
		display: none;
	}
	.if-cta-appointment__actions {
		grid-template-columns: 1fr;
	}
}

/* ---- Small utilities -------------------------------------------------- */
.if-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.75rem;
}

/* Eyebrow text on the accent colour (hero-contained, pricing-tiers, and
   every card via impactflow_card()) fails WCAG AA on 5 of 6 skins as
   small text — as low as 1.86:1 on the default palette. `accent` itself
   is tuned for buttons/borders/fills at larger sizes and stays that way
   (it's part of the colour review Alex is doing separately); this gives
   small accent text its own value instead — same hue, darkened only as
   far as needed to clear 4.5:1 against both `base` and `surface`.
   Dark-mode accents already clear AA on their own (6.3:1+ everywhere),
   so they fall through to the plain preset value unchanged. */
:root {
	--if-eyebrow-accent: var(--wp--preset--color--accent);
}
:root.if-brand-clinical:not([data-theme="dark"]) { --if-eyebrow-accent: #826532; }
:root.if-brand-elegant:not([data-theme="dark"]) { --if-eyebrow-accent: #826828; }
:root.if-brand-essential:not([data-theme="dark"]) { --if-eyebrow-accent: #4d7641; }
:root.if-brand-gallery:not([data-theme="dark"]) { --if-eyebrow-accent: #766e62; }
:root.if-brand-modern:not([data-theme="dark"]) { --if-eyebrow-accent: #0b7a8d; }
:root.if-brand-amplified:not([data-theme="dark"]) { --if-eyebrow-accent: #506e0b; }
:root.if-brand-hospitality:not([data-theme="dark"]) { --if-eyebrow-accent: #80592e; }
/* Raw gold (#C9A24B) is worse here than on any other skin — 2.4:1 / 1.97:1
   against base/surface — darkened toward contrast to clear 4.6:1. This
   only covers the `.has-accent-color` spots common to every skin
   (hero-contained badge, card eyebrows, pricing header); see the
   `--if-eyebrow-primary` block below for Wellness's *other* eyebrows,
   which the style doc puts on primary (moss) instead of accent. */
:root.if-brand-wellness:not([data-theme="dark"]) { --if-eyebrow-accent: #776538; }

.if-eyebrow.has-accent-color,
.if-card__eyebrow.has-accent-color {
	/* WP's own `.has-accent-color` utility ships `!important` (global
	   styles inline CSS), so a plain declaration here would silently
	   lose regardless of selector specificity. */
	color: var(--if-eyebrow-accent) !important;
}

/* Wellness routes most eyebrows through primary, not accent (per the
   style doc — accent/gold is reserved for quote marks and stat
   highlights "sparingly"). Every other skin's primary is dark enough to
   pass AA as small text already; Wellness's moss primary (#5F7355) is
   not — 4.24:1 against the sand surface tint, just under AA — so it
   needs the same darken-and-reassert treatment as accent above, but
   scoped to this brand only so no other skin's primary-coloured text
   is touched. Dark mode's primary (#87a17c) already clears 6.4:1+, so
   it falls through unchanged. */
:root.if-brand-wellness:not([data-theme="dark"]) { --if-eyebrow-primary: #5b6d51; }
.if-brand-wellness .if-eyebrow.has-primary-color,
.if-brand-wellness .if-card__eyebrow.has-primary-color {
	color: var(--if-eyebrow-primary, var(--wp--preset--color--primary)) !important;
}

/* ==================================================================
   Structural traits — per skin
   The skin "levers" that go beyond colour. Palette / type / radii /
   section-gap live in styles/<skin>.json; these restyle the shared
   pattern markup by the `.if-brand-<slug>` class on <html>. Only the
   three skins that diverge from the defaults appear here — Gallery,
   Amplified and Modern keep bordered cards / caps eyebrow / panel
   quote / boxed FAQ / tinted cards section (the base rules above).
   Card treatment is scoped to the Cards section, blog-archive cards
   and pricing tiers; feature-grid and steps keep their own look.
   ================================================================== */

/* ---- Clinical — elevated cards on the tinted section ------------- */
/* Blog index cards (.if-index__list > li) and the sidebar's Recent
   posts row (.if-article__recent li) get the same elevated treatment
   as the section card pattern — flagged in "Blog Spec Fixes - Clinical
   Skin.md" as still showing the flat bordered/no-shadow look, which is
   Essential's card language, not Clinical's. Verified live before
   fixing: the fill colour, border colour and corner radius the doc
   also flagged were already correct (fixed by the earlier skin-token
   refresh) — only the border-vs-shadow swap was still outstanding. */
.if-brand-clinical :is( .if-card, .if-price-tier:not( .if-price-tier--featured ), .if-index__list > li, .if-article__recent li ) {
	background: var(--wp--preset--color--base);
	border-color: transparent;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 ), 0 8px 24px rgba( 0, 0, 0, 0.07 );
}
/* Recent posts didn't have a boundary to begin with (no border,
   padding or radius at all) — the properties above only had a border
   to neutralise on the other two, so this one needs the rest spelled
   out. Tighter padding + the smaller radius token, per the spec doc's
   "same treatment, tighter" note. */
.if-brand-clinical .if-article__recent li {
	border-radius: var(--wp--custom--shape--radius);
	padding: 14px;
}
/* Clinical's carousel arrows are a true circle rather than the shared
   component's shape-token corner radius — background and icon colour
   already match the spec (base = white, contrast = text colour) with
   no override needed. */
.if-brand-clinical .if-slider-nav__btn {
	border-radius: 50%;
}
@media (hover: hover) {
	.if-brand-clinical :is( .if-card, .if-index__list > li ):hover {
		box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.06 ), 0 14px 34px rgba( 0, 0, 0, 0.11 );
	}
}
/* On a dark ground a drop shadow does nothing — lift the card off the
   tinted section with a hairline instead. */
:root[data-theme="dark"] .if-brand-clinical :is( .if-card, .if-price-tier:not( .if-price-tier--featured ), .if-index__list > li, .if-article__recent li ) {
	border-color: var(--wp--preset--color--outline);
	box-shadow: none;
}

/* ---- Essential — filled sage cards, accent-rule eyebrow, plain
        quote, white cards section -------------------------------- */
.if-brand-essential .if-cards-section {
	background: var(--wp--preset--color--base);
}
.if-brand-essential :is( .if-card, .if-price-tier:not( .if-price-tier--featured ) ) {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--outline);
	box-shadow: none;
}
.if-brand-essential .if-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	letter-spacing: 0.08em;
}
.if-brand-essential .if-eyebrow.has-text-align-center {
	justify-content: center;
}
.if-brand-essential .if-eyebrow::before {
	content: "";
	flex: none;
	width: 1.75rem;
	height: 2px;
	background: var(--wp--preset--color--accent);
}

/* ---- Elegant — hairline-rule cards, italic serif eyebrow, plain
        quote, divider-rule FAQ, white cards section, wide gap ----- */
.if-brand-elegant .if-cards-section {
	background: var(--wp--preset--color--base);
}
.if-brand-elegant .if-cards-grid,
.if-brand-elegant .if-cards-list {
	gap: var(--wp--custom--card-gap, 2.5rem);
}
.if-brand-elegant .if-card {
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}
.if-brand-elegant .if-card__media {
	border-radius: 0;
}
.if-brand-elegant .if-card__body {
	padding-inline: 0;
}
/* icon cards: a hairline above, a 2px gold bar in place of the icon chip */
.if-brand-elegant :is( .if-card.is-style-if-card-icon, .is-style-if-card-icon .if-card ) {
	border-top: 1px solid var(--wp--preset--color--outline);
	padding-top: 1.5rem;
}
.if-brand-elegant :is( .if-card.is-style-if-card-icon, .is-style-if-card-icon .if-card ) .if-card__media {
	width: 2rem;
	height: 2px;
	background: var(--wp--preset--color--accent);
	margin-bottom: 1.25rem;
}
.if-brand-elegant :is( .if-card.is-style-if-card-icon, .is-style-if-card-icon .if-card ) .if-card__media img {
	display: none;
}
/* image cards: keep the photo, a 2px gold rule between it and the text */
.if-brand-elegant :is( .if-card.is-style-if-card-full, .is-style-if-card-full .if-card, .if-card.is-style-if-card-link, .is-style-if-card-link .if-card ) .if-card__body {
	border-top: 2px solid var(--wp--preset--color--accent);
	padding-top: 1.25rem;
}
.if-brand-elegant .if-price-tier {
	border-radius: 0;
	background: transparent;
}
/* The blog index (.if-index__list, shared by all three blog styles)
   had no Elegant override at all — it was rendering as a plain white
   bordered box, the generic/default card look, instead of this skin's
   "rule" treatment (no box, a hairline/rule accent) already applied to
   the section-pattern .if-card above. Mirrors that: transparent, no
   border box, and — since there's always a featured image on an index
   card — the "image card" variant's 2px accent rule between the photo
   and the text, in place of the hairline that normally sits under it. */
.if-brand-elegant .if-index__list {
	gap: var(--wp--custom--card-gap, 2.5rem);
}
.if-brand-elegant .if-index__list > li {
	background: transparent;
	border: 0;
	border-radius: 0;
}
.if-brand-elegant .if-index__media {
	border-bottom: 0;
	border-radius: 0;
}
.if-brand-elegant .if-index__cat {
	border-top: 2px solid var(--wp--preset--color--accent);
	padding-top: 1.25rem;
}
@media (hover: hover) {
	/* No elevation effect anywhere else in this skin's card language —
	   a shadow/lift on hover would be the one place it reappeared. */
	.if-brand-elegant .if-index__list > li:hover {
		box-shadow: none;
		transform: none;
	}
}

/* ---- Hospitality — a soft lift on every card, warm and appetite-
        forward. Unlike the blog index (which the handoff canvas
        showed using the plain default — no shadow until hover, so no
        override needed there), the section-pattern card is meant to
        sit slightly off the page even at rest, per the "Card variants"
        canvas: 0 1px 3px at rest, intensifying to the same 0 10px 28px
        every other skin's hover already uses. Text- and quote-style
        cards are excluded — the canvas shows both flat, no shadow at
        either state. */
.if-brand-hospitality .if-card {
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.06 );
}
.if-brand-hospitality :is(
	.if-card.is-style-if-card-text, .is-style-if-card-text .if-card,
	.if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card
) {
	box-shadow: none;
}
@media (hover: hover) {
	.if-brand-hospitality .if-card:hover {
		box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.1 );
	}
	.if-brand-hospitality :is( .if-card.is-style-if-card-link, .is-style-if-card-link .if-card ):hover {
		transform: translateY( -3px );
	}
}

/* ---- Wellness — sand-filled cards, no border anywhere, the tint and
        a soft hover lift do the separating. Unlike Hospitality, this
        one genuinely does apply to the blog index too — the dedicated
        "Journal" canvas confirms the same sand-tint/no-border/hover-
        only-shadow treatment there as the general "Card variants"
        canvas, not the shared default. Shadow colour is tinted toward
        the ink colour (46,47,40), not plain black, matching every
        shadow value in both canvases. Text- and quote-style cards
        already render correctly from the shared defaults (surface
        fill; primary fill with a same-colour border that reads as no
        border) — no override needed for either. */
.if-brand-wellness :is( .if-card, .if-index__list > li ) {
	background: var(--wp--preset--color--surface);
	border-color: transparent;
	box-shadow: none;
}
.if-brand-wellness .if-index__media {
	border-bottom: 0;
}
@media (hover: hover) {
	.if-brand-wellness :is( .if-card, .if-index__list > li ):hover {
		border-color: transparent;
		box-shadow: 0 14px 32px rgba( 46, 47, 40, 0.1 );
	}
}

/* The Quote card is deliberately always on the brand colour, so the
   per-skin card treatments above must not repaint it. Their selectors
   tie with the base Quote rule on specificity and win on source order,
   so re-assert it here at a higher weight. */
.if-brand-clinical :is( .if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card ),
.if-brand-essential :is( .if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card ),
.if-brand-elegant :is( .if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card ),
.if-brand-wellness :is( .if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card ) {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--shape--radius-lg);
	box-shadow: none;
	overflow: hidden;
	padding-top: 0;
}
.if-brand-elegant :is( .if-card.is-style-if-card-quote, .is-style-if-card-quote .if-card ) .if-card__body {
	border-top: 0;
	padding: var(--wp--preset--spacing--50);
}
.if-brand-elegant .if-eyebrow {
	font-family: var( --wp--preset--font-family--heading ), serif;
	font-style: italic;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
	color: var(--wp--preset--color--primary);
}
.if-brand-elegant .if-faq__list {
	gap: 0;
}
.if-brand-elegant .if-faq__item {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--outline);
	border-radius: 0;
	padding-inline: 0;
}
.if-brand-elegant .if-faq__list > .if-faq__item:first-child {
	border-top: 1px solid var(--wp--preset--color--outline);
}
.if-brand-elegant .if-faq__item > summary {
	padding-block: 1.375rem;
}

/* ---- Essential + Elegant — "plain" testimonial: a serif quote
        between rules instead of a filled brand-colour panel ------- */
.if-brand-essential .if-quotes__hero,
.if-brand-elegant .if-quotes__hero {
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	border-block: 1px solid var(--wp--preset--color--outline);
	border-radius: 0;
	padding: var(--wp--preset--spacing--50) 0;
	text-align: center;
}
.if-brand-essential .if-quotes__hero .if-quotes__mark,
.if-brand-elegant .if-quotes__hero .if-quotes__mark {
	display: none;
}
.if-brand-essential .if-quotes__hero .if-quotes__quote,
.if-brand-elegant .if-quotes__hero .if-quotes__quote,
.if-brand-essential :is( .if-quotes-grid, .if-quotes-featured ) .if-quotes__card .if-quotes__quote,
.if-brand-elegant :is( .if-quotes-grid, .if-quotes-featured ) .if-quotes__card .if-quotes__quote {
	font-family: var( --wp--preset--font-family--heading ), serif;
	font-style: italic;
	font-weight: 400;
}
.if-brand-essential .if-quotes-grid .if-quotes__card,
.if-brand-elegant .if-quotes-grid .if-quotes__card {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--outline);
	border-radius: 0;
	padding-inline: 0;
}
.if-brand-essential .if-quotes-featured .if-quotes__card,
.if-brand-elegant .if-quotes-featured .if-quotes__card {
	background: transparent;
	border: 0;
	border-left: 2px solid var(--wp--preset--color--outline);
	border-radius: 0;
	padding: 0.15rem 0 0.15rem 1rem;
}

/* ==================================================================
   Responsive / mobile
   Breakpoints follow the mobile designs: 1024 (tablet) / 768 (phone) /
   480 (small phone) + a coarse-pointer block. Desktop-first: these only
   *reduce* columns and tighten rhythm. WordPress already stacks
   core/columns below 782px, so split layouts need no help here.
   ================================================================== */

/* -- 1024: drop one column -------------------------------------------- */
@media (max-width: 1024px) {
	.if-feature-grid .if-feature__grid,
	.if-quotes-grid .if-quotes__grid,
	.if-quotes-rated .if-quotes__grid,
	.if-steps-cards .if-steps__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
	.if-steps-horizontal .if-steps__row,
	.if-steps-numbers .if-steps__flow {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
	.if-steps-horizontal .if-steps__row:where( :has( > .if-steps__item:nth-child( 3 ):last-child ) ) {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
	.if-steps-horizontal .if-steps__row:where( :has( > .if-steps__item:nth-child( 4 ):last-child ) ) .if-steps__item:nth-child( 2 )::before {
		display: none;
	}
	.if-blog-grid .wp-block-post-template {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}
	.if-quotes-featured,
	.if-blog-featured {
		grid-template-columns: 1fr;
	}
	.if-pricing-row {
		grid-template-columns: minmax( 120px, 1.2fr ) repeat( 3, minmax( 90px, 1fr ) );
	}
}

/* -- 768: single column, tighter rhythm, mobile hero + slider -------- */
@media (max-width: 768px) {
	.if-cta,
	.if-steps,
	.if-feature,
	.if-quotes,
	.if-logos,
	.if-blog,
	.if-faq,
	.if-pricing-section,
	.if-slider-section {
		margin-block: var(--wp--preset--spacing--50);
	}
	.if-steps__head,
	.if-feature__head,
	.if-quotes__head,
	.if-pricing-head {
		margin-bottom: var(--wp--preset--spacing--40);
	}

	.if-feature-grid .if-feature__grid,
	.if-quotes-grid .if-quotes__grid,
	.if-quotes-rated .if-quotes__grid,
	.if-quotes-featured .if-quotes__grid,
	.if-steps-cards .if-steps__grid,
	.if-steps-horizontal .if-steps__row,
	.if-steps-numbers .if-steps__flow {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}
	.if-blog-grid .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
	.if-quotes-text .if-quotes__cols {
		columns: 1;
	}
	.if-logos-grid .if-logos__cells {
		grid-template-columns: repeat( 2, 1fr );
	}
	.if-logos-grid .if-logos__cells > .if-logos__cell:nth-child(-n+4) {
		border-top: 1px solid var(--wp--preset--color--outline);
	}
	.if-logos-grid .if-logos__cells > .if-logos__cell:nth-child(-n+2) {
		border-top: 0;
	}
	.if-logos-grid .if-logos__cells > .if-logos__cell:nth-child(2n+1) {
		border-left: 0;
	}

	/* Steps: the row now stacks, so drop the connecting lines / arrows */
	.if-steps-horizontal .if-steps__item::before,
	.if-steps-numbers .if-steps__item::after {
		display: none;
	}
	.if-steps-numbers .if-steps__flow {
		gap: var(--wp--preset--spacing--50);
	}

	/* CTA: stack copy over the button, tighten the padding */
	.if-cta-split,
	.if-cta-minimal {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--40);
		padding: var(--wp--preset--spacing--50);
	}
	.if-cta-card {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
	.if-cta-fullbleed > .wp-block-cover__inner-container {
		padding-inline: var(--wp--preset--spacing--40);
	}
	.if-logos-split {
		flex-direction: column;
		align-items: flex-start;
	}
	.if-logos-split .if-logos__track {
		justify-content: flex-start;
	}

	/* Comparison table keeps its own horizontal scroll; nudge the min-width down */
	.if-pricing-table {
		min-width: 560px;
	}

	/* Image heroes: shorter, copy gets room for the sticky CTA, vertical scrim */
	.if-hero-large,
	.if-hero-slider .wp-block-cover {
		min-height: 78vh;
	}
	.if-hero-large > .wp-block-cover__inner-container,
	.if-hero-slider .wp-block-cover > .wp-block-cover__inner-container {
		padding-block: var(--wp--preset--spacing--60);
	}
	.if-hero-large .wp-block-cover__background,
	.if-hero-slider .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			color-mix( in srgb, #0a0a0a 45%, transparent ) 0%,
			color-mix( in srgb, #0a0a0a 82%, transparent ) 100%
		) !important;
	}

	/* Keep copy above Cover's background layers. The optional CTA bar
	   anchors to this container; older saved heroes retain their inline CTA. */
	.if-hero-large > .wp-block-cover__inner-container {
		position: relative;
		z-index: 1;
	}
	.if-hero-large .if-hero-copy {
		max-width: none;
	}
	.if-hero-large > .wp-block-cover__inner-container:has(> .if-hero__sticky) .if-hero-copy {
		padding-bottom: 4.5rem;
	}
	.if-hero-large > .wp-block-cover__inner-container:has(> .if-hero__sticky) .if-hero-copy > .wp-block-buttons {
		display: none;
	}
	.if-hero-large > .wp-block-cover__inner-container > .if-hero__sticky {
		display: flex;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		padding: 0.75rem;
		background: color-mix( in srgb, #0a0a0a 90%, transparent );
		border-top: 1px solid rgba( 255, 255, 255, 0.18 );
	}
	.if-hero-large .if-hero__sticky .wp-block-button,
	.if-hero-large .if-hero__sticky .wp-block-button__link {
		width: 100%;
	}

	/* Section sliders: arrows move to the bottom edge */
	.if-slider-carousel {
		scroll-padding-inline: var(--wp--preset--spacing--40);
	}
	.if-slider-nav {
		position: static;
		margin: 0 0 var(--wp--preset--spacing--30);
	}
	.if-hero-slider__nav {
		top: auto;
		bottom: 4.5rem;
		transform: none;
		width: 40px;
		height: 40px;
	}
	.if-gallery-slider__arrow {
		width: 40px;
		height: 40px;
	}
}

/* Hero sticky bar is desktop-hidden by default (shown at 768 above).
   Needs 2 classes to beat core's `.wp-block-buttons { display: flex }`. */
.if-hero-large .if-hero__sticky {
	display: none;
}

/* -- 480: last columns collapse, full-width buttons ----------------- */
@media (max-width: 480px) {
	.if-logos-grid .if-logos__cells {
		grid-template-columns: 1fr;
	}
	.if-pricing-row {
		grid-template-columns: 1fr;
	}
	.if-pricing-row {
		display: block;
	}
	.if-pricing-row--head .if-pricing-col {
		border-left: 0;
	}
	.if-cta .wp-block-button,
	.if-cta .wp-block-button__link,
	.if-price-tier__cta .wp-block-button,
	.if-price-tier__cta .wp-block-button__link,
	.if-quotes-featured .wp-block-button,
	.if-steps .wp-block-button {
		width: 100%;
	}
	.if-cta__actions,
	.if-price-tier__cta {
		width: 100%;
	}
}

/* -- Coarse pointer: 44px targets, tap feedback instead of hover ---- */
@media (hover: none) and (pointer: coarse) {
	.wp-block-button__link,
	.if-faq__item > summary,
	.if-faq__tab,
	.if-pricing-toggle__seg,
	.if-theme-switch,
	.if-slider-nav__btn,
	.if-hero-slider__nav,
	.if-gallery-slider__arrow,
	.if-gallery-slider__thumb,
	.if-quotes-slider__dot {
		min-height: 44px;
	}
	.if-hero-slider__dot,
	.if-quote-slider__dot {
		position: relative;
	}
	/* Language codes: pad the hit area rather than force 44px height in
	   the header row. */
	.if-langswitch__link,
	.if-langswitch__current {
		display: inline-flex;
		align-items: center;
		padding-block: 0.6rem;
	}
	.if-hero-slider__dot::after,
	.if-quote-slider__dot::after {
		content: "";
		position: absolute;
		inset: -16px;
	}
	.if-slide-card,
	.if-card,
	.if-price-tier,
	.wp-block-button__link,
	.if-slider-nav__btn,
	.if-hero-slider__nav {
		transition: none;
	}
	.wp-block-button__link:active,
	.if-slider-nav__btn:active,
	.if-hero-slider__nav:active,
	.if-gallery-slider__arrow:active {
		filter: brightness( 0.92 );
	}
}

/* ==================================================================
   Mobile navigation drawer
   Restyles core/navigation's overlayMenu:"mobile" as a right-side
   drawer with a scrim, in any header (the theme's default header part
   and every "ImpactFlow: Headers" pattern). WordPress keeps ownership
   of the open/close toggle, focus trap, Esc and aria — this is
   presentation only.
   ================================================================== */
.wp-site-blocks header .wp-block-navigation__responsive-container-open,
.wp-site-blocks header .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
}

@media (max-width: 960px) {
	/* Core's `overlayMenu: mobile` changes at 600px, which is too late
	   for a header containing navigation, commerce tools, languages and
	   a CTA. Use the complete drawer treatment as soon as the row becomes
	   crowded, including the same trigger design at every compact width. */
	.wp-site-blocks header .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex;
	}
	.if-header__bar {
		flex-wrap: nowrap !important;
	}
	.if-header__end {
		min-width: 0;
	}
	/* Strongly contain the closed core overlay. WordPress's navigation
	   stylesheet is printed after theme styles on some templates, so
	   repeat the complete off-canvas geometry here rather than relying
	   on its inherited visibility alone. */
	.wp-site-blocks
		header
		.wp-block-navigation__responsive-container:not( .is-menu-open ) {
		position: fixed !important;
		inset: 0 !important;
		z-index: 100000;
		visibility: hidden !important;
		pointer-events: none !important;
	}
	.wp-site-blocks
		header
		.wp-block-navigation__responsive-container:not( .is-menu-open )
		.wp-block-navigation__responsive-container-content {
		visibility: hidden !important;
	}
	/* A distinct 44px control with a custom three-stroke mark. The core
	   SVG remains intact for the no-JS path and is hidden only after the
	   enhancement has supplied its replacement. */
	.wp-site-blocks header .if-nav-enhanced :is(
		.wp-block-navigation__responsive-container-open,
		.wp-block-navigation__responsive-container-close
	) {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--wp--preset--color--outline);
		border-radius: var(--wp--custom--shape--radius);
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--contrast);
		box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
		transition: border-color 180ms ease, background-color 180ms ease,
			transform 180ms ease, box-shadow 180ms ease;
	}
	.wp-site-blocks header .if-nav-enhanced :is(
		.wp-block-navigation__responsive-container-open,
		.wp-block-navigation__responsive-container-close
	) > svg {
		display: none;
	}
	.if-menu-icon {
		position: relative;
		display: block;
		width: 22px;
		height: 18px;
	}
	.if-menu-icon > span {
		position: absolute;
		left: 0;
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 999px;
		background: currentColor;
		transform-origin: center;
		transition: width 180ms ease, left 180ms ease, top 220ms ease,
			transform 220ms ease, opacity 140ms ease;
	}
	.if-menu-icon > span:nth-child( 1 ) { top: 1px; }
	.if-menu-icon > span:nth-child( 2 ) {
		top: 8px;
		left: 7px;
		width: 15px;
	}
	.if-menu-icon > span:nth-child( 3 ) { top: 15px; }
	.if-menu-icon--close > span:nth-child( 1 ) {
		top: 8px;
		transform: rotate( 45deg );
	}
	.if-menu-icon--close > span:nth-child( 2 ) {
		opacity: 0;
		transform: scaleX( 0 );
	}
	.if-menu-icon--close > span:nth-child( 3 ) {
		top: 8px;
		transform: rotate( -45deg );
	}
	@media (hover: hover) {
		.wp-site-blocks header .if-nav-enhanced :is(
			.wp-block-navigation__responsive-container-open,
			.wp-block-navigation__responsive-container-close
		):hover {
			border-color: var(--wp--preset--color--primary);
			background: var(--wp--preset--color--base);
			box-shadow: 0 5px 16px rgba( 0, 0, 0, 0.09 );
			transform: rotate( 3deg );
		}
		.wp-site-blocks header .if-nav-enhanced .wp-block-navigation__responsive-container-open:hover .if-menu-icon > span:nth-child( 2 ) {
			left: 0;
			width: 22px;
		}
	}
	.wp-site-blocks header .if-nav-enhanced :is(
		.wp-block-navigation__responsive-container-open,
		.wp-block-navigation__responsive-container-close
	):active {
		transform: scale( 0.94 );
	}

	/* Keep the overlay in the render tree when closed (WordPress sets
	   display:none) so the panel can slide, not just fade. It stays
	   invisible and non-interactive; WordPress still owns aria/focus. */
	.wp-site-blocks
		header
		.wp-block-navigation__responsive-container:not( .is-menu-open ) {
		display: block !important;
		visibility: hidden !important;
		pointer-events: none;
		background-color: transparent !important;
		animation: none !important;
		opacity: 1;
		transition: visibility 0s linear 0.42s, background-color 0.36s ease;
	}
	/* The container stays full-screen and becomes the scrim. */
	.wp-site-blocks
		header
		.wp-block-navigation__responsive-container.is-menu-open {
		visibility: visible;
		background-color: rgba( 10, 10, 10, 0.5 ) !important;
		padding: 0;
		animation: none !important;
		opacity: 1;
		transition: background-color 0.36s ease;
	}
	/* The dialog is the drawer panel — pinned to the right. */
	.wp-site-blocks
		header
		.wp-block-navigation__responsive-container
		.wp-block-navigation__responsive-dialog {
		position: fixed;
		inset: 0 0 0 auto;
		width: min( 86vw, 340px );
		box-sizing: border-box;
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40)
			var(--wp--preset--spacing--50);
		overflow-y: auto;
		overscroll-behavior: contain;
		background-color: var(--wp--preset--color--base) !important;
		color: var(--wp--preset--color--contrast);
		border-left: 1px solid var(--wp--preset--color--outline);
		box-shadow: -8px 0 28px rgba( 0, 0, 0, 0.18 );
		transform: translateX( 0 );
		animation: none !important;
		transition: transform 0.42s cubic-bezier( 0.22, 1, 0.36, 1 );
	}
	/* GSAP owns only the panel transform when it is available; the
	   scrim continues to use the CSS background transition. */
	.wp-site-blocks header .if-nav-gsap .wp-block-navigation__responsive-dialog {
		transition: none;
	}
	/* Closed: park the panel off the right edge so opening slides it in. */
	.wp-site-blocks
		header
		.wp-block-navigation__responsive-container:not( .is-menu-open )
		.wp-block-navigation__responsive-dialog {
		transform: translateX( 100% );
	}
	/* Logged-in tablets use the 32px WordPress admin bar. Phones switch
	   to its 46px form in the narrower rule below. */
	.admin-bar
		.wp-site-blocks
		header
		.wp-block-navigation__responsive-container
		.wp-block-navigation__responsive-dialog {
		top: 32px;
	}
	.wp-site-blocks
		header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		min-height: calc( 100dvh - 7rem );
		width: 100%;
		margin-top: var(--wp--preset--spacing--40);
	}
	.if-nav-drawer__label {
		width: 100%;
		margin: 0 0 0.7rem;
		color: var(--wp--preset--color--primary);
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		line-height: 1.2;
		text-transform: uppercase;
	}
	.if-nav-drawer__menu-label {
		order: -2;
	}
	.wp-site-blocks
		header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		order: -1;
		width: 100%;
		gap: 0;
		font-size: clamp( 1.15rem, 2.4vw, 1.35rem );
		align-items: stretch;
		justify-content: flex-start;
		text-align: left;
	}
	.wp-site-blocks
		header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item {
		align-items: stretch;
		width: 100%;
		border-top: 1px solid var(--wp--preset--color--outline);
	}
	.wp-site-blocks
		header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item:last-child {
		border-bottom: 1px solid var(--wp--preset--color--outline);
	}
	.wp-site-blocks
		header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		display: flex;
		justify-content: flex-start;
		width: 100%;
		padding-block: 0.9rem;
		text-align: left;
	}
	.if-nav-drawer__utilities {
		display: grid;
		gap: 0.9rem;
		width: 100%;
		margin-top: auto;
		padding-top: var(--wp--preset--spacing--40);
	}
	.if-nav-drawer__utilities[hidden] {
		display: none;
	}
	.if-nav-drawer__utility-row {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.75rem;
		min-height: 44px;
		padding: 0.65rem 0;
		border-top: 1px solid var(--wp--preset--color--outline);
		border-bottom: 1px solid var(--wp--preset--color--outline);
	}
	.if-nav-drawer__utilities .if-header__tools {
		display: contents;
	}
	.if-nav-drawer__utilities :is(
		.wp-block-woocommerce-customer-account,
		.wp-block-woocommerce-mini-cart
	) {
		margin: 0;
	}
	.if-nav-drawer__utilities > .wp-block-buttons {
		display: grid;
		width: 100%;
		margin-top: 0.15rem;
	}
	.if-nav-drawer__utilities > .wp-block-buttons :is( .wp-block-button, .wp-block-button__link ) {
		width: 100%;
	}
}

@media (max-width: 782px) {
	.admin-bar
		.wp-site-blocks
		header
		.wp-block-navigation__responsive-container
		.wp-block-navigation__responsive-dialog {
		top: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.if-team-card__media img,
	.if-team-card__link a::after,
	.wp-site-blocks header .if-nav-enhanced :is(
		.wp-block-navigation__responsive-container-open,
		.wp-block-navigation__responsive-container-close
	),
	.wp-site-blocks header .if-nav-enhanced .if-menu-icon > span,
	.wp-site-blocks header .wp-block-navigation__responsive-container {
		transition: none !important;
	}
	.wp-site-blocks
		header
		.wp-block-navigation__responsive-container
		.wp-block-navigation__responsive-dialog {
		transition: none;
	}
}

/* Header on small screens: the burger is the primary control here — it
   keeps its full 44px tap target (set above) and moves to the end of
   the row (`order`) so it reads as the main action; the language
   switcher, dark-mode switch and CTA button shrink and move ahead of
   it instead of crowding it at their full desktop size. */
@media (max-width: 600px) {
	.if-header__end {
		gap: 0.4rem;
	}
	.if-header__end .wp-block-navigation {
		order: 3;
	}
	.if-header__tools {
		order: 1;
		gap: 0.4rem;
	}
	.if-header__end .wp-block-buttons {
		order: 2;
	}
	.if-header__end .wp-block-button__link {
		padding: 0.4rem 0.7rem;
		font-size: 0.75rem;
	}
	.if-langswitch {
		font-size: 0.68rem;
		gap: 0.25rem;
	}
	.if-langswitch > * + * {
		padding-left: 0.25rem;
	}
	.if-theme-switch {
		/* Header tools now move into the drawer at compact widths, so the
		   switch can retain its accessible 26px control height. */
		width: 44px;
		height: 26px;
		min-height: 26px;
		padding: 3px;
	}
	.if-theme-switch__knob {
		width: 20px;
		height: 20px;
	}
	.if-header-utility .if-header__utility-bar {
		font-size: 0.8rem;
	}
	.if-header-centered .if-header__bar {
		flex-wrap: wrap;
		justify-content: space-between;
	}
}

/* Optional rotation controls use the active skin in light and dark mode. */
.if-rotation-control {
	padding: 0.5rem 0.75rem;
	min-height: 44px;
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--shape--radius, 4px);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}
.if-rotation-control[hidden] { display: none; }
.if-hero-slider > .if-rotation-control {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 3;
}
.if-quote-slider > .if-rotation-control {
	position: relative;
	z-index: 1;
	margin-bottom: 1rem;
}