/*
Theme Name: Sebo Theme
Theme URI: https://sebomarketing.com
Author: Sebo Marketing
Author URI: https://sebomarketing.com
Description: Brand-agnostic WordPress block theme used as the starting point for Sebo Marketing client sites. All colour, type, and spacing decisions live as design tokens in theme.json; this stylesheet only covers what theme.json cannot express. WooCommerce-ready.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sebo
Tags: block-theme, full-site-editing, e-commerce, one-column, custom-colors, custom-menu, editor-style
*/

/* -------------------------------------------------------------------------
   1. Base
   ---------------------------------------------------------------------- */

:root {
	--sb-field-border: color-mix(in srgb, var(--wp--preset--color--ink) 58%, var(--wp--preset--color--base));
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-optical-sizing: auto;
}

/* Balance short headings rather than leaving a single orphaned word. */
h1,
h2,
h3,
.wp-block-post-title {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

/* Body copy caps its measure even inside wide containers. */
:where(.entry-content) p:not([class*="has-"]) {
	max-width: 68ch;
}

img,
video {
	max-width: 100%;
	height: auto;
}

/* WordPress puts a block-gap margin between every top-level block, which
   leaves a white strip between the header and the first full-bleed section,
   and another between the last section and the footer. Sections carry their
   own padding, so those gaps are never wanted here. */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-template-part {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
   2. Focus — a single visible treatment everywhere.
      Never remove this; keyboard users depend on it.
   ---------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--action);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Dark grounds need a light ring to stay visible. */
.sb-on-dark :where(a, button, input, select, textarea):focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

.skip-link {
	position: absolute;
	top: -100vh;
	left: 0;
	z-index: 999999;
	padding: 0.85rem 1.5rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	border-bottom-right-radius: 6px;
}

.skip-link:focus {
	top: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
   3. Links — underlines that sit below the baseline rather than
      slicing through descenders.
   ---------------------------------------------------------------------- */

:where(.entry-content, .wp-block-post-content) a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--action) 42%, transparent);
	transition: text-decoration-color var(--wp--custom--transition--base);
}

:where(.entry-content, .wp-block-post-content) a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

/* Buttons and nav links must not inherit the content underline. */
.wp-block-navigation a,
.wp-element-button,
.wp-block-button__link {
	text-decoration: none;
}

.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Secondary button: outlined, for lower-priority actions. Core gives outline
   buttons their own smaller padding; this matches the primary button's
   padding (theme.json elements.button) less the border, so a primary and a
   secondary side by side are the same height. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--action);
	border: 1.5px solid var(--wp--preset--color--action);
}

.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(1.05rem - 1.5px) calc(2.1rem - 1.5px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
   4. Header
   ---------------------------------------------------------------------- */

/* header.js adds this to <html> for the length of one measurement, so it can
   read the header's expanded height instead of whatever height the transition
   happened to be part-way through. Removed in the same frame. */
.sb-measuring *,
.sb-measuring *::before,
.sb-measuring *::after {
	transition: none !important;
	animation: none !important;
}

/* Stickiness has to live on the template-part wrapper, not on .sb-header.
   WordPress renders the header part inside a <div class="wp-block-template-part">
   that is exactly as tall as the header, and a sticky element cannot travel
   beyond its containing block — so sticking it to .sb-header gives it zero
   travel and it scrolls away immediately. */
.wp-site-blocks > .wp-block-template-part:has(.sb-header),
.wp-site-blocks > .wp-block-template-part:first-child {
	position: sticky;
	/* The admin bar is position:fixed at the top of the viewport for logged-in
	   users, so a header stuck to 0 slides underneath it. WordPress exposes the
	   bar's height as a custom property (32px, or 46px under 782px), which also
	   keeps this correct when the bar is absent. */
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

/* Fallback for WordPress versions that do not set the custom property. */
body.admin-bar .wp-site-blocks > .wp-block-template-part:has(.sb-header),
body.admin-bar .wp-site-blocks > .wp-block-template-part:first-child {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .wp-site-blocks > .wp-block-template-part:has(.sb-header),
	body.admin-bar .wp-site-blocks > .wp-block-template-part:first-child {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

/* Below 600px the admin bar stops being fixed and scrolls away with the page,
   so the header must sit flush again or it leaves a 46px gap. */
@media screen and (max-width: 600px) {
	body.admin-bar .wp-site-blocks > .wp-block-template-part:has(.sb-header),
	body.admin-bar .wp-site-blocks > .wp-block-template-part:first-child {
		top: 0;
	}
}

/* The frosted background lives on a pseudo-element, not on .sb-header itself.
   backdrop-filter makes an element the containing block for its
   position:fixed descendants, which collapsed the mobile menu overlay to the
   height of the header instead of the viewport. Keeping the filter on a
   childless pseudo-element preserves the effect without that side effect. */
.sb-header {
	position: relative;
	background: transparent;
	border-bottom: var(--wp--custom--rule--hairline);
}

.sb-header::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
}

.sb-header__bar {
	position: relative;
	z-index: 1;
}

/* The bar carries the vertical rhythm, and shrinks in the compact state.
   Padding is on the bar rather than the header so the sticky background
   still spans the full viewport width. */
.sb-header__bar {
	padding-block: clamp(0.85rem, 1.6vw, 1.35rem);
	transition: padding-block var(--wp--custom--transition--base);
}

.sb-header .custom-logo-link,
.sb-header .wp-block-site-logo a {
	display: block;
	line-height: 0;
}

.sb-header .wp-block-site-logo img {
	/* The wordmark is very widely tracked, so it needs real width before the
	   droplet and the letters stop reading as one shape. */
	width: clamp(150px, 16vw, 196px);
	height: auto;
	transition: opacity var(--wp--custom--transition--base);
}

.sb-header .wp-block-site-logo a:hover img {
	opacity: 0.78;
}

/* -----------------------------------------------------------------
   Compact (scrolled) header.

   The `is-compact` class is toggled by assets/js/header.js past a
   scroll threshold. Only the circular fairy mark shows, and the bar
   loses height, so more of the page stays visible while scrolling.
   ----------------------------------------------------------------- */

.sb-brand__mark {
	display: none;
	margin: 0;
	line-height: 0;
}

.sb-brand__mark img {
	display: block;
	width: 46px;
	height: auto;
	transition: opacity var(--wp--custom--transition--base);
}

.sb-brand__mark a:hover img {
	opacity: 0.78;
}

.sb-header.is-compact .sb-header__bar {
	padding-block: 0.5rem;
}

.sb-header.is-compact .wp-block-site-logo {
	display: none;
}

.sb-header.is-compact .sb-brand__mark {
	display: block;
}

/* Without JS the header simply stays in its full state — the mark is the
   progressive enhancement, not the baseline. */

/* Nav links: an animated rule that grows from the left on hover, and
   stays put for the current page. */
.sb-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
	color: var(--wp--preset--color--ink);
}

.sb-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--transition--base);
}

.sb-header .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.sb-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after,
.sb-header .wp-block-navigation-item.current-menu-ancestor .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Submenu (the Books dropdown). */
.sb-header .wp-block-navigation__submenu-container {
	border: none;
	border-radius: 10px;
	padding: 0.4rem;
	min-width: 15rem;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.sb-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 0.85rem;
	border-radius: 6px;
	width: 100%;
}

.sb-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.sb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--action);
}

/* -----------------------------------------------------------------
   Mobile overlay menu

   Full-screen, translucent so the page stays faintly visible behind
   it, with a large close control. Woo/WP already render the open and
   close buttons; this is presentation only.
   ----------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: clamp(1.25rem, 5vw, 2.5rem);
	/* Warm wash — enough to read against, still showing the page beneath.
	   !important because Woo/WP set `background-color: inherit` here at equal
	   specificity, which otherwise picks up the header's opaque white. */
	background-color: rgba(247, 244, 236, 0.9) !important;
	backdrop-filter: blur(16px) saturate(150%);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	align-items: stretch;
	justify-content: flex-start;
}

/* Give the list room below the close button and centre it in the sheet. */
/* WordPress nests two wrappers between the overlay and the menu list
   (__responsive-close, then __responsive-dialog). Both must grow, or the
   content has no height to be centred within. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	/* Centre the list in the sheet rather than stacking it under the close
	   button with dead space below. */
	justify-content: center;
	padding-block: clamp(2rem, 8vh, 4rem);
	width: 100%;
	min-height: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: 0;
	width: 100%;
	max-width: 22rem;
	text-align: center;
	/* WordPress gives the list flex-grow, which pins the items to the top of
	   the sheet. Auto block margins centre it regardless of that. */
	flex: 0 0 auto;
	margin-block: auto;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	width: 100%;
	justify-content: center;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:last-child {
	border-bottom: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	/* Comfortable tap target. */
	padding-block: 0.85rem;
	width: 100%;
	justify-content: center;
}

/* The desktop hover rule draws an underline bar; not wanted in the sheet. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content::after {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--action);
}

/* Submenu (Books) sits indented and quieter, always expanded in the sheet. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	box-shadow: none;
	background: transparent;
	border: 0;
	padding: 0 0 0.5rem;
	min-width: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item {
	border-bottom: 0;
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	padding-block: 0.6rem;
}

/* Open (hamburger) control. */
.wp-block-navigation__responsive-container-open {
	padding: 0.4rem;
	color: var(--wp--preset--color--ink);
}

.wp-block-navigation__responsive-container-open:hover {
	color: var(--wp--preset--color--action);
}

/* Close (X) control — enlarged and given a visible hit area, since the
   default is a small bare glyph in the corner. */
.wp-block-navigation__responsive-container-close {
	top: clamp(1.25rem, 5vw, 2.5rem);
	right: clamp(1.25rem, 5vw, 2.5rem);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--wp--preset--shadow--soft);
	transition: background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

.wp-block-navigation__responsive-container-close:hover {
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
}

.wp-block-navigation__responsive-container-close svg {
	width: 26px;
	height: 26px;
}

/* The overlay is fixed to the viewport, so it must clear the admin bar. */
body.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
	top: var(--wp-admin--admin-bar--height, 46px);
}

/* -------------------------------------------------------------------------
   5. Cart indicator in the header
   ---------------------------------------------------------------------- */

.sb-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem;
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--base);
}

.sb-cart:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--action);
}

.sb-cart svg {
	width: 22px;
	height: 22px;
	display: block;
}

.sb-cart__count {
	position: absolute;
	top: -1px;
	right: -3px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.sb-cart__count:empty,
.sb-cart__count[data-count="0"] {
	display: none;
}

/* -------------------------------------------------------------------------
   6. Footer
   ---------------------------------------------------------------------- */

.sb-footer {
	background: var(--wp--preset--color--ink);
	color: rgba(255, 255, 255, 0.82);
}

.sb-footer .wp-block-site-logo img,
.sb-footer__logo img {
	width: clamp(180px, 19vw, 226px);
	height: auto;
	/* The wordmark's hairline serifs sit near the sub-pixel threshold at this
	   size and alias into looking rough without this. */
	shape-rendering: geometricPrecision;
}

.sb-footer :where(h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}

.sb-footer a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.sb-footer a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.sb-footer .wp-block-navigation {
	gap: 0.55rem;
}

.sb-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* -------------------------------------------------------------------------
   7. Editorial pieces
   ---------------------------------------------------------------------- */

/* Eyebrow label above a section heading. */
.sb-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--action);
}

/* When the eyebrow is a term list (e.g. the product category on a book page)
   its links must not pick up the content underline — at this size and letter
   spacing an underline reads as noise. */
.sb-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.sb-eyebrow a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* A framed image with depth, for a product shot or cover. */
.sb-object img {
	border-radius: 3px 10px 10px 3px;
	box-shadow: var(--wp--preset--shadow--lifted);
}

/* -----------------------------------------------------------------
   Immersive hero — artwork behind the copy

   A whole-image dim would flatten the painting, so the scrim is
   left-weighted: dark enough for white type on the copy side, and
   clear on the right where the cover sits.
   ----------------------------------------------------------------- */

.sb-hero-immersive {
	position: relative;
	overflow: hidden;
}

.sb-hero-immersive::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			100deg,
			rgba(38, 30, 26, 0.88) 0%,
			rgba(38, 30, 26, 0.74) 36%,
			rgba(38, 30, 26, 0.34) 62%,
			rgba(38, 30, 26, 0.12) 100%
		);
}

/* On narrow screens the columns stack, so the copy sits over the middle of
   the image and needs an even wash instead of a side gradient. */
@media (max-width: 781px) {
	.sb-hero-immersive::before {
		background: linear-gradient(
			180deg,
			rgba(38, 30, 26, 0.72) 0%,
			rgba(38, 30, 26, 0.84) 55%,
			rgba(38, 30, 26, 0.72) 100%
		);
	}
}

.sb-hero-immersive .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.sb-hero-immersive__eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/* Brand green reads well against the dark scrim; it is only unusable
	   on light grounds. */
	color: var(--wp--preset--color--accent);
}

.sb-hero-immersive__meta {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.sb-hero-immersive h1 em {
	font-style: italic;
}

/* Lift the cover off the artwork so it reads as a physical object rather
   than part of the painting. */
.sb-object--floating img {
	box-shadow: 0 4px 12px rgba(20, 28, 25, 0.3), 0 28px 64px rgba(20, 28, 25, 0.45);
}

/* Outline button on a dark ground. */
.sb-btn-on-dark .wp-block-button__link,
.wp-block-button.is-style-outline.sb-btn-on-dark > .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: rgba(255, 255, 255, 0.65);
	background: transparent;
}

.sb-btn-on-dark .wp-block-button__link:hover,
.wp-block-button.is-style-outline.sb-btn-on-dark > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--action);
	border-color: var(--wp--preset--color--base);
}

/* A soft rounded frame for photography and artwork. */
.sb-media img {
	border-radius: 14px;
}

/* Emphasised pull quote, for a tagline or short testimonial. */
.sb-lede-quote {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	font-style: italic;
	line-height: 1.55;
	color: var(--wp--preset--color--action);
	text-align: center;
}

/* Decorative divider: a hairline rule either side of a small glyph. */
.sb-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	color: var(--wp--preset--color--accent);
}

.sb-divider::before,
.sb-divider::after {
	content: "";
	height: 1px;
	flex: 1 1 auto;
	max-width: 7rem;
	background: currentColor;
}

/* Cards */
.sb-card {
	background: var(--wp--preset--color--base);
	border-radius: 16px;
	box-shadow: var(--wp--preset--shadow--soft);
	overflow: hidden;
	transition: box-shadow var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

.sb-card:hover {
	box-shadow: var(--wp--preset--shadow--lifted);
	transform: translateY(-3px);
}

/* -------------------------------------------------------------------------
   8. Blog
   ---------------------------------------------------------------------- */

/* The post grid is declared as a fixed 3-up in the templates, because
   combining columnCount with minimumColumnWidth made WordPress emit an
   unpredictable 2-up. Collapsing for narrower screens is done here. */
.wp-block-post-template.is-layout-grid {
	gap: var(--wp--preset--spacing--30);
}

@media (max-width: 1024px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 660px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* The blog intro sits in a wide container so its rule spans the grid; its
   text should start at the same left edge as the first card, not be centred
   inside it. */
.sb-blog-intro > * {
	margin-inline: 0;
}

.sb-blog-intro p {
	max-width: 58ch;
}

/* Cards stretch to the row height so the "Keep reading" link lands on a
   consistent baseline instead of floating wherever the excerpt ends. */
.sb-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sb-post-card .wp-block-post-excerpt {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.sb-post-card .wp-block-post-excerpt__more-text {
	margin-top: auto;
	padding-top: 0.75rem;
}

.sb-post-card .wp-block-post-excerpt__more-text a {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--action) 38%, transparent);
}

.sb-post-card .wp-block-post-excerpt__more-text a:hover {
	border-bottom-color: currentColor;
}

.sb-post-card .wp-block-post-featured-image img {
	border-radius: 12px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	/* Favour the upper part of the frame. A centred crop of a tall portrait
	   lands on the torso and decapitates the subject, which is what the trail
	   photograph does at 3:2. */
	object-position: 50% 22%;
	width: 100%;
}

.sb-post-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}

.sb-post-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.sb-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--action);
}

.sb-meta {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wp-block-query-pagination {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   9. Forms — Gravity Forms and core inputs share one look
   ---------------------------------------------------------------------- */

input:where([type="text"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="password"], [type="search"], [type="date"]),
select,
textarea,
.wp-block-search__input {
	width: 100%;
	padding: 0.8rem 1rem;
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--sb-field-border);
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	transition: border-color var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base);
}

input:where([type="text"], [type="email"], [type="url"], [type="tel"], [type="number"], [type="password"], [type="search"]):focus,
select:focus,
textarea:focus {
	border-color: var(--wp--preset--color--action);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--action) 16%, transparent);
	outline: none;
}

::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
	opacity: 1;
}

label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
/* -----------------------------------------------------------------
   Gravity Forms

   Forms built through GFAPI have no `markupVersion`, and Gravity
   falls back to LEGACY markup per form when that is missing, even
   with the site wide legacy option off. Legacy markup carries none of
   the classes below, which shows up as a fully unstyled browser
   submit button sitting under perfectly styled fields.
   scripts/create-form.php sets markupVersion 2 for this reason.

   Selectors are doubled up on `.gform_wrapper.gravity-theme` where
   Gravity's own stylesheet would otherwise win on specificity.
   ----------------------------------------------------------------- */

.gform_wrapper.gravity-theme .gform_fields {
	grid-row-gap: var(--wp--preset--spacing--20);
	grid-column-gap: var(--wp--preset--spacing--20);
}

/* The form description sits above the fields and explains what the form is
   for. On the clinical forms it also carries the screening promise, so it is
   body copy rather than fine print. */
.gform_wrapper.gravity-theme .gform_description {
	display: block;
	margin-bottom: var(--wp--preset--spacing--30);
	max-width: 62ch;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------- labels */

/* Gravity ships `.gform_wrapper.gravity-theme .gfield_label` verbatim and its
   stylesheet is printed after the theme's, so an identical selector here loses
   on source order and silently does nothing. `.gform_fields` is a real wrapper
   in the markup, so adding it wins on specificity rather than on !important. */
.gform_wrapper.gravity-theme .gform_fields .gfield_label,
.gform_wrapper.gravity-theme .gform_fields legend.gfield_label,
.gform_wrapper.gravity-theme .gform_fields .gform-field-label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	letter-spacing: 0;
}

/* "(Required)" is quiet. It appears beside most labels on these forms, and in
   Gravity's default red it reads as though every field is already in error. */
.gform_wrapper.gravity-theme .gfield_label .gfield_required,
.gform_wrapper.gravity-theme .gfield_label .gfield_required_text,
.gform_wrapper.gravity-theme .gfield_label .gfield_required_asterisk {
	margin-left: 0.35em;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.gform_wrapper.gravity-theme .gform_fields .gfield_description {
	padding-top: 0.35rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
}

/* ---------------------------------------------------------- fields */

.gform_wrapper.gravity-theme .ginput_container input[type="text"],
.gform_wrapper.gravity-theme .ginput_container input[type="email"],
.gform_wrapper.gravity-theme .ginput_container input[type="tel"],
.gform_wrapper.gravity-theme .ginput_container input[type="url"],
.gform_wrapper.gravity-theme .ginput_container input[type="number"],
.gform_wrapper.gravity-theme .ginput_container input[type="date"],
.gform_wrapper.gravity-theme .ginput_container select,
.gform_wrapper.gravity-theme .ginput_container textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.8rem 1rem;
	background: var(--wp--preset--color--base);
	/* 3:1 against the field background, per WCAG 1.4.11. A hairline border is
	   the thing that tells someone where the input actually is. */
	border: 1.5px solid var(--sb-field-border);
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	line-height: 1.5;
	transition: border-color var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base);
}

.gform_wrapper.gravity-theme .ginput_container textarea {
	min-height: 9rem;
	resize: vertical;
}

.gform_wrapper.gravity-theme .ginput_container input:focus,
.gform_wrapper.gravity-theme .ginput_container select:focus,
.gform_wrapper.gravity-theme .ginput_container textarea:focus {
	border-color: var(--wp--preset--color--action);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--action) 20%, transparent);
	outline: none;
}

.gform_wrapper.gravity-theme .ginput_container ::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
	opacity: 1;
}

/* Native select needs its own chevron once the default look is replaced. The
   glyph is the ink colour rather than the previous grey. */
.gform_wrapper.gravity-theme .ginput_container select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335201A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 18px 18px;
	padding-right: 2.6rem;
	cursor: pointer;
}

/* ------------------------------------------- radios and checkboxes

   The partner form asks which of three partner types someone is, and
   that choice routes the enquiry, so it needs to be comfortable to
   hit and obvious once chosen. Native inputs are kept and tinted with
   accent-color rather than replaced with pseudo-elements: the native
   control keeps its own semantics, focus behaviour and Windows high
   contrast rendering for free.
   ----------------------------------------------------------------- */

.gform_wrapper.gravity-theme .gfield_radio,
.gform_wrapper.gravity-theme .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Gravity renders the input as a SIBLING of the label, not inside it, so the
   card has to be the row itself. Styling the label instead leaves the native
   radio floating outside the bordered box. */
.gform_wrapper.gravity-theme .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0;
	padding: 0 0.9rem;
	background: var(--wp--preset--color--surface);
	border: 1.5px solid var(--sb-field-border);
	border-radius: 10px;
	transition: background-color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base);
}

.gform_wrapper.gravity-theme .gchoice:hover {
	background: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--accent);
}

.gform_wrapper.gravity-theme .gchoice:has(input:checked) {
	background: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--action);
}

/* The ring belongs on the card, since the native control inside it is only
   20px and the card is what a sighted keyboard user is tracking. */
.gform_wrapper.gravity-theme .gchoice:has(input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--action);
	outline-offset: 2px;
}

.gform_wrapper.gravity-theme .gchoice input[type="radio"],
.gform_wrapper.gravity-theme .gchoice input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	/* Aligns the control with the first line of a label that wraps. */
	margin: 0.85rem 0 0;
	accent-color: var(--wp--preset--color--action);
	cursor: pointer;
}

/* The label fills the rest of the row and carries the vertical padding, so the
   whole height of the card is a tap target rather than just the text.
   `.gform_fields` is here for specificity: Gravity sets 600 on this label, so
   without it the UNCHECKED options render bolder than the chosen one. */
.gform_wrapper.gravity-theme .gform_fields .gchoice label {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0.7rem 0;
	background: none;
	border: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.gform_wrapper.gravity-theme .gform_fields .gchoice:has(input:checked) label {
	font-weight: 600;
}

/* --------------------------------------------------- the datepicker

   The consultation form asks for a surgery date, which is the single
   most important field on the clinical path.
   ----------------------------------------------------------------- */

.gform_wrapper.gravity-theme .ginput_container_date input {
	max-width: 100%;
}

.gform_wrapper.gravity-theme .ui-datepicker-trigger {
	margin-left: 0.5rem;
	filter: grayscale(1);
	opacity: 0.7;
}

/* Gravity Forms 3.0 ships its own datepicker component, NOT jQuery UI, so
   `#ui-datepicker-div` selectors match nothing. The calendar is
   `.gform-datepicker-calendar` and its day cells are plain `td.day`. */
.gform-datepicker-calendar {
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--lifted);
	font-family: var(--wp--preset--font-family--body);
}

.gform-datepicker-calendar td.day {
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
}

.gform-datepicker-calendar td.day:hover {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--action);
}

/* The chosen date, and today, in brand teal rather than the default slate. */
.gform-datepicker-calendar td.day.selected,
.gform-datepicker-calendar td.day.dayToday.selected,
.gform-datepicker-calendar td.day[aria-selected="true"] {
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
	box-shadow: none;
}

.gform-datepicker-calendar td.day.dayToday {
	color: var(--wp--preset--color--action);
	font-weight: 600;
}

.gform-datepicker-calendar td.day:focus-visible {
	outline: 3px solid var(--wp--preset--color--action);
	outline-offset: -3px;
}

/* The calendar toggle beside the date input. */
.gform_wrapper.gravity-theme .gform-datepicker-toggle {
	color: var(--wp--preset--color--action);
}

.gform_wrapper.gravity-theme .gform-datepicker-toggle:hover {
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------- submit button

   The same component as every other primary action on the site: the
   wine pill. A form's submit reading as a different colour from the
   page's other buttons makes it look like a lesser action, and this
   is the conversion point on four of the eight pages.

   Values mirror theme.json's elements.button so the two cannot drift;
   theme.json cannot reach Gravity's markup, which is why they are
   restated rather than inherited.
   ----------------------------------------------------------------- */

.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_footer button[type="submit"],
.gform_wrapper.gravity-theme .gform_page_footer input[type="button"],
.gform_wrapper.gravity-theme .gform_page_footer input[type="submit"],
.gform_wrapper.gravity-theme .gform_page_footer button[type="submit"] {
	width: auto;
	background: var(--wp--preset--color--wine);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 999px;
	padding: 1.05rem 2.1rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_footer button[type="submit"]:hover,
.gform_wrapper.gravity-theme .gform_page_footer button[type="submit"]:hover {
	background: #5E1B31;
	color: var(--wp--preset--color--base);
	transform: translateY(-1px);
}

.gform_wrapper.gravity-theme .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper.gravity-theme .gform_footer button[type="submit"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--action);
	outline-offset: 3px;
}

/* Gravity disables the button and swaps in a spinner while submitting. */
.gform_wrapper.gravity-theme .gform_footer button[disabled],
.gform_wrapper.gravity-theme .gform_footer input[disabled] {
	opacity: 0.65;
	cursor: progress;
	transform: none;
}

.gform_wrapper.gravity-theme .gform_footer {
	padding: var(--wp--preset--spacing--20) 0 0;
	margin: 0;
	justify-content: flex-start;
	align-items: center;
	gap: 0.75rem;
}

.gform_wrapper.gravity-theme .gform_ajax_spinner {
	width: 22px;
	height: 22px;
}

/* ------------------------------------------------------ validation */

.gform_wrapper.gravity-theme .gfield_description.validation_message,
.gform_wrapper.gravity-theme .validation_message {
	margin-top: 0.4rem;
	padding: 0.5rem 0.75rem;
	background: #fdf3f1;
	border: 0;
	border-left: 3px solid #8f2d1b;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--x-small);
	/* 7.53:1 on its own background. */
	color: #8f2d1b;
}

/* These restate the base field selector's shape with `.gfield_error` added.
   Written as `.gfield_error input` alone they are LESS specific than the base
   rule (which carries an [type="..."] attribute selector), so an invalid field
   kept its normal border and never looked wrong. */
.gform_wrapper.gravity-theme .gfield_error .ginput_container input[type="text"],
.gform_wrapper.gravity-theme .gfield_error .ginput_container input[type="email"],
.gform_wrapper.gravity-theme .gfield_error .ginput_container input[type="tel"],
.gform_wrapper.gravity-theme .gfield_error .ginput_container input[type="url"],
.gform_wrapper.gravity-theme .gfield_error .ginput_container input[type="number"],
.gform_wrapper.gravity-theme .gfield_error .ginput_container select,
.gform_wrapper.gravity-theme .gfield_error .ginput_container textarea,
.gform_wrapper.gravity-theme .gfield_error .gchoice {
	border-color: #8f2d1b;
	box-shadow: 0 0 0 3px rgba(143, 45, 27, 0.1);
}

.gform_wrapper.gravity-theme .gfield_error .gfield_label {
	color: var(--wp--preset--color--ink);
}

.gform_wrapper.gravity-theme .gform_validation_errors {
	border-radius: 10px;
	border: 0;
	border-left: 3px solid #8f2d1b;
	background: #fdf3f1;
	box-shadow: none;
	padding: 1rem 1.25rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

.gform_wrapper.gravity-theme .gform_validation_errors > h2,
.gform_wrapper.gravity-theme .gform_validation_errors > .gform_submission_error {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: #8f2d1b;
	margin: 0;
}

/* Gravity's error icon is kept: it is a red disc that reinforces the message
   for anyone scanning rather than reading, and it does not rely on colour
   alone because the text says the same thing. An earlier `display: none` here
   was dead anyway, since Gravity sets `flex` at a higher specificity. */

.gform_wrapper.gravity-theme .gform_validation_errors a {
	color: #8f2d1b;
}

/* Gravity's honeypot must stay hidden; it is the whole anti-spam mechanism. */
.gform_wrapper.gravity-theme .gform_validation_container,
.gform_wrapper.gravity-theme .gfield--type-honeypot {
	display: none !important;
}

/* Inline confirmation, for any form not routed to a Thank You page. */
.gform_confirmation_message {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border-left: 3px solid var(--wp--preset--color--action);
	border-radius: 10px;
	font-size: var(--wp--preset--font-size--large);
	font-family: var(--wp--preset--font-family--heading);
}

/* -------------------------------------------------------------------------
   10. Utilities
   ---------------------------------------------------------------------- */

/* Let a wide/full block bleed to the viewport edge on small screens. */
@media (max-width: 600px) {
	.sb-bleed-mobile {
		margin-left: calc(var(--wp--preset--spacing--20) * -1);
		margin-right: calc(var(--wp--preset--spacing--20) * -1);
		border-radius: 0;
	}
}

/* Overlay text needs a scrim to stay readable over artwork. */
.sb-scrim::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(74, 78, 82, 0.55) 0%,
		rgba(74, 78, 82, 0.2) 45%,
		rgba(74, 78, 82, 0.5) 100%
	);
	pointer-events: none;
}

.sb-scrim > * {
	position: relative;
	z-index: 1;
}

/* A monochrome logo can serve both the light header and the dark footer by
   being inverted, rather than needing a separate reversed asset. Only sound for
   single-colour marks — a full-colour logo must have its own reversed file. */
.sb-footer__logo--invert img {
	filter: invert(1) brightness(1.9);
}

/* =========================================================================
   11. Revive
   
   Everything below is specific to this build. It exists because the client
   chose Version 2 of the mockups and asked for four changes: keep V2's
   cleaner desktop aesthetic, bring back some of V1's colour and energy, make
   the mobile navigation tile-based, and keep a Home button permanently
   visible. Each of those is implemented here.
   ====================================================================== */

/* -----------------------------------------------------------------
   11.1 Header actions — phone and booking at every width
   ----------------------------------------------------------------- */

.sb-header__end {
	gap: clamp(0.5rem, 1.4vw, 1.35rem);
}

.sb-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	white-space: nowrap;
	line-height: 1.25;
}

.sb-phone:hover {
	color: var(--wp--preset--color--action);
}

.sb-phone__icon {
	width: 20px;
	height: 20px;
	flex: none;
	display: none;
}

.sb-phone--compact .sb-phone__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* In the footer the label is a real, visible caption above the number. */
.sb-footer .sb-phone {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	color: rgba(255, 255, 255, 0.82);
}

.sb-footer .sb-phone__label {
	order: 2;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	opacity: 0.72;
}

.sb-footer .sb-phone__number {
	order: 1;
}

.sb-footer .sb-phone:hover {
	color: var(--wp--preset--color--aqua);
}

/* The header booking button is smaller than a body button; at full size it
   dominates a bar that also has to hold eight nav items. */
.sb-header .sb-booking .wp-block-button__link {
	padding: 0.68rem 1.3rem;
	font-size: 0.75rem;
}

.sb-booking--full .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
}

/* -----------------------------------------------------------------
   11.2 Navigation breakpoint

   Core switches the navigation block to its overlay at 600px. Eight
   top-level items plus a phone number and a booking button need far
   more room than that, so the switch is moved to 1024px. Core's own
   rules live inside `@media (min-width: 600px)`, so these have to
   both outrank them and sit in a narrower query.
   ----------------------------------------------------------------- */

@media (max-width: 1023.98px) {
	.sb-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.sb-header .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* Scoped to the main bar only. The utility strip has room for the number
	   at every width, and hiding it there leaves "Call" next to an
	   icon with no number, which is worse than useless. */
	.sb-header__end .sb-phone__number {
		display: none;
	}

	.sb-header__end .sb-phone__icon {
		display: block;
	}

	.sb-header__end .sb-phone {
		padding: 0.5rem;
	}
}

/* Below this the header cannot hold a labelled booking button as well as the
   logo, the phone and the menu control. The sticky bar carries booking from
   here down, and it is always on screen, so nothing is lost. */
@media (max-width: 560px) {
	.sb-header .sb-booking {
		display: none;
	}
}

/* -----------------------------------------------------------------
   11.3 Tile navigation

   The client liked V1's large tappable cards on mobile and asked for
   that feeling in the menu. Core renders the overlay menu as a plain
   vertical list; this turns the same markup into a two-column grid of
   tiles. Home spans the full width as the first tile, which is also
   how the permanently-visible Home requirement is met on mobile.
   ----------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: rgba(244, 251, 250, 0.97) !important;
}

 /* The `.sb-header` prefix is load-bearing. Core styles this list as a
   column flexbox at the same specificity as a bare
   `.wp-block-navigation__responsive-container.is-menu-open
   .wp-block-navigation__container` selector, and core's stylesheet wins on
   source order, so the grid silently never applies and the tiles stack.
   The header's own `justifyContent: right` layout class also right-aligns
   them, which is correct on desktop and wrong in the sheet. */
.sb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	justify-content: stretch;
	gap: 0.7rem;
	max-width: 30rem;
	width: 100%;
	margin-inline: auto;
	text-align: left;
}

.sb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	display: block;
	width: auto;
	border-bottom: 0;
}

/* Home is the wide tile at the top of the sheet. */
.sb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child {
	grid-column: 1 / -1;
}

/* Clear the close control, which is pinned to the top right of the sheet. */
.sb-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding-block-start: 5rem;
	/* Clear the sticky action bar, which now sits above the sheet. */
	padding-block-end: calc(56px + env(safe-area-inset-bottom, 0px) + 1rem);
}

.sb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	/* Without this the tile is its grid cell PLUS 1.1rem of padding either
	   side and a 1px border, so every tile in the right-hand column hangs off
	   the screen by exactly 37px. Core does not set border-box on this element. */
	box-sizing: border-box;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	/* Comfortably above the 44px minimum target, and tall enough that two
	   words wrap without the tiles going ragged. */
	min-height: 5.4rem;
	padding: 1rem 1.1rem;
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 28%, transparent);
	box-shadow: var(--wp--preset--shadow--soft);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--teal-deep);
	text-align: left;
	transition: background-color var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

/* A droplet watermark in the corner of each tile, so the grid reads as
   Revive's rather than as a generic app menu. Decorative only. */
.sb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	right: 0.85rem;
	bottom: 0.7rem;
	width: 22px;
	/* The droplet path's round base reaches y = 33; a shorter box clips it. */
	height: 33px;
	opacity: 0.16;
	background: var(--wp--preset--color--accent);
	clip-path: path("M11 0C11 0 0 15 0 22a11 11 0 0 0 22 0C22 15 11 0 11 0Z");
	pointer-events: none;
}

.sb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	position: relative;
	overflow: hidden;
}

.sb-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item:first-child
	.wp-block-navigation-item__content {
	min-height: 4.2rem;
	background: var(--wp--preset--color--tint);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
}

.sb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.sb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--action);
	transform: translateY(-2px);
}

.sb-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item.current-menu-item
	.wp-block-navigation-item__content {
	border-color: var(--wp--preset--color--action);
	border-width: 2px;
}

/* The sheet also carries the two actions, so a phone in hand never has to
   scroll back to the header. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	justify-content: center;
	gap: 1.25rem;
}

/* -----------------------------------------------------------------
   11.4 Sticky mobile action bar
   ----------------------------------------------------------------- */

.sb-mobile-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* Above the navigation overlay, which core places at 100000. The brief
	   requires phone and booking reachable at every viewport width; buried
	   under the menu sheet they are reachable at every width except the one
	   where someone is actively looking for them. */
	z-index: 100001;
	/* Clears the home indicator on iOS rather than sitting under it. */
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--wp--preset--color--base);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
	box-shadow: 0 -6px 24px rgba(20, 112, 123, 0.12);
}

.sb-mobile-bar a {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 56px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--action);
}

.sb-mobile-bar svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.sb-mobile-bar a.sb-mobile-bar__book {
	background: var(--wp--preset--color--wine);
	color: var(--wp--preset--color--base);
}

.sb-mobile-bar a.sb-mobile-bar__book:hover {
	background: #5E1B31;
	color: var(--wp--preset--color--base);
}

@media (max-width: 1023.98px) {
	.sb-mobile-bar {
		display: flex;
	}

	/* Stop the bar covering the last line of the footer. */
	body {
		padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
	}
}

/* -----------------------------------------------------------------
   11.5 Bands and ornament

   The colour energy the client asked to carry over from V1. V1 put
   white type on the bright teal, which measures 2.88:1 and cannot
   ship. `band-deep` is the deep half of the same measured ramp and
   clears 4.5:1 across every stop, so the band reads as saturated
   without failing.
   ----------------------------------------------------------------- */

.sb-band {
	padding-block: var(--wp--preset--spacing--50);
}

.sb-band--deep {
	background: var(--wp--preset--gradient--band-deep);
	color: var(--wp--preset--color--base);
}

.sb-band--deep :where(h1, h2, h3, h4, h5, .wp-block-heading) {
	color: var(--wp--preset--color--base);
}

.sb-band--deep a:not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--wp--preset--color--base);
	text-decoration-color: rgba(255, 255, 255, 0.5);
}

.sb-band--tint {
	background: var(--wp--preset--color--tint);
}

.sb-band--surface {
	background: var(--wp--preset--color--surface);
}

.sb-band--aqua {
	background: var(--wp--preset--gradient--aqua-soft);
}

/* The gold lotus, used as a section divider and inside the hero lockup. */
.sb-lotus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	color: var(--wp--preset--color--gold);
}

.sb-lotus svg {
	width: 42px;
	height: 28px;
	flex: none;
}

.sb-lotus--rule::before,
.sb-lotus--rule::after {
	content: "";
	height: 1px;
	flex: 1 1 auto;
	max-width: 9rem;
	background: currentColor;
	opacity: 0.75;
}

.sb-band--deep .sb-lotus {
	color: var(--wp--preset--color--aqua);
}

/* The tagline, in gold tracked caps, exactly as the collateral sets it.
   Large only: gold is 2.77:1 on white and never carries body text. */
.sb-tagline {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

/* The signature mixed heading: caps serif with one word in italic, as in
   "Personalized *Wellness*" on the client's own homepage. */
.sb-mixed em,
.sb-mixed .sb-script {
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	color: var(--wp--preset--color--teal-deep);
}

.sb-band--deep .sb-mixed em,
.sb-band--deep .sb-mixed .sb-script {
	color: var(--wp--preset--color--aqua);
}

.sb-caps {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* -----------------------------------------------------------------
   11.6 Page sections
   ----------------------------------------------------------------- */

/* Trust strip: four short proofs, straight under the hero. */
.sb-trust {
	background: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--base);
}

.sb-trust p,
.sb-trust li {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--base);
	margin: 0;
}

/* The two-track fork. Deliberately two equal cards: the brief requires the
   audience split to be the most obvious thing after the hero. */
.sb-fork {
	background: var(--wp--preset--color--base);
	border-radius: 18px;
	border-top: 4px solid var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: clamp(1.6rem, 3.4vw, 2.6rem);
	height: 100%;
}

.sb-fork--clinical {
	border-top-color: var(--wp--preset--color--azure);
}

.sb-fork ul {
	padding-left: 0;
	list-style: none;
}

.sb-fork li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
}

.sb-fork li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 9px;
	/* The droplet path's round base reaches y = 13.5; a shorter box clips it. */
	height: 14px;
	background: var(--wp--preset--color--accent);
	clip-path: path("M4.5 0C4.5 0 0 6 0 9a4.5 4.5 0 0 0 9 0C9 6 4.5 0 4.5 0Z");
}

/* Price cards, matching the client's own service card layout. */
.sb-price {
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
	border-radius: 14px;
	padding: clamp(1.3rem, 2.6vw, 1.9rem);
	height: 100%;
	text-align: center;
}

.sb-price h3 {
	font-size: var(--wp--preset--font-size--large);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--teal-deep);
	margin-bottom: 0.5rem;
}

.sb-price__amount {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1;
	color: var(--wp--preset--color--ink);
}

.sb-price__unit {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-top: 0.3rem;
}

/* Numbered steps and the surgical timeline. */
.sb-steps {
	counter-reset: sb-step;
	list-style: none;
	padding-left: 0;
}

.sb-steps > li {
	counter-increment: sb-step;
	position: relative;
	padding-left: 3.4rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

.sb-steps > li::before {
	content: counter(sb-step);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--gold-text);
}

.sb-band--deep .sb-steps > li::before {
	border-color: var(--wp--preset--color--aqua);
	color: var(--wp--preset--color--base);
}

/* Coverage-area pills. */
.sb-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	list-style: none;
	padding-left: 0;
}

.sb-pills li {
	padding: 0.45rem 1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--tint);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 32%, transparent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--action);
}

/* The translucent overlay panels from the clinical flyer. Type sits at 1.15rem
   and above because ink on the blue panel measures 4.36:1, which is below the
   body threshold but clears the 3:1 large-text one. */
.sb-panel {
	padding: 0.85rem 1.25rem;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	background: rgba(94, 185, 176, 0.88);
}

.sb-panel--blue {
	background: rgba(73, 143, 194, 0.9);
}

/* A downloadable PDF, called out as its own object. The client specifically
   liked these on the reference site's treatment pages. */
.sb-download {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem 1.35rem;
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: background-color var(--wp--custom--transition--base);
}

.sb-download:hover {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--ink);
}

.sb-download::before {
	content: "";
	flex: none;
	width: 30px;
	height: 38px;
	background: var(--wp--preset--color--gold-text);
	clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%);
}

.sb-download strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.25;
}

.sb-download > span > span {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

/* The compliance block that closes every page describing a treatment. */
.sb-compliance {
	border-left: 3px solid var(--wp--preset--color--gold);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* -----------------------------------------------------------------
   11.7 Placeholders

   Rule 4 of the build instructions: a placeholder that ships is
   embarrassing. These are deliberately impossible to miss, in the
   editor and on the front end alike.
   ----------------------------------------------------------------- */

.sb-placeholder {
	display: inline-block;
	padding: 0.15em 0.5em;
	border: 1px dashed var(--wp--preset--color--gold);
	border-radius: 4px;
	background: rgba(180, 141, 67, 0.09);
	color: var(--wp--preset--color--gold-text);
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
}

.sb-footer .sb-placeholder {
	color: var(--wp--preset--color--gold);
	background: rgba(180, 141, 67, 0.16);
}

/* -----------------------------------------------------------------
   11.8 Motion — restrained, per the brief
   ----------------------------------------------------------------- */

.sb-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Without JavaScript nothing is ever revealed, so the content must start
   visible and the animation must be the enhancement. */
html:not(.sb-js) .sb-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.sb-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -----------------------------------------------------------------
   11.9 Pieces used by the Revive patterns
   ----------------------------------------------------------------- */

.sb-hero-home .sb-tagline {
	margin-bottom: 0;
}

/* The inline "already know what you need" line under the fork buttons. It
   carries the screening promise, so it is quiet but never hidden. */
.sb-inline-cta {
	color: var(--wp--preset--color--muted);
	max-width: 52ch;
}

/* Home hero: a dominant Book Now, then one white button per service line.
   Wine on the deep teal hero measures about 1.4:1, so the button carries a
   pale gold ring to separate it from the background. */
.sb-hero-home__sub {
	color: var(--wp--preset--color--aqua);
	font-size: var(--wp--preset--font-size--medium);
	margin-top: 0.6rem;
}

/* Book Now and the three path buttons form one block that hugs the path row,
   so Book Now centres over the three. On phones both stretch full width. */
.sb-hero-home__ctas {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: fit-content;
	max-width: 100%;
}

.sb-hero-home__ctas > * {
	margin-block: 0;
}

/* Specific enough to beat the inverted-primary rule for .sb-hero-deep below. */
.sb-hero-deep .sb-hero-home__book .wp-block-button.sb-booking > .wp-block-button__link {
	background: var(--wp--preset--color--wine);
	color: var(--wp--preset--color--base);
	box-shadow: 0 0 0 2px var(--wp--preset--color--gold-light);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.16em;
	padding: 1.3rem 3.4rem;
}

.sb-hero-deep .sb-hero-home__book .wp-block-button.sb-booking > .wp-block-button__link:hover,
.sb-hero-deep .sb-hero-home__book .wp-block-button.sb-booking > .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--wine) 80%, var(--wp--preset--color--ink));
	color: var(--wp--preset--color--base);
}

/* Sized so all three sit on one line in the hero column at desktop widths. */
.sb-hero-home__paths {
	gap: 0.6rem;
	justify-content: center;
}

.sb-hero-home__paths .wp-block-button__link {
	padding: 0.8rem 0.95rem;
	letter-spacing: 0.06em;
}

@media (max-width: 600px) {
	.sb-hero-home__ctas {
		width: 100%;
		align-items: stretch;
	}

	.sb-hero-home__book .wp-block-button,
	.sb-hero-home__paths .wp-block-button {
		width: 100%;
	}

	.sb-hero-home__book .wp-block-button__link,
	.sb-hero-home__paths .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* Choose your path: line one's photograph bleeds to the card edges, and line
   two's two programs are split by a quiet rule. */
/* Two classes deep to beat core's flow-layout first-child margin reset. */
.sb-fork > .sb-fork__media {
	margin: calc(-1 * clamp(1.6rem, 3.4vw, 2.6rem)) calc(-1 * clamp(1.6rem, 3.4vw, 2.6rem)) var(--wp--preset--spacing--30);
}

.sb-fork__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: 14px 14px 0 0;
}

.sb-fork .sb-fork__rule {
	margin-block: var(--wp--preset--spacing--30);
	border: 0;
	border-top: 1px solid var(--wp--preset--color--aqua);
	opacity: 1;
}

.sb-fork .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--30);
}

/* Coverage cards: pills inside a fork card drop the card's drip bullet. */
.sb-fork .sb-pills li {
	padding: 0.45rem 1rem;
	margin-bottom: 0;
}

.sb-fork .sb-pills li::before {
	content: none;
}

.sb-pills.sb-pills-center {
	justify-content: center;
}

/* Coverage cards: a small label above each county list. */
.sb-coverage__label {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Homepage stories and guides: guides are a compact list, split by rules,
   so they read as reference material next to the story cards. */
.sb-guide-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sb-guide-list > li {
	padding-block: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--aqua);
}

.sb-guide-list > li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--aqua);
}

.sb-guide-item .wp-block-post-title {
	margin: 0;
}

.sb-guide-item .wp-block-post-excerpt__excerpt {
	margin: 0.3rem 0 0;
}

/* A fork-style card in the clinical blue, where the double-hyphen modifier
   cannot be written into a scaffolded block comment. */
.sb-fork.sb-fork-clinical-accent {
	border-top-color: var(--wp--preset--color--azure);
}

/* The "Become a partner" link that closes each partner section. */
.sb-partner-link {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.sb-partner-link a::after {
	content: " \2192";
}

/* Care team: founders four across, nurses three across; both drop to two
   and then one column as the screen narrows. */
.sb-team {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--20);
	align-items: start;
}

.sb-team.sb-team-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sb-team.sb-team-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
	.sb-team.sb-team-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.sb-team.sb-team-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.sb-team.sb-team-4,
	.sb-team.sb-team-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sb-team > * {
	margin-block: 0;
}

.sb-team__heading {
	margin: 0;
}

.sb-person .sb-person__contact {
	margin-top: 0.75rem;
}

.sb-person .sb-person__bio {
	margin-top: 0.75rem;
}

.sb-person .sb-person__bio summary {
	cursor: pointer;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--action);
}

.sb-person .sb-person__bio[open] summary {
	margin-bottom: 0.5rem;
}

.sb-person {
	background: var(--wp--preset--color--base);
	padding: clamp(1.4rem, 3vw, 2rem);
}

.sb-person .sb-person__photo {
	margin: 0 0 1rem;
}

.sb-person .sb-person__photo img {
	display: block;
	width: 7rem;
	height: 7rem;
	border-radius: 50%;
	object-fit: cover;
}

.sb-person .sb-person__name {
	margin-bottom: 0.35rem;
}

.sb-person .sb-person__tag {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--action);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Partner benefit cards. */
.sb-benefit {
	height: 100%;
	padding: clamp(1.2rem, 2.4vw, 1.6rem);
	border-top: 3px solid var(--wp--preset--color--accent);
}

.sb-benefit h4 {
	margin: 0 0 0.4rem;
}

/* Testimonial quote inside a card. */
.sb-quote.wp-block-quote {
	margin: 0;
	padding: 0;
	border: 0;
}

.sb-quote::before {
	content: "\201C";
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	line-height: 1;
	color: var(--wp--preset--color--gold);
}

/* The theme's default quote style is the large display serif; a testimonial
   of this length reads better in the body face. */
.sb-quote.wp-block-quote p {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.65;
	color: var(--wp--preset--color--ink);
}

.sb-quote cite {
	display: block;
	margin-top: 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}

/* Guide pages: the featured image keeps its full frame (nothing cropped) but
   is capped in height and centred, so the article starts on the first
   screen. Uncapped, a portrait photo at full width was over 3,000px tall. */
.sb-guide-banner {
	text-align: center;
}

/* Two classes deep to beat core's `.wp-block-post-featured-image img`
   (width: 100%), which otherwise stretches the image to the full width. */
.wp-block-post-featured-image.sb-guide-banner img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 18rem;
}

/* Surgical NAD+ "What to expect": before and after cards around a
   "Surgery" marker. The marker sits on a short rule between the cards; on a
   phone the columns stack and the rule turns vertical. */
.sb-timeline__tag {
	display: inline-block;
	margin: 0 0 0.6rem;
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--action);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sb-timeline__card h3 {
	margin-top: 0;
}

/* Cards stretch to equal height; the marker centres between them. */
.sb-timeline .sb-timeline__card {
	height: 100%;
}

.sb-timeline > .wp-block-column:has(> .sb-timeline__marker) {
	align-self: center;
}

.sb-timeline__marker {
	position: relative;
	margin: 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--gold-text);
}

.sb-timeline__marker::before,
.sb-timeline__marker::after {
	content: "";
	display: block;
	width: 1px;
	height: 2.5rem;
	margin: 0.5rem auto;
	background: var(--wp--preset--color--gold);
}

@media (min-width: 782px) {
	.sb-timeline__marker {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.sb-timeline__marker::before,
	.sb-timeline__marker::after {
		flex: 1;
		width: auto;
		height: 1px;
		margin: 0;
	}
}

/* Surgical NAD+ benefits: two narrower cards centred under the intro, with
   headings that read as the point of the section. */
.wp-block-columns.sb-benefits.alignwide {
	max-width: 46rem;
	margin-inline: auto;
}

.sb-fork .sb-benefits__head {
	display: inline-block;
	margin: 0 0 1rem;
	padding-bottom: 0.35rem;
	border-bottom: 3px solid var(--wp--preset--color--accent);
}

.sb-fork-clinical-accent .sb-benefits__head {
	border-bottom-color: var(--wp--preset--color--azure);
}

.sb-benefits .sb-fork li {
	font-size: var(--wp--preset--font-size--medium);
}

.sb-injury .sb-fork li {
	font-size: var(--wp--preset--font-size--medium);
}

/* Keep a phone number on one line. */
.sb-nowrap {
	white-space: nowrap;
}

/* A small note under a call to action on a dark band, such as the Surgical
   NAD+ prescription line. Muted, but well above 4.5:1 on the deep band. */
.sb-on-dark .sb-cta-note {
	max-width: 46rem;
	margin-inline: auto;
	color: var(--wp--preset--color--aqua);
	line-height: 1.6;
}

/* A transparent cut-out photo in a hero (Surgical NAD+). No rounded corners
   or shadow, which would draw a box around the shape, and never wider than
   the source so it is not upscaled. */
.sb-hero-cutout {
	margin: 0;
	text-align: center;
}

.wp-block-image.sb-hero-cutout img {
	width: auto;
	max-width: min(100%, 454px);
	height: auto;
	border-radius: 0;
	box-shadow: none;
	filter: drop-shadow(0 18px 32px rgba(4, 30, 36, 0.28));
}

/* What to expect: the photo sits centred between the heading and the two
   timeline cards, no wider than the cards' combined width. */
.sb-expect-photo {
	max-width: 46rem;
	margin: var(--wp--preset--spacing--30) auto var(--wp--preset--spacing--40);
}

/* Surgical NAD+ "See the science" section. */
.sb-science-video {
	max-width: 46rem;
	margin: var(--wp--preset--spacing--30) auto var(--wp--preset--spacing--40);
}

.sb-science-video iframe {
	border-radius: 14px;
}

.sb-science-video figcaption {
	text-align: center;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.sb-science-cards .sb-fork h3 a {
	color: var(--wp--preset--color--ink);
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: 0.2em;
}

.sb-science__quote {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}

.sb-science__source {
	color: var(--wp--preset--color--muted);
}

/* A wine booking button on a dark hero. Four classes deep to beat the
   inverted-primary rule (.sb-hero-deep .sb-booking .wp-block-button__link).
   The pale gold ring separates wine from the deep teal (about 1.4:1). */
.sb-hero-deep .wp-block-button.sb-booking.sb-btn-wine > .wp-block-button__link {
	background: var(--wp--preset--color--wine);
	color: var(--wp--preset--color--base);
	box-shadow: 0 0 0 2px var(--wp--preset--color--gold-light);
}

.sb-hero-deep .wp-block-button.sb-booking.sb-btn-wine > .wp-block-button__link:hover,
.sb-hero-deep .wp-block-button.sb-booking.sb-btn-wine > .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--wine) 80%, var(--wp--preset--color--ink));
	color: var(--wp--preset--color--base);
}

/* "Further reading" links under the research cards. */
.sb-reading-wrap {
	max-width: 46rem;
	margin-inline: auto;
}

.sb-reading {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.sb-reading li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.25rem 1rem;
	padding: 0.85rem 0;
	border-top: 1px solid var(--wp--preset--color--aqua);
}

.sb-reading li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--aqua);
}

.sb-reading a {
	font-weight: 600;
}

.sb-reading__source {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Surgical NAD+ hero photo: capped narrower than its column so the tall
   portrait does not make the hero taller than it needs to be. */
.wp-block-image.sb-hero-narrow {
	text-align: center;
}

.wp-block-image.sb-hero-narrow img {
	width: auto;
	max-width: min(100%, 22rem);
	height: auto;
}

/* Legal links in the footer's bottom row, separated by middle dots. */
.sb-footer__legal-links {
	display: inline-block;
	margin-left: 0.75em;
}

.sb-footer__legal-links a {
	white-space: nowrap;
}

/* Small-print links read as links: underlined, not colour alone. */
.sb-footer__legal a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sb-footer__legal-links a + a::before {
	content: "\00B7";
	display: inline-block;
	margin: 0 0.5em;
	color: currentColor;
	opacity: 0.6;
	text-decoration: none;
}

@media (max-width: 600px) {
	.sb-footer__legal-links {
		display: block;
		margin: 0.4rem 0 0;
	}
}

.sb-legal__updated {
	color: var(--wp--preset--color--muted);
}

/* A guide's author line. Paragraph measure is set in ch, so at this smaller
   size the centred box would be narrower and sit indented; pin it to the
   content width so it lines up with the body text. */
.is-layout-constrained > .sb-byline {
	max-width: var(--wp--style--global--content-size);
}

.sb-byline {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.02em;
}

/* A step in the four-part "how it works" row. The numeral is a gold-outlined
   disc, matching the ornament weight used elsewhere. */
.sb-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	margin-bottom: 0.85rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--gold);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1;
	color: var(--wp--preset--color--gold-text);
}

.sb-band--deep .sb-step__num {
	border-color: var(--wp--preset--color--aqua);
	background: transparent;
	color: var(--wp--preset--color--base);
}

.sb-step h3 {
	margin-bottom: 0.4rem;
}

/* Long addresses and email addresses must not force a horizontal scrollbar in
   a narrow footer column. */
.sb-footer a {
	overflow-wrap: anywhere;
}

/* Call band under the home hero: one tap-to-call line. The sentence is set in
   capitals here rather than typed in capitals, so screen readers read words. */
.sb-callband__line {
	margin: 0;
	line-height: 1.4;
}

.sb-callband__line a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.2rem 0.9rem;
	padding-block: 0.35rem;
}

.sb-callband__number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--base);
}

.sb-callband__text {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--aqua);
}

.sb-callband__line a:hover .sb-callband__text,
.sb-callband__line a:focus-visible .sb-callband__text {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* In the hero the ornament sits at the left with the rule running right, so it
   lines up with the left-aligned headline underneath instead of floating in a
   centred rule above ragged-left text. */
.sb-hero-home .sb-lotus--rule {
	justify-content: flex-start;
}

.sb-hero-home .sb-lotus--rule::before {
	display: none;
}

.sb-hero-home .sb-lotus--rule::after {
	max-width: 14rem;
}

.sb-hero-home .sb-tagline {
	text-align: left;
}

/* The portrait crop of the trail photograph is very tall. Constrain it to a
   sensible box and hold the subject in frame rather than letting a 1:2.9 image
   set the height of the whole hero. */
.sb-media--portrait img {
	max-height: 30rem;
	width: 100%;
	object-fit: cover;
	object-position: 50% 22%;
	border-radius: 14px;
}

/* -----------------------------------------------------------------
   11.10 Deep hero

   The client preferred a darker hero than the pale aqua wash, so the
   heroes sit on `hero-deep`: a deep TEAL ramp (#0C4A55 to #157F86)
   rather than the azure `band-deep`, because the brand's signature
   colour is teal and the azure ramp reads blue.

   Everything below exists because a dark ground inverts the palette's
   assumptions, and two of them cannot simply be recoloured:

   - The wine button DISAPPEARS. Wine and deep teal sit at almost the
     same luminance: the best separation any shade of wine manages
     against this ramp is 1.38:1, so the primary action would be a
     barely visible rectangle. On dark grounds the primary button is
     white with deep teal text (4.76:1 against the band, 9.88:1 for
     the label). Wine remains the primary everywhere else, which is
     most of the site.
   - The brand gold is 1.55:1 here, effectively invisible. `gold-light`
     is the pale champagne version at 3.17:1, which clears the 3:1
     large-text threshold for the tagline.
   ----------------------------------------------------------------- */

.sb-hero-deep {
	background: var(--wp--preset--gradient--hero-deep);
	color: var(--wp--preset--color--base);
}

.sb-hero-deep :where(h1, h2, h3, h4, h5, p, li, .wp-block-heading) {
	color: var(--wp--preset--color--base);
}

/* The eyebrow: gold-text is a dark bronze and unreadable here. */
.sb-hero-deep h6,
.sb-hero-deep .sb-eyebrow {
	color: var(--wp--preset--color--aqua);
}

/* The tagline keeps its gold, in the pale version, at a size where the
   3:1 large-text threshold applies. */
.sb-hero-deep .sb-tagline {
	color: var(--wp--preset--color--gold-light);
	font-size: var(--wp--preset--font-size--x-large);
}

.sb-hero-deep .sb-lotus {
	color: var(--wp--preset--color--gold-light);
}

.sb-hero-deep .sb-lotus--rule::before,
.sb-hero-deep .sb-lotus--rule::after {
	opacity: 0.55;
}

/* The italic word inside a mixed heading. */
.sb-hero-deep .sb-mixed em,
.sb-hero-deep .sb-mixed .sb-script {
	color: var(--wp--preset--color--aqua);
}

.sb-hero-deep .sb-inline-cta {
	color: rgba(255, 255, 255, 0.8);
}

.sb-hero-deep a:not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--wp--preset--color--base);
	text-decoration-color: rgba(255, 255, 255, 0.55);
}

.sb-hero-deep a:not(.wp-element-button):not(.wp-block-button__link):hover {
	text-decoration-color: var(--wp--preset--color--base);
}

/* Primary button, inverted. Specific enough to beat theme.json's
   elements.button rule, which is emitted as `.wp-element-button`. */
.sb-hero-deep .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.sb-hero-deep .sb-booking .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--action);
}

.sb-hero-deep .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.sb-hero-deep .sb-booking .wp-block-button__link:hover {
	background: var(--wp--preset--color--aqua);
	color: var(--wp--preset--color--action);
}

/* Secondary button on dark. */
.sb-hero-deep .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--base);
	border-color: rgba(255, 255, 255, 0.7);
}

.sb-hero-deep .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--action);
	border-color: var(--wp--preset--color--base);
}

/* Focus ring needs to be light to be seen at all on this ground. */
.sb-hero-deep :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--aqua);
}

/* The hero photograph gets a soft edge treatment so it does not read as a
   rectangle pasted onto the gradient. */
.sb-hero-deep .sb-media img {
	box-shadow: 0 18px 48px rgba(4, 30, 36, 0.35);
}

/* Placeholders stay conspicuous on the dark ground too. */
.sb-hero-deep .sb-placeholder {
	color: var(--wp--preset--color--gold-light);
	background: rgba(232, 208, 162, 0.14);
	border-color: var(--wp--preset--color--gold-light);
}

/* -----------------------------------------------------------------
   11.11 Utility bar and dropdown navigation

   Structure follows the reference site the client named: a slim
   utility strip carrying the phone number above the main bar, so the
   main bar holds only the logo, the sections, and the booking action.
   ----------------------------------------------------------------- */

.sb-utility {
	background: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--base);
}

.sb-utility__bar {
	padding-block: 0.45rem;
	gap: 0.5rem 1.5rem;
}

.sb-utility__note {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.02em;
}

.sb-utility .sb-phone {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.02em;
}

.sb-utility .sb-phone:hover {
	color: var(--wp--preset--color--aqua);
}

.sb-utility .sb-phone__label {
	opacity: 0.78;
	font-weight: 400;
}

.sb-utility .sb-phone__icon {
	display: block;
	width: 15px;
	height: 15px;
}

/* The utility strip is the first thing in the header, so the sticky wrapper
   now carries two rows. Keep the strip from eating vertical space on phones. */
@media (max-width: 600px) {
	.sb-utility__note {
		display: none;
	}

	.sb-utility__bar {
		justify-content: center;
	}
}

/* -----------------------------------------------------------------
   Dropdowns

   Core opens a submenu on hover AND on focus, and keeps it open on
   click for keyboard and touch. The panel below is presentation only.
   ----------------------------------------------------------------- */

.sb-header .wp-block-navigation .wp-block-navigation__submenu-container {
	border: 0;
	border-top: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 0 10px 10px;
	padding: 0.5rem;
	/* Wide enough that the longest label, "Frequently asked questions", sits on
	   one line. A wrapped item in a dropdown reads as two items. */
	min-width: 20rem;
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.sb-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.62rem 0.85rem;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.sb-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.sb-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--action);
}

/* The first item in each panel is the parent page itself, so it reads as the
   overview rather than as a sibling of the sections beneath it. */
.sb-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
	font-weight: 600;
	color: var(--wp--preset--color--action);
	border-bottom: var(--wp--custom--rule--hairline);
	border-radius: 6px 6px 0 0;
	margin-bottom: 0.2rem;
}

/* The desktop underline animation should not run on submenu items. */
.sb-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

/* Nav gets a little tighter now that there are six top-level items plus a
   button; the phone has moved to the utility strip. */
@media (min-width: 1024px) and (max-width: 1280px) {
	.sb-header .sb-nav {
		font-size: 0.85rem;
	}

	.sb-header .sb-nav .wp-block-navigation__container {
		gap: 0.85rem !important;
	}
}

/* -----------------------------------------------------------------
   The mobile menu shows top-level destinations only

   The dropdowns exist so a desktop visitor can jump straight to a
   section. On a phone those same entries are anchor links into a page
   the tile already opens, so they add a screenful of near-duplicate
   choices and make the menu harder to scan, not easier.

   So the submenus are dropped from the overlay entirely and the sheet
   goes back to a plain grid of eight tiles. One navigation block still
   drives both: there is no second menu to keep in step.
   ----------------------------------------------------------------- */

.sb-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	display: none;
}

/* The toggle would otherwise announce and expose a submenu that is no longer
   in the sheet. */
.sb-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle,
.sb-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-icon {
	display: none;
}

/* A parent is now an ordinary tile, so it must not keep the card treatment
   that wrapped it and its children. */
.sb-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item.has-child {
	grid-column: auto;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* Blog lives inside the About dropdown on desktop, which is the right place
   for it there. Hiding the submenus would strand it on mobile, so it gets its
   own tile in the sheet and is hidden from the desktop bar. */
.sb-header .sb-only-mobile {
	display: none;
}

.sb-header .wp-block-navigation__responsive-container.is-menu-open .sb-only-mobile {
	display: block;
}

/* -----------------------------------------------------------------
   11.12 Social icons

   One confirmed account so far. The row is built to take more without
   changing anything but the markup.
   ----------------------------------------------------------------- */

.sb-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: var(--wp--preset--spacing--20);
}

.sb-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* No chrome around the glyph, but the box stays 44px so the tap target is
	   still a real one rather than the 21px icon alone. */
	width: 44px;
	height: 44px;
	margin-left: -0.6rem;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

.sb-social__link svg {
	width: 24px;
	height: 24px;
	display: block;
}

.sb-social__link:hover,
.sb-social__link:focus-visible {
	color: var(--wp--preset--color--aqua);
}

/* -----------------------------------------------------------------
   11.13 Header height

   The lockup is a tall shape: the droplet rises well above the cap
   height of the wordmark, so at 196px wide it stood 90px tall and set
   the height of the whole bar, while the navigation and the booking
   button next to it are only 36px. That left the header at 198px, most
   of it empty space either side of the logo.

   Sizing the logo down and tightening the padding brings the bar to
   roughly the height of its own contents.
   ----------------------------------------------------------------- */

.sb-header .wp-block-site-logo img {
	width: clamp(124px, 11vw, 152px);
}

.sb-header__bar {
	padding-block: clamp(0.5rem, 0.9vw, 0.7rem);
}

.sb-utility__bar {
	padding-block: 0.3rem;
}

/* -----------------------------------------------------------------
   11.14 Formula menu

   Ten named blends. A three column grid at desktop, two at tablet,
   one on a phone, sized so a card holds its description without the
   row heights going ragged.
   ----------------------------------------------------------------- */

.sb-formulas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

@media (max-width: 1023px) {
	.sb-formulas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 660px) {
	.sb-formulas {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sb-formula {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(1.2rem, 2.4vw, 1.7rem);
	background: var(--wp--preset--color--base);
	border-radius: 14px;
	border-top: 3px solid var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--soft);
}

.sb-formula h3 {
	margin: 0 0 0.15rem;
	color: var(--wp--preset--color--teal-deep);
}

/* The tagline. gold-text is the AA-safe bronze, so this is legible at
   small size rather than being ornament. */
.sb-formula__tag {
	margin: 0 0 0.7rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-text);
}

.sb-formula p:last-child {
	margin-bottom: 0;
}

/* WordPress adds `margin-block-start` to every child of a group except the
   first, to implement block gap. On a container the theme lays out with its
   own CSS grid that margin is applied ON TOP of `gap`, and because the first
   child is exempt it drops that one card out of alignment with its row. The
   patterns set blockGap 0, and this is the backstop. */
.sb-formulas > *,
.sb-social > * {
	margin-block-start: 0;
	margin-block-end: 0;
}