/*
Theme Name: Center for Dental Excellence
Template: fgmatchbox
Author: Firegang Dental Marketing
Description: Thin per-client brand layer (Tier-1). Brand tokens in :root below; no build required.
Version: 1.0
*/

/* ============================================================
   BRAND TOKENS  —  override the parent (kindling) contract
   Palette: Black #1F1F1F · Grey #747678 · Blue #3967A8
            Light Blue #6AA7FD · Light Grey #E3E4E4 · White
   Fonts:   Mona Sans (body) / Mona Sans Expanded (headings)
   ============================================================ */
:root {
	/* Colors */
	--black: #1f1f1f;
	--white: #ffffff;
	--gray: #747678;
	--ltGray: #e3e4e4;
	--ltBlue: #6aa7fd;
	--primaryColor: #3967a8;
	--primaryHover: #1f1f1f;
	--secondaryColor: #6aa7fd;
	--secondaryHover: #ffffff;

	/* Fonts (real webfont loaded via ACF Theme Settings web_font_url) */
	--bodyFont: "Mona Sans", Arial, sans-serif;
	--headingFont: "Mona Sans", Arial, sans-serif;
	--bodyFontWeight: 400;
	--headingFontWeight: 500;
	--btnFontWeight: 500;

	/* Type scale — desktop ends per style guide; mobile ends first-pass (verify at style-out) */
	--dispFontSize: clamp(40px, 4.375vw, 84px);
	--h2FontSize: clamp(28px, 2.292vw, 44px);
	--h3FontSize: clamp(22px, 1.458vw, 28px);
	--h4FontSize: clamp(20px, 1.25vw, 24px);
	--bodyFontSize: clamp(16px, 0.9375vw, 18px);

	/* Line heights */
	--dispLineHeight: 1.25;
	--h2LineHeight: 1.15;
	--h3LineHeight: 1.25;
	--h4LineHeight: 1.25;
	--bodyLineHeight: 1.5;
	--headingLineHeight: 1.15;

	/* Letter spacing (mockup %→em) */
	--h4LetterSpc: 0.05em;
	--btnLetterSpc: 0.15em;

	/* Shape — mockup buttons are square (nav CTA has no radius) */
	--btnBorderRadius: 0px;
}

/* Grayscale anti-aliasing (what Figma and iOS render) — macOS desktop browsers
   otherwise subpixel-render Mona Sans visibly heavier, worst as white-on-black
   (Ali QA: desktop body copy thicker than the mockup, mobile correct) */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Mona Sans Expanded = width axis 125% (headings + overline buttons); body stays normal width. */
h1,
h2,
h3,
h4,
h5,
h6,
.disp,
.promo h1,
.promo h2 {
	font-stretch: 125%;
	letter-spacing: 0.05em;
}
.btn,
button,
input[type="submit"] {
	font-stretch: 125%;
}

/* ============================================================
   HEADER / NAV
   Home load = transparent over hero, white content, white-25% rule.
   Header hover / page scroll = white bg, blue content, logo swaps.
   ============================================================ */
#header {
	background: transparent;
	padding: 0;
	border-bottom: 2px solid rgba(255, 255, 255, 0.25);
	transition:
		background-color 0.35s ease,
		border-color 0.35s ease;
}
#header .header-holder {
	width: calc(100% - clamp(64px, 14.583vw, 280px));
	max-width: none;
	margin: 0 auto;
	padding: 24px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/* Logo — duo crossfade (_alt on load, _color on hover/scroll).
   Kindling forces width→clamp(…,320px) + both logos absolute in a fixed 132px box; out-specify it:
   263px high end, main logo in-flow so its box wraps it → the contact/nav column sets the header height. */
#header .logo-block {
	width: auto;
	flex: 0 0 auto;
	padding: 0;
}
#header .header-holder .logo-block .sLogo {
	position: relative;
	line-height: 0;
	height: auto;
}
#header #logo {
	display: inline-block;
	position: relative;
	line-height: 0;
	height: auto;
}
#header #logo #mLogo,
#header #logo #scLogo {
	width: clamp(150px, 13.698vw, 263px);
	height: auto;
	display: block;
	transition: opacity 0.35s ease;
}
#header #logo #mLogo {
	position: static;
	transform: none;
}
#header #scLogo {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
/* Right stack: contact row over nav row, right-aligned */
#header .locNavBtns {
	width: auto;
	flex: 0 1 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 24px;
}
/* Contact row */
#header .conBlock {
	display: flex;
	align-items: center;
	gap: 48px;
	width: auto;
	margin: 0;
	padding: 0;
}
#header .headAdd,
#header .phoneBlock {
	display: flex;
	align-items: center;
	margin: 0;
}
#header .headAdd {
	gap: 16px;
}
#header .phoneBlock {
	gap: 14px;
}
#header .headAdd a,
#header .phoneBlock a {
	font-family: var(--bodyFont);
	font-stretch: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--white);
	text-decoration: none;
	transition: color 0.35s ease;
}
#header .headAdd i,
#header .phoneBlock i {
	color: var(--white);
	font-size: 18px;
	margin: 0;
	transition: color 0.35s ease;
}
/* Nav row */
#header .navBtns {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(24px, calc(3.75vw - 23px), 48px);
	width: auto;
	margin: 0;
}
#header #mainNav {
	width: auto;
}
#header #nav {
	display: flex;
	align-items: center;
	gap: clamp(24px, calc(3.75vw - 23px), 48px);
	margin: 0;
	padding: 0;
	list-style: none;
}
#header #nav li {
	margin: 0;
	padding: 0;
}
/* Top-level nav links only (> li > a) — do NOT bleed into sub-menu links, which keep the framework's dropdown styling */
#header #nav > li > a {
	position: relative;
	display: inline-block;
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--btnFontWeight);
	font-size: clamp(14px, 0.833vw, 16px);
	line-height: 1.5;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--white);
	text-decoration: none;
	padding: 14px 0;
	transition: color 0.35s ease;
}
#header #nav > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--primaryColor);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s ease;
}
#header #nav > li > a:hover::after,
#header #nav > li.current-menu-item > a::after {
	transform: scaleX(1);
}
/* Dropdown panel flush at the item's bottom so the hovered item's underline stays visible (framework default overlaps it by -4px). No gap keeps the display:none hover intact. */
#header #nav .sub-menu {
	top: 100%;
}
/* 3rd-level fly-outs start level with their parent item (the rule above also
   hit them, dropping each fly-out one row below its parent) */
#header #nav .sub-menu .sub-menu {
	top: 0;
}
/* dropdown carets: ▾ after top-level parents (in the 48px item gap, outside the
   link so the hover underline keeps the text width), ▸ on fly-out parents.
   Desktop only — reset at ≤1024 (the drawer has its own chevrons). */
#header #nav > li.menu-item-has-children > a::before,
#header #nav .sub-menu > li.menu-item-has-children > a::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	pointer-events: none;
}
#header #nav > li.menu-item-has-children > a::before {
	right: -16px;
	transform: translateY(-75%) rotate(45deg);
}
#header #nav .sub-menu > li.menu-item-has-children > a {
	position: relative;
	flex: 1 1 auto;
	padding-right: clamp(32px, 2.083vw, 40px);
}
#header #nav .sub-menu > li.menu-item-has-children > a::after {
	right: 20px;
	transform: translateY(-50%) rotate(-45deg);
}
/* Book Now wrapper: kill the framework's 12px side padding so the button's right edge aligns with the phone/address above it (and the nav→button gap is the clean 48px) */
#header .navBtns .btn-block {
	padding-left: 0;
	padding-right: 0;
}
/* Book Now button */
#header .navBtns .opener-form .btn.btn-primary {
	position: relative;
	overflow: hidden;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	color: var(--primaryColor);
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--btnFontWeight);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	border: none;
	border-radius: 0;
	padding: 16px clamp(22px, 1.68vw, 32px);
	transition:
		background-color 0.35s ease,
		color 0.35s ease;
}
#header .navBtns .opener-form .btn.btn-primary::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--black);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}
#header .navBtns .opener-form .btn.btn-primary:hover {
	color: var(--white);
}
#header .navBtns .opener-form .btn.btn-primary:hover::before {
	transform: scaleX(1);
}
/* keyboard focus ring INSIDE the button — the wrapper's overflow:hidden clips an
   outer ring; currentColor keeps it visible in both header states (WCAG 2.4.7) */
#header .navBtns .opener-form .btn.btn-primary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -6px;
	box-shadow: none;
}
/* Hover / scrolled (body.scrolled) = white header + blue content + logo swap */
#header:hover,
body.scrolled #header {
	background-color: var(--white);
	border-bottom-color: var(--ltGray);
}
#header:hover #mLogo,
body.scrolled #header #mLogo {
	opacity: 0;
}
#header:hover #scLogo,
body.scrolled #header #scLogo {
	opacity: 1;
}
/* hover/scroll: the contact ICONS go blue (matches interior header) */
#header:hover .headAdd i,
#header:hover .phoneBlock i,
body.scrolled #header .headAdd i,
body.scrolled #header .phoneBlock i {
	color: var(--primaryColor);
}
/* hover/scroll: nav links + address/phone TEXT go black (matches interior header); the nav underline stays blue */
#header:hover #nav > li > a,
#header:hover .headAdd a,
#header:hover .phoneBlock a,
body.scrolled #header #nav > li > a,
body.scrolled #header .headAdd a,
body.scrolled #header .phoneBlock a {
	color: var(--black);
}
#header:hover .headAdd a:hover,
#header:hover .phoneBlock a:hover,
body.scrolled #header .headAdd a:hover,
body.scrolled #header .phoneBlock a:hover {
	text-decoration: underline;
}
#header:hover .navBtns .opener-form .btn.btn-primary,
body.scrolled #header .navBtns .opener-form .btn.btn-primary {
	background: var(--primaryColor);
	color: var(--white);
}

/* ============================================================
   INTERIOR HEADER — solid by default (no hero behind it, unlike the home header).
   Interior mockup 3715:1780 = white bg + medium drop shadow (NOT the home border
   line), _color logo, blue contact icons, black address/phone + nav links, blue
   Book Now. = the home "scrolled" state, applied to every non-home page at all
   scroll positions. Desktop-only elements (logo crossfade, desktop nav/contact)
   are hidden on mobile so these no-op there; the ≤1024 block clears the shadow so
   mobile keeps just the header-holder shadow.
   ============================================================ */
body:not(.home) #header {
	background-color: var(--white);
	border-bottom: none;
	box-shadow: none;
}
/* shadow only once the page scrolls, and softer than the mockup's medium (Ali QA) */
body.scrolled:not(.home) #header {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
body:not(.home) #header #mLogo {
	opacity: 0;
}
body:not(.home) #header #scLogo {
	opacity: 1;
}
body:not(.home) #header .headAdd i,
body:not(.home) #header .phoneBlock i {
	color: var(--primaryColor);
}
body:not(.home) #header #nav > li > a,
body:not(.home) #header .headAdd a,
body:not(.home) #header .phoneBlock a {
	color: var(--black);
}
body:not(.home) #header .navBtns .opener-form .btn.btn-primary {
	background: var(--primaryColor);
	color: var(--white);
}

/* ============================================================
   INTERIOR HERO — .promo.bar.bar-title (interior page banner). Full-width photo
   (client request, Ali 10/5): the parent's full-bleed absolute image stays; the copy
   sits on top in white across the full width between the 140 insets. Ali baked the
   darkening gradient into the photos, so no overlay. The parent interior_style.min.css
   loads AFTER the child → body-prefix to out-specify it. Keep its column-reverse +
   space-between (DOM = title→breadcrumb, so reversed = breadcrumb on top / title on
   the bottom). `.promo.bar.bar-title` is interior-only.
   ============================================================ */
/* copy layer — full width, transparent; breadcrumb 32 from top, title 56 from bottom */
body .promo.bar.bar-title .ban-content {
	width: 100%;
	max-width: none;
	background: none;
	padding-top: 32px;
	padding-bottom: 56px;
	padding-inline: clamp(24px, 7.292vw, 140px);
}
/* title box spans the full width between the 140 insets (parent .tWrap is 55%) */
body .promo.bar.bar-title .tWrap {
	width: 100%;
}
/* page title → white, Expanded Medium, uppercase */
body .promo.bar.bar-title .tWrap h1,
body .promo.bar.bar-title .tWrap h2 {
	color: var(--white);
	font-weight: var(--headingFontWeight);
	font-stretch: 125%;
	letter-spacing: 0.05em;
}
body .promo.bar.bar-title .breadcrumbs-block,
body .promo.bar.bar-title .breadcrumbs-block a {
	color: var(--white);
}
/* soft halo keeps the white copy legible where it crosses bright sky in the photos */
body .promo.bar.bar-title .ban-content {
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   HERO — static_promo_banner  (Figma: desktop 1920×940 = 2849-11908,
   mobile 390×480 = 2849-11854)
   ⚠️ static_promo_banner.min.css loads AFTER this child sheet and
   overrides .promo at equal specificity — so the module box, gradient
   overlay, heading tracking/stroke and the grid-centered copy container
   are all body-prefixed here to win. (Section defaults it fights:
   height 43.555vw, a flat rgba(41,41,41,.5) wash, letter-spacing 6px +
   1px text-stroke, and .container as a vertically-centered 85% grid.)
   ============================================================ */
body .promo {
	position: relative;
	height: min(48.958vw, 940px);
	padding-top: 0;
	overflow: hidden;
}
.promo .promoBg,
.promo .promoBg picture {
	position: absolute;
	inset: 0;
}
.promo .promoBg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Overlay: 35% wash + bottom fade to #1F1F1F (verbatim from mockup) — beats the section's flat rgba(41,41,41,.5) */
body .promo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	pointer-events: none;
	background-color: transparent;
	background-image:
		linear-gradient(180deg, rgba(31, 31, 31, 0) 50%, rgb(31, 31, 31) 100%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%);
}
/* Ken Burns (Ali, client "background photos in motion"): the 2120-wide sources carry 100px of
   bleed per side, so the drift stays at or under native resolution. Hero home + interior. */
body .promo .promoBg img,
body .promo.bar.bar-title .ban-image .pImg img {
	transform-origin: 50% 50%;
	animation: cdeKenBurns 24s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes cdeKenBurns {
	from {
		transform: scale(1.1) translate(0, 0);
	}
	to {
		transform: scale(1.06) translate(-2.5%, 1.5%);
	}
}
/* Copy block: bottom-left, aligned to the site gutter (mockup left 141 ≈ 140 gutter), 140 from bottom */
body .promo .promo-holder {
	position: absolute;
	inset: 0;
	z-index: 7;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
body .promo .promo-holder .container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: calc(100% - clamp(64px, 14.583vw, 280px));
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0 0 clamp(64px, 7.292vw, 140px);
}
body .promo .slide_content {
	width: 100%;
	max-width: none;
	display: block;
	margin: 0;
	padding: 0;
	text-align: left;
}
body .promo .slide_content .col-lg-10 {
	width: 100%;
	max-width: none;
	display: block;
	margin: 0;
	padding: 0;
	text-align: left;
}
/* Heading — kill the section's 6px tracking + 1px white text-stroke (mockup: Mona Sans Expanded Medium, 0.05em, no stroke) */
body .promo h2.banH {
	display: inline-block;
	width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: 0;
	color: var(--white);
	text-align: left;
	letter-spacing: 0.05em;
	-webkit-text-stroke: 0;
	text-stroke: 0;
}
/* Display (.hl1 + .hl2>.hl2w) 84px + subtitle (.hsub>.hrule+.hsubt) 28px, baseline-shared with "Differently" */
.promo .banH .hl1,
.promo .banH .hl2w {
	display: block;
	font-size: var(--dispFontSize);
	line-height: var(--dispLineHeight);
}
.promo .banH .hl2 {
	display: flex;
	align-items: baseline;
	gap: 24px;
}
.promo .banH .hl2w {
	flex: 0 0 auto;
}
.promo .banH .hsub {
	display: flex;
	align-items: flex-end;
	gap: 24px;
	flex: 1 1 auto;
}
.promo .banH .hrule {
	flex: 1 1 auto;
	height: 2px;
	margin-bottom: 8px;
	background: var(--white);
}
.promo .banH .hsubt {
	flex: 0 0 auto;
	font-size: clamp(16px, 1.458vw, 28px);
	line-height: 1.25;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

/* ============================================================
   DIFFERENTIATOR BAR — homepage new_diff (.diff) + interior widget (.widget-diff)
   Dark #1F1F1F band; per block: 80px icon → 32px → two centered checklist rows.
   Shared rules — the widget has NO .spWrap, so target both the section's .spWrap
   and the widget's .diffBox as the icon→checklist column (structure-independent).
   Mockup: desktop 2871:1586 (pad 140, row gap 85, text 18) · mobile 2849:11858 (pad 100/32, stacked gap 48, text 16).
   ============================================================ */
.diff,
.widget.widget-diff {
	background: var(--black);
	padding: clamp(100px, 7.292vw, 140px) 0;
}
/* section heading — reciprocal diff_heading (renders .diff .heading>h1 on the
   homepage / .widget-diff .heading>h2 on interior). Homepage diff_heading is
   currently EMPTY (mockup shows none), but the interior mockup (2871:1620)
   shows "DENTIST IN NASHUA, NH" = H3-Subheader (28 Expanded Medium UPPERCASE,
   white, centered). Styled for both so it's correct wherever populated.
   ⚠️ ONE shared reciprocal field drives both — see the resume note (James's
   call: populate + CSS-hide on home, or leave empty). Inert while empty. */
.diff .heading,
.widget.widget-diff .heading {
	margin: 0 0 clamp(40px, 2.917vw, 56px);
	text-align: center;
}
.diff .heading h1,
.diff .heading h2,
.widget.widget-diff .heading h1,
.widget.widget-diff .heading h2 {
	margin: 0;
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--headingFontWeight);
	font-size: var(--h3FontSize);
	line-height: var(--h3LineHeight);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--white);
}
/* HOMEPAGE ONLY: hide the diff-bar heading — the hero already says "Dentist in
   Nashua, NH", so it's redundant on the homepage. The interior diff WIDGET
   (.widget-diff, no `.diff` class + no body.home) keeps it — it's the only
   place it shows. (James 2026-09-23.) The reciprocal `diff_fields.diff_heading`
   stays populated so the widget's h2 renders; this just visually removes the
   homepage section's h1. */
body.home .diff .heading {
	display: none;
}
/* 3 blocks laid out centered with a fluid 85px gap (kills the Bootstrap row gutter) */
.diff .row.flex,
.widget.widget-diff .row.flex {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(40px, 4.427vw, 85px);
	margin: 0;
}
/* blocks = equal thirds of the row, content centered in each (content-width
   blocks read as squished together — Ali QA 2026-09-24) */
.diff .diffBox,
.widget.widget-diff .diffBox {
	width: auto;
	max-width: none;
	flex: 1 1 0;
	margin: 0;
	padding: 0;
}
/* icon → checklist column (section = .spWrap, widget = .diffBox) */
.diff .diffBox > .spWrap,
.widget.widget-diff .diffBox {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}
/* icon 80×80 (SVG carries the blue circle) */
.diff .diffImg,
.widget.widget-diff .diffImg {
	line-height: 0;
}
.diff .diffImg img,
.widget.widget-diff .diffImg img {
	width: 80px;
	height: 80px;
	display: block;
	margin: 0 auto;
}
.diff .diffContent,
.widget.widget-diff .diffContent {
	margin: 0;
	padding: 0;
}
/* checklist: two rows, 24px apart, each centered */
.diff .diffList,
.widget.widget-diff .diffList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.diff .diffList li,
.widget.widget-diff .diffList li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	font-family: var(--bodyFont);
	font-stretch: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: var(--white);
	white-space: nowrap;
}
.diff .diffList li::before,
.widget.widget-diff .diffList li::before {
	content: none;
}
.diff .diffList li a,
.widget.widget-diff .diffList li a {
	color: var(--white);
	text-decoration: none;
}
.diff .diffList li a:hover,
.widget.widget-diff .diffList li a:hover {
	text-decoration: underline;
}
.diff .diffList li i.fa-check,
.widget.widget-diff .diffList li i.fa-check {
	flex: 0 0 auto;
	color: var(--white);
	font-size: 18px;
	line-height: 1;
}

/* ============================================================
   NEWS BLOCK 1 — fw_content_half #news1 (photo RIGHT / copy LEFT)
   Mockup: desktop 5238:1158 · mobile 5276:4323.
   ⚠️ fw_content_half.min.css loads AFTER this child sheet and hardcodes #news1
   rules (padding:0, nImgRt img 560px, vertically-centered text) at BOTH desktop
   and ≤1024 — so every #news1 rule here is body-prefixed to out-specify it.
   Desktop row inside the 1640 container: [copy 536, bottom-aligned] — gap 154 —
   [square 812² photo w/ drop-shadow], packed right (row-reverse keeps photo on
   the right; the free space falls left so the copy indents to the mockup's pl-280).
   Decorative SVGs: ::before = white-mountain band (top, full-width),
   ::after = dark-pine cluster (bottom-right). The photo slides in UNDER the pines.
   Diff bar ↔ News 1 seamless: the section tucks 1px under the Diff bar and its
   background carries a 4px black top strip (the boundary sits on a fractional y
   and anti-aliased to a grey hairline).
   ============================================================ */
body #news1.half-content {
	position: relative;
	z-index: 0;
	margin-top: -1px;
	padding: clamp(100px, 7.292vw, 140px) 0;
	overflow: hidden;
	background: linear-gradient(var(--black) 0 4px, var(--white) 4px);
}
/* white-mountain band, full-width at the top (decorative, behind the photo) */
body #news1::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1920 / 546;
	background: url("/wp-content/uploads/2026/09/news_block_bg_graphic_a.svg") top
		center / 100% 100% no-repeat;
	z-index: 1;
	pointer-events: none;
}
/* dark-pine cluster, bottom-right (~880 wide, left calc(50% + 81px)); the photo tucks under it */
body #news1::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: calc(50% + 81px);
	width: min(45.833vw, 880px);
	aspect-ratio: 879 / 480;
	background: url("/wp-content/uploads/2026/09/news_block_bg_graphic_b.svg")
		bottom right / contain no-repeat;
	z-index: 101;
	pointer-events: none;
}
/* row: keep the framework's row-reverse (photo right, copy left); pack right so the
   free space lands on the left and the copy indents to pl-280; add the 154 gap */
body #news1 .container {
	justify-content: flex-start;
	align-items: stretch;
	gap: min(8.021vw, 154px);
}
/* copy column — 536 wide, bottom-aligned (justify-end) with the mockup's 140 bottom inset */
body #news1 .text.nTxtLt {
	flex: 0 0 auto;
	width: min(27.917vw, 536px);
	max-width: none;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 0 0 min(7.292vw, 140px);
	text-align: left;
	z-index: 2;
}
body #news1 .text.nTxtLt > div {
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
body #news1 .text.nTxtLt h2 {
	display: block;
	margin: 0 0 32px;
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--headingFontWeight);
	font-size: clamp(32px, 2.292vw, 44px);
	line-height: var(--h2LineHeight);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: inherit;
}
body #news1 .text.nTxtLt p {
	margin: 0;
	font-family: var(--bodyFont);
	font-stretch: normal;
	font-weight: 400;
	font-size: var(--bodyFontSize);
	line-height: var(--bodyLineHeight);
	color: inherit;
}
/* photo column — square 812² with drop-shadow; above the mountain band, under the pines */
body #news1 .image.nImgRt {
	flex: 0 0 auto;
	width: min(42.292vw, 812px);
	max-width: none;
	height: auto;
	padding: 0;
	float: none;
	z-index: 2;
	overflow: visible;
}
body #news1 .image.nImgRt picture {
	display: block;
	width: 100%;
	line-height: 0;
}
body #news1 .image.nImgRt img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	float: none;
	border-radius: 0;
	box-shadow:
		0 50px 60px rgba(0, 0, 0, 0.05),
		0 30px 40px rgba(0, 0, 0, 0.1);
}
/* scroll reveal (framework slidein.min.js adds .active in view). Classes set via ACF:
   left_id="nImgRt slide-in" (the COLUMN) + right_id="nTxtLt slide-in" (copy col).
   🔴 .slide-in MUST sit on the in-place COLUMN, not the photo — IntersectionObserver
   watches the TRANSFORMED box, and a photo pushed fully off-screen (translateX 120%)
   never intersects, so the observer never fires. So: observe the stable column, and
   slide the inner <picture> via the column's .active. */
body #news1 .image.nImgRt.slide-in {
	opacity: 1;
	transform: none;
}
body #news1 .image.nImgRt.slide-in picture {
	transform: translateX(120%);
	transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
body #news1 .image.nImgRt.slide-in.active picture {
	transform: translateX(0);
}
body #news1 .text.nTxtLt.slide-in {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.8s ease 0.15s,
		transform 0.8s ease 0.15s;
}
body #news1 .text.nTxtLt.slide-in.active {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   NEWS BLOCK 2 — fw_content_half #news2 (photo LEFT / copy RIGHT)
   Figma 5245:2071: DARK section (#1F1F1F), photo 812² left, WHITE copy right
   (bottom-aligned, pb140), gap 154 — NO decorative graphics (unlike News 1).
   Same body-prefix + Bootstrap-in-flex neutralizers + slide-in-on-the-COLUMN rules.
   Photo slides in from off-screen LEFT; copy fades up.
   ============================================================ */
body #news2.half-content {
	position: relative;
	z-index: 0;
	padding: clamp(100px, 7.292vw, 140px) 0;
	overflow: hidden;
	background: var(--black);
}
/* row: normal direction, pack left (photo flush to the left gutter, copy indents from the right); 154 gap */
body #news2 .container {
	justify-content: flex-start;
	align-items: stretch;
	gap: min(8.021vw, 154px);
}
/* copy column — 536 wide, bottom-aligned with the mockup's 140 bottom inset (right side) */
body #news2 .text.nTxtRt {
	flex: 0 0 auto;
	width: min(27.917vw, 536px);
	max-width: none;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 0 0 min(7.292vw, 140px);
	text-align: left;
	z-index: 2;
}
body #news2 .text.nTxtRt > div {
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
body #news2 .text.nTxtRt h2 {
	display: block;
	margin: 0 0 32px;
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--headingFontWeight);
	font-size: clamp(32px, 2.292vw, 44px);
	line-height: var(--h2LineHeight);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: inherit;
}
body #news2 .text.nTxtRt p {
	margin: 0;
	font-family: var(--bodyFont);
	font-stretch: normal;
	font-weight: 400;
	font-size: var(--bodyFontSize);
	line-height: var(--bodyLineHeight);
	color: inherit;
}
/* photo column — square 812² with drop-shadow; above the mountain band, under the pines */
body #news2 .image.nImgLt {
	flex: 0 0 auto;
	width: min(42.292vw, 812px);
	max-width: none;
	height: auto;
	padding: 0;
	float: none;
	z-index: 2;
	overflow: visible;
}
body #news2 .image.nImgLt picture {
	display: block;
	width: 100%;
	line-height: 0;
}
body #news2 .image.nImgLt img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	float: none;
	border-radius: 0;
	box-shadow:
		0 50px 60px rgba(0, 0, 0, 0.05),
		0 30px 40px rgba(0, 0, 0, 0.1);
}
/* scroll reveal (.slide-in on the in-place COLUMN; slide the inner <picture>): photo slides
   in from off-screen LEFT, copy fades up. Classes: left_id / right_id (see News 1 note). */
body #news2 .image.nImgLt.slide-in {
	opacity: 1;
	transform: none;
}
body #news2 .image.nImgLt.slide-in picture {
	transform: translateX(-120%);
	transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
body #news2 .image.nImgLt.slide-in.active picture {
	transform: translateX(0);
}
body #news2 .text.nTxtRt.slide-in {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.8s ease 0.15s,
		transform 0.8s ease 0.15s;
}
body #news2 .text.nTxtRt.slide-in.active {
	opacity: 1;
	transform: translateY(0);
}

/* ============================================================
   FEATURED SERVICES — specialties (.specialties), Figma 5245:2355 / mobile 5276:4368
   White section, 3 cards across (474 image + 32 → title), py-140, gap ~108 (space-between).
   Each card: portrait photo, B&W (grayscale filter) → COLOR on hover + a 2px line grows
   from the title's end to the image's right edge. Title = Mona Sans Expanded Medium 28
   uppercase #1F1F1F, left-aligned. ⚠️ specialties.min.css loads after → body-prefix.
   (Parent defaults are the inverse: dark bg, white centered titles, 80px icon images,
   240/300 padding, .specialLink as a button — all overridden below.)
   ============================================================ */
body .specialties {
	background: var(--white);
}
body .specialties .container {
	padding: clamp(100px, 7.292vw, 140px) 0;
}
/* 3 cards in a row, top-aligned, spread across the container (~108 gap at 1920) */
body .specialties .row.flex {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0;
	margin: 0;
}
/* card — 474 wide, left-aligned copy (flex:0 0 auto + padding:0 neutralize col-lg-4) */
body .specialties .specBox {
	flex: 0 0 auto;
	width: min(24.688vw, 474px);
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: left;
}
body .specialties .spWrap {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
}
/* portrait photo — B&W by default, color on hover */
body .specialties .specImg {
	width: 100%;
	padding-bottom: 0;
	overflow: hidden;
}
body .specialties .specImg a {
	display: block;
	line-height: 0;
}
body .specialties .specImg img {
	width: 100%;
	height: auto;
	aspect-ratio: 474 / 560;
	object-fit: cover;
	border-radius: 0;
	filter: grayscale(1);
	transition: filter 0.5s ease;
}
body .specialties .specBox:hover .specImg img {
	filter: grayscale(0);
}
/* copy row: [title][hover line]; 32 gap below the image. Baseline-aligned so the
   line (an empty flex item → its baseline is its bottom edge) sits on the
   title's baseline, not its middle (Ali QA). */
body .specialties .specContent {
	display: flex;
	align-items: baseline;
	gap: 16px;
	width: 100%;
	margin-top: 32px;
	padding: 0;
	text-align: left;
	background: transparent;
	color: var(--black);
}
body .specialties .specContent h4 {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--headingFontWeight);
	font-size: clamp(22px, 1.458vw, 28px);
	line-height: 1.25;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--black);
}
body .specialties .specContent h4 a {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	text-decoration: none;
}
/* the line — fills from the title's end to the card's right edge, grows on hover */
body .specialties .specContent::after {
	content: "";
	flex: 1 1 auto;
	height: 2px;
	background: var(--black);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s ease;
}
body .specialties .specBox:hover .specContent::after {
	transform: scaleX(1);
}
/* the shipped button is empty (title-only cards) — hide it */
body .specialties .specialLink {
	display: none;
}

/* ============================================================
   REVIEWS — reviews (.reviews) centered Splide review scroller
   Figma 5238:1159 (desktop) / 2849:11831 (mobile).
   Light-grey band; the wave + iceberg art is one baked SVG
   (review_scroller_bg.svg) placed as the section background.
   Centered H2 → 32 → auto-rotating single review (quote → NAME + Google icon).
   ⚠️ reviews.min.css loads AFTER this child sheet, so every rule is
   body-prefixed to out-specify it. Splide JS ships arrows:false +
   pagination:false (one review at a time, 5s autoplay) — nothing to hide.
   ============================================================ */
body .reviews {
	background-color: var(--ltGray);
	background-image: url("/wp-content/uploads/2026/09/review_scroller_bg.svg");
	background-repeat: no-repeat;
	/* anchor the art to the BOTTOM at full width + natural height (no vertical
	   stretch) so the far-left rock stays flush to the left + bottom of the section
	   at every desktop width; any extra section height shows as grey above the art. */
	background-position: left bottom;
	background-size: 100% auto;
	padding: clamp(100px, 7.292vw, 140px) 0;
	color: var(--black);
}
/* centered header — mockup H1 (44 Expanded Medium, uppercase) → site h2, 32 below.
   🔴 The parent puts a bottom margin on .heading AND h2 carries its own — zero the
   .heading so only the h2 margin drives the gap (else the header gap is doubled). */
body .reviews .heading {
	margin: 0;
}
body .reviews .heading h2 {
	margin: 0 auto clamp(24px, 1.667vw, 32px);
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--headingFontWeight);
	font-size: var(--h2FontSize);
	line-height: var(--h2LineHeight);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--black);
}
body .reviews .heading h2 em {
	font-style: normal;
	color: inherit;
}
/* scroller — center at the mockup's 810 width (42.19% of 1920); neutralize
   col-lg-6/offset-lg-3. Scale the width with the viewport (capped 810) so the
   centered review keeps the same clearance from the bottom-left rock at every
   desktop width instead of encroaching on it as the screen narrows. */
body .reviews .testimony {
	width: 100%;
	max-width: min(810px, 42.188vw);
	margin: 0 auto;
	float: none;
	padding: 0;
}
body .reviews .quotWrap {
	padding: 0;
}
/* quote — 18 Regular, fills the slide (drop the framework's 100px side inset),
   full text (lift the framework's 4-line -webkit clamp) */
body .reviews .testCont .rQuote {
	padding: 0;
}
body .reviews .rQuote > p {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
	margin: 0 0 24px;
	font-size: var(--bodyFontSize);
	line-height: var(--bodyLineHeight);
	color: var(--black);
}
/* attribution row — NAME (Expanded SemiBold 16, 0.15em) + 16 + Google icon 24 */
body .reviews .attribWrap {
	margin: 0;
}
body .reviews .testimony p.tName {
	margin: 0;
	gap: 16px;
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--btnFontWeight);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.15em;
	color: var(--black);
}
body .reviews .testimony p.tName a {
	display: inline-flex;
	margin: 0;
	line-height: 0;
}
body .reviews .testimony p.tName a img {
	width: 24px;
	height: 24px;
	display: block;
}

/* ============================================================
   SPECIAL OFFERS — offers (.offers--cde), CHILD template override.
   Figma 5245:2247 (desktop) / 2849:11822 (mobile). DARK 2-col: LEFT heading +
   Learn More button · RIGHT a vertical Splide card carousel (peek + vertical
   accent bars). Cards #2C2C2C on #1F1F1F; each CTA "Book Now" → #formPop (lity).
   ⚠️ offers.min.css loads AFTER this sheet → body-prefix. Custom cdeOff-* classes
   dodge the parent's .offers-list/.box-offers rules; the vertical Splide is
   mounted by child js/offers-vertical.js (parent offers.js keys on .offers--slider,
   which we never add). Mobile = stacked, horizontal carousel (see the ≤1024 block).
   ============================================================ */
body .offers--cde {
	background: var(--black);
	padding: clamp(100px, 7.292vw, 140px) 0;
	color: var(--white);
	overflow: hidden;
}
/* kindling makes .container min(85.417vw,1640px) — for this section let .cdeOff
   own its width instead (else the gutters double on desktop and the 85vw container
   overflows the section's mobile padding to the right). */
body .offers--cde .container {
	width: 100%;
	max-width: none;
	padding: 0;
}
/* content block = heading + cards, symmetric ~277 gutter at 1920 (mockup 278/277);
   the pagination bars sit absolutely to the right of the cards, sticking into the
   right gutter (mockup: cards end ~1643, bars ~1683). */
body .offers--cde .cdeOff {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(40px, 8.073vw, 155px);
	width: calc(100% - clamp(128px, 28.854vw, 554px));
	max-width: 1366px;
	margin: 0 auto;
}
/* LEFT — heading + Learn More */
body .offers--cde .cdeOff-copy {
	flex: 0 1 auto;
	max-width: 674px;
}
body .offers--cde .cdeOff-head h2 {
	margin: 0;
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--headingFontWeight);
	font-size: var(--h2FontSize);
	line-height: var(--h2LineHeight);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--white);
}
body .offers--cde .cdeOff-btn {
	position: relative;
	overflow: hidden;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: clamp(32px, 2.917vw, 56px);
	padding: 16px clamp(22px, 1.68vw, 32px);
	background: var(--ltBlue);
	color: var(--black);
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--btnFontWeight);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0;
	transition: color 0.35s ease;
}
/* hover: white fill grows from the left (matches the nav Book Now button, 0.4s ease) */
body .offers--cde .cdeOff-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--white);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}
body .offers--cde .cdeOff-btn:hover {
	color: var(--black);
}
body .offers--cde .cdeOff-btn:hover::before {
	transform: scaleX(1);
}
/* keyboard focus: the framework's 2px --secondaryColor ring IS this button's
   ltBlue fill, so it vanished — white ring on the dark band (WCAG 2.4.7) */
body .offers .cdeOff-btn:focus-visible,
body .offers .cdeOff-cardCta:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 4px;
	box-shadow: none;
}
/* copy slide-up reveal — the global slidein.min.js adds .active on scroll-in; the
   from/to (opacity + translateY(30%)) come from .slide-up.slide-in in no-rucss. Re-
   declare the transitions here: the generic .slide-in ships a 1s delay, and the
   button's own transition would otherwise swallow the reveal. */
body .offers--cde .cdeOff-head.slide-in,
body .offers--cde .cdeOff-intro.slide-in {
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
}
body .offers--cde .cdeOff-btn.slide-in {
	transition:
		color 0.35s ease,
		opacity 0.6s ease,
		transform 0.6s ease;
}
/* RIGHT — cards column (536 card + room for the vertical bars) */
body .offers--cde .cdeOff-cards {
	flex: 0 0 auto;
	width: min(27.917vw, 536px);
}
body .offers--cde .cdeOff-splide {
	position: relative;
	width: 100%;
}
/* card */
body .offers--cde .cdeOff-card .cdeOff-cardInner {
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 56px;
	border-radius: 0;
	background: #2c2c2c;
	color: var(--white);
	overflow: hidden;
}
body .offers--cde .cdeOff-cardTitle {
	display: block;
	margin: 0 0 16px;
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--headingFontWeight);
	font-size: var(--h3FontSize);
	line-height: var(--h3LineHeight);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--white);
}
body .offers--cde .cdeOff-cardBody {
	margin: 0 0 32px;
	font-family: var(--bodyFont);
	font-weight: 400;
	font-size: var(--bodyFontSize);
	line-height: var(--bodyLineHeight);
	color: var(--white);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body .offers--cde .cdeOff-cardBody p {
	margin: 0;
}
body .offers--cde .cdeOff-cardCta {
	position: relative;
	margin-top: auto;
	align-self: flex-start;
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--btnFontWeight);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--white);
	text-decoration: none;
}
/* hover = a ltBlue underline that GROWS from the center (like the nav links);
   the text stays white now (it used to change to ltBlue — James: drop the
   color change, use the underline instead). */
body .offers--cde .cdeOff-cardCta::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 100%;
	height: 2px;
	background: var(--ltBlue);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s ease;
}
body .offers--cde .cdeOff-cardCta:hover::after {
	transform: scaleX(1);
}
/* peek (non-active) cards dimmed + darker */
body .offers--cde .splide__slide .cdeOff-cardInner {
	opacity: 0.55;
	background: #242424;
	transition:
		opacity 0.4s ease,
		background-color 0.4s ease;
}
body .offers--cde .splide__slide.is-active .cdeOff-cardInner {
	opacity: 1;
	background: #2c2c2c;
}
/* vertical accent-bar pagination, to the right of the cards */
body .offers--cde .splide__pagination {
	position: absolute;
	top: 50%;
	left: 100%;
	right: auto;
	bottom: auto;
	transform: translateY(-50%);
	margin: 0 0 0 40px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
body .offers--cde .splide__pagination li {
	margin: 0;
	line-height: 0;
}
body .offers--cde .splide__pagination__page {
	display: block;
	width: 3px;
	height: 40px;
	margin: 0;
	padding: 0;
	border-radius: 2px;
	background: var(--gray);
	opacity: 1;
	transform: none;
	transition: background-color 0.35s ease;
}
body .offers--cde .splide__pagination__page.is-active {
	background: var(--ltBlue);
	transform: none;
}

/* ============================================================
   MAP — location (.section-location). Figma 5238:1228 / mobile 5276:4461.
   White section, News-1 geometry: copy LEFT (heading + address/phone/hours),
   indented to pl-280 → 154 gap → 812² Google map RIGHT (right edge at the 140
   gutter). Dark News-1 pines SVG (news_block_bg_graphic_b) MIRRORED (tall-on-left)
   at the bottom-left. Copy slides DOWN + map slides in from the RIGHT (per James),
   driven by slidein.min.js via the child section-location.php .slide-in hooks.
   ⚠️ kindling.min.css styles .section-location (loads BEFORE the child) with
   .section-location .address .address-holder .* chains up to (0,4,0), so these
   out-specify with body + the full section scope.
   ============================================================ */
/* ⚠️ must also list `.widget.section-location` (the interior Full-Width-Map
   widget): kindling's `.section-location, .widget.section-location` (0,2,0)
   out-specifies a plain `body .section-location` (0,1,1) on the widget, so
   without the 2-class variant here the widget keeps kindling's padding
   (0 side padding → copy touches the screen edge at mobile). */
body .section-location,
body .widget.section-location {
	padding: clamp(100px, 7.292vw, 140px) 0;
	background: var(--white);
	overflow: hidden;
}
/* dark pines, mirrored (tall-on-left), bottom-left — behind the copy */
body .section-location::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: min(45.833vw, 880px);
	aspect-ratio: 879 / 480;
	background: url("/wp-content/uploads/2026/09/news_block_bg_graphic_b.svg")
		bottom left / contain no-repeat;
	transform: scaleX(-1);
	z-index: 1;
	pointer-events: none;
}
/* pines ↔ Partners band seamless: the pines' bottom edge lands on a fractional y
   (anti-aliased hairline) — tuck the black Partners band 1px over it */
body .section-location + .section-partners {
	position: relative;
	z-index: 3;
	margin-top: -1px;
}
/* "*Open select Fridays…" note hugs the hours (parent pads it 30 top; the popup
   adds another 10 margin) — map section + Book Now popup */
body .schd-note,
body #formPop .formPop-info .schd-note {
	margin-top: 0;
	padding-top: 8px;
}
/* row: copy left + map right; pack right so the map hits the 140 gutter and the
   free space falls left (copy indents to pl-280); 154 gap; copy top-anchored */
body .section-location .map-block.container.flex {
	position: relative;
	z-index: 2;
	/* kindling makes this container ~90vw — pin it to the site's standard 140-gutter
	   container (matches the News sections) so the map's right edge lands on the
	   gutter and the copy indents to pl-280 */
	width: calc(100% - clamp(64px, 14.583vw, 280px));
	max-width: none;
	margin: 0 auto;
	justify-content: flex-end;
	align-items: flex-start;
	gap: min(8.021vw, 154px);
	overflow: visible;
}
/* copy column — 536 wide, dropped 140 from the top (mockup heading sits 140 below the map top) */
body .section-location .address {
	display: block;
	flex: 0 0 auto;
	width: min(27.917vw, 536px);
	max-width: none;
	padding: min(7.292vw, 140px) 0 0;
}
body .section-location .address .address-holder {
	padding: 0;
}
/* heading (l_heading → p.h4, styled as the site h2) */
body .section-location .row-location.row-place .h4,
body .section-location .row-location.row-place h4 {
	margin: 0 0 32px;
	padding: 0;
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--headingFontWeight);
	font-size: var(--h2FontSize);
	line-height: var(--h2LineHeight);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--black);
}
/* contact text = body copy 18/1.5 */
body .section-location .row-location,
body .section-location .row-location a,
body .section-location .row-location .place span,
body .section-location .address .shedule {
	font-size: var(--bodyFontSize);
	line-height: var(--bodyLineHeight);
	color: var(--black);
}
/* address / phone links = plain in the mockup, underline on hover (matches the header) */
body .section-location .row-location a {
	text-decoration: none;
}
body .section-location .row-location a:hover {
	text-decoration: underline;
}
body .section-location .row-location.row-place .row {
	margin: 0 0 24px;
}
/* icons blue @18, flush-left with the heading (kill kindling's 8px pin padding) */
body .section-location .address .address-holder .pin {
	padding: 0;
	font-size: 18px;
	color: var(--primaryColor);
}
body .section-location .address .address-holder .inf {
	padding: 0;
}
/* schedule dl → tight 2-col (kindling ships .3fr 1fr, which wraps the day names) */
body .section-location .address .shedule dl {
	grid-template-columns: max-content max-content;
	column-gap: 8px;
	width: auto;
	font-size: var(--bodyFontSize);
	line-height: var(--bodyLineHeight);
	color: var(--black);
}
/* map column — 812² square, flush (no shadow); clip its own tiles */
body .section-location .mapWrp {
	flex: 0 0 auto;
	width: min(42.292vw, 812px);
	max-width: none;
	padding: 0;
	float: none;
}
body .section-location #map {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	box-shadow: none;
	overflow: hidden;
}
/* no section CTA button in the mockup */
body .section-location #footForm {
	display: none;
}
/* reveal (slidein.min.js adds .active in view): copy slides DOWN into place; the
   map slides in from off-screen RIGHT. .slide-in sits on the stable columns; the
   map's inner #map does the travel so the observed .mapWrp never leaves the
   viewport (the News-1 IntersectionObserver lesson). */
body .section-location .address.slide-in {
	opacity: 0;
	transform: translateY(-40px);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}
body .section-location .address.slide-in.active {
	opacity: 1;
	transform: none;
}
body .section-location .mapWrp.slide-in {
	opacity: 1;
	transform: none;
	transition: none;
}
body .section-location .mapWrp.slide-in #map {
	transform: translateX(120%);
	transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
body .section-location .mapWrp.slide-in.active #map {
	transform: translateX(0);
}

/* ============================================================
   ASSOCIATIONS — footer partners band (.section-partners), from Theme Settings
   → Reciprocal Fields → Partners (`part_sect`). Figma 2849:11873 (desktop 1920×280)
   / mobile 5276:4461. Dark #1F1F1F (set inline via the ACF bg_color), 3 white
   association logos (260×80) centered in a row, gap 120, py-100. footer.php renders
   it above the footer on the homepage (static front page, no partners flex section).
   ⚠️ partners.min.css loads AFTER the child (footer section-CSS enqueue) → body-prefix.
   partners.min.css already handles flex/center + li 260 + img 80 + brightness(0)invert(1)
   (→ white); we only correct the mockup's padding (default 160 top) + gap (default 60).
   ============================================================ */
body .section-partners {
	padding: min(5.208vw, 100px) 0;
}
body .section-partners .partners-list {
	gap: min(6.25vw, 120px);
}

/* ============================================================
   FOOTER — black, logo left, [Leave a Review + Contact Us] right, legal bar
   ============================================================ */
#footer {
	background: var(--black);
}
#footer .footer-holder {
	border-top: 2px solid rgba(255, 255, 255, 0.25);
	padding-top: 56px;
}
#footer .footer-holder > .container {
	width: calc(100% - clamp(64px, 14.583vw, 280px));
	max-width: none;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
}
/* Logo left; menu columns pushed right as a group */
#footer .footer-holder .foot {
	flex: 0 0 auto;
	width: auto;
	margin-right: auto;
	padding: 0;
}
#footer .footer-holder .footer-logo {
	display: inline-block;
	line-height: 0;
}
#footer .footer-holder .footer-logo img {
	width: 395px;
	height: auto;
	max-width: 100%;
}
#footer .footer-holder .infoNav {
	display: none;
}
#footer .footer-holder .servNav {
	flex: 0 0 398px;
	width: 398px;
	padding: 0;
}
#footer .footer-holder .loc {
	flex: 0 0 398px;
	width: 398px;
	padding: 0;
	margin-left: 16px;
}
/* Column headings (Leave a Review / Contact Us) = overline */
#footer .footer-holder .servNav .h3,
#footer .footer-holder .fLocation h3,
#footer .footer-holder .fLocation .h3 {
	display: block;
	margin: 0 0 32px;
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--btnFontWeight);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--white);
}
/* Neutralize the servNav accordion button on desktop (tap target restored at mobile) */
#footer .footer-holder .servNav .mod-btn.accordion {
	min-height: 0;
	height: auto;
	display: block;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	text-align: left;
	width: 100%;
	cursor: default;
}
#footer .footer-holder .servNav .mod-btn.accordion::after,
#footer .footer-holder .servNav .mod-btn.accordion::before {
	display: none;
}
#footer .footer-holder .servNav .panel {
	margin: 0;
	padding: 0;
	max-height: none;
	height: auto;
	overflow: visible;
	/* always show the links — kindling collapses .panel to display:none at ≤1024
	   (opened only by the JS .show class on tap); force it open at every width */
	display: block;
}
/* Submenu + contact links */
#footer .footer-holder .serv-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
#footer .footer-holder .serv-nav li {
	margin: 0;
	padding: 0;
}
#footer .footer-holder .fLocBox > .practice:empty {
	display: none;
}
#footer .footer-holder .fLocBox > p {
	margin: 0 0 24px;
}
#footer .footer-holder .serv-nav a,
#footer .footer-holder .fLocation .fAddress a,
#footer .footer-holder .fLocation .tel-footer a {
	font-family: var(--bodyFont);
	font-stretch: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--white);
	text-decoration: none;
	/* kill the framework's 10px vertical link padding → 24-tall links so the
	   flex gap (24) + heading margin (32) read as the mockup's true gaps */
	padding: 0;
}
#footer .footer-holder .serv-nav a:hover,
#footer .footer-holder .fLocation .fAddress a:hover,
#footer .footer-holder .fLocation .tel-footer a:hover {
	text-decoration: underline;
}
/* Social icons */
#footer .footer-holder .fLocation .social {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 24px;
}
#footer .footer-holder .fLocation .social li {
	margin: 0;
}
#footer .footer-holder .fLocation .social a {
	color: var(--white);
	font-size: 32px;
	line-height: 1;
	display: inline-flex;
	transition: opacity 0.35s ease;
}
#footer .footer-holder .fLocation .social a:hover {
	color: var(--white);
	opacity: 0.7;
	text-decoration: none;
}
/* Legal bar */
#footer #btm.bottom {
	border-top: 2px solid rgba(255, 255, 255, 0.25);
	margin-top: 56px;
}
#footer #btm .container {
	width: calc(100% - clamp(64px, 14.583vw, 280px));
	max-width: none;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
}
#footer #btm .copyright {
	order: -1;
	font-family: var(--bodyFont);
	font-stretch: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--white);
}
#footer #btm .bottom-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(8px, 0.625vw, 12px);
}
#footer #btm .bottom-nav li {
	margin: 0;
	padding: 0;
}
/* the parent's "|" separator hugs its link (0 gap) with the row gap after it —
   center it between the two links */
#footer #btm .bottom-nav li:not(:last-child)::after {
	margin-left: clamp(8px, 0.625vw, 12px);
}
#footer #btm .bottom-nav a {
	font-family: var(--bodyFont);
	font-stretch: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--white);
	text-decoration: none;
}
#footer #btm .bottom-nav a:hover {
	text-decoration: underline;
}

/* ============================================================
   BOOK NOW POPUP — #formPop (shared lity modal, home + interior).
   Targeted overrides on kindling's base formPop styles (for Ali's QA).
   ============================================================ */
/* Scroll-chain fix: reaching the modal's scroll boundary must NOT scroll the
   page behind it (mobile scroll bleed James flagged). Needs a real scroll
   container — kindling gives #formPop overflow-y on both breakpoints. */
#formPop.wrap-form-question-fixed {
	overscroll-behavior: contain;
}
/* also contain lity's own overlay wrapper (its scroller when a modal is taller
   than the viewport) so nothing chains to the page behind it */
.lity,
.lity-wrap {
	overscroll-behavior: contain;
}
/* "CONTACT US" / "LOCATION INFORMATION" headings → uppercase, 28 desktop (Ali QA) */
body #formPop .contactHead,
body #formPop .formPop-info .formPop-info-head {
	font-size: clamp(20px, 1.458vw, 28px);
	text-transform: uppercase;
}
/* Body-text phone number → underlined */
#formPop .formPop-form .formPop-desc a {
	text-decoration: underline;
}
/* "New Patient?" on the SAME line as the Yes/No radios, at 18px.
   A <legend> stays the fieldset caption under display/float in Chromium, so pull
   it out with position:absolute and pad the fieldset content over so the Yes/No
   <p> sits beside it. (Fixed widths are fine — "New Patient?" is stable CF7 copy.) */
#formPop .formPop-form form .top fieldset {
	position: relative;
	margin: 0;
	padding: 0 0 0 136px;
	border: 0;
	min-width: 0;
}
#formPop .formPop-form form .top legend {
	position: absolute;
	left: 0;
	top: 0;
	width: 120px;
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.5;
}
#formPop .formPop-form form .top fieldset > p {
	margin: 0;
	line-height: 1.5;
}
/* Input boxes → thicker, darker border */
#formPop .formPop-form form input[type="text"],
#formPop .formPop-form form input[type="email"],
#formPop .formPop-form form input[type="tel"],
#formPop .formPop-form form input[type="number"],
#formPop .formPop-form form textarea {
	border: 2px solid #767676;
}
/* Location hours → 16px / weight 400 */
#formPop .formPop-info .shedule dl,
#formPop .formPop-info .shedule dt,
#formPop .formPop-info .shedule dd {
	font-size: 16px;
	font-weight: 400;
}
/* Submit "Contact Us" → stays blue; black slides in from the left on hover, like
   the nav Book Now. An <input> can't take a ::before, so slide a 200%-wide
   black|blue gradient via background-position (same visual as the ::before scaleX). */
#formPop .formPop-form form input[type="submit"] {
	background-color: var(--primaryColor);
	background-image: linear-gradient(
		to right,
		var(--black) 0 50%,
		var(--primaryColor) 50% 100%
	);
	background-size: 200% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	border: none;
	color: var(--white);
	transition: background-position 0.4s ease;
}
#formPop .formPop-form form input[type="submit"]:hover {
	background-position: 0 0;
	color: var(--white);
}

/* ============================================================
   INTERIOR PAGE CONTENT — .entry.entry-add  (page.php: full-width,
   no sidebar; parent constrains #content to min(95%,1088px) centered w/
   80 T/B padding, and h*{margin:clamp(40,4.167vw,80) 0 24} drives the
   mockup's 80px block rhythm — both KEPT). Mockup 2849:11789:
     • section headings  = H2 Title  36 Expanded Medium UPPERCASE 0.05em
     • sub-headings      = H3 Subhead 28 Expanded Medium 0.05em
     • body copy         = 18 / 1.5
     • content images    = SQUARE corners
     • content+image row = a floated align-image (copy wraps beside it),
                           widened to the mockup's ~154 gap
     • [display_offer] promo card (.page-offer) = DARK #2C2C2C SQUARE card,
                           centered white "SPECIAL OFFER" title + description
   ⚠️ interior_style.min.css loads AFTER this child sheet → body-prefix
   every rule to out-specify it (same as the interior header/hero).
   ============================================================ */
/* section headings — parent forces --h2FontSize (44) / normal case+tracking;
   the mockup content H2 is 36 Expanded Medium UPPERCASE (NOT the 44 the
   homepage section headers use — that's the mockup-H1 remap) */
body .entry.entry-add h2 {
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--headingFontWeight);
	font-size: clamp(28px, 1.875vw, 36px);
	line-height: var(--h2LineHeight);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--black);
}
/* sub-headings — mockup H3 Subheader 28 Expanded Medium (parent renders h3
   at body weight 400) */
body .entry.entry-add h3,
body .entry.entry-add .h3 {
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--headingFontWeight);
	font-size: var(--h3FontSize);
	line-height: var(--h3LineHeight);
	letter-spacing: 0.05em;
	color: var(--black);
}
/* body copy — 18 / 1.5 (parent line-height rounds to 26; mockup Body = 27) */
body .entry.entry-add p,
body .entry.entry-add ul li {
	font-size: var(--bodyFontSize);
	line-height: var(--bodyLineHeight);
}
/* content images — SQUARE (parent rounds them clamp(40,4.17vw,80); aligned 10px) */
body .entry img,
body .entry img.alignleft,
body .entry img.alignright,
body .entry img.aligncenter {
	border-radius: 0;
}
/* content+image 2-col row = a right/left-floated image (flush to the content
   edge) with the copy wrapping beside it; copy↔image gap 24–48 (the News
   blocks' 154 read as too wide here — Kristen/Ali QA 2026-09-24). Re-asserted
   full-width at ≤1024 below, since this out-specifies the parent's mobile
   stack rule. */
body .entry img.alignright {
	margin: 0 0 24px clamp(24px, 2.5vw, 48px);
}
body .entry img.alignleft {
	margin: 0 clamp(24px, 2.5vw, 48px) 24px 0;
}
/* Doctors/Team bio rows (su-row) — heading top flush with the photo top. wpautop
   leaves an empty <p> ahead of the h2, so su-u-trim misses it and the h2 keeps
   its 80px top margin. */
body .entry .su-column-inner > p:empty {
	display: none;
}
/* wpautop drops a <br> BETWEEN su-columns (Smile Gallery rows) — it pushed the
   second column 27px below the first */
body .entry .su-row > br {
	display: none;
}
body .entry .su-column-inner > p:empty:first-child + h2,
body .entry .su-column-inner > p:empty:first-child + h3,
body .entry .su-column-inner > h2:first-child,
body .entry .su-column-inner > h3:first-child {
	margin-top: 0;
}
/* [display_offer] promo card — DARK #2C2C2C square card, centered white copy.
   Parent ships it blue (--primaryColor), 10px radius, body-font 30 title. */
body .entry.entry-add .page-offer {
	background-color: #2c2c2c;
	color: var(--white);
	border-radius: 0;
	text-align: center;
	padding: clamp(40px, 4.167vw, 80px) clamp(32px, 3.333vw, 64px);
}
body .entry.entry-add .page-offer h2 {
	margin: 0 0 16px;
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--headingFontWeight);
	font-size: var(--h3FontSize);
	line-height: var(--h3LineHeight);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--white);
}
body .entry.entry-add .page-offer p,
body .entry.entry-add .page-offer li {
	margin: 0;
	font-size: 16px;
	line-height: var(--bodyLineHeight);
	color: var(--white);
}
/* the offer WYSIWYG often has a `<p><img></p>` (the offer image) right after the
   title; the parent hides `.page-offer img` but the empty <p> wrapper still holds
   a line-box → a gap under the title. Hide any paragraph that's just an image. */
body .entry.entry-add .page-offer p:has(> img:only-child) {
	display: none;
}

/* ============================================================
   INTERIOR — DENTAL SERVICES  (page-templates/services-page.php)
   Markup: .entry.entry-add > .servBlock.row.flex.wrap > .servCard (span.h3
   title + p list) + .servBtmCon. The parent (interior_style, loads after)
   already styles the card (padding / --altBg bg / shadow / 28% width desktop,
   90% stacked ≤1024); body-prefix just the two deltas James asked for.
   ============================================================ */
/* card title → content gap = 16. The title is a `<span class="h3">` rendered
   INLINE, so its (and the parent's 24px) bottom margin was ignored — make it
   block so the margin actually creates the gap. (.center keeps the text centered.) */
body .servCard h3,
body .servCard .h3 {
	display: block;
	margin-bottom: 16px;
}
/* 3-up cards span the copy width (parent 28% + 40 gap left ~93px dead on the right) */
body .servBlock .servCard {
	width: calc((100% - 80px) / 3);
}

/* BLOG listing — post titles in their own (title) case, not the uppercase
   heading style; long uppercase titles read poorly (Ali QA) */
body .posts-list .post .title h2,
body .posts-list .post .title h2 a {
	text-transform: none;
	letter-spacing: normal;
}

/* ============================================================
   INTERIOR — SPECIAL OFFERS PAGE  (page-templates/special-offers.php)
   .offers-list > .box-offers (span.h4 title + .offers-info>p + .specWrap>a
   "Learn More"). James: style the cards like the HOMEPAGE offer cards — dark
   #2C2C2C, white text; the title is NOT clickable (only "Learn More" is); and
   "Learn More" gets a ltBlue underline that grows on hover (same as the
   homepage Book Now). ⚠️ parent (interior_style, loads after) styles the card
   links black at (0,4,1) via `.page-template-special-offers .entry-add
   .box-offers .h4 a / .specWrap a` → include `.entry-add` to out-specify.
   ============================================================ */
/* the interior #content caps at 1088 (good for prose), but that squishes 3 offer
   cards to ~352 wide → tall/cramped. Widen #content to the full container on THIS
   page so the cards breathe (~536 each at 1920, like the homepage). */
body.page-template-special-offers .main-frame .container #content {
	width: 100%;
	max-width: none;
}
/* keep the closing text block readable — don't let it stretch to the full width */
body.page-template-special-offers .servBtmCon {
	max-width: 1088px;
	margin-left: auto;
	margin-right: auto;
}
body.page-template-special-offers .box-offers {
	display: flex;
	flex-direction: column;
	padding: clamp(32px, 3.333vw, 56px);
	background: #2c2c2c;
	color: var(--white);
	text-align: left;
}
/* the inner .box-holder ships a WHITE bg + its own 40px padding (a light-card
   default) that covered the dark card → make it transparent + a full-height flex
   column (so the dark shows and "Learn More" can sit at the card bottom). */
body.page-template-special-offers .box-holder {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	background: transparent;
	padding: 0;
	box-shadow: none;
	/* the parent ships `.box-offers .box-holder{overflow:hidden}` whose box ends right at
	   the text → it CLIPPED the "Learn More" hover underline (::after sits 8px below the
	   text box). Let it show; our card content doesn't need clipping (icon hidden). */
	overflow: visible;
}
/* hide the offer icon — the homepage cards have none (title → body → CTA only) */
body.page-template-special-offers .spcImg {
	display: none;
}
/* left-align the content to match the homepage cards (the template's .center
   classes on .description/.offers-info/.specWrap otherwise center it) */
body.page-template-special-offers .box-offers .center {
	text-align: left;
}
/* title — 28 Expanded Medium uppercase white (matches the homepage card title) */
body.page-template-special-offers .box-offers .h4 {
	display: block;
	margin: 0 0 16px;
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--headingFontWeight);
	font-size: var(--h3FontSize);
	line-height: var(--h3LineHeight);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--white);
}
/* title is NOT clickable — its <a> stays in the markup but is inert + plain */
body.page-template-special-offers .entry-add .box-offers .h4 a {
	color: inherit;
	text-decoration: none;
	pointer-events: none;
	cursor: default;
}
/* body copy — white 18/1.5 */
body.page-template-special-offers .box-offers .offers-info {
	margin: 0 0 32px;
}
body.page-template-special-offers .box-offers .offers-info p {
	margin: 0;
	font-size: var(--bodyFontSize);
	line-height: var(--bodyLineHeight);
	color: var(--white);
}
/* "Learn More" — white overline, pinned to the card bottom; a ltBlue underline
   grows from the center on hover (same treatment as the homepage Book Now). */
body.page-template-special-offers .box-offers .specWrap {
	margin-top: auto;
	/* offers.min.css centers the specWrap + adds 20px side padding → left-align it
	   and zero the sides so "Learn More" lines up with the title/body left edge */
	text-align: left;
	padding-left: 0;
	padding-right: 0;
}
body.page-template-special-offers .entry-add .box-offers .specWrap a {
	position: relative;
	display: inline-block;
	font-family: var(--headingFont);
	font-stretch: 125%;
	font-weight: var(--btnFontWeight);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--white);
	text-decoration: none;
}
/* the parent's CARD-hover rule `.offers-list li:hover … .specWrap a{color:inherit}`
   (0,5,2, loads after the child) resolves inherit to #111 → "Learn More" went dark on
   hover. Mirror that exact li:hover trigger with a body-prefix (0,6,3) to force WHITE;
   only the ltBlue underline (::after) should change on hover (James). */
body.page-template-special-offers .offers-list li:hover .box-offers .box-holder .specWrap a {
	color: var(--white);
}
body.page-template-special-offers .entry-add .box-offers .specWrap a::after {
	content: "";
	position: absolute;
	opacity: 1;
	left: 0;
	/* 8px gap below the "Learn More" text BOX — James measures it Figma-style, from the
	   text line-box bottom (NOT the glyph baseline). The link line-box bottom is 6px under
	   the caps baseline; line height 2px → bottom:-10px puts the line 8px below the text box
	   (≈14px below the caps). Verified live in James's Chrome. */
	bottom: -10px;
	width: 100%;
	height: 2px;
	background: var(--ltBlue);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s ease;
}
body.page-template-special-offers .entry-add .box-offers .specWrap a:hover::after {
	transform: scaleX(1);
}

/* .btn-orange in plain page content (e.g. the Virtual Smile Consult CF7 submit).
   The parent only styles .btn-orange inside flex sections, so this fell back to the
   browser's grey button. Same look as the #formPop submit: blue, black slides in
   from the left on hover/focus (gradient, since an <input> can't take a ::before). */
.entry.entry-add .btn.btn-orange {
	background-color: var(--primaryColor);
	background-image: linear-gradient(
		to right,
		var(--black) 0 50%,
		var(--primaryColor) 50% 100%
	);
	background-size: 200% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	border: none;
	color: var(--white);
	transition: background-position 0.4s ease;
}
.entry.entry-add .btn.btn-orange:hover,
.entry.entry-add .btn.btn-orange:focus-visible {
	background-position: 0 0;
	color: var(--white);
}

/* ============================================================
   INTERIOR — CONTACT US PAGE  (page-templates/contact-page.php)
   The contact form submit "Contact Us" (input.wpcf7-submit.btn-orange) sits on
   the dark #1F1F1F .conForm panel. James: WHITE at rest, then on hover the blue
   (#3967A8 = --primaryColor) slides in LEFT→RIGHT. An <input> can't take a
   ::before, so slide a 200%-wide blue|white gradient via background-position
   (same technique as the #formPop submit). Text: black at rest → white on hover.
   Scoped with #main so it out-specifies the base .btn-orange rules.
   ============================================================ */
body.page-template-contact-page #main .conForm input[type="submit"].btn-orange {
	background-color: var(--white);
	background-image: linear-gradient(
		to right,
		var(--primaryColor) 0 50%,
		var(--white) 50% 100%
	);
	background-size: 200% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	border: none;
	color: var(--black);
	transition:
		background-position 0.4s ease,
		color 0.4s ease;
}
body.page-template-contact-page #main .conForm input[type="submit"].btn-orange:hover {
	background-position: 0 0;
	color: var(--white);
}
/* form panel → light grey so it doesn't merge with the black Diff bar below (Ali QA) */
body.page-template-contact-page #main .conForm {
	background-color: var(--ltGray);
}
body.page-template-contact-page #main .conForm .heading h2,
body.page-template-contact-page #main .conForm legend,
body.page-template-contact-page #main .conForm .wpcf7-list-item-label {
	color: var(--black);
}
/* CF7 field labels carry class="hidden" (only styled inside #formPop) — they
   were invisible dark-on-dark; keep them for screen readers, off-screen visually */
body.page-template-contact-page #main .conForm label.hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ============================================================
   ≤1024 — MOBILE / TABLET
   (mobile mockups are 390px; Chrome min-window here is ~657 so phone ≤567
    is a device check — values below follow the mobile mockup)
   ============================================================ */
@media (max-width: 1024px) {
	#header #nav > li.menu-item-has-children > a::before,
	#header #nav .sub-menu > li.menu-item-has-children > a::after {
		content: none;
	}
	#header #nav .sub-menu > li.menu-item-has-children > a {
		padding-right: 0;
	}
	.mm-spn li::before {
		opacity: 1;
		border-color: #767676;
	}

	/* ---- HEADER: white; undo desktop transparent/flex overrides ---- */
	#header,
	#header:hover,
	body.scrolled #header {
		background: var(--white);
		border-bottom: none;
	}
	/* interior: drop the desktop medium shadow on mobile (the mobile header-holder
	   already carries its own shadow — keep mobile interior == mobile home) */
	body:not(.home) #header,
	body.scrolled:not(.home) #header {
		box-shadow: none;
	}

	/* ---- INTERIOR HERO (mobile 3798:1471): stacked — photo on top, then a #1F1F1F
	   copy panel (~168) with the white title bottom-left (Ali 10/5); breadcrumb hidden
	   on mobile. Photo height follows the 2120×760 banner art (760/2120 = 35.849vw). ---- */
	body .promo.bar.bar-title .row.flex {
		display: flex;
		flex-direction: column-reverse;
		min-height: 0;
	}
	body .promo.bar.bar-title .ban-image {
		position: relative;
		inset: auto;
		width: 100%;
		flex: 0 0 auto;
		height: min(35.849vw, 280px);
	}
	body .promo.bar.bar-title .ban-content {
		width: 100%;
		flex: 0 0 auto;
		min-height: 168px;
		flex-direction: column;
		justify-content: flex-end;
		padding: clamp(24px, 8.205vw, 32px);
		background: var(--black);
	}
	body .promo.bar.bar-title .breadcrumbs-block {
		display: none;
	}
	#header .header-holder,
	#header:hover .header-holder,
	body.scrolled #header .header-holder {
		display: block;
		width: 100%;
		max-width: none;
		margin: 0;
		border-bottom: none;
		background: var(--white);
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	}
	.mobHd {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
		padding: 130px 32px 80px;
	}
	.mobHd .mob-logo-section {
		width: 100%;
		max-width: 316px;
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}
	.mobHd .mob-logo-section,
	body .mobHd .mob-logo-section {
		top: 0;
	}
	.mobHd .mob-logo-section #mobLogo img {
		width: 100%;
		height: auto;
		margin: 0;
	}
	/* un-fix Book Now so it flows below the logo (framework fixes it to the top bar) */
	/* un-fix Book Now: framework fixes it to top:0 AND translate(-92px,-28px) — reset both so it flows below the logo, centered */
	.mobHd .btn-block,
	body .mobHd .btn-block {
		position: static;
		transform: none;
		margin: 0;
		width: auto;
		/* 🔴 RESERVE the Book Now's height. On scroll, no-rucss makes #sOpenFormMob
		   position:fixed (it flies into the header bar), which would collapse this
		   in-flow btn-block from 56→0 and shrink the document by 56px. Right at the
		   95px scroll threshold that shift retriggers the scrolled toggle (scroll-
		   anchoring/clamp) → the endless jolt James saw on interior pages. Holding
		   the height constant (= the 56px button) keeps the doc height stable across
		   the toggle, so it settles cleanly. The homepage is tall enough to mask it;
		   this fixes it everywhere. (min-height, so a wrapped CTA can still grow.) */
		min-height: 56px;
	}
	/* Scrolled sticky Book Now (#sOpenFormMob, position:fixed): framework centers it with translate(-92px,-28px) and the 0.5s transition animates that -92 X → a diagonal right→left slide. Center via auto-margins + top:0 and drop the transform so it only moves vertically. */
	body.scrolled #sOpenFormMob {
		transform: none !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		margin: 0 auto !important;
	}
	.mobHd .opener-form .btn.btn-primary {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--primaryColor);
		color: var(--white);
		border: none;
		border-radius: 0;
		padding: 16px 32px;
		font-family: var(--headingFont);
		font-stretch: 125%;
		font-weight: var(--btnFontWeight);
		font-size: 16px;
		line-height: 1.5;
		letter-spacing: 2.4px;
		text-transform: uppercase;
	}
	/* Phone button — mockup: 32×32 square (no radius), ~8px around the glyph (framework ships 44×44 r10 via !important, under #wrapper not #header) */
	#wrapper .moreInfo a.btn.show-info {
		width: 32px !important;
		height: 32px !important;
		min-width: 0 !important;
		padding: 0 !important;
		border-radius: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}
	#wrapper .moreInfo a.btn.show-info i {
		font-size: 16px !important;
		line-height: 1 !important;
	}
	/* Phone tap-target box → match the hamburger's 44px / top:5 box so the 32px icon centers at the same y as the hamburger */
	#wrapper .moreInfo {
		top: 5px !important;
		min-height: 44px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	/* Hamburger — black bars per mockup (24×2, 8px gap), on load + scrolled */
	#header .menu-opener::before,
	#header .menu-opener::after,
	body.scrolled #header .menu-opener::before,
	body.scrolled #header .menu-opener::after {
		width: 24px;
		height: 2px;
		left: 10px;
		background: var(--black);
	}
	#header .menu-opener::before {
		top: 16px;
	}
	#header .menu-opener::after {
		top: 26px;
	}
	/* Menu open (mm-ocd-opened): converge both bars to the shared center so the framework's ±45° rotation forms a clean X. The two rules above out-specify the framework's own convergence (ID beats its class selector), so restore it here at higher specificity. */
	body.mm-ocd-opened #header .menu-opener::before,
	body.mm-ocd-opened #header .menu-opener::after {
		top: 21px;
	}

	/* ---- HERO (mobile mockup 390×480 = 2849-11854): stacked display + subtitle, badge top-right ----
	   (body-prefixed to out-specify the section CSS, which loads after the child) */
	body .promo {
		height: 480px;
	}
	body .promo .promo-holder .container {
		width: calc(100% - 64px);
		padding-bottom: 32px;
	}
	body .promo h2.banH {
		width: 100%;
	}
	body .promo .banH .hl1,
	body .promo .banH .hl2w {
		line-height: 1.15;
	}
	body .promo .banH .hl2 {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	body .promo .banH .hsub {
		width: 100%;
	}
	/* mobile subtitle = Mobile/Overline: 16px / lh 1.5 / 0.15em (desktop is 28px / 1.25 / 0.05em) */
	body .promo .banH .hsubt {
		line-height: 1.5;
		letter-spacing: 0.15em;
	}
	/* ---- DIFF BAR: dark band, blocks stacked (mockup 2849-11858: pad 100/32, gap 48, text 16) ---- */
	.diff,
	.widget.widget-diff {
		padding: 100px 32px;
	}
	.diff .row.flex,
	.widget.widget-diff .row.flex {
		flex-direction: column;
		align-items: center;
		gap: 48px;
	}
	/* CENTER the checklist items (incl. a long one that wraps). Make the block +
	   list + items full content-width and center via inline text-align — NOT flex
	   justify-content, which sizes to content and pins the check to the left once
	   the text fills the row. (Real diff items are short 1-liners; the long lorem
	   placeholder is what exposed this.) */
	.diff .diffBox,
	.widget.widget-diff .diffBox {
		width: 100%;
	}
	.diff .diffList,
	.widget.widget-diff .diffList {
		width: 100%;
	}
	.diff .diffList li,
	.widget.widget-diff .diffList li {
		font-size: 16px;
		display: block;
		width: 100%;
		text-align: center;
		white-space: normal;
	}
	.diff .diffList li i.fa-check,
	.widget.widget-diff .diffList li i.fa-check {
		margin-right: 12px;
		vertical-align: middle;
	}
	/* kindling's mobile `.container` inside the diff is off-center (renders wider
	   than the content box + a negative right margin); pin it to the padded box. */
	.diff .container,
	.widget.widget-diff .container {
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	/* ---- NEWS BLOCK 1 (mobile mockup 5276:4323): stacked photo→copy, gutter 32, gap 48.
	   Graphics become full-width bands (mountains ≈111 tall @390 = 28.44vw, pines ≈213 = 54.61vw);
	   section padding clears both so the content sits between them. ---- */
	body #news1.half-content {
		padding: calc(28.44vw + 32px) 32px calc(54.61vw + 32px);
	}
	body #news1::after {
		left: 0;
		width: 100%;
		background-position: bottom center;
	}
	body #news1 .container {
		flex-direction: column;
		align-items: stretch;
		gap: 48px;
		width: 100%;
	}
	body #news1 .image.nImgRt {
		width: 100%;
		padding: 0;
	}
	body #news1 .text.nTxtLt {
		width: 100%;
		justify-content: flex-start;
		padding-bottom: 0;
	}
	body #news1 .text.nTxtLt h2 {
		font-size: 32px;
		margin: 0 0 24px;
	}
	body #news1 .text.nTxtLt p {
		font-size: 16px;
	}

	/* ---- NEWS BLOCK 2 (mobile): dark section, stacked photo→copy, no graphics ---- */
	body #news2.half-content {
		padding: 100px 32px;
	}
	body #news2 .container {
		flex-direction: column;
		align-items: stretch;
		gap: 48px;
		width: 100%;
	}
	body #news2 .image.nImgLt {
		width: 100%;
		padding: 0;
	}
	body #news2 .text.nTxtRt {
		width: 100%;
		justify-content: flex-start;
		padding-bottom: 0;
	}
	body #news2 .text.nTxtRt h2 {
		font-size: 32px;
		margin: 0 0 24px;
	}
	body #news2 .text.nTxtRt p {
		font-size: 16px;
	}

	/* ---- FEATURED SERVICES (mobile 5276:4368): cards stacked full-width, gutter 32,
	   line shown by default (no hover on touch); photos in color (no hover to reveal) ---- */
	body .specialties .container {
		width: 100%;
		padding: 32px 32px 100px;
	}
	body .specialties .row.flex {
		flex-direction: column;
		align-items: stretch;
		gap: 80px;
	}
	body .specialties .specBox {
		width: 100%;
		max-width: none;
	}
	body .specialties .specImg img {
		filter: grayscale(0);
	}
	body .specialties .specContent::after {
		transform: scaleX(1);
	}

	/* ---- REVIEWS (mobile 2849:11831): flat light-grey band, no graphics,
	   gutter 32, full quote, name + icon centered (24 header→quote via the base
	   clamp floor; 16 quote→name) ---- */
	body .reviews {
		background-image: none;
		padding: 100px 32px;
	}
	body .reviews .container {
		width: 100%;
		max-width: none;
		padding: 0;
	}
	body .reviews .testimony {
		width: 100%;
		max-width: none;
	}
	body .reviews .rQuote > p {
		margin-bottom: 16px;
	}

	/* ---- SPECIAL OFFERS (mobile 2849:11822): stacked — heading → horizontal
	   card carousel (peek L/R) → Learn More button. Child JS flips Splide to
	   direction:ltr ≤1024; .cdeOff-copy display:contents lets the button reorder
	   below the cards. ---- */
	body .offers--cde {
		padding: 100px 32px;
	}
	body .offers--cde .cdeOff {
		flex-direction: column;
		align-items: stretch;
		gap: 48px;
		width: 100%;
		max-width: none;
	}
	body .offers--cde .cdeOff-copy {
		display: contents;
	}
	body .offers--cde .cdeOff-head {
		order: 1;
	}
	body .offers--cde .cdeOff-head h2 {
		text-align: center;
	}
	body .offers--cde .cdeOff-cards {
		order: 2;
		width: 100%;
	}
	body .offers--cde .cdeOff-splide {
		width: 100%;
	}
	body .offers--cde .cdeOff-btn {
		order: 3;
		align-self: center;
		margin-top: 0;
	}
	body .offers--cde .cdeOff-card .cdeOff-cardInner {
		padding: 40px 32px;
	}
	/* horizontal carousel → pagination is a horizontal bar row under the cards */
	body .offers--cde .splide__pagination {
		position: static;
		top: auto;
		left: auto;
		transform: none;
		margin: 32px 0 0;
		flex-direction: row;
		justify-content: center;
	}
	body .offers--cde .splide__pagination__page {
		width: 40px;
		height: 3px;
	}

	/* ---- MAP (mobile 5276:4461): map on top (326²) → 48 gap → copy → full-width
	   pines at the bottom (natural orientation). Section top 32; bottom clears the
	   pines (54.61vw, same aspect as News 1). Heading floors to 32. The parent
	   already flips the row to column-reverse (map on top) + full-width cols. ---- */
	body .section-location,
	body .widget.section-location {
		padding: 32px 32px calc(54.61vw + 32px);
	}
	body .section-location::after {
		left: 0;
		width: 100%;
		aspect-ratio: 390 / 213;
		background-position: bottom center;
		transform: none;
	}
	body .section-location .map-block.container.flex {
		/* the section already carries the 32px side gutter at mobile — reset the
		   desktop calc so the map fills the content width (no double gutter).
		   flex-direction: kindling only flips to column-reverse at ≤991, so at
		   992–1024 it stays row and the two full-width cols overflow (address
		   pushed off-screen) — set it here for the whole ≤1024 range (also fixes
		   the interior map widget, which kindling's 991 rule reaches the same way). */
		flex-direction: column-reverse;
		width: 100%;
		gap: 48px;
	}
	body .section-location .address {
		width: 100%;
		padding: 0;
	}
	body .section-location .row-location.row-place .h4,
	body .section-location .row-location.row-place h4 {
		font-size: 32px;
	}
	body .section-location .mapWrp {
		width: 100%;
	}

	/* ---- ASSOCIATIONS (mobile): 3 logos stacked + centered, 260×80, gap 48, py-80 ---- */
	body .section-partners {
		padding: 80px 0;
	}
	body .section-partners .partners-list {
		flex-direction: column;
		gap: 48px;
	}
	body .section-partners .partners-list li {
		width: auto;
	}
	body .section-partners .partners-list li img {
		height: 80px;
	}

	/* ---- FOOTER: centered stacked ---- */
	#footer .footer-holder {
		border-top-color: rgba(255, 255, 255, 0.15);
		padding-top: 80px;
	}
	#footer .footer-holder > .container {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 48px;
		width: calc(100% - 64px);
	}
	#footer .footer-holder .foot {
		margin: 0;
	}
	#footer .footer-holder .footer-logo img {
		width: 316px;
	}
	#footer .footer-holder .loc {
		order: 1;
		width: 100%;
		max-width: none;
		flex: none;
		margin: 0;
	}
	#footer .footer-holder .servNav {
		order: 2;
		width: 100%;
		max-width: none;
		flex: none;
		margin: 0;
	}
	#footer .footer-holder .fLocation h3,
	#footer .footer-holder .fLocation .h3 {
		display: none;
	} /* mobile mockup: no Contact heading */
	#footer .footer-holder .servNav .h3 {
		text-align: center;
		margin: 0 0 24px;
	}
	#footer .footer-holder .fLocBox {
		text-align: center;
	}
	#footer .footer-holder .fLocBox > p {
		margin: 0 0 24px;
	}
	#footer .footer-holder .fLocation .social {
		justify-content: center;
		margin-top: 0;
	}
	#footer .footer-holder .serv-nav {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px;
	}
	#footer .footer-holder .serv-nav a {
		font-size: 14px;
	}
	#footer .footer-holder .serv-nav li {
		display: flex;
		align-items: center;
		gap: 24px;
	}
	#footer .footer-holder .serv-nav li:not(:last-child)::after {
		content: "|";
		color: var(--white);
	}
	#footer #btm.bottom {
		border-top-color: rgba(255, 255, 255, 0.15);
		margin-top: 56px;
	}
	#footer #btm .container {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 16px;
		width: calc(100% - 64px);
	}
	#footer #btm .copyright {
		order: 0;
	}
	#footer #btm .bottom-nav {
		flex-wrap: wrap;
		justify-content: center;
		gap: clamp(4px, 1.95vw, 8px) clamp(16px, 5.83vw, 24px);
	}
	#footer #btm .bottom-nav li:not(:last-child)::after {
		content: none;
	}

	/* ---- BOOK NOW POPUP (#formPop) — mobile ---- */
	/* close icon → right-hand side */
	#formPop .formPop-close {
		left: auto;
		right: 14px;
	}
	/* ONE scroll container capped at the VISIBLE viewport (dvh, not 100vh) so the
	   submit is reachable and the grid doesn't nest a second scroller; paired with
	   the base overscroll-behavior:contain this stops the scroll-bleed to the page. */
	#formPop.wrap-form-question-fixed {
		height: auto;
		max-height: 100vh;
		max-height: 100dvh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	#formPop .formPop-grid {
		max-height: none;
		overflow: visible;
	}

	/* ---- INTERIOR PAGE CONTENT: aligned content images stack full-width
	   (my desktop float+154-gap rule out-specifies the parent's mobile stack
	   rule, so restore it here at matching specificity). Headings + card
	   padding floor via their desktop clamps — no mobile override needed. ---- */
	body .entry img.alignleft,
	body .entry img.alignright,
	body .entry img.aligncenter {
		float: none;
		width: 100%;
		margin: 0 0 24px;
	}

	/* ---- DENTAL SERVICES cards: SQUARE at ≤1024 (parent rounds two corners
	   clamp(40,4.17vw,80) here; desktop cards are already square). Match the
	   parent's grouped selector — incl. the :nth-of-type(4/5/6) (0,3,0) — so
	   every card is covered, not just the first three. ---- */
	body .servBlock .servCard,
	body .servBlock .servCard:nth-of-type(4),
	body .servBlock .servCard:nth-of-type(5),
	body .servBlock .servCard:nth-of-type(6) {
		border-radius: 0;
		width: 90%;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 16px 24px rgba(0, 0, 0, 0.05);
	}
}

/* ============================================================
   ACCESSIBILITY — honor reduced-motion: show News 1 reveal targets
   at rest (no slide/fade) for users who opt out of motion.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	body #news1 .image.nImgRt.slide-in picture,
	body #news1 .text.nTxtLt.slide-in,
	body #news2 .image.nImgLt.slide-in picture,
	body #news2 .text.nTxtRt.slide-in,
	body .offers--cde .cdeOff-head.slide-in,
	body .offers--cde .cdeOff-intro.slide-in,
	body .offers--cde .cdeOff-btn.slide-in,
	body .section-location .address.slide-in,
	body .section-location .mapWrp.slide-in #map {
		opacity: 1;
		transform: none;
		transition: none;
	}
	body .promo .promoBg img,
	body .promo.bar.bar-title .ban-image .pImg img {
		animation: none;
		transform: scale(1.1);
	}
}