/* Skinfluence global layout — header, footer, buttons, badges, cards */

html { scroll-behavior: smooth; overflow-x: clip; }
html.sf-nav-open,
body.sf-nav-open { overflow: hidden; height: 100%; }

.sf-container {
	max-width: var(--sf-container);
	margin: 0 auto;
	padding: 0 20px;
}

body.skinfluence-child {
	font-family: var(--sf-font-body);
	color: var(--sf-black);
}

h1, h2, h3, h4 { font-family: var(--sf-font-heading); }

.sf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sf-dark);
	color: var(--sf-white) !important;
	font-family: var(--sf-font-body);
	font-weight: 500;
	font-size: clamp(14px, 1.5vw, 16px);
	border-radius: var(--sf-radius-btn);
	padding: 16px 24px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	line-height: 1;
	transition: opacity .2s ease;
}
.sf-btn:hover { opacity: .85; color: var(--sf-white) !important; }
.sf-btn--lg { padding: 24px 48px; font-size: clamp(14px, 1.5vw, 16px); }
.sf-btn--outline { background: transparent; color: var(--sf-dark) !important; border: 1px solid var(--sf-dark); }

.sf-badge {
	display: inline-flex;
	align-items: center;
	background: var(--sf-sage);
	color: var(--sf-white);
	border-radius: var(--sf-radius-pill);
	padding: 12px 24px;
	font-size: clamp(14px, 1.5vw, 16px);
	font-weight: 400;
	margin-bottom: 16px;
}

.sf-section { padding: var(--sf-section-pad-y) 0; }
.sf-section--sage-light { background: var(--sf-bg-sage-light); }
.sf-section--beige { background: var(--sf-bg-beige); }
.sf-section--warm-beige { background: var(--sf-bg-warm-beige); }
.sf-section--dark { background: var(--sf-dark); color: var(--sf-white); }

.sf-heading-xl { font-size: clamp(28px, 4vw, 42px); font-weight: 600; margin: 0 0 20px; line-height: 1.15; }
.sf-heading-lg { font-size: clamp(28px, 4vw, 42px); font-weight: 600; margin: 0 0 16px; }
.sf-heading-cta { font-size: clamp(30px, 4.6vw, 48px); font-weight: 700; color: var(--sf-white); margin: 0 0 16px; }

/* Placeholder media — used whenever a real asset has not been supplied yet */
.sf-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 120px;
	box-sizing: border-box;
	background: repeating-linear-gradient(45deg, #e4e4dc, #e4e4dc 10px, #ececE4 10px, #ececE4 20px);
	color: #6b6b5f;
	font-size: clamp(12px, 1.2vw, 13px);
	text-align: center;
	border-radius: var(--sf-radius-card);
	padding: 12px;
}
.sf-placeholder--sm { border-radius: var(--sf-radius-sm); }

/* Block empty-state — shown by sf_block_empty_state() when a block's primary repeater has no
   rows yet, so hovering it in the editor's Inserter (or dropping it fresh into the canvas) never
   shows a totally blank section. */
.sf-block-empty {
	margin: 24px auto;
	padding: 24px;
	max-width: 480px;
	border: 1px dashed rgba(0, 0, 0, .28);
	border-radius: var(--sf-radius-sm);
	text-align: center;
	color: #6b6b5f;
	font-family: var(--sf-font-body);
	font-size: clamp(13px, 1.3vw, 14px);
}

/* ===== Media hover-zoom =====
   Shared pattern for every image-bearing block: wrap the <img>/.sf-placeholder in an
   .sf-media-zoom ancestor with overflow:hidden. The scale lives on the media itself; the
   trigger lives on the ancestor's :hover/:focus-within (not on the media directly) so
   keyboard-focused cards/links get the same feedback touch/mouse hover gets. */
.sf-media-zoom { overflow: hidden; display: block; }
.sf-media-zoom img,
.sf-media-zoom video,
.sf-media-zoom .sf-placeholder {
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
	transform-origin: center center;
	will-change: transform;
}
.sf-media-zoom:hover img,
.sf-media-zoom:focus-within img,
.sf-media-zoom:hover video,
.sf-media-zoom:focus-within video { transform: scale(1.08); }

/* ===== WYSIWYG output resets =====
   These containers used to hold a single plain-text string (rendered directly as their own
   <p>/<div>, with the container's own margin/line-height/font-size carrying all the spacing).
   Now that the underlying ACF fields are wysiwyg (a hard rule for every description-style field,
   not just headings), the same containers hold TinyMCE's own <p> tag(s) inside — and the browser
   gives *those* their own default ~1em top/bottom margin regardless of the outer container's
   styling, which stacks on top of it and visibly pushes layout around. Zero that out so the
   editing upgrade doesn't change anything on screen for existing single-paragraph content; a
   deliberate multi-paragraph entry still gets breathing room between its own paragraphs. */
.sf-team-card__bio p,
.sf-staff-card__bio p,
.sf-product-tabs__card-desc p,
.sf-expertise-trust__quote-text p,
.sf-testimonial-card__quote p,
.sf-footer-contact__body p,
.sf-switch-cta__body-copy p,
.sf-switch-cta__body--centered p {
	margin: 0 0 .6em;
}
.sf-team-card__bio p:last-child,
.sf-staff-card__bio p:last-child,
.sf-product-tabs__card-desc p:last-child,
.sf-expertise-trust__quote-text p:last-child,
.sf-testimonial-card__quote p:last-child,
.sf-footer-contact__body p:last-child,
.sf-switch-cta__body-copy p:last-child,
.sf-switch-cta__body--centered p:last-child {
	margin-bottom: 0;
}

/* ===== Header / GC-1 ===== */
.sf-header {
	background: var(--sf-bg-sage-light);
	padding: 18px 0;
	position: sticky;
	top: 0;
	z-index: 50;
	transition: padding .35s ease, box-shadow .35s ease, background-color .35s ease;
}
.sf-header.is-sticky {
	padding: 10px 0;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .1);
}
.sf-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--sf-container-wide);
	padding-left: 0;
	padding-right: 20px;
	transition: gap .35s ease;
}
.sf-header.is-sticky .sf-header__inner { gap: 16px; }
.sf-header__logo img { height: 60px; width: auto; display: block; transition: height .35s ease; }
.sf-header.is-sticky .sf-header__logo img { height: 44px; }
.sf-header__logo { font-family: var(--sf-font-heading); font-size: clamp(17px, 2.1vw, 22px); font-weight: 700; color: var(--sf-dark); text-decoration: none; }
.sf-nav { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; transition: gap .35s ease; }
.sf-header.is-sticky .sf-nav { gap: 20px; }
.sf-nav a {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 19px;
	color: var(--sf-black);
	text-decoration: none;
	transition: color .6s ease;
}
/* Underline is drawn as an absolutely-positioned pseudo-element (not real padding/border
   on the anchor) so it never adds asymmetric box height — that asymmetry was pushing the
   label out of vertical alignment with its submenu chevron, and leaking onto every other
   `.sf-nav`-descendant `<a>` (social icons, submenu links) that never wanted an underline. */
.sf-nav__row > a { position: relative; }
.sf-nav__row > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 3px;
	background-color: transparent;
	transition: background-color .6s ease;
}
.sf-nav li.current-menu-item > a,
.sf-nav a:hover,
.sf-nav a.is-active,
.sf-nav__item:hover > .sf-nav__row > a,
.sf-nav__item.is-open > .sf-nav__row > a { color: rgb(154, 158, 127); }
.sf-nav__row > a:hover::after,
.sf-nav__row > a.is-active::after,
.sf-nav__item:hover > .sf-nav__row > a::after,
.sf-nav__item.is-open > .sf-nav__row > a::after { background-color: rgb(154, 158, 127); }
.sf-nav__item { display: inline-flex; align-items: center; position: relative; }
.sf-nav__row { display: flex; align-items: center; gap: 6px; }
.sf-nav__submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	border: none;
	border-radius: 6px;
	/* padding grows the hit/hover area; the matching negative margin keeps the box's
	   footprint identical for flex layout purposes, so the hover state never nudges
	   the chevron out of vertical alignment with its label. */
	padding: 6px;
	margin: -6px;
	color: var(--sf-black);
	cursor: pointer;
	transition: transform .3s ease, background-color .25s ease, color .25s ease;
}
.sf-nav__submenu-toggle:hover,
.sf-nav__submenu-toggle:focus-visible {
	background-color: var(--sf-sage) !important;
	color: var(--sf-white) !important;
	outline: none;
}
.sf-nav__item.is-open .sf-nav__submenu-toggle { transform: rotate(180deg); }
/* Matches the 900px breakpoint everywhere else nav behavior switches (nav-toggle hamburger,
   .sf-nav__row's own click-to-open mobile styles below) — was 721px, which overlapped the
   click-based off-canvas system's own <=900px range. On a tablet in that 721-900px gap the
   hover reveal below and the click toggle were BOTH live at once: tapping to open a submenu
   (which on a touchscreen also satisfies :hover, and doesn't reliably clear until a tap
   elsewhere) then tapping the same trigger again removed `.is-open`, but the still-"hovered"
   submenu stayed visible regardless — read by whoever's tapping as "the trigger doesn't
   close it". Only true desktop pointer widths should ever get the hover behavior. */
@media (min-width: 901px) {
	.sf-nav__item:hover .sf-nav__submenu-toggle { transform: rotate(180deg); }
}
.sf-nav__submenu {
	display: none;
	flex-direction: column;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 260px;
	max-height: 70vh;
	overflow-y: auto;
	background: var(--sf-white);
	padding: 8px 0;
	box-shadow: 0 16px 32px rgba(0, 0, 0, .12);
	z-index: 60;
	scrollbar-width: thin;
	scrollbar-color: #9A9E7F #F1F2E5;
}
.sf-nav__submenu::-webkit-scrollbar { width: 5px; }
.sf-nav__submenu::-webkit-scrollbar-track { background: #F1F2E5; }
.sf-nav__submenu::-webkit-scrollbar-thumb { background: #9A9E7F; border-radius: 4px; }
.sf-nav__item.is-open .sf-nav__submenu { display: flex; }
/* See the matching comment on .sf-nav__item:hover .sf-nav__submenu-toggle above — same
   721px-vs-900px breakpoint conflict, same fix. */
@media (min-width: 901px) {
	.sf-nav__item:hover .sf-nav__submenu { display: flex; }
}
.sf-nav__submenu a {
	display: block;
	padding: 12px 24px;
	border-bottom: none;
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;
	text-transform: uppercase;
	transition: color .3s ease, background-color .3s ease;
}
.sf-nav__submenu a:hover,
.sf-nav__submenu a.is-active {
	background: #9A9E7F;
	color: var(--sf-white) !important;
	border-bottom-color: transparent !important;
}
.sf-header__cta { flex-shrink: 0; }
.sf-header .sf-btn {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 22px;
	color: var(--sf-white) !important;
	background: var(--sf-black);
	border: 1px solid var(--sf-black);
	padding: 12px 24px;
	transition: background-color .6s ease, border-color .6s ease, color .6s ease, opacity .6s ease, padding .35s ease;
}
.sf-header.is-sticky .sf-btn { padding: 8px 18px; }
.sf-header .sf-btn:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}
.sf-header__actions { display: none; }
.sf-offcanvas__top,
.sf-offcanvas__social,
.sf-offcanvas__close,
.sf-offcanvas__backdrop { display: none; }
.sf-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.sf-nav-toggle span { display: block; width: 26px; height: 2px; background: var(--sf-dark); margin: 5px 0; }

/* ===== Page hero band ===== */
.sf-page-hero {
	position: relative;
	background: var(--sf-bg-sage-light);
	padding: 60px 0;
	text-align: center;
}
.sf-page-hero .sf-container { position: relative; z-index: 1; }
.sf-page-hero__decor {
	position: absolute;
	top: 50%;
	left: 50%;
	/* True dead-center behind the heading, both axes — this had a stray `-10px` vertical nudge
	   that put it slightly off-center. */
	transform: translate(-50%, -50%);
	z-index: 0;
}
.sf-page-hero__decor img { display: block; width: 100px; height: auto; }
/* AOS's own stylesheet boosts specificity via attribute-doubling — [data-aos^=zoom][data-aos^=zoom]
   .aos-animate resolves to `transform: translateZ(0) scale(1)` and, being higher-specificity than
   this component's own single-class `transform: translate(-50%,-50%)` rules above, silently WINS
   and wipes out the centering the instant the entrance animation completes: the decor snaps to
   sitting with its top-left corner (not its center) at the 50%/50% point, reading as "not centered,
   offset down-right of the heading" — exactly what was reported. Fix (matches the documented AOS-
   permanent-transform gotcha): an end-state override at equal-or-higher specificity that combines
   BOTH the centering translate and AOS's own scale, so revealing the animation can never erase the
   centering again. Covers every variant (base centered layout above, split layout below) since
   both share the identical rest-state transform value. */
body .sf-page-hero__decor.aos-animate[data-aos] {
	transform: translate(-50%, -50%) scale(1);
}
.sf-page-hero h1 {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 700;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 46px;
	color: rgb(25, 25, 25);
	margin: 0 0 12px;
}

/* ===== Page hero — split layout (heading left / text+button right) ===== */
.sf-page-hero--split { text-align: left; }
.sf-page-hero__grid { display: grid; grid-template-columns: 20% 80%; gap: 0; align-items: center; }
.sf-page-hero__grid--wide { grid-template-columns: 40% 1fr; gap: 30px; }
.sf-page-hero__grid--wide .sf-page-hero__heading-col { justify-content: center; text-align: center; }
.sf-page-hero__heading-col { position: relative; display: flex; align-items: center; }
/* Dead-center behind the heading on both axes, in EVERY variant of this section (centered layout
   above; heading-left/text-right split and its --wide modifier here) — the --wide variant used to
   override this to `right:0; transform:translateY(-50%)` (edge-anchored, only vertically centered,
   not actually centered behind the heading text at all); removed instead of fixed, since the base
   rule below already does the right thing and there's no reason for --wide to differ from it. */
.sf-page-hero__heading-col .sf-page-hero__decor { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; }
.sf-page-hero--split h1 { position: relative; z-index: 1; margin: 0; }
.sf-page-hero__cta {
	display: inline-flex;
	margin-top: 12px;
	padding: 12px 24px;
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 22px;
	color: var(--sf-white) !important;
	background: var(--sf-black);
	border: 1px solid var(--sf-black);
	transition: background-color .6s ease, border-color .6s ease, color .6s ease, opacity .6s ease;
}
.sf-page-hero__cta:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}

/* ===== Decorative divider strip ===== */
.sf-divider-strip {
	position: relative;
	width: 100%;
	height: 140px;
	background: linear-gradient(180deg, #F1F3E6 0%, #F1F3E6 50%, #FFFFFF 50%, #FFFFFF 100%);
	overflow: hidden;
}
.sf-divider-strip__pattern {
	position: absolute;
	inset: 0;
	background-repeat: repeat-x;
	background-position: center;
	background-size: auto 100%;
}
.sf-divider-strip .sf-placeholder { position: absolute; inset: 0; border-radius: 0; }

/* ===== Partner logo strip / GC-4 ===== */
.sf-partner-strip { padding: 40px 0; }
.sf-partner-strip__grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 12px;
}
.sf-partner-strip__item {
	aspect-ratio: 1 / 1;
	background: var(--sf-white);
	border: 1px solid #eee;
	border-radius: var(--sf-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #bbb;
	font-size: clamp(9px, 1vw, 10px);
}

/* ===== Pre-footer CTA strip / GC-3 ===== */
.sf-switch-cta {
	max-width: var(--sf-container);
	margin: 0 auto 80px;
	background: var(--sf-sage);
	border-radius: var(--sf-radius-card);
	padding: 30px;
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
}
.sf-switch-cta__photo {
	width: 238px;
	height: 224px;
	flex-shrink: 0;
	border-radius: var(--sf-radius-card);
	overflow: hidden;
	box-shadow: var(--sf-shadow-card);
}
.sf-switch-cta__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-switch-cta__body { flex: 1; min-width: 240px; color: var(--sf-white); }
.sf-switch-cta__body p { opacity: .9; }
.sf-switch-cta__action { flex-shrink: 0; }

.sf-switch-cta-wrap--cream { background: #F1F3E6; padding: 40px 0; }
.sf-switch-cta--centered { flex-direction: column; text-align: center; padding: 60px 40px; gap: 16px; margin: 40px auto; }
.sf-switch-cta__heading--centered {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 700;
	font-size: clamp(30px, 4.6vw, 48px);
	line-height: 52px;
	color: var(--sf-black);
	margin: 0;
}
.sf-switch-cta__heading--centered em,
.sf-switch-cta__heading--centered i { font-style: italic; color: rgb(154, 158, 127); }
.sf-switch-cta__body--centered {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(18px, 2.3vw, 24px);
	line-height: 28px;
	color: var(--sf-black);
	opacity: 1;
	margin: 0;
}
.sf-switch-cta__actions--centered { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.sf-switch-cta__cta--centered {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 22px;
	color: var(--sf-white) !important;
	background: var(--sf-black);
	border: 1px solid var(--sf-black);
	transition: background-color .6s ease, border-color .6s ease, color .6s ease, opacity .6s ease;
}
.sf-switch-cta__cta--centered:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}
.sf-switch-cta__cta--centered-2 { background: #84886B; border: 1px solid #84886B; }

/* ===== Section badge grid cards ===== */
.sf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sf-gap); align-items: center; }
.sf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sf-gap); }
.sf-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sf-gap); }


/* ===== Testimonials / GC-7 ===== */
.sf-testimonial-card { background: var(--sf-bg-footer-contact); border-radius: var(--sf-radius-card); padding: 30px; box-shadow: var(--sf-shadow-card); }
.sf-testimonial-card__quote-mark { color: var(--sf-sage); font-size: clamp(26px, 3.8vw, 40px); font-family: Georgia, serif; line-height: 1; display: block; margin-bottom: 12px; }
.sf-testimonial-card__footer { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.sf-testimonial-card__avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.sf-testimonial-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Services / condition cards ===== */
.sf-service-card { position: relative; border-radius: var(--sf-radius-card); overflow: hidden; aspect-ratio: 288/364; display: block; box-shadow: var(--sf-shadow-card); }
.sf-service-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-service-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(360deg, #84886B 0%, #F2295B00 70%);
	pointer-events: none;
	z-index: 1;
}
.sf-service-card__label {
	position: absolute; inset: auto 0 0 0;
	z-index: 2;
	padding: 20px;
	text-align: center;
	text-transform: uppercase;
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(16px, 1.9vw, 20px);
	line-height: 24px;
	color: rgb(255, 255, 255);
}

/* ===== Membership program (badge/heading/subtext + tier cards + phone/CTA + disclaimer, left;
   full-height portrait bleeding to the true viewport edge, right). No .sf-container wrapper on
   purpose — see .sf-memberships__content's own left padding below, which computes the container's
   implied left edge instead, so body copy still lines up with every other section's text while
   the image is free to reach the real edge. */
.sf-memberships { background: var(--sf-bg-sage-light); padding: 0; overflow: hidden; }
.sf-memberships__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 780px; }
.sf-memberships__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 72px clamp(24px, 4vw, 60px) 72px max(24px, calc((100vw - var(--sf-container)) / 2));
}
.sf-memberships__badge { margin-bottom: 12px; }
.sf-memberships__heading { max-width: 480px; }
.sf-memberships__heading em,
.sf-memberships__heading i { font-style: italic; color: var(--sf-sage); }
.sf-memberships__subtext {
	margin: 0 0 32px;
	max-width: 460px;
	font-family: var(--sf-font-body);
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 1.6;
	color: var(--sf-dark);
}

.sf-memberships__tiers { display: flex; flex-direction: column; gap: 20px; max-width: 620px; }
.sf-membership-card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	background: var(--sf-white);
	border-radius: var(--sf-radius-card);
	padding: 26px 30px;
	box-shadow: var(--sf-shadow-card);
}
.sf-membership-card__aside {
	position: relative;
	flex: 0 0 96px;
	height: 116px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 20px;
	border-right: 1px solid rgba(0, 0, 0, .12);
}
.sf-membership-card__decor {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	pointer-events: none;
}
.sf-membership-card__meta {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.sf-membership-card__tier-label {
	font-family: var(--sf-font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: 16px;
	color: var(--sf-black);
	white-space: nowrap;
}
.sf-membership-card__price {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--sf-sage);
	color: var(--sf-white);
	font-family: var(--sf-font-heading);
	font-weight: 700;
	font-size: 15px;
}
.sf-membership-card__main { flex: 1; min-width: 0; padding-top: 4px; }
.sf-membership-card__title {
	margin: 0 0 12px;
	font-family: var(--sf-font-heading);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sf-black);
}
/* Editors write real nested lists in the wysiwyg toolbar (indent a bullet to nest it — e.g. "For
   an additional $50, choose either:" with two indented options underneath), so the checkmark/
   sub-bullet styling below targets real <ul>/<li> structure rather than a flat line-by-line field. */
.sf-membership-card__features ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sf-membership-card__features > ul > li {
	position: relative;
	padding-left: 26px;
	font-family: var(--sf-font-body);
	font-size: clamp(13px, 1.3vw, 14px);
	line-height: 1.5;
	color: var(--sf-dark);
}
.sf-membership-card__features > ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 16px;
	height: 16px;
	background: var(--sf-sage);
	/* Exact FontAwesome "check-circle" solid icon (fa-check-circle) — this specific path, matching
	   what the reference site itself uses (`e-fas-check-circle`), not a hand-drawn approximation.
	   The path already draws its own circle + check as one solid-fill shape, so no separate
	   `border-radius:50%` circle behind it is needed anymore. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%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 512 512'%3E%3Cpath fill='%23000' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sf-membership-card__features ul ul { margin-top: 6px; gap: 6px; }
.sf-membership-card__features ul ul li {
	/* Missing on purpose nowhere — this was the actual bug: without its OWN position:relative, a
	   nested li's ::before (position:absolute) climbs up to the nearest POSITIONED ancestor for
	   its containing block, which is the shared PARENT li (it has position:relative from the
	   top-level rule above, since it's also a direct child of the outer <ul>) — every nested
	   disc was landing at the same top:8px/left:4px spot relative to that ONE shared parent box
	   instead of each next to its own li's text, reading as "superimposed on the parent, not
	   showing on the children individually." */
	position: relative;
	padding-left: 20px;
	font-size: 13px;
	color: #55564c;
}
.sf-membership-card__features ul ul li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 6px;
	height: 6px;
	background: var(--sf-sage);
	border-radius: 50%;
	-webkit-mask: none;
	mask: none;
}

.sf-memberships__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.sf-memberships__phone {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 22px 12px 12px;
	background: var(--sf-white);
	border: 1px solid var(--sf-black);
	border-radius: var(--sf-radius-pill);
	box-shadow: var(--sf-shadow-card);
	font-family: var(--sf-font-heading);
	font-weight: 600;
	font-size: 15px;
	color: var(--sf-black) !important;
	transition: opacity .3s ease;
}
.sf-memberships__phone:hover { opacity: .8; color: var(--sf-black) !important; }
.sf-memberships__phone-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sf-bg-sage-light);
	color: var(--sf-black);
}
.sf-memberships__disclaimer {
	margin: 20px 0 0;
	font-family: var(--sf-font-body);
	font-style: italic;
	font-size: 12px;
	color: #6b6b5f;
}

.sf-memberships__media { position: relative; overflow: hidden; border-radius: 30px 0 0 30px; background: var(--sf-bg-beige); }
.sf-memberships__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Forms ===== */
.sf-form input[type=text], .sf-form input[type=email], .sf-form input[type=tel], .sf-form textarea {
	width: 100%;
	background: var(--sf-white);
	border: 1px solid #ddd;
	border-radius: var(--sf-radius-btn);
	padding: 14px 16px;
	font-family: var(--sf-font-body);
	font-size: clamp(14px, 1.5vw, 16px);
	margin-bottom: 16px;
}
.sf-form textarea { min-height: 120px; resize: vertical; }
.sf-form .sf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sf-form label.sf-consent { display: flex; gap: 10px; font-size: clamp(12px, 1.2vw, 13px); align-items: flex-start; margin-bottom: 12px; }
.sf-fine-print { font-size: clamp(10px, 1vw, 11px); color: var(--sf-pill-dark); }
.sf-fine-print a { color: inherit; }

/* ===== Hours pills ===== */
.sf-hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf-hours-pill { background: var(--sf-pill-dark); color: var(--sf-white); border-radius: var(--sf-radius-pill); padding: 8px 20px; font-size: clamp(13px, 1.4vw, 15px); text-align: center; }

/* ===== Footer / GC-2 ===== */
.sf-footer-nav { background: var(--sf-black); color: var(--sf-white); padding: 60px 0 30px; }
.sf-footer-nav__grid { display: grid; grid-template-columns: 1fr 0.8fr 1.8fr 1fr; gap: var(--sf-gap-footer); align-items: start; margin-bottom: 40px; }
.sf-footer-nav h4 {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(16px, 1.9vw, 20px);
	line-height: 24px;
	color: rgb(132, 136, 107);
	text-transform: uppercase;
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 2px solid rgb(132, 136, 107);
}
.sf-footer-nav ul { list-style: none; margin: 0; padding: 0; }
.sf-footer-nav ul li { margin-bottom: 10px; }
.sf-footer-nav a {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: var(--sf-white);
	text-decoration: none;
}
.sf-footer-nav a:hover { color: var(--sf-sage); }
.sf-footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; align-self: center; }
.sf-footer-social { display: flex; gap: 12px; }
.sf-footer-social a {
	width: 36px;
	height: 36px;
	border-radius: 6px;
	border: none;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sf-white);
	text-decoration: none;
}
.sf-footer-contact-item {
	margin-bottom: 14px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: var(--sf-white);
}
.sf-footer-contact-item .dashicons { color: var(--sf-sage); }
.sf-footer-contact-item a { font: inherit; color: inherit; }
.sf-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-top: 2px solid rgb(132, 136, 107);
	padding-top: 20px;
	font-size: clamp(14px, 1.5vw, 16px);
	color: var(--sf-white);
}
.sf-footer-bottom__credit { display: flex; align-items: center; gap: 10px; }
.sf-footer-bottom__credit img { height: 32px; width: auto; display: block; }

.sf-footer-contact { background: #F1EAE2; padding: 80px 0; }
.sf-footer-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sf-gap); align-items: stretch; }
.sf-footer-contact__left { display: flex; flex-direction: column; height: 100%; }
.sf-footer-contact__map { flex: 1 1 auto; border-radius: var(--sf-radius-card); overflow: hidden; margin-bottom: 24px; }
.sf-footer-contact__map iframe,
.sf-footer-contact__map .sf-placeholder { width: 100%; height: 100%; border: none; display: block; }
.sf-footer-contact__heading {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 600;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 46px;
	color: var(--sf-black);
	margin: 0 0 16px;
}
.sf-footer-contact__heading em,
.sf-footer-contact__heading i { font-style: italic; color: rgb(154, 158, 127); }
.sf-footer-contact__form-embed { background: var(--sf-white); padding: 20px; border-radius: var(--sf-radius-card); margin-top: 16px; min-height: 500px; }
.sf-footer-contact__form-embed iframe { width: 100%; border: none; display: block; }

/* ===== FAQ ===== */
/* ===== FAQs ===== */
.sf-faqs-section { background: var(--sf-white); padding: var(--sf-section-pad-y) 0; }
.sf-faqs__top { position: relative; text-align: center; }
.sf-faqs__decor {
	position: absolute;
	top: 50%;
	left: max(20px, calc(50% - 600px));
	transform: translateY(-50%);
	z-index: 0;
}
.sf-faqs__decor img { display: block; width: 130px; height: auto; }
.sf-faqs__badge { position: relative; }
.sf-faqs__heading {
	position: relative;
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 600;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 46px;
	color: var(--sf-black);
	margin: 0;
}
.sf-faqs__heading em,
.sf-faqs__heading i { font-style: italic; color: rgb(154, 158, 127); }

.sf-faqs__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.sf-faq-item { list-style: none; }
.sf-faq-item__summary {
	display: flex;
	align-items: center;
	gap: 16px;
	list-style: none;
	cursor: pointer;
	background: #F1F3E6;
	border-radius: 30px;
	padding: 20px;
	transition: background-color .3s ease;
}
.sf-faq-item__summary::-webkit-details-marker { display: none; }
.sf-faq-item__summary::marker { content: ""; }
.sf-faq-item__summary:hover,
.sf-faq-item.is-expanded .sf-faq-item__summary { background: #F0EAE2; }
.sf-faq-item__q {
	flex-shrink: 0;
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 900;
	color: rgb(154, 158, 127);
	font-size: clamp(20px, 3.1vw, 29px);
	line-height: 35px;
}
.sf-faq-item__question {
	flex: 1;
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	color: rgb(31, 33, 36);
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 19px;
}
.sf-faq-item__toggle { position: relative; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: #9A9E7F; }
.sf-faq-item__toggle::before,
.sf-faq-item__toggle::after {
	content: "";
	position: absolute;
	background: var(--sf-white);
	border-radius: 1px;
}
.sf-faq-item__toggle::before { top: 50%; left: 5px; right: 5px; height: 1.5px; transform: translateY(-50%); }
.sf-faq-item__toggle::after { left: 50%; top: 5px; bottom: 5px; width: 1.5px; transform: translateX(-50%); transition: opacity .3s ease, transform .3s ease; }
.sf-faq-item.is-expanded .sf-faq-item__toggle::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
/* Smooth open/close: native <details> can't transition its own display:none reveal, so the
   actual animation runs on this grid-rows 0fr->1fr collapse (driven by .is-expanded, not by
   [open] — sf-main.js keeps [open] present a beat longer on close so content stays rendered
   while it visually collapses; see initFaqAccordions()). overflow:hidden on the inner wrapper is
   what lets the 0fr track actually reach zero instead of clamping to the content's min height. */
.sf-faq-item__answer {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: 0;
	transition: grid-template-rows .4s cubic-bezier(.22, 1, .36, 1), margin-top .4s cubic-bezier(.22, 1, .36, 1);
}
.sf-faq-item.is-expanded .sf-faq-item__answer { grid-template-rows: 1fr; margin-top: 10px; }
.sf-faq-item__answer-inner {
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--sf-white);
	border-left: 3px solid #84886B;
	padding: 16px 20px;
}
.sf-faq-item__a {
	flex-shrink: 0;
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 700;
	color: rgb(132, 136, 107);
	font-size: clamp(20px, 3.1vw, 29px);
	line-height: 22px;
}
.sf-faq-item__answer-text {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	color: rgb(0, 0, 0);
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
}
.sf-faq-item__answer-text p { margin: 0; }

.sf-faqs__cta {
	display: flex;
	width: fit-content;
	margin: 40px auto 0;
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 22px;
	color: var(--sf-white) !important;
	background: var(--sf-black);
	border: 1px solid var(--sf-black);
	transition: background-color .6s ease, border-color .6s ease, color .6s ease, opacity .6s ease;
}
.sf-faqs__cta:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}

/* ===== Pills row (related treatments) ===== */
.sf-pill-row { display: flex; flex-wrap: wrap; gap: 16px; }
.sf-pill-row a { background: var(--sf-dark); color: var(--sf-white); border-radius: var(--sf-radius-pill); padding: 16px 32px; text-decoration: none; font-size: clamp(13px, 1.4vw, 15px); }

/* ===== Blog posts grid ===== */
.sf-blog-grid-section { background: var(--sf-white); }
.sf-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }
.sf-blog-card {
	background: var(--sf-white);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--sf-shadow-card);
	transition: box-shadow .3s ease;
}
.sf-blog-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }
.sf-blog-card__image { display: block; aspect-ratio: 4/3; overflow: hidden; }
.sf-blog-card__image img,
.sf-blog-card__image .sf-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.sf-blog-card__body { padding: 20px 24px 24px; }
.sf-blog-card__title { margin: 0 0 12px; }
.sf-blog-card__title a {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 700;
	font-size: clamp(18px, 2.3vw, 24px);
	line-height: 16px;
	color: rgb(25, 25, 25);
	text-decoration: none;
}
.sf-blog-card__excerpt {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: rgb(0, 0, 0);
	margin: 0 0 20px;
}
.sf-blog-card__cta {
	padding: 12px 24px;
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 22px;
	color: var(--sf-white) !important;
	background: var(--sf-black);
	border: 1px solid var(--sf-black);
	transition: background-color .6s ease, border-color .6s ease, color .6s ease, opacity .6s ease;
}
.sf-blog-card__cta:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}

/* ===== Blog grid infinite scroll status (see assets/js/sf-blog-archive.js) ===== */
.sf-blog-grid__sentinel { height: 1px; }
.sf-blog-grid__status { display: flex; justify-content: center; padding: 40px 0 8px; min-height: 40px; }
.sf-blog-grid__spinner {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 3px solid var(--sf-bg-sage-light);
	border-top-color: var(--sf-sage);
	animation: sf-blog-grid-spin .8s linear infinite;
}
.sf-blog-grid__spinner[hidden] { display: none; }
@keyframes sf-blog-grid-spin { to { transform: rotate(360deg); } }
.sf-blog-grid__end {
	margin: 0;
	font-family: var(--sf-font-body);
	font-style: italic;
	font-size: clamp(13px, 1.4vw, 15px);
	color: #6b6b5f;
	text-align: center;
}

/* ===== Single post hero ===== */
.sf-post-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: 560px;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.sf-post-hero__left { background: #84886B; padding: 60px 60px 60px 120px; display: flex; flex-direction: column; justify-content: center; }
.sf-post-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: rgb(0, 0, 0);
}
.sf-post-hero__meta span { display: flex; align-items: center; gap: 6px; }
.sf-post-hero__title {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 600;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 46px;
	color: rgb(25, 25, 25);
	margin: 0 0 28px;
}
.sf-post-hero__cta {
	align-self: flex-start;
	text-transform: uppercase;
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 22px;
	color: var(--sf-white) !important;
	background: var(--sf-black);
	border: 1px solid var(--sf-black);
	transition: background-color .6s ease, border-color .6s ease, color .6s ease, opacity .6s ease;
}
.sf-post-hero__cta:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}
.sf-post-hero__image { overflow: hidden; box-shadow: var(--sf-shadow-card); }
.sf-post-hero__image img,
.sf-post-hero__image .sf-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Single post layout (content + sidebar) ===== */
.sf-post-layout { display: grid; grid-template-columns: 66.67% 33.33%; gap: 20px; align-items: stretch; padding: 60px 0; }
.sf-post-sidebar-form { background: var(--sf-white); padding: 20px; border-radius: 20px; position: sticky; top: 20px; }
.sf-post-sidebar-form iframe { width: 100%; border: none; display: block; }

/* ===== Post body + auto TOC ===== */
.sf-post-toc { background: #F1F3E6; }
.sf-toc-box { background: transparent; border: 1px solid rgba(0,0,0,.15); border-radius: 8px; padding: 20px 24px; margin-bottom: 32px; }
.sf-toc-box__summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,.15); }
.sf-toc-box__summary::-webkit-details-marker { display: none; }
.sf-toc-box__title {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(16px, 1.9vw, 20px);
	line-height: 24px;
	color: rgb(0, 0, 0);
	text-transform: uppercase;
}
.sf-toc-box__chevron { transition: transform .3s ease; }
.sf-toc-box:not([open]) .sf-toc-box__chevron { transform: rotate(180deg); }
.sf-toc-list { list-style: none; margin: 16px 0 0; padding: 0; }
.sf-toc-list.sf-toc-list--nested { margin: 8px 0 0; padding-left: 24px; }
.sf-toc-list li { margin-bottom: 10px; }
.sf-toc-list a {
	display: block;
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: rgb(0, 0, 0);
	text-decoration: none;
	transition: color .3s ease;
}
.sf-toc-list a:hover { color: rgb(154, 158, 127); }
.sf-post-toc__body {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: rgb(0, 0, 0);
}
.sf-post-toc__body p { margin: 0 0 20px; }
.sf-post-toc__body h2 {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(22px, 3.1vw, 32px);
	line-height: 38px;
	color: rgb(0, 0, 0);
	margin: 40px 0 20px;
}
.sf-post-toc__body h3 {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(20px, 2.7vw, 28px);
	line-height: 34px;
	color: rgb(0, 0, 0);
	margin: 32px 0 16px;
}
.sf-post-toc__body h4 {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(17px, 2.1vw, 22px);
	line-height: 28px;
	color: rgb(0, 0, 0);
	margin: 24px 0 14px;
}
.sf-post-toc__body,
.sf-post-toc__body * { max-width: 100%; overflow-wrap: break-word; }
.sf-post-toc__body img { height: auto; display: block; }
.sf-post-toc__body a { color: #84886B; }
.sf-post-toc__body a:hover { opacity: .8; }

/* ===== Icon cards (BG image) ===== */
.sf-icon-cards { position: relative; background-color: #F1EAE2; padding: 80px 0; overflow: hidden; }
.sf-icon-cards::before,
.sf-icon-cards::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--sf-ic-bg);
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
}
.sf-icon-cards::before { background-position: left center; z-index: 0; }
.sf-icon-cards::after {
	background-position: right center;
	background-image: linear-gradient(rgba(241, 234, 226, .65), rgba(241, 234, 226, .65)), var(--sf-ic-bg);
	z-index: 0;
}
.sf-icon-cards .sf-container { position: relative; z-index: 1; }
.sf-icon-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.sf-icon-cards__card {
	display: block;
	background: rgba(255, 255, 255, .79);
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 20px;
	box-shadow: var(--sf-shadow-card);
	padding: 40px 30px;
	text-align: center;
	text-decoration: none;
}
.sf-icon-cards__img { width: 140px; height: 140px; margin: 0 auto 24px; }
.sf-icon-cards__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sf-icon-cards__img.sf-placeholder { width: 100%; height: 100%; border-radius: 50%; background: var(--sf-bg-warm-beige); object-fit: cover; display: flex; }
.sf-icon-cards__heading {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 700;
	font-size: clamp(18px, 2.3vw, 24px);
	line-height: 28px;
	color: rgb(25, 25, 25);
	margin: 0 0 16px;
}
.sf-icon-cards__link-text {
	display: inline-block;
	margin-top: 16px;
	font-family: var(--sf-font-body);
	font-weight: 500;
	font-size: clamp(14px, 1.5vw, 16px);
	color: #84886B;
	text-decoration: underline;
}
.sf-icon-cards__body {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: rgb(0, 0, 0);
	margin: 0;
}
.sf-icon-cards__body p { margin: 0; }
.sf-icon-cards__body a { color: #84886B; }
.sf-icon-cards__body a:hover { opacity: .8; }

/* ===== Pricing carousel ===== */
.sf-pricing-carousel-section { background: var(--sf-white); padding: 80px 0; }
.sf-pricing-carousel-section .sf-container { text-align: center; }
.sf-pricing-carousel__heading {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 600;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 46px;
	color: rgb(0, 0, 0);
	margin: 0 0 40px;
}
.sf-pricing-carousel__heading em,
.sf-pricing-carousel__heading i { font-style: italic; color: rgb(154, 158, 127); }

.sf-pricing-carousel { position: relative; text-align: left; }
.sf-pricing-carousel__row { position: relative; }
.sf-pricing-carousel__viewport { overflow: hidden; }
.sf-pricing-carousel[data-offset="both"] .sf-pricing-carousel__viewport { padding: 0 60px; }
.sf-pricing-carousel[data-offset="left"] .sf-pricing-carousel__viewport { padding-left: 60px; }
.sf-pricing-carousel[data-offset="right"] .sf-pricing-carousel__viewport { padding-right: 60px; }
/* .swiper / .swiper-wrapper / .swiper-slide sizing+spacing is Swiper's job — see sf-swiper-init.js. */

.sf-pricing-card {
	position: relative;
	overflow: hidden;
	height: 100%;
	min-height: 480px;
	background-color: #F1EAE2;
	border-radius: 20px;
	padding: 50px 30px 24px;
	text-align: center;
	box-sizing: border-box;
	box-shadow: var(--sf-shadow-card);
}
.sf-pricing-card::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60%;
	aspect-ratio: 1 / 1;
	background-image: var(--sf-pc-bg);
	background-size: contain;
	background-position: left bottom;
	background-repeat: no-repeat;
	pointer-events: none;
}
.sf-pricing-card > * { position: relative; z-index: 1; }
.sf-pricing-card__img { width: 140px; height: 140px; margin: 0 auto 28px; }
.sf-pricing-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sf-pricing-card__img.sf-placeholder { width: 100%; height: 100%; border-radius: 50%; background: #FAF3EA; object-fit: cover; display: flex; }
.sf-pricing-card__title {
	font-family: var(--sf-font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 52px;
	color: rgb(132, 136, 107);
	text-transform: uppercase;
	margin: 0 0 24px;
}
.sf-pricing-card__divider { border: none; border-top: 2px solid #84886B; margin: 0 auto 24px; }
.sf-pricing-card__divider--1 { width: 50%; }
.sf-pricing-card__divider--2 { width: 70%; }
.sf-pricing-card__price {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 700;
	font-size: clamp(32px, 4.8vw, 50px);
	line-height: 28px;
	color: rgb(0, 0, 0);
	margin: 0 0 24px;
}

/* ===== Carousel nav — shared look (Team / Pricing / Staff Grid / BA carousel) =====
   ONE definition for how every slider's arrows and dots look (size, shape, color, hover treatment)
   so they read as the same control everywhere, per Mohiz's "all sliders must use same button
   styles, icons and dots" — never redeclare these per-carousel again (wordpress-acf-child-theme SOP
   §4: a reusable cross-block system belongs in exactly one place). Each carousel below keeps only
   its own POSITION offset (Team's arrows sit inset at the card edge, matching its fractional-peek
   1.25/2.5/3.5 slidesPerView; the others sit offset outside the row at -60px, since their integer
   slidesPerView leaves no partial peek card for an inset arrow to rest against without covering
   full-width edge content) and its own dots margin-top (each section's own vertical rhythm) — those
   are real layout differences, not "look" differences, so they're intentionally not unified. */
.sf-team-carousel__arrow,
.sf-pricing-carousel__arrow,
.sf-staff-grid-carousel__arrow,
.sf-ba-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 52px;
	height: 52px;
	border-radius: var(--sf-radius-sm);
	background: var(--sf-sage);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	color: var(--sf-white);
	text-align: center;
	transition: opacity .3s ease;
}
/* Chevron icons via WP core Dashicons (already enqueued sitewide, already used the same way for
   the TOC box's chevron) instead of the old `&lsaquo;`/`&rsaquo;` (‹ ›) typographic glyphs, which
   read as thin quote marks rather than a clear nav affordance. Dashicons' own stylesheet declares
   `.dashicons{width:20px;height:20px;font-size:20px}` — loads AFTER our theme CSS (see
   functions.php), but these descendant selectors are already (0,2,0) vs its bare (0,1,0), so no
   cascade-order fight either way; flexbox centering on the button itself (`align-items`/
   `justify-content: center` above) is enough, no manual pixel-nudge transform needed like the old
   glyphs required. */
.sf-team-carousel__arrow .dashicons,
.sf-pricing-carousel__arrow .dashicons,
.sf-staff-grid-carousel__arrow .dashicons,
.sf-ba-carousel__arrow .dashicons { color: inherit; }
.sf-team-carousel__arrow:hover,
.sf-pricing-carousel__arrow:hover,
.sf-staff-grid-carousel__arrow:hover,
.sf-ba-carousel__arrow:hover { opacity: .85; }

.sf-team-carousel__dot,
.sf-pricing-carousel__dot,
.sf-staff-grid-carousel__dot,
.sf-ba-carousel__dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: none; background: #D9D9D9; cursor: pointer; }
.sf-team-carousel__dot.is-active,
.sf-pricing-carousel__dot.is-active,
.sf-staff-grid-carousel__dot.is-active,
.sf-ba-carousel__dot.is-active { background: var(--sf-sage); }

.sf-pricing-carousel__arrow--prev { left: -60px; }
.sf-pricing-carousel__arrow--next { right: -60px; }
.sf-pricing-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }

.sf-pricing-carousel__icon-list { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 40px auto 0; }
.sf-pricing-carousel__icon-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #F1F2E5;
	border-radius: var(--sf-radius-sm);
	padding: 16px 20px;
	width: fit-content;
	max-width: 100%;
}
.sf-pricing-carousel__icon-item .dashicons { color: #84886B; font-size: clamp(20px, 2.7vw, 28px); width: 28px; height: 28px; flex-shrink: 0; }
.sf-pricing-carousel__icon-item span:not(.dashicons) {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 19px;
	color: rgb(0, 0, 0);
	text-transform: uppercase;
	white-space: nowrap;
}
.sf-pricing-carousel__cta {
	display: inline-flex;
	margin-top: 32px;
	text-transform: uppercase;
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 22px;
	color: var(--sf-white) !important;
	background: var(--sf-black);
	border: 1px solid var(--sf-black);
	transition: background-color .6s ease, border-color .6s ease, color .6s ease, opacity .6s ease;
}
.sf-pricing-carousel__cta:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}

/* ===== Staff grid (Services) ===== */
.sf-staff-grid-section { background: #F7F6F1; padding: 80px 0; }
.sf-staff-grid__heading {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 600;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 46px;
	color: rgb(0, 0, 0);
	text-align: center;
	margin: 0 0 20px;
}
.sf-staff-grid__heading em,
.sf-staff-grid__heading i { font-style: italic; color: rgb(154, 158, 127); }
.sf-staff-grid__intro {
	max-width: 720px;
	margin: 0 auto 48px;
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: rgb(52, 68, 62);
	text-align: center;
}
.sf-staff-grid__intro p { margin: 0; }

.sf-staff-grid-carousel { position: relative; }
.sf-staff-grid-carousel__row { position: relative; }
.sf-staff-grid-carousel__viewport { overflow: hidden; }
.sf-staff-grid-carousel[data-offset="both"] .sf-staff-grid-carousel__viewport { padding: 0 60px; }
.sf-staff-grid-carousel[data-offset="left"] .sf-staff-grid-carousel__viewport { padding-left: 60px; }
.sf-staff-grid-carousel[data-offset="right"] .sf-staff-grid-carousel__viewport { padding-right: 60px; }
/* .swiper / .swiper-wrapper / .swiper-slide sizing+spacing is Swiper's job — see sf-swiper-init.js. */

/* ===== Staff card (hover-reveal) =====
   Deliberately the same visual system as .sf-team-card (see sf-pages.css "Team card") — the two
   blocks show the same kind of content (a person, headshot, role) and were drifting into two
   unrelated designs (this one used off-brand hex colors and a static below-the-photo layout).
   Content differs slightly: role -> title, focus -> bio, and two links (book/profile) instead of
   one CTA, but the layers, timing, and easing are identical on purpose. */
.sf-staff-card {
	position: relative;
	border-radius: var(--sf-radius-card);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	isolation: isolate;
	box-shadow: var(--sf-shadow-card);
}
.sf-staff-card__media { position: absolute; inset: 0; }
.sf-staff-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 58%);
	transition: opacity .5s ease;
	pointer-events: none;
}
.sf-staff-card__photo,
.sf-staff-card__media .sf-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .7s cubic-bezier(.22, 1, .36, 1);
	transform-origin: center center;
}
.sf-staff-card:hover .sf-staff-card__media::after,
.sf-staff-card:focus-within .sf-staff-card__media::after,
.sf-staff-card.is-open .sf-staff-card__media::after { opacity: 0; }
.sf-staff-card:hover .sf-staff-card__photo,
.sf-staff-card:focus-within .sf-staff-card__photo,
.sf-staff-card.is-open .sf-staff-card__photo,
.sf-staff-card:hover .sf-staff-card__media .sf-placeholder,
.sf-staff-card:focus-within .sf-staff-card__media .sf-placeholder,
.sf-staff-card.is-open .sf-staff-card__media .sf-placeholder { transform: scale(1.06); }

.sf-staff-card__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 28px 28px 26px;
	text-align: left;
	background-color: transparent;
	/* See .sf-team-card__panel in sf-pages.css for why this reads a JS-measured custom property
	   instead of a fixed peek height. */
	transform: translateY(calc(100% - 28px - var(--sf-card-peek-h, 70px)));
	transition: transform .6s cubic-bezier(.22, 1, .36, 1), background-color .6s ease;
}
/* See .sf-team-card__peek in sf-pages.css — same reasoning, kept in parity. */
.sf-staff-card__peek { margin: 0; padding-bottom: 28px; }
.sf-staff-card:hover .sf-staff-card__panel,
.sf-staff-card:focus-within .sf-staff-card__panel,
.sf-staff-card.is-open .sf-staff-card__panel {
	transform: translateY(0);
	background-color: var(--sf-bg-sage-light);
}
.sf-staff-card__name {
	margin: 0 0 4px;
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 600;
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.2;
	color: var(--sf-white);
	transition: color .5s ease;
}
.sf-staff-card__title {
	margin: 0 0 16px;
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sf-bg-sage-light);
	transition: color .5s ease;
}
.sf-staff-card:hover .sf-staff-card__name,
.sf-staff-card:focus-within .sf-staff-card__name,
.sf-staff-card.is-open .sf-staff-card__name { color: var(--sf-black); }
.sf-staff-card:hover .sf-staff-card__title,
.sf-staff-card:focus-within .sf-staff-card__title,
.sf-staff-card.is-open .sf-staff-card__title { color: var(--sf-sage); }
.sf-staff-card__bio {
	margin: 0 0 18px;
	font-family: var(--sf-font-body);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 1.6;
	color: var(--sf-black);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .4s ease, transform .4s ease;
	/* See .sf-team-card__bio in sf-pages.css — same reasoning: an unbounded bio can push the
	   actions row (Book with / View Profile) outside the card's own clipped, hit-testable area. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.sf-staff-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .4s ease, transform .4s ease;
}
.sf-staff-card__book,
.sf-staff-card__profile {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .02em;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color .3s ease, text-decoration-color .3s ease;
}
.sf-staff-card__book { color: var(--sf-black) !important; text-decoration-color: var(--sf-sage); }
.sf-staff-card__book:hover { color: var(--sf-sage) !important; text-decoration-color: var(--sf-black); }
.sf-staff-card__profile { color: var(--sf-sage) !important; text-decoration-color: var(--sf-sage); }
.sf-staff-card__profile:hover { color: var(--sf-black) !important; text-decoration-color: var(--sf-black); }
.sf-staff-card:hover .sf-staff-card__bio,
.sf-staff-card:focus-within .sf-staff-card__bio,
.sf-staff-card.is-open .sf-staff-card__bio,
.sf-staff-card:hover .sf-staff-card__actions,
.sf-staff-card:focus-within .sf-staff-card__actions,
.sf-staff-card.is-open .sf-staff-card__actions {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .15s;
}
@media (max-width: 480px) {
	.sf-staff-card__panel { padding: 20px 20px 22px; }
}

/* Look (size/shape/color/hover) now lives once in the shared "Carousel nav" block near the Pricing
   carousel section — only Staff Grid's own position offset stays here. Position offsets (-60px) are
   left as-is: Staff Grid uses integer slidesPerView (1/2/3, no fractional peek like Team's
   1.25/2.5/3.5) so an inset 0/0 arrow would sit directly on top of full-width edge-card content
   instead of a partially-visible peek slide — that's a layout necessity, not a "look" difference. */
.sf-staff-grid-carousel__arrow--prev { left: -60px; }
.sf-staff-grid-carousel__arrow--next { right: -60px; }
.sf-staff-grid-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }

/* ===== Product Pricing Tabs ===== */
.sf-product-tabs-section { background: var(--sf-white); padding: var(--sf-section-pad-y) 0; }
.sf-product-tabs__heading {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 600;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 46px;
	color: var(--sf-black);
	text-align: center;
	margin: 0 0 40px;
}
.sf-product-tabs__heading em,
.sf-product-tabs__heading i { font-style: italic; color: rgb(154, 158, 127); }

.sf-product-tabs__nav { display: none; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 40px; }
.sf-product-tabs__tab-btn {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 24px;
	text-transform: uppercase;
	color: rgb(0, 0, 0);
	background: #F1F2F3;
	border: 1px solid #D9D9D9;
	border-radius: 5px;
	padding: 12px 24px;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.sf-product-tabs__tab-btn:hover,
.sf-product-tabs__tab-btn.is-active {
	background: var(--sf-black);
	border-color: var(--sf-black);
	color: rgb(255, 255, 255);
}

.sf-product-tabs__accordion-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 24px;
	text-transform: uppercase;
	color: rgb(0, 0, 0);
	background: #F1F2F3;
	border: 1px solid #D9D9D9;
	border-radius: 5px;
	padding: 14px 20px;
	cursor: pointer;
	margin-bottom: 8px;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.sf-product-tabs__accordion-btn.is-active { background: var(--sf-black); border-color: var(--sf-black); color: rgb(255, 255, 255); }
.sf-product-tabs__accordion-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.sf-product-tabs__accordion-icon::before,
.sf-product-tabs__accordion-icon::after {
	content: '';
	position: absolute;
	background-color: currentColor;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform .3s ease, opacity .3s ease;
}
.sf-product-tabs__accordion-icon::before { width: 12px; height: 2px; }
.sf-product-tabs__accordion-icon::after { width: 2px; height: 12px; }
.sf-product-tabs__accordion-btn.is-active .sf-product-tabs__accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.sf-product-tabs__pane { display: none; }
.sf-product-tabs__pane.is-active { display: block; }

.sf-product-tabs__grid { display: flex; flex-wrap: wrap; gap: 30px; align-items: stretch; }
.sf-product-tabs__card {
	flex: 0 0 calc(25% - 22.5px);
	width: calc(25% - 22.5px);
	display: flex;
	flex-direction: column;
	text-align: center;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
}
.sf-product-tabs__card-image { height: 300px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--sf-radius-sm); box-shadow: var(--sf-shadow-card); }
.sf-product-tabs__card-image img { max-height: 100%; width: auto; object-fit: contain; display: block; }
.sf-product-tabs__card-image.sf-placeholder { width: 100%; }
.sf-product-tabs__card-name {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 600;
	font-size: clamp(16px, 1.9vw, 18px);
	line-height: 22px;
	color: rgb(25, 25, 25);
	margin: 0 0 8px;
}
.sf-product-tabs__card-desc {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: rgb(0, 0, 0);
	margin: 0 0 8px;
}
.sf-product-tabs__card-price {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 600;
	font-size: clamp(16px, 1.9vw, 18px);
	line-height: 22px;
	color: rgb(25, 25, 25);
	margin-top: auto;
}

@media (min-width: 768px) {
	.sf-product-tabs__nav { display: flex; }
	.sf-product-tabs__accordion-btn { display: none; }
}
@media (max-width: 1024px) {
	.sf-product-tabs__card { flex: 0 0 calc(50% - 15px); width: calc(50% - 15px); }
}
@media (max-width: 540px) {
	.sf-product-tabs__card { flex: 0 0 100%; width: 100%; }
}

/* ===== Staff Bio Hero ===== */
.sf-staff-hero { background: var(--sf-white); }
.sf-staff-hero__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 640px; }
.sf-staff-hero__content { display: flex; flex-direction: column; justify-content: center; padding: 60px max(20px, calc(50% - 600px)) 60px 120px; }
.sf-staff-hero__eyebrow {
	font-family: var(--sf-font-heading);
	font-style: italic;
	font-weight: 700;
	color: rgb(132, 136, 107);
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 22px;
	margin: 0 0 8px;
}
.sf-staff-hero__name {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 600;
	color: rgb(0, 0, 0);
	font-size: clamp(28px, 4vw, 42px);
	line-height: 50px;
	margin: 0 0 12px;
}
.sf-staff-hero__role {
	font-family: var(--sf-font-heading);
	font-style: italic;
	font-weight: 600;
	color: rgb(132, 136, 107);
	font-size: clamp(18px, 2.7vw, 24px);
	line-height: 29px;
	margin: 0;
}
.sf-staff-hero__divider { margin: 24px 0; }
.sf-staff-hero__divider img { display: block; height: auto; max-width: 260px; }
.sf-staff-hero__subheading {
	font-family: var(--sf-font-heading);
	font-style: italic;
	font-weight: 600;
	color: rgb(0, 0, 0);
	font-size: clamp(18px, 2.7vw, 24px);
	line-height: 29px;
	margin: 0 0 16px;
}
.sf-staff-hero__body {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	color: rgb(0, 0, 0);
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	margin: 0 0 32px;
}
.sf-staff-hero__body p { margin: 0 0 16px; }
.sf-staff-hero__body a { color: #84886B; font-weight: 700; }
.sf-staff-hero__body a:hover { opacity: .8; }
.sf-staff-hero__ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sf-staff-hero__cta {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 22px;
	transition: background-color .6s ease, border-color .6s ease, color .6s ease, opacity .6s ease;
}
.sf-staff-hero__cta--primary { background: #84886B; border: 1px solid #84886B; color: var(--sf-white) !important; }
.sf-staff-hero__cta--primary:hover { opacity: 1; background: var(--sf-black); border-color: var(--sf-black); color: var(--sf-white) !important; }
.sf-staff-hero__cta--secondary { background: transparent; border: 1px solid #84886B; color: #84886B !important; }
.sf-staff-hero__cta--secondary:hover { opacity: 1; background: var(--sf-black); border-color: var(--sf-black); color: var(--sf-white) !important; }
.sf-staff-hero__photo { height: 100%; min-height: 400px; overflow: hidden; box-shadow: var(--sf-shadow-card); }
.sf-staff-hero__photo img,
.sf-staff-hero__photo .sf-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Expertise & Trust Panels ===== */
.sf-expertise-trust-section { background: #F1F3E6; padding: var(--sf-section-pad-y) 0; }
.sf-expertise-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }
.sf-expertise-trust__panel { background: var(--sf-white); border-radius: 30px; padding: 40px; }
.sf-expertise-trust__title {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 600;
	color: rgb(0, 0, 0);
	font-size: clamp(22px, 3.9vw, 32px);
	line-height: 38px;
	margin: 0 0 24px;
}

.sf-expertise-trust__left-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sf-expertise-trust__left-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	border: 1px solid #84886B;
	border-radius: 30px;
}
.sf-expertise-trust__left-icon { width: 40px; height: 40px; flex-shrink: 0; }
.sf-expertise-trust__left-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sf-expertise-trust__left-icon .dashicons { font-size: 32px; width: 32px; height: 32px; color: #84886B; }
.sf-expertise-trust__left-text {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 400;
	color: rgb(0, 0, 0);
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 19px;
}

.sf-expertise-trust__right-list { display: flex; flex-direction: column; }
.sf-expertise-trust__right-item { display: flex; align-items: center; gap: 12px; padding: 16px 0; }
.sf-expertise-trust__right-check { color: #84886B; font-size: 20px; width: 20px; height: 20px; flex-shrink: 0; }
.sf-expertise-trust__right-text {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 400;
	color: rgb(0, 0, 0);
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 19px;
}
.sf-expertise-trust__right-divider { border: none; border-top: 1px solid #84886B; margin: 0; }
.sf-expertise-trust__right-divider:last-child { display: none; }

.sf-expertise-trust__quote {
	position: relative;
	overflow: hidden;
	background-color: #F1F2E5;
	border-radius: 20px;
	padding: 24px;
	margin-top: 24px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.sf-expertise-trust__quote-decor { position: absolute; top: 24px; right: 5%; z-index: 0; pointer-events: none; }
.sf-expertise-trust__quote-decor img { display: block; width: 110px; height: auto; }
.sf-expertise-trust__quote-icon { position: relative; z-index: 1; color: #84886B; font-size: 28px; width: 28px; height: 28px; flex-shrink: 0; }
.sf-expertise-trust__quote-text {
	position: relative;
	z-index: 1;
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	color: rgb(0, 0, 0);
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	margin: 0;
}

/* ===== Before/After Gallery Carousel ===== */
.sf-ba-carousel-section { background: var(--sf-white); padding: var(--sf-section-pad-y) 0; }
.sf-ba-carousel { position: relative; }
.sf-ba-carousel__row { position: relative; }
.sf-ba-carousel__viewport { overflow: hidden; }
.sf-ba-carousel[data-offset="both"] .sf-ba-carousel__viewport { padding: 0 60px; }
.sf-ba-carousel[data-offset="left"] .sf-ba-carousel__viewport { padding-left: 60px; }
.sf-ba-carousel[data-offset="right"] .sf-ba-carousel__viewport { padding-right: 60px; }
/* .swiper / .swiper-wrapper / .swiper-slide sizing+spacing is Swiper's job — see sf-swiper-init.js. */

.sf-ba-carousel__photo { aspect-ratio: 3 / 4; overflow: hidden; }
.sf-ba-carousel__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sf-ba-carousel__caption { text-align: center; margin-top: 20px; }
.sf-ba-carousel__title {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(18px, 2.3vw, 24px);
	line-height: 28px;
	color: var(--sf-black);
	margin: 0;
}
.sf-ba-carousel__subtitle {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(18px, 2.3vw, 24px);
	line-height: 28px;
	color: var(--sf-black);
	margin: 0;
}

/* Look (size/shape/color/hover) now lives once in the shared "Carousel nav" block near the Pricing
   carousel section — only BA carousel's own position offset stays here (was previously its own
   near-duplicate, including a stray `border-radius: 0` that made it a square while Team/others were
   rounded — one more reason this needed a single source of truth instead of 4 hand-copies). */
.sf-ba-carousel__arrow--prev { left: -60px; }
.sf-ba-carousel__arrow--next { right: -60px; }
.sf-ba-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }

/* ===== Skip link / a11y ===== */
.sf-skip-link { position: absolute; left: -999px; top: 0; background: var(--sf-dark); color: var(--sf-white); padding: 10px 16px; z-index: 100; }
.sf-skip-link:focus { left: 10px; top: 10px; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
	.sf-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.sf-grid-3 { grid-template-columns: 1fr; }
	.sf-grid-2 { grid-template-columns: 1fr; }
	.sf-footer-nav__grid { grid-template-columns: 1fr 1fr; }
	.sf-footer-contact__grid { grid-template-columns: 1fr; }
	.sf-partner-strip__grid { grid-template-columns: repeat(4, 1fr); }
	.sf-blog-grid { grid-template-columns: repeat(2, 1fr); }
	.sf-icon-cards__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	/* Off-canvas mobile menu — slides in from the right, dims the page behind it */
	.sf-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(320px, 85vw);
		background: var(--sf-white);
		flex-direction: column;
		align-items: stretch;
		padding: 20px;
		gap: 0;
		z-index: 70;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(100%);
		transition: transform .4s cubic-bezier(.22, 1, .36, 1);
		box-shadow: -12px 0 32px rgba(0, 0, 0, .18);
	}
	.sf-nav.is-open { display: flex; transform: translateX(0); }

	.sf-offcanvas__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding-bottom: 16px;
		margin-bottom: 12px;
		border-bottom: 1px solid #ECECDF;
	}
	.sf-offcanvas__logo img { height: 40px; width: auto; display: block; }
	/* GeneratePress ships a global Customizer rule (generate-style-inline-css) targeting bare
	   `button`/`a.button` elements on hover/focus with its own dark gray — it also appears to
	   win the base (non-hover) state on plain `<button>`s. Every custom icon-button below
	   forces the brand sage green + white icon with !important so GP can never repaint them,
	   in both rest and hover/focus states (the missing rest-state override was why the close
	   button's stroke="currentColor" X was invisible — `color` was being clobbered). */
	.sf-offcanvas__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 6px;
		background-color: var(--sf-sage) !important;
		border: none;
		color: var(--sf-white) !important;
		cursor: pointer;
		flex-shrink: 0;
		transition: opacity .2s ease;
	}
	.sf-offcanvas__close svg { display: block; flex-shrink: 0; }
	.sf-offcanvas__close:hover,
	.sf-offcanvas__close:focus {
		background-color: var(--sf-sage) !important;
		color: var(--sf-white) !important;
		opacity: .85;
	}

	.sf-offcanvas__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .45);
		z-index: 65;
		opacity: 0;
		visibility: hidden;
		transition: opacity .35s ease, visibility .35s ease;
		touch-action: none;
	}
	body.sf-nav-open .sf-offcanvas__backdrop { opacity: 1; visibility: visible; }

	.sf-offcanvas__social {
		display: flex;
		gap: 12px;
		margin-top: 20px;
		padding-top: 16px;
		border-top: 1px solid #ECECDF;
	}
	.sf-offcanvas__social a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 6px;
		background: #9A9E7F;
		color: var(--sf-white);
		text-decoration: none;
		transition: opacity .2s ease;
	}
	.sf-offcanvas__social a:hover { opacity: .85; }
	.sf-offcanvas__social .dashicons {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: 18px;
		font-size: 18px;
		line-height: 1;
	}

	.sf-header__actions { display: flex; align-items: center; gap: 8px; }
	.sf-header__cta { display: none; }

	.sf-nav-toggle,
	.sf-header__phone {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		background-color: var(--sf-sage) !important;
		border-radius: 6px;
		padding: 0;
		flex-shrink: 0;
		color: var(--sf-white) !important;
		appearance: none;
		-webkit-appearance: none;
		outline: none;
		transition: opacity .2s ease;
	}
	.sf-nav-toggle:active,
	.sf-nav-toggle:focus,
	.sf-nav-toggle:hover,
	.sf-nav-toggle[aria-expanded="true"] {
		background-color: var(--sf-sage) !important;
		color: var(--sf-white) !important;
	}
	.sf-header__phone:hover,
	.sf-header__phone:focus {
		background-color: var(--sf-sage) !important;
		color: var(--sf-white) !important;
		opacity: .85;
	}
	.sf-nav-toggle span {
		position: absolute;
		left: 50%;
		top: 50%;
		display: block;
		background: var(--sf-white);
		width: 16px;
		height: 2px;
		margin: 0;
		transform: translate(-50%, -50%) translateY(-5px);
		transition: transform .25s ease, opacity .25s ease;
	}
	.sf-nav-toggle span:nth-child(3) { transform: translate(-50%, -50%); }
	.sf-nav-toggle span:nth-child(4) { transform: translate(-50%, -50%) translateY(5px); }
	.sf-nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg); }
	.sf-nav-toggle[aria-expanded="true"] span:nth-child(3) { opacity: 0; }
	.sf-nav-toggle[aria-expanded="true"] span:nth-child(4) { transform: translate(-50%, -50%) rotate(-45deg); }

	.sf-nav__row > a::after { display: none; }
	.sf-nav__item, .sf-nav__row { display: block; }
	/* gap: 0 explicitly, so this row never depends on the base (desktop) rule's `gap: 6px` — the
	   label `<a>` already has `flex: 1` filling every pixel `justify-content: space-between`
	   leaves available, so any inherited gap here would be pure unwanted extra space. The actual
	   6px-overflow bug reported ("trigger flowing outside the link bg") turned out to be the
	   submenu-toggle's own stray negative margin, not this — see the comment on that rule below. */
	.sf-nav__row { display: flex; align-items: center; justify-content: space-between; padding: 0; gap: 0; }
	.sf-nav__row a { display: block; flex: 1; padding: 14px 4px; border-bottom: none; transition: color .3s ease; }
	.sf-nav__submenu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		background-color: transparent !important;
		border: none;
		border-radius: 6px;
		padding: 0;
		/* The base (desktop) rule sets `margin: -6px` to offset an invisible hit-area `padding: 6px`
		   it also declares, keeping the box's flex footprint identical to its visible size. This
		   override resets `padding` back to 0 but never reset the matching `margin` — so the stray
		   -6px margin survived here with nothing left to offset, pulling the button 6px past the
		   row's own right edge (confirmed via getBoundingClientRect: toggle's right edge measured
		   exactly 6px beyond the row's — reported as the trigger "flowing outside the link bg"). */
		margin: 0;
		color: var(--sf-black);
		cursor: pointer;
		transition: transform .25s ease, color .3s ease;
	}
	.sf-nav__submenu-toggle:hover,
	.sf-nav__submenu-toggle:focus-visible {
		background-color: var(--sf-sage) !important;
		color: var(--sf-white) !important;
		outline: none;
	}
	.sf-nav__item.is-open .sf-nav__submenu-toggle { transform: rotate(180deg); }
	.sf-nav__item.is-open .sf-nav__row { background: #9A9E7F; }
	.sf-nav__item.is-open .sf-nav__row a { color: var(--sf-white) !important; }
	.sf-nav__item.is-open .sf-nav__submenu-toggle { color: var(--sf-white); }
	.sf-nav__row,
	.sf-nav__row a { transition: color .3s ease, background-color .3s ease; }
	.sf-nav__row:has(> a.is-active) { background: #9A9E7F; }
	.sf-nav__row a.is-active { color: var(--sf-white) !important; border-bottom-color: transparent !important; }
	.sf-nav__submenu {
		display: none;
		position: static;
		flex-direction: column;
		padding: 4px 0 4px 16px;
		min-width: 0;
		max-height: none;
		overflow: visible;
		box-shadow: none;
		background: transparent;
	}
	.sf-nav__item.is-open .sf-nav__submenu { display: flex; }
	.sf-nav__submenu a { display: block; padding: 10px 0; border-bottom: none; font-size: 14px; }
}
@media (min-width: 901px) {
	.sf-header__phone { display: none; }
}
@media (max-width: 720px) {
	.sf-grid-4, .sf-hours-grid { grid-template-columns: 1fr 1fr; }
	.sf-services { padding-top: 30px; padding-bottom: 30px; }
	.sf-services .sf-grid-4 { grid-template-columns: 1fr; }
	.sf-footer-nav__grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; }
	.sf-footer-nav { padding-top: 30px; padding-bottom: 30px; }
	.sf-footer-brand { order: 1; }
	.sf-footer-links { order: 2; }
	.sf-footer-contact-col { order: 3; }
	.sf-footer-hours { order: 4; }
	.sf-footer-brand .sf-header__logo img { height: 75px; }
	.sf-footer-social a { width: 44px; height: 44px; }
	.sf-footer-social .dashicons { font-size: 24px; width: 24px; height: 24px; }
	.sf-footer-bottom { flex-direction: column; align-items: center; text-align: center; }
	.sf-footer-bottom__credit { flex-direction: column; }
	.sf-divider-strip { height: 80px; }
	.sf-service-card__label { font-size: clamp(18px, 4.5vw, 20px); }
	.sf-switch-cta { flex-direction: column; text-align: center; }
	.sf-heading-xl, .sf-heading-lg { font-size: clamp(21px, 2.9vw, 30px); }
	.sf-heading-cta { font-size: clamp(22px, 3.1vw, 32px); }
	.sf-form .sf-form-row { grid-template-columns: 1fr; }
	.sf-partner-strip__grid { grid-template-columns: repeat(3, 1fr); }
	.sf-blog-grid { grid-template-columns: 1fr; }
	.sf-icon-cards__grid { grid-template-columns: 1fr; }
	.sf-post-hero { grid-template-columns: 1fr; min-height: 0; }
	.sf-post-hero__left { padding: 40px 20px; order: 2; }
	.sf-post-hero__image { min-height: 280px; order: 1; }
	.sf-post-layout { grid-template-columns: 1fr; }
	.sf-post-sidebar-form { position: static; }
}

/* ===== Large-screen container widen (1550px+ only, never touches base/default max-width) ===== */
@media (min-width: 1550px) {
	.sf-container { max-width: 1600px; }
	.sf-header__inner { max-width: 1600px; }
}

/* ===== Motion ===== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-aos] {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
	.sf-team-card__photo,
	.sf-team-card__panel,
	.sf-staff-card__photo,
	.sf-staff-card__panel,
	.sf-media-zoom img,
	.sf-media-zoom video { transition: none !important; }
	.sf-team-card:hover .sf-team-card__photo,
	.sf-staff-card:hover .sf-staff-card__photo,
	.sf-media-zoom:hover img { transform: none !important; }
	/* Kept at ~0s rather than `none` — the FAQ JS listens for `transitionend` to finish closing
	   an item (strip the [open] attribute); a real, near-instant transition still fires that
	   event, while `transition: none` never would and would leave [open] stuck behind. */
	.sf-faq-item__answer,
	.sf-faq-item__toggle::after { transition-duration: .01s !important; }
	/* Functional loading state, not decoration — kept visible (a ring communicates "busy" on its
	   own) but the spin itself stops rather than running continuously. */
	.sf-blog-grid__spinner { animation: none !important; }
}