/* Skinfluence page-specific sections */

/* ===== Home hero ===== */
.sf-hero { position: relative; padding: 60px 0 80px; background: var(--sf-bg-sage-light); }
.sf-hero__decor {
	position: absolute;
	left: calc(max(20px, calc(50% - 600px)) + 120px);
	bottom: 0;
	transform: translateY(50%);
	z-index: 2;
}
.sf-hero__decor img { display: block; width: 90px; height: auto; }
.sf-hero__cta-row { display: flex; align-items: center; gap: 20px; }
.sf-hero__decor--inline { position: static; transform: none; z-index: auto; }
.sf-hero__grid { display: grid; grid-template-columns: 40% 60%; gap: 29px; align-items: center; }
.sf-hero__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 20px;
}
.sf-hero__heading em,
.sf-hero__heading i { font-style: italic; color: rgb(154, 158, 127); }
.sf-hero__body {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: var(--sf-black);
}
.sf-hero__body a { color: #84886B; }
.sf-hero__body a:hover { opacity: .8; }
.sf-hero__cta {
	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-hero__cta:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}
.sf-hero__media { width: 100%; }
.sf-hero__video-link { display: block; }
.sf-hero__video,
.sf-hero__media .sf-placeholder {
	width: 100%;
	height: 400px;
	border-radius: 30px;
	overflow: hidden;
	display: block;
}
.sf-hero__video { object-fit: cover; background: var(--sf-black); }

/* ===== About intro / two-col ===== */
.sf-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sf-gap); align-items: center; }
.sf-two-col--reverse { direction: rtl; }
.sf-two-col--reverse > * { direction: ltr; }
.sf-two-col--narrow-image { grid-template-columns: 40% 60%; }
.sf-two-col__photo { border-radius: var(--sf-radius-card); overflow: hidden; height: 450px; min-width: 0; box-shadow: var(--sf-shadow-card); }
.sf-two-col--tall-image .sf-two-col__photo { height: 600px; }
.sf-two-col__photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--sc-img-pos, center center); }
.sf-two-col__badge {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: rgb(255, 255, 255);
	margin-bottom: 24px;
}
.sf-two-col__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 24px;
}
.sf-two-col__heading em,
.sf-two-col__heading i { font-style: italic; color: rgb(154, 158, 127); }
.sf-two-col__body {
	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-black);
	margin-bottom: 24px;
}
.sf-two-col__cta {
	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-two-col__cta:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}

/* ===== Services preview / grid cards already via .sf-service-card ===== */
.sf-services { position: relative; background: #F0EAE2; }
.sf-services--white { background: var(--sf-white); }
.sf-services .sf-container { text-align: center; }
.sf-services__badge {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: rgb(255, 255, 255);
}
.sf-services__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);
}
.sf-services__heading em,
.sf-services__heading i { font-style: italic; color: rgb(154, 158, 127); }
.sf-services .sf-grid-4 { text-align: left; margin-top: 40px; }
.sf-services__cta {
	display: inline-flex;
	margin-top: 40px;
	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-services__cta:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}
.sf-services__decor {
	position: absolute;
	left: calc(max(20px, calc(50% - 600px)) + 120px);
	bottom: 0;
	transform: translateY(50%);
	z-index: 2;
}
.sf-services__decor img { display: block; width: 90px; height: auto; }

/* ===== Benefits / Why Choose Us ===== */
.sf-benefits { position: relative; background: var(--sf-white); }
.sf-benefits--beige { background: #F1EAE2; }
.sf-benefits--beige .sf-benefit-card { background: var(--sf-white); border: 1px solid #F1F2E5; border-radius: 30px; }
.sf-benefits .sf-container { text-align: center; position: relative; }
.sf-benefits__top { position: relative; }
.sf-benefits__badge {
	position: relative;
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: rgb(255, 255, 255);
}
.sf-benefits__heading {
	position: relative;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	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);
}
.sf-benefits__heading em,
.sf-benefits__heading i { font-style: italic; color: rgb(154, 158, 127); }
.sf-benefits__intro {
	width: 100%;
	margin: 16px 0 0;
	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-black);
}
.sf-benefits__intro p { margin: 0; }

.sf-benefits__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; text-align: left; margin-top: 40px; }
.sf-benefit-card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	background: #F1EAE2;
	border: 1px solid #2743664F;
	border-radius: 10px;
	padding: 32px;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--sf-shadow-card);
	transition: opacity .3s ease;
}
a.sf-benefit-card:hover { opacity: .85; }
.sf-benefit-card__icon { width: 40px; height: 40px; flex-shrink: 0; margin-top: 6px; }
.sf-benefit-card__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sf-benefit-card__icon .dashicons { font-size: clamp(22px, 3.1vw, 32px); width: 32px; height: 32px; color: var(--sf-black); }
.sf-benefit-card__title {
	margin: 0 0 8px;
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 700;
	font-size: clamp(18px, 2.3vw, 24px);
	line-height: 28px;
	color: rgb(30, 30, 30);
}
.sf-benefit-card__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(25, 25, 25);
}
.sf-benefit-card__body p { margin: 0; }
.sf-benefit-card__body a { color: #84886B; }
.sf-benefit-card__body a:hover { opacity: .8; }

.sf-benefits__cta {
	display: inline-flex;
	margin-top: 40px;
	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-benefits__cta:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}

.sf-benefits__decor-left {
	position: absolute;
	top: 50%;
	left: max(20px, calc(50% - 600px));
	transform: translateY(-50%);
	z-index: 0;
}
.sf-benefits__decor-left img { display: block; width: 120px; height: auto; }
.sf-benefits__decor-badge-right {
	position: absolute;
	top: 0;
	right: max(20px, calc(50% - 600px));
	transform: translateY(-50%);
	z-index: 0;
}
.sf-benefits__decor-badge-right img { display: block; width: 110px; height: auto; }
.sf-benefits__decor-bottom-right {
	position: absolute;
	right: max(20px, calc(50% - 600px));
	bottom: 0;
	transform: translateY(50%);
	z-index: 2;
}
.sf-benefits__decor-bottom-right img { display: block; width: 110px; height: auto; }

/* ===== Testimonials ===== */
.sf-testimonials { position: relative; background: var(--sf-white); }
.sf-testimonials .sf-container { text-align: center; }
.sf-testimonials__badge {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: rgb(255, 255, 255);
}
.sf-testimonials__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);
}
.sf-testimonials__heading em,
.sf-testimonials__heading i { font-style: italic; color: rgb(154, 158, 127); }
.sf-testimonials .sf-grid-3 { text-align: left; margin-top: 40px; }
.sf-testimonials__decor {
	position: absolute;
	left: calc(max(20px, calc(50% - 600px)) + 120px);
	bottom: 0;
	transform: translateY(50%);
	z-index: 2;
}
.sf-testimonials__decor img { display: block; width: 90px; height: auto; }
.sf-testimonials__embed { width: 100%; margin-top: 40px; min-height: 420px; }
.sf-testimonials__embed iframe { width: 100%; border: none; display: block; }

/* ===== Team ===== */
.sf-team { position: relative; background: var(--sf-white); }
.sf-team .sf-container { text-align: center; }
.sf-team__badge {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: rgb(255, 255, 255);
}
.sf-team__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);
}
.sf-team__heading em,
.sf-team__heading i { font-style: italic; color: rgb(154, 158, 127); }
.sf-team__cta {
	display: inline-flex;
	margin-top: 40px;
	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-team__cta:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}

/* ===== Team carousel ===== */
.sf-team-carousel { margin-top: 40px; text-align: left; }
.sf-team-carousel__row { position: relative; }
/* Sizing/spacing/transform for .swiper / .swiper-wrapper / .swiper-slide (also carried on these
   elements) is entirely Swiper's own job now — see sf-swiper-init.js. slidesPerView 3.5/2.5/1.25
   and the 26px gap are configured there, not here, so there's exactly one source of truth for
   layout instead of Swiper's inline styles fighting a parallel CSS flex-basis calc(). */
/* Look (size/shape/color/hover) now lives once in sf-global.css's shared "Carousel nav" block,
   combined with Pricing/Staff Grid/BA carousel's own selectors — only Team's own position offset
   stays here (inset at the card edge, since its fractional 1.25/2.5/3.5 slidesPerView always leaves
   a partially-visible peek card at the edge for the arrow to rest against). */
.sf-team-carousel__arrow--prev { left: 0; }
.sf-team-carousel__arrow--next { right: 0; }
.sf-team-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }

/* ===== Team card (hover-reveal) =====
   Rest state: full-bleed photo + a permanent dark scrim on the media layer, name/title in white
   sitting on that scrim. Hover/focus-within (or `.is-open`, toggled by sf-main.js for touch
   devices with no real hover): the photo scales up slightly and a solid cream panel — already
   holding the name/title/bio/CTA in document order — slides up from the card's own bottom edge on
   its own transform, revealing the bio + CTA that were sitting clipped below the fold. The scrim
   fades out in the same beat so the cream panel takes over exactly where the scrim was. */
.sf-team-card {
	position: relative;
	border-radius: var(--sf-radius-card);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	isolation: isolate;
	box-shadow: var(--sf-shadow-card);
}
.sf-team-card__media { position: absolute; inset: 0; }
.sf-team-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-team-card__photo,
.sf-team-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-team-card:hover .sf-team-card__media::after,
.sf-team-card:focus-within .sf-team-card__media::after,
.sf-team-card.is-open .sf-team-card__media::after { opacity: 0; }
.sf-team-card:hover .sf-team-card__photo,
.sf-team-card:focus-within .sf-team-card__photo,
.sf-team-card.is-open .sf-team-card__photo,
.sf-team-card:hover .sf-team-card__media .sf-placeholder,
.sf-team-card:focus-within .sf-team-card__media .sf-placeholder,
.sf-team-card.is-open .sf-team-card__media .sf-placeholder { transform: scale(1.06); }

.sf-team-card__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 28px 28px 26px;
	background-color: transparent;
	/* --sf-card-peek-h is the real measured height of .sf-team-card__peek (name + title), set by
	   sf-main.js via ResizeObserver — never a fixed guess, so a long/wrapping job title always
	   gets enough room in the rest-state "peek" and never gets clipped by the card's own
	   overflow:hidden. The 70px fallback only matters for the instant before JS first runs. */
	transform: translateY(calc(100% - 28px - var(--sf-card-peek-h, 70px)));
	transition: transform .6s cubic-bezier(.22, 1, .36, 1), background-color .6s ease;
}
/* Rest-state "window" through the card's overflow:hidden is exactly padding-top + this element's
   own (ResizeObserver-measured) height — it has no bottom padding of its own by default, so the
   title sits flush against the card's bottom edge. Give it the same breathing room as the panel's
   own left/right padding so the title visually sits up from the edge instead of touching it. */
.sf-team-card__peek { margin: 0; padding-bottom: 28px; }
.sf-team-card:hover .sf-team-card__panel,
.sf-team-card:focus-within .sf-team-card__panel,
.sf-team-card.is-open .sf-team-card__panel {
	transform: translateY(0);
	background-color: var(--sf-bg-sage-light);
}
.sf-team-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-team-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-team-card:hover .sf-team-card__name,
.sf-team-card:focus-within .sf-team-card__name,
.sf-team-card.is-open .sf-team-card__name { color: var(--sf-black); }
.sf-team-card:hover .sf-team-card__title,
.sf-team-card:focus-within .sf-team-card__title,
.sf-team-card.is-open .sf-team-card__title { color: var(--sf-sage); }
.sf-team-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;
	/* Card height is fixed (aspect-ratio 4/5 above) but bio length isn't — an editor-written bio
	   with no length limit can push the panel's natural content height (peek + bio + actions)
	   past the card's own height, and since the card clips with overflow:hidden, the actions row
	   (Book with / View Profile) would silently render below the card's visible, hit-testable
	   area — present in the DOM, but "clicking does nothing" because there's nothing there to hit.
	   Clamping the bio guarantees the actions row always has room, regardless of bio length. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.sf-team-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-team-card__book,
.sf-team-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-team-card__book { color: var(--sf-black) !important; text-decoration-color: var(--sf-sage); }
.sf-team-card__book:hover { color: var(--sf-sage) !important; text-decoration-color: var(--sf-black); }
.sf-team-card__profile { color: var(--sf-sage) !important; text-decoration-color: var(--sf-sage); }
.sf-team-card__profile:hover { color: var(--sf-black) !important; text-decoration-color: var(--sf-black); }
.sf-team-card:hover .sf-team-card__bio,
.sf-team-card:focus-within .sf-team-card__bio,
.sf-team-card.is-open .sf-team-card__bio,
.sf-team-card:hover .sf-team-card__actions,
.sf-team-card:focus-within .sf-team-card__actions,
.sf-team-card.is-open .sf-team-card__actions {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .15s;
}
@media (max-width: 480px) {
	.sf-team-card__panel { padding: 20px 20px 22px; }
	.sf-membership-card { flex-direction: column; align-items: flex-start; }
	.sf-membership-card__aside { flex-direction: row; height: auto; width: 100%; justify-content: flex-start; gap: 12px; }
	.sf-membership-card__decor { display: none; }
	.sf-membership-card__meta { flex-direction: row; }
	.sf-memberships__phone { flex: 1 1 auto; justify-content: center; }
	.sf-memberships__actions { flex-direction: column; align-items: stretch; }
}

/* ===== Service hero (single-service / single-condition) ===== */
.sf-detail-hero { background: var(--sf-bg-sage-light); padding: 60px 0; }
.sf-detail-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 29px; align-items: center; }
.sf-detail-hero__title { font-family: var(--sf-font-display); font-size: clamp(28px, 4vw, 42px); font-weight: 400; margin: 0 0 20px; }
.sf-detail-hero__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sf-detail-hero__photos .sf-placeholder, .sf-detail-hero__photos img { aspect-ratio: 340/392; border-radius: var(--sf-radius-card); object-fit: cover; width: 100%; height: 100%; display: block; box-shadow: var(--sf-shadow-card); }
.sf-detail-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== Service intro tri-column ===== */
.sf-intro-section { background: var(--sf-white); }
.sf-intro-tri { display: grid; grid-template-columns: 25% 50% 25%; gap: var(--sf-gap); align-items: stretch; }
.sf-intro-tri__card {
	border: 2px solid #F1F2E5;
	border-radius: 30px;
	padding: 30px;
	background: var(--sf-white);
	text-align: left;
}
.sf-intro-tri__card--center { background: #F1EAE2; border: none; text-align: center; }
.sf-intro-tri__icon { display: block; color: var(--sf-sage); font-size: clamp(22px, 3.1vw, 32px); margin-bottom: 16px; }
.sf-intro-tri__icon-img { display: block; width: 40px; height: 40px; object-fit: contain; margin-bottom: 16px; }
.sf-intro-tri__card--center .sf-intro-tri__icon,
.sf-intro-tri__card--center .sf-intro-tri__icon-img { margin-left: auto; margin-right: auto; }
.sf-intro-tri__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 12px;
}
.sf-intro-tri__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-intro-tri__body a { color: #84886B; }
.sf-intro-tri__body a:hover { opacity: .8; }
.sf-intro-tri__center-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 20px;
}
.sf-intro-tri__center-heading em,
.sf-intro-tri__center-heading i { font-style: italic; color: rgb(154, 158, 127); }
.sf-intro-tri__center-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-intro-tri__center-body a { color: #84886B; }
.sf-intro-tri__center-body a:hover { opacity: .8; }

/* ===== Pricing grid ===== */
.sf-pricing-section { background: #F1F3E6; }
.sf-pricing-section .sf-container { text-align: center; }
.sf-pricing-section__badge {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: rgb(255, 255, 255);
}
.sf-pricing-section__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);
}
.sf-pricing-section__heading em,
.sf-pricing-section__heading i { font-style: italic; color: rgb(154, 158, 127); }
.sf-pricing-section__body {
	max-width: 700px;
	margin: 0 auto 40px;
	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-pricing-section__body a { color: #84886B; }
.sf-pricing-section__body a:hover { opacity: .8; }

.sf-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sf-gap); text-align: left; }
.sf-pricing-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.sf-pricing-grid--cols-1 { grid-template-columns: 1fr; }
.sf-price-card {
	display: block;
	background: var(--sf-white);
	border: 1px solid #F1F2E5;
	border-radius: 30px;
	padding: 30px;
	text-decoration: none;
	box-shadow: var(--sf-shadow-card);
}
.sf-price-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.sf-price-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sf-sage);
	border-radius: var(--sf-radius-pill);
	padding: 10px 22px;
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: rgb(255, 255, 255);
}
.sf-price-card__price-note {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	color: rgb(25, 25, 25);
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	margin-left: auto;
}
.sf-price-card__title {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 700;
	font-size: clamp(18px, 2.3vw, 24px);
	line-height: 28px;
	color: rgb(0, 0, 0);
	margin: 0 0 12px;
}
.sf-price-card__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-price-card__body p { margin: 0; }
.sf-price-card__body a { color: #84886B; }
.sf-price-card__body a:hover { opacity: .8; }
.sf-pricing-section__cta {
	display: inline-flex;
	margin-top: 40px;
	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-section__cta:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}

/* ===== Financing CTA ===== */
.sf-financing-section { background: #F1F3E6; padding: var(--sf-section-pad-y) 0; }
.sf-financing { background: var(--sf-sage); border-radius: var(--sf-radius-card); padding: 20px; display: flex; align-items: center; gap: var(--sf-gap); flex-wrap: wrap; color: var(--sf-white); }
.sf-financing__photo { width: 45%; height: 350px; flex-shrink: 0; border-radius: 15px; overflow: hidden; box-shadow: var(--sf-shadow-card); }
.sf-financing__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-financing__content { flex: 1; min-width: 260px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.sf-financing__cta {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(15px, 1.7vw, 18px);
	line-height: 22px;
	padding: 12px 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-financing__cta:hover {
	opacity: 1;
	background: #84886B;
	border: 1px solid var(--sf-black);
	color: var(--sf-white) !important;
}
.sf-financing__heading {
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 600;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 46px;
	color: rgb(255, 255, 255);
	margin: 0 0 16px;
}
.sf-financing__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(255, 255, 255);
	margin: 0 0 24px;
}
.sf-financing__body p { margin: 0; }

/* ===== Pre/post care ===== */
.sf-prepost-section { background: var(--sf-bg-warm-beige); padding: var(--sf-section-pad-y) 0; text-align: center; }
.sf-prepost__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 28px;
}
.sf-prepost__heading em,
.sf-prepost__heading i { font-style: italic; color: rgb(154, 158, 127); }
.sf-prepost__intro {
	max-width: 720px;
	margin: 0 auto 40px;
	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-black);
}
.sf-prepost__intro p { margin: 0; }

.sf-prepost__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; text-align: left; }
.sf-prepost__cards { display: grid; gap: 24px; }
.sf-prepost__card { display: block; background: var(--sf-white); border: 1px solid #F1F2E5; border-radius: 30px; padding: 40px; text-decoration: none; color: inherit; transition: opacity .3s ease; }
a.sf-prepost__card:hover { opacity: .85; }
.sf-prepost__card-title {
	margin: 0 0 16px;
	font-family: var(--sf-font-heading);
	font-style: normal;
	font-weight: 700;
	font-size: clamp(18px, 2.3vw, 24px);
	line-height: 28px;
	color: rgb(30, 30, 30);
}
.sf-prepost__card-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(25, 25, 25);
}
.sf-prepost__card-body p { margin: 0; }
.sf-prepost__card-body a { color: #84886B; }
.sf-prepost__card-body a:hover { opacity: .8; }

/* width:100% is load-bearing, not decorative: every child is position:absolute (see
   .sf-prepost__gallery-slide below) so this box has zero normal-flow content of its own — with
   overflow:hidden also putting it in its own block-formatting context, the browser's grid
   "stretch" alignment falls back to a 0-width fit-content basis instead of filling the 580px grid
   column, and every slide/image inside (correctly loaded) then renders at 0×height. Confirmed
   live: removing this rule collapses the gallery back to width:0. */
.sf-prepost__gallery { position: relative; width: 100%; border-radius: 30px; overflow: hidden; min-height: 400px; height: 100%; background: var(--sf-bg-warm-beige); }
/* Hand-rolled crossfade (see sf-main.js's initPrepostGallery()) — deliberate exception to the
   sitewide Swiper rule, see the comment on this markup in inc/acf-blocks.php for why. Plain
   opacity transition + `.is-active` toggled by a single setInterval; no slider library, no
   MutationObserver, nothing else watching this element — after several rounds chasing Swiper
   fade-effect/observer/autoplay-timer edge cases on this one ambient (non-interactive, no nav/
   dots/dragging) block, this sidesteps that whole class of failure by not having any of those
   mechanisms in the first place. Ken Burns is still `Element.animate()` (Web Animations API, see
   sf-main.js) rather than a CSS class+@keyframes — doesn't need a MutationObserver to avoid
   anymore, but it's still the more reliably-restarting mechanism of the two either way. */
.sf-prepost__gallery-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; z-index: 0; }
.sf-prepost__gallery-slide.is-active { opacity: 1; z-index: 1; }
.sf-prepost__gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sf-prepost__cta {
	display: inline-flex;
	margin-top: 40px;
	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-prepost__cta:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}

/* ===== Gallery ===== */
.sf-gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.sf-gallery__item { border-radius: var(--sf-radius-sm); overflow: hidden; }
.sf-gallery .sf-placeholder, .sf-gallery img { aspect-ratio: 224/361; border-radius: var(--sf-radius-sm); object-fit: cover; width: 100%; height: 100%; display: block; }

/* ===== FAQ layout ===== */
/* ===== Condition content blocks ===== */
.sf-condition-block { align-items: stretch; }
.sf-condition-block__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.sf-condition-block__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);
}
.sf-condition-block__heading em,
.sf-condition-block__heading i { font-style: italic; color: rgb(154, 158, 127); }
.sf-condition-block__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-condition-block__body p { margin: 0 0 16px; }
.sf-condition-block__ctas { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.sf-condition-block__cta {
	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-condition-block__cta:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}
.sf-condition-block__cta--call { background: #84886B; border: 1px solid #84886B; }
.sf-condition-block-section--f1f3e6 { background: #F1F3E6; }
.sf-two-col__photo--shadow { box-shadow: 0 0 10px 0 rgba(0, 0, 0, .35); }
.sf-condition-block__photos-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sf-condition-block__photo-item { height: 250px; border-radius: 30px; overflow: hidden; box-shadow: var(--sf-shadow-card); }
.sf-condition-block__photo-item img,
.sf-condition-block__photo-item .sf-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.sf-condition-block__photos-decor {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}
.sf-condition-block__photos-decor img { display: block; width: 130px; height: auto; }
.sf-condition-block__photos-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sf-condition-block__photos-two .sf-condition-block__photo-item { height: 450px; border-radius: var(--sf-radius-card); }

/* ===== Contact panel ===== */
.sf-contact-panel { position: relative; background: var(--sf-white); }
.sf-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sf-gap); align-items: center; }
.sf-contact-form-panel { border: 2px solid #F1F2E5; border-radius: 30px; overflow: hidden; padding: 20px; }
.sf-contact-form-panel iframe { width: 100%; border: none; display: block; }
.sf-contact-info { position: relative; }
.sf-contact-info__decor { position: absolute; top: 0; right: 0; }
.sf-contact-info__decor img { display: block; width: 90px; height: auto; }
.sf-contact-info__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 24px;
}
.sf-contact-info__heading em,
.sf-contact-info__heading i { font-style: italic; color: rgb(154, 158, 127); }
.sf-contact-info__heading--hours { margin-top: 40px; }
.sf-contact-info__items { margin-bottom: 24px; }
.sf-contact-info__item { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sf-contact-info__item .dashicons {
	background: var(--sf-bg-beige);
	color: var(--sf-sage);
	width: 44px;
	height: 44px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(17px, 2.1vw, 22px);
	flex-shrink: 0;
}
.sf-contact-info__item a {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
}
.sf-contact-info__item a,
.sf-contact-info__item span:not(.dashicons) {
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 500;
	font-size: clamp(18px, 2.3vw, 24px);
	line-height: 32px;
	color: rgb(25, 25, 25);
	text-decoration: none;
}
.sf-contact-info__cta {
	display: inline-flex;
	margin-bottom: 8px;
	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-contact-info__cta:hover {
	opacity: 1;
	background: #9A9E7F20;
	border: 1px solid var(--sf-black);
	color: var(--sf-black) !important;
}
.sf-contact-info__hours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sf-contact-info__hours-pill {
	background: var(--sf-black);
	border-radius: var(--sf-radius-pill);
	padding: 12px 16px;
	text-align: center;
	font-family: var(--sf-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 26px;
	color: rgb(255, 255, 255);
}

@media (max-width: 960px) {
	.sf-hero__grid, .sf-two-col, .sf-detail-hero__grid, .sf-intro-tri, .sf-prepost__grid, .sf-faqs__grid, .sf-contact-grid, .sf-page-hero__grid, .sf-memberships__grid { grid-template-columns: 1fr; }
	.sf-hero__media { order: -1; }
	/* The full-bleed-right layout only makes sense next to a second column — stacked, the media
	   goes back to being a normal contained block like every other split-image section's mobile
	   behavior, and the content column's padding drops the calc() that was aligning it to the
	   (now nonexistent) sitewide container edge. */
	.sf-memberships__grid { min-height: 0; }
	.sf-memberships__content { padding: 60px 24px; }
	.sf-memberships__media { order: -1; border-radius: var(--sf-radius-card); height: 320px; }
	.sf-hero__grid > div:first-child { text-align: center; }
	.sf-hero__cta-row { flex-direction: column-reverse; align-items: center; justify-content: center; gap: 4px; }
	.sf-hero__decor--inline { align-self: flex-end; }
	.sf-hero__body p { margin: 0 0 10px; }
	.sf-hero__body { margin-bottom: 0; }
	.sf-hero__cta { margin-top: -20px; }
	.sf-hero__cta-row { margin-top: -20px; }
	.sf-intro-section { padding-top: 30px; padding-bottom: 30px; }
	.sf-intro-tri__card--center { order: -1; }
	.sf-intro-tri__center-heading { line-height: 34px; }
	.sf-intro-tri__heading { font-size: clamp(21px, 5vw, 24px); }
	.sf-icon-cards { padding-top: 30px; padding-bottom: 30px; }
	.sf-icon-cards__heading { font-size: clamp(21px, 5.5vw, 24px); line-height: 26px; }
	.sf-price-card__title { font-size: clamp(21px, 5.5vw, 24px); line-height: 26px; }
	.sf-pricing-section { padding-top: 30px; padding-bottom: 30px; }
	.sf-pricing-section__heading { line-height: 34px; }
	.sf-pricing-carousel-section { padding-top: 30px; padding-bottom: 30px; }
	.sf-pricing-carousel__arrow--prev { left: 0; }
	.sf-pricing-carousel__arrow--next { right: 0; }
	.sf-pricing-carousel__icon-item span:not(.dashicons) { white-space: normal; }
	.sf-pricing-carousel__heading { line-height: 34px; }
	.sf-staff-grid-section { padding-top: 30px; padding-bottom: 30px; }
	.sf-staff-grid__heading { line-height: 34px; }
	.sf-financing-section { padding-top: 30px; padding-bottom: 30px; }
	.sf-financing__heading { line-height: 34px; }
	.sf-benefits { padding-top: 30px; padding-bottom: 30px; }
	.sf-benefits__heading { line-height: 34px; position: relative; z-index: 1; }
	.sf-benefits__decor-left,
	.sf-benefits__decor-badge-right,
	.sf-benefits__decor-bottom-right { z-index: 0; }
	.sf-benefits__decor-left img { width: 70px; }
	.sf-benefits__decor-badge-right img,
	.sf-benefits__decor-bottom-right img { width: 60px; }
	.sf-benefit-card { flex-direction: column; align-items: center; text-align: center; }
	.sf-prepost-section { padding-top: 30px; padding-bottom: 30px; }
	.sf-prepost__heading { line-height: 34px; }
	.sf-prepost__gallery { order: -1; height: 350px; min-height: 0; }
	.sf-prepost__card-title { font-size: clamp(21px, 5.5vw, 24px); line-height: 26px; }
	.sf-faqs-section { padding-top: 30px; padding-bottom: 30px; }
	.sf-faqs__decor img { width: 70px; }
	.sf-faqs__heading { line-height: 34px; }
	.sf-staff-grid-carousel__row { position: static; }
	.sf-staff-grid-carousel__arrow { top: auto; bottom: -18px; transform: translateY(0); }
	.sf-staff-grid-carousel__arrow--prev { left: calc(50% - 70px); right: auto; }
	.sf-staff-grid-carousel__arrow--next { right: calc(50% - 70px); left: auto; }
	.sf-ba-carousel-section { padding-top: 30px; padding-bottom: 30px; }
	.sf-ba-carousel__arrow { width: 40px; height: 40px; }
	.sf-ba-carousel__arrow--prev { left: 0; }
	.sf-ba-carousel__arrow--next { right: 0; }
	.sf-pricing-grid { grid-template-columns: repeat(2, 1fr); }
	.sf-gallery { grid-template-columns: repeat(3, 1fr); }
	/* Staff-grid/ba/team carousel slide sizing is all Swiper-driven now (sf-swiper-init.js). */
}
@media (max-width: 720px) {
	.sf-detail-hero__photos { grid-template-columns: 1fr; }
	.sf-hero__video, .sf-hero__media .sf-placeholder { height: 280px; }
	.sf-hero__decor { left: 20px; }
	.sf-hero__decor img { width: 60px; }
	.sf-hero { padding-top: 30px; padding-bottom: 30px; }
	.sf-services__decor { left: 20px; }
	.sf-services__decor img { width: 60px; }
	.sf-testimonials { padding-top: 30px; padding-bottom: 30px; }
	.sf-testimonials__decor { left: 20px; }
	.sf-testimonials__decor img { width: 60px; }
	.sf-team { padding-top: 30px; padding-bottom: 30px; }
	.sf-team__heading { line-height: 34px; }
	.sf-team-carousel__arrow { width: 40px; height: 40px; }
	.sf-footer-contact { padding-top: 30px; padding-bottom: 30px; }
	.sf-footer-contact__left,
	.sf-footer-contact__form { text-align: center; }
	.sf-footer-contact__map { flex: none; height: 300px; }
	.sf-footer-contact__heading { font-size: clamp(30px, 6.5vw, 42px); }
	.sf-footer-contact__heading br { display: none !important; }
	.sf-product-tabs__grid { margin-bottom: 32px; }
	.sf-product-tabs-section { padding-top: 30px; padding-bottom: 30px; }
	.sf-product-tabs__card-image { height: 220px; }
	.sf-product-tabs__accordion-btn { justify-content: center; border-color: var(--sf-black); }
	.sf-product-tabs__accordion-icon { display: none; }
	.sf-page-hero--split { padding-top: 30px; padding-bottom: 30px; text-align: center; }
	.sf-page-hero--split .sf-page-hero__grid { gap: 40px; }
	.sf-page-hero--split .sf-page-hero__heading-col { justify-content: center; }
	.sf-footer-contact__heading { white-space: normal; }
	.sf-hero__heading,
	.sf-two-col__heading,
	.sf-services__heading,
	.sf-testimonials__heading { line-height: 34px; }
	.sf-two-col__photo { height: 350px; }
	.sf-two-col--tall-image .sf-two-col__photo { height: 400px; }
	.sf-switch-cta-wrap { padding-top: 30px; padding-bottom: 30px; }
	.sf-switch-cta, .sf-switch-cta--centered { padding: 30px; margin: 0 auto; }
	.sf-switch-cta__heading--centered { color: var(--sf-white) !important; font-size: clamp(36px, 9vw, 48px); line-height: 40px; }
	.sf-heading-cta { line-height: 40px; }
	.sf-blog-grid-section { padding-top: 30px; padding-bottom: 30px; }
	.sf-blog-card__body { padding: 20px 16px 24px; }
	.sf-blog-card__title a { font-size: clamp(20px, 5.5vw, 24px); line-height: 24px; width: 100%; display: block; }
	.sf-blog-card__excerpt { width: 100%; }
	.sf-post-hero__left { text-align: center; }
	.sf-post-hero__meta { flex-wrap: nowrap; justify-content: center; gap: 10px; }
	.sf-post-hero__title { line-height: 34px; width: 100%; }
	.sf-post-hero__cta { align-self: center; }
	.sf-post-layout { padding: 30px 20px; }
	.sf-post-toc__body h2 { font-size: clamp(24px, 6vw, 32px); line-height: 30px; }
	.sf-post-toc__body h3 { font-size: clamp(22px, 5.5vw, 28px); line-height: 28px; }
	.sf-post-toc__body h4 { font-size: clamp(19px, 5vw, 22px); line-height: 26px; }
	.sf-switch-cta__body--centered { color: var(--sf-white) !important; font-size: clamp(20px, 5vw, 26px); }
	.sf-heading-cta { font-size: clamp(36px, 9vw, 48px); }
	.sf-switch-cta__body p { font-size: clamp(16px, 4vw, 18px); }
	.sf-two-col__content { text-align: center; }
	.sf-section:has(> .sf-container.sf-two-col) { padding-top: 30px; padding-bottom: 30px; }
	.sf-pricing-grid { grid-template-columns: 1fr; }
	.sf-gallery { grid-template-columns: repeat(2, 1fr); }
	.sf-financing { flex-direction: column; text-align: center; }
	.sf-financing__photo { width: 100%; height: 260px; }
	.sf-financing__content { align-items: center; }
	.sf-contact-info__hours { grid-template-columns: 1fr; }
	.sf-contact-panel { padding-top: 30px; padding-bottom: 30px; }
	.sf-benefits__grid { grid-template-columns: 1fr; }
	.sf-staff-hero__grid { grid-template-columns: 1fr; min-height: 0; }
	.sf-staff-hero__content { padding: 40px 20px; }
	.sf-staff-hero__photo { min-height: 320px; }
	.sf-expertise-trust { grid-template-columns: 1fr; }
	.sf-expertise-trust__left-grid { grid-template-columns: 1fr; }
}

/* ===== Swiper watchOverflow lock — hide nav/dots when a carousel has too few slides to page
   through (site-wide, all 4 sfInitSwiper() carousels: team/pricing-carousel/staff-grid/ba-carousel).
   `watchOverflow:true` (sf-swiper-init.js) already makes Swiper apply `.swiper-button-lock` /
   `.swiper-pagination-lock` to the exact nav/dots elements passed in as `nextEl`/`prevEl`/`el` —
   confirmed live (Staff Grid on the Laser Hair Removal page, 1 real slide, isLocked:true, both
   classes present) — and swiper-bundle.min.css declares `display:none` for both. But every
   carousel's own `.sf-*-carousel__arrow`/`__dots` rule ALSO sets `display:flex` at the exact same
   specificity (0,1,0), and because those theme rules load after swiper.css in the cascade (by
   design, see functions.php's enqueue-order comment), the tie silently resolves to the theme's
   `flex` every time — Swiper's own lock CSS never wins, so a locked carousel's nav/dots stayed
   visible and non-functional instead of disappearing. Fixed with a double-class override (0,2,0)
   that outranks both regardless of load order, placed last in the cascade (end of sf-pages.css, the
   final theme stylesheet enqueued) so it isn't itself at risk of losing a future same-specificity
   tie to an earlier-loading rule. */
.sf-team-carousel__arrow.swiper-button-lock,
.sf-pricing-carousel__arrow.swiper-button-lock,
.sf-staff-grid-carousel__arrow.swiper-button-lock,
.sf-ba-carousel__arrow.swiper-button-lock { display: none; }
.sf-team-carousel__dots.swiper-pagination-lock,
.sf-pricing-carousel__dots.swiper-pagination-lock,
.sf-staff-grid-carousel__dots.swiper-pagination-lock,
.sf-ba-carousel__dots.swiper-pagination-lock { display: none; }

/* ===== 404 Not Found ===== */
.sf-404-hero {
	position: relative;
	background: var(--sf-bg-sage-light);
	padding: 100px 0 80px;
	text-align: center;
	overflow: hidden;
}
.sf-404-hero__decor {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--sf-sage);
	opacity: .35;
	z-index: 0;
}
/* Same AOS-permanent-transform fix as .sf-page-hero__decor: an end-state override at equal-or-
   higher specificity than AOS's own attribute-doubled zoom rule, so the reveal can't erase the
   centering once the entrance animation completes. */
body .sf-404-hero__decor.aos-animate[data-aos] {
	transform: translate(-50%, -50%) scale(1);
}
.sf-404-hero__inner { position: relative; z-index: 1; max-width: 640px; }
.sf-404-hero .sf-badge { margin-bottom: 20px; }
.sf-404-hero__title {
	font-family: var(--sf-font-heading);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.15;
	color: var(--sf-dark);
	margin: 0 0 16px;
}
.sf-404-hero__body {
	font-size: clamp(15px, 1.7vw, 17px);
	line-height: 1.6;
	color: var(--sf-dark);
	opacity: .8;
	margin: 0 0 32px;
}
.sf-404-hero__actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

.sf-404-links__heading { text-align: center; margin: 0 0 44px; }
.sf-404-links__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sf-404-links__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--sf-white);
	border-radius: var(--sf-radius-sm);
	box-shadow: var(--sf-shadow-card);
	padding: 28px 24px;
	text-decoration: none;
	transition: box-shadow .3s ease, transform .3s ease;
}
.sf-404-links__card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .14); transform: translateY(-4px); }
.sf-404-links__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--sf-bg-sage-light);
	color: var(--sf-sage);
	margin-bottom: 20px;
}
.sf-404-links__label {
	font-family: var(--sf-font-heading);
	font-weight: 600;
	font-size: 18px;
	color: var(--sf-dark);
	margin-bottom: 6px;
}
.sf-404-links__desc { font-size: 14px; line-height: 1.5; color: var(--sf-dark); opacity: .7; }

@media (max-width: 900px) {
	.sf-404-links__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.sf-404-hero { padding: 70px 0 56px; }
	.sf-404-hero__decor svg { width: 56px; height: 56px; }
	.sf-404-hero__actions { flex-direction: column; align-items: stretch; }
	.sf-404-links__grid { grid-template-columns: 1fr; }
}