/*
Theme Name:   Forest Springs Dentistry
Theme URI:    https://www.forestspringsdentistry.com/
Description:  Child theme of Kadence for Forest Springs Dentistry. Design tokens live in theme.json; this file only maps them onto Kadence and styles the few site-specific pieces.
Author:       Forest Springs Dentistry
Template:     kadence
Version:      0.2.12
Requires at least: 6.5
Requires PHP: 8.1
Text Domain:  forest-springs
*/

/*
 * Colours and fonts are Kadence's --global-palette* / --global-*-font-family
 * variables, set as Kadence defaults in functions.php. Use the variables here;
 * don't hardcode hex values.
 */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
/*
 * Display type: the serif's regular weight (set in functions.php), optical
 * sizing on, and tighter tracking as the size goes up. Balanced wrapping keeps
 * centred headings from stranding a last word.
 */
h1, h2, h3, h4 {
	letter-spacing: -0.01em;
	font-optical-sizing: auto;
	text-wrap: balance;
}
h1, h2 { letter-spacing: -0.02em; }
.entry-content :is(p, li) { text-wrap: pretty; }
.entry-content a:not(.wp-block-button__link) {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/*
 * Extra tokens. The CTA gold is the brand gold (palette15) lifted a step so it
 * reads as a button on the deep forest bands; palette3 text on it is 7.7:1.
 * It is only ever used on dark backgrounds — on white, Book stays forest.
 */
:root {
	--fsd-cta: #d9a945;
	--fsd-cta-hover: #c8962e;
	--fsd-hairline: rgb(21 32 26 / 0.09);
	--fsd-radius: 18px;
	--fsd-shadow: 0 1px 2px rgb(21 32 26 / 0.04), 0 8px 24px rgb(21 32 26 / 0.06);
	--fsd-shadow-lift: 0 2px 4px rgb(21 32 26 / 0.05), 0 16px 36px rgb(21 32 26 / 0.10);
	/* Line icons for the homepage "known for" cards and the locations list,
	   used as masks so they take the palette colour. Inline SVG would be
	   stripped from page content saved without unfiltered_html. */
	--fsd-icon-headaches: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21v-3.2A7 7 0 0 1 5 12a7 7 0 0 1 14 0l1.6 3h-1.6v2.2a1.8 1.8 0 0 1-1.8 1.8H15V21'/%3E%3Cpath d='M9.6 6.8l1.4 1.9-1.9.9 1.4 1.9'/%3E%3C/svg%3E");
	--fsd-icon-jaw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 3C4.8 3 3.5 5.2 3.5 7.5c0 2 1 3.6 1.5 5.7.5 2.4.6 7.8 2.6 7.8 1.6 0 1.6-4.2 3-4.2h3.8c1.4 0 1.4 4.2 3 4.2 2 0 2.1-5.4 2.6-7.8.5-2.100 1.500-3.700 1.500-5.700C21.500 5.200 19.200 3 16.500 3c-1.800 0-2.800.8-4.500.8S9.300 3 7.500 3z'/%3E%3Cpath d='M12.600 6.800 10.400 10.600h3.200l-2.200 3.800'/%3E%3C/svg%3E");
	--fsd-icon-clenching: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5l2.25 2 2.25-2 2.25 2 2.25-2 2.25 2 2.25-2 2.25 2 2.25-2'/%3E%3Cpath d='M3 14.5l2.25-2 2.25 2 2.25-2 2.25 2 2.25-2 2.25 2 2.25-2 2.25 2'/%3E%3Cpath d='M12 2v4.2M10.3 4.6 12 6.2l1.7-1.6M12 22v-4.2M10.3 19.4l1.7-1.6 1.7 1.6'/%3E%3C/svg%3E");
	--fsd-icon-smile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 14c1 1.6 2.4 2.4 4 2.4s3-.8 4-2.4'/%3E%3Cpath d='M9 9.5v.01M15 9.5v.01' stroke-width='2.4'/%3E%3C/svg%3E");
	--fsd-icon-snoring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 14.8A8 8 0 0 1 9.2 4.5a8 8 0 1 0 10.3 10.3z'/%3E%3Cpath d='M14.5 3h3.5l-3.5 4h3.5'/%3E%3C/svg%3E");
	--fsd-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E");
	--fsd-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath fill='%23c8962e' d='M10 0l2.6 6.3 6.8.5-5.2 4.4 1.6 6.6L10 14.3 4.2 17.8l1.6-6.6L.6 6.8l6.8-.5z'/%3E%3C/svg%3E");
}

/* Visible focus everywhere — the site is carrying an accessibility statement. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--global-palette15);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Book button. Any link to the Flexbook URL gets the modal via book.js;
 * this class only styles it.
 * ------------------------------------------------------------------------- */
.fsd-book-btn,
.fsd-call-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-height: 48px;
	padding: 0.7em 1.4em;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.1;
}
.fsd-book-btn {
	background: var(--global-palette1);
	color: var(--global-palette9);
}
.fsd-book-btn:hover,
.fsd-book-btn:focus-visible {
	background: var(--global-palette2);
	color: var(--global-palette9);
}
.fsd-call-btn {
	background: var(--global-palette9);
	color: var(--global-palette1);
	box-shadow: inset 0 0 0 2px var(--global-palette1);
}

/* ---------------------------------------------------------------------------
 * Mobile action bar: Book + Call pinned to the bottom of every page below
 * 1024px. Mobile click-through is more than double desktop's, so booking has
 * to be one thumb away. Body gets matching bottom padding so the bar never
 * covers the footer.
 * ------------------------------------------------------------------------- */
.fsd-action-bar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 900;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 0.5rem;
	padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
	background: var(--global-palette9);
	box-shadow: 0 -2px 12px rgb(0 0 0 / 0.12);
}
.fsd-action-bar a { width: 100%; box-sizing: border-box; padding-inline: 0.75em; white-space: nowrap; }
/* The number is the point; drop the word "Call" where the half-width button is too narrow for both. */
@media (max-width: 399px) {
	.fsd-action-bar { font-size: 0.95rem; }
	.fsd-action-bar .fsd-call-word { display: none; }
}
@media (max-width: 1023px) {
	body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) {
	.fsd-action-bar { display: none; }
}

/* ---------------------------------------------------------------------------
 * Header brand + phone.
 * ------------------------------------------------------------------------- */
.site-branding .brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.fsd-logo-mark {
	width: 44px;
	height: 44px;
	flex: none;
}
.site-branding .site-title {
	font-family: var(--global-heading-font-family);
	font-size: 1.45rem;
	font-weight: 500;
	color: var(--global-palette1);
	white-space: nowrap;
}
.fsd-header-phone {
	font-weight: 600;
	color: var(--global-palette1);
	text-decoration: none;
	white-space: nowrap;
}

/*
 * Header space budget. At 1025px (the narrowest desktop header — below that
 * Kadence swaps to the mobile header) brand, five menu items, phone, and Book
 * only just fit on one line. Nothing may wrap; recheck at 1025px after adding
 * a menu item or lengthening a label.
 */
.header-button,
.main-navigation .menu > .menu-item > a {
	white-space: nowrap;
}
.header-navigation .header-menu-container > ul {
	flex-wrap: nowrap;
}
/* Menu items that exist only in the mobile menu (seed.php `classes`). */
.main-navigation .menu-item.fsd-menu-mobile-only { display: none; }
@media (min-width: 1025px) and (max-width: 1139px) {
	/* Mark only; the name stays in the link's accessible name. */
	#main-header .site-title-wrap {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.main-navigation .primary-menu-container > ul > li.menu-item > a {
		padding-left: 0.55em;
		padding-right: 0.55em;
	}
	.site-header-main-section-right { gap: 0.75rem; }
}

/* Footer bottom row: copyright and the legal menu, under the footer panel
   (functions.php, fsd_footer) and on the same deep green. */
.site-bottom-footer-wrap .site-footer-row-container-inner {
	background: var(--global-palette2);
	color: rgb(255 255 255 / 0.72);
	border-top: 1px solid rgb(255 255 255 / 0.12);
	font-size: 0.9375rem;
}
/* #colophon to outrank Kadence's own #colophon .footer-navigation rule. */
#colophon .site-bottom-footer-wrap a,
#colophon .footer-navigation .footer-menu-container > ul > li > a { color: rgb(255 255 255 / 0.82); }
#colophon .site-bottom-footer-wrap a:hover,
#colophon .footer-navigation .footer-menu-container > ul > li > a:hover { color: var(--global-palette9); }
.site-footer-bottom-section-1 {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem 1.5rem;
}
a[href^="tel:"] {
	white-space: nowrap;
}

/*
 * Mobile header: the name is fluid so the menu toggle never gets pushed
 * off-screen. At a flat 1.45rem it overflowed the 320px bar by ~65px.
 * The mobile header is not in the page's scrollWidth math — check
 * `row.scrollWidth > row.clientWidth` on #mobile-header when changing this.
 */
@media (max-width: 1024px) {
	#mobile-header .site-title { font-size: clamp(1rem, 5vw, 1.45rem); }
	#mobile-header .fsd-logo-mark { width: 36px; height: 36px; }
}

/* ---------------------------------------------------------------------------
 * Page-copy building blocks (core blocks + a class, so the copy stays
 * portable block markup). Used by content/*.html.
 * ------------------------------------------------------------------------- */
/*
 * Subpage column. seed.php gives every page but the homepage Kadence's
 * "narrow" layout; Kadence's own narrow width (842px) looked lost on wide
 * screens, so it is widened to sit between that and the full-width card.
 */
body.content-width-narrow { --global-content-narrow-width: 1040px; }

/*
 * Opening paragraph of a page. Set in the heading serif so it reads as an
 * introduction rather than a larger block of body text. Line length comes from
 * the subpages' narrow content column (seed.php), not a cap here: a cap left a
 * ragged empty gap to its right inside the wider card.
 */
.fsd-lede {
	font-family: var(--global-heading-font-family);
	font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.375rem);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.005em;
	color: var(--global-palette3);
	text-wrap: pretty;
}
.fsd-lede.fsd-center { max-width: 36em; margin-inline: auto; }

.entry-content h2 {
	margin-top: 2.2em;
}

/* Buttons: primary is forest; the outline style is the call button. */
.entry-content .wp-block-button .wp-block-button__link {
	border-radius: 999px;
	padding: 0.8em 1.5em;
	font-weight: 600;
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--global-palette1);
	border: 2px solid currentColor;
}

/* Comparison table: first column is row labels; scrolls sideways on phones
   rather than squeezing four columns into 320px. */
.fsd-compare {
	overflow-x: auto;
}
.fsd-compare table {
	min-width: 560px;
	border-collapse: collapse;
	font-size: 0.95em;
}
.fsd-compare th,
.fsd-compare td {
	border: 0;
	border-bottom: 1px solid var(--global-palette7);
	padding: 0.7em 0.8em;
	text-align: left;
	vertical-align: top;
}
.fsd-compare thead th {
	background: var(--global-palette1);
	color: var(--global-palette9);
	font-weight: 600;
}
.fsd-compare tbody th {
	font-weight: 600;
	color: var(--global-palette3);
	width: 26%;
}
.fsd-compare tbody td:first-of-type {
	background: var(--global-palette7);
}

/* Numbered steps. */
.entry-content .fsd-steps {
	list-style: none;
	counter-reset: fsd-step;
	padding-left: 0;
}
.fsd-steps > li {
	counter-increment: fsd-step;
	position: relative;
	padding-left: 3.2em;
	margin-bottom: 1.2em;
}
.fsd-steps > li::before {
	content: counter(fsd-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.1em;
	height: 2.1em;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--global-palette7);
	color: var(--global-palette1);
	font-weight: 700;
}

/* FAQ accordion (core Details block — native <details>, keyboard-accessible). */
.entry-content .fsd-faq {
	margin: 0;
	border-bottom: 1px solid var(--fsd-hairline);
	padding: 0.15em 0;
}
.entry-content h2 + .fsd-faq { border-top: 1px solid var(--fsd-hairline); }
.fsd-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	padding: 1em 0;
	font-family: var(--global-heading-font-family);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--global-palette3);
}
.fsd-faq summary::-webkit-details-marker { display: none; }
.fsd-faq summary::after {
	content: "+";
	flex: none;
	font-family: var(--global-body-font-family);
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1;
	color: var(--global-palette1);
	transition: transform 0.2s;
}
.fsd-faq[open] summary::after { transform: rotate(45deg); }
.fsd-faq summary:hover,
.fsd-faq[open] summary { color: var(--global-palette1); }
.fsd-faq > p {
	margin-top: 0;
	padding-right: 2.5rem;
	color: var(--global-palette4);
}

/* Closing call to action. */
.entry-content .fsd-cta {
	margin-top: 4rem;
	padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
	border-radius: 24px;
	background: var(--global-palette2);
	color: rgb(255 255 255 / 0.86);
	text-align: center;
}
.fsd-cta h2 {
	margin-top: 0;
	color: var(--global-palette9);
}
.fsd-cta a:not(.wp-block-button__link) { color: var(--global-palette9); }
.fsd-cta .wp-block-buttons { justify-content: center; }
.entry-content .fsd-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--fsd-cta);
	color: var(--global-palette3);
}
.entry-content .fsd-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--fsd-cta-hover); }
.entry-content .fsd-cta .wp-block-button.is-style-outline .wp-block-button__link { color: var(--global-palette9); }

/* ---------------------------------------------------------------------------
 * Full-width bands (homepage). Each band is a full-width Group; its content is
 * held to 1200px here rather than by block layout settings, so the markup
 * stays plain.
 *
 * Bands have no borders, so two adjacent bands with the same background merge
 * into one block. Current homepage run (2026-10-31): hero forest+media → sage
 * (trust strip) → white (known for) → cream (reviews) → white (why choose) →
 * sage (general) → white (more ways) → forest (airway) → white (Dr. Reddy) →
 * cream (payment + visit) → white (locations) → forest (CTA).
 * Re-check this after reordering bands.
 * ------------------------------------------------------------------------- */
/* .alignfull in the selector: Kadence zeroes .entry-content .alignfull padding
   and loads after this file, so equal specificity loses. */
.entry-content > .fsd-band.alignfull {
	margin: 0;
	padding: clamp(3rem, 7vw, 5.5rem) max(1.25rem, calc((100% - 1200px) / 2));
}
.fsd-band--cream  { background: var(--global-palette8); }
.fsd-band--sage   { background: var(--global-palette7); }
/*
 * **Band fill is palette2 (forest deep), not palette1.** palette1 #0b5b2f is
 * the exact green sampled from the logo, and it is right for the mark, the
 * accent and button fills — but across a full-width band the same mid-tone
 * reads washed out, because a large area of colour appears lighter than a
 * small one. palette2 #083f21 is the same hue, deeper, and it takes white
 * text at 11.9:1 instead of 8.2:1. Keep palette1 for accents, not for fills.
 */
.fsd-band--forest { background: var(--global-palette2); color: var(--global-palette9); }
.fsd-band--forest :is(h2, h3, a:not(.wp-block-button__link)) { color: var(--global-palette9); }
.fsd-band--forest .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--global-palette9);
	color: var(--global-palette1);
}
.fsd-band--forest .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--global-palette9);
}
.fsd-band > :first-child { margin-top: 0; }
.fsd-band > :last-child { margin-bottom: 0; }
.fsd-band h2 { margin-top: 0; }

.fsd-center { text-align: center; }
.fsd-center-buttons,
.fsd-center .wp-block-buttons { justify-content: center; }
.fsd-narrow { max-width: 760px; }
.fsd-band--forest.fsd-center > *,
.fsd-narrow { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------------
 * Subpage title banner. Kadence's 52px H1 read as oversized on every subpage,
 * and the long "… in Dripping Springs, TX" titles broke across two lines. The
 * geo moves to an eyebrow above the service name (see the_title filter in
 * functions.php); the title itself is lighter and smaller.
 * ------------------------------------------------------------------------- */
.page-title .entry-title {
	display: flex;
	flex-direction: column-reverse; /* geo span comes last in the markup, shows first */
	align-items: center;
	gap: 0.65rem;
	max-width: 20em;
	margin-inline: auto;
	font-size: clamp(2rem, 1.55rem + 1.2vw, 2.75rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.fsd-title-geo {
	font-family: var(--global-body-font-family);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--global-palette1);
}

.fsd-eyebrow {
	font-family: var(--global-body-font-family);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--global-palette1);
	margin-bottom: 0.9em;
}
.fsd-band--forest .fsd-eyebrow { color: var(--fsd-gold-on-dark); }

/* ---------------------------------------------------------------------------
 * Hero — full-bleed media with the copy overlaid.
 *
 * The band also carries .fsd-band--forest. That is deliberate: forest green is
 * the backdrop *behind* the media, so a failed or slow image leaves an
 * intentional-looking green hero rather than unreadable text, and the band's
 * existing white-on-forest heading and button rules apply for free.
 *
 * The H1 is the small keyword line (.fsd-eyebrow) and the large display line is
 * an H2 (.fsd-hero-display) — see design-and-seo-competitive-plan.md §2.2. The
 * visual hierarchy is the opposite of the document hierarchy on purpose; don't
 * "fix" it by promoting the display line back to an H1.
 * ------------------------------------------------------------------------- */
.fsd-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(28rem, 66vh, 40rem);
}
.fsd-hero-media {
	position: absolute;
	inset: 0;
	z-index: -1;
}
.fsd-hero-media > :is(img, video) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * Scrim. **The copy is centred, so this must be strongest through the middle**
 * — the earlier left-weighted gradient put the text over its lightest stop.
 * Darkest through the vertical band the copy occupies, easing at top and
 * bottom so the imagery still reads.
 *
 * Forest green (--global-palette1) on this would be the invisible-text bug
 * DSDA already shipped once, so every overlaid element below is explicitly
 * light. Re-measure contrast if these stops change.
 */
.fsd-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(8 32 18 / 0.80) 0%, rgb(8 32 18 / 0.84) 50%, rgb(8 32 18 / 0.62) 100%);
}
/*
 * Deliberately short. The 2026-09-20 survey measured above-the-fold hero copy
 * at 11–21 words across the market — and **not one competitor puts a paragraph
 * in the hero.** This band is headline + CTAs; body copy belongs below it.
 */
.fsd-hero-copy {
	max-width: 52rem;
	margin-inline: auto;
	text-align: center;
}
.fsd-hero-copy .wp-block-buttons { justify-content: center; }
.fsd-hero .fsd-eyebrow {
	font-family: var(--global-body-font-family, inherit);
	/* Slightly larger than the base .fsd-eyebrow: in the hero this is the H1,
	   and at 0.85em it sat under the market's ~16px eyebrows. */
	font-size: 0.95em;
	color: var(--global-palette7);
	margin-top: 0;
	margin-bottom: 0.9em;
}
.fsd-hero-display {
	font-size: clamp(2.3rem, 4.6vw, 3.6rem);
	line-height: 1.08;
	margin: 0 0 0.9em;
	/*
	 * Centred display type strands its last word without this — the headline
	 * set 572/676/193px, leaving "lifetime" alone on line three. Balanced it
	 * sets 743/711 in two lines. Progressive enhancement: browsers without
	 * support just wrap normally, which is what we had.
	 *
	 * The 52rem max-width above is what lets it reach two lines; narrowing the
	 * copy block puts the third line back.
	 */
	text-wrap: balance;
}
/* Each sentence on its own line. On phones the longer one ("Every connection
   counts.") is ~10em wide, so size the type to the viewport (100vw - the 20px
   gutters) rather than letting it wrap to three lines. */
.fsd-hero-display .fsd-hero-line { display: block; }
@media (max-width: 599px) {
	.fsd-hero-display { font-size: min(2.3rem, calc((100vw - 2.5rem) / 10.4)); }
}
/* .fsd-lede hardcodes a dark colour, which beats the band's inherited white.
   Scoped to the band so any forest band with a lede is safe, not just the hero. */
.fsd-band--forest .fsd-lede { color: var(--global-palette9); }

/*
 * Star rating line, rendered by [fsd_reviews]. Renken's cue — nothing else in
 * this market shows social proof in the hero at all. It sits *under* the
 * headline rather than above it, so the first thing read is the positioning,
 * with the rating as corroboration just before the CTAs.
 */
.entry-content .fsd-reviews {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.25rem 0.6rem;
	margin: 0.2rem 0 1.6rem;
	font-size: 0.95rem;
	font-weight: 600;
}
.fsd-stars {
	display: inline-flex;
	gap: 0.15em;
	line-height: 0;
}
.fsd-stars svg {
	width: 1.15em;
	height: 1.15em;
	fill: var(--global-palette15);
}
/*
 * --global-palette15 is the brand gold, tuned for light backgrounds; on the
 * hero scrim it measures 1.82:1, well under the 3:1 WCAG 1.4.11 wants for a
 * meaningful graphic. This lighter gold is the same hue at 5.6:1. Declared
 * once here rather than hardcoded at the use site.
 */
:root { --fsd-gold-on-dark: #f5c451; }
.fsd-band--forest .fsd-reviews { color: var(--global-palette9); }
.fsd-band--forest .fsd-stars svg { fill: var(--fsd-gold-on-dark); }

/* Pause control — required by WCAG 2.2.2, not decorative. See site.js. */
.fsd-hero-pause {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 1;
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.55);
	border-radius: 999px;
	background: rgb(8 32 18 / 0.65);
	color: var(--global-palette9);
	cursor: pointer;
}
.fsd-hero-pause:hover { background: rgb(8 32 18 / 0.85); }
.fsd-hero-pause svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.fsd-hero-pause .fsd-icon-play,
.fsd-hero-pause.is-paused .fsd-icon-pause { display: none; }
.fsd-hero-pause.is-paused .fsd-icon-play { display: block; }

/*
 * Below 1024px the fixed action bar already carries Book + Call, so the hero's
 * own Call button is a duplicate that pushes the trust strip further below the
 * fold. Hide it at exactly the action bar's breakpoint — the two must stay
 * complements, or on some width the call CTA disappears from both.
 */
@media (max-width: 1023px) {
	.fsd-hero .wp-block-button.is-style-outline { display: none; }
}

@media (max-width: 781px) {
	/* Less room to breathe, so hold the scrim dark for the whole frame. */
	.fsd-hero-media::after {
		background: linear-gradient(180deg, rgb(8 32 18 / 0.72) 0%, rgb(8 32 18 / 0.86) 100%);
	}
	.fsd-hero { min-height: clamp(24rem, 70vh, 32rem); }
}

/* ---------------------------------------------------------------------------
 * Trust strip — its own band directly under the hero, rather than a list
 * inside the hero column. Every competitor that runs one runs it full width.
 * ------------------------------------------------------------------------- */
.entry-content > .fsd-band.fsd-trust-band.alignfull {
	padding-top: clamp(1rem, 2.5vw, 1.5rem);
	padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
.entry-content .fsd-trust {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4em 2.2em;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--global-palette4);
}
.fsd-trust li::before {
	content: "✓";
	color: var(--global-palette1);
	font-weight: 700;
	margin-right: 0.5em;
}
.fsd-trust a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s, color 0.15s;
}
.fsd-trust a:hover { color: var(--global-palette1); border-bottom-color: currentColor; }
/* Phones: a centred, wrapping row left the checks ragged and orphaned "jaw pain"
   under its tick. Stack the items, tick in its own column so wrapped text hangs. */
@media (max-width: 599px) {
	.entry-content .fsd-trust {
		flex-direction: column;
		align-items: flex-start;
		width: fit-content;
		margin-inline: auto;
		gap: 0.6em;
		/* Longest item ("No more headaches, clenching, and jaw pain") is ~21.7em
		   wide with its tick column; size to the viewport so it stays on one line
		   rather than wrapping and hanging "jaw pain" under the tick. */
		font-size: min(0.95em, calc((100vw - 2.5rem) / 21.8));
	}
	.fsd-trust li {
		display: grid;
		grid-template-columns: 1.5em 1fr;
	}
	.fsd-trust li::before { margin-right: 0; }
}
.fsd-photo img {
	width: 100%;
	height: auto;
	border-radius: 20px;
	display: block;
}
.fsd-photo--portrait { max-width: 420px; margin-inline: auto; }

/* Card grid */
.fsd-cards {
	display: grid;
	gap: 1.25rem;
	margin-top: 2rem;
}
.fsd-cards--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fsd-card {
	background: var(--global-palette9);
	border: 1px solid var(--fsd-hairline);
	border-radius: var(--fsd-radius);
	box-shadow: var(--fsd-shadow);
	padding: 1.75rem;
	margin: 0;
}
.fsd-band--white { background: var(--global-palette9); }
.fsd-band--white .fsd-card { background: var(--global-palette8); box-shadow: none; }
.fsd-card h3 {
	font-size: 1.3rem;
	margin: 0 0 0.45em;
}
.fsd-card p { margin: 0; font-size: 0.95em; color: var(--global-palette5); }
.entry-content .fsd-cards > .fsd-card { margin: 0; }

/*
 * Whole card is the link target. **The heading is the patient's problem
 * ("Missing a tooth?") and the LINK carries the keyword ("Dental implants")**,
 * so the card leads with the question while internal-link anchor text still
 * says what the page is about. Renken's equivalent cards end in "Learn More",
 * which wastes that anchor. Don't collapse the two back together.
 *
 * Exactly one stretched link per card, or the hit areas overlap.
 */
.fsd-card--link { position: relative; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; }
.fsd-card--link .fsd-card-link {
	margin: auto 0 0;
	padding-top: 0.9em;
	font-size: 0.95em;
	font-weight: 600;
}
.fsd-card--link .fsd-card-link a { color: var(--global-palette1); text-decoration: none; }
.fsd-card--link .fsd-card-link a::after { content: "\00a0\2192"; }
.fsd-card--link .fsd-card-link a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fsd-card--link:hover { box-shadow: var(--fsd-shadow-lift); transform: translateY(-3px); border-color: rgb(11 91 47 / 0.25); }
.fsd-card--link:hover .fsd-card-link a { text-decoration: underline; }
.fsd-card--link:focus-within { outline: 3px solid var(--global-palette15); outline-offset: 2px; }
.fsd-card--link .fsd-card-link a:focus-visible { outline: none; }
/* "We look closer" diagnostics: three labelled icons under the blurb. */
.fsd-tech { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 1rem; }
.fsd-tech .fsd-tech-item { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--global-palette1); }
.fsd-tech .fsd-tech-item::before { content: ""; flex: none; width: 1.6rem; height: 1.6rem; background: var(--global-palette1); -webkit-mask: var(--fsd-tech-icon) center / contain no-repeat; mask: var(--fsd-tech-icon) center / contain no-repeat; }
.fsd-tech--cbct  { --fsd-tech-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5l4.5 2.5v5L12 16.500 7.500 14V9z'/%3E%3Cpath d='M7.500 9L12 11.500 16.500 9M12 11.500v5'/%3E%3Cpath d='M3 12c0 3.300 4 6 9 6s9-2.700 9-6-4-6-9-6'/%3E%3C/svg%3E"); }
.fsd-tech--itero { --fsd-tech-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3.500l5.500 5.500-3 3L12 6.500z'/%3E%3Cpath d='M12.500 11L6 17.500c-1 1-1 2.300-.2 3s2 .8 3-.2L15.500 13'/%3E%3Cpath d='M6 3.500v3M4.500 5h3'/%3E%3C/svg%3E"); }
.fsd-tech--tscan { --fsd-tech-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.500 14c0-6 3.200-9 8.500-9s8.500 3 8.500 9'/%3E%3Cpath d='M8 20v-3M12 20v-6.500M16 20v-4'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
	.fsd-card--link, .fsd-card--link:hover { transition: none; transform: none; }
}

/* General-dentistry checklist */
.entry-content .fsd-checklist { list-style: none; padding: 0; }
.fsd-checklist li {
	padding: 0.8em 0 0.8em 2em;
	border-bottom: 1px solid var(--global-palette7);
	position: relative;
}
.fsd-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0.2em;
	color: var(--global-palette1);
	font-weight: 700;
}

/* Visit us */
.fsd-nap { line-height: 1.7; }
.fsd-hours table { border-collapse: collapse; max-width: 380px; }
.entry-content .fsd-hours :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--global-palette7);
	padding: 0.5em 0.4em;
	text-align: left;
}
.fsd-hours th { font-weight: 600; }
.fsd-map { margin-top: 2rem; }
.fsd-map iframe {
	display: block;
	width: 100%;
	height: 360px;
	border: 0;
	border-radius: 16px;
}

/* ===========================================================================
 * 2026-10-31 — differentiators, reviews, payment options, footer, and a
 * refinement pass. Everything below uses the palette variables and the
 * tokens declared in :root at the top of this file.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * Header. The bar now holds two menu items, so Book can be a real button.
 * ------------------------------------------------------------------------- */
#masthead .site-main-header-wrap .site-header-row-container-inner {
	border-bottom: 1px solid var(--fsd-hairline);
}
.main-navigation .primary-menu-container > ul > li.menu-item > a {
	font-size: 0.975rem;
	font-weight: 500;
	color: var(--global-palette3);
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover { color: var(--global-palette1); }
#masthead .header-button {
	padding: 0.85em 1.55em;
	font-size: 0.975rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: 0 6px 18px rgb(11 91 47 / 0.22);
	transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}
#masthead .header-button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgb(11 91 47 / 0.28); }

/* Dropdown options: Kadence's default is small and hard to read. */
.main-navigation.header-navigation .header-menu-container ul ul li.menu-item > a {
	/* Kadence sets 12px and width: 200px at (0,3,3); this outranks it. */
	width: auto;
	min-width: 220px;
	white-space: nowrap;
	font-size: 0.975rem;
	line-height: 1.35;
	padding-top: 0.75em;
	padding-bottom: 0.75em;
}

/* Services dropdown divider, if a menu uses one. */
.header-navigation .sub-menu li.fsd-menu-divider { border-top: 1px solid rgb(255 255 255 / 0.18); }

.fsd-hero-display { font-weight: 400; letter-spacing: -0.025em; }

/* The big Book button: hero and closing band. Gold on the deep green. */
.entry-content .wp-block-button.fsd-btn-xl .wp-block-button__link {
	font-size: 1.125rem;
	padding: 1.05em 2.3em;
	letter-spacing: 0.01em;
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);
	transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.entry-content .wp-block-button.fsd-btn-xl .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.6em;
	transition: transform 0.15s;
}
.entry-content .wp-block-button.fsd-btn-xl .wp-block-button__link:hover { transform: translateY(-2px); }
.entry-content .wp-block-button.fsd-btn-xl .wp-block-button__link:hover::after { transform: translateX(3px); }
.fsd-band--forest .wp-block-button.fsd-btn-xl .wp-block-button__link {
	background: var(--fsd-cta);
	color: var(--global-palette3);
}
.fsd-band--forest .wp-block-button.fsd-btn-xl .wp-block-button__link:hover { background: var(--fsd-cta-hover); }
.fsd-hero .wp-block-buttons { align-items: center; gap: 1rem; }
@media (prefers-reduced-motion: reduce) {
	.entry-content .wp-block-button.fsd-btn-xl .wp-block-button__link,
	.entry-content .wp-block-button.fsd-btn-xl .wp-block-button__link::after,
	#masthead .header-button { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------------
 * Band headings: eyebrow → H2 → lede, centred, with even spacing.
 * ------------------------------------------------------------------------- */
.fsd-band .fsd-eyebrow + h2 { margin-top: 0; }
.fsd-band h2.fsd-center + .fsd-lede { margin-top: 0.75rem; }
.fsd-band .fsd-lede.fsd-center { color: var(--global-palette5); }
.fsd-band--forest .fsd-lede.fsd-center { color: var(--global-palette9); }

/* ---------------------------------------------------------------------------
 * "What we're known for": five icon cards. Five across on wide screens; two
 * across below, with the odd one out spanning the row so nothing is orphaned.
 * ------------------------------------------------------------------------- */
.fsd-cards--5 { grid-template-columns: 1fr; }
@media (min-width: 560px) {
	.fsd-cards--5 { grid-template-columns: repeat(2, 1fr); }
	.fsd-cards--5 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
	.fsd-cards--5 { grid-template-columns: repeat(5, 1fr); }
	.fsd-cards--5 > :last-child:nth-child(odd) { grid-column: auto; }
}
.fsd-card--icon::before {
	content: "";
	display: block;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 1.15rem;
	border-radius: 50%;
	background: var(--global-palette7);
	transition: background-color 0.2s;
}
.fsd-card--icon::after {
	content: "";
	position: absolute;
	top: calc(1.75rem + 0.7rem);
	left: calc(1.75rem + 0.7rem);
	width: 1.85rem;
	height: 1.85rem;
	background: var(--global-palette1);
	-webkit-mask: var(--fsd-icon) center / contain no-repeat;
	mask: var(--fsd-icon) center / contain no-repeat;
	transition: background-color 0.2s;
}
.fsd-card--icon:hover::before { background: var(--global-palette1); }
.fsd-card--icon:hover::after { background: var(--global-palette9); }
.fsd-icon--headaches { --fsd-icon: var(--fsd-icon-headaches); }
.fsd-icon--jaw       { --fsd-icon: var(--fsd-icon-jaw); }
.fsd-icon--clenching { --fsd-icon: var(--fsd-icon-clenching); }
.fsd-icon--smile     { --fsd-icon: var(--fsd-icon-smile); }
.fsd-icon--snoring   { --fsd-icon: var(--fsd-icon-snoring); }
.fsd-cards--5 .fsd-card h3 { font-size: 1.35rem; }

/* ---------------------------------------------------------------------------
 * Reviews band: the rating on the left, four quoted Google reviews on the right.
 * ------------------------------------------------------------------------- */
.fsd-reviews-layout { gap: clamp(2rem, 5vw, 4rem); }
.fsd-rating {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin-top: 1.75rem;
}
.entry-content .fsd-rating-score {
	flex: none;
	white-space: nowrap;
	margin: 0;
	font-family: var(--global-heading-font-family);
	font-size: clamp(3.75rem, 6vw, 5rem);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--global-palette1);
}
.fsd-rating-meta {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 0.95rem;
	line-height: 1.35;
	color: var(--global-palette5);
}
.fsd-rating-link { font-weight: 600; color: var(--global-palette1); }
.fsd-review-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
}
.entry-content .wp-block-quote.fsd-review {
	position: relative;
	margin: 0;
	padding: 2.75rem 1.75rem 1.6rem;
	border: 1px solid var(--fsd-hairline);
	border-radius: var(--fsd-radius);
	background: var(--global-palette9);
	box-shadow: var(--fsd-shadow);
	display: flex;
	flex-direction: column;
}
.fsd-review::before {
	content: "\201C";
	position: absolute;
	top: 0.35rem;
	left: 1.5rem;
	font-family: var(--global-heading-font-family);
	font-size: 4rem;
	line-height: 1;
	color: var(--global-palette15);
}
.entry-content .fsd-review p {
	margin: 0 0 1.25rem;
	font-family: var(--global-heading-font-family);
	font-size: 1.1rem;
	font-style: normal;
	line-height: 1.55;
	color: var(--global-palette3);
}
.entry-content .fsd-review cite {
	margin-top: auto;
	font-style: normal;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--global-palette5);
}
/* Five gold stars above the name: decorative, so a background, not text. */
.fsd-review cite::before {
	content: "";
	display: block;
	width: 5.6rem;
	height: 1rem;
	margin-bottom: 0.45rem;
	background: var(--fsd-star) repeat-x 0 0 / 1.12rem 1rem;
}
.fsd-review cite::after { content: " \00B7  Google review"; font-weight: 400; }

/* ---------------------------------------------------------------------------
 * Locations ("We serve these locations").
 * ------------------------------------------------------------------------- */
.entry-content .fsd-locations {
	list-style: none;
	padding: 0;
	margin: 2.25rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
}
.fsd-locations li {
	position: relative;
	margin: 0;
	padding: 1.6rem 1.6rem 1.6rem 4rem;
	border-radius: var(--fsd-radius);
	background: var(--global-palette8);
	color: var(--global-palette5);
	font-size: 0.95rem;
}
.fsd-locations li::before {
	content: "";
	position: absolute;
	top: 1.7rem;
	left: 1.5rem;
	width: 1.6rem;
	height: 1.6rem;
	background: var(--global-palette1);
	-webkit-mask: var(--fsd-icon-pin) center / contain no-repeat;
	mask: var(--fsd-icon-pin) center / contain no-repeat;
}
.fsd-locations strong {
	display: block;
	margin-bottom: 0.2rem;
	font-family: var(--global-heading-font-family);
	font-size: 1.35rem;
	font-weight: 500;
	color: var(--global-palette3);
}

/* ---------------------------------------------------------------------------
 * Cash prices (payment options page and the homepage payment column).
 * ------------------------------------------------------------------------- */
.entry-content .fsd-prices {
	margin: 1.5rem 0;
	padding: 0.5rem 1.75rem;
	border-radius: var(--fsd-radius);
	background: var(--global-palette8);
	max-width: 560px;
}
.fsd-prices table { width: 100%; border-collapse: collapse; }
.entry-content .fsd-prices :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--fsd-hairline);
	padding: 1.05em 0;
	vertical-align: baseline;
}
.entry-content .fsd-prices tr:last-child :is(th, td) { border-bottom: 0; }
.fsd-prices th { text-align: left; font-weight: 500; color: var(--global-palette3); }
.fsd-prices td {
	text-align: right;
	white-space: nowrap;
	padding-left: 1rem;
	font-family: var(--global-heading-font-family);
	font-size: 1.75rem;
	line-height: 1;
	color: var(--global-palette1);
}
.entry-content .fsd-prices--compact { padding: 0.25rem 1.25rem; background: var(--global-palette9); }
.fsd-prices--compact td { font-size: 1.3rem; }
.fsd-prices figcaption {
	margin: 0 0 0.9em;
	text-align: left;
	font-size: 0.9375rem;
	color: var(--global-palette5);
}

/* ---------------------------------------------------------------------------
 * Insurance logos: equal tiles, each linking to the insurer's site.
 * ------------------------------------------------------------------------- */
.fsd-logo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: 1rem;
	margin: 2rem 0 2.5rem;
}
.entry-content .fsd-logo-grid > .fsd-logo { margin: 0; }
.fsd-logo a {
	display: grid;
	place-items: center;
	height: 120px;
	padding: 1rem 1.1rem;
	border: 1px solid var(--fsd-hairline);
	border-radius: 14px;
	background: var(--global-palette9);
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.fsd-logo img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 60px;
	object-fit: contain;
}
.fsd-logo a:hover { border-color: rgb(11 91 47 / 0.35); box-shadow: var(--fsd-shadow); transform: translateY(-2px); }
.entry-content .fsd-plan-list {
	columns: 3 210px;
	column-gap: 2rem;
	padding-left: 1.1rem;
	color: var(--global-palette4);
}
.fsd-plan-list li { break-inside: avoid; margin: 0 0 0.45em; }
@media (prefers-reduced-motion: reduce) {
	.fsd-logo a, .fsd-logo a:hover { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------------
 * "Why it's different here" panel on every service page.
 * ------------------------------------------------------------------------- */
.entry-content .fsd-why {
	margin-top: 3.5rem;
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: 24px;
	background: var(--global-palette7);
}
.fsd-why > h2 { margin-top: 0; }
.fsd-why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 1.75rem 2.25rem;
	margin-top: 1.75rem;
}
.entry-content .fsd-why-grid > .fsd-why-item {
	margin: 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--global-palette1);
}
.fsd-why-item h3 { margin: 0 0 0.4em; font-size: 1.2rem; }
.fsd-why-item p { margin: 0; font-size: 0.975rem; color: var(--global-palette4); }

/* ---------------------------------------------------------------------------
 * Businesses We Love ([fsd_businesses]).
 * ------------------------------------------------------------------------- */
.entry-content .fsd-businesses {
	list-style: none;
	padding: 0;
	margin: 2rem 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 1.25rem;
}
.fsd-business {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.75rem;
	border: 1px solid var(--fsd-hairline);
	border-radius: var(--fsd-radius);
	background: var(--global-palette9);
	box-shadow: var(--fsd-shadow);
}
.fsd-business-logo-wrap {
	display: grid;
	place-items: center start;
	height: 72px;
	margin-bottom: 1.1rem;
}
.fsd-business-logo { max-height: 72px; max-width: 200px; width: auto; height: auto; object-fit: contain; }
.fsd-business h3 { margin: 0 0 0.4em; font-size: 1.3rem; }
.fsd-business p { margin: 0; font-size: 0.95rem; color: var(--global-palette5); }
.fsd-business .fsd-business-link { margin-top: auto; padding-top: 1rem; font-weight: 600; }
.fsd-business-link a::after { content: "\00a0\2192"; }
.fsd-businesses-empty { color: var(--global-palette5); font-style: italic; }

/* ---------------------------------------------------------------------------
 * Footer panel (functions.php, kadence_before_footer).
 * ------------------------------------------------------------------------- */
.fsd-footer {
	background: var(--global-palette2);
	color: rgb(255 255 255 / 0.78);
	padding: clamp(3rem, 6vw, 4.5rem) max(1.25rem, calc((100% - 1200px) / 2)) clamp(2.5rem, 5vw, 3.5rem);
	font-size: 0.95rem;
	line-height: 1.6;
}
.fsd-footer-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 700px) {
	.fsd-footer-inner { grid-template-columns: repeat(2, 1fr); }
	.fsd-footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
	/* Brand, hours, known for, the practice — plus Businesses We Love once the
	   office has added any. */
	.fsd-footer-inner { grid-template-columns: 1.6fr repeat(3, 1fr); }
	.fsd-footer-inner:has(> :nth-child(5)) { grid-template-columns: 1.6fr repeat(4, 1fr); }
	.fsd-footer-brand { grid-column: auto; }
}
.fsd-footer a { color: var(--global-palette9); text-decoration: none; }
.fsd-footer a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.fsd-footer p { margin: 0 0 1rem; }
.fsd-footer-name {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--global-heading-font-family);
	font-size: 1.45rem;
	color: var(--global-palette9);
}
.fsd-footer-name img { filter: brightness(0) invert(1); }
.fsd-footer .fsd-footer-tagline {
	font-family: var(--global-heading-font-family);
	font-size: 1.1rem;
	color: var(--global-palette7);
	margin-bottom: 1.4rem;
}
.fsd-footer .fsd-book-btn { background: var(--fsd-cta); color: var(--global-palette3); }
.fsd-footer .fsd-book-btn:hover { background: var(--fsd-cta-hover); color: var(--global-palette3); text-decoration: none; }
.fsd-footer-heading {
	margin: 0 0 1rem;
	font-family: var(--global-body-font-family);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fsd-gold-on-dark);
}
.fsd-footer ul { list-style: none; margin: 0; padding: 0; }
.fsd-footer li { margin: 0 0 0.55rem; }
.fsd-footer-hours { margin: 0; }
.fsd-footer-hours dt { font-weight: 600; color: var(--global-palette9); }
.fsd-footer-hours dd { margin: 0 0 0.75rem; }

/* ---------------------------------------------------------------------------
 * What to expect: four numbered steps on the sage band, white cards.
 * ------------------------------------------------------------------------- */
.fsd-steps { counter-reset: fsd-step; }
.fsd-steps .fsd-card { counter-increment: fsd-step; }
.fsd-steps .fsd-card::before {
	content: counter(fsd-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--global-palette1);
	color: var(--global-palette9);
	font-weight: 700;
}
.fsd-expect-close {
	margin: 2.25rem auto 0;
	max-width: 36em;
	font-family: var(--global-heading-font-family);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--global-palette2);
}