/* Kaminsky Wolf — section styles (child-only, Bootstrap-grid constrained). */

/* Nav height token, global so sections outside #header (e.g. the sticky-services offset) can read it */
:root {
	--navH: 72px;
}

/* Header: full-bleed nav strip stacked over a centered logo, overlaying the hero */
#header .header-holder {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	flex-wrap: wrap;
	align-items: flex-start;
}

/* Address/phone row and the duplicate booking pill are not in the KW top bar */
#header .conBlock,
#header .navBtns .btn-block {
	display: none;
}

/* Nav row spans full width, above the logo */
#header .locNavBtns {
	order: 1;
	flex: 0 0 100%;
	max-width: none;
	width: 100%;
	padding: 0;
}
#header .navBtns {
	width: 100%;
	margin: 0;
}
#header #mainNav {
	width: 100%;
	padding: 0;
}

/* Six equal columns, divider between cells, faint underline beneath. The subNav* vars feed the base's !important sub-nav link type (see the dropdown block below) so it matches the main nav. */
#header #mainNav > ul#nav {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
	gap: 0;
	list-style: none;
	box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.5);
	--subNavLetterSpc: 0.15em;
	--subNavTransform: uppercase;
}
#header #mainNav > ul#nav > li.menu-item {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
}
#header #mainNav > ul#nav > li.menu-item + li.menu-item {
	border-left: 2px solid rgba(255, 255, 255, 0.5);
}
#header #mainNav > ul#nav > li.menu-item > a {
	position: relative;
	z-index: 1;
	width: 100%;
	text-align: center;
	color: var(--white);
	font-family: var(--bodyFont);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: clamp(16px, 1.25vw, 24px) min(16px, 1vw);
	transition: color 0.5s ease-in-out;
}

/* Hover: white background slides up from the bottom, text goes black */
#header #mainNav > ul#nav > li.menu-item::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0;
	background: var(--altBg);
	transition: height 0.5s ease-in-out;
	z-index: 0;
}
#header #mainNav > ul#nav > li.menu-item:hover::before {
	height: 100%;
}
#header #mainNav > ul#nav > li.menu-item:hover > a {
	color: var(--black);
}
/* Kindling paints #nav a:hover a solid white background (@min-width:1025) that sits ABOVE the
   ::before fill (link z-index 1 > fill z-index 0) — it masked the cream on hover-in and only the
   ::before showed on hover-out. Clear it so the ::before cream (and, scrolled, taupe) fill shows
   and slides up on hover, for both the main nav and the sub-menu links. */
#header #mainNav > ul#nav a:hover {
	background: transparent;
}

/* Remove matchbox's steel-blue underline on all nav links (default, hover, focus, active) */
#header #mainNav > ul#nav > li.menu-item > a::after,
#header #mainNav > ul#nav > li.menu-item > a:hover::after,
#header #mainNav > ul#nav > li.menu-item > a:focus::after,
#header #mainNav > ul#nav > li.current-menu-item > a::after {
	content: none;
	display: none;
}

/* Sub-nav dropdown: fades in below the parent cell on hover; items mirror the main nav item (Futura 500 / 16 / 2.4px / uppercase, white on a charcoal panel, slide-up-white hover → black) */
#header #mainNav > ul#nav > li.menu-item-has-children {
	overflow: visible;
}
#header #mainNav > ul#nav .sub-menu {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 100%;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--black);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 1s ease-in-out, opacity 0.4s ease-in-out 0.2s;
	z-index: 50;
}
/* Open the dropdown on hover AND on keyboard focus-within (HP-D #16), so tabbing into a nav item reveals its sub-menu and the focus ring is visible on each sub-item instead of landing on hidden links. */
#header #mainNav > ul#nav li:hover > .sub-menu,
#header #mainNav > ul#nav li:focus-within > .sub-menu {
	max-height: 90vh;
	opacity: 1;
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
}
/* Once a top-level sub-nav is open, let its 3rd-tier flyout escape the clip (overflow-y:hidden alone forces overflow-x:auto → a scrollbar, not an escape). Delay 0.5s so the flip lands after the vertical reveal, not mid-animation; base has no overflow transition so it reverts to hidden instantly on close and the collapse still clips. */
#header #mainNav > ul#nav > li:hover > .sub-menu,
#header #mainNav > ul#nav > li:focus-within > .sub-menu {
	overflow: visible;
	transition: max-height 1s ease-in-out, opacity 0.4s ease-in-out 0.2s, overflow 0s 0.5s;
}
/* 3rd-tier opens as a flyout to the RIGHT of its parent item, so it never changes the 2nd-tier height (avoids the accordion jump / focus-loss). Its own max-height reveal runs in place. */
#header #mainNav > ul#nav .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}
#header #mainNav > ul#nav .sub-menu > li {
	position: relative;
	display: block;
	margin: 0;
}
#header #mainNav > ul#nav .sub-menu > li + li {
	border-top: 2px solid rgba(255, 255, 255, 0.15);
}
#header #mainNav > ul#nav .sub-menu > li > a {
	position: relative;
	z-index: 1;
	display: block;
	white-space: nowrap;
	text-align: center;
	color: var(--white);
	font-family: var(--bodyFont);
	font-weight: 500;
	line-height: 1.5;
	padding: clamp(16px, 1.25vw, 24px) clamp(20px, 1.5vw, 28px);
	transition: color 0.5s ease-in-out;
}
#header #mainNav > ul#nav .sub-menu > li::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0;
	background: var(--altBg);
	transition: height 0.5s ease-in-out;
	z-index: 0;
}
#header #mainNav > ul#nav .sub-menu > li:hover::before {
	height: 100%;
}
#header #mainNav > ul#nav .sub-menu > li:hover > a {
	color: var(--black);
}
/* Current-page sub-item: kindling paints the li white; give it the hover look (black label) instead of white-on-white */
#header #mainNav > ul#nav .sub-menu > li.current-menu-item > a {
	color: var(--black);
}
/* Nav focus ring hugs the link text, not the full cell (HP-D #15). The label is wrapped in .nav-txt (child walker); suppress the cell ring and outline the inline span instead. */
#header #mainNav > ul#nav a:focus-visible {
	outline: none;
	box-shadow: none;
}
#header #mainNav > ul#nav a:focus-visible .nav-txt {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Logo centered below the nav strip */
#header .logo-block {
	order: 2;
	flex: 0 0 100%;
	max-width: none;
	width: 100%;
	display: block;
	text-align: center;
	margin-top: clamp(32px, 3.646vw, 70px);
}
#header .logo-block .sLogo {
	display: block;
	width: 100%;
	text-align: center;
}
#header .logo-block #logo {
	display: inline-block;
	line-height: 0;
}
#header .logo-block #mLogo {
	position: static;
	transform: none;
	display: block;
	width: clamp(280px, 29.53vw, 567px);
	height: auto;
}
/* Int-D #1: interior header logo matches the homepage size (567) — no separate smaller interior width. */

/* Skip link: white on the taupe token is 4.18:1 — sit it on the charcoal (12.6:1) */
body .skip-link {
	background: var(--black);
}

/* Sticky nav: header (with logo) scrolls away; only the nav strip stays fixed.
   Transparent over the hero on every page (matchbox paints nav-theme-light headers white). */
body #header {
	--navH: 72px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 90;
	border-bottom: none;
	background-color: transparent;
	box-shadow: none;
}
#header .header-holder {
	padding-top: var(--navH);
}
#header .locNavBtns {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background: transparent;
	transition: background 0.3s ease-in-out;
}

/* Kill matchbox's transparent-header hover-reveal (nav is always visible here). interior_style.min.css
   sets #header:hover{position:sticky} which, at higher specificity than #header, dropped the absolute
   header back into flow on hover (+header height) and jumped the page — hold it absolute here. */
#header:hover {
	position: absolute;
	background-color: transparent;
	color: inherit;
	box-shadow: none;
}

/* Scrolled: header stays transparent (only the nav strip goes white) */
body.scrolled #header {
	background-color: transparent;
	box-shadow: none;
}
body.scrolled #header .locNavBtns {
	background: var(--altBg);
}
body.scrolled #header #mainNav > ul#nav {
	box-shadow: inset 0 -2px 0 rgba(51, 51, 51, 0.5);
}
body.scrolled #header #mainNav > ul#nav > li.menu-item + li.menu-item {
	border-left-color: rgba(51, 51, 51, 0.5);
}
body.scrolled #header #mainNav > ul#nav > li.menu-item > a {
	color: var(--black);
}
body.scrolled #header #mainNav > ul#nav > li.menu-item::before {
	background: var(--primaryColor);
}
body.scrolled #header #mainNav > ul#nav > li.menu-item:hover > a {
	color: var(--white);
}

/* Promo (hero video) banner — Figma 5629:5444 */
body #promoBanner {
	height: min(45.833vw, 880px);
}
body #promoBanner::before {
	background: rgba(0, 0, 0, 0.55);
}
body #promoBanner .promo-holder .container {
	align-items: end;
	width: min(71.042vw, 1364px);
}
body #promoBanner .slide_content {
	width: 100%;
	max-width: none;
	padding-bottom: clamp(20px, 2.083vw, 40px);
}
body #promoBanner .banH {
	position: relative;
	display: inline-block;
	margin-bottom: 0;
	text-align: left;
	color: var(--white);
	font-family: var(--headingFont);
	font-weight: 400;
	font-style: normal;
	text-transform: none;
	letter-spacing: 0;
	-webkit-text-stroke: 0;
	line-height: 1.25;
	font-size: clamp(40px, 5vw, 96px);
	white-space: nowrap;
}
body #promoBanner .banH .banScript {
	display: block;
	margin-left: min(34.844vw, 669px);
	margin-top: -0.677vw;
	font-family: var(--scriptFont);
	font-size: clamp(96px, 10.417vw, 200px);
	line-height: 0.4;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	-webkit-text-stroke: 0;
}

/* Differentiator slider — framework diff_slider, KW vertical + tab-less (Figma 5544:3271 home / 5616:3325 interior). Shared home + interior; overrides the trunk skin (black tabbed horizontal) */
body .diffSlider,
body .widget.widget-diff-slider {
	background-color: var(--black);
	color: var(--white);
	padding: clamp(72px, 7.29vw, 140px) 0;
}
body .diffSlideShow .diffSlideNav {
	display: none;
}
body .diffSlideShow {
	--ds-window: clamp(50px, 3.646vw, 70px);
	gap: 0;
	max-width: 1088px;
}
/* Vertical (ttb) list — override diff_slider.scss:91 (its display:flex forces slides horizontal); block matches Splide's native .splide__track--ttb>.splide__list. Targets .diffSlideShow so it also catches the interior widget (.widget-diff-slider), not just the flex render */
body .diffSlideShow .splide__list {
	display: block;
}
body .diffSlideShow .splide__slide {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
body .diffSlideShow .diffSlideCopy {
	max-width: 1088px;
	font-family: var(--bodyFont);
	font-weight: 400;
	font-size: clamp(20px, 1.458vw, 28px);
	line-height: 1.25;
	text-align: center;
	color: var(--white);
}

/* News blocks (Figma 5576:2628 / 5600:3081): the section IS the flex row; the copy col tracks the 840 image. Copy aligns to the image BOTTOM (news1: align-content end + 140 inset) / TOP (news2: align-content start + 140 inset) — the col is a single-row grid the base centers via align-content. Section vertical padding per Figma: news1 top + 180 bottom, news2 both. */
body #kw-news1 {
	padding-top: clamp(72px, 7.292vw, 140px);
	padding-bottom: clamp(72px, 9.375vw, 180px);
}
body #kw-news2 {
	padding-top: clamp(72px, 7.292vw, 140px);
	padding-bottom: clamp(72px, 7.292vw, 140px);
}
body #kw-news1 .nTxtRt {
	align-content: end;
	padding-bottom: clamp(72px, 7.292vw, 100px);
}
body #kw-news2 .nTxtLt {
	align-content: start;
	padding-top: clamp(72px, 7.292vw, 100px);
}

/* First News Block — fw_content_half restyle (Figma 5576:2628) */
body #kw-news1 {
	background: var(--altBg) url(../images/news-block-bg-graphic.svg) top center / 100% auto no-repeat;
	padding-inline: max(clamp(32px, 5vw, 96px), calc((100% - 1364px) / 2));
}
body #kw-news1 .nImgLt img {
	height: clamp(300px, 43.75vw, 840px);
	box-shadow: 0 40px 50px rgba(0, 0, 0, 0.05), 0 20px 30px rgba(0, 0, 0, 0.1);
}
body #kw-news1 h2 {
	color: var(--primaryColor);
	font-size: clamp(32px, 2.917vw, 56px);
	line-height: 1.25;
}

/* News Block Banner — centered steel band (Figma 5567:2437) */
body .fullContent.kw-news-banner {
	background-color: var(--secondaryColor);
	color: var(--white);
	text-align: center;
	padding: clamp(72px, 7.292vw, 140px) 0;
}
body .fullContent.kw-news-banner h2 {
	font-family: var(--headingFont);
	color: var(--white);
	font-size: clamp(32px, 2.917vw, 56px);
	line-height: 1.25;
	max-width: 810px;
	margin: 0 auto;
}
body .fullContent.kw-news-banner p {
	font-family: var(--bodyFont);
	color: var(--white);
	font-size: clamp(16px, 0.938vw, 18px);
	line-height: 1.5;
	max-width: 810px;
	margin: clamp(16px, 1.25vw, 24px) auto 0;
}
/* The steel band continues the blue behind the feat-services cards, so it stays put — only the text spans (their own slide-in) reveal */
body .fullContent.kw-news-banner.slide-in {
	opacity: 1;
	transform: none;
	transition: none;
}
/* Reveal timing: the parent's base .slide-in carries transition-delay:1s (build/css/no-rucss.min.css),
   so every scroll-reveal sat blank for a full second after scrolling into view ("white empty space before
   it pops up"). Drop the delay so sections fade in as they enter; the parent's .5s ease fade is kept.
   Higher specificity than the parent's `.slide-in` (0,0,1,0), lower than the per-section disables above
   (they set transition:none, so the delay is moot there). */
body .slide-in {
	transition-delay: 0s;
}

/* Second News Block — fw_content_half mirror, image right (Figma 5600:3081) */
body #kw-news2 {
	position: relative;
	background: var(--altBg);
	padding-inline: max(clamp(32px, 5vw, 96px), calc((100% - 1364px) / 2));
}
/* Same graphic as news1, flipped 180° via an absolutely positioned pseudo */
body #kw-news2::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url(../images/news-block-bg-graphic.svg) top center / 100% auto no-repeat;
	transform: rotate(180deg);
	pointer-events: none;
	z-index: 0;
}
body #kw-news2 > * {
	position: relative;
	z-index: 1;
}
/* news2 image (Figma cover-crops it): the inline <picture> collapses, so give a definite height chain — col → picture → img — so the column tracks the 840 image instead of starving to the text height */
body #kw-news2 .nImgRt {
	height: clamp(300px, 43.75vw, 840px);
}
body #kw-news2 .nImgRt picture {
	display: block;
	height: 100%;
}
body #kw-news2 .nImgRt img {
	display: block;
	width: 100%;
	max-width: 674px;
	height: 100%;
	margin-inline: auto;
	object-fit: cover;
	box-shadow: 0 40px 50px rgba(0, 0, 0, 0.05), 0 20px 30px rgba(0, 0, 0, 0.1);
}
body #kw-news2 h2 {
	color: var(--primaryColor);
	font-size: clamp(32px, 2.917vw, 56px);
	line-height: 1.25;
}

/* Team Block — freeform: full-bleed photo + steel copy panel + Top Dentists badge (Figma 5587:2706) */
body #kw-team-section {
	padding-top: 0;
	padding-bottom: 0;
}
body #kw-team-section .container {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
body #kw-team-section .col-lg-12 {
	padding: 0;
	display: flex;
	justify-content: center;
	background-color: var(--secondaryColor);
}
body .kw-team {
	position: relative;
	width: 100%;
	max-width: 1920px;
}
body .kw-team-bg img {
	display: block;
	width: 100%;
	height: clamp(360px, 33.333vw, 640px);
	object-fit: cover;
}
body .kw-team-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 54.167%;
	width: 27.865%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(16px, 1.25vw, 24px);
	padding-inline: clamp(28px, 2.917vw, 56px);
	background: var(--secondaryColor);
	color: var(--white);
}
body .kw-team-panel h2 {
	font-family: var(--headingFont);
	font-size: clamp(32px, 2.917vw, 56px);
	line-height: 1.25;
	color: var(--white);
	margin: 0;
}
body .kw-team-panel p {
	font-family: var(--bodyFont);
	font-size: clamp(16px, 0.938vw, 18px);
	line-height: 1.5;
	color: var(--white);
	margin: 0;
}
body .kw-team-badge {
	position: absolute;
	left: 80.417%;
	top: 72.8%;
	width: clamp(88px, 7.292vw, 140px);
	height: auto;
}

/* Interior diff widget: drop interior_style's generic .widget 30px top pad so the band sits flush like the home render */
body .widget.widget_am_diff_slider_widget {
	padding-top: 0;
}

/* Sticky Featured Services — full-bleed cards at the Figma card width on a tan ground (Figma 5567:1947) */
/* Tan ground with a fixed 180px steel band at the bottom of the section (Figma tab height) */
body .sticky-feat-services {
	background: linear-gradient(to bottom, var(--altBg) calc(100% - 180px), var(--secondaryColor) calc(100% - 180px));
}
/* Sticky viewport matches the Figma card width (1642/1920); height tracks width to hold the ~1.9 aspect down to the 1025px desktop breakpoint (no 700px floor) */
/* Pin the sticky offset to the nav height so the card top lands right below the fixed nav. This is the pre-JS/no-JS value; kw-sticky-feat-serv.js sets a matching inline top at runtime (and its scroll math reads it back) */
body .sticky-feat-services .stickyWrap {
	width: min(85.52vw, 1642px);
	height: min(44.79vw, 860px);
	margin-inline: auto;
	top: var(--navH);
}
body .sticky-feat-services .featBox.stickyCard {
	width: 100%;
	height: min(44.79vw, 860px);
	border-radius: 0;
	justify-content: flex-start;
	box-shadow: 0 -50px 60px rgba(0, 0, 0, 0.05);
}
/* Top-down scrim for title legibility (Figma: black 55% → transparent) */
body .sticky-feat-services .featBox.stickyCard::before {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}
/* Copy inset per Figma: pl 120 / pt 56 / gap 32 desktop, floors to 32/32/24 mobile */
body .sticky-feat-services .featContent {
	max-width: none;
	justify-content: flex-start;
	padding: clamp(32px, 2.917vw, 56px) clamp(32px, 6.25vw, 120px);
	gap: clamp(24px, 1.667vw, 32px);
}
body .sticky-feat-services .featContent .h4 {
	font-family: var(--scriptFont);
	font-size: clamp(80px, 10.417vw, 200px);
	font-weight: 400;
	line-height: 0.4;
	letter-spacing: 0;
	text-transform: none;
}
/* Learn More = Figma Overline (Futura PT Medium), not the parent's heading serif */
body .sticky-feat-services .featContent::after {
	font-family: var(--bodyFont);
	font-weight: 500;
	transition: padding-right 0.25s ease;
}
/* HP-D #5: on hover move ONLY the arrow, not the whole label. Kill the base's translateX of the entire ::after and instead grow the right padding 6px (28→34) — the arrow is background-anchored right center, so it slides right while "Learn More" stays put. */
body .sticky-feat-services .featBox.stickyCard:hover .featContent::after {
	transform: none;
	padding-right: 34px;
}
/* Focus ring on the "Learn More" label, not the card (HP-D #17): the card <a> clips overflow and is covered by the photo, so its own ring is invisible — ring the inset ::after label (white on the dark card). */
body .sticky-feat-services .featBox.stickyCard:focus-visible {
	outline: none;
	box-shadow: none;
}
body .sticky-feat-services .featBox.stickyCard:focus-visible .featContent::after {
	outline: 2px solid var(--white);
	outline-offset: 4px;
}

/* Associations banner (Figma 5712:1827 home / 5712:1834 interior): symmetric 140 padding, 80 gap, logos at their natural per-logo widths — base forces every li to ~260 which airs out the narrow AAP badge. Shared by the home flex render and the interior page.php render. */
body .section-partners {
	padding: clamp(64px, 7.292vw, 140px) 0;
}
body .section-partners .partners-list {
	width: 100%;
	margin: 0;
	flex-wrap: nowrap;
	gap: clamp(24px, 4.5vw, 80px);
}
body .section-partners .partners-list li {
	width: auto;
	padding: 0;
}

/* Location / Map block (Figma 5587:2873): full-bleed 50/50, steel copy panel left, map right */
body .section-location,
body .widget.section-location {
	padding: 0;
}
body .section-location .map-block.container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	height: clamp(400px, 29.167vw, 560px);
	align-items: stretch;
	/* At mid widths (e.g. ~1366–1512) the steel address panel runs a few px taller than this clamped
	   height, and the block's inherited overflow:auto then showed a scrollbar — made obvious once the
	   footer curtain pins the map in view. Clip it: only the address panel's generous bottom padding is
	   trimmed, never text. (min-height would avoid the clip but collapses the map, which fills via
	   height:100% and needs a definite parent height.) */
	overflow: hidden;
}
body .section-location .map-block .col-lg-6 {
	padding: 0;
}
body .section-location .address {
	background-color: var(--secondaryColor);
	color: var(--white);
}
body .section-location .address .address-holder {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.25vw, 24px);
	padding: clamp(48px, 7.292vw, 140px);
}
body .section-location .address .h4 {
	margin: 0;
	padding: 0;
	color: var(--white);
	font-family: var(--headingFont);
	font-weight: 400;
	font-size: clamp(32px, 2.917vw, 56px);
	line-height: 1.25;
	text-transform: none;
}
body .section-location .address address {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.25vw, 24px);
	margin: 0;
	font-size: 18px;
}
body .section-location .address .row-place {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 1.667vw, 32px);
}
/* Fixed icon cell so the address / phone / hours rows share one text edge (the address glyph is 4px narrower) */
body .section-location .address .pin {
	flex: 0 0 32px;
	width: 32px;
	padding: 0;
	color: var(--white);
	font-size: 18px;
}
body .section-location .address .pin i {
	display: block;
	color: var(--white);
	font-size: 18px;
	line-height: 1.5;
}
body .section-location .address .inf,
body .section-location .address .inf a,
body .section-location .address .inf span {
	color: var(--white);
	font-family: var(--bodyFont);
	font-size: 18px;
	line-height: 1.5;
}
body .section-location .address .row-tel,
body .section-location .address .row {
	margin: 0;
}
body .section-location .address .shedule dl {
	grid-template-columns: auto auto;
	justify-content: start;
	gap: 0 8px;
	color: var(--white);
	font-size: 18px;
	line-height: 1.5;
}
body .section-location .address .btn {
	display: none;
}
body .section-location .mapWrp,
body .section-location #map,
body .widget.section-location .mapWrp,
body .widget.section-location #map {
	height: 100%;
	aspect-ratio: auto;
	box-shadow: none;
}

/* Location + footer links: no underline at rest, underline on hover (buttons stay clean) */
body .section-location a:not(.btn),
body #footer.kw-footer a {
	text-decoration: none;
}
body .section-location a:not(.btn):hover,
body #footer.kw-footer a:not(.btn):hover {
	text-decoration: underline;
}

/* Footer — custom child template (Figma 5688:2987): centered white logo + legal line, then a full-width 3-cell contact bar */
#footer.kw-footer {
	background-color: var(--black);
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#footer.kw-footer .footer-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 1.25vw, 24px);
	padding: clamp(48px, 4.167vw, 80px) min(20px, 5vw);
	text-align: center;
}
#footer.kw-footer .footer-logo img {
	width: clamp(360px, 27.24vw, 523px);
	height: auto;
}
#footer.kw-footer .footer-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px 0;
	margin: 0;
	color: var(--white);
	opacity: 0.5;
	font-family: var(--bodyFont);
	font-size: 14px;
	line-height: 1.5;
}
#footer.kw-footer .footer-legal .legal-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
#footer.kw-footer .footer-legal .legal-nav a {
	color: var(--white);
}
#footer.kw-footer .footer-legal .legal-nav li::before {
	content: "•";
	margin: 0 8px;
}
#footer.kw-footer .footer-contact-bar {
	display: flex;
	width: 100%;
}
/* Cells fill the bar equally (flex, not the Bootstrap col-lg-4 33% cap) so the contact bar stays
   full-width and framed with any cell count — 2 cells → 50/50 after the social cell was removed. */
#footer.kw-footer .fc-cell {
	min-width: 0;
	flex: 1 1 0;
	max-width: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	padding: clamp(16px, 1.667vw, 24px) min(24px, 2vw);
	border-top: 2px solid rgba(255, 255, 255, 0.5);
}
#footer.kw-footer .fc-cell + .fc-cell {
	border-left: 2px solid rgba(255, 255, 255, 0.5);
}
#footer.kw-footer .fc-address a,
#footer.kw-footer .fc-phone a {
	color: var(--white);
	font-family: var(--bodyFont);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 2.4px;
	text-transform: uppercase;
}
#footer.kw-footer .fc-social .social {
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.667vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}
#footer.kw-footer .fc-social .social li {
	margin: 0;
}
/* 32px glyphs per Figma 5688:2953; the flex box also guarantees the WCAG 2.2 24px minimum target on the narrow glyphs */
#footer.kw-footer .fc-social .social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	color: var(--white);
	font-size: 32px;
	line-height: 1;
}

/* Footer transition curtain (Footer Transition asset, Figma 5774:1022). location + footer are moved into .curtain-reveal; the pin is a full-viewport scroll-jack that FREEZES the whole view (so the associations above can't scroll past behind the parting halves) while the two photo halves part (--part 0→1). The reveal sits at the bottom of the pin; the cream sliver above it reads as the associations section. JS sets the pin height + the stage's jack scroll (width-scaled, 940/1920 vw) so there is no dead space and the page ends at the footer. Left slides left, right slides right */
.curtain-stage {
	position: relative;
	background-color: var(--altBg);
}
/* Full-viewport sticky jack (JS sets height = 100vh on desktop; on mobile the block is taller than the viewport, so it stays unset and just scrolls through). Reveal pinned to the bottom; cream ground fills the sliver above it */
.curtain-pin {
	position: sticky;
	top: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-color: var(--altBg);
}
/* HP-D #7/#8: reveal sizes to its content (map + footer) and sits at the bottom of the pin (pin is justify-content:flex-end), so the footer ends exactly at the viewport bottom — no empty space below it. The clothespin (natural height) covers the map+footer; the small strip above it is the cream pin ground (was the frozen associations, now a normal section above). */
.curtain-reveal {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
}
.curtain-half {
	position: absolute;
	top: 0;
	height: 100%;
	width: 50%;
	z-index: 2;
	overflow: hidden;
	will-change: transform;
	pointer-events: none;
}
.curtain-left {
	left: 0;
	transform: translateX(calc(var(--part, 0) * -100%));
}
.curtain-right {
	right: 0;
	transform: translateX(calc(var(--part, 0) * 100%));
}
/* One full photo painted in BOTH halves and centered on the seam (each half clips to its 50%) — the two halves are literally the same scaled image, so the seam is pixel-perfect. Sized to the Figma 940 in vw (48.958 = 940/1920) and bottom-aligned so it covers only the location+footer; the strip above it is the frozen associations */
/* Clothespin fills the curtain (which is now natural-height / scroll-open at all widths — HP-D #7/#8), so it covers the map+footer exactly and parts on scroll with no dead space. */
.curtain-photo {
	position: absolute;
	bottom: 0;
	height: 100%;
	width: auto;
	max-width: none;
	transform: translateX(-50%);
	pointer-events: none;
}
.curtain-left .curtain-photo {
	left: 100%;
}
.curtain-right .curtain-photo {
	left: 0;
}
/* Associations moved into the reveal as the frozen strip above the clothespin — grow it to fill the gap above the clothespin band (which scales with viewport height) and center the logos in it. No nav-clearance pad: keep them locked/centered even if they run under the nav on a short viewport (John: that's fine, better than losing the locked look) */
#curtainReveal .section-partners {
	flex: 1 1 auto;
	display: flex;
	align-items: flex-start;
	padding-top: var(--navH);
	padding-bottom: 0;
	overflow: hidden;
}
/* Cap the logos to the strip (viewport − clothespin band) so they never bleed into the clothespin on shorter viewports; natural ~80 on taller ones (they may run under the nav — acceptable) */
#curtainReveal .section-partners .partners-list img {
	max-height: min(80px, calc(100vh - var(--kw-photo-h, 48.958vw)));
}
/* Disable the trunk interior invert (partners.scss:118) — logos show natural color in the reveal, matching the homepage */
#curtainReveal .section-partners .partners-list img {
	filter: none;
}
/* Interior associations (af-widgets, not in the curtain — e.g. the team pages): the SAME trunk invert (brightness(0) invert(1)) renders the logos solid white on the tan associations band, so they vanish. Show them natural, matching the homepage curtain. */
body:not(.home) .section-partners .partners-list img {
	filter: none;
}
/* Trunk lifts the partners container to z-index 4, above the curtain halves (2) — keep the logos under the clothespin where the photo covers them (mobile) */
#curtainReveal .section-partners .container {
	z-index: 1;
}

/* Book Now popup (#formPop) — child overrides on the kindling base (markup in footer.php) */
/* HP-M #14: contain the popup's overscroll so scrolling to the end of the form doesn't chain-scroll the page behind it (otherwise closing the popup leaves you stranded mid-page). */
body #formPop .formPop-grid {
	overscroll-behavior: contain;
}
/* Phone number in the intro copy is underlined (base sets text-decoration:none) */
body #formPop .formPop-desc a {
	text-decoration: underline;
}
/* Location Information panel → steel, not the charcoal footer bg (Figma) */
body #formPop .formPop-info {
	background: var(--secondaryColor);
}
/* Hours read 16px / 400 (base sets the day term to 600) */
body #formPop .formPop-info dl,
body #formPop .formPop-info dt,
body #formPop .formPop-info dd {
	font-size: 16px;
	font-weight: 400;
}
/* Form fields: thicker, darker border (Figma #767676, the placeholder token value) */
body #formPop .formPop-form input[type="text"],
body #formPop .formPop-form input[type="email"],
body #formPop .formPop-form input[type="tel"],
body #formPop .formPop-form textarea {
	border: 2px solid #767676;
}
/* "New Patient?" legend → 18px, inline with its Yes/No radios (HP-D #11). A fieldset's rendered legend ignores flex/grid, so float it and let the radio <p> flow inline beside it. */
body #formPop .formPop-form .top legend {
	float: left;
	width: auto;
	margin: 0 16px 0 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.5;
}
body #formPop .formPop-form .top p {
	margin: 0;
	display: inline-block;
	vertical-align: baseline;
}
/* Popup submit (HP-D #12): square, white label, taupe at rest → #333 fill slides up on hover (the KW form-button animation, matching .conForm submit). Base ships a pill with dark text. */
body #formPop .formPop-form form input[type="submit"] {
	border-radius: 0;
	background-color: var(--primaryColor);
	background-image: linear-gradient(var(--black), var(--black));
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100% 0;
	color: var(--white);
	letter-spacing: 2.4px;
	transition: background-size 0.5s ease-in-out, color 0.5s ease-in-out;
}
body #formPop .formPop-form form input[type="submit"]:hover,
body #formPop .formPop-form form input[type="submit"]:focus-visible {
	background-size: 100% 100%;
	color: var(--white);
}

/* ================= Interior pages — standard template ================= */

/* Interior hero (Figma 5629:5756): full-bleed photo + 55% scrim, centered logo at top, page title bottom-left */
body .kw-int-hero {
	position: relative;
	height: min(45.833vw, 880px);
	overflow: hidden;
}
body .kw-int-hero-bg,
body .kw-int-hero-scrim {
	position: absolute;
	inset: 0;
}
body .kw-int-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
body .kw-int-hero-scrim {
	background-color: rgba(0, 0, 0, 0.55);
}
/* Desktop: the header's centered extended logo overlays the hero — the hero's own (stacked) logo is mobile-only */
body .kw-int-hero-logo {
	display: none;
}
body .kw-int-hero-title {
	position: absolute;
	left: clamp(24px, 7.292vw, 140px);
	bottom: clamp(32px, 2.917vw, 56px);
	z-index: 2;
	width: min(35.104vw, 674px);
	max-width: calc(100% - 48px);
}
body .kw-int-hero-title h1 {
	margin: 0;
	color: var(--white);
	font-family: var(--headingFont);
	font-weight: 400;
	line-height: 1.25;
	font-size: clamp(32px, 2.917vw, 56px);
	text-transform: none;
	letter-spacing: 0;
	-webkit-text-stroke: 0;
}

/* Interior content column (Figma 2849:11789): 1088 centered, 140 vertical padding, The Seasons 40 titles / Futura 18 body */
body .main-frame {
	padding: clamp(80px, 7.292vw, 140px) 0;
}
body .main-frame .container > #content {
	max-width: 1088px;
	margin: 0 auto;
	padding-block: 0;
}
body .main-frame .entry-add {
	color: var(--black);
	font-family: var(--bodyFont);
	font-size: 18px;
	line-height: 1.5;
}
/* interior_style pins p/li to a 26px line-height; hold the Figma 18/27 (1.5) */
body .main-frame .entry-add p,
body .main-frame .entry-add li {
	line-height: 1.5;
}
body .main-frame .entry-add > p:first-child {
	text-align: center;
}
body .main-frame .entry-add h1,
body .main-frame .entry-add h2,
body .main-frame .entry-add h3 {
	color: var(--black);
	font-family: var(--headingFont);
	font-weight: 400;
	line-height: 1.25;
	font-size: clamp(28px, 2.083vw, 40px);
	margin: clamp(40px, 4.167vw, 80px) 0 24px;
}
/* h3 sits a clear step below h2 at every width (Figma: h2 40 / h3 28 @1920). h2 uses 2.083vw,
   so h3 rides a shallower 1.667vw curve — the two never converge the way a matched vw would. */
body .main-frame .entry-add h3 {
	font-size: clamp(22px, 1.667vw, 28px);
}
body .main-frame .entry-add > *:first-child {
	margin-top: 0;
}
body .main-frame .entry-add p {
	margin: 0 0 24px;
}
body .main-frame .entry-add p:last-child {
	margin-bottom: 0;
}
/* Right-image content block (Figma 2849:11794): 398x560 with large drop shadow, text wraps left */
body .main-frame .entry-add img {
	border-radius: 0;
	box-shadow: 0 50px 60px rgba(0, 0, 0, 0.05), 0 30px 40px rgba(0, 0, 0, 0.1);
}
body .main-frame .entry-add img.alignright {
	float: right;
	width: clamp(240px, 20.729vw, 398px);
	height: auto;
	margin: 0 0 24px clamp(24px, 2.604vw, 50px);
}
body .main-frame .entry-add img.alignleft {
	float: left;
	width: clamp(240px, 20.729vw, 398px);
	height: auto;
	margin: 0 clamp(24px, 2.604vw, 50px) 24px 0;
}
/* Int-D 4: Shortcodes Ultimate galleries ([su_column] → .su-column, float:left, with a stray wpautop <br> between the columns) drop the 2nd column ~43px so pairs don't top-align. Flex the row (float becomes a no-op) and move the plugin's 4% gutter from margin-left to column-gap → columns top-align and extra photos wrap 2-up cleanly. Width-neutral (48% + 4% + 48% = 100%, same as the plugin). Mobile ≤767 still stacks via the plugin's own rule. */
body .main-frame .entry-add .su-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 4%;
	row-gap: 1.5em;
}
/* Same fix for the association logos in the fg-team bio popup (Lity moves it out of .entry-add); mixed-height logos center on each row */
body .fullBio .su-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 4%;
	row-gap: 1.5em;
}
body .main-frame .entry-add .su-row > br,
body .main-frame .entry-add .su-row::after,
body .fullBio .su-row > br,
body .fullBio .su-row::after {
	display: none;
}
body .main-frame .entry-add .su-row .su-column:not(.su-column-centered),
body .fullBio .su-row .su-column:not(.su-column-centered) {
	margin-left: 0;
}
/* fg-team (Int-D 5/6): the whole bio card is an <a>, and KW underlines interior content links, so the name + position render underlined. Kill the underline on the card link — the "Read More" keeps its own (team.css). */
body .main-frame .entry-add .team .bioWrap {
	text-decoration: none;
}
/* fg-team bio popup: Lity moves .fullBio out to <body> when it opens, so the interior `.entry-add img` max-width no longer reaches it and the headshot renders at its native width="600" px, overflowing its 50% column into the bio text. Scope the cap to .fullBio so it follows the popup into the Lity overlay. */
body .fullBio .bioMedia img {
	max-width: 100%;
	height: auto;
}
/* Bio popup: scrolling to the end of a long bio must not chain-scroll the page behind the overlay */
body .fullBio,
body .fullBio .bioTxt {
	overscroll-behavior: contain;
}
/* fg-team cards (KW): the card name h3 inherits KW's interior-heading margin-top:60 (via .entry-add h3), and the headshot is a square = card width; together they overflow the fixed card height so the photo covers the name. Reset the card name margins + cap the headshot to always leave a ~96px name strip at the bottom (robust across card widths / breakpoints; the photo stays ~square via object-fit cover). */
body .main-frame .entry-add .team .bioCon .namePos {
	padding: 0;
}
body .main-frame .entry-add .team .bioCon .namePos h3 {
	margin: 0 0 4px;
}
body .main-frame .entry-add .team .bioCon .namePos p.h4 {
	margin: 0;
}
body .main-frame .entry-add .team .bioWrap .headshot {
	top: 0;
	bottom: 96px;
	height: auto;
	aspect-ratio: auto;
}
body .main-frame .entry-add .team .bioWrap .headshot img {
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}
/* fg-team: optional per-section group photo (child ACF 'section_photo' on each tm_cat_group row),
   centered above that section's member cards. The photos are near-square group shots, so show the WHOLE
   photo (no crop — never cut people off) at a capped width; radius matches the bio cards (30px). */
body .main-frame .entry-add .teamSectionPhoto {
	max-width: 820px;
	margin: clamp(8px, 1vw, 16px) 0 clamp(32px, 3vw, 56px); /* left-aligned (was auto-centered): flush with the title + card-row left edge */
}
body .main-frame .entry-add .teamSectionPhoto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 30px;
}
/* Comp panels are square-cornered; drop interior_style's --cardBorderRad on the offer card so radii match the rest of the site. White copy on the taupe panel (the card ships pure black); the Futura heading stays as the card treatment per John */
body .main-frame .page-offer,
body .main-frame .page-offer h2,
body .main-frame .page-offer p {
	color: var(--white);
}
/* White body copy on the taupe token is 4.18:1; this shade of it clears WCAG AA (4.6:1) */
body .main-frame .page-offer {
	border-radius: 0;
	background-color: #9c6950;
}
/* Our Services cards (Int-D #8): white fill, 2px gold border, no drop shadow, 16px title→body (was cream fill, no border, shadowed, 24px gap). */
body .servBlock .servCard {
	background-color: var(--white);
	border: 2px solid var(--gold);
	box-shadow: none;
}
body .servBlock .servCard .h3 {
	display: block;
	margin-bottom: 16px;
}
/* FAQ section (Int-D #7): steel bg. Pre-write — the section only renders when a page has FAQ rows (pending content); finalize question/answer contrast against real content + the Figma FAQ frame. */
body .faq {
	background-color: var(--secondaryColor);
}

/* Contact submit — Figma button 5519:1071 inverted for the charcoal panel: #333 on white at rest; hover fills taupe from the bottom up (the nav's 0.5s slide) and the label goes white. An input can't carry ::before, so the fill is a bottom-anchored background-size transition */
body .conForm input[type="submit"] {
	padding: clamp(16px, 1.25vw, 24px) clamp(24px, 2.083vw, 40px);
	border: 0;
	border-radius: 0;
	background-color: var(--white);
	background-image: linear-gradient(var(--primaryColor), var(--primaryColor));
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100% 0;
	color: var(--black);
	font-family: var(--bodyFont);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	transition: background-size 0.5s ease-in-out, color 0.5s ease-in-out;
}
body .conForm input[type="submit"]:hover,
body .conForm input[type="submit"]:focus-visible {
	background-color: var(--white);
	background-size: 100% 100%;
	color: var(--white);
}
/* Contact fields: flat KW look instead of the browser default inset border */
body .conForm .formWrap input[type="text"],
body .conForm .formWrap input[type="email"],
body .conForm .formWrap input[type="tel"],
body .conForm .formWrap textarea {
	padding-left: clamp(12px, 0.781vw, 15px);
	border: 0;
	border-radius: 0;
}
/* Contact heading follows the site H2 token (The Seasons 400, sentence case) — no heading in the comp is uppercase */
body .conForm .heading h2 {
	font-weight: 400;
	text-transform: none;
}
/* CF7 "hidden" labels were only color-matched to the panel — still 27px in flow, pushing every control down and misaligning row 1. Keep them for screen readers, take them out of flow */
body .conForm .formWrap label.hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
body .conForm .formWrap label.hidden + br {
	display: none;
}
/* "New Patient?" legend and its Yes/No labels differ in height — align them on the text baseline, not the box center */
body .conForm .formWrap .flexWrap {
	align-items: baseline;
}

/* Special Offers (no comp — parity with the site CTA + body tokens): Learn More matches the Figma CTA weight/tracking; body copy uses the #333 token; offer images square like every other image */
body .specFormWrapper a {
	font-weight: 500;
	letter-spacing: 2.4px;
}
body .box-offers .offers-info p {
	color: var(--black);
}
body .spcImg,
body .spcImg img {
	border-radius: 0;
}
/* The interior right-image drop shadow (.entry-add img) must not land on the offer icons */
body .main-frame .entry-add .spcImg img {
	box-shadow: none;
}
/* Offer cards: the trunk equalizer only matches the outer box, so titles/body drift by copy length (measured 379/409/411 title tops). Four-row subgrid threaded through li → .box-offers → .box-holder aligns image / title / body / button across the three cards */
body.page-template-special-offers .main-frame ul.offers-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto auto auto 1fr;
	column-gap: clamp(12px, 0.833vw, 16px);
	row-gap: 0;
}
body.page-template-special-offers .main-frame ul.offers-list > .delta-match,
body .offers-list .box-offers,
body .offers-list .box-offers .box-holder {
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
}
/* offers.min gives the li a flex basis width that grid would honor literally — let the column size it */
body.page-template-special-offers .main-frame ul.offers-list > .delta-match {
	width: auto;
	max-width: none;
}
body .offers-list .box-offers .box-holder > .specFormWrapper {
	align-self: end;
}
/* .center's auto margins shrink-wrap a grid item — hold the card to its column */
body .offers-list .box-offers,
body .offers-list .box-offers .box-holder {
	width: 100%;
	margin-inline: 0;
}

/* News blocks (desktop ≥1025, where the row is horizontal): copy fixed at 536 with a fixed 154px
   image↔copy gap. The image column fills the rest and the photo hugs its inner (copy-side) edge, so
   the 154 gap is measured to the real image whatever the photo's aspect (at the 1920 design width the
   photo fills its side exactly). Replaces the Bootstrap col-lg-6 + offset-lg-2 (16.67% left margin),
   which read right on news1 but on the reversed news2 pushed the copy toward the right image. Below
   1025 the block stacks (parent), so this is desktop-only. */
@media (min-width: 1025px) {
	body #kw-news1,
	body #kw-news2 {
		justify-content: center;
		gap: 154px;
	}
	body #kw-news1 .nTxtRt,
	body #kw-news2 .nTxtLt {
		flex: 0 0 536px;
		max-width: 536px;
	}
	body #kw-news1 .nTxtRt .col-lg-8,
	body #kw-news2 .nTxtLt .col-lg-8 {
		width: 100%;
		max-width: 536px;
		margin: 0;
	}
	body #kw-news1 .nImgLt,
	body #kw-news2 .nImgRt {
		flex: 1 1 0;
		min-width: 0;
	}
	body #kw-news1 .nImgLt picture,
	body #kw-news2 .nImgRt picture {
		display: block;
		width: 100%;
	}
	body #kw-news1 .nImgLt img {
		display: block;
		margin-left: auto;
		margin-right: 0;
	}
	body #kw-news2 .nImgRt img {
		display: block;
		margin-right: auto;
		margin-left: 0;
	}
	/* fg-team bio popup: drop the photo to the name's top (.bioTxt has 56px top padding) */
	body .fullBio .bioMedia {
		padding-top: 56px;
	}
}

/* Below the sticky breakpoint: cards STACK vertically (HP-M 6, James's call — was a swipe-only carousel that hid cards 2–3 with no arrows/scrollbar). Shorter card height so 3 stacked don't run long; full-bleed like the phone Figma card. The desktop scroll-pin JS no-ops on mobile. */
@media (max-width: 1024px) {
	body .sticky-feat-services {
		background: var(--altBg);
	}
	body .sticky-feat-services .stickyWrap {
		display: flex;
		flex-direction: column;
		gap: clamp(16px, 4vw, 24px);
		width: 100%;
		height: auto;
		margin-inline: 0;
		position: static;
		overflow: visible;
		top: 0;
	}
	body .sticky-feat-services .featBox.stickyCard {
		flex: 0 0 auto;
		width: 100%;
		height: clamp(460px, 130vw, 560px);
		min-height: 0;
		margin-top: 0;
	}
	body .sticky-feat-services .featBox.stickyCard.slide-in,
	body .sticky-feat-services .featBox.stickyCard.slide-up {
		opacity: 1;
		transform: none;
	}
	body .sticky-feat-services .featContent .h4 {
		font-size: min(120px, 30.77vw);
	}
}

@media (max-width: 991.98px) {
	#header #mainNav > ul#nav {
		display: block;
		width: auto;
		border-bottom: 0;
	}
	#header #mainNav > ul#nav > li.menu-item {
		display: block;
		min-height: 0;
	}
	#header #mainNav > ul#nav > li.menu-item + li.menu-item {
		border-left: 0;
	}
	body #header {
		position: fixed;
		height: 50px;
		padding: 0;
		border-top: 2px solid rgba(255, 255, 255, 0.5);
		border-bottom: 2px solid rgba(255, 255, 255, 0.5);
		box-shadow: 0 20px 30px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.1);
		overflow: visible;
	}
	/* A tap fires :hover on the tapped element AND its ancestors, so tapping Book Now put #header into
	   :hover. The desktop #header:hover override (position:absolute, to counter interior_style's
	   sticky-on-hover) then un-fixed the sticky mobile header — scrolling it, with the Book Now button,
	   out from under the tap — so the click retargeted to #header (no data-lity) and the popup never
	   fired. Hold the mobile header fixed + styled on :hover. */
	body #header:hover {
		position: fixed;
		background-color: transparent;
		box-shadow: 0 20px 30px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.1);
	}
	body.scrolled #header:hover {
		background-color: var(--white);
	}
	#header .header-holder {
		padding-top: 0;
		height: 50px;
	}
	#header .logo-block,
	#header .locNavBtns,
	#header .mobHd .mob-logo-section,
	.moreInfo {
		display: none;
	}
	#header .mobHd {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 50px;
		margin: 0;
		transform: none;
	}
	#header .mobHd .btn-block,
	#header .mobHd .opener-form {
		position: static;
		transform: none;
	}
	#header .mobHd #sOpenFormMob {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 101;
		width: 50%;
		/* Fit between the header's 2px top + 2px bottom borders (50 - 4) so the Book Now / hamburger
		   divider stops at the bottom border instead of poking 2px past it. */
		height: 46px;
		white-space: nowrap;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		background: transparent;
		border: 0;
		border-right: 2px solid rgba(255, 255, 255, 0.5);
		border-radius: 0;
		color: var(--white);
		font-family: var(--bodyFont);
		font-weight: 500;
		font-size: 14px;
		line-height: 1.5;
		letter-spacing: 0.15em;
		text-transform: uppercase;
	}
	#header .menu-opener {
		position: fixed;
		top: 3px;
		right: 32px;
		left: auto;
	}
	#header .menu-opener::before,
	#header .menu-opener::after {
		background-color: var(--white);
		width: 24px;
		border-radius: 0;
	}
	body.scrolled #header {
		background-color: var(--white);
		border-top-color: rgba(51, 51, 51, 0.5);
		border-bottom-color: rgba(51, 51, 51, 0.5);
	}
	body.scrolled #header .mobHd #sOpenFormMob {
		border-right-color: rgba(51, 51, 51, 0.5);
		color: var(--black);
		transform: none;
	}
	body.scrolled #header .menu-opener::before,
	body.scrolled #header .menu-opener::after {
		background-color: var(--black);
	}
	/* Flyout drawer submenu chevrons → #767676 (Figma) */
	.mm-spn li::before {
		border-color: #767676;
		opacity: 1;
	}
	/* HP-D 15's `.nav-txt` label wrap renders as a padded block inside MmenuLight's off-canvas item link, adding ~26px per row (76px vs the intended 50px). The drawer is moved out of #header so the desktop nav rules can't reach it — collapse the span here so rows match the pre-.nav-txt height (DEV reference). Desktop keeps the span (no .mm-spn there) so the HP-D 15 focus ring still works. */
	.mm-spn .nav-txt {
		display: contents;
	}
}

@media (max-width: 1024px) {
	body #promoBanner .promo-holder .container {
		width: min(90vw, 700px);
	}
	body #promoBanner .banH {
		white-space: normal;
	}
	body #promoBanner .banH .banScript {
		margin-left: 0;
		margin-top: 0;
	}
}
@media (max-width: 991.98px) {
	body #promoBanner::before {
		display: block;
		background: rgba(0, 0, 0, 0.65);
	}
	body #promoBanner .promoBg img {
		object-position: center center;
	}
	body #promoBanner .banH {
		text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
	}
	body #promoBanner .promo-holder::after {
		content: "";
		position: absolute;
		top: min(30.8vw, 130px);
		left: 50%;
		transform: translateX(-50%);
		width: min(66.7vw, 260px);
		height: min(49.8vw, 194px);
		background: url(../images/kw-logo-stacked-white.svg) center / contain no-repeat;
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5));
		z-index: 8;
	}
}
@media (max-width: 567px) {
	/* Int-M 1: shorten to the mobile hero image aspect (567×962 → 169.665vw) so the shorter portrait banner fills with no dead space/crop. */
	body #promoBanner {
		height: min(169.665vw, 962px);
	}
	body #promoBanner .promo-holder .container {
		width: 100%;
	}
	/* Int-M 1: the old -32px margin (tuned for the taller 840px hero) pushed the headline below the now-shorter banner — sit it inside with a normal bottom pad. */
	body #promoBanner .slide_content {
		padding-bottom: clamp(16px, 6.15vw, 24px);
		padding-left: min(8.2vw, 32px);
		margin-bottom: 0;
	}
	body #promoBanner .banH {
		font-size: clamp(44px, 14.359vw, 56px);
	}
	body #promoBanner .banH .banScript {
		font-size: clamp(88px, 30.769vw, 120px);
	}
}

/* Team Block mobile — photo on top, steel copy panel below, badge straddling the seam (Figma 5825:2199) */
@media (max-width: 1024px) {
	body .kw-team {
		--team-img-h: clamp(200px, 61.5vw, 280px);
	}
	body .kw-team-bg img {
		height: var(--team-img-h);
	}
	body .kw-team-panel {
		position: static;
		width: 100%;
		text-align: center;
		padding: clamp(56px, 20.513vw, 80px) clamp(24px, 8.205vw, 32px);
		gap: clamp(16px, 6.154vw, 24px);
	}
	body .kw-team-panel h2 {
		font-size: clamp(34px, 10.256vw, 40px);
		line-height: 1.15;
	}
	body .kw-team-panel p {
		font-size: 16px;
	}
	body .kw-team-badge {
		left: calc(50% + 63px);
		top: calc(var(--team-img-h) - 50px);
		width: clamp(80px, 25.641vw, 100px);
	}
}

@media (prefers-reduced-motion: reduce) {
	body #promoBanner #vidBanner {
		display: none;
	}
}

@media (max-width: 767px) {
	body .fullContent.kw-diff-bar {
		padding: clamp(80px, 23vw, 100px) 0;
	}
	/* Swap in the mobile-proportioned news graphic (thicker 1.5px stroke) so it doesn't vanish the way
	   the wide 1919x448 desktop asset does when crushed to phone width. Only the image changes — the
	   base placement (top center / 100% auto / no-repeat, and news2's ::before 180deg flip) is kept. */
	/* HP-M #5 (news1 only): 80px between the top graphic and the image — the mobile graphic renders 100vw*0.2051 tall (viewBox 390x80), so track it (20.51vw) + 80. And 80px total below the copy: zero the text bottom pad, section bottom pad = 80 (was 72+72). */
	body #kw-news1 {
		background-image: url(../images/news-block-bg-graphic-mobile.svg);
		padding-top: calc(20.51vw + 80px);
		padding-bottom: 80px;
	}
	body #kw-news2::before {
		background-image: url(../images/news-block-bg-graphic-mobile.svg);
	}
	body #kw-news1 .nImgLt img {
		width: 100%;
		height: auto;
	}
	body #kw-news1 .nTxtRt {
		padding-top: clamp(40px, 13.59vw, 56px);
		padding-bottom: 0;
		padding-left: 0;
		padding-right: 0;
	}
	body #kw-news1 h2 {
		font-size: clamp(34px, 10.256vw, 40px);
		line-height: 1.15;
		margin-bottom: clamp(20px, 5.83vw, 24px);
	}
	body #kw-news1 p {
		font-size: 16px;
	}
	body #kw-news2 .nImgRt,
	body #kw-news2 .nImgRt picture {
		height: auto;
	}
	body #kw-news2 .nImgRt img {
		width: 100%;
		height: auto;
	}
	body #kw-news2 .nTxtLt {
		padding-top: clamp(40px, 13.59vw, 56px);
		padding-left: 0;
		padding-right: 0;
	}
	body #kw-news2 h2 {
		font-size: clamp(34px, 10.256vw, 40px);
		line-height: 1.15;
		margin-bottom: clamp(20px, 5.83vw, 24px);
	}
	body #kw-news2 p {
		font-size: 16px;
	}
}

/* HP-M #5 (news1, tablet 768–1024): same 80px gaps as phones, but here the wide desktop graphic renders 100vw*0.2335 tall (viewBox 1919x448), so track 23.35vw + 80. */
@media (min-width: 768px) and (max-width: 1024px) {
	body #kw-news1 {
		padding-top: calc(23.35vw + 80px);
		padding-bottom: 80px;
	}
	body #kw-news1 .nTxtRt {
		padding-bottom: 0;
	}
}

/* Associations logos larger in the mobile/tablet carousel — base caps at 80px */
@media (max-width: 1024px) {
	body .section-partners .partners-list li img {
		height: clamp(88px, 22vw, 110px);
	}
}

/* Associations reveal is desktop-only: partners.js mounts Splide below 1025 and slide-in's opacity/transform fight the carousel — neutralize it on the slides */
@media (max-width: 1024px) {
	body .section-partners .partners-list .splide__slide.slide-in {
		opacity: 1;
		transform: none;
	}
}


/* Location block stacks below the split: copy panel on top, map below */
@media (max-width: 1024px) {
	body.page-template-special-offers .main-frame ul.offers-list {
		grid-template-columns: minmax(0, 1fr);
	}
	body .section-location .map-block.container {
		flex-direction: column;
		height: auto;
	}
	body .section-location #map,
	body .widget.section-location #map {
		height: clamp(300px, 60vw, 420px);
	}
}

/* Footer contact bar stacks below the 3-across split (the uppercase address won't fit narrow cells) */
@media (max-width: 1024px) {
	#footer.kw-footer .footer-contact-bar {
		flex-direction: column;
	}
	#footer.kw-footer .fc-cell {
		width: 100%;
		height: auto;
		text-align: center;
	}
	#footer.kw-footer .fc-cell + .fc-cell {
		border-left: none;
		border-top: 2px solid rgba(255, 255, 255, 0.5);
	}
	/* Footer logo → stacked hero logo on mobile (HP-M #9); the extended wordmark is too wide for a phone. */
	#footer.kw-footer .footer-logo img {
		display: none;
	}
	#footer.kw-footer .footer-logo {
		display: block;
		width: min(61.8vw, 241px);
		aspect-ratio: 241 / 180;
		background: url(../images/kw-logo-stacked-white.svg) center / contain no-repeat;
	}
}

/* Book Now popup — close X on the right on mobile. The kindling base rule (left:14px) is
   authored AFTER its own mobile override, so at equal specificity it wins; force it here. */
@media (max-width: 1024px) {
	body #formPop .formPop-close {
		left: auto;
		right: 14px;
	}
}

/* Mobile: no jack, so the 940-vw band and the desktop strip layout don't apply — the clothespin covers the whole scroll-in block, and the associations render as a normal logos section. Curtain can also be toggled off per Theme Settings */
@media (max-width: 1024px) {
	.curtain-photo {
		height: 100%;
	}
	#curtainReveal .section-partners {
		display: block;
		padding-top: clamp(64px, 7.292vw, 140px);
		padding-bottom: clamp(64px, 7.292vw, 140px);
		overflow: visible;
	}
	#curtainReveal .section-partners .partners-list img {
		max-height: none;
	}
	#curtainStage[data-curtain-mobile="0"] .curtain-half {
		display: none;
	}
}

/* Interior pages — mobile (≤991.98, where the desktop header logo is hidden): portrait hero with its own stacked logo, content stacks full-width (Figma 5831:2334 / 2849:11745) */
@media (max-width: 991.98px) {
	body .kw-int-hero {
		height: min(215.38vw, 840px);
	}
	body .kw-int-hero-logo {
		display: block;
		position: absolute;
		top: clamp(80px, 33.3vw, 130px);
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
		width: min(61.8vw, 241px);
	}
	body .kw-int-hero-logo img {
		display: block;
		width: 100%;
		height: auto;
	}
	body .kw-int-hero-title {
		left: clamp(20px, 8.2vw, 32px);
		bottom: clamp(20px, 8.2vw, 32px);
		width: auto;
		max-width: calc(100% - clamp(40px, 16.4vw, 64px));
	}
	body .kw-int-hero-title h1 {
		line-height: 1.15;
	}
	body .main-frame .entry-add h1,
	body .main-frame .entry-add h2,
	body .main-frame .entry-add h3 {
		font-size: 32px;
		line-height: 1.15;
	}
	body .main-frame .entry-add h3 {
		font-size: 24px;
	}
	/* Interior content gutter ~32px: the base .container is 90%-wide + auto-centered (~19.5px
	   margin) and #content adds its own auto margin, stacking to ~59px. Normalize to full-width
	   with a single 32px padding so both gutters read ~32px (Int-M #2). */
	body .main-frame .container {
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: clamp(20px, 8.2vw, 32px);
		padding-right: clamp(20px, 8.2vw, 32px);
	}
	body .main-frame .container > #content {
		width: 100%;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
	body .main-frame .entry-add img.alignright,
	body .main-frame .entry-add img.alignleft {
		float: none;
		width: 100%;
		margin: 0 0 24px;
	}
	/* Bio popup, stacked: the whole popup is the ONE scroller (photo scrolls away with the text) — no nested text scroller */
	body .fullBio {
		overflow-y: auto;
	}
	body .fullBio .bioTxt {
		max-height: none;
		overflow: visible;
	}
}

/* Int-M 1: interior hero shortened to the mobile fallback image aspect (567×962 → 169.665vw). Placed after the ≤991.98 block so it wins at ≤567 (where the portrait mobile fallback renders); 568–991 keeps the taller box for the desktop fallback image. */
@media (max-width: 567px) {
	body .kw-int-hero {
		height: min(169.665vw, 962px);
	}
}