/* FFF Clinic, direction A "Clinical calm".
   Colours come from theme.json presets; shorthands below keep this file readable.

   Where the palette comes from:
   teal #1F6566   the brand teal itself, read off the logo PDF the client sent (2026-09-23).
                  Contrast on paper #F6F3EE is 6.10:1, so it is safe for body-size text.
                  An earlier sample from a product photo gave #1B6777; the PDF supersedes it.
   ink #16353A    a darkened relative of the same teal, for headings and the footer.
   paper #F6F3EE  warm off-white, chosen so the clinic's green-walled photos sit calmly on it.
   Replace the teal if the client sends the original logo file; the photo sample is close, not exact. */

:root {
	--paper: var(--wp--preset--color--paper);
	--paper-deep: var(--wp--preset--color--paper-deep);
	--line: var(--wp--preset--color--line);
	--teal: var(--wp--preset--color--teal);
	--teal-soft: var(--wp--preset--color--teal-soft);
	--ink: var(--wp--preset--color--ink);
	--muted: var(--wp--preset--color--muted);
	--field: #FFFDF9;   /* form fields and order tables: a step lighter than the paper so they read as fillable */
	--serif: var(--wp--preset--font-family--serif);
	--sans: var(--wp--preset--font-family--sans);
	--section-y: var(--wp--preset--spacing--60);
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--maxw: 1200px;
}

/* Layout spine.
   WordPress's constrained layout makes each direct child of a section the 1200px column and
   centres it, so any child with its own max-width (a heading held to 18ch, say) ends up centred
   on the page instead of ranged left in the column. We hold the column with padding on the
   section instead, and let children be ordinary flow content. Class names are doubled to
   outrank the global-styles padding rule. */
.fff-hero.fff-hero,
.fff-section.fff-section,
.fff-shop-head.fff-shop-head,
.fff-tabs-wrap.fff-tabs-wrap,
.fff-shop.fff-shop,
.fff-product.fff-product,
.fff-partners.fff-partners,
.fff-cta.fff-cta,
.fff-footer.fff-footer {
	padding-inline: max(var(--gutter), calc(50% - var(--maxw) / 2));
}
:is(.fff-hero, .fff-section, .fff-shop-head, .fff-tabs-wrap, .fff-shop, .fff-product, .fff-partners, .fff-cta, .fff-footer) > * {
	max-width: none !important;
	margin-inline: 0 !important;
}
.fff-cta { --maxw: 820px; }
.fff-soon { --maxw: 640px; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* The designed pages stack full-width sections with no gaps between them. */
.fff-main { margin-block: 0; padding: 0; }
.fff-main > .wp-block-post-content > * + * { margin-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- Shared bits ---------- */
.fff-eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--teal);
	font-weight: 500;
	margin-block-end: .75rem;
}
.fff-section { padding-block: var(--section-y); }
.fff-section--tint { background: var(--paper-deep); }
.fff-section__title { max-width: 18ch !important; margin-block: 0 clamp(1.75rem, 4vw, 3rem); }
.fff-lede { font-size: var(--wp--preset--font-size--lg); color: var(--muted); line-height: 1.6; }
.fff-card__link a {
	color: var(--teal);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.fff-card__link a::after { content: " \2192"; }
.fff-card__link a:hover { color: var(--ink); }
.fff-split { gap: clamp(2rem, 6vw, 5rem); }
.fff-split .fff-section__title { margin-block-end: 1rem; }

/* ---------- Header ---------- */
/* The frosted blur lives on a pseudo-element, not the header itself. A backdrop-filter on
   the header makes it the containing block for position:fixed children, which trapped the
   mobile menu overlay inside the 70px header strip instead of covering the screen. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	isolation: isolate;
	border-bottom: 1px solid var(--line);
}
.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--paper) 92%, transparent);
	backdrop-filter: saturate(1.2) blur(10px);
	-webkit-backdrop-filter: saturate(1.2) blur(10px);
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
.fff-header__bar { padding-block: .9rem; gap: 1.5rem; flex-wrap: nowrap; align-items: center; }
.fff-header__right { gap: clamp(1rem, 2.5vw, 2rem); flex-wrap: nowrap; align-items: center; }
.fff-brand { gap: .65rem; align-items: center; }
.fff-brand .wp-block-site-logo { line-height: 0; }
.fff-brand .wp-block-site-logo img { display: block; height: auto; }
.fff-logo { margin: 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; letter-spacing: -.01em; }
.fff-logo a { color: var(--ink); text-decoration: none; }
/* The logo file is teal artwork; knock it back to white for the dark footer. */
.fff-brand--footer .wp-block-site-logo img { filter: brightness(0) invert(1); }
.fff-nav { font-size: var(--wp--preset--font-size--sm); gap: 1.6rem; }
.fff-nav a { color: var(--ink); text-decoration: none; }
.fff-nav a:hover { color: var(--teal); }
.fff-nav .current-menu-item > a, .fff-nav a[aria-current="page"] { color: var(--teal); }
.fff-header__cta .wp-block-button__link { padding: .65rem 1.2rem; }
.fff-header__right > p { margin: 0; display: flex; align-items: center; }
.fff-cart { position: relative; display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); border-radius: 50%; }
.fff-cart:hover { background: var(--teal-soft); color: var(--teal); }
.fff-cart__count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--teal);
	color: var(--paper);
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}

/* Mobile menu overlay */
.fff-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--paper) !important;
	color: var(--ink) !important;
	padding: 1.5rem clamp(1rem, 5vw, 2rem);
}
.fff-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start !important;
	padding-top: 3.5rem;
}
.fff-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	gap: 1.25rem;
	font-family: var(--serif);
	font-size: 1.9rem;
}
.fff-nav .wp-block-navigation__responsive-container.is-menu-open a { color: var(--ink); }
.fff-nav .wp-block-navigation__responsive-container.is-menu-open a:hover { color: var(--teal); }
/* Blog sits in the tap-open menu only; the desktop bar keeps the brief's links. */
.fff-nav .fff-nav__menu-only { display: none; }
.fff-nav .is-menu-open .fff-nav__menu-only { display: flex; }
.has-modal-open .fff-wa-float { display: none; }
.fff-nav .wp-block-navigation__responsive-container-open svg,
.fff-nav .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }

/* ---------- Hero ---------- */
.fff-hero { padding-block: clamp(2.5rem, 6vw, 5rem) 0; }
.fff-hero__cols { gap: clamp(2rem, 6vw, 5rem); }
.fff-hero__title { margin-block: 0 1.25rem; max-width: 13ch; overflow-wrap: normal; hyphens: manual; text-wrap: balance; }
.fff-hero__title em { font-style: italic; color: var(--teal); }
.fff-hero__lede { font-size: var(--wp--preset--font-size--lg); color: var(--muted); max-width: 34ch; margin-block-end: 2rem; }
.fff-btn-lg .wp-block-button__link { padding: 1.05rem 2rem; font-size: 1rem; }
.fff-hero__photo { margin: 0; }
.fff-hero__photo img,
.fff-doctor__photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 220px 220px 12px 12px;
	display: block;
}

.fff-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
	border-top: 1px solid var(--line);
}
.fff-stat {
	margin: 0;
	padding: 1.4rem 1.25rem 1.6rem 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--muted);
	line-height: 1.45;
}
.fff-stat + .fff-stat { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.fff-stat strong {
	display: block;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	color: var(--ink);
	margin-bottom: .2rem;
}

/* ---------- Problem rows ---------- */
.fff-rows { border-top: 1px solid var(--line); }
.fff-rows > * + * { margin-block-start: 0; }
.fff-row {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	align-items: baseline;
	margin: 0;
	padding-block: 1.4rem;
	border-bottom: 1px solid var(--line);
	font-family: var(--serif);
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	line-height: 1.35;
}
.fff-row__num { font-family: var(--sans); font-size: var(--wp--preset--font-size--xs); color: var(--teal); letter-spacing: .08em; }

/* ---------- Steps ---------- */
.fff-steps { gap: 0; counter-reset: step; }
.fff-step { padding: 1.75rem 1.75rem 1.75rem 0; border-top: 2px solid var(--teal); }
.fff-step + .fff-step { padding-left: 1.75rem; border-left: 1px solid var(--line); }
.fff-step h3 { margin-block: .5rem .6rem; }
.fff-step p { color: var(--muted); margin: 0; }
.fff-step .fff-step__num { font-size: var(--wp--preset--font-size--xs); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); font-weight: 500; }

/* ---------- Protocol cards ---------- */
.fff-cards { gap: 1.25rem; }
.fff-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	display: flex;
	flex-direction: column;
	transition: border-color .2s ease, transform .2s ease;
}
.fff-card:hover { border-color: var(--teal); transform: translateY(-3px); }
.fff-card h3 { margin-block: .75rem .75rem; }
.fff-card p { color: var(--muted); margin: 0 0 1.5rem; }
.fff-card .fff-card__link { margin: auto 0 0; }
.fff-card .fff-card__tag {
	align-self: flex-start;
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--teal);
	background: var(--teal-soft);
	padding: .3rem .75rem;
	border-radius: 999px;
}

/* ---------- Doctor ---------- */
.fff-doctor__photo { margin: 0; }
.fff-creds { list-style: none; padding: 0; margin-block: 1.5rem 2rem; border-top: 1px solid var(--line); }
.fff-creds li { padding: .8rem 0 .8rem 1.5rem; border-bottom: 1px solid var(--line); position: relative; }
.fff-creds li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.35rem;
	width: .55rem;
	height: .55rem;
	border: 1.5px solid var(--teal);
	border-radius: 50%;
}

/* ---------- Supplements (WooCommerce loop) ---------- */
.fff-section__head { margin-block-end: clamp(1.75rem, 4vw, 3rem); gap: 1rem; }
.fff-section__head .fff-section__title { margin-block-end: 0; }
.woocommerce ul.products { display: grid; gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 1rem 1rem 1.25rem;
	display: flex;
	flex-direction: column;
}
.woocommerce ul.products li.product a img { border-radius: 10px; background: var(--paper-deep); aspect-ratio: 1; object-fit: cover; margin-bottom: 1rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--ink); padding: 0; }
.woocommerce ul.products li.product .price { color: var(--muted); font-size: var(--wp--preset--font-size--sm); }
.woocommerce ul.products li.product .button {
	margin-top: auto;
	background: transparent;
	border: 1px solid var(--teal);
	color: var(--teal);
	border-radius: 999px;
	font-weight: 500;
	text-align: center;
}
.woocommerce ul.products li.product .button:hover { background: var(--teal); color: var(--paper); }

/* ---------- Shop ---------- */
.fff-shop-head { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.fff-shop-head__title { max-width: 20ch !important; margin-block: 0 .75rem; }
.fff-shop-head .fff-lede { margin-block: 0; max-width: 46ch !important; }
.fff-tabs-wrap { padding-block: 1.75rem 0; }
.fff-tabs { display: flex; flex-wrap: wrap; gap: .5rem; border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; }
.fff-tab {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--muted);
	text-decoration: none;
	padding: .5rem 1rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	white-space: nowrap;
}
.fff-tab:hover { border-color: var(--teal); color: var(--teal); }
.fff-tab.is-active { background: var(--teal); border-color: var(--teal); color: var(--paper); }
.fff-shop { padding-block: clamp(2rem, 4vw, 3rem) var(--section-y); }
.fff-shop .woocommerce-products-header, .fff-shop .woocommerce-result-count { display: none; }
.fff-shop .woocommerce-ordering { margin-bottom: 1.5rem; }
.fff-shop .woocommerce-ordering select { border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1rem; background: transparent; font-family: var(--sans); }

/* Single product */
.fff-product { padding-block: clamp(2rem, 5vw, 3.5rem) var(--section-y); }
.fff-product div.product { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.fff-product div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; }
.fff-product div.product .woocommerce-product-gallery img { border-radius: 14px; background: var(--paper-deep); }
.fff-product div.product .summary { width: 100% !important; float: none !important; margin: 0 !important; }
.fff-product div.product .product_title { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-block: 0 .5rem; }
.fff-product div.product p.price { font-family: var(--serif); font-size: 1.6rem; color: var(--teal); margin-block-end: 1.5rem; }
.fff-product div.product .fff-doc-note { background: var(--teal-soft); border-radius: 12px; padding: 1rem 1.25rem; font-size: var(--wp--preset--font-size--sm); }
.fff-product div.product form.cart { display: flex; gap: .75rem; align-items: center; margin-block: 1.5rem 2rem; }
.fff-product div.product form.cart .quantity input { height: 48px; width: 76px; border: 1px solid var(--line); border-radius: 999px; text-align: center; background: transparent; font-family: var(--sans); }
.fff-product div.product .single_add_to_cart_button {
	background: var(--teal);
	color: var(--paper);
	border: 0;
	border-radius: 999px;
	padding: 1rem 2rem;
	font-family: var(--sans);
	font-weight: 500;
	cursor: pointer;
}
.fff-product div.product .single_add_to_cart_button:hover { background: var(--ink); }
.fff-product .woocommerce-tabs, .fff-product .related { grid-column: 1 / -1; }
.fff-product .woocommerce-tabs ul.tabs { list-style: none; padding: 0; display: flex; gap: 1.5rem; border-bottom: 1px solid var(--line); }
.fff-product .woocommerce-tabs ul.tabs a { text-decoration: none; color: var(--muted); }
.fff-product .woocommerce-tabs ul.tabs li.active a { color: var(--teal); }
.fff-product .related > h2, .fff-product .woocommerce-tabs h2 { font-size: 1.6rem; }

/* WooCommerce notices and cart */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: var(--teal-soft);
	border: 0;
	border-left: 3px solid var(--teal);
	border-radius: 0 10px 10px 0;
	padding: 1rem 1.25rem;
	list-style: none;
	color: var(--ink);
}
.woocommerce-message .button, .woocommerce-info .button { background: transparent; color: var(--teal); text-decoration: underline; }

/* ---------- Classic cart and checkout (inc/shop.php) ---------- */
/* WooCommerce's newer notice banners (used on classic pages in block themes). */
.wc-block-components-notice-banner {
	background: var(--teal-soft);
	border: 0;
	border-radius: 12px;
	color: var(--ink);
	font-size: var(--wp--preset--font-size--sm);
}
/* "body" outranks WooCommerce's own colours, whose stylesheet loads after this one. */
body .wc-block-components-notice-banner.is-success,
body .wc-block-components-notice-banner.is-info { background: var(--teal-soft); border-color: var(--teal-soft); }
.wc-block-components-notice-banner.is-success > svg { background: var(--teal); }
body .wc-block-components-notice-banner.is-error { background: #F6E3DC; border-color: #F6E3DC; }
.wc-block-components-notice-banner.is-error > svg { background: #A3452A; }
.wc-block-components-notice-banner a { color: var(--teal); }

/* Tables: cart lines, cart totals, order review */
.woocommerce table.shop_table {
	border: 1px solid var(--line);
	border-radius: 14px;
	border-collapse: separate;
	background: var(--field);
	font-size: var(--wp--preset--font-size--sm);
}
.woocommerce table.shop_table th { font-weight: 500; color: var(--muted); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top-color: var(--line); padding: .9rem 1rem; }
.woocommerce table.shop_table img { width: 64px !important; border-radius: 10px; }
.woocommerce table.shop_table .product-name a { color: var(--ink); text-decoration: none; font-weight: 500; }
.woocommerce table.shop_table .order-total .amount { font-family: var(--serif); font-size: 1.25rem; color: var(--teal); }
.woocommerce a.remove { color: var(--muted) !important; font-weight: 400; }
.woocommerce a.remove:hover { background: var(--teal-soft) !important; color: var(--ink) !important; }
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3, #order_review_heading { font-size: 1.5rem; margin-block: 0 1rem; }

/* Fields: 16px text so iPhones do not zoom in when a field is tapped */
.woocommerce form .form-row { margin-bottom: 1rem; padding: 0; }
.woocommerce form .form-row label { font-size: var(--wp--preset--font-size--sm); color: var(--ink); margin-bottom: .35rem; }
.woocommerce form .form-row .required { color: var(--teal); text-decoration: none; }
.woocommerce form .form-row .optional { color: var(--muted); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea.input-text,
.woocommerce .quantity input.qty,
.select2-container--default .select2-selection--single {
	font-family: var(--sans);
	font-size: 16px;
	color: var(--ink);
	background: var(--field);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: none;
}
.woocommerce form .form-row input.input-text { height: 50px; padding: 0 1rem; }
.woocommerce form .form-row textarea.input-text { min-height: 110px; padding: .8rem 1rem; }
.select2-container--default .select2-selection--single { height: 50px; display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); padding-left: 1rem; line-height: 1.2; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; right: .5rem; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea.input-text:focus,
.woocommerce .quantity input.qty:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #A3452A; }
.woocommerce form .form-row ::placeholder { color: var(--muted); opacity: .8; }
.woocommerce .quantity input.qty { height: 44px; width: 72px; border-radius: 999px; text-align: center; }
/* Pakistan only, so the value is fixed. !important because WooCommerce's script sets display inline. */
#billing_country_field { display: none !important; }

/* Buttons */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button.alt, .woocommerce #place_order {
	font-family: var(--sans);
	font-weight: 500;
	border-radius: 999px;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { font-size: 1.05rem; padding: 1.05rem 1.5rem; }
.woocommerce #place_order { width: 100%; padding: 1.05rem 1.5rem; font-size: 1.05rem; }

/* Payment box: WooCommerce's grey and lilac, recoloured */
.woocommerce-checkout #payment { background: var(--paper-deep); border-radius: 14px; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--line); }
.woocommerce-checkout #payment div.payment_box { background: var(--teal-soft); color: var(--ink); border-radius: 10px; font-size: var(--wp--preset--font-size--sm); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--teal-soft); }
.woocommerce-checkout .woocommerce-privacy-policy-text { font-size: var(--wp--preset--font-size--xs); color: var(--muted); }

/* ---------- Testimonials ---------- */
.fff-sample-note {
	display: inline-block;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--muted);
	border: 1px dashed var(--muted);
	border-radius: 6px;
	padding: .35rem .7rem;
	margin: -1.5rem 0 2rem;
}
.fff-quotes { gap: 1.25rem; }
.fff-quote {
	background: var(--paper);
	border-radius: 14px;
	padding: clamp(1.5rem, 3vw, 2rem);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.fff-quote__text { font-family: var(--serif); font-size: 1.2rem; line-height: 1.45; margin: 0 0 1.5rem; }
.fff-quote__who { margin: 0; font-size: var(--wp--preset--font-size--xs); color: var(--muted); }
.fff-quote__who strong { display: block; color: var(--ink); font-weight: 500; font-size: var(--wp--preset--font-size--sm); }
.fff-results .fff-card__link { margin-block-start: 2rem; }
/* Quotes now come from the [fff_testimonials] shortcode as plain divs, not a columns block. */
.fff-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fff-quote blockquote.fff-quote__text { margin: 0 0 1.5rem; padding: 0; border: 0; }
.fff-quote blockquote.fff-quote__text p { margin: 0; font: inherit; }
.fff-quote__tag {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--teal);
}

/* Testimonials page */
.fff-stories-hero.fff-stories-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.fff-stories-hero__title { margin-block: 0 1.25rem; max-width: 18em; text-wrap: balance; }
.fff-stories-hero__title em { font-style: italic; color: var(--teal); }
.fff-stories-hero .fff-lede { max-width: 52ch !important; margin: 0; }
.fff-wall__filters { margin-block-end: 2rem; border-bottom: 0; padding-bottom: 0; }
.fff-wall__filters[hidden] { display: none; }
button.fff-tab { background: transparent; font-family: var(--sans); cursor: pointer; line-height: 1.3; }
.fff-wall__filters + .fff-sample-note { margin-block-start: 0; }
/* Masonry by CSS columns: long and short stories pack without gaps, reading down each column. */
.fff-wall { columns: 3 300px; column-gap: 1.25rem; }
.fff-wall > .fff-quote { break-inside: avoid; margin: 0 0 1.25rem; display: block; }
.fff-wall > .fff-quote[hidden] { display: none; }
.fff-wall .fff-quote__who:empty { display: none; }
.fff-wall > .fff-quote.is-entering { animation: fff-story-in .35s ease both; }
@keyframes fff-story-in { from { opacity: 0; transform: translateY(6px); } }
.fff-wall__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.fff-wall__empty { color: var(--muted); }
.fff-share { --maxw: 820px; }

/* ---------- Blog ---------- */
.fff-blog__topics.fff-blog__topics { margin-block-start: 2rem; border-bottom: 0; padding-bottom: 0; }
.wp-block-post-template.fff-post-feature, .wp-block-post-template.fff-post-grid { list-style: none; margin: 0; padding: 0; }
.fff-post__cat { margin: 0 0 .75rem; font-size: var(--wp--preset--font-size--xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
.fff-post__cat a { color: var(--teal); text-decoration: none; }
.fff-post__excerpt { color: var(--muted); font-size: var(--wp--preset--font-size--sm); }
.fff-post__excerpt p { margin: 0; }
.fff-post__excerpt .wp-block-post-excerpt__more-text { display: none; }
.fff-card-meta { margin: 0; font-size: var(--wp--preset--font-size--xs); color: var(--muted); }

/* The newest article, large */
.fff-blog__lead { margin-block-end: 1.25rem; }
.fff-post-feature > li { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--paper); border-radius: 16px; overflow: hidden; }
.fff-post-feature__media.fff-post-feature__media { margin: 0; height: 100%; }
.fff-post-feature > li > * { min-width: 0; }
.fff-post-feature__media a { display: block; height: 100%; }
.fff-post-feature__media .fff-cover { width: 100%; height: 100%; min-height: 340px; aspect-ratio: auto; }
.fff-post-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.fff-cover-wrap a { text-decoration: none; color: inherit; }
.fff-post-grid .fff-cover { aspect-ratio: 16 / 9; }
.fff-post-feature__body { padding: clamp(1.75rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.fff-post-feature__title { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.15; margin: 0 0 1rem; text-wrap: balance; }
.fff-post-feature__title a, .fff-post-card__title a { color: var(--ink); text-decoration: none; }
.fff-post-feature__title a:hover, .fff-post-card__title a:hover { color: var(--teal); }
.fff-post-feature .fff-post__excerpt { font-size: var(--wp--preset--font-size--md); margin: 0 0 1.25rem; }

/* Cards */
.fff-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.fff-blog__rest .fff-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fff-post-grid > * { margin: 0; display: flex; flex-direction: column; background: var(--paper); border-radius: 14px; overflow: hidden; padding-bottom: 1.5rem; }
.fff-post-grid > * > :not(figure) { margin-inline: 1.5rem; }
.fff-post-grid figure { margin: 0 0 1.25rem; }
.fff-post-grid .fff-card-meta { margin-block-end: .4rem; }
.fff-post-card__title { font-size: 1.35rem; line-height: 1.25; margin-block: 0 .6rem; }
.fff-pagination { margin-block-start: 2rem; gap: 1.5rem; }
.fff-pagination a { color: var(--teal); }

/* Covers, drawn in CSS for posts without a featured image */
.fff-cover {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 16 / 10;
	padding: clamp(1.25rem, 3vw, 2rem);
	overflow: hidden;
	background: var(--teal);
	color: var(--paper);
	isolation: isolate;
	box-sizing: border-box;
}
.fff-cover::before, .fff-cover::after {
	content: "";
	position: absolute;
	z-index: -1;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: .18;
	aspect-ratio: 1;
}
.fff-cover::before { width: 85%; right: -22%; bottom: -45%; }
.fff-cover::after { width: 55%; right: -7%; bottom: -30%; }
.fff-cover--ink { background: var(--ink); }
.fff-cover--soft { background: var(--teal-soft); color: var(--teal); }
.fff-cover--paper { background: var(--paper-deep); color: var(--teal); }
.fff-cover__icon {
	align-self: flex-end;
	width: 30%;
	max-width: 150px;
	aspect-ratio: 1;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}
.fff-cover__label { font-size: var(--wp--preset--font-size--xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.fff-cover__icon--flame { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a6 6 0 0 0 6-6c0-4-3-6-4-10-1 2-2 3-3 3.5C9 9.5 6 11.5 6 15a6 6 0 0 0 6 6z'/%3E%3Cpath d='M12 21a2.5 2.5 0 0 1-2.5-2.5c0-1.8 1.5-2.5 2.5-4.5 1 2 2.5 2.7 2.5 4.5A2.5 2.5 0 0 1 12 21z'/%3E%3C/svg%3E"); }
.fff-cover__icon--cycle { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 0 1-14.9 4'/%3E%3Cpath d='M4 12a8 8 0 0 1 14.9-4'/%3E%3Cpath d='M19 3v5h-5'/%3E%3Cpath d='M5 21v-5h5'/%3E%3C/svg%3E"); }
.fff-cover__icon--pen { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3l6 6'/%3E%3Cpath d='M18 6l-9.5 9.5-3.5.5.5-3.5L15 3'/%3E%3Cpath d='M11.5 6.5l6 6'/%3E%3Cpath d='M5 16l-2 5 5-2'/%3E%3Cpath d='M8 10l2 2'/%3E%3C/svg%3E"); }
.fff-cover__icon--steth { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v6a4 4 0 0 0 8 0V3'/%3E%3Cpath d='M10 13v2a5 5 0 0 0 10 0v-1'/%3E%3Cpath d='M20 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E"); }

/* Article page */
.fff-article.fff-article { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-y); }
.fff-article .fff-article__head { max-width: 780px !important; margin-inline: auto !important; text-align: center; }
.fff-article__title { font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; margin: 0 0 1rem; text-wrap: balance; }
.fff-byline { color: var(--muted); font-size: var(--wp--preset--font-size--sm); margin: 0; }
.fff-article .fff-article__cover { max-width: 1000px !important; margin: clamp(2rem, 5vw, 3rem) auto !important; border-radius: 16px; overflow: hidden; }
.fff-article__cover .fff-cover, .fff-article__cover img { aspect-ratio: 21 / 9; width: 100%; object-fit: cover; }
.fff-article .fff-article__body { max-width: 680px !important; margin-inline: auto !important; }
.fff-article__note { margin: 0 0 2rem; }
.fff-prose > * { margin-block: 0 1.25rem; }
.fff-prose p, .fff-prose li { font-size: 1.125rem; line-height: 1.75; }
.fff-prose h2 { font-size: 1.75rem; line-height: 1.2; margin-block: 2.75rem .9rem; }
.fff-prose ul { padding-left: 1.25rem; }
.fff-prose li + li { margin-top: .4rem; }
.fff-prose li::marker { color: var(--teal); }
.fff-author { display: flex; gap: 1.25rem; align-items: flex-start; margin-block-start: 3rem; padding-block-start: 2rem; border-top: 1px solid var(--line); }
.fff-author__photo { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.fff-author__text p { margin: 0; }
.fff-author__name { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); }
.fff-author__creds { margin-block-start: .2rem !important; font-size: var(--wp--preset--font-size--xs); color: var(--teal); font-weight: 500; line-height: 1.5; }
.fff-author__bio { margin-block-start: .75rem !important; font-size: var(--wp--preset--font-size--sm); color: var(--muted); }
.fff-author__link { margin-block-start: .6rem !important; font-size: var(--wp--preset--font-size--sm); }
.fff-author__link a { color: var(--teal); font-weight: 500; }
.fff-author__link a::after { content: " \2192"; }
.fff-author + .fff-article-cta { margin-block-start: 2rem; }
.fff-article-cta { margin-block-start: 3.5rem; padding: clamp(1.75rem, 4vw, 2.5rem); border-radius: 16px; background: var(--teal); color: var(--paper); }
.fff-article-cta__title { color: var(--paper); font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.2; margin: 0 0 .75rem; }
.fff-article-cta p { margin: 0 0 1.5rem; opacity: .88; }
.fff-more .fff-section__title { margin-block-end: 1.75rem; }

/* Testimonials: numbers strip (three of the homepage's four stats) */
.fff-stats--three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px !important; }

/* Video stories. Sections with nothing in them hide, so an empty list leaves no blank band. */
.fff-videos:not(:has(.fff-quote)), .fff-cases-section:not(:has(.fff-case)) { display: none; }
.fff-videos .fff-quote { background: var(--paper-deep); }
.fff-video {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--ink);
	cursor: pointer;
	text-decoration: none;
}
.fff-video video, .fff-video img, .fff-video iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.fff-video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: var(--paper);
	box-shadow: 0 6px 20px rgb(0 0 0 / .2);
	transition: transform .2s ease;
}
.fff-video__play::after {
	content: "";
	position: absolute;
	left: 26px;
	top: 21px;
	border-style: solid;
	border-width: 11px 0 11px 17px;
	border-color: transparent transparent transparent var(--teal);
}
.fff-video:hover .fff-video__play { transform: scale(1.06); }
.fff-video--link { display: grid; place-items: end center; }
.fff-video__label { position: relative; margin-bottom: 1.5rem; color: var(--paper); font-size: var(--wp--preset--font-size--sm); font-weight: 500; }

/* Case studies */
.fff-cases-section .fff-section__title { margin-block-end: 1rem; }
.fff-cases__intro { color: var(--muted); max-width: 52ch !important; margin-block: 0 2rem; }
.fff-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.fff-case { background: var(--paper); border-radius: 14px; padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; }
.fff-case p { margin: 0; }
.fff-case__who { font-size: var(--wp--preset--font-size--xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--teal); }
.fff-case__nums { display: flex; align-items: flex-end; gap: 1rem; margin-block-start: 1.25rem; }
.fff-case__nums span { display: block; font-size: var(--wp--preset--font-size--xs); color: var(--muted); }
.fff-case__nums strong { font-family: var(--serif); font-weight: 400; font-size: 2.4rem; line-height: 1.1; color: var(--ink); }
.fff-case__nums small { font-size: .9rem; color: var(--muted); margin-left: .15rem; }
.fff-case__arrow { position: relative; flex: 0 0 28px; height: 1px; background: var(--muted); margin-bottom: 1.3rem; }
.fff-case__arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border: solid var(--muted); border-width: 1px 1px 0 0; transform: rotate(45deg); }
.fff-case__change { margin-block-start: .5rem !important; color: var(--teal); font-weight: 500; font-size: var(--wp--preset--font-size--sm); }
.fff-case__markers { margin-block-start: 1rem !important; padding-top: .9rem; border-top: 1px solid var(--line); font-size: var(--wp--preset--font-size--sm); }
.fff-case__proto { margin-block-start: auto !important; padding-top: .6rem; font-size: var(--wp--preset--font-size--xs); color: var(--muted); }

/* Google reviews. While the rating is under the threshold only a link shows, as a slim band. */
.fff-greviews-section:has(.fff-greviews--quiet) { padding-block: 2rem; text-align: center; }
.fff-greviews-section:has(.fff-greviews--quiet) > :not(.fff-greviews) { display: none; }
.fff-greviews__link { margin: 0; }
.fff-greviews__link a { color: var(--teal); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.fff-greviews__link a::after { content: " \2192"; }
.fff-greviews__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 1.75rem; }
.fff-greviews__score { margin: 0; display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: var(--wp--preset--font-size--sm); }
.fff-greviews__score strong { font-family: var(--serif); font-weight: 400; font-size: 2.4rem; color: var(--ink); }
.fff-greviews__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.fff-greview { background: var(--paper-deep); border-radius: 14px; padding: 1.5rem; }
.fff-greview__text { margin: .75rem 0 1rem; font-size: var(--wp--preset--font-size--sm); }
.fff-greview__who { margin: 0; font-size: var(--wp--preset--font-size--xs); color: var(--muted); }
.fff-greview__who strong { display: block; color: var(--ink); font-weight: 500; }
.fff-greviews__credit { margin: 1rem 0 0; font-size: var(--wp--preset--font-size--xs); color: var(--muted); }
.fff-stars {
	--star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.6 7L12 17.3 5.8 20.9l1.6-7L2 9.2l7.1-.6z'/%3E%3C/svg%3E");
	position: relative;
	display: inline-block;
	width: 5.5em;
	height: 1.1em;
	background: var(--line);
	-webkit-mask: var(--star) 0 0 / 1.1em 1.1em repeat-x;
	mask: var(--star) 0 0 / 1.1em 1.1em repeat-x;
}
.fff-stars > span { position: absolute; inset: 0 auto 0 0; background: var(--teal); }
.fff-share .fff-section__title { margin-inline: auto !important; margin-block-end: 1rem; }
.fff-share .fff-share__text { color: var(--muted); max-width: 52ch !important; margin-inline: auto !important; margin-block: 0 1.75rem; }

/* ---------- Partners ---------- */
.fff-partners { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-block: 1px solid var(--line); }
.fff-partners__label { text-align: center; font-size: var(--wp--preset--font-size--xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-block-end: 1.5rem; }
.fff-partners__row { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2.5rem; }
.fff-partners__row > * { margin: 0 !important; }
.fff-logo-slot { font-family: var(--serif); font-size: 1.15rem; color: var(--muted); opacity: .75; }
.fff-partners__row img.fff-partner__logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: .7; }

/* Partners page */
.fff-partner-directory .fff-sample-note { margin: 0 0 2.5rem; }
.fff-partner-group__title {
	font-family: var(--sans);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--teal);
	margin: 0 0 1.25rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--line);
}
.fff-partner-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.25rem; }
.fff-partner__type { margin: 0 0 1.25rem; font-size: var(--wp--preset--font-size--xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--teal); }
.fff-featured { margin-block-start: clamp(3rem, 6vw, 4.5rem); }
.fff-featured__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem 2.5rem; }
.fff-featured__item .fff-logo-slot { font-size: 1.5rem; opacity: 1; color: var(--ink); }
.fff-featured__item img { max-height: 44px; width: auto; }
.fff-featured__item a { text-decoration: none; }
.fff-featured__item p { margin: .4rem 0 0; font-size: var(--wp--preset--font-size--sm); color: var(--muted); }
.fff-partner { background: var(--paper); border-radius: 14px; padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; }
.fff-partner__mark { height: 56px; display: flex; align-items: center; margin-block-end: 1.25rem; }
.fff-partner__mark img { max-height: 56px; max-width: 180px; width: auto; object-fit: contain; }
.fff-partner__mark .fff-logo-slot { font-size: 1.5rem; opacity: 1; color: var(--ink); line-height: 1.15; }
.fff-partner__name { font-family: var(--sans); font-size: var(--wp--preset--font-size--sm); font-weight: 500; margin: 0 0 .5rem; }
.fff-partner__mark:has(.fff-logo-slot) + .fff-partner__name { display: none; }   /* the wordmark already says it */
.fff-partner__desc { margin: 0; font-size: var(--wp--preset--font-size--sm); color: var(--muted); }
.fff-partner__link { margin: auto 0 0; padding-top: 1.25rem; font-size: var(--wp--preset--font-size--sm); }
.fff-partner__link a { color: var(--teal); font-weight: 500; }
.fff-partner-list__empty { color: var(--muted); }
.fff-invite__text { color: var(--muted); max-width: 36ch !important; margin-block-end: 2rem; }
.fff-invite__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
.fff-invite__list > * { margin: 0 !important; }
.fff-invite__item { padding-block: 1.5rem; border-top: 1px solid var(--line); }
.fff-invite__item h3 { font-size: 1.3rem; margin: 0 0 .5rem; }
.fff-invite__item p { margin: 0; color: var(--muted); font-size: var(--wp--preset--font-size--sm); }

/* ---------- Final CTA ---------- */
.fff-cta { background: var(--teal); padding-block: var(--section-y); }
.fff-cta .fff-cta__title { color: var(--paper); margin-inline: auto !important; max-width: 16ch !important; }
.fff-cta__text { color: color-mix(in srgb, var(--paper) 82%, var(--teal)); max-width: 46ch !important; margin-inline: auto !important; margin-block-end: 2rem; }
.fff-btn-light .wp-block-button__link { background: var(--paper); color: var(--teal); }
.fff-btn-light .wp-block-button__link:hover { background: var(--wp--preset--color--white); }
.fff-btn-ghost .wp-block-button__link { border: 1px solid color-mix(in srgb, var(--paper) 60%, transparent); color: var(--paper); background: transparent; }
.fff-btn-ghost .wp-block-button__link:hover { background: color-mix(in srgb, var(--paper) 12%, transparent); }

/* ---------- Protocols page ---------- */
.fff-protocol-intro { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.fff-protocol-intro__lede { max-width: 60ch !important; margin-block-end: 2rem; }
.fff-jump p { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.fff-jump a {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--teal);
	text-decoration: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: .5rem 1rem;
}
.fff-jump a:hover { border-color: var(--teal); background: var(--teal-soft); }
.fff-detail { scroll-margin-top: 90px; }
.fff-detail .fff-section__title { margin-block-end: .75rem; }
.fff-detail .fff-split .wp-block-column p { color: var(--muted); }
.fff-facts { border-top: 1px solid var(--line); }
.fff-facts > * + * { margin-block-start: 0; }
.fff-fact {
	display: grid;
	grid-template-columns: 13rem 1fr;
	gap: 1.5rem;
	margin: 0;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--line);
	color: var(--ink) !important;
}
.fff-fact span {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--teal);
	font-weight: 500;
	padding-top: .25rem;
}

/* FAQ */
.fff-qa { border-bottom: 1px solid var(--line); padding-block: 1.1rem; }
.fff-qa summary {
	cursor: pointer;
	font-family: var(--serif);
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	align-items: center;
}
.fff-qa summary::-webkit-details-marker { display: none; }
.fff-qa summary::after {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-right: 1.5px solid var(--teal);
	border-bottom: 1.5px solid var(--teal);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.fff-qa[open] summary::after { transform: rotate(-135deg); }
.fff-qa p { color: var(--muted); max-width: 70ch; margin-block: .75rem 0; }

/* ---------- Book page ---------- */
.fff-book { padding-block: clamp(2.5rem, 6vw, 4rem) var(--section-y); }
.fff-book__lede { max-width: 58ch !important; margin-block-end: clamp(2rem, 4vw, 3rem); }
.fff-book__cols { gap: clamp(2rem, 5vw, 4rem); }
.fff-form { background: var(--wp--preset--color--white); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2.25rem); }
.fff-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fff-field + .fff-field { margin-top: 1.25rem; }
.fff-field label { display: block; font-size: var(--wp--preset--font-size--sm); font-weight: 500; margin-bottom: .4rem; }
.fff-field input, .fff-field select, .fff-field textarea {
	/* Without border-box the padding is added to the 100% width, so every control
	   hung 34px past the card and the form read as off-centre. */
	box-sizing: border-box;
	width: 100%;
	font-family: var(--sans);
	font-size: 1rem;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: .8rem 1rem;
}
.fff-field select { appearance: none; background-image: linear-gradient(45deg, transparent 49%, var(--teal) 50%), linear-gradient(-45deg, transparent 49%, var(--teal) 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.fff-field textarea { resize: vertical; min-height: 7rem; }
.fff-field input:focus, .fff-field select:focus, .fff-field textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent; }
.fff-field .has-error { border-color: #B3261E; background: #FDF4F3; }
.fff-error { color: #B3261E; font-size: var(--wp--preset--font-size--xs); margin: .4rem 0 0; min-height: 0; }
.fff-error:empty { display: none; }
.fff-error--form { margin-top: 1rem; }
/* Invisible captcha: takes no space unless Cloudflare decides to show its checkbox. */
.fff-captcha { margin-top: .75rem; }
.fff-captcha:has(iframe[style*="display: none"]), .fff-captcha:empty { margin-top: 0; }
.fff-captcha .cf-turnstile { width: 100%; }
.fff-form__submit {
	margin-top: 1rem;
	width: 100%;
	background: var(--teal);
	color: var(--paper);
	border: 0;
	border-radius: 999px;
	padding: 1.05rem 2rem;
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
}
.fff-form__submit:hover { background: var(--ink); }
.fff-form__submit[disabled] { opacity: .7; cursor: progress; }
.fff-form__note { font-size: var(--wp--preset--font-size--xs); color: var(--muted); margin: .9rem 0 0; text-align: center; }
.fff-form__done {
	background: var(--teal-soft);
	border-radius: 16px;
	padding: clamp(2rem, 4vw, 3rem);
	text-align: center;
	color: var(--teal);
}
.fff-form__done h2 { margin-block: .75rem .5rem; }
.fff-form__done p { color: var(--ink); max-width: 38ch; margin-inline: auto; }
.fff-form__done-sub { font-size: var(--wp--preset--font-size--sm); color: var(--muted) !important; margin-top: .75rem; }

.fff-aside-card { background: var(--paper-deep); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2rem); }
.fff-aside-card__title { font-size: 1.35rem; margin-block: 0 .5rem; }
.fff-aside-card p { color: var(--muted); }
.fff-aside-card .wp-block-buttons { margin-block: 1.25rem; }
.fff-aside-card__line { margin-block: 0 .75rem !important; font-size: var(--wp--preset--font-size--sm); }
.fff-aside-card__line strong { display: block; color: var(--ink); font-weight: 500; }
.fff-aside-card__line a { color: var(--teal); text-decoration: none; }
.fff-promise { border-left: 3px solid var(--teal); padding: .25rem 0 .25rem 1.25rem; margin-block-start: 1.5rem; }
.fff-promise__title { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 .25rem; }
.fff-promise p { color: var(--muted); font-size: var(--wp--preset--font-size--sm); margin: 0; }
.fff-steps-small { margin-block-start: 1.75rem; }
.fff-steps-small__title { font-size: var(--wp--preset--font-size--xs); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); font-weight: 500; margin-bottom: .75rem; }
.fff-numbered { list-style: none; padding: 0; counter-reset: step; margin: 0; }
.fff-numbered li { counter-increment: step; position: relative; padding-left: 2rem; margin-bottom: .75rem; font-size: var(--wp--preset--font-size--sm); color: var(--muted); }
.fff-numbered li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--teal-soft);
	color: var(--teal);
	font-size: 12px;
	display: grid;
	place-items: center;
}

/* ---------- About page ----------
   Own class names rather than the homepage hero's, so the design lab's hero variants
   (fff-lab) never restyle this page by accident. */
.fff-about-hero.fff-about-hero { padding-block: clamp(2.5rem, 6vw, 5rem) var(--section-y); }
.fff-about-hero__title { margin-block: 0 1.25rem; max-width: 14ch; text-wrap: balance; }
.fff-about-hero__title em { font-style: italic; color: var(--teal); }
.fff-about-hero .fff-lede { max-width: 40ch; margin-block-end: 2rem; }
.fff-about-hero__photo { margin: 0; }
.fff-about-hero__photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: 220px 220px 12px 12px;
	display: block;
}

.fff-story__text p { color: var(--muted); max-width: 62ch; }
.fff-story__text .fff-story__lead {
	font-family: var(--serif);
	font-size: clamp(1.3rem, 2.4vw, 1.65rem);
	line-height: 1.4;
	color: var(--ink);
	margin-block-start: 0;
}

/* The film frame starts at 4:5 (a phone video or Instagram post) and film.js switches it to
   the real file's shape once that is known, so a landscape video is never cropped. */
.fff-film__text { color: var(--muted); max-width: 36ch; }
.fff-film__video { position: relative; margin: 0 0 0 auto; max-width: 440px; }
.fff-film__video.is-landscape { max-width: none; }
.fff-film__video video {
	display: block;
	width: 100%;
	aspect-ratio: var(--film-ratio, 4 / 5);
	object-fit: cover;
	border-radius: 16px;
	background: var(--paper-deep);
}
.fff-sound {
	position: absolute;
	left: .85rem;
	bottom: .85rem;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .9rem .5rem .75rem;
	border: 0;
	border-radius: 999px;
	background: rgba(22, 53, 58, .72);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	font: 500 .8125rem/1 var(--sans);
	cursor: pointer;
	transition: background-color .2s ease, transform .15s ease;
}
.fff-sound:hover { background: rgba(22, 53, 58, .9); }
.fff-sound:active { transform: scale(.96); }
.fff-sound[hidden] { display: none; }

.fff-record .fff-split { gap: clamp(2.5rem, 7vw, 6rem); }
.fff-record .fff-section__title { margin-block-end: 0; }
.fff-media { border-top: 1px solid var(--line); margin-block: 1.5rem 0; }
.fff-media > * + * { margin-block-start: 0; }
.fff-media__item { margin: 0; padding-block: .8rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--wp--preset--font-size--sm); }
.fff-media__item strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--ink); }

/* Team: filled from Team in the dashboard by [fff_team], so it works for any number of people. */
.fff-team-section { scroll-margin-top: 90px; }
.fff-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2.5rem 1.5rem; }
.fff-team__card { margin: 0; }
.fff-team__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: 999px 999px 14px 14px;
	background: var(--paper);
}
.fff-team__photo--none { display: grid; place-items: center; }
.fff-team__photo--none img { width: 34%; opacity: .35; }
.fff-team__name { font-size: 1.3rem; margin-block: 1.1rem .2rem; }
.fff-team__role { margin: 0; font-size: var(--wp--preset--font-size--xs); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); font-weight: 500; }
.fff-team__bio { margin-block: .6rem 0; font-size: var(--wp--preset--font-size--sm); color: var(--muted); }
.fff-team__empty { color: var(--muted); }

/* ---------- Contact page ---------- */
.fff-contact.fff-contact { padding-block-start: clamp(2.5rem, 6vw, 4rem); }
.fff-contact__lede { max-width: 52ch !important; margin-block-end: clamp(2rem, 4vw, 3rem); }
.fff-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.fff-ways > * { margin: 0 !important; }
.fff-way {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: clamp(1.5rem, 3vw, 2rem);
}
/* Line icons drawn with CSS masks, so the blocks stay plain text in the editor. */
.fff-way::before {
	content: "";
	width: 28px;
	height: 28px;
	margin-bottom: 1.25rem;
	background: currentColor;
	color: var(--teal);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}
.fff-way--wa { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.65-3.8a9 9 0 1 1 3.4 2.9L3 21'/%3E%3Cpath d='M9 10a.5.5 0 0 0 1 0V9a.5.5 0 0 0-1 0v1a5 5 0 0 0 5 5h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1'/%3E%3C/svg%3E"); }
.fff-way--call { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.fff-way--mail { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.fff-way__title { font-size: 1.5rem; margin-block: 0 .5rem; }
.fff-way p { color: var(--muted); margin-block: 0 1.25rem; }
.fff-way .fff-way__link { margin: auto 0 0; }
.fff-way__link a { color: var(--teal); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; overflow-wrap: anywhere; }
.fff-way__link a:hover { color: var(--ink); }
/* WhatsApp is the fastest route, so it is the filled card. */
.fff-way--main { background: var(--teal); border-color: var(--teal); }
.fff-way--main::before { color: var(--paper); }
.fff-way--main .fff-way__title, .fff-way--main .fff-way__link a { color: var(--paper); }
.fff-way--main p { color: color-mix(in srgb, var(--paper) 80%, var(--teal)); }
.fff-way--main .fff-way__link a:hover { color: var(--wp--preset--color--white); }

.fff-visit .fff-section__title { max-width: 14ch !important; margin-block-end: .5rem; }
.fff-visit__street { margin-block: 0 1.25rem; font-weight: 500; }
.fff-visit__note { color: var(--muted); max-width: 38ch; }
.fff-hours { border-top: 1px solid var(--line); margin-block: 1.5rem 2rem; }
.fff-hours > * + * { margin-block-start: 0; }
.fff-hours__row { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding-block: .8rem; border-bottom: 1px solid var(--line); }
.fff-hours__row span { color: var(--muted); }
.wp-block-button.is-style-outline:not(.fff-btn-ghost) .wp-block-button__link { background: transparent; color: var(--teal); border: 1px solid var(--teal); }
.wp-block-button.is-style-outline:not(.fff-btn-ghost) .wp-block-button__link:hover { background: var(--teal-soft); }
.fff-map { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; border-radius: 16px; background: var(--paper); }

/* ---------- Placeholder pages ---------- */
.fff-soon { min-height: 50vh; }

/* ---------- Footer ---------- */
.fff-footer { background: var(--ink); color: color-mix(in srgb, var(--paper) 78%, var(--ink)); padding-block: clamp(3rem, 7vw, 5rem) 2rem; font-size: var(--wp--preset--font-size--sm); }
.fff-footer a { color: inherit; text-decoration: none; }
.fff-footer a:hover { color: var(--paper); }
.fff-logo--footer a { color: var(--paper); }
.fff-footer__line { max-width: 30ch; margin-block-start: 1rem; }
.fff-footer .fff-footer__title { font-family: var(--sans); font-size: var(--wp--preset--font-size--xs); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); font-weight: 500; }
.fff-footer__links { list-style: none; padding: 0; line-height: 2.1; }
.fff-footer__cols { gap: 2.5rem; }
.fff-footer__legal { margin-block-start: 3rem; padding-block-start: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--paper) 15%, transparent); font-size: var(--wp--preset--font-size--xs); }
.fff-footer__legal p { margin: 0; }
.fff-footer__social { display: flex; gap: .5rem; margin-block-start: 1.25rem; }
.fff-footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); transition: background-color .2s ease, border-color .2s ease; }
.fff-footer__social a:hover { background: color-mix(in srgb, var(--paper) 10%, transparent); border-color: color-mix(in srgb, var(--paper) 45%, transparent); }
.fff-footer__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Partner strip in the footer (the brief asks for it). The homepage already has its own strip just above. */
.fff-footer__partners { margin-block-start: 3rem; padding-block-start: 2rem; border-top: 1px solid color-mix(in srgb, var(--paper) 15%, transparent); }
.home .fff-footer__partners { display: none; }
.fff-footer__partners .fff-footer__title { margin: 0 0 1rem; }
.fff-footer__partners .fff-partners__row { justify-content: flex-start; gap: .5rem 2rem; }
.fff-footer .fff-logo-slot { color: var(--paper); opacity: .6; font-size: 1.05rem; }
.fff-footer img.fff-partner__logo { filter: brightness(0) invert(1); opacity: .6; }
.fff-footer__partners + .fff-footer__legal { margin-block-start: 2rem; }

/* 404 */
.fff-404.fff-404 { --maxw: 760px; padding-block: clamp(3.5rem, 10vw, 7rem); min-height: 50vh; }
.fff-404__title { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; margin: 0 0 1rem; text-wrap: balance; }
.fff-404 .fff-lede { margin: 0 0 2rem; }
.fff-404__links { list-style: none; padding: 0; margin: 2.5rem 0 0 !important; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.fff-404__links a { color: var(--teal); font-weight: 500; }

/* Legal pages */
.fff-legal.fff-legal { --maxw: 760px; padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-y); }
.fff-legal__title { font-size: clamp(2.2rem, 5vw, 3.25rem); line-height: 1.1; margin: 0 0 .5rem; }
.fff-legal__updated { color: var(--muted); font-size: var(--wp--preset--font-size--sm); margin: 0 0 1.5rem; }
.fff-legal .fff-sample-note { margin: 0 0 2rem; }
.fff-legal__contents { margin: 0 0 2.5rem !important; padding: 1.25rem 1.5rem 1.25rem 2.75rem; background: var(--paper-deep); border-radius: 14px; columns: 2; column-gap: 2.5rem; }
.fff-legal__contents li { font-size: var(--wp--preset--font-size--sm) !important; line-height: 1.5 !important; margin: 0 0 .45rem !important; break-inside: avoid; }
.fff-legal__contents a { color: var(--teal); text-decoration: none; }
.fff-legal__contents a:hover { text-decoration: underline; }
.fff-legal__body h2 { scroll-margin-top: 90px; font-size: 1.5rem; }
.fff-legal__body p, .fff-legal__body li { font-size: 1.0625rem; }

/* ---------- Preloader ----------
   The painting itself is SVG <animate> in inc/preloader.php, paced by paint.json. Everything
   after it is timed here from --paint-end, which the PHP sets to the moment the last stroke
   finishes (2.22s at the pace the user chose), so a pace change moves the whole sequence.
   end - 0.25  the head pops in
   end - 0.10  name rises in, byline just after
   end         every layer fades in unmasked, filling any hairline tips the paint missed
   end + 1.60  the whole screen fades away (0.4s) and stops catching clicks; about 4.2s total.
               The finished logo holds a full extra second so it registers (user, 2026-09-24:
               "I want people to see it"). No tap to skip. */
.fff-pre {
	--paint-end: 2.22s;
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	background: var(--paper);
	color: var(--teal);
	animation: fff-pre-out .4s ease calc(var(--paint-end) + 1.6s) forwards;
}
.fff-pre__inner { display: grid; justify-items: center; text-align: center; }
.fff-pre__mark { width: clamp(96px, 24vw, 132px); height: auto; overflow: visible; }
.fff-pre__settle { opacity: 0; animation: fff-fade-in .25s ease var(--paint-end) forwards; }
/* The head image spans the whole logo box, so it scales about the head's own centre,
   which sits at 46.6% across and 27.3% down that box (computed from paint.json). */
.fff-pre__head {
	opacity: 0;
	transform-origin: 46.6% 27.3%;
	transform-box: fill-box;
	transform: scale(.3);
	animation: fff-pop .32s cubic-bezier(.34, 1.56, .64, 1) calc(var(--paint-end) - .25s) forwards;
}
@keyframes fff-pop { to { opacity: 1; transform: none; } }
.fff-pre__name, .fff-pre__by { margin: 0; opacity: 0; transform: translateY(6px); }
.fff-pre__name {
	margin-top: 1.1rem;
	font-family: var(--serif);
	font-size: clamp(1.3rem, 4.5vw, 1.6rem);
	letter-spacing: .01em;
	color: var(--ink);
	animation: fff-rise .5s ease calc(var(--paint-end) - .1s) forwards;
}
.fff-pre__by {
	margin-top: .35rem;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	animation: fff-rise .5s ease calc(var(--paint-end) + .02s) forwards;
}
@keyframes fff-fade-in { to { opacity: 1; } }
@keyframes fff-rise { to { opacity: 1; transform: none; } }
@keyframes fff-pre-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
	.fff-pre { display: none !important; }
}
/* Already played this visit: set in <head> before paint, see inc/preloader.php. */
.fff-pre-seen .fff-pre { display: none !important; }

/* ---------- Floating WhatsApp ---------- */
.fff-wa-float {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 90;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #1F8F5B;
	color: #fff;
	box-shadow: 0 6px 18px rgba(22, 53, 58, .22);
	transition: transform .2s ease;
}
.fff-wa-float:hover { transform: scale(1.06); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet: six links, the wordmark, the cart and the Book button do not fit below about
   1100px, but WordPress only collapses its menu below 600px. Collapse it ourselves. */
@media (max-width: 1100px) {
	.fff-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.fff-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
	/* WordPress hides the overlay's close button from 600px up. */
	.fff-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex !important; }
	.fff-header__cta.fff-header__cta .wp-block-button__link { white-space: nowrap; }
}

/* Phone header: the mark alone, then menu, cart and a compact Book button.
   The wordmark and the full-size logo are what push the button into a narrow column,
   and .wp-block-buttons.is-layout-flex outranks a single class, hence the doubled name. */
@media (max-width: 720px) {
	.fff-header__bar { gap: .5rem; }
	.fff-header__right { gap: .75rem; }
	.fff-logo { display: none; }   /* phones below 600px bring the name back as a lockup, see phone.css */
	.fff-brand .wp-block-site-logo { width: 46px !important; }
	.fff-brand .wp-block-site-logo img { width: 100%; }
	.fff-header__cta.fff-header__cta .wp-block-button__link {
		padding: .55rem 1rem;
		font-size: .8125rem;
		white-space: nowrap;
	}
	.fff-cart { width: 34px; height: 34px; }
}

@media (max-width: 781px) {
	.fff-hero { padding-block-start: 1.5rem; }
	.fff-hero__cols { flex-direction: column-reverse; }
	.fff-hero__media { width: 100%; }
	.fff-hero__photo img { aspect-ratio: 4 / 4.2; border-radius: 180px 180px 12px 12px; }
	.fff-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fff-stat:nth-child(3) { padding-left: 0; border-left: 0; }
	.fff-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
	.fff-steps .fff-step, .fff-steps .fff-step + .fff-step { padding: 1.5rem 0; border-left: 0; }
	.fff-row { grid-template-columns: 2.75rem 1fr; }

	/* Swipe rows beat shrunken cards on phones. */
	.fff-cards, .fff-quotes {
		display: flex;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(-1 * clamp(1rem, 4vw, 2.5rem));
		padding-inline: clamp(1rem, 4vw, 2.5rem);
		scrollbar-width: none;
	}
	.fff-cards::-webkit-scrollbar, .fff-quotes::-webkit-scrollbar { display: none; }
	.fff-cards > .fff-card, .fff-quotes > .fff-quote { flex: 0 0 84% !important; scroll-snap-align: start; }
}

@media (max-width: 900px) {
	.fff-post-feature > li { grid-template-columns: 1fr; }
	.fff-post-feature__media .fff-cover { min-height: 0; height: auto; aspect-ratio: 16 / 10; }
	.fff-post-grid, .fff-blog__rest .fff-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
	.fff-fact { grid-template-columns: 1fr; gap: .35rem; }
	.fff-book__cols { gap: 2rem; }
}

@media (max-width: 600px) {
	.woocommerce ul.products { gap: .75rem; }
	.woocommerce ul.products li.product { padding: .75rem .75rem 1rem; }
	.fff-footer__legal { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}