/* Skin Blossom Pro — shared cross-block systems. Never duplicate/override these per-block (see project CSS-cascade house rule); block-specific CSS only handles layout unique to that block. */

html {
	overflow-x: clip;
	scroll-behavior: smooth;
}

/* GeneratePress's "separate containers" layout makes .site-content a flex
   container (row direction). Our top-level sections are its direct
   children with no explicit width, so as flex items they shrink-to-fit
   their own content instead of filling the row — visible as e.g. the
   Service Single template's sections collapsing to ~200-400px wide. Force
   them to fill the row; align-items:stretch already handles their height. */
.site-content > .sb-block {
	width: 100%;
}

body {
	font-family: var(--sb-font-family);
	color: var(--sb-color-body);
}

/* Standard heading floor (GRO design pass) — every h2/h3/h4 shares the same
   family/weight by default. Block-level heading classes still set their own
   size per the shared --sb-font-size-h2-* tier tokens (tokens.css); this is
   only a fallback for a heading with no dedicated block class, e.g. one
   typed into a WYSIWYG field. */
h2,
h3,
h4 {
	font-family: var(--sb-font-family-heading);
	font-weight: var(--sb-font-weight-heading);
}

.sb-container {
	max-width: var(--sb-container-width);
	margin-inline: auto;
	padding-inline: var(--sb-container-gutter);
}

/* Two-tone heading pattern — reused by every page per GRO-499. */
.sb-heading {
	font-family: var(--sb-font-family);
	font-weight: 300;
	line-height: 1.15;
	margin: 0 0 20px;
}

.sb-heading__base {
	color: var(--sb-color-body);
}

.sb-heading__accent {
	color: var(--sb-color-purple-deep);
	font-weight: 800;
}

.sb-eyebrow {
	display: block;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--sb-color-purple-deep);
	margin-bottom: 12px;
}

/* "Book An Appointment" CTA pill — the one reusable component, used across
   header/footer/hero/mid-page CTA/FAQ. */
.sb-cta-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--sb-color-teal);
	color: var(--sb-color-white);
	font-family: var(--sb-font-family);
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 18px;
	padding: 16px 68px;
	border-radius: var(--sb-radius-pill);
	border: 1px solid rgb(255 255 255 / 28%);
	text-decoration: none;
	box-shadow: var(--sb-shadow-soft);
	transition: background-color 200ms ease, transform 200ms ease;
	white-space: nowrap;
}

.sb-cta-pill__label-wrap {
	position: relative;
	z-index: 1;
	display: inline-flex;
	overflow: hidden;
}

.sb-cta-pill__label {
	display: block;
}

.sb-cta-pill__label--back {
	display: none;
}

.sb-cta-pill:hover,
.sb-cta-pill:focus-visible {
	background-color: var(--sb-color-purple-deep);
	color: var(--sb-color-white);
	transform: translateY(-1px);
}

.sb-cta-pill[data-booking-cta="unconfigured"] {
	outline: 2px dashed var(--sb-color-lavender);
	outline-offset: 2px;
}

/* Clinic hours list — Site Options driven, shared by footer + contact blocks. */
.sb-clinic-hours {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 16px;
	color: var(--sb-color-body);
}

.sb-clinic-hours li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
}

.sb-clinic-hours__day {
	font-weight: 600;
}

/* FAQ accordion — reusable pattern (Services Single). */
.sb-faq-accordion {
	border-top: 1px solid var(--sb-color-divider-alt);
}

.sb-faq-accordion__item {
	border-bottom: 1px solid var(--sb-color-divider-alt);
}

.sb-faq-accordion__question {
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 20px 0;
	font-family: var(--sb-font-family);
	font-weight: 800;
	font-size: 22px;
	color: var(--sb-color-teal);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.sb-faq-accordion__item.is-open {
	background-color: var(--sb-color-teal);
}

.sb-faq-accordion__item.is-open .sb-faq-accordion__question {
	color: var(--sb-color-white);
}

.sb-faq-accordion__answer {
	display: none;
	padding: 0 0 20px;
	color: var(--sb-color-body);
}

.sb-faq-accordion__item.is-open .sb-faq-accordion__answer {
	display: block;
	padding: 0 20px 20px;
	background-color: var(--sb-color-teal);
	color: var(--sb-color-white);
}

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

/* Empty-state placeholder shown in editor preview when a repeater has no rows yet. */
.sb-block__empty {
	margin: 16px 0 0;
	padding: 20px;
	border: 1px dashed rgb(0 163 184 / 35%);
	border-radius: 12px;
	text-align: center;
	color: var(--sb-color-placeholder);
	font-size: 16px;
}

.sb-empty-note {
	color: var(--sb-color-placeholder);
	font-style: italic;
	font-size: 16px;
}

/* Social icons: header + footer intentionally match (solid teal) per GRO-499
   flag #7 resolution direction ("match header teal solid on both"). */
.sb-social-icons {
	display: flex;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sb-social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--sb-color-teal);
	color: var(--sb-color-white);
}

.sb-social-icons svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

@media (max-width: 782px) {
	.sb-container {
		padding-inline: 16px;
	}
}

/* Site header — global PHP template part (inc/header.php), not a block.
   Sticky on every screen size; site.js toggles is-scrolled after a small
   scroll offset to switch every sized element below into its slim state,
   all animated by the transitions declared alongside each property. */
.sb-site-header {
	background-color: var(--sb-color-white);
	box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 260ms ease;
}

.sb-site-header.is-scrolled {
	box-shadow: 0 4px 14px rgb(0 0 0 / 14%);
}

.sb-site-header__row {
	display: flex;
	align-items: stretch;
	min-height: 64px;
	transition: min-height 260ms ease;
}

.sb-site-header__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding-left: var(--sb-gutter);
	padding-block: 12px;
	transition: padding-block 260ms ease;
}

.sb-site-header.is-scrolled .sb-site-header__logo {
	padding-block: 8px;
}

.sb-site-header__logo img {
	max-height: 85px;
	width: auto;
	display: block;
	transition: max-height 260ms ease;
}

.sb-site-header__logotype {
	font-family: var(--sb-font-family);
	font-weight: 800;
	font-size: 22px;
	color: var(--sb-color-teal);
}

.sb-site-header__nav {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin-left: 70px;
}

.sb-site-header__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	row-gap: 0;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Flex items shrink below their content's width by default, which wrapped
   "Referral Program" / "About Us" / "Contact Us" onto two lines at laptop
   widths well before the row actually ran out of room. Pin each item to
   its natural (unwrapped) width instead. */
.sb-site-header__menu li {
	flex-shrink: 0;
}

.sb-site-header__menu > li > a {
	white-space: nowrap;
}

.sb-site-header__menu a {
	display: inline-block;
	font-family: var(--sb-font-family);
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sb-color-teal);
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
	transition: color 200ms ease, border-color 200ms ease;
}

.sb-site-header__menu a:hover,
.sb-site-header__menu a:focus-visible,
.sb-site-header__menu .current-menu-item > a {
	color: var(--sb-color-teal);
	border-bottom-color: var(--sb-color-teal);
}

/* Dropdown submenus — open on hover (and on focus, for keyboard nav). */
.sb-site-header__menu li {
	position: relative;
}

.sb-site-header__menu .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Chevron — down for a top-level dropdown trigger, right for a nested
   item whose submenu flies out to the side. Rotates open on hover/focus. */
.sb-site-header__menu .menu-item-has-children > a::after {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	flex: 0 0 auto;
	transition: transform 220ms ease;
}

.sb-site-header__menu li:hover > a::after,
.sb-site-header__menu li:focus-within > a::after {
	transform: rotate(180deg);
}

.sb-site-header__menu .sub-menu .menu-item-has-children > a::after {
	transform: rotate(-90deg);
}

.sb-site-header__menu .sub-menu li:hover > a::after,
.sb-site-header__menu .sub-menu li:focus-within > a::after {
	transform: rotate(0deg);
}

.sb-site-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background-color: var(--sb-color-white);
	border-radius: var(--sb-radius-lg);
	box-shadow: var(--sb-shadow-card);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
}

.sb-site-header__menu li:hover > .sub-menu,
.sb-site-header__menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sb-site-header__menu .sub-menu a {
	display: flex;
	width: 100%;
	padding: 10px 20px;
	border-bottom: 0;
	white-space: nowrap;
	justify-content: space-between;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 400;
	font-size: 16px;
}

.sb-site-header__menu .sub-menu a:hover,
.sb-site-header__menu .sub-menu a:focus-visible,
.sb-site-header__menu .sub-menu a:active,
.sb-site-header__menu .sub-menu .current-menu-item > a {
	background-color: var(--sb-color-teal) !important;
	color: var(--sb-color-white) !important;
	border-bottom: 0;
}

.sb-site-header__menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

/* Submenus with more than 10 items scroll instead of running off-screen —
   :has() targets a <ul> only once it has an 11th direct <li>, so shorter
   submenus stay unclipped. Desktop only; the mobile/tablet nav (which hides
   this menu entirely, see the max-width: 1300px rule below) stays
   unaffected if a mobile version is built later. */
@media (min-width: 1301px) {
	.sb-site-header__menu .sub-menu:has(> li:nth-child(11)) {
		max-height: 70vh;
		overflow-y: auto;
		overflow-x: hidden;
	}
}

.sb-site-header__right {
	display: flex;
	align-items: stretch;
	flex: 0 0 auto;
	padding-right: 0;
}

.sb-header-icons {
	display: flex;
	align-items: center;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0 10px;
	margin-right: 24px;
}

.sb-header-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--sb-color-teal);
	transition: color 200ms ease, width 260ms ease, height 260ms ease;
}

.sb-header-icons a:hover,
.sb-header-icons a:focus-visible {
	color: var(--sb-color-purple-deep);
}

.sb-header-icons svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
	transition: width 260ms ease, height 260ms ease;
}

.sb-site-header.is-scrolled .sb-header-icons a {
	width: 18px;
	height: 18px;
}

.sb-site-header.is-scrolled .sb-header-icons svg {
	width: 16px;
	height: 16px;
}

.sb-site-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--sb-color-teal);
	color: var(--sb-color-white);
	font-family: var(--sb-font-family);
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 18px;
	padding: 0 42px;
	border-radius: 0;
	border: 0;
	box-shadow: none;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 200ms ease, padding 260ms ease, font-size 260ms ease;
}

.sb-site-header__cta:hover,
.sb-site-header__cta:focus-visible {
	background-color: var(--sb-color-lavender);
	color: var(--sb-color-white);
	transform: none;
}

.sb-site-header__cta[data-booking-cta="unconfigured"] {
	outline: none;
}

/* Hamburger toggle — hidden on desktop, shown below the mobile breakpoint.
   align-self: center (rather than relying on the row's stretch) keeps it
   vertically centred regardless of the row's own height. */
.sb-site-header__toggle {
	display: none;
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-self: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	margin-left: 8px;
	padding: 0;
	/* !important: GeneratePress's own button, input[type="button"]... base
	   rule (same specificity family as every other custom button override
	   in this theme, see .sb-offcanvas__close) otherwise wins and paints
	   this grey instead of brand purple. */
	background-color: var(--sb-color-purple-deep) !important;
	border: 0;
	border-radius: var(--sb-radius-md);
	cursor: pointer;
	flex: 0 0 auto;
	transition: background-color 200ms ease, transform 200ms ease;
}

.sb-site-header__toggle:hover,
.sb-site-header__toggle:focus-visible {
	transform: scale(1.05);
}

.sb-site-header__toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background-color: var(--sb-color-white);
	border-radius: 2px;
}

@media (max-width: 1300px) {
	.sb-site-header__nav {
		display: none;
	}

	.sb-site-header__logo {
		padding-left: var(--sb-gutter);
	}

	.sb-site-header__logo img {
		max-height: 40px;
	}

	.sb-site-header__row {
		min-height: 52px;
	}

	.sb-site-header__right {
		gap: 4px;
		/* Nav (flex:1) is hidden above, so without this the icons/toggle
		   group would sit flush against the logo instead of the far edge. */
		margin-left: auto;
		padding-right: var(--sb-gutter);
	}

	.sb-header-icons {
		gap: 10px;
		padding: 0 12px;
	}

	.sb-site-header__cta {
		display: none;
	}

	.sb-site-header__toggle {
		display: flex;
	}
}

/* Tablet only — nav is still the off-canvas toggle (no room for the full
   menu), but there's enough width to spread things out properly: toggle
   pinned to the far right corner, icons centred independently in the
   middle instead of bunched next to it. */
@media (min-width: 641px) and (max-width: 1300px) {
	.sb-site-header__row {
		position: relative;
	}

	/* Scoped to the top-bar icons specifically — .sb-header-icons is shared
	   with the off-canvas panel's icon list, which must stay in normal
	   flow there (this rule used to also catch it, floating it near the
	   page's vertical center since it has no positioned ancestor inside
	   the panel). */
	.sb-site-header__right .sb-header-icons {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		padding: 0;
	}

	.sb-site-header__right {
		margin-left: auto;
		padding-right: 40px;
	}

	.sb-site-header__logo img {
		max-height: 60px;
	}
}

/* Off-canvas mobile menu. */
.sb-offcanvas {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
	overflow: hidden;
}

.sb-offcanvas__overlay {
	position: absolute;
	inset: 0;
	background-color: rgb(0 0 0 / 55%);
	opacity: 0;
	transition: opacity 260ms ease;
}

.sb-offcanvas__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: min(320px, 85vw);
	height: 100%;
	background-color: var(--sb-color-white);
	box-shadow: -4px 0 24px rgb(0 0 0 / 20%);
	padding: 24px;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 300ms ease;
	display: flex;
	flex-direction: column;
}

.sb-offcanvas.is-open {
	visibility: visible;
}

.sb-offcanvas.is-open .sb-offcanvas__overlay {
	opacity: 1;
}

.sb-offcanvas.is-open .sb-offcanvas__panel {
	transform: translateX(0);
}

.sb-offcanvas__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--sb-color-border);
}

.sb-offcanvas__logo img {
	max-height: 52px;
	width: auto;
	display: block;
}

/* Same purple-bg / white-icon treatment as the hamburger toggle. */
body .sb-offcanvas .sb-offcanvas__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background-color: var(--sb-color-purple-deep) !important;
	background-image: none !important;
	border: none !important;
	border-radius: 50%;
	color: var(--sb-color-white) !important;
	cursor: pointer;
	outline: none;
	transition: transform 200ms ease;
}

body .sb-offcanvas .sb-offcanvas__close:hover,
body .sb-offcanvas .sb-offcanvas__close:focus-visible,
body .sb-offcanvas .sb-offcanvas__close:active {
	background-color: var(--sb-color-purple-deep) !important;
	color: var(--sb-color-white) !important;
	transform: scale(1.05);
	outline: none;
}

body .sb-offcanvas .sb-offcanvas__close svg {
	width: 16px;
	height: 16px;
	display: block !important;
	overflow: visible !important;
}

body .sb-offcanvas .sb-offcanvas__close svg path {
	stroke: currentColor !important;
	fill: none !important;
}

.sb-offcanvas__menu {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.sb-offcanvas__menu li {
	position: relative;
	border-bottom: 1px solid var(--sb-color-border);
}

.sb-offcanvas__menu a {
	display: block;
	padding: 14px 44px 14px 4px;
	font-family: var(--sb-font-family);
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--sb-color-charcoal);
	text-decoration: none;
}

.sb-offcanvas__menu a:hover,
.sb-offcanvas__menu a:focus-visible,
.sb-offcanvas__menu .current-menu-item > a {
	color: var(--sb-color-teal);
}

/* Submenu accordion — closed by default, opened by JS toggling `is-open`
   on the parent <li> when its arrow button is clicked. */
.sb-offcanvas__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0 16px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 260ms ease;
}

.sb-offcanvas__menu li.is-open > .sub-menu {
	max-height: 1000px;
}

.sb-offcanvas__menu .sub-menu li {
	border-bottom: 0;
}

.sb-offcanvas__menu .sub-menu li:last-child {
	border-bottom: none;
}

.sb-offcanvas__menu .sub-menu a {
	padding: 10px 44px 10px 4px;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sb-color-body);
}

/* Arrow toggle button — injected by JS next to any item with children. */
body .sb-offcanvas .sb-offcanvas__submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	background-image: none !important;
	border: none !important;
	border-radius: var(--sb-radius-md);
	color: var(--sb-color-teal) !important;
	cursor: pointer;
	outline: none;
}

body .sb-offcanvas .sb-offcanvas__submenu-toggle svg {
	width: 14px;
	height: 14px;
	display: block !important;
	overflow: visible !important;
	transition: transform 260ms ease;
}

body .sb-offcanvas .sb-offcanvas__submenu-toggle svg path {
	stroke: currentColor !important;
	fill: none !important;
}

body .sb-offcanvas .sb-offcanvas__submenu-toggle:hover,
body .sb-offcanvas .sb-offcanvas__submenu-toggle:focus-visible,
body .sb-offcanvas .sb-offcanvas__submenu-toggle:active {
	background-color: var(--sb-color-lavender) !important;
	color: var(--sb-color-white) !important;
	outline: none;
}

body .sb-offcanvas .sb-offcanvas__menu li.is-open > .sb-offcanvas__submenu-toggle svg {
	transform: rotate(90deg);
}

/* Rendered after the nav (inc/header.php), above the CTA button — centred,
   with its own top divider separating it from the menu. */
.sb-offcanvas__icons {
	justify-content: center;
	margin: 32px 0 36px;
	padding-top: 28px;
	border-top: 1px solid var(--sb-color-border);
}

.sb-offcanvas__cta {
	width: 100%;
	padding: 16px 24px;
}

@media (min-width: 1301px) {
	.sb-offcanvas {
		display: none;
	}
}

/* Site footer — global PHP template part (inc/footer.php), not a block. */
.sb-site-footer {
	background-color: var(--sb-color-white);
}

.sb-site-footer__columns {
	display: grid;
	grid-template-columns: 1fr 1.6fr 1fr;
	gap: 40px;
	padding-block: 48px;
}

.sb-site-footer__heading {
	font-family: var(--sb-font-family);
	font-style: normal;
	font-weight: var(--sb-font-weight-heading);
	font-size: 16px;
	line-height: 18px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sb-color-purple-deep);
	margin: 0;
}

.sb-site-footer__divider {
	display: block;
	height: 1px;
	background-color: var(--sb-color-divider-alt);
	margin: 12px 0 18px;
}

/* Get In Touch — icon + link rows. */
.sb-site-footer__icon-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sb-site-footer__icon-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
}

.sb-site-footer__icon-list li:last-child {
	margin-bottom: 0;
}

.sb-site-footer__icon-list svg {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	fill: var(--sb-color-lavender);
}

.sb-site-footer__icon-list a {
	font-family: var(--sb-font-family);
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 14px;
	color: var(--sb-color-body);
	text-decoration: none;
}

.sb-site-footer__icon-list a:hover,
.sb-site-footer__icon-list a:focus-visible {
	color: var(--sb-color-purple-deep);
}

/* Clinic Hours — two side-by-side columns. */
.sb-site-footer__hours {
	display: flex;
	gap: 32px;
}

.sb-site-footer__hours-col {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sb-site-footer__hours-day {
	font-family: var(--sb-font-family);
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 25px;
	color: var(--sb-color-body);
}

.sb-site-footer__hours-time {
	font-family: var(--sb-font-family);
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 25px;
	color: var(--sb-color-body);
}

/* Follow Us — plain icons, no circle bg, grow + go lavender on hover. */
.sb-site-footer__social {
	display: flex;
	align-items: center;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sb-site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--sb-radius-lg);
	background-color: var(--sb-color-bg-soft);
	color: var(--sb-color-body);
	transition: color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.sb-site-footer__social svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.sb-site-footer__social a:hover,
.sb-site-footer__social a:focus-visible {
	color: var(--sb-color-white);
	background-color: var(--sb-color-lavender);
	transform: scale(1.08);
}

/* Bottom legal bar. */
.sb-site-footer__bottom {
	border-top: 1px solid rgb(200 163 206 / 35%);
	padding-block: 20px;
}

.sb-site-footer__bottom-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.sb-site-footer__legal {
	margin: 0;
	font-family: var(--sb-font-family);
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sb-color-purple-deep);
}

.sb-site-footer__legal a {
	color: var(--sb-color-purple-deep);
	text-decoration: none;
}

.sb-site-footer__legal a:hover,
.sb-site-footer__legal a:focus-visible {
	text-decoration: underline;
}

.sb-site-footer__credit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--sb-font-family);
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sb-color-body);
	text-decoration: none;
}

a.sb-site-footer__credit:hover,
a.sb-site-footer__credit:focus-visible {
	color: var(--sb-color-purple-deep);
}

.sb-site-footer__credit img {
	max-height: 44px;
	width: auto;
	display: block;
}

@media (max-width: 782px) {
	.sb-site-footer__columns {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.sb-site-footer__heading {
		font-size: 18px;
		line-height: 24px;
	}

	.sb-site-footer__icon-list a {
		font-size: 16px;
		line-height: 22px;
	}

	.sb-site-footer__hours {
		flex-direction: column;
		gap: 4px;
	}

	.sb-site-footer__hours-day,
	.sb-site-footer__hours-time {
		font-size: 16px;
		line-height: 27px;
	}

	/* Follow Us column only — icons stay centred, Get In Touch/Clinic Hours
	   stay left-aligned. */
	.sb-site-footer__columns .sb-site-footer__col:nth-child(3) {
		text-align: center;
	}

	.sb-site-footer__columns .sb-site-footer__col:nth-child(3) .sb-site-footer__divider {
		margin-left: auto;
		margin-right: auto;
	}

	.sb-site-footer__social {
		justify-content: center;
	}

	.sb-site-footer__bottom-row {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.sb-site-footer__credit {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.sb-site-footer__credit img {
		margin: 0 auto;
	}
}

/* 404 template (404.php) — global PHP template, not a block. Reuses the
   same --sb-hero-pattern decorative background every Service Single hero
   already uses (see blocks/service-hero/style.css), so the empty state
   still reads as part of the site instead of a bare error screen. */
.sb-404 {
	position: relative;
	min-height: 62vh;
	display: flex;
	align-items: center;
	background-color: var(--sb-color-white);
	background-image: var(--sb-hero-pattern);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% 60%;
	overflow: hidden;
}

.sb-404__content {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin-inline: auto;
	padding-block: 96px;
	text-align: center;
}

.sb-404__eyebrow {
	display: inline-block;
}

/* Soft watermark numeral — decorative only (aria-hidden), so the light
   lavender it borrows from is fine here even though that shade fails text
   contrast; it's never the thing conveying "page not found", the heading
   right below it is. */
.sb-404__digits {
	display: block;
	font-family: var(--sb-font-family);
	font-weight: 800;
	font-size: clamp(88px, 18vw, 200px);
	line-height: 1;
	color: var(--sb-color-lavender);
	margin: 4px 0 0;
}

.sb-404__heading {
	text-align: center;
	margin: 8px 0 20px;
}

.sb-404__heading .sb-heading__base,
.sb-404__heading .sb-heading__accent {
	display: block;
}

.sb-404__body {
	font-family: var(--sb-font-family);
	font-size: 18px;
	line-height: 1.6;
	color: var(--sb-color-body);
	max-width: 480px;
	margin: 0 auto 36px;
}

.sb-404__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

/* Outlined pill — same construction/tokens as .sb-cta-pill, matching the
   site's established primary-solid + secondary-outline CTA pairing (see
   .sb-cta-band__btn--secondary). */
.sb-404__secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	color: var(--sb-color-purple-deep);
	font-family: var(--sb-font-family);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	padding: 16px 32px;
	border-radius: var(--sb-radius-pill);
	border: 1px solid var(--sb-color-lavender);
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.sb-404__secondary:hover,
.sb-404__secondary:focus-visible {
	background-color: var(--sb-color-lavender);
	color: var(--sb-color-white);
	border-color: var(--sb-color-lavender);
}

@media (max-width: 782px) {
	.sb-404 {
		min-height: 0;
		background-size: 140% 40%;
	}

	.sb-404__content {
		padding-block: 56px;
	}

	.sb-404__digits {
		font-size: clamp(64px, 24vw, 120px);
	}

	.sb-404__body {
		font-size: 16px;
		max-width: none;
	}

	.sb-404__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.sb-404__cta,
	.sb-404__secondary {
		width: 100%;
	}
}