/*
 Theme Name:  Mosaic Block Child
 Theme URI:   https://brightmosaic.org
 Description: Child theme for Genesis Block Theme
 Author:     Damian Miklojachak/Bright Mosaic
 Version:     0.1.0
 Template:    genesis-block-theme
 Tags:        full-site-editing, block-theme
 Text Domain: mosaic-block-child
*/

.site-identity {
    padding: 12px 0;
}

.site-title-wrap {
    max-width: 25%;
}

.custom-logo-link img {
    max-width: 300px;
}
.site-header {
    /* border-bottom: 1px solid var(--border); */
    background-color: white;
}

/* --------------------------------------------------------------
   Mobile header row (<= 1000px)
   Logo left + menu toggle right in one white flex row.
   Markup: template-parts/content-menu-drawer.php (child override).
   Desktop (> 1000px) is untouched — .mobile-navigation is display:none there.
-------------------------------------------------------------- */
@media (max-width: 1000px) {
	/* White bar (parent is blue) so it doesn't clash with the logo colours. */
	.mobile-navigation {
		background: #fff;
		padding: 10px 0;
		text-align: left;
	}

	/* Keep the bar white while open so the logo stays on white (parent flips
	   the whole bar to bright blue via .toggle-active). */
	.mobile-navigation.toggle-active {
		background: #fff;
	}

	/* Open state: turn the toggle into a filled themed pill with white text +
	   icon for clear contrast. The hamburger/close <i> is a webfont icon, so it
	   follows `color` automatically. Closed state keeps teal-on-white. */
	.mobile-navigation.toggle-active .button-toggle,
	.mobile-navigation.toggle-active .button-toggle:hover,
	.mobile-navigation.toggle-active .button-toggle:focus,
	.mobile-navigation.toggle-active .button-toggle:active {
		background: var(--btn-bg-primary, #007b9c);
		color: #fff;
		border-radius: 6px;
	}

	/* The single header row. .container supplies the shared gutter/max-width. */
	.mobile-navigation .mobile-navigation__bar {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		/* gap: 1rem; */
	}

	/* Logo (left). Sized 84px tall on tablets and 72px on phones (MH-1, 2026-09-12);
	   the image is capped at the viewport minus the two 15px gutters, the 81px toggle
	   and the 16px margin, so it scales down on narrow phones instead of touching the toggle. */
	.mobile-navigation .custom-logo-link,
	.mobile-navigation .mobile-site-title {
		display: inline-flex;
		align-items: center;
		margin: 0;
		flex: 0 1 auto;
	}

	.mobile-navigation .custom-logo-link {
		min-width: 0;
		margin-right: 1.6rem;   /* minimum breathing room before the toggle */
	}

	.mobile-navigation .custom-logo-link img {
		max-height: 84px;
		width: auto;
		height: auto;
		max-width: calc(100vw - 12.7rem);
		/* Reset the centering (.custom-logo-link img has margin: 0 auto). */
		margin-left: 0;
		margin-right: 0;
	}

	.mobile-navigation .mobile-site-title {
		font-weight: 700;
		font-size: 1.25rem;
		line-height: 1.2;
		color: var(--color-heading, #004e66);
		text-decoration: none;
	}

	/* Menu toggle (right) — compact, easy tap target, teal text on white. */
	.mobile-navigation .menu-toggle {
		width: auto;
		margin: 0;
		flex: 0 0 auto;
	}

	.mobile-navigation .button-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		width: auto;
		min-height: 44px;
		padding: 8px 12px;
		font-weight: 600;
		color: var(--btn-bg-primary, #007b9c);
		/* The global `button { background: var(--btn-bg-primary) }` rule in
		   shared.css leaks onto this <button>. Keep the CLOSED toggle
		   transparent in every state so the bar stays clean. (The open state
		   below re-applies its teal pill at higher specificity.) */
		background: transparent;
	}

	/* Sticky :hover/:focus after a tap would otherwise let the global
	   `button:hover` repaint the closed toggle dark teal -- the same colour as
	   this text -- making it vanish when the menu is closed again. Reset it. */
	.mobile-navigation .button-toggle:hover,
	.mobile-navigation .button-toggle:focus,
	.mobile-navigation .button-toggle:active {
		color: var(--btn-bg-primary-hover, #005f73);
		background: transparent;
	}

	/* Opened menu panel: use a theme colour instead of the near-black default
	   (#272c30). Still a dark surface, so the existing white menu text, dotted
	   dividers, and submenu arrows keep their contrast. */
	.drawer.drawer-menu-explore {
		background: var(--color-heading, #004e66);
	}

	/* Identity now lives in the bar above; hide the original below-bar copy. */
	.site-identity {
		display: none;
	}
}

/* Phone: the logo caps at 72px tall (MH-1). */
@media (max-width: 600px) {
	.mobile-navigation .custom-logo-link img {
		max-height: 72px;
	}
}

/* --------------------------------------------------------------
   Desktop nav dropdowns (> 1000px)
   Match the mobile menu panel background (near-black default -> theme colour).
   Only affects the desktop .main-navigation flyouts; the parent's light link
   colours (#b8bfcb, hover #fff) stay >= AA contrast on this surface.
-------------------------------------------------------------- */
.main-navigation .sub-menu,
.main-navigation .children {
	background: var(--color-heading, #004e66);
}

.is-style-gpb-authority-right-background>div:last-child::after {
        background-color: #007b9c;
;
}

/* Genesis Blocks: Remove border from gpb-border style (site-wide) */
.is-style-gpb-border iframe,
.is-style-gpb-border img {
	border: 0;
}

#page {
	padding-top: 2%;
}

/* =====================================================================
   LOCATION TEMPLATE STYLES
   Minimal styles for single-wpseo_locations.php template.
   Uses existing design tokens from css/shared.css.
   ===================================================================== */

/* Hero Section: Two-Column Layout */
.bmtc-location-hero {
	background-color: var(--surface, #fff);
	padding: 3rem 1.5rem;
}

.bmtc-location-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: stretch;
}

@media (min-width: 1024px) {
	.bmtc-location-hero-inner {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}
}

/* Location Details Column */
.bmtc-location-details {
	display: flex;
	flex-direction: column;
}

/* Location Map Column */
.bmtc-location-map {
	display: flex;
	flex-direction: column;
	min-height: 420px;
}

.bmtc-location-map > * {
	flex: 1;
}

/* Breadcrumb */
.bmtc-breadcrumb {
	margin-bottom: 1.5rem;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-muted, #6b6b6b);
}

.bmtc-breadcrumb a {
	color: var(--btn-bg-primary, #007b9c);
	text-decoration: none;
}

.bmtc-breadcrumb a:hover {
	text-decoration: underline;
}

/* Location Title */
.bmtc-location-title {
	font-size: 2.5rem;
	line-height: 1.2;
	margin-bottom: 1.5rem;
	color: var(--color-heading, #004e66);
	letter-spacing: var(--ls-heading, -0.02em);
}

@media (max-width: 768px) {
	.bmtc-location-title {
		font-size: 2rem;
	}
}

/* Quick Navigation (Hero) */
/* Facts List */
.bmtc-location-facts {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem 0;
}

.bmtc-fact {
	display: flex;
	justify-content: flex-start;
	align-items: anchor-center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	line-height: var(--lh-body, 1.55);
}

.bmtc-icon {
	flex-shrink: 0;
	color: var(--btn-bg-primary, #007b9c);
	margin-top: 0.25rem;
}

.bmtc-fact-label {
	font-weight: 700;
	color: var(--color-heading, #004e66);
}

.bmtc-fact-value {
	color: var(--color-text, #2e2e2e);
}

.bmtc-fact a {
	color: var(--btn-bg-primary, #007b9c);
	text-decoration: none;
}

.bmtc-fact a:hover {
	text-decoration: underline;
}

/* Hours Toggle Button */
.bmtc-hours-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	border: none;
	color: var(--btn-bg-primary, #007b9c);
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}

.bmtc-hours-toggle:hover {
	color: var(--btn-bg-primary-hover, #005f73);
}

.bmtc-hours-toggle-icon {
	transition: transform 0.2s ease;
}

.bmtc-hours-toggle.is-expanded .bmtc-hours-toggle-icon {
	transform: rotate(180deg);
}

/* Hours Panel */
.bmtc-hours-panel {
	margin: 1rem 0 2rem 2.75rem;
	padding: 1.5rem;
	background-color: var(--surface-alt, #fafafa);
	border-radius: 8px;
	border-left: 3px solid var(--btn-bg-primary, #007b9c);
}

.bmtc-hours-list {
	margin: 0;
	display: grid;
	gap: 0.5rem;
}

.bmtc-hours-row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 1rem;
}

.bmtc-hours-day {
	font-weight: 700;
	color: var(--color-heading, #004e66);
	margin: 0;
}

.bmtc-hours-time {
	color: var(--color-text, #2e2e2e);
	margin: 0;
}

/* CTAs */
.bmtc-location-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 3rem;
}

.bmtc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	font-family: var(--font-body, "Source Sans 3", sans-serif);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-decoration: none;
	border-radius: 50px;
	transition: all 0.2s ease;
	cursor: pointer;
	border: 2px solid transparent;
	line-height: 1.5;
	outline: none;
}

.bmtc-btn--primary {
	background-color: var(--btn-bg-primary, #007b9c);
	color: var(--btn-text-primary, #fff);
	border-color: var(--btn-bg-primary, #007b9c);
}

.bmtc-btn--primary:hover {
	background-color: var(--btn-bg-primary-hover, #005f73);
	border-color: var(--btn-bg-primary-hover, #005f73);
}

.bmtc-btn--primary:focus-visible {
	outline: 3px solid var(--btn-bg-primary, #007b9c);
	outline-offset: 3px;
}

/* Location Primary CTA - Dark Teal (Secondary CTA button) */
.bmtc-location-single .bmtc-btn--primary {
	background-color: #005f73;
	border-color: #005f73;
}

.bmtc-location-single .bmtc-btn--primary:hover {
	background-color: #004a56;
	border-color: #004a56;
}

.bmtc-btn--secondary {
	background-color: transparent;
	color: var(--btn-outline, #007b9c);
	border-color: var(--btn-outline, #007b9c);
}

.bmtc-btn--secondary:hover {
	background-color: var(--btn-outline-hover-bg, #005f73);
	border-color: var(--btn-outline-hover-bg, #005f73);
	color: #fff;
}

.bmtc-btn--secondary:focus-visible {
	outline: 3px solid var(--btn-outline, #007b9c);
	outline-offset: 3px;
}

.bmtc-btn--alt {
	background-color: #ff6900;
	color: #fff;
	border-color: #ff6900;
}

.bmtc-btn--alt:hover {
	background-color: #e65c00;
	border-color: #e65c00;
}

.bmtc-btn--alt:focus-visible {
	outline: 3px solid #ff6900;
	outline-offset: 3px;
}

/* Insurance Module */
.bmtc-insurance {
	padding: 2rem;
	background-color: var(--surface-alt, #fafafa);
	border-radius: 8px;
	border: 1px solid var(--border, #e6e6e6);
}

.bmtc-insurance-title {
	font-size: 1.5rem;
	margin: 0 0 1.5rem 0;
	color: var(--color-heading, #004e66);
}

.bmtc-insurance-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 1.5rem;
	align-items: center;
	margin-bottom: 1rem;
}

.bmtc-insurance-logo {
	/* max-height: 32px; */
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
	/* opacity: 0.8; */
	transition: all 0.2s ease;
}

.bmtc-insurance-logo:hover {
	filter: grayscale(0%);
	opacity: 1;
}

.bmtc-insurance-text {
	margin: 1rem 0;
	color: var(--color-text, #2e2e2e);
	line-height: var(--lh-body, 1.55);
}

.bmtc-insurance-note {
	margin: 1rem 0 0 0;
	font-size: 0.9rem;
	color: var(--color-muted, #6b6b6b);
	font-style: italic;
}

/* Map Column */
.bmtc-location-map {
	position: relative;
	min-height: 400px;
	background-color: var(--surface-alt, #fafafa);
	border-radius: 8px;
	overflow: hidden;
}

.bmtc-map-iframe {
	width: 100%;
	height: 100%;
	min-height: 450px;
	border: 0;
	border-radius: 8px;
}

/* Deferred Map Placeholder */
.bmtc-map-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 450px;
	background-color: var(--surface-alt, #fafafa);
	background-image:
		linear-gradient(45deg, transparent 48%, var(--border, #e6e6e6) 48%, var(--border, #e6e6e6) 52%, transparent 52%),
		linear-gradient(-45deg, transparent 48%, var(--border, #e6e6e6) 48%, var(--border, #e6e6e6) 52%, transparent 52%);
	background-size: 40px 40px;
	background-position: 0 0, 20px 20px;
	border-radius: 8px;
}

.bmtc-map-load-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1.5rem 2rem;
	background-color: var(--btn-bg-primary, #007b9c);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.bmtc-map-load-btn:hover {
	background-color: var(--btn-bg-primary-hover, #005f73);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 123, 156, 0.3);
}

.bmtc-map-load-btn svg {
	width: 32px;
	height: 32px;
}

/* Featured Image + About Section */
.bmtc-featured-about-section {
	padding: 3rem 1.5rem;
	background-color: var(--surface-alt, #fafafa);
}

.bmtc-featured-about-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 768px) {
	.bmtc-featured-about-inner {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}
}

.bmtc-featured-image-column {
	position: relative;
}

.bmtc-featured-image {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bmtc-about-column {
	padding: 2rem 0 2rem 2rem;
}

.bmtc-about-title {
	font-size: 2rem;
	margin: 0 0 1rem 0;
	color: var(--color-heading, #004e66);
	font-weight: 600;
	line-height: 1.3;
}

.bmtc-about-text {
	margin: 0 0 2rem 0;
	line-height: 1.6;
	color: var(--color-text, #333);
	font-size: 18px;
}

.bmtc-about-text p {
	margin: 0 0 1rem 0;
}

.bmtc-about-text p:last-child {
	margin-bottom: 0;
}

/* Sibling centers in the same city (template-parts/location-sibling.php) */
.bmtc-sibling {
	max-width: 1200px;
	margin: 0 auto 2.5rem;
	padding: 0 2rem;
}

.bmtc-sibling-inner {
	border-left: 4px solid var(--btn-bg-primary, #007b9c);
	background: #f4f9fb;
	border-radius: 0 12px 12px 0;
	padding: 1.5rem 2rem;
}

.bmtc-sibling-title {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
	margin: 0 0 0.75rem;
	color: var(--color-heading, #004e66);
	font-weight: 600;
	line-height: 1.3;
}

.bmtc-sibling-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.bmtc-sibling-link {
	font-weight: 600;
	color: var(--btn-bg-primary, #007b9c);
	text-decoration: none;
	box-shadow: inset 0 -1px 0 currentColor;
}

.bmtc-sibling-link:hover,
.bmtc-sibling-link:focus {
	color: #005f73;
	box-shadow: inset 0 -2px 0 currentColor;
}

.bmtc-sibling-text {
	margin: 0.35rem 0 0;
	line-height: 1.5;
	color: var(--color-text, #333);
}

.bmtc-sibling-compare {
	font-weight: 600;
	color: var(--color-heading, #004e66);
}

@media (max-width: 768px) {
	.bmtc-sibling {
		padding: 0 1rem;
	}

	.bmtc-sibling-inner {
		padding: 1.25rem 1.25rem;
	}
}

/* Quick Nav within Featured/About section */
.bmtc-about-column .bmtc-location-quick-nav {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e5e5e5;
}

.bmtc-quick-nav-title {
	font-size: 1.125rem;
	margin: 0 0 1rem 0;
	color: var(--color-heading, #004e66);
	font-weight: 600;
}

.bmtc-quick-nav-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Main Content Area (below fold) */
.bmtc-location-content {
	padding: 3rem 1.5rem;
	background-color: #fff;
}

.bmtc-location-content-inner {
	max-width: 800px;
	margin: 0 auto;
}

.bmtc-location-content-inner p {
	line-height: var(--lh-body, 1.55);
	margin-bottom: 1.5rem;
}

/* Smooth Scrolling */
html {
	scroll-behavior: smooth;
}

/* Scroll Offset for Anchored Sections */
#best-for,
#program-goals,
#environment,
#location-photos,
#insurance,
#faq {
	scroll-margin-top: 90px;
}

/* Location Content Sections (Best For, Program Goals, Environment, Reviews) */
.bmtc-location-best-for,
.bmtc-location-program-goals,
.bmtc-location-environment-notes {
	padding: 3rem 1.5rem;
	background-color: #fff;
}

.bmtc-location-best-for {
	background-color: var(--surface-alt, #fafafa);
}

.bmtc-location-section-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.bmtc-section-title {
	font-size: 2rem;
	margin: 0 0 1.5rem 0;
	color: var(--color-heading, #004e66);
	font-weight: 600;
}

.bmtc-bullet-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}

.bmtc-bullet-list li {
	position: relative;
	padding-left: 1.75rem;
	line-height: 1.6;
	color: var(--color-text, #333);
}

.bmtc-bullet-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-primary, #007b9c);
	font-weight: 700;
	font-size: 1.1em;
}

.bmtc-environment-content {
	max-width: 800px;
	line-height: 1.6;
	color: var(--color-text, #333);
}

.bmtc-environment-content p {
	margin-bottom: 1rem;
}

.bmtc-environment-content p:last-child {
	margin-bottom: 0;
}

/* Reviews Section (Horizontal Card Rail) */
.bmtc-location-reviews {
	padding: 3rem 1.5rem;
	background-color: var(--surface-alt, #fafafa);
	overflow: hidden;
}

.bmtc-reviews-rail {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 1rem;
	margin: 0 -1.5rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* Hide scrollbar for cleaner look (optional) */
.bmtc-reviews-rail::-webkit-scrollbar {
	height: 6px;
}

.bmtc-reviews-rail::-webkit-scrollbar-track {
	background: transparent;
}

.bmtc-reviews-rail::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 3px;
}

.bmtc-reviews-rail::-webkit-scrollbar-thumb:hover {
	background: #aaa;
}

.bmtc-review-card {
	flex: 0 0 auto;
	width: 320px;
	min-width: 280px;
	max-width: 90vw;
	background: #fff;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.bmtc-review-stars {
	display: flex;
	gap: 2px;
	color: #f4b400;
}

.bmtc-star-icon {
	flex-shrink: 0;
}

.bmtc-review-text {
	margin: 0;
	/* font-size: 0.9375rem; */
	line-height: 1.6;
	color: var(--color-text, #333);
	display: -webkit-box;
	-webkit-line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex-grow: 1;
}

.bmtc-review-author {
	margin: 0;
	/* font-size: 0.875rem; */
	font-weight: 600;
	color: var(--color-heading, #004e66);
}

.bmtc-review-source {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	/* font-size: 0.8125rem; */
	color: var(--color-muted, #6b6b6b);
	margin-top: auto;
}

.bmtc-source-icon {
	flex-shrink: 0;
}

.bmtc-review-source-link {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: inherit;
	text-decoration: none;
}

.bmtc-review-source-link:hover {
	text-decoration: underline;
}

/* FAQ Section */
.bmtc-location-faq {
	padding: 3rem 1.5rem;
	background-color: #fff;
}

.bmtc-faq-list {
	max-width: 800px;
	margin: 0 auto;
}

.bmtc-faq-item {
	border-bottom: 1px solid #e5e5e5;
}

.bmtc-faq-item:last-child {
	border-bottom: none;
}

.bmtc-faq-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem 0;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-heading, #004e66);
	transition: color 0.2s ease;
}

.bmtc-faq-question:hover {
	color: var(--color-primary, #007b9c);
}

.bmtc-faq-question:focus {
	outline: 2px solid var(--color-primary, #007b9c);
	outline-offset: 4px;
}

.bmtc-faq-question-text {
	flex: 1;
	padding-right: 1rem;
}

.bmtc-faq-icon {
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.bmtc-faq-question[aria-expanded="true"] .bmtc-faq-icon {
	transform: rotate(180deg);
}

.bmtc-faq-answer {
	padding: 0 0 1.5rem 0;
	color: var(--color-text, #333);
	line-height: 1.6;
}

.bmtc-faq-answer p {
	margin-bottom: 1rem;
}

.bmtc-faq-answer p:last-child {
	margin-bottom: 0;
}

/* Gallery Section */
.bmtc-location-gallery {
	padding: 3rem 1.5rem;
	/* background-color: var(--surface-alt, #fafafa); */
}

.bmtc-location-gallery-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.bmtc-gallery-title {
	font-size: 2rem;
	margin: 0 0 2rem 0;
	color: var(--color-heading, #004e66);
	text-align: center;
}

.bmtc-gallery-grid {
	display: grid;
	gap: 1.5rem;
}

.bmtc-gallery-grid-featured {
	grid-template-columns: repeat(2, 1fr);
	margin-bottom: 1.5rem;
}

.bmtc-gallery-grid-regular {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.bmtc-gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bmtc-gallery-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.bmtc-gallery-link {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.bmtc-gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.bmtc-gallery-link:hover .bmtc-gallery-image {
	transform: scale(1.05);
}

.bmtc-gallery-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.75rem 1rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
	color: #fff;
	font-size: 1.9rem;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bmtc-gallery-link:hover .bmtc-gallery-caption {
	opacity: 1;
}

/* Tablet Adjustments */
@media (max-width: 1024px) {
	.bmtc-tag--mode {
		padding: 0.5rem 1rem;
		font-size: 0.9375rem;
	}
}

/* Mobile Adjustments */
@media (max-width: 768px) {
	.bmtc-location-hero {
		padding: 2rem 1rem;
	}

	.bmtc-featured-about-section {
		padding: 2rem 1rem;
	}

	.bmtc-featured-about-inner {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.bmtc-about-column {
		padding: 1.5rem 0 1.5rem 1rem;
	}

	.bmtc-about-title {
		font-size: 1.5rem;
	}

	.bmtc-quick-nav-title {
		font-size: 1rem;
	}

	.bmtc-location-map {
		min-height: 350px;
	}

	.bmtc-location-ctas {
		flex-direction: column;
	}

	.bmtc-btn {
		width: 100%;
		padding: 20px 24px;
		font-size: 16px;
	}

	.bmtc-insurance {
		padding: 1.5rem;
	}

	.bmtc-hours-panel {
		margin-left: 0;
	}

	.bmtc-hours-row {
		grid-template-columns: 100px 1fr;
	}

	.bmtc-gallery-grid-featured {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.bmtc-gallery-grid-regular {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.bmtc-gallery-title {
		font-size: 1.5rem;
	}

	.bmtc-location-gallery {
		padding: 2rem 1rem;
	}

	.bmtc-location-best-for,
	.bmtc-location-program-goals,
	.bmtc-location-environment-notes {
		padding: 2rem 1rem;
	}

	.bmtc-location-reviews {
		padding: 2rem 1rem;
	}

	.bmtc-reviews-rail {
		margin: 0 -1rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.bmtc-review-card {
		width: 280px;
		min-width: 260px;
		padding: 1.25rem;
	}

	.bmtc-location-faq {
		padding: 2rem 1rem;
	}

	.bmtc-faq-question {
		font-size: 1rem;
		padding: 1.25rem 0;
	}

	.bmtc-section-title {
		font-size: 1.5rem;
	}

	.bmtc-bullet-list {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
   WORDPRESS BLOCK BUTTON STYLES
   Default: No animation (clean, professional)
   Modifiers: Add animation classes to .wp-block-button for effects
   Usage: <div class="wp-block-button btn-jittery">...</div>
   ===================================================================== */

/* DEFAULT BUTTON - No Animation
   Shape/typography stay as theme defaults. Color is intentionally NOT
   forced here so the editor color picker can override it. See color rules below. */
.wp-block-button .wp-block-button__link,
.wp-block-button .wp-element-button,
.wp-block-button a.has-text-color {
	/* Reset/Override parent button styles */
	display: inline-block;
	text-decoration: none;
	border: none !important;
	border-radius: 50px !important;
	padding: 14px 32px !important;
	font-family: var(--font-body, "Source Sans 3", sans-serif) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	letter-spacing: 0.5px;
	line-height: 1.5;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;

	/* Base styles */
	position: relative;
	cursor: pointer;
	outline: none;
	transition: all 0.2s ease-in-out;
	transform-origin: center center;
}

/* DEFAULT COLOR — applies ONLY when no color is chosen in the editor.
   Choosing a Background color adds .has-background; choosing Text adds
   .has-text-color. We exclude those so the block editor selection wins. */
.wp-block-button .wp-block-button__link:not(.has-background),
.wp-block-button .wp-element-button:not(.has-background) {
	background: #007b9c;
}
.wp-block-button .wp-block-button__link:not(.has-text-color),
.wp-block-button .wp-element-button:not(.has-text-color) {
	color: #fff;
}

/* Default hover state - simple color change.
   Only nudges the default (no chosen color); custom-colored buttons keep
   their own color on hover instead of snapping back to teal. */
.wp-block-button .wp-block-button__link:not(.has-background):hover,
.wp-block-button .wp-element-button:not(.has-background):hover {
	background: #005f73;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

/* Focus/Active states */
.wp-block-button .wp-block-button__link:focus,
.wp-block-button .wp-block-button__link:active,
.wp-block-button .wp-element-button:focus,
.wp-block-button .wp-element-button:active {
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	outline: none !important;
}

/* Mobile adjustments */
@media (max-width: 600px) {
	.wp-block-button .wp-block-button__link,
	.wp-block-button .wp-element-button,
	.wp-block-button a.has-text-color {
		padding: 20px 24px !important;
		font-size: 16px !important;
	}
}

/* =====================================================================
   BUTTON ANIMATION MODIFIERS
   Add these classes to .wp-block-button wrapper element
   ===================================================================== */

/* 1. JITTERY (Subtlety) - Idle jitter with heartbeat hover */
.wp-block-button.btn-jittery .wp-block-button__link,
.wp-block-button.btn-jittery .wp-element-button {
	animation: jittery 2s 1;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}

.wp-block-button.btn-jittery .wp-block-button__link:hover,
.wp-block-button.btn-jittery .wp-element-button:hover {
	animation: heartbeat 0.2s 10;
}

@keyframes jittery {
	5%, 50% {
		transform: scale(1);
	}
	10% {
		transform: scale(0.9);
	}
	15% {
		transform: scale(1.15);
	}
	20% {
		transform: scale(1.15) rotate(-5deg);
	}
	25% {
		transform: scale(1.15) rotate(5deg);
	}
	30% {
		transform: scale(1.15) rotate(-3deg);
	}
	35% {
		transform: scale(1.15) rotate(2deg);
	}
	40% {
		transform: scale(1.15) rotate(0);
	}
}

@keyframes heartbeat {
	50% {
		transform: scale(1.1);
	}
}

/* 2. PULSE (Dubstep) - Pulsing rings */
.wp-block-button.btn-pulse {
	position: relative;
	display: inline-block;
}

.wp-block-button.btn-pulse::before,
.wp-block-button.btn-pulse::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border: 3px solid #007b9c;
	border-radius: 50px;
	top: 0;
	left: 0;
	z-index: -1;
	animation: pulsing 2s linear 1;
}

.wp-block-button.btn-pulse::after {
	animation: pulsing1 2s linear 1;
}

.wp-block-button.btn-pulse:hover::before {
	animation: pulsing 0.2s linear infinite;
}

.wp-block-button.btn-pulse:hover::after {
	animation: pulsing1 0.2s linear infinite;
}

@keyframes pulsing {
	0% {
		opacity: 1;
		transform: scaleY(1) scaleX(1);
	}
	20% {
		opacity: 0.5;
	}
	70% {
		opacity: 0.2;
		transform: scaleY(1.8) scaleX(1.4);
	}
	80% {
		opacity: 0;
		transform: scaleY(1.8) scaleX(1.4);
	}
	90% {
		opacity: 0;
		transform: scaleY(1) scaleX(1);
	}
}

@keyframes pulsing1 {
	0% {
		opacity: 1;
		transform: scaleY(1) scaleX(1);
	}
	20% {
		opacity: 0.5;
	}
	70% {
		opacity: 0.2;
		transform: scaleY(1.3) scaleX(1.15);
	}
	80% {
		opacity: 0;
		transform: scaleY(1.3) scaleX(1.15);
	}
	90% {
		opacity: 0;
		transform: scaleY(1) scaleX(1);
	}
}

/* 3. TYPEWRITER - Text appears character by character */
.wp-block-button.btn-typewriter .wp-block-button__link,
.wp-block-button.btn-typewriter .wp-element-button {
	overflow: hidden;
	white-space: nowrap;
	animation: typing 2s steps(12) 1;
	animation-fill-mode: forwards;
}

.wp-block-button.btn-typewriter .wp-block-button__link:hover,
.wp-block-button.btn-typewriter .wp-element-button:hover {
	animation: blink 0.3s 6;
}

@keyframes typing {
	0% {
		width: 0;
	}
	50% {
		width: 100%;
	}
	55%, 65%, 75% {
		opacity: 1;
	}
	60%, 70% {
		opacity: 0;
	}
	80% {
		width: 100%;
	}
	100% {
		width: 0;
	}
}

@keyframes blink {
	25%, 75% {
		color: transparent;
	}
	40%, 60% {
		color: #fff;
	}
}

/* 4. HAND (Handsy) - Pointing hand indicator */
.wp-block-button.btn-hand .wp-block-button__link::before,
.wp-block-button.btn-hand .wp-element-button::before {
	content: "👇";
	position: absolute;
	font-size: 40px;
	transform: scaleX(-1);
	right: -10px;
	top: -50px;
	animation: up-down 1s 2;
}

@keyframes up-down {
	50% {
		margin-top: -15px;
	}
}

/* 5. EMOJI-100 (You're 💯) - Falling 100 emojis */
.wp-block-button.btn-100 {
	position: relative;
}

.wp-block-button.btn-100::before,
.wp-block-button.btn-100::after,
.wp-block-button.btn-100 .wp-block-button__link::after {
	content: "💯";
	position: absolute;
	top: -35px;
	left: 20%;
	width: 30px;
	height: 30px;
	overflow: hidden;
	animation: give-score 2s 1;
}

.wp-block-button.btn-100::after {
	left: 50%;
	animation-delay: 0.2s;
}

.wp-block-button.btn-100 .wp-block-button__link::after {
	left: 80%;
	animation-delay: 0.4s;
}

.wp-block-button.btn-100:hover::before,
.wp-block-button.btn-100:hover::after,
.wp-block-button.btn-100:hover .wp-block-button__link::after {
	content: "👏";
}

@keyframes give-score {
	30%, 80% {
		top: -35px;
		opacity: 1;
	}
	40%, 70% {
		top: 15px;
		opacity: 0;
	}
}

/* 6. RAINBOW - Cycling background colors with heartbeat */
.wp-block-button.btn-rainbow .wp-block-button__link,
.wp-block-button.btn-rainbow .wp-element-button {
	animation: rainbow 2s 1, heartbeat 0.6s 3;
	animation-fill-mode: forwards;
}

.wp-block-button.btn-rainbow .wp-block-button__link::before,
.wp-block-button.btn-rainbow .wp-element-button::before {
	content: "🌈";
	position: absolute;
	font-size: 50px;
	left: 50%;
	top: -40px;
	margin-left: -25px;
	opacity: 0;
	transition: 0.3s ease;
}

.wp-block-button.btn-rainbow:hover .wp-block-button__link::before,
.wp-block-button.btn-rainbow:hover .wp-element-button::before {
	opacity: 1;
	animation: rotate-nonstop 0.2s infinite;
}

@keyframes rainbow {
	0% { background: #1abc9c !important; }
	10% { background: #2ecc71 !important; }
	20% { background: #3498db !important; }
	30% { background: #9b59b6 !important; }
	40% { background: #e74c3c !important; }
	50% { background: #e67e22 !important; }
	60% { background: #f1c40f !important; }
	70% { background: #2c3e50 !important; }
	80% { background: #9b59b6 !important; }
}

@keyframes rotate-nonstop {
	50% {
		transform: rotate(92deg);
	}
}

/* 7. PRESSURE (Social Pressure) - Encouraging text */
.wp-block-button.btn-pressure .wp-block-button__link::after,
.wp-block-button.btn-pressure .wp-element-button::after {
	content: "OMG YAS";
	position: absolute;
	left: 50%;
	margin-left: -35px;
	top: -15px;
	font-size: 12px;
	opacity: 0;
	transition: 0.3s ease;
}

.wp-block-button.btn-pressure:hover .wp-block-button__link::after,
.wp-block-button.btn-pressure:hover .wp-element-button::after {
	animation: omg-yes 1s;
}

@keyframes omg-yes {
	50% {
		opacity: 1;
	}
	100% {
		top: -40px;
		opacity: 0;
	}
}

/* 8. PARROT (Encouragement) - Multiple "Click Me!" labels */
.wp-block-button.btn-parrot {
	position: relative;
}

.wp-block-button.btn-parrot::before,
.wp-block-button.btn-parrot::after {
	content: "Click Me!";
	position: absolute;
	font-size: 16px;
	font-weight: 600;
	color: #004e66;
	animation: blink 0.8s 2;
	white-space: nowrap;
}

.wp-block-button.btn-parrot::before {
	top: -25px;
	left: -35px;
	transform: rotate(-20deg);
	animation: blink 0.5s 4;
}

.wp-block-button.btn-parrot::after {
	top: -20px;
	right: -35px;
	transform: rotate(15deg);
	animation: blink 0.3s 6;
}

.wp-block-button.btn-parrot:hover::before,
.wp-block-button.btn-parrot:hover::after {
	content: "Do it!";
}

/* 9. FIND-DIAGNOSTICIAN (🔍 🏥 📋) - Context emojis for "find a diagnostician" CTAs.
   Icons rest centered above the button; the drop animation plays twice once the
   button scrolls into view (js/animations.js adds .in-view). */
.wp-block-button.btn-diagnostician {
	position: relative;
}

.wp-block-button.btn-diagnostician::before,
.wp-block-button.btn-diagnostician::after,
.wp-block-button.btn-diagnostician .wp-block-button__link::after {
	position: absolute;
	top: -35px;
	width: 30px;
	height: 30px;
	overflow: hidden;
	text-align: center;
	transform: translateX(-50%); /* center each icon on its anchor point */
}

.wp-block-button.btn-diagnostician::before {
	content: "🔍";
	left: 25%;
}

.wp-block-button.btn-diagnostician::after {
	content: "🏥";
	left: 50%;
}

.wp-block-button.btn-diagnostician .wp-block-button__link::after {
	content: "📋";
	left: 75%;
}

/* Hover: sharpen the "find a diagnostician" intent (🎯 🏥 ✅) */
.wp-block-button.btn-diagnostician:hover::before {
	content: "🎯";
}

.wp-block-button.btn-diagnostician:hover .wp-block-button__link::after {
	content: "✅";
}

/* Play the staggered drop twice, only after the button scrolls into view */
.wp-block-button.btn-diagnostician.in-view::before,
.wp-block-button.btn-diagnostician.in-view::after,
.wp-block-button.btn-diagnostician.in-view .wp-block-button__link::after {
	animation: give-score 2s 2;
}

.wp-block-button.btn-diagnostician.in-view::after {
	animation-delay: 0.2s;
}

.wp-block-button.btn-diagnostician.in-view .wp-block-button__link::after {
	animation-delay: 0.4s;
}

/* Clearance above the icons at 1000px and below lives in the DIAGNOSTICIANS CALLOUT banner (HD-2, HD-5) */

/* =====================================================================
   BUTTON COLOR MODIFIERS
   Change button background color
   ===================================================================== */

/* Secondary Orange Button */
.wp-block-button.btn-secondary .wp-block-button__link,
.wp-block-button.btn-secondary .wp-element-button {
	background: #ff6900 !important;
}

.wp-block-button.btn-secondary .wp-block-button__link:hover,
.wp-block-button.btn-secondary .wp-element-button:hover {
	background: #e65c00 !important;
}

/* =====================================================================
   ACCESSIBILITY: REDUCED MOTION PREFERENCE
   ===================================================================== */

/* Respect user's motion sensitivity preferences */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button.btn-jittery .wp-block-button__link,
	.wp-block-button.btn-jittery .wp-element-button,
	.wp-block-button.btn-pulse::before,
	.wp-block-button.btn-pulse::after,
	.wp-block-button.btn-typewriter .wp-block-button__link,
	.wp-block-button.btn-typewriter .wp-element-button,
	.wp-block-button.btn-hand .wp-block-button__link::before,
	.wp-block-button.btn-hand .wp-element-button::before,
	.wp-block-button.btn-100::before,
	.wp-block-button.btn-100::after,
	.wp-block-button.btn-100 .wp-block-button__link::after,
	.wp-block-button.btn-diagnostician::before,
	.wp-block-button.btn-diagnostician::after,
	.wp-block-button.btn-diagnostician .wp-block-button__link::after,
	.wp-block-button.btn-rainbow .wp-block-button__link,
	.wp-block-button.btn-rainbow .wp-element-button,
	.wp-block-button.btn-rainbow .wp-block-button__link::before,
	.wp-block-button.btn-rainbow .wp-element-button::before {
		animation: none !important;
		transition: none !important;
	}
}

/* =====================================================================
   LOCATIONS ARCHIVE PAGE
   ===================================================================== */

/* The parent prints an empty .header-text wrapper on every archive (its title
   function is overridden to output nothing here, inc/parent-overrides.php);
   the parent's :empty rule does not match the whitespace inside it. */
.post-type-archive-wpseo_locations .header-text {
	display: none;
}

/* Archive Header */
.bmtc-locations-archive {
	padding: 3rem 0;
}

.bmtc-archive-header {
	max-width: 1200px;
	margin: 0 auto 3rem;
	padding: 0 2rem;
	text-align: center;
}

.bmtc-archive-title {
	font-size: clamp(2rem, 5vw, 3rem);
	margin-bottom: 1rem;
	color: #005f73;
}

.bmtc-archive-description {
	font-size: 1.125rem;
	color: #6b6b6b;
	max-width: 700px;
	margin: 0 auto;
}

.bmtc-locations-intro {
	line-height: 1.6;
	color: #2e2e2e;
	max-width: 800px;
	margin: 1rem auto 0;
	text-align: center;
}

/* Locations Grid */
.bmtc-locations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr));
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Location Card */
.bmtc-location-card {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.bmtc-location-card:hover,
.bmtc-location-card:focus-within {
	box-shadow: 0 8px 24px rgba(0, 95, 115, 0.15);
	transform: translateY(-4px);
}

.bmtc-location-card-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Card Image */
.bmtc-location-card-image {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f5f5f5;
}

.bmtc-location-card-image a {
	display: block;
	height: 100%;
}

.bmtc-card-thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.bmtc-location-card:hover .bmtc-card-thumbnail {
	transform: scale(1.05);
}

/* Card Content */
.bmtc-location-card-content {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	flex: 1;
}

.bmtc-location-card-title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin: 0;
	line-height: 1.2;
	font-weight: 700;
}

.bmtc-location-card-title a {
	color: #005f73;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bmtc-location-card-title a:hover,
.bmtc-location-card-title a:focus {
	color: #007b9c;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Facts List on Archive (Inherits all styling from single template) */

/* Compact hours summary for archive */
.bmtc-hours-summary {
	display: inline;
}

.bmtc-hours-more {
	color: #007b9c;
	font-style: italic;
	font-size: 0.875em;
}

/* Card CTAs */
.bmtc-location-card-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.5rem;
}

/* Small button variant for archive cards */
.bmtc-btn--small {
	/* font-size: 0.9375rem; */
	padding: 0.625rem 1.25rem;
	min-height: 40px;
}

/* Archive Pagination */
.bmtc-archive-pagination {
	max-width: 1200px;
	margin: 3rem auto 0;
	padding: 0 2rem;
}

.bmtc-archive-pagination .pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.bmtc-archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 2px solid #007b9c;
	border-radius: 6px;
	color: #007b9c;
	text-decoration: none;
	font-weight: 500;
	transition: all 0.2s ease;
}

.bmtc-archive-pagination .page-numbers:hover,
.bmtc-archive-pagination .page-numbers:focus {
	background: #007b9c;
	color: #ffffff;
}

.bmtc-archive-pagination .page-numbers.current {
	background: #005f73;
	border-color: #005f73;
	color: #ffffff;
	cursor: default;
}

.bmtc-archive-pagination .page-numbers.dots {
	border: none;
	cursor: default;
}

.bmtc-archive-pagination .page-numbers.dots:hover {
	background: transparent;
	color: #007b9c;
}

/* No Results */
.bmtc-archive-no-results {
	max-width: 1200px;
	margin: 0 auto;
	padding: 4rem 2rem;
	text-align: center;
}

.bmtc-archive-no-results p {
	font-size: 1.125rem;
	color: #6b6b6b;
}

/* =====================================================================
   RESPONSIVE: LOCATIONS ARCHIVE
   ===================================================================== */

@media (max-width: 768px) {
	.bmtc-locations-archive {
		padding: 2rem 0;
	}

	.bmtc-archive-header {
		margin-bottom: 2rem;
		padding: 0 1rem;
	}

	.bmtc-archive-title {
		font-size: 1.75rem;
	}

	.bmtc-archive-description {
		font-size: 1rem;
	}

	.bmtc-locations-grid {
		gap: 1.5rem;
		padding: 0 1rem;
	}

	.bmtc-location-card-content {
		padding: 1.25rem;
		gap: 1rem;
	}

	.bmtc-location-card-title {
		font-size: 1.6rem;
	}

	.bmtc-location-card-ctas {
		flex-direction: column;
	}

	.bmtc-btn--small {
		width: 100%;
		justify-content: center;
	}

	.bmtc-archive-pagination {
		margin-top: 2rem;
		padding: 0 1rem;
	}

	.bmtc-archive-pagination .page-numbers {
		min-width: 40px;
		min-height: 40px;
		font-size: 0.875rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bmtc-location-card {
		transition: none;
	}

	.bmtc-location-card:hover,
	.bmtc-location-card:focus-within {
		transform: none;
	}

	.bmtc-card-thumbnail {
		transition: none;
	}

	.bmtc-location-card:hover .bmtc-card-thumbnail {
		transform: none;
	}
}

/* =====================================================================
   CAREERS TEMPLATE STYLES
   Styles for single-career.php and page-careers.php templates.
   Reuses existing .bmtc- component patterns from Location templates.
   ===================================================================== */

/* ---------------------------------------------------------------------
   SINGLE CAREER PAGE
   --------------------------------------------------------------------- */

.bmtc-career-single {
	background-color: var(--surface, #fff);
}

/* Hero Section */
.bmtc-career-hero {
	background-color: var(--surface, #fff);
	padding: 3rem 1.5rem;
}

.bmtc-career-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.bmtc-career-hero-inner {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}
}

/* Career Details Column */
.bmtc-career-details {
	display: flex;
	flex-direction: column;
}

/* Career Title - Match Location Title (2.5rem desktop, 2rem mobile) */
.bmtc-career-title {
	font-size: 2.5rem;
	line-height: 1.2;
	margin-bottom: 1.5rem;
	color: var(--color-heading, #004e66);
	letter-spacing: var(--ls-heading, -0.02em);
}

@media (max-width: 768px) {
	.bmtc-career-title {
		font-size: 2rem;
	}
}

/* Career Intro - Match body text sizing */
.bmtc-career-intro {
	/* font-size: 1.125rem; */
	line-height: var(--lh-body, 1.55);
	color: var(--color-text, #2e2e2e);
	margin-bottom: 1.5rem;
}

/* Career Facts - Inherit from .bmtc-location-facts, ensure consistent sizing */
.bmtc-career-facts {
	/* margin-bottom: 1.5rem; */
}

.bmtc-career-facts .bmtc-fact {
	/* font-size: 1rem; */
	line-height: var(--lh-body, 1.55);
}

.bmtc-career-facts .bmtc-fact-label {
	/* font-size: 1rem; */
}

.bmtc-career-facts .bmtc-fact-value {
	/* font-size: 1rem; */
}

/* Highlights */
.bmtc-career-highlights {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bmtc-career-highlight {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	/* font-size: 0.95rem; */
	color: var(--color-text, #2e2e2e);
}

.bmtc-career-highlight .bmtc-icon {
	color: #28a745;
	flex-shrink: 0;
}

/* Career CTAs (reuses .bmtc-location-ctas) */
.bmtc-career-ctas {
	margin-bottom: 1.5rem;
}

/* Additional Apply Links */
.bmtc-career-apply-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.9rem;
}

.bmtc-apply-links-label {
	color: var(--color-muted, #6b6b6b);
}

.bmtc-apply-link {
	color: var(--btn-bg-primary, #007b9c);
	text-decoration: none;
}

.bmtc-apply-link:hover {
	text-decoration: underline;
}

/* Perks Block (right column) */
.single-career .bmtc-career-perks {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	background-color: var(--surface-alt, #fafafa);
	border: 1px solid var(--border, #e6e6e6);
	border-radius: 8px;
}

.bmtc-perks-title {
	margin: 0 0 0.75rem;
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--color-heading, #004e66);
}

.bmtc-career-perks .bmtc-career-highlights {
	margin: 0;
	padding: 0;
}

/* Section Nav (full-width quick links) */
.single-career .bmtc-section-nav,
.single-wpseo_locations .bmtc-section-nav {
	padding: 1rem 1.5rem;
	background-color: var(--surface-alt, #fafafa);
	border-bottom: 1px solid var(--border, #e6e6e6);
}

.bmtc-section-nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.bmtc-section-nav-label {
	/* font-size: 0.875rem; */
	font-weight: 600;
	color: var(--color-muted, #6b6b6b);
	white-space: nowrap;
}

.bmtc-section-nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.bmtc-section-nav-links a {
	/* font-size: 0.875rem; */
	font-weight: 500;
	color: var(--btn-bg-primary, #007b9c);
	text-decoration: none;
	white-space: nowrap;
}

.bmtc-section-nav-links a:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.bmtc-section-nav-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.bmtc-section-nav-links {
		gap: 0.5rem 0.75rem;
	}
}

/* Career Quick Nav - DEPRECATED (moved to section nav) */
.bmtc-career-quick-nav {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e5e5e5;
	width: 100%;
}

/* Career Image Column */
.bmtc-career-image {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.bmtc-career-featured-image {
	width: 100%;
	height: auto;
	border-radius: 12px;
	object-fit: cover;
	max-height: 450px;
}

.bmtc-career-image-placeholder {
	width: 100%;
	min-height: 300px;
	background-color: var(--surface-alt, #fafafa);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-muted, #6b6b6b);
}

/* Position Notes (optional sidebar block) */
.single-career .bmtc-career-notes {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	background-color: var(--surface-alt, #fafafa);
	border: 1px solid var(--border, #e6e6e6);
	border-radius: 8px;
}

.bmtc-notes-title {
	margin: 0 0 0.5rem;
	font-size: 1.75rem;
	font-weight: 600;
	color: var(--color-heading, #004e66);
}

.bmtc-notes-content {
	/* font-size: 0.875rem; */
	line-height: 1.6;
	color: var(--color-text, #2e2e2e);
}

.bmtc-notes-content p:last-child {
	margin-bottom: 0;
}

/* Notes Link - REMOVED (integrated into Jump To nav) */

/* Notes Section (plain section styling, no card) */
.bmtc-career-notes-section .bmtc-notes-content {
	line-height: 1.6;
	color: var(--color-text, #2e2e2e);
}

.bmtc-career-notes-section .bmtc-notes-content p:last-child {
	margin-bottom: 0;
}

/* Content Sections */
.bmtc-career-section {
	padding: 3rem 1.5rem;
}

.bmtc-career-section:nth-child(even) {
	background-color: var(--surface-alt, #fafafa);
}

.bmtc-career-section-inner {
	max-width: 800px;
	margin: 0 auto;
}

/* Two-Column Qualifications Row (Requirements + Preferred) */
.bmtc-career-qualifications-row {
	padding: 3rem 1.5rem;
	/* background-color: var(--surface-alt, #fafafa); */
}

.bmtc-career-qualifications-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {
	.bmtc-career-qualifications-inner {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}
}

.bmtc-career-qual-col {
	display: flex;
	flex-direction: column;
}

.bmtc-career-qual-col .bmtc-section-title {
	margin-bottom: 1.5rem;
}

/* Bottom CTA Box */
.bmtc-career-cta-box {
	text-align: center;
	padding: 3rem;
	border-radius: 12px;
	max-width: 700px;
}

.bmtc-cta-title {
	margin-bottom: 1rem;
	color: var(--color-heading, #004e66);
}

.bmtc-cta-text {
	margin-bottom: 1.5rem;
	color: var(--color-text, #2e2e2e);
}

.bmtc-career-cta-box .bmtc-location-ctas {
	justify-content: center;
}

/* Locations Section Chapter Divider (Career Single) */
.single-career .bmtc-career-locations {
	margin-top: 2rem;
	padding-top: 3rem;
	border-top: 1px solid var(--border, #e6e6e6);
}

/* Locations Grid in Career Single */
.bmtc-career-locations-intro {
	margin-bottom: 1.5rem;
	color: var(--color-text, #2e2e2e);
}

.bmtc-career-locations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1rem;
}

.bmtc-career-location-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	background-color: var(--surface, #fff);
	border: 1px solid var(--border, #e6e6e6);
	border-radius: 8px;
	color: var(--color-heading, #004e66);
	text-decoration: none;
	font-weight: 600;
	transition: all 0.2s ease;
}

.bmtc-career-location-link:hover {
	border-color: var(--btn-bg-primary, #007b9c);
	color: var(--btn-bg-primary, #007b9c);
}

.bmtc-career-location-link svg {
	flex-shrink: 0;
	opacity: 0.6;
}

/* EEO Statement */
.bmtc-eeo-statement {
	font-size: 0.9rem;
	color: var(--color-muted, #6b6b6b);
	text-align: center;
	font-style: italic;
}

/* ---------------------------------------------------------------------
   CAREERS HUB PAGE
   --------------------------------------------------------------------- */

.bmtc-careers-hub {
	background-color: var(--surface, #fff);
}

/* Hub Hero */
.bmtc-careers-hero {
	padding: 3rem 1.5rem;
	background-color: var(--surface, #fff);
}

.bmtc-careers-hero-inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.bmtc-careers-hub-title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: 1.5rem;
	color: var(--color-heading, #004e66);
}

.bmtc-careers-intro {
	/* font-size: 1.125rem; */
	line-height: 1.7;
	color: var(--color-text, #2e2e2e);
	max-width: 800px;
	margin: 0 auto;
}

/* Listings Section */
.bmtc-careers-listings {
	padding: 3rem 1.5rem;
	background-color: var(--surface-alt, #fafafa);
}

.bmtc-careers-listings-inner {
	max-width: 1200px;
	margin: 0 auto;
}

/* Careers Grid */
.bmtc-careers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr)); /* same column minimum as .bmtc-locations-grid so the card photos match */
	gap: 2rem;
}

/* Career Card */
.bmtc-career-card {
	background-color: var(--surface, #fff);
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--border, #e6e6e6);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
}

.bmtc-career-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.bmtc-career-card-image-link {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9; /* matches .bmtc-location-card-image */
	background: #f5f5f5;
}

.bmtc-career-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.bmtc-career-card:hover .bmtc-career-card-image {
	transform: scale(1.05);
}

.bmtc-career-card-content {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex: 1;
}

/* Card Title - Match Location Cards (clamp 1.75rem to 2.5rem) */
.bmtc-career-card-title {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin: 0;
	color: var(--color-heading, #004e66);
	line-height: 1.2;
	font-weight: 700;
}

.bmtc-career-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bmtc-career-card-title a:hover {
	color: var(--btn-bg-primary, #007b9c);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Card Intro - Match body text */
.bmtc-career-card-intro {
	/* font-size: 1rem; */
	line-height: var(--lh-body, 1.55);
	color: var(--color-text, #2e2e2e);
	margin: 0;
}

/* Card Facts - Match Location facts sizing */
.bmtc-career-card-facts {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 0.75rem;
	/* font-size: 1rem; */
}

.bmtc-career-card-fact {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--color-muted, #6b6b6b);
}

.bmtc-career-card-fact .bmtc-icon {
	color: var(--btn-bg-primary, #007b9c);
}

/* Card CTAs */
.bmtc-career-card-ctas {
	display: flex;
	gap: 0.75rem;
	margin-top: auto;
}

.bmtc-btn--small {
	padding: 10px 20px;
	/* font-size: 0.9rem; */
}

/* Empty State */
.bmtc-careers-empty {
	text-align: center;
	padding: 4rem 2rem;
}

.bmtc-careers-empty p {
	font-size: 1.125rem;
	color: var(--color-muted, #6b6b6b);
	margin-bottom: 1.5rem;
}

/* Why Work Section */
.bmtc-careers-why {
	padding: 4rem 1.5rem;
	background-color: var(--surface, #fff);
}

.bmtc-careers-why-inner {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

.bmtc-careers-why .bmtc-section-title {
	margin-bottom: 3rem;
}

.bmtc-careers-why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 2rem;
}

.bmtc-careers-why-item {
	padding: 2rem;
	background-color: var(--surface-alt, #fafafa);
	border-radius: 12px;
	text-align: center;
}

.bmtc-careers-why-item svg {
	color: var(--btn-bg-primary, #007b9c);
	margin-bottom: 1rem;
}

.bmtc-careers-why-item h3 {
	/* font-size: 1.25rem; */
	margin-bottom: 0.75rem;
	color: var(--color-heading, #004e66);
}

.bmtc-careers-why-item p {
	/* font-size: 0.95rem; */
	color: var(--color-text, #2e2e2e);
	line-height: 1.6;
	margin: 0;
}

/* Page Content */
.bmtc-careers-page-content {
	padding: 3rem 1.5rem;
}

.bmtc-careers-page-content-inner {
	max-width: 800px;
	margin: 0 auto;
}

/* ---------------------------------------------------------------------
   RESPONSIVE: CAREERS
   --------------------------------------------------------------------- */

@media (max-width: 768px) {
	.bmtc-career-hero,
	.bmtc-careers-hero {
		padding: 2rem 1rem;
	}

	.bmtc-career-title,
	.bmtc-careers-hub-title {
		font-size: 1.75rem;
	}

	.bmtc-career-section {
		padding: 2rem 1rem;
	}

	.bmtc-career-cta-box {
		padding: 2rem 1.5rem;
	}

	.bmtc-careers-grid {
		gap: 1.5rem;
	}

	.bmtc-career-card-ctas {
		flex-direction: column;
	}

	.bmtc-career-card-ctas .bmtc-btn--small {
		width: 100%;
		justify-content: center;
	}

	.bmtc-careers-why-grid {
		gap: 1.5rem;
	}

	.bmtc-careers-why-item {
		padding: 1.5rem;
	}

	.bmtc-career-locations-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bmtc-career-card {
		transition: none;
	}

	.bmtc-career-card:hover {
		transform: none;
	}

	.bmtc-career-card-image {
		transition: none;
	}

	.bmtc-career-card:hover .bmtc-career-card-image {
		transform: none;
	}

	.bmtc-career-location-link {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
   BENEFIT TAGS
   --------------------------------------------------------------------- */

.bmtc-tag--fulltime {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.15rem 0.5rem;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--tertiary, #f0f0f0);
	border-radius: 3px;
	vertical-align: middle;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
   MID-PAGE APPLY BAR (CAREER SINGLE)
   --------------------------------------------------------------------- */

.single-career .bmtc-apply-bar {
	padding: 3rem 1.5rem;
	/* background-color: var(--wp--preset--color--tertiary, #f5f5f5); */
	/* border-top: 1px solid var(--border, #e6e6e6);
	border-bottom: 1px solid var(--border, #e6e6e6); */
}

.bmtc-apply-bar-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	max-width: 800px;
	margin: 0 auto;
}

.bmtc-apply-bar-copy {
	margin: 0;
	/* font-size: 1rem; */
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-text, #2e2e2e);
}

@media (max-width: 600px) {
	.single-career .bmtc-apply-bar {
		padding: 0.875rem 1.25rem;
	}

	.bmtc-apply-bar-inner {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}

	.bmtc-apply-bar-inner .bmtc-btn {
		width: 100%;
		justify-content: center;
	}
}

/* =====================================================================
   DIAGNOSTICIANS CTA BLOCK
   Reusable callout promoting the diagnosticians directory.
   Usage: [bm_diagnosticians_cta]
   ===================================================================== */

.bmtc-diagnosticians-cta {
	background: linear-gradient(135deg, var(--wp--preset--color--primary, #007b9c) 0%, #005f7a 100%);
	border-radius: 12px;
	padding: 2rem;
	margin: 2rem 0;
	color: #fff;
}

.bmtc-diagnosticians-cta__inner {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
}

@media (min-width: 768px) {
	.bmtc-diagnosticians-cta__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
	}
}

.bmtc-diagnosticians-cta__content {
	flex: 1;
}

.bmtc-diagnosticians-cta__heading {
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: #fff;
	line-height: 1.3;
}

.bmtc-diagnosticians-cta__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

.bmtc-diagnosticians-cta__action {
	flex-shrink: 0;
}

.bmtc-diagnosticians-cta__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: #fff;
	color: var(--wp--preset--color--primary, #007b9c);
	padding: 0.875rem 1.5rem;
	border-radius: 8px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
}

.bmtc-diagnosticians-cta__button:hover,
.bmtc-diagnosticians-cta__button:focus {
	background-color: rgba(255, 255, 255, 0.9);
	transform: translateY(-2px);
	color: var(--wp--preset--color--primary, #007b9c);
	text-decoration: none;
}

.bmtc-diagnosticians-cta__arrow {
	font-size: 1.25rem;
	transition: transform 0.2s ease;
}

.bmtc-diagnosticians-cta__button:hover .bmtc-diagnosticians-cta__arrow {
	transform: translateX(4px);
}

@media (max-width: 767px) {
	.bmtc-diagnosticians-cta__button {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bmtc-diagnosticians-cta__button,
	.bmtc-diagnosticians-cta__arrow {
		transition: none;
	}

	.bmtc-diagnosticians-cta__button:hover {
		transform: none;
	}

	.bmtc-diagnosticians-cta__button:hover .bmtc-diagnosticians-cta__arrow {
		transform: none;
	}
}

/* --------------------------------------------------------------
   Header / Mobile Call CTA
   - Desktop (> 1000px): phone appended as rightmost primary-nav item.
   - Mobile (<= 1000px): fixed bottom call bar (nav collapses at 1000px).
   Markup: inc/header-phone-cta.php
-------------------------------------------------------------- */

/* Desktop: phone as a compact CTA pill inside the primary nav.
   Modeled on .bmtc-btn--secondary; aligns with existing menu items. */
/* Scoped under .main-navigation to beat the parent's `.main-navigation ul li`
   (0,1,2). vertical-align:middle centers the whole pill on the nav row rather
   than baseline-aligning it with the other (inline-block) menu items. */
.main-navigation .bmtc-header-phone {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

/* Scoped under .bmtc-header-phone so it outranks the parent theme's
   `.main-navigation ul li a { display: inline-block }` (specificity 0,1,3). */
.bmtc-header-phone .bmtc-header-phone__link {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
	padding: 8px 18px;
	border: 2px solid var(--btn-outline, #007b9c);
	border-radius: 50px;
	color: var(--btn-outline, #007b9c);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bmtc-header-phone__number {
	line-height: 1;
}

/* Scoped so the white hover text beats the parent's
   `.main-navigation a:hover { color:#0072e5 }` (0,2,1). */
.bmtc-header-phone .bmtc-header-phone__link:hover,
.bmtc-header-phone .bmtc-header-phone__link:focus {
	background-color: var(--btn-bg-primary-hover, #005f73);
	border-color: var(--btn-bg-primary-hover, #005f73);
	color: var(--btn-text-primary, #fff);
	text-decoration: none;
}

.bmtc-header-phone .bmtc-header-phone__link:focus-visible {
	outline: 3px solid var(--btn-bg-primary, #007b9c);
	outline-offset: 3px;
}

.bmtc-header-phone .bmtc-icon {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin: 0;
	/* Follow the link's text colour (teal → white on hover) instead of the
	   teal pinned by the base .bmtc-icon rule. */
	color: inherit;
}

/* The primary menu is also rendered inside the mobile drawer; hide the phone
   there so the fixed bottom bar is used on mobile instead (no duplicate CTA). */
.drawer-navigation .bmtc-header-phone {
	display: none;
}

/* Mobile: fixed bottom call bar. Hidden by default; shown <= 1000px. */
.bmtc-call-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 150;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 64px;
	padding: 0.75rem 1rem;
	padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
	background-color: var(--btn-bg-primary, #007b9c);
	color: var(--btn-text-primary, #fff);
	font-weight: 700;
	font-size: 1.875rem;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
	transition: background-color 0.2s ease;
}

.bmtc-call-bar:hover,
.bmtc-call-bar:focus,
.bmtc-call-bar:active {
	background-color: var(--btn-bg-primary-hover, #005f73);
	color: var(--btn-text-primary, #fff);
	text-decoration: none;
}

.bmtc-call-bar:focus-visible {
	outline: 3px solid var(--btn-text-primary, #fff);
	outline-offset: -5px;
}

.bmtc-call-bar .bmtc-icon {
	display: block;
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	margin: 0;
	/* Inherit the bar's white text colour (base .bmtc-icon pins teal, which
	   would make the icon invisible on the teal bar). */
	color: inherit;
}

@media (max-width: 1000px) {
	.bmtc-call-bar {
		display: flex;
	}

	/* Reserve space so the fixed bar never covers footer content. */
	body.has-bmtc-call-bar {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.bmtc-header-phone__link,
	.bmtc-call-bar {
		transition: none;
	}
}

.gb-block-post-grid header .gb-block-post-grid-title a {
	color: var(--color-heading, #007b9c);
	font-size: 32px;

}

/* --------------------------------------------------------------
   Featured image: drop the editor's forced 3/4 crop on phones, where the
   photo sits alone above the copy (the block is placed only by the synced
   "Service Header" pattern 799 on the three service pages). Tablets keep
   the crop since SP-16 (2026-09-12): the portrait fills the column beside
   the copy. Was 768px until then.
   The ratio is an inline element.style, so !important is required to win.
   Targets the figure and the img to cover whichever carries the inline style.
-------------------------------------------------------------- */
@media (max-width: 600px) {
	.wp-block-post-featured-image,
	.wp-block-post-featured-image img {
		aspect-ratio: auto !important;
	}
}

/* --------------------------------------------------------------
   Apply Modal (Careers JotForm)
   Lazy-loaded iframe modal for the "Apply Now" CTAs. The iframe is
   injected by js/apply-modal.js on first open.
-------------------------------------------------------------- */
html.bmtc-modal-open,
body.bmtc-modal-open {
	overflow: hidden;
}

.bmtc-apply-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bmtc-apply-modal.is-open {
	opacity: 1;
}

.bmtc-apply-modal[hidden] {
	display: none;
}

.bmtc-apply-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.6);
}

.bmtc-apply-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 760px;
	max-height: 92vh;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	transform: translateY(12px);
	transition: transform 0.2s ease;
}

.bmtc-apply-modal.is-open .bmtc-apply-modal__dialog {
	transform: translateY(0);
}

.bmtc-apply-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex: 0 0 auto;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid #e5e7eb;
}

.bmtc-apply-modal__title {
	margin: 0;
	line-height: 1.2;
	color: var(--color-heading, #007b9c);
}

.bmtc-apply-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.bmtc-apply-modal__close:hover,
.bmtc-apply-modal__close:focus-visible {
	background: #f1f5f9;
}

.bmtc-apply-modal__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	background: #fff;
}

.bmtc-apply-modal__iframe {
	display: block;
	width: 100%;
	height: 78vh;
	max-height: 100%;
	border: 0;
}

@media (max-width: 600px) {
	.bmtc-apply-modal {
		padding: 0;
	}

	.bmtc-apply-modal__dialog {
		max-width: none;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}

	.bmtc-apply-modal__iframe {
		height: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bmtc-apply-modal,
	.bmtc-apply-modal__dialog {
		transition: none;
	}
}

.site-footer {
    background: #fafafa;
}

/* --------------------------------------------------------------
   Desktop sticky / scroll-shrink header ( > 1000px only ).
   Mobile/tablet (<= 1000px): see HEADER MENU: STICKY BAR ON PHONES AND TABLETS (NAV-1).
   Scrolled state toggled by body.is-scrolled (js/sticky-header.js).
-------------------------------------------------------------- */
@media (min-width: 1001px) {
	/* The parent theme sets `body { overflow-x: hidden }`, which forces the
	   other axis to `auto` and turns body into a scroll container -- that
	   cancels position: sticky (the header would pin to body, which doesn't
	   scroll). `clip` still prevents horizontal scroll but does NOT create a
	   scroll container, so the header can pin to the viewport. */
	body { overflow-x: clip; }

	.site-header {
		position: -webkit-sticky; /* Safari */
		position: sticky;
		top: 0;
		z-index: 100; /* above content, below admin bar (99999); sub-menus inherit */
	}
	body.admin-bar .site-header { top: 32px; } /* clear the fixed admin bar */

	.site-identity { transition: padding 0.25s ease; }
	.custom-logo-link img {
		max-width: min(350px, calc(100vw - 750px));   /* top-of-page state; scales below 1100px so the nav clears it (MH-2) */
		height: auto;       /* preserve ratio, avoid CLS */
		transition: max-width 0.25s ease;
	}
	body.is-scrolled .site-identity {
		padding-top: 4px;
		padding-bottom: 4px;
		display: flex;                  /* collapsed state only — expanded row untouched */
		align-items: center;            /* center nav vertically against the 200px logo */
		justify-content: space-between;
	}
	body.is-scrolled .custom-logo-link img { max-width: 200px; } /* scrolled state */
}
@media (min-width: 1001px) and (prefers-reduced-motion: reduce) {
	.site-identity,
	.custom-logo-link img { transition: none; }
}

/* =====================================================================
   HOME HERO: PHONE + TABLET (HH-1 + HH-10, MOBILE_REVIEW.md)
   Scope: .home .gpb-authority-section-header-cta (the gb-columns block
   at the top of page 12). Root font-size is 62.5%, so 1rem = 10px.
   Desktop (> 1000px) is untouched. !important only where the block
   writes an inline style or a preset class already uses !important.
   ===================================================================== */

/* ---- Tablet + phone (<= 1000px): type, CTAs, insurer strip, photo ---- */
@media (max-width: 1000px) {
	.home .gpb-authority-section-header-cta h1 {
		font-size: clamp(3.4rem, 4.8vw, 4.8rem) !important;
		line-height: 1.12 !important;
		margin: 0 0 1.2rem;
		text-wrap: balance;
	}
	.home .gpb-authority-section-header-cta p.has-medium-font-size {
		font-size: clamp(1.7rem, 2.4vw, 2rem) !important;
		line-height: var(--lh-body, 1.55);
		margin: 0 0 1.6rem;
	}

	/* CTAs: full-width rows, centered labels */
	.home .gpb-authority-section-header-cta .wp-block-buttons {
		gap: 1rem;
	}
	.home .gpb-authority-section-header-cta .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
		margin: 0;
	}
	.home .gpb-authority-section-header-cta .wp-block-button .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		padding: 1.4rem 2rem !important;
		font-size: 1.7rem !important;
	}

	/* Spacer + "Insurance Plans We Accept" label */
	.home .gpb-authority-section-header-cta .wp-block-spacer {
		height: 1.2rem !important;
	}
	.home .gpb-authority-section-header-cta h2#h-insurance-plans-we-accept {
		margin: 0 0 0.8rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	/* Insurer strip: one row of four at every width (vendor: 2x2 <= 800px, 1-col <= 600px) */
	.home .gpb-authority-section-header-cta .gb-layout-columns-4 {
		overflow: visible;
		margin: 0;
		padding: 0 !important;
	}
	.home .gpb-authority-section-header-cta .gb-layout-columns-4 > .gb-layout-column-wrap.gb-is-responsive-column {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		gap: 1.2rem;
	}
	.home .gpb-authority-section-header-cta .gb-layout-columns-4 .gb-block-layout-column {
		flex: 0 1 auto;   /* natural width, shrinks when the column is narrower than the four logos (iPad) */
		width: auto;
		min-width: 0;
	}
	/* #page prefix: the parent's `#page .aligncenter { margin: 0 auto 1.5em }` outranks a class-only rule */
	.home #page .gpb-authority-section-header-cta .gb-layout-columns-4 figure.wp-block-image {
		display: block;
		margin: 0;
		clear: none;
	}
	.home .gpb-authority-section-header-cta .gb-layout-columns-4 img {
		display: block;
		width: auto !important;
		max-width: 100%;
		height: 3.2rem;
		margin: 0;
		object-fit: contain;
	}

	/* Photo: never wider than its column; lighter shadow than 0 20px 80px */
	.home #page .gpb-authority-section-header-cta > .gb-layout-column-wrap > .gb-block-layout-column:nth-child(2) figure.wp-block-image {
		display: block;
		margin: 0;
		clear: none;
	}
	.home .gpb-authority-section-header-cta > .gb-layout-column-wrap > .gb-block-layout-column:nth-child(2) img {
		width: 100% !important;
		max-width: 45.8rem;
		height: auto;
		margin: 0 auto;
	}
	.home .gpb-authority-section-header-cta .is-style-gpb-shadow img {
		box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.14);
	}

	/* Band under the hero on the iPad (HH-5): hero 36px bottom padding + next block 90px top padding */
	.home .gpb-authority-section-header-cta.wp-block-genesis-blocks-gb-columns {
		padding-bottom: 2.4rem !important;
	}
	.home .gpb-authority-section-header-cta + .wp-block-genesis-blocks-gb-columns {
		padding-top: 3.2rem !important;
	}
}

/* ---- Phone (<= 600px): stack tightening ---- */
@media (max-width: 600px) {
	.home .gpb-authority-section-header-cta.wp-block-genesis-blocks-gb-columns {
		padding: 1.2rem 1.6rem 2rem !important;
	}
	.home .gpb-authority-section-header-cta > .gb-layout-column-wrap {
		row-gap: 1.6rem;
	}
	.home .gpb-authority-section-header-cta h1 {
		font-size: clamp(3.2rem, 9vw, 4.4rem) !important;
	}
	.home .gpb-authority-section-header-cta p.has-medium-font-size {
		font-size: clamp(1.7rem, 4.6vw, 1.9rem) !important;
	}
	/* Nested 1-col wrapper: drop the inline 28px indent so copy aligns with the H1 */
	.home .gpb-authority-section-header-cta .gb-block-layout-column-inner[style] {
		padding-left: 0 !important;
	}
	/* The GPB grey slab makes no sense once the columns stack */
	.home .gpb-authority-section-header-cta.is-style-gpb-authority-right-background > div:last-child::before {
		display: none;
	}
}

/* ---- Phone (<= 600px): no hero photo (HH-10, Option F); the copy, CTAs and insurer strip own the fold ----
   The photo column is display:none at <= 600px. The image is loading="lazy", so with no box
   it is never requested. Tablet (601 to 1000px) keeps the two-column layout with the photo. */
@media (max-width: 600px) {
	.home .gpb-authority-section-header-cta > .gb-layout-column-wrap > .gb-block-layout-column:nth-child(2) {
		display: none;
	}
	.home .gpb-authority-section-header-cta.gb-layout-columns-2 > .gb-layout-column-wrap.gb-is-responsive-column {
		grid-template-areas: "col1";
	}
	.home .gpb-authority-section-header-cta h1 {
		font-size: clamp(3.4rem, 10vw, 4.6rem) !important;
	}
	.home .gpb-authority-section-header-cta.wp-block-genesis-blocks-gb-columns {
		padding-top: 2rem !important;
	}
}

/* =====================================================================
   HOME SERVICES: PHONE + TABLET (HS-1 + HS-2 A5, MOBILE_REVIEW.md)
   Scope: .home .gpb-authority-section-blog-posts (the post grid on page 12;
   no other rule anywhere targets that className). The section wrapper is
   reached with :has() (all evergreen browsers since 2023).
   Root font-size is 62.5%, so 1rem = 10px. Desktop (> 1000px) untouched.
   ===================================================================== */
@media (max-width: 1000px) {
	/* Section wrapper: symmetric padding (inline 5em/4em; the hero banner already sets the top to 3.2rem) */
	.home .wp-block-genesis-blocks-gb-columns.alignfull:has(.gpb-authority-section-blog-posts) {
		padding-top: 3.2rem !important;
		padding-bottom: 2.4rem !important;
	}
	.home .wp-block-genesis-blocks-gb-columns.alignfull:has(.gpb-authority-section-blog-posts) > .gb-layout-column-wrap h2 {
		font-size: clamp(2.8rem, 5vw, 4rem) !important;
		line-height: 1.15 !important;
		margin: 0 0 2rem;
		text-wrap: balance;
	}

	/* Cards: no trailing margin, row gap instead of article margins */
	.home .gpb-authority-section-blog-posts .is-grid {
		gap: 2.4rem 2rem;
	}
	.home .gpb-authority-section-blog-posts .is-grid article {
		margin-bottom: 0;
	}
	.home .gpb-authority-section-blog-posts .gb-block-post-grid-image {
		margin-bottom: 1.2rem;
	}
	.home .gpb-authority-section-blog-posts .gb-block-post-grid-image img {
		border-radius: 1.2rem;
	}
	/* Titles: the child rule sets 32px on the link at every width; fluid here */
	.home .gpb-authority-section-blog-posts header .gb-block-post-grid-title {
		margin-bottom: 0.8rem;
	}
	.home .gpb-authority-section-blog-posts header .gb-block-post-grid-title a {
		font-size: clamp(2rem, 2.8vw, 2.4rem);
		line-height: 1.2;
	}
	.home .gpb-authority-section-blog-posts .gb-block-post-grid-text p {
		font-size: 1.6rem;
		line-height: 1.5;
		margin-bottom: 1rem;
	}
	.home .gpb-authority-section-blog-posts .gb-block-post-grid-more-link {
		font-size: 1.6rem;
		color: var(--btn-bg-primary, #007b9c);
	}
}

/* ---- Phone (<= 600px): thumbnail beside title + excerpt, link on its own full-width row (HS-2, variant A5) ----
   The text wrapper and the excerpt wrapper get display:contents so the header, the excerpt
   paragraph and the link paragraph become grid items; the thumb spans the two text rows. */
@media (max-width: 600px) {
	.home .gpb-authority-section-blog-posts .is-grid {
		gap: 2.4rem;
	}
	.home .gpb-authority-section-blog-posts .is-grid article {
		display: grid;
		grid-template-columns: 11rem minmax(0, 1fr);
		grid-template-areas:
			"img title"
			"img body"
			"link link";
		column-gap: 1.6rem;
		align-items: center;
	}
	.home .gpb-authority-section-blog-posts .gb-block-post-grid-image {
		grid-area: img;
		margin: 0;
		align-self: center;
	}
	.home .gpb-authority-section-blog-posts .gb-block-post-grid-image img {
		aspect-ratio: 1;
		object-fit: cover;
	}
	.home .gpb-authority-section-blog-posts .gb-block-post-grid-text,
	.home .gpb-authority-section-blog-posts .gb-block-post-grid-excerpt {
		display: contents;
	}
	.home .gpb-authority-section-blog-posts header.gb-block-post-grid-header {
		grid-area: title;
		align-self: end;
	}
	.home .gpb-authority-section-blog-posts header .gb-block-post-grid-title {
		margin-bottom: 0.6rem;
	}
	.home .gpb-authority-section-blog-posts header .gb-block-post-grid-title a {
		font-size: 2rem;
	}
	.home .gpb-authority-section-blog-posts .gb-block-post-grid-excerpt > p:first-of-type {
		grid-area: body;
		align-self: start;
		font-size: 1.5rem;
		line-height: 1.5;
		margin: 0;
	}
	.home .gpb-authority-section-blog-posts .gb-block-post-grid-excerpt > p:last-of-type {
		grid-area: link;
		margin: 0.2rem 0 0;
	}
	.home .gpb-authority-section-blog-posts .gb-block-post-grid-more-link {
		font-size: 1.5rem;
		padding-block: 0.3rem;   /* keeps the tap target at 24px or more */
	}
}

/* =====================================================================
   DIAGNOSTICIANS CALLOUT: PHONE + TABLET (HD-1 + HD-2 + SP-3, MOBILE_REVIEW.md)
   Scope: the top-level grey gb-columns band that holds the btn-diagnostician
   button, reached with :has(); the button class occurs once per page, on the
   home (12) and ABA (75). Shared since SP-3 (2026-09-12); it was .home-scoped.
   Root font-size is 62.5%, so 1rem = 10px. Desktop (> 1000px) untouched.
   ===================================================================== */
@media (max-width: 1000px) {
	.entry-content > .wp-block-genesis-blocks-gb-columns:has(.btn-diagnostician) {
		padding-top: 4.4rem !important;
		padding-bottom: 4.4rem !important;
		background-color: #f4f4f4;   /* HD-5: the home block sets it in the editor, the ABA one does not */
	}
	/* HD-5: the button column sits on the copy's baseline and the button drops 60px so the icons
	   (30px at top:-35px) clear the H2 at every tablet width; at 1000px they used to sit on it */
	.entry-content > .wp-block-genesis-blocks-gb-columns:has(.btn-diagnostician) .gb-2-col-wideleft > .gb-layout-column-wrap > .gb-block-layout-column:nth-child(2) {
		align-self: end;
	}
	.entry-content > .wp-block-genesis-blocks-gb-columns:has(.btn-diagnostician) .wp-block-buttons > .wp-block-button.btn-diagnostician {
		margin-top: 6rem;
	}
	.entry-content > .wp-block-genesis-blocks-gb-columns:has(.btn-diagnostician) h2 {
		font-size: clamp(2.6rem, 5vw, 4rem) !important;
		line-height: 1.15 !important;
		margin: 0 0 1.6rem;
		text-wrap: balance;
	}
	.entry-content > .wp-block-genesis-blocks-gb-columns:has(.btn-diagnostician) p.has-medium-font-size {
		font-size: clamp(1.7rem, 2.4vw, 1.9rem) !important;
		line-height: var(--lh-body, 1.55);
		margin-bottom: 0;
	}
	/* Hover swaps the icons; on touch a tap can leave the hover state stuck, so hover-only devices only */
	@media (hover: none) {
		.wp-block-button.btn-diagnostician:hover::before {
			content: "🔍";
		}
		.wp-block-button.btn-diagnostician:hover .wp-block-button__link::after {
			content: "📋";
		}
	}
}

/* ---- Phone (<= 600px): stacked copy, full-width button aligned with the copy ---- */
@media (max-width: 600px) {
	.entry-content > .wp-block-genesis-blocks-gb-columns:has(.btn-diagnostician) .gb-2-col-wideleft > .gb-layout-column-wrap {
		row-gap: 0;
	}
	.entry-content > .wp-block-genesis-blocks-gb-columns:has(.btn-diagnostician) .wp-block-buttons {
		justify-content: flex-start;
	}
	.entry-content > .wp-block-genesis-blocks-gb-columns:has(.btn-diagnostician) .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
		margin-inline: 0;
		margin-bottom: 0;   /* margin-top is set per option (icon clearance) */
	}
	.entry-content > .wp-block-genesis-blocks-gb-columns:has(.btn-diagnostician) .wp-block-button .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		padding: 1.4rem 2rem !important;
		font-size: 1.7rem !important;
	}
}

/* ---- Phone (<= 600px): icons kept above the full-width button (HD-2, Option A); the 6rem clearance
   moved into the 1000px block with HD-5 so tablets get it too ---- */

/* =====================================================================
   PLAY SPACES PATTERN: PHONE + TABLET (PS-1 + PS-2, MOBILE_REVIEW.md)
   Scope: .gpb-authority-section-cta-two, the className of the synced
   "Indoor & Outdoor Play Spaces" pattern (wp_block 1029), so the rules
   follow the pattern wherever it is placed: home, ABA, Speech, OT.
   Root font-size is 62.5%, so 1rem = 10px. Desktop (> 1000px) untouched.
   ===================================================================== */
@media (max-width: 1000px) {
	.gpb-authority-section-cta-two {
		padding-top: 3.2rem !important;
		padding-bottom: 3.2rem !important;
	}
	.gpb-authority-section-cta-two p.is-style-gpb-capital-text {
		font-size: 1.3rem !important;
		letter-spacing: 0.06em;
		margin-bottom: 0.8rem;
	}
	.gpb-authority-section-cta-two h2 {
		font-size: clamp(2.6rem, 5vw, 4rem) !important;
		line-height: 1.15;
		margin: 0 0 1.2rem;
		text-wrap: balance;
	}
	.gpb-authority-section-cta-two p.has-medium-font-size {
		font-size: clamp(1.7rem, 2.4vw, 1.9rem) !important;
		line-height: var(--lh-body, 1.55);
		margin-bottom: 1.2rem;
	}
	.gpb-authority-section-cta-two p.has-large-font-size {
		font-size: clamp(2.2rem, 3.6vw, 2.8rem) !important;
		line-height: 1.2;
		margin-bottom: 0;
	}
	.gpb-authority-section-cta-two .wp-block-spacer {
		height: 1.6rem !important;
	}
	.gpb-authority-section-cta-two .is-style-gpb-shadow img {
		box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.14);
	}
	/* Tablet: the copy spans the full width, the four photos sit in one row underneath
	   (vendor keeps three columns of 220px down to 600px) */
	.gpb-authority-section-cta-two.gb-layout-columns-3 > .gb-layout-column-wrap {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "col1 col1" "col2 col3";
		row-gap: 2rem;
		column-gap: 1.6rem;
	}
	.gpb-authority-section-cta-two > .gb-layout-column-wrap > .gb-block-layout-column:nth-child(2) > .gb-block-layout-column-inner,
	.gpb-authority-section-cta-two > .gb-layout-column-wrap > .gb-block-layout-column:nth-child(3) > .gb-block-layout-column-inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.6rem;
		margin: 0 !important;   /* the second column carries an inline margin-bottom: 7px */
	}
	/* #page prefix: the parent's `#page .aligncenter { clear: both; margin: 0 auto 1.5em }` outranks a
	   class-only rule and gave the first photo (the only one with align:center) a 27px bottom margin */
	#page .gpb-authority-section-cta-two figure.wp-block-image {
		margin: 0;
		clear: none;
	}
}

@media (max-width: 600px) {
	.gpb-authority-section-cta-two.is-style-gpb-authority-right-background > div:last-child::before {
		display: none;
	}
	.gpb-authority-section-cta-two .gb-layout-columns-1[style] {
		padding-left: 0 !important;
	}
}

/* ---- Phone (<= 600px): the four photos form a 2x2 grid under the copy (PS-2) ---- */
@media (max-width: 600px) {
	.gpb-authority-section-cta-two.gb-layout-columns-3 > .gb-layout-column-wrap {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "col1 col1" "col2 col3";
		row-gap: 1.6rem;
		column-gap: 1.2rem;
	}
	.gpb-authority-section-cta-two > .gb-layout-column-wrap > .gb-block-layout-column:nth-child(2) > .gb-block-layout-column-inner,
	.gpb-authority-section-cta-two > .gb-layout-column-wrap > .gb-block-layout-column:nth-child(3) > .gb-block-layout-column-inner {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}
}

/* =====================================================================
   HOME REVIEWS BAND: PHONE + TABLET (RV-2 + RV-4, MOBILE_REVIEW.md)
   Scope: .home .gb-slate-section-testimonials (the dimmed band on page 12).
   ===================================================================== */
@media (max-width: 1000px) {
	.home .gb-slate-section-testimonials {
		padding-top: 3.2rem !important;
		padding-bottom: 3.2rem !important;
	}
	.home .gb-slate-section-testimonials h2 {
		font-size: clamp(2.6rem, 5vw, 4rem) !important;
		line-height: 1.15;
		margin: 0;
	}
	.home .gb-slate-section-testimonials .gb-block-container {
		margin-bottom: 2rem !important;
	}
	/* Tablet: two columns, six cards (nine made a 2,000px band) */
	.home .gb-slate-section-testimonials .bm-reviews-card:nth-child(n + 7) {
		display: none;
	}
}

/* ---- Phone (<= 600px): swipeable rail of all nine cards, scroll snap, no JS (RV-4). Also the Contact page's
   reviews (CT-5, page 1158), so the block looks the same wherever it appears; both pages have 16px gutters. ---- */
@media (max-width: 600px) {
	.page-id-1158 .bm-reviews-grid,
	.home .gb-slate-section-testimonials .bm-reviews-grid {
		display: flex;
		gap: 1.2rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0 -1.6rem;
		padding: 0 1.6rem 0.4rem;
	}
	.page-id-1158 .bm-reviews-grid::-webkit-scrollbar,
	.home .gb-slate-section-testimonials .bm-reviews-grid::-webkit-scrollbar {
		display: none;
	}
	.page-id-1158 .bm-reviews-card,
	.page-id-1158 .bm-reviews-card:nth-child(n + 7),
	.home .gb-slate-section-testimonials .bm-reviews-card,
	.home .gb-slate-section-testimonials .bm-reviews-card:nth-child(n + 7) {
		display: flex;
		flex: 0 0 84%;
		scroll-snap-align: center;
	}
	.page-id-1158 .bm-reviews-text,
	.home .gb-slate-section-testimonials .bm-reviews-text {
		-webkit-line-clamp: 6;
	}
}

/* =====================================================================
   ABOUT-US BLOCK: PHONE + TABLET (WF-1 + WF-2 + SP-10, MOBILE_REVIEW.md)
   Scope: .gpb-authority-section-about-us, the home Why Families band (page 12)
   and the "How X Helps" band on the three service pages. The WF-1 base is
   shared since SP-10 (2026-09-12); the WF-2 photo hide stays .home-scoped
   (the service pages decide per caption in the SERVICE PAGES banner).
   ===================================================================== */
@media (max-width: 1000px) {
	.gpb-authority-section-about-us {
		padding-top: 3.2rem !important;
		padding-bottom: 3.2rem !important;
	}
	.gpb-authority-section-about-us h2 {
		font-size: clamp(2.6rem, 5vw, 4rem) !important;
		line-height: 1.15;
		margin: 0 0 1.2rem;
		text-wrap: balance;
	}
	.gpb-authority-section-about-us p.has-medium-font-size {
		font-size: clamp(1.7rem, 2.4vw, 1.9rem) !important;
		line-height: var(--lh-body, 1.55);
		margin-bottom: 1.2rem;
	}
	.gpb-authority-section-about-us p:not(.has-medium-font-size) {
		font-size: 1.6rem;
		line-height: 1.5;
		margin-bottom: 1.2rem;
	}
	.gpb-authority-section-about-us hr.wp-block-separator {
		margin: 1.6rem 0;
	}
	.gpb-authority-section-about-us .wp-block-spacer {
		height: 0.8rem !important;
	}
	.gpb-authority-section-about-us .is-style-gpb-shadow img {
		box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.14);
	}
	/* #page prefix: the figure is aligncenter and the parent's `#page .aligncenter` outranks a class-only rule */
	#page .gpb-authority-section-about-us figure.wp-block-image {
		margin: 0;
		clear: none;
	}
	.gpb-authority-section-about-us figure.wp-block-image img {
		border-radius: 1.6rem;
	}
}

@media (max-width: 600px) {
	.gpb-authority-section-about-us.is-style-gpb-authority-right-background > div:last-child::before {
		display: none;
	}
	.gpb-authority-section-about-us .gb-layout-columns-1[style] {
		padding-left: 0 !important;
	}
	.gpb-authority-section-about-us > .gb-layout-column-wrap {
		row-gap: 1.6rem;
	}
}

/* ---- Phone (<= 600px): no photo; it is decorative and a lazy image with no box is never fetched (WF-2) ---- */
@media (max-width: 600px) {
	.home .gpb-authority-section-about-us > .gb-layout-column-wrap > .gb-block-layout-column:nth-child(2) {
		display: none;
	}
	.home .gpb-authority-section-about-us.gb-layout-columns-2 > .gb-layout-column-wrap.gb-is-responsive-column {
		grid-template-areas: "col1";
	}
}

/* =====================================================================
   CLOSING CTA BAND: PHONE + TABLET (CT-1, MOBILE_REVIEW.md)
   Scope: the grey "Ready to take your next step?" band wherever it is built the
   same way (home page and ABA page today): a full-width one-column gb-columns
   whose inner holds an x-large lead paragraph, a medium paragraph and a buttons
   row. Matched structurally with :has() because the block has no className and
   gb-1-col-equal alone also marks unrelated blocks on the service pages.
   ===================================================================== */
@media (max-width: 1000px) {
	.wp-block-genesis-blocks-gb-columns.gb-1-col-equal.alignfull:has(> .gb-layout-column-wrap > .gb-block-layout-column > .gb-block-layout-column-inner > p.has-x-large-font-size + p.has-medium-font-size + .wp-block-buttons) {
		padding-top: 3.2rem !important;
		padding-bottom: 3.2rem !important;
	}
	.wp-block-genesis-blocks-gb-columns.gb-1-col-equal.alignfull:has(> .gb-layout-column-wrap > .gb-block-layout-column > .gb-block-layout-column-inner > p.has-x-large-font-size + p.has-medium-font-size + .wp-block-buttons) p.has-x-large-font-size {
		font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
		line-height: 1.15;
		margin-bottom: 1.2rem;
		text-wrap: balance;
	}
	.wp-block-genesis-blocks-gb-columns.gb-1-col-equal.alignfull:has(> .gb-layout-column-wrap > .gb-block-layout-column > .gb-block-layout-column-inner > p.has-x-large-font-size + p.has-medium-font-size + .wp-block-buttons) p.has-medium-font-size {
		font-size: clamp(1.7rem, 2.4vw, 1.9rem) !important;
		line-height: var(--lh-body, 1.55);
		margin-bottom: 2rem;
	}
	/* The copy is left-aligned, so the buttons start at the left too */
	.wp-block-genesis-blocks-gb-columns.gb-1-col-equal.alignfull:has(> .gb-layout-column-wrap > .gb-block-layout-column > .gb-block-layout-column-inner > p.has-x-large-font-size + p.has-medium-font-size + .wp-block-buttons) .wp-block-buttons {
		justify-content: flex-start;
		gap: 1rem;
	}
}

@media (max-width: 600px) {
	.wp-block-genesis-blocks-gb-columns.gb-1-col-equal.alignfull:has(> .gb-layout-column-wrap > .gb-block-layout-column > .gb-block-layout-column-inner > p.has-x-large-font-size + p.has-medium-font-size + .wp-block-buttons) .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
		margin: 0;
	}
	.wp-block-genesis-blocks-gb-columns.gb-1-col-equal.alignfull:has(> .gb-layout-column-wrap > .gb-block-layout-column > .gb-block-layout-column-inner > p.has-x-large-font-size + p.has-medium-font-size + .wp-block-buttons) .wp-block-button .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		padding: 1.4rem 2rem !important;
		font-size: 1.7rem !important;
	}
}

/* =====================================================================
   SERVICE PAGES: PHONE + TABLET (SP-1, SP-2 C, SP-4 to SP-9, SP-11 to
   SP-14, MOBILE_REVIEW.md, applied 2026-09-12)
   The three service pages (75, 129, 131, children of the hub 82) share one
   block set with different wrappers; each band is scoped to its GPB pattern
   className (cta-one is synced pattern 799 "Service Header", 1020 for the
   insurer band inside it), structurally with :has() where the className
   repeats (lesson-plan holds both the Clinical Advantage and the FAQ), or to
   body.parent-pageid-82 for page-wide phone rules. The diagnosticians callout
   and the about-us block are handled by the shared banners above.
   Root font-size is 62.5%, so 1rem = 10px. Desktop (> 1000px) untouched.
   ===================================================================== */

/* ---- SP-1 Hero: .gpb-authority-section-cta-one (synced pattern 799 "Service Header") ---- */
@media (max-width: 1000px) {
	.gpb-authority-section-cta-one.wp-block-genesis-blocks-gb-columns {
		padding-top: 1.2rem !important;
		padding-bottom: 2.4rem !important;
	}
	.gpb-authority-section-cta-one .yoast-breadcrumbs + .wp-block-spacer {
		height: 0.8rem !important;
	}
	.gpb-authority-section-cta-one h1 {
		font-size: clamp(3.4rem, 4.8vw, 4.8rem) !important;
		line-height: 1.12 !important;
		margin: 0 0 1.2rem;
		text-wrap: balance;
	}
	.gpb-authority-section-cta-one h1 + .gb-layout-columns-1 > .gb-layout-column-wrap > .gb-block-layout-column > .gb-block-layout-column-inner > p:first-child {
		font-size: clamp(1.7rem, 2.4vw, 2rem) !important;
		line-height: var(--lh-body, 1.55);
		margin: 0 0 1.6rem;
	}
	.gpb-authority-section-cta-one .wp-block-buttons {
		gap: 1rem;
		justify-content: flex-start;
	}
	.gpb-authority-section-cta-one .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
		margin: 0;
	}
	.gpb-authority-section-cta-one .wp-block-button .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		padding: 1.4rem 2rem !important;
		font-size: 1.7rem !important;
	}
	.gpb-authority-section-cta-one .wp-block-buttons + .wp-block-spacer {
		height: 1.2rem !important;
	}
	/* Insurer band (synced pattern 1020 "Insurance"): no inner padding, label as an overline, four logos in one row */
	.gpb-authority-section-cta-one .gpb-authority-section-logo-list {
		padding: 0 !important;
	}
	.gpb-authority-section-cta-one .gpb-authority-section-logo-list p {
		font-size: 1.3rem !important;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		margin: 0 0 0.8rem;
	}
	.gpb-authority-section-cta-one .gb-layout-columns-4 {
		overflow: visible;
		margin: 0;
		padding: 0 !important;
	}
	.gpb-authority-section-cta-one .gb-layout-columns-4 > .gb-layout-column-wrap.gb-is-responsive-column {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		gap: 1.2rem;
	}
	.gpb-authority-section-cta-one .gb-layout-columns-4 .gb-block-layout-column {
		flex: 0 1 auto;
		width: auto;
		min-width: 0;
	}
	#page .gpb-authority-section-cta-one .gb-layout-columns-4 figure.wp-block-image {
		display: block;
		margin: 0;
		clear: none;
	}
	.gpb-authority-section-cta-one .gb-layout-columns-4 img {
		display: block;
		width: auto !important;
		max-width: 100%;
		height: 3.2rem;
		margin: 0;
		object-fit: contain;
	}
	/* Featured photo: on tablets it keeps the editor's 3:4 crop so the portrait fills the column beside
	   the copy (SP-16, Damian); the phone rule below shows the whole image once the columns stack */
	.gpb-authority-section-cta-one .wp-block-post-featured-image {
		margin: 0;
	}
	.gpb-authority-section-cta-one .wp-block-post-featured-image img {
		width: 100% !important;
		height: auto;
		border-radius: 1.2rem;   /* Damian, 2026-09-14: rounded like the other photos at 1000px and below (the hub, Lesson Plan, Numbered List, and blog cards); the desktop keeps its square photos */
	}
	.gpb-authority-section-cta-one .is-style-gpb-shadow img {
		box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.14);
	}
}
@media (max-width: 600px) {
	.gpb-authority-section-cta-one.wp-block-genesis-blocks-gb-columns {
		padding: 1.2rem 1.6rem 2rem !important;
	}
	.gpb-authority-section-cta-one > .gb-layout-column-wrap {
		row-gap: 1.6rem;
	}
	.gpb-authority-section-cta-one h1 {
		font-size: clamp(3.2rem, 9vw, 4.4rem) !important;
	}
	.gpb-authority-section-cta-one h1 + .gb-layout-columns-1[style] {
		padding-left: 0 !important;
	}
	.gpb-authority-section-cta-one.is-style-gpb-authority-left-background > div:first-child::before,
	.gpb-authority-section-cta-one.is-style-gpb-authority-left-background > div:first-child::after {
		display: none;
	}
	/* Whole photo above the copy (SP-2 C); the site-wide 600px featured-image rule does the same, kept here so the hero reads on its own */
	.gpb-authority-section-cta-one .wp-block-post-featured-image,
	.gpb-authority-section-cta-one .wp-block-post-featured-image img {
		aspect-ratio: auto !important;
	}
}

/* ---- SP-4 Clinical Advantage: .gpb-authority-section-lesson-plan without the FAQ block (nested in feature-boxes on OT) ---- */
@media (max-width: 1000px) {
	.gpb-authority-section-lesson-plan:not(:has(.schema-faq)) {
		padding-top: 3.2rem !important;
		padding-bottom: 3.2rem !important;
	}
	.gpb-authority-section-lesson-plan:not(:has(.schema-faq)) h2 {
		font-size: clamp(2.6rem, 5vw, 4rem) !important;
		line-height: 1.15 !important;
		margin: 0 0 1.6rem;
		text-wrap: balance;
	}
	.gpb-authority-section-lesson-plan:not(:has(.schema-faq)) .gb-block-accordion {
		margin-bottom: 1rem;
	}
	/* Tablet: the photo column sits mid-height beside the taller accordion (SP-17, Damian) */
	.gpb-authority-section-lesson-plan:not(:has(.schema-faq)) > .gb-layout-column-wrap > .gb-block-layout-column:first-child {
		align-self: center;
	}
	.gpb-authority-section-lesson-plan:not(:has(.schema-faq)) .gb-accordion-title {
		padding: 1.2rem 1.6rem;
		font-size: 1.8rem;
		box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.10);
	}
	.gpb-authority-section-lesson-plan:not(:has(.schema-faq)) .gb-accordion-text {
		padding: 1rem 1.6rem 1.2rem;
	}
	.gpb-authority-section-lesson-plan:not(:has(.schema-faq)) .gb-accordion-text p {
		font-size: 1.6rem !important;
		line-height: 1.5;
		margin: 0;
	}
}

/* ---- SP-7 Dark bands: .gpb-tangerine-section-avatar-and-intro ("Ready" on Speech and OT; "Why Families" on all three) ---- */
@media (max-width: 1000px) {
	.gpb-tangerine-section-avatar-and-intro {
		padding-top: 3.2rem !important;
		padding-bottom: 3.2rem !important;
	}
	.gpb-tangerine-section-avatar-and-intro h2,
	.gpb-tangerine-section-avatar-and-intro h3 {
		font-size: clamp(2.6rem, 5vw, 4rem) !important;
		line-height: 1.15 !important;
		margin: 0 0 1.2rem;
		text-wrap: balance;
	}
	.gpb-tangerine-section-avatar-and-intro p.has-medium-font-size,
	.gpb-tangerine-section-avatar-and-intro li.has-medium-font-size {
		font-size: clamp(1.7rem, 2.4vw, 1.9rem) !important;
		line-height: var(--lh-body, 1.55);
	}
	.gpb-tangerine-section-avatar-and-intro p.has-medium-font-size {
		margin: 0 0 1.6rem;
	}
	.gpb-tangerine-section-avatar-and-intro ul.wp-block-list {
		margin: 0 0 1.6rem;
		padding-left: 2rem;
	}
	.gpb-tangerine-section-avatar-and-intro li {
		margin-bottom: 0.8rem;
	}
	.gpb-tangerine-section-avatar-and-intro .wp-block-buttons {
		gap: 1rem;
		justify-content: flex-start;
	}
	.gpb-tangerine-section-avatar-and-intro .wp-block-buttons > .wp-block-button {
		margin: 0;
	}
	/* Tablet: the avatar column sits mid-height beside the copy (SP-17, Damian) */
	.gpb-tangerine-section-avatar-and-intro > .gb-layout-column-wrap > .gb-block-layout-column:first-child {
		align-self: center;
	}
}
@media (max-width: 600px) {
	.gpb-tangerine-section-avatar-and-intro > .gb-layout-column-wrap {
		row-gap: 1.6rem;
	}
	.gpb-tangerine-section-avatar-and-intro .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
	}
	.gpb-tangerine-section-avatar-and-intro .wp-block-button .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		padding: 1.4rem 2rem !important;
		font-size: 1.7rem !important;
	}
}

/* ---- SP-9 What Is X: .gpb-authority-section-two-column-text-with-buttons ---- */
@media (max-width: 1000px) {
	.gpb-authority-section-two-column-text-with-buttons {
		padding-top: 3.2rem !important;
		padding-bottom: 3.2rem !important;
	}
	.gpb-authority-section-two-column-text-with-buttons h2 {
		font-size: clamp(2.6rem, 5vw, 4rem) !important;
		line-height: 1.15 !important;
		margin: 0 0 1.2rem;
		text-wrap: balance;
	}
	.gpb-authority-section-two-column-text-with-buttons p.has-medium-font-size {
		font-size: clamp(1.7rem, 2.4vw, 1.9rem) !important;
		line-height: var(--lh-body, 1.55);
		margin: 0 0 1.6rem;
	}
	.gpb-authority-section-two-column-text-with-buttons h3 {
		font-size: 2rem !important;
		line-height: 1.25;
		margin: 0 0 0.8rem;
	}
	.gpb-authority-section-two-column-text-with-buttons p:not(.has-medium-font-size) {
		font-size: 1.6rem;
		line-height: 1.5;
		margin: 0 0 1.2rem;
	}
	.gpb-authority-section-two-column-text-with-buttons .gb-layout-columns-2 > .gb-layout-column-wrap {
		row-gap: 0;
	}
}

/* ---- SP-11 Collaboration base: the padded one-column block that holds the H2, the copy and the two-card post grid (pattern 883 "Collab") ---- */
@media (max-width: 1000px) {
	.gb-layout-columns-1:has(> .gb-layout-column-wrap > .gb-block-layout-column > .gb-block-layout-column-inner > .gpb-authority-blog-posts) {
		padding-top: 3.2rem !important;
		padding-bottom: 3.2rem !important;
	}
	.gb-layout-columns-1:has(> .gb-layout-column-wrap > .gb-block-layout-column > .gb-block-layout-column-inner > .gpb-authority-blog-posts) h2 {
		font-size: clamp(2.6rem, 5vw, 4rem) !important;
		line-height: 1.15 !important;
		margin: 0 0 1.2rem;
		text-wrap: balance;
	}
	.gb-layout-columns-1:has(> .gb-layout-column-wrap > .gb-block-layout-column > .gb-block-layout-column-inner > .gpb-authority-blog-posts) p.has-medium-font-size {
		font-size: clamp(1.7rem, 2.4vw, 1.9rem) !important;
		line-height: var(--lh-body, 1.55);
		margin: 0 0 1.2rem;
	}
	.gb-layout-columns-1:has(> .gb-layout-column-wrap > .gb-block-layout-column > .gb-block-layout-column-inner > .gpb-authority-blog-posts) .gpb-authority-blog-posts {
		padding-top: 1.2rem !important;
	}
	.gpb-authority-blog-posts .gb-block-post-grid-image a::before {
		display: none;
	}
	.gpb-authority-blog-posts .is-grid {
		gap: 2rem 1.6rem;
	}
	.gpb-authority-blog-posts .is-grid article {
		margin-bottom: 0;
	}
	.gpb-authority-blog-posts .gb-block-post-grid-image {
		margin-bottom: 1rem;
	}
	.gpb-authority-blog-posts .gb-block-post-grid-image img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 1.2rem;
	}
	.gpb-authority-blog-posts header .gb-block-post-grid-title {
		margin: 0 0 0.6rem;
	}
	.gpb-authority-blog-posts header .gb-block-post-grid-title a {
		font-size: clamp(2rem, 2.8vw, 2.4rem);
		line-height: 1.2;
	}
	.gpb-authority-blog-posts .gb-block-post-grid-excerpt p {
		margin: 0;
	}
	.gpb-authority-blog-posts .gb-block-post-grid-more-link {
		font-size: 1.6rem;
		color: var(--btn-bg-primary, #007b9c);
	}
}

/* ---- SP-12 What to Expect: .gpb-authority-section-numbered-list ---- */
@media (max-width: 1000px) {
	.gpb-authority-section-numbered-list {
		padding-top: 3.2rem !important;
		padding-bottom: 3.2rem !important;
	}
	.gpb-authority-section-numbered-list h2 {
		font-size: clamp(2.6rem, 5vw, 4rem) !important;
		line-height: 1.15 !important;
		margin: 0 0 1.2rem;
		text-wrap: balance;
	}
	.gpb-authority-section-numbered-list h2 + p {
		font-size: 1.6rem;
		line-height: 1.5;
		margin: 0 0 1.6rem;
	}
	.gpb-authority-section-numbered-list ol.gpb-number-list li {
		padding-left: 5.2rem;
		margin-bottom: 1.6rem;
		font-size: clamp(1.6rem, 2.2vw, 1.8rem);
		line-height: 1.5;
	}
	.gpb-authority-section-numbered-list ol.gpb-number-list li::before {
		width: 3.6rem;
		height: 3.6rem;
		line-height: 3.6rem;
		top: 0.2rem;
		font-size: 1.6rem;
	}
	.gpb-authority-section-numbered-list .wp-block-spacer {
		height: 0 !important;
	}
}

/* ---- SP-13 FAQ base: .gpb-authority-section-lesson-plan with the Yoast FAQ block ---- */
@media (max-width: 1000px) {
	.gpb-authority-section-lesson-plan:has(.schema-faq) {
		padding-top: 3.2rem !important;
		padding-bottom: 3.2rem !important;
	}
	.gpb-authority-section-lesson-plan:has(.schema-faq) h2 {
		font-size: clamp(2.6rem, 5vw, 4rem) !important;
		line-height: 1.15 !important;
		margin: 0 0 1.6rem;
		text-wrap: balance;
	}
	.gpb-authority-section-lesson-plan:has(.schema-faq) .schema-faq-section {
		margin: 0 0 1.6rem;
	}
	.gpb-authority-section-lesson-plan:has(.schema-faq) .schema-faq-question {
		display: block;
		font-size: 1.7rem;
		line-height: 1.35;
		margin-bottom: 0.4rem;
	}
	.gpb-authority-section-lesson-plan:has(.schema-faq) .schema-faq-answer {
		font-size: 1.6rem;
		line-height: 1.5;
	}
	/* Empty one-column block left at the end of the pattern (19px of nothing) */
	.gpb-authority-section-lesson-plan:has(.schema-faq) .schema-faq + .gb-layout-columns-1 {
		display: none;
	}
}

/* ---- SP-6 Side photos in the two-column bands, every width <= 1000px: whole image (never the editor's crop), no aligncenter margin, lighter shadow, caption size ---- */
@media (max-width: 1000px) {
	.parent-pageid-82 #page .gpb-authority-section-lesson-plan figure.wp-block-image,
	.parent-pageid-82 #page .gpb-authority-section-about-us figure.wp-block-image,
	.parent-pageid-82 #page .gpb-authority-section-numbered-list figure.wp-block-image,
	.parent-pageid-82 #page .gpb-tangerine-section-avatar-and-intro figure.wp-block-image {
		margin: 0;
		clear: none;
	}
	/* The editor writes an inline crop (aspect-ratio + object-fit). --bm-natural-ratio is the image's own
	   width/height, written on the tag by the wp_content_img_tag filter in functions.php (SP-6): it beats the
	   inline crop, reserves the box before the lazy image loads, and sidesteps Chrome's 1500px layout of an
	   `aspect-ratio: auto` image that carries sizes="auto, …" (measured 2026-09-12). */
	.parent-pageid-82 .gpb-authority-section-lesson-plan figure.wp-block-image img,
	.parent-pageid-82 .gpb-authority-section-about-us figure.wp-block-image img,
	.parent-pageid-82 .gpb-authority-section-numbered-list figure.wp-block-image img {
		aspect-ratio: var(--bm-natural-ratio, auto) !important;
		max-width: 100%;
		height: auto !important;
		border-radius: 1.2rem;
	}
	.parent-pageid-82 .gpb-authority-section-lesson-plan .is-style-gpb-shadow img,
	.parent-pageid-82 .gpb-authority-section-about-us .is-style-gpb-shadow img,
	.parent-pageid-82 .gpb-authority-section-numbered-list .is-style-gpb-shadow img,
	.parent-pageid-82 .gpb-tangerine-section-avatar-and-intro .is-style-gpb-shadow img {
		box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.14);
	}
	.parent-pageid-82 .gpb-authority-section-lesson-plan figcaption,
	.parent-pageid-82 .gpb-authority-section-about-us figcaption,
	.parent-pageid-82 .gpb-authority-section-numbered-list figcaption {
		font-size: 1.4rem;
		line-height: 1.45;
		margin: 0.8rem 0 0;
	}
}

/* ---- Phone (<= 600px): the grey slabs and dashes of the GPB background styles, and the 28px indents, in every band ---- */
@media (max-width: 600px) {
	.parent-pageid-82 .is-style-gpb-authority-left-background > div:first-child::before,
	.parent-pageid-82 .is-style-gpb-authority-left-background > div:first-child::after,
	.parent-pageid-82 .is-style-gpb-authority-right-background > div:last-child::before,
	.parent-pageid-82 .is-style-gpb-authority-right-background > div:last-child::after {
		display: none;
	}
	.parent-pageid-82 .gb-layout-columns-1[style*="padding-left:28px"],
	.parent-pageid-82 .gb-layout-columns-1[style*="padding-left: 28px"] {
		padding-left: 0 !important;
	}
	.parent-pageid-82 .gpb-authority-section-lesson-plan > .gb-layout-column-wrap,
	.parent-pageid-82 .gpb-authority-section-numbered-list > .gb-layout-column-wrap {
		row-gap: 1.6rem;
	}
}

/* ---- Phone (<= 600px): side photos (SP-5, Option B; SP-8 hides the avatars with it): uncaptioned side photos hidden on phones; captioned ones stay, whole, below the copy */
@media (max-width: 600px) {
	.gpb-authority-section-lesson-plan > .gb-layout-column-wrap > .gb-block-layout-column:first-child:not(:has(figcaption)),
	.gpb-authority-section-about-us > .gb-layout-column-wrap > .gb-block-layout-column:nth-child(2):not(:has(figcaption)),
	.gpb-authority-section-numbered-list > .gb-layout-column-wrap > .gb-block-layout-column:nth-child(2):not(:has(figcaption)),
	.gpb-tangerine-section-avatar-and-intro > .gb-layout-column-wrap > .gb-block-layout-column:first-child:not(:has(figcaption)) {
		display: none;
	}
	.gpb-authority-section-lesson-plan.gb-layout-columns-2 > .gb-layout-column-wrap.gb-is-responsive-column:not(:has(figcaption)),
	.gpb-tangerine-section-avatar-and-intro.gb-layout-columns-2 > .gb-layout-column-wrap.gb-is-responsive-column:not(:has(figcaption)) {
		grid-template-areas: "col2";
	}
	.gpb-authority-section-about-us.gb-layout-columns-2 > .gb-layout-column-wrap.gb-is-responsive-column:not(:has(figcaption)),
	.gpb-authority-section-numbered-list.gb-layout-columns-2 > .gb-layout-column-wrap.gb-is-responsive-column:not(:has(figcaption)) {
		grid-template-areas: "col1";
	}
	/* Clinical Advantage: the captioned photo moves under the accordion */
	.gpb-authority-section-lesson-plan.gb-layout-columns-2 > .gb-layout-column-wrap.gb-is-responsive-column:has(figcaption) {
		grid-template-areas: "col2" "col1";
	}
}

/* ---- Phone (<= 600px): collaboration cards (SP-11, Option A): the two service cards side by side on phones */
@media (max-width: 600px) {
	/* the vendor stacks with .gb-block-post-grid div[class*="columns"].is-grid at <= 600px (0,3,1), so outrank it */
	.gpb-authority-blog-posts .gb-block-post-grid div[class*="columns"].is-grid.columns-2 {
		grid-template-columns: 1fr 1fr;
		gap: 1.6rem 1.2rem;
	}
	.gpb-authority-blog-posts header .gb-block-post-grid-title a {
		font-size: 1.8rem;
	}
	.gpb-authority-blog-posts .gb-block-post-grid-more-link {
		font-size: 1.5rem;
	}
}

/* ---- Tablet + phone (<= 1000px): FAQ (SP-13, Option A): FAQ as one full-width column on the iPad too (the photo column sat beside 1,500px of text) */
@media (max-width: 1000px) {
	.gpb-authority-section-lesson-plan:has(.schema-faq) > .gb-layout-column-wrap > .gb-block-layout-column:first-child {
		display: none;
	}
	.gpb-authority-section-lesson-plan:has(.schema-faq).gb-layout-columns-2 > .gb-layout-column-wrap.gb-is-responsive-column {
		grid-template-columns: 1fr;
		grid-template-areas: "col2";
	}
}
@media (max-width: 1000px) {
	/* one column: the grey slab and dash of the left-background style no longer frame anything */
	.gpb-authority-section-lesson-plan:has(.schema-faq).is-style-gpb-authority-left-background > div:first-child::before,
	.gpb-authority-section-lesson-plan:has(.schema-faq).is-style-gpb-authority-left-background > div:first-child::after {
		display: none;
	}
}

/* =====================================================================
   SERVICES HUB: PHONE + TABLET (HB-1 to HB-9, MOBILE_REVIEW.md, applied
   2026-09-12)
   Page 82 itself. Its body carries .page-id-82, not .parent-pageid-82, so
   the SERVICE PAGES rules above never reach it; every rule here is scoped
   .page-id-82. The three service bands reuse the home hero's className
   gpb-authority-section-header-cta, which is why the HOME HERO banner stays
   .home-scoped. The hero is the first top-level block: a one-column wrapper
   carrying the post-grid className gpb-authority-section-blog-posts (no post
   grid inside) around a padded one-column block (breadcrumb, H1, and a 2:1
   grid of intro and CTAs).
   Root font-size is 62.5%, so 1rem = 10px. Desktop (> 1000px) untouched.
   ===================================================================== */

/* ---- HB-1 Hero (<= 1000px): type, and the 2:1 intro/CTA grid as one column so the CTAs sit under the intro ---- */
@media (max-width: 1000px) {
	.page-id-82 .entry-content > .gpb-authority-section-blog-posts .gb-layout-columns-1.alignfull {
		padding-top: 1.2rem !important;
		padding-bottom: 2.4rem !important;
	}
	.page-id-82 .entry-content > .gpb-authority-section-blog-posts h1 {
		font-size: clamp(3.4rem, 4.8vw, 4.8rem) !important;
		line-height: 1.12 !important;
		margin: 0 0 1.2rem;
		text-wrap: balance;
	}
	/* the vendor's 2:1 grid squeezed the CTAs into a 232px column on the iPad */
	.page-id-82 .entry-content > .gpb-authority-section-blog-posts .gb-2-col-wideleft > .gb-layout-column-wrap {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "col1" "col2";
		row-gap: 0;
	}
	.page-id-82 .entry-content > .gpb-authority-section-blog-posts p.has-medium-font-size {
		font-size: clamp(1.7rem, 2.4vw, 2rem) !important;
		line-height: var(--lh-body, 1.55);
		margin: 0 0 1.6rem;
	}
	/* CTAs: one row of two equal pills on tablets (the block justifies them right) */
	.page-id-82 .entry-content > .gpb-authority-section-blog-posts .wp-block-buttons {
		justify-content: flex-start;
		gap: 1rem;
	}
	.page-id-82 .entry-content > .gpb-authority-section-blog-posts .wp-block-buttons > .wp-block-button {
		flex: 1 1 0;
		margin: 0;
	}
	.page-id-82 .entry-content > .gpb-authority-section-blog-posts .wp-block-button .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		padding: 1.4rem 2rem !important;
		font-size: 1.7rem !important;
	}
}
@media (max-width: 600px) {
	.page-id-82 .entry-content > .gpb-authority-section-blog-posts h1 {
		font-size: clamp(3.2rem, 9vw, 4.4rem) !important;
	}
	.page-id-82 .entry-content > .gpb-authority-section-blog-posts p.has-medium-font-size {
		font-size: clamp(1.7rem, 4.6vw, 1.9rem) !important;
	}
	/* CTAs: full-width rows (S-3) */
	.page-id-82 .entry-content > .gpb-authority-section-blog-posts .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
	}
}

/* ---- HB-2 Service bands (<= 1000px): .gpb-authority-section-header-cta x3 (H2, indented copy + list + button, captioned photo) ---- */
@media (max-width: 1000px) {
	.page-id-82 .gpb-authority-section-header-cta.wp-block-genesis-blocks-gb-columns {
		padding-top: 3.2rem !important;
		padding-bottom: 3.2rem !important;
	}
	.page-id-82 .gpb-authority-section-header-cta h2 {
		font-size: clamp(2.6rem, 4vw, 3.2rem); /* at or under the desktop's 32px */
		margin: 0 0 1.2rem;
		text-wrap: balance;
	}
	.page-id-82 .gpb-authority-section-header-cta .gb-layout-columns-1 {
		padding-bottom: 0 !important;
	}
	.page-id-82 .gpb-authority-section-header-cta p.has-medium-font-size {
		font-size: clamp(1.7rem, 2.4vw, 1.9rem) !important;
		line-height: var(--lh-body, 1.55);
		margin: 0 0 1.2rem;
	}
	.page-id-82 .gpb-authority-section-header-cta ul.wp-block-list {
		margin: 0 0 1.6rem;
		padding-left: 2rem;
	}
	.page-id-82 .gpb-authority-section-header-cta ul.wp-block-list li {
		font-size: 1.6rem;
		line-height: 1.5;
		margin: 0 0 0.6rem;
	}
	.page-id-82 .gpb-authority-section-header-cta .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
		margin: 0;
	}
	.page-id-82 .gpb-authority-section-header-cta .wp-block-button .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		padding: 1.4rem 2rem !important;
		font-size: 1.7rem !important;
	}
	/* #page prefix: the parent's `#page .aligncenter { margin: 0 auto 1.5em }` outranks a class-only rule (section 0) */
	.page-id-82 #page .gpb-authority-section-header-cta figure.wp-block-image {
		margin: 0;
		clear: none;
	}
	.page-id-82 .gpb-authority-section-header-cta .is-style-gpb-shadow img {
		box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.14);
	}
	.page-id-82 .gpb-authority-section-header-cta figcaption {
		font-size: 1.4rem;
		line-height: 1.45;
		margin: 0.8rem 0 0;
	}
}
@media (max-width: 600px) {
	/* the GPB grey slab and its dash frame nothing once the columns stack (either GPB background style;
	   HB-9 moved the listings to left-background) */
	.page-id-82 .gpb-authority-section-header-cta.is-style-gpb-authority-left-background > div:first-child::before,
	.page-id-82 .gpb-authority-section-header-cta.is-style-gpb-authority-left-background > div:first-child::after,
	.page-id-82 .gpb-authority-section-header-cta.is-style-gpb-authority-right-background > div:last-child::before,
	.page-id-82 .gpb-authority-section-header-cta.is-style-gpb-authority-right-background > div:last-child::after {
		display: none;
	}
	.page-id-82 .gpb-authority-section-header-cta .gb-block-layout-column-inner[style*="padding-left"] {
		padding-left: 0 !important;
	}
	.page-id-82 .gpb-authority-section-header-cta > .gb-layout-column-wrap {
		row-gap: 2.4rem; /* the photo and its caption come first (HB-9), so this is the air above the heading */
	}
}

/* ---- HB-7 Photos (Damian, 2026-09-12; the shape supersedes HB-3 A and HB-4 B): tablets (601 to 1000px) keep the
   editor's inline 3:4 crop, so all three are tall and fill the column beside the copy; phones (<= 600px) show each
   photo wide or square: a wide photo whole, a taller one cut to a centred square by max(1, ratio). --bm-natural-ratio
   is the image's own width/height, written by the wp_content_img_tag filter in functions.php (SP-6); the inline
   object-fit: cover does the cutting. Captions stay at every width. ---- */
@media (max-width: 1000px) {
	.page-id-82 .gpb-authority-section-header-cta figure.wp-block-image img {
		max-width: 100%;
		height: auto !important;
		border-radius: 1.2rem;
	}
}
@media (max-width: 600px) {
	.page-id-82 .gpb-authority-section-header-cta figure.wp-block-image img {
		aspect-ratio: max(1, var(--bm-natural-ratio, 1)) !important;
	}
}

/* ---- HB-8 and HB-9 Photo first (Damian, 2026-09-12): the listings' photo comes before the copy at every width.
   The order lives in the page content since HB-9: tools/hub-flip-listings.php swapped the two columns and switched
   the block style to is-style-gpb-authority-left-background, so the vendor draws the slab on the photo side and no
   order rules are needed here. HB-2 keeps the 24px phone gap above each heading. ---- */

/* =====================================================================
   CAREERS HUB: PHONE + TABLET (CH-1, CH-2 B, CH-3 A, CH-4 B, CH-5 B, MOBILE_REVIEW.md, applied 2026-09-12)
   page-careers.php (page 588). The careers rules above are written in rem as if 1rem were 16px; this
   site's root is 62.5%, so the values here use the site's 10px rem. CH-1 also covers the locations
   archive grid, which shares the careers grid's 500px minimum.
   ===================================================================== */

/* ---- CH-1: two card columns from 601px up on the careers hub and the locations archive (the 500px minimum
   left one column below about 1,050px: both iPad orientations). The desktop already shows two. ---- */
@media (min-width: 601px) {
	.bmtc-careers-grid,
	.bmtc-locations-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- CH-4 B: the career cards on phones: the three facts on one wrapped row, a 20px title, and the two
   CTAs side by side as equal buttons (an exception to S-3's stacked CTAs, approved for these cards) ---- */
@media (max-width: 600px) {
	.bmtc-careers-listings {
		padding-top: 2.4rem;
		padding-bottom: 2.4rem;
	}
	.bmtc-careers-grid {
		gap: 1.6rem;
	}
	.bmtc-career-card-title {
		font-size: 2rem;
	}
	.bmtc-career-card-facts {
		flex-direction: row;
		gap: 0.4rem 1.6rem;
	}
	.bmtc-career-card-ctas {
		flex-direction: row;
	}
	.bmtc-career-card-ctas .bmtc-btn--small {
		flex: 1 1 0;
		width: auto;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* ---- CH-5 B: "Why Work" as a two-by-two grid of centred cards on phones, and two by two from 601 to 1199px
   (the auto-fill grid put three across at 1024 with the fourth item alone below) ---- */
@media (max-width: 600px) {
	.bmtc-careers-why {
		padding-top: 3.2rem;
		padding-bottom: 3.2rem;
	}
	.bmtc-careers-why-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
	.bmtc-careers-why-item {
		padding: 1.4rem 1rem;
	}
	.bmtc-careers-why-item svg {
		display: block;
		width: 2.8rem;
		height: 2.8rem;
		margin: 0 auto 0.8rem;
	}
	.bmtc-careers-why-item h3 {
		font-size: 1.7rem;
		margin: 0 0 0.4rem;
	}
	.bmtc-careers-why-item p {
		font-size: 1.5rem;
		line-height: 1.5;
	}
}
@media (min-width: 601px) and (max-width: 1199px) {
	.bmtc-careers-why-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- CH-2 B: the H1 and the "Why Work" H2 at their intended size at every width. The careers rules above set them in
   a 16px rem, so the H1 rendered 17.5px on phones and the iPad and 30px on the desktop, and the H2 15 to 20px under
   22 to 25px item headings. The H2 is scoped to .bmtc-careers-why so the location and career singles keep their
   .bmtc-section-title. The page has one H1; "Why Work" and the card titles are H2s in the template. ---- */
@media (max-width: 1000px) {
	.bmtc-careers-hub .bmtc-careers-hub-title {
		font-size: clamp(3.4rem, 4.8vw, 4.8rem);
		line-height: 1.12;
		margin: 0 0 1.2rem;
		text-wrap: balance;
	}
	.bmtc-careers-hub .bmtc-careers-why .bmtc-section-title {
		font-size: clamp(2.6rem, 4vw, 3.2rem);
		margin: 0 0 2rem;
		text-wrap: balance;
	}
}
@media (max-width: 600px) {
	.bmtc-careers-hub .bmtc-careers-hub-title {
		font-size: clamp(3.2rem, 9vw, 4.4rem);
	}
}
@media (min-width: 1001px) {
	.bmtc-careers-hub .bmtc-careers-hub-title {
		font-size: 4rem;
		line-height: 1.15;
		margin-bottom: 1.6rem;
	}
	.bmtc-careers-hub .bmtc-careers-why .bmtc-section-title {
		font-size: 3.2rem;
		margin-bottom: 3.2rem;
	}
}

/* ---- CH-3 A: phones get 16px gutters like the other pages (the sections sat inside the parent's 15px container and
   added their own padding, so text started 25px in and the cards 30px in, inside a grey frame), and the hero is
   left-aligned like every other hero on phones ---- */
@media (max-width: 600px) {
	.bmtc-careers-hub > section {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: 1.6rem;
		padding-right: 1.6rem;
	}
	.bmtc-careers-hero {
		padding-top: 1.2rem;
		padding-bottom: 2.4rem;
	}
	.bmtc-careers-hero-inner {
		text-align: left;
	}
	.bmtc-careers-intro {
		font-size: clamp(1.7rem, 4.6vw, 1.9rem);
		line-height: 1.55;
	}
}

/* =====================================================================
   LOCATIONS ARCHIVE: HERO LIKE THE CAREERS HUB (LA-1, MOBILE_REVIEW.md section 7, applied 2026-09-12)
   archive-wpseo_locations.php. Raised by Damian: the archive hero should align left like the careers hub.
   The archive rules above are written in rem as if 1rem were 16px (the H1 rendered 17.5px on phones and the
   iPad and 30px on the desktop), so the H1 takes the careers hub's CH-2 sizes, and on phones the header and
   the card grid take CH-3's 16px gutters so the left-aligned heading lines up with the cards. The two card
   columns from 601px are CH-1 in the careers banner. Root font-size is 62.5%, so 1rem = 10px.
   ===================================================================== */
@media (max-width: 1000px) {
	.bmtc-locations-archive .bmtc-archive-title {
		font-size: clamp(3.4rem, 4.8vw, 4.8rem);
		line-height: 1.12;
		margin: 0 0 1.2rem;
		text-wrap: balance;
	}
}
@media (max-width: 600px) {
	.bmtc-locations-archive {
		padding-top: 1.2rem;
	}
	.bmtc-locations-archive .bmtc-archive-header,
	.bmtc-locations-archive .bmtc-locations-grid,
	.bmtc-locations-archive .bmtc-archive-pagination {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: 1.6rem;
		padding-right: 1.6rem;
	}
	.bmtc-locations-archive .bmtc-archive-header {
		margin-bottom: 2.4rem;
		text-align: left;
	}
	.bmtc-locations-archive .bmtc-archive-title {
		font-size: clamp(3.2rem, 9vw, 4.4rem);
	}
	.bmtc-locations-archive .bmtc-locations-intro {
		margin: 0;
		text-align: left;
		font-size: clamp(1.7rem, 4.6vw, 1.9rem);
		line-height: 1.55;
	}
}
@media (min-width: 1001px) {
	.bmtc-locations-archive .bmtc-archive-title {
		font-size: 4rem;
		line-height: 1.15;
		margin-bottom: 1.6rem;
		text-wrap: balance; /* two lines from 1001 to about 1250px: no lone "TX" */
	}
}

/* =====================================================================
   CAREER SINGLE: PHONE + TABLET (CS-1 A, CS-2 A, CS-3 B, CS-4 B, CS-5 A to CS-9 A, CS-11, MOBILE_REVIEW.md section 8,
   applied 2026-09-12)
   single-career.php, every rule scoped to .bmtc-career-single so the location single, which shares the facts,
   buttons, section nav, and .bmtc-section-title, is untouched. The template CSS above is written in rem as if 1rem
   were 16px; this site's root is 62.5%, so the values here use the site's 10px rem. Phones get the photo first,
   stacked compact buttons, 16px gutters, and a swipe row for "Jump to"; tablets a hero with the photo beside Perks
   and two-across lists; every width the site's heading sizes. Above 1000px the sections below the "Jump to" nav keep
   the template's original desktop layout (CS-11, Damian: CS-10's alignment with the hero was reverted).
   ===================================================================== */

/* ---- CS-4 B: the career photo first on phones, above the breadcrumb, as the service pages show their
   featured image first (SP-2 C). The two hero columns dissolve into one flex column so the photo can lead
   while Perks stays after the buttons. ---- */
@media (max-width: 600px) {
	.bmtc-career-single .bmtc-career-hero-inner {
		display: flex;
		flex-direction: column;
		align-items: stretch; /* the grid's align-items: start would shrink the buttons and headings to their text */
		gap: 0;
	}
	.bmtc-career-single .bmtc-career-details,
	.bmtc-career-single .bmtc-career-image {
		display: contents;
	}
	.bmtc-career-single .bmtc-career-featured-image {
		order: -1;
		margin-bottom: 1.6rem;
	}
	.bmtc-career-single .bmtc-career-ctas {
		margin-bottom: 0;
	}
	.bmtc-career-single .bmtc-career-perks {
		margin-top: 2.4rem;
	}
}

/* ---- CS-3 B: the two hero buttons stay stacked at full width but compact, 52px from 68px (the location
   single's 768px block gives every .bmtc-btn 20px vertical padding) ---- */
@media (max-width: 600px) {
	.bmtc-career-single .bmtc-career-ctas .bmtc-btn {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

/* ---- CS-1 A: the H1, the section H2s, and "Ready to Apply?" at the site's hero and section sizes at every width (the
   careers hub's CH-2 B values). The template set them in a 16px rem: the H1 rendered 17.5px on phones and the iPad
   and 25px above, the section H2s 15 to 20px under 16 to 18px body copy. Scoped to .bmtc-career-single so the
   location single keeps its .bmtc-section-title. ---- */
@media (max-width: 1000px) {
	.bmtc-career-single .bmtc-career-title {
		font-size: clamp(3.4rem, 4.8vw, 4.8rem);
		line-height: 1.12;
		margin: 0 0 1.2rem;
		text-wrap: balance;
	}
	.bmtc-career-single .bmtc-section-title,
	.bmtc-career-single .bmtc-cta-title {
		font-size: clamp(2.6rem, 4vw, 3.2rem);
		line-height: 1.2;
		margin: 0 0 1.6rem;
		text-wrap: balance;
	}
}
@media (max-width: 600px) {
	.bmtc-career-single .bmtc-career-title {
		font-size: clamp(3.2rem, 9vw, 4.4rem);
	}
}
@media (min-width: 1001px) {
	.bmtc-career-single .bmtc-career-title {
		font-size: 4rem;
		line-height: 1.15;
		margin-bottom: 1.6rem;
		text-wrap: balance;
	}
	.bmtc-career-single .bmtc-section-title,
	.bmtc-career-single .bmtc-cta-title {
		font-size: 3.2rem;
		line-height: 1.2;
		margin-bottom: 2rem;
	}
}
.bmtc-career-single .bmtc-perks-title {
	font-size: 2rem;
}

/* ---- CS-2 A: phone gutters like the careers hub (CH-3 A): the hero, the nav, and every section span the width with
   16px padding, so the grey bands run edge to edge and text starts 16px in, not 25px ---- */
@media (max-width: 600px) {
	.bmtc-career-single > section,
	.bmtc-career-single > .bmtc-section-nav {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: 1.6rem;
		padding-right: 1.6rem;
	}
	.bmtc-career-single .bmtc-career-hero {
		padding-top: 1.2rem;
		padding-bottom: 3.2rem;
	}
	.bmtc-career-single .bmtc-career-section {
		padding-top: 3.2rem;
		padding-bottom: 3.2rem;
	}
	.bmtc-career-single .bmtc-career-locations {
		margin-top: 0;
	}
	.bmtc-career-single .bmtc-career-intro {
		font-size: clamp(1.7rem, 4.6vw, 1.9rem);
		line-height: 1.55;
	}
	.bmtc-career-single .bmtc-career-cta-box {
		padding: 0;
	}
}

/* ---- CS-5 A: the iPad hero (601 to 1023px): the buttons inline at their natural width, and the photo, whole, beside
   Perks (the hero ran 1,265px, taller than the screen, with the 4:3 photos cropped by the 450px cap) ---- */
@media (min-width: 601px) and (max-width: 1023px) {
	.bmtc-career-single .bmtc-career-hero-inner {
		gap: 3.2rem;
	}
	.bmtc-career-single .bmtc-career-ctas {
		flex-direction: row;
		margin-bottom: 0;
	}
	.bmtc-career-single .bmtc-career-ctas .bmtc-btn {
		width: auto;
		padding: 14px 32px;
		font-size: 18px;
	}
	.bmtc-career-single .bmtc-career-image {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.4rem;
		align-items: start;
	}
	.bmtc-career-single .bmtc-career-featured-image {
		max-height: none;
	}
	.bmtc-career-single .bmtc-career-perks {
		margin-top: 0;
	}
}

/* ---- CS-6 A: "Jump to" as one swipe row of pill links on phones, 40px tap targets (it took 113px over three rows with
   26px targets). Supporting content, so a rail is acceptable; the location single's nav is untouched. ---- */
@media (max-width: 600px) {
	.bmtc-career-single > .bmtc-section-nav {
		padding-top: 1rem;
		padding-bottom: 1rem;
		padding-right: 0;
	}
	.bmtc-career-single .bmtc-section-nav-inner {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 1rem;
		overflow-x: auto;
		scrollbar-width: none;
		padding-right: 1.6rem;
	}
	.bmtc-career-single .bmtc-section-nav-inner::-webkit-scrollbar {
		display: none;
	}
	.bmtc-career-single .bmtc-section-nav-links {
		flex-wrap: nowrap;
		gap: 0.8rem;
	}
	.bmtc-career-single .bmtc-section-nav-links a {
		display: inline-flex;
		align-items: center;
		min-height: 4rem;
		padding: 0 1.4rem;
		border: 1px solid var(--border, #e6e6e6);
		border-radius: 999px;
		background-color: #fff;
	}
}

/* ---- CS-7 A: bullet lists two across wherever a section is full width, 601 to 1000px (the location single's 768px
   block forced one column, so Benefits ran 14 rows on the iPad); one column inside Requirements and Preferred. Above
   1000px the template's own grid applies (CS-11) ---- */
@media (min-width: 601px) and (max-width: 1000px) {
	.bmtc-career-single .bmtc-bullet-list {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
		column-gap: 3.2rem;
	}
}

/* ---- CS-8 A: the four location links two across from 601 to 1000px (the careers 768px block forced one per row on the
   iPad; above 1000px the template's own auto-fill grid already shows two, CS-11), and no empty 30px under the "Ready to
   Apply?" button at any width (the location hero's .bmtc-location-ctas margin) ---- */
@media (min-width: 601px) and (max-width: 1000px) {
	.bmtc-career-single .bmtc-career-locations-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.bmtc-career-single .bmtc-career-cta-box .bmtc-location-ctas {
	margin-bottom: 0;
}

/* ---- CS-9 A: "Jump to" targets clear the 64px desktop sticky header (the location single's 90px) ---- */
.bmtc-career-single [id] {
	scroll-margin-top: 90px;
}

/* =====================================================================
   LOCATION SINGLE: PHONE + TABLET (LS-1 to LS-14 A, MOBILE_REVIEW.md section 6, applied 2026-09-12)
   single-wpseo_locations.php, every rule scoped to .bmtc-location-single so the career singles and the locations
   archive, which share .bmtc-btn, the facts list, .bmtc-section-nav, and .bmtc-section-title, are untouched. The
   location CSS above is written in rem as if 1rem were 16px; the root is 62.5%, so the values here use the site's
   10px rem. Mirrors the CAREER SINGLE banner: the site's heading sizes, 16px phone gutters, stacked 52px buttons,
   the "Jump to" pill rail, and the featured photo first on phones; tablets get the insurance box beside the map,
   "About" beside its photo, the desktop gallery grid, and two-across lists. Above 1000px only the heading sizes
   and the review cards change (LS-1, LS-11).
   ===================================================================== */

/* LS-1 A: headings at the site's sizes at every width (the template rem bug rendered the H1 20 to 25px and every
   section H2 15 to 20px); the gallery title left-aligned like the other H2s; insurance and sibling labels 20px */
@media (max-width: 1000px) {
	.bmtc-location-single .bmtc-location-title {
		font-size: clamp(3.4rem, 4.8vw, 4.8rem);
		line-height: 1.12;
		margin: 0 0 1.2rem;
		text-wrap: balance;
	}
	.bmtc-location-single .bmtc-section-title,
	.bmtc-location-single .bmtc-about-title,
	.bmtc-location-single .bmtc-gallery-title {
		font-size: clamp(2.6rem, 4vw, 3.2rem);
		line-height: 1.2;
		margin: 0 0 1.6rem;
		text-wrap: balance;
	}
}
@media (max-width: 600px) {
	.bmtc-location-single .bmtc-location-title {
		font-size: clamp(3.2rem, 9vw, 4.4rem);
	}
}
@media (min-width: 1001px) {
	.bmtc-location-single .bmtc-location-title {
		font-size: 4rem;
		line-height: 1.15;
		margin-bottom: 1.6rem;
		text-wrap: balance;
	}
	.bmtc-location-single .bmtc-section-title,
	.bmtc-location-single .bmtc-about-title,
	.bmtc-location-single .bmtc-gallery-title {
		font-size: 3.2rem;
		line-height: 1.2;
		margin-bottom: 2rem;
	}
}
.bmtc-location-single .bmtc-gallery-title {
	text-align: left;
}
.bmtc-location-single .bmtc-insurance-title,
.bmtc-location-single .bmtc-sibling-title {
	font-size: 2rem;
}

/* LS-2: phone gutters like the careers pages (sections edge to edge, 16px padding) */
@media (max-width: 600px) {
	.bmtc-location-single > section,
	.bmtc-location-single > .bmtc-section-nav {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: 1.6rem;
		padding-right: 1.6rem;
	}
	.bmtc-location-single .bmtc-location-hero {
		padding-top: 1.2rem;
		padding-bottom: 3.2rem;
	}
	.bmtc-location-single .bmtc-featured-about-section,
	.bmtc-location-single .bmtc-location-best-for,
	.bmtc-location-single .bmtc-location-gallery,
	.bmtc-location-single .bmtc-location-environment-notes,
	.bmtc-location-single .bmtc-location-reviews,
	.bmtc-location-single .bmtc-location-program-goals,
	.bmtc-location-single .bmtc-location-faq {
		padding-top: 3.2rem;
		padding-bottom: 3.2rem;
	}
	.bmtc-location-single .bmtc-sibling {
		margin: 0 calc(50% - 50vw);
		padding: 2.4rem 1.6rem;
	}
	.bmtc-location-single .bmtc-about-column {
		padding: 0;
	}
	.bmtc-location-single .bmtc-insurance {
		padding: 1.6rem;
	}
	.bmtc-location-single .bmtc-reviews-rail {
		margin: 0 -1.6rem;
		padding-left: 1.6rem;
		padding-right: 1.6rem;
	}
}

/* LS-3 A: the hero buttons on phones stay stacked but compact, 52px (the career pages' CS-3 B) */
@media (max-width: 600px) {
	.bmtc-location-single .bmtc-location-ctas {
		margin-bottom: 2.4rem;
	}
	.bmtc-location-single .bmtc-location-ctas .bmtc-btn {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

/* LS-4 A: the map on phones 260px tall (350px today) */
@media (max-width: 600px) {
	.bmtc-location-single .bmtc-location-map {
		min-height: 26rem;
	}
}

/* LS-5 A: the iPad hero (601 to 1023px): buttons inline, the insurance box and the map side by side */
@media (min-width: 601px) and (max-width: 1023px) {
	.bmtc-location-single .bmtc-location-hero-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2.4rem;
		row-gap: 0;
	}
	.bmtc-location-single .bmtc-location-details {
		display: contents;
	}
	.bmtc-location-single .bmtc-location-details > * {
		grid-column: 1 / -1;
	}
	.bmtc-location-single .bmtc-location-details > .bmtc-insurance {
		grid-column: 1;
	}
	.bmtc-location-single .bmtc-location-map {
		grid-column: 2;
		min-height: 0;
	}
	.bmtc-location-single .bmtc-location-ctas {
		flex-direction: row;
		margin-bottom: 2.4rem;
	}
	.bmtc-location-single .bmtc-location-ctas .bmtc-btn {
		width: auto;
		padding: 14px 32px;
		font-size: 18px;
	}
}

/* LS-6 A: "About this Center" beside its photo from 601 to 1000px (the 768px block forced one column at 768) */
@media (min-width: 601px) and (max-width: 1000px) {
	.bmtc-location-single .bmtc-featured-about-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.4rem;
	}
	.bmtc-location-single .bmtc-about-column {
		padding: 0;
	}
}

/* LS-7 A: the "Our other Denton center" entry spans the box on tablets (one item filled one 320px column) */
@media (min-width: 601px) and (max-width: 1000px) {
	.bmtc-location-single .bmtc-sibling-list {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	}
}

/* LS-8 A: "Jump to" as one swipe row of 40px pill links on phones (the career pages' CS-6) */
@media (max-width: 600px) {
	.bmtc-location-single > .bmtc-section-nav {
		padding-top: 1rem;
		padding-bottom: 1rem;
		padding-right: 0;
	}
	.bmtc-location-single .bmtc-section-nav-inner {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 1rem;
		overflow-x: auto;
		scrollbar-width: none;
		padding-right: 1.6rem;
	}
	.bmtc-location-single .bmtc-section-nav-inner::-webkit-scrollbar {
		display: none;
	}
	.bmtc-location-single .bmtc-section-nav-links {
		flex-wrap: nowrap;
		gap: 0.8rem;
	}
	.bmtc-location-single .bmtc-section-nav-links a {
		display: inline-flex;
		align-items: center;
		min-height: 4rem;
		padding: 0 1.4rem;
		border: 1px solid var(--border, #e6e6e6);
		border-radius: 999px;
		background-color: #fff;
	}
}

/* LS-9 A: the gallery on phones, the first photo full width and the other four two by two */
@media (max-width: 600px) {
	.bmtc-location-single .bmtc-location-gallery-inner {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
	.bmtc-location-single .bmtc-gallery-title {
		grid-column: 1 / -1;
		margin-bottom: 0.6rem;
	}
	.bmtc-location-single .bmtc-gallery-grid {
		display: contents;
	}
	.bmtc-location-single .bmtc-gallery-grid-featured .bmtc-gallery-item:first-child {
		grid-column: 1 / -1;
	}
}

/* LS-10 A: the desktop gallery grid on tablets, two large then three across (the 768px block forced one column) */
@media (min-width: 601px) and (max-width: 1000px) {
	.bmtc-location-single .bmtc-gallery-grid-featured {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.6rem;
		margin-bottom: 1.6rem;
	}
	.bmtc-location-single .bmtc-gallery-grid-regular {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.6rem;
	}
}

/* LS-11 A: review cards like the home page's: the parent's blockquote rule (4px bar, 30px indent, weight 600) reset
   at every width, six-line clamp; on phones 84% cards that snap to centre (RV-4) */
.bmtc-location-single .bmtc-review-text {
	border: 0;
	padding: 0;
	margin: 0;
	font-size: 1.6rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.55;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	flex-grow: 0;
}
.bmtc-location-single .bmtc-review-author {
	margin: auto 0 0;
	font-size: 1.6rem;
}
@media (max-width: 600px) {
	.bmtc-location-single .bmtc-reviews-rail {
		gap: 1.2rem;
		scrollbar-width: none;
	}
	.bmtc-location-single .bmtc-reviews-rail::-webkit-scrollbar {
		display: none;
	}
	.bmtc-location-single .bmtc-review-card {
		flex: 0 0 84%;
		width: auto;
		min-width: 0;
		max-width: none;
		padding: 2rem;
		scroll-snap-align: center;
	}
}

/* LS-12 A: Best For and Program Goals two across from 601 to 1000px (the 768px block forced one column) */
@media (min-width: 601px) and (max-width: 1000px) {
	.bmtc-location-single .bmtc-bullet-list {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
		column-gap: 3.2rem;
	}
}

/* LS-13: the Reviews jump target clears the desktop sticky header like the other anchors */
.bmtc-location-single #reviews {
	scroll-margin-top: 90px;
}

/* ---- LS-14 A (raised by Damian): the featured photo at the top on phones, as the career pages' CS-4 B. The photo
   lives in the "About this Center" section after the hero, so main becomes a flex column, that section and its grid
   dissolve (display: contents), and the photo takes order -1; "About this Center" keeps its place after the hero on
   its own grey band ---- */
@media (max-width: 600px) {
	.bmtc-location-single {
		display: flex;
		flex-direction: column;
	}
	.bmtc-location-single .bmtc-featured-about-section,
	.bmtc-location-single .bmtc-featured-about-inner {
		display: contents;
	}
	.bmtc-location-single .bmtc-featured-image-column {
		order: -1;
		margin: 0 calc(50% - 50vw);
		padding: 1.2rem 1.6rem 0;
	}
	.bmtc-location-single .bmtc-about-column {
		margin: 0 calc(50% - 50vw);
		padding: 3.2rem 1.6rem;
		background-color: var(--surface-alt, #fafafa);
	}
	.bmtc-location-single .bmtc-location-hero {
		padding-top: 1.6rem;
	}
}

/* =====================================================================
   CONTACT PAGE (CT-1 B, CT-2, CT-4, CT-5, CT-6, CT-8, CONTACT_REVIEW.md, applied 2026-09-12)
   Page 1158, every selector .page-id-1158. The content is built by tools/contact-page-build.php; the call
   details and the center cards are the bm-contact-details and bm-locations blocks, styled in their own
   block.css; the reviews rail on phones is RV-4 in the HOME REVIEWS BAND banner. Root font-size is 62.5%,
   so 1rem = 10px.
   ===================================================================== */

/* ---- CT-1 B: above 1000px the column widens from the parent's 830px to 1,200px (as DG-7 did for the
   directory) ---- */
@media (min-width: 1001px) {
	.page-id-1158 #primary {
		width: 100%;
		max-width: 1200px;
	}
}
/* ---- CT-19 (Damian, 2026-09-13): above 1000px the top is two columns again, the heading, lead, and contact details
   on the left and the form in the wider right column (35/65 in the content, so the form gets about 750px at 1440,
   JotForm's own form width); the details are the block's stacked list there ---- */
.page-id-1158 .bm-contact-top {
	gap: 4.8rem;
	align-items: flex-start;
	margin-bottom: 0;
}
.page-id-1158 .bm-contact-lead > p {
	font-size: clamp(1.7rem, 1.8vw, 2rem);
	line-height: 1.55;
	margin: 0 0 2.4rem;
}
/* CT-9: the H1 "Contact Bright Mosaic Therapy Centers" left "Centers" alone on a third line in the 284px column at
   1024; balanced lines instead (line breaks only, like CH-2 and LA-1) */
.page-id-1158 .bm-contact-lead > h1 {
	text-wrap: balance;
}
/* CT-0: where the form lands when it scrolls into view after Submit, clear of the sticky desktop header */
.page-id-1158 .bm-contact-form iframe {
	scroll-margin-top: 9rem;
}
/* ---- CT-16 and CT-17 (Damian), at 1000px and below since CT-19: the heading, lead, form, and contact details full
   width and stacked, the form before the details. Core puts the columns side by side from 782px and forces it with
   !important, hence the !important here. The lead column dissolves (display: contents, as CS-4 did on the career
   single) so its heading, paragraph, and details become items of bm-contact-top; the form column takes order 1 and the
   details order 2; spacing comes from margins, not the gap ---- */
@media (max-width: 1000px) {
	.page-id-1158 .bm-contact-top {
		flex-wrap: wrap !important;
		gap: 0;
	}
	.page-id-1158 .bm-contact-top > .wp-block-column {
		flex-basis: 100% !important;
	}
	.page-id-1158 .bm-contact-top > .bm-contact-lead {
		display: contents;
	}
	.page-id-1158 .bm-contact-lead > * {
		flex: 0 0 100%;
		min-width: 0;
	}
	.page-id-1158 .bm-contact-top > .bm-contact-form {
		order: 1;
	}
	.page-id-1158 .bm-contact-lead > .bm-contact-details {
		order: 2;
		margin-top: 2.4rem;
	}
	.page-id-1158 .bm-contact-form iframe {
		scroll-margin-top: 1.6rem;
	}
}
/* CT-16: from 601 to 1000px the details (phone, hours, email, and fax, as Damian set the block) in one wrapping row;
   the block and its list are both flex rows so a call button, when the block shows one, sits in the same row.
   Phones keep the stacked list, and above 1000px it is a list in the left column. */
@media (min-width: 601px) and (max-width: 1000px) {
	.page-id-1158 .bm-contact-lead .bm-contact-details,
	.page-id-1158 .bm-contact-lead .bm-contact-details-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 1.2rem 3.2rem;
	}
}

/* ---- CT-20 (Damian, 2026-09-13): a diagnosticians callout under the contact details (content by
   tools/contact-diagnosticians-callout.php): the home and ABA wording and "Find a Diagnostician" button on a grey card
   in the left column; at 1000px and below it follows the details, after the form. The button's icons are 30px at
   top: -35px (btn-diagnostician), so the buttons row keeps 4.4rem above it inside the card. ---- */
.page-id-1158 .bm-contact-diagnosticians {
	margin-top: 3.2rem;
	padding: 2.4rem;
	background-color: #f4f4f4;
	border-radius: 12px;
}
.page-id-1158 .bm-contact-diagnosticians p {
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.55;
}
.page-id-1158 .bm-contact-diagnosticians p strong {
	font-size: 1.8rem;
	color: var(--color-heading, #004e66);
}
.page-id-1158 .bm-contact-diagnosticians .wp-block-buttons {
	margin-top: 4.4rem;
}
@media (max-width: 1000px) {
	.page-id-1158 .bm-contact-lead > .bm-contact-diagnosticians {
		order: 3;
		margin-top: 3.2rem;
	}
}
@media (max-width: 600px) {
	.page-id-1158 .bm-contact-diagnosticians .wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
		margin: 0;
	}
	.page-id-1158 .bm-contact-diagnosticians .wp-block-button .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* ---- Sections below the form (CT-4, CT-5, CT-8): the site's H2 size and even spacing ---- */
.page-id-1158 .bm-contact-section {
	margin-top: 6.4rem;
}
.page-id-1158 .bm-contact-section h2 {
	font-size: clamp(2.6rem, 4vw, 3.2rem);
	line-height: 1.2;
	margin: 0 0 2.4rem;
	text-wrap: balance;
}
.page-id-1158 .bm-contact-routes-grid {
	gap: 3.2rem;
	margin-bottom: 0;
}
.page-id-1158 .bm-contact-routes h3 {
	font-size: 2rem;
	line-height: 1.3;
	margin: 0 0 0.8rem;
}
.page-id-1158 .bm-contact-routes p {
	margin: 0 0 1.2rem;
}
@media (max-width: 1000px) {
	.page-id-1158 .bm-contact-section {
		margin-top: 4.8rem;
	}
}

/* ---- Phones: 16px gutters like the other templates (the parent's #page gives 15px) ---- */
@media (max-width: 600px) {
	.page-id-1158 #page {
		padding-left: 1.6rem;
		padding-right: 1.6rem;
	}
	.page-id-1158 .bm-contact-routes-grid {
		gap: 2.4rem;
	}
}

/* ---- CT-6: the insurer logos in one row at 1000px and below, as on the service pages (SP-1's insurer band rules,
   scoped to their header there); on Contact the pattern stands alone, so the section label keeps its size ---- */
@media (max-width: 1000px) {
	.page-id-1158 .gpb-authority-section-logo-list .gb-layout-columns-4 {
		overflow: visible;
		margin: 0;
		padding: 0 !important;
	}
	.page-id-1158 .gpb-authority-section-logo-list .gb-layout-columns-4 > .gb-layout-column-wrap.gb-is-responsive-column {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		gap: 1.2rem;
	}
	.page-id-1158 .gpb-authority-section-logo-list .gb-layout-columns-4 .gb-block-layout-column {
		flex: 0 1 auto;
		width: auto;
		min-width: 0;
	}
	#page .gpb-authority-section-logo-list .gb-layout-columns-4 figure.wp-block-image {
		display: block;
		margin: 0;
		clear: none;
	}
	.page-id-1158 .gpb-authority-section-logo-list .gb-layout-columns-4 img {
		display: block;
		width: auto !important;
		max-width: 100%;
		height: 3.2rem;
		margin: 0;
		object-fit: contain;
	}
}

/* =====================================================================
   HEADER MENU: DRAWER (NAV-2 A, NAV-3 A, NAV-4 A, NAV-9 A, HEADER_REVIEW.md, applied 2026-09-13)
   Behaviour from js/header-menu.js, which replaced the parent's jQuery script and keeps its class
   names; it adds .is-open on .drawer and html.bm-nav-open while the drawer is open, and the submenu
   buttons (.toggle-sub, a 52px square after each parent link). At 1000px and below only.
   - Base: the drawer shows on .is-open; the toggle's two labels swap on .toggle-active (the parent
     script set inline display on both).
   - NAV-4: the drawer opens over the page, below the bar, with a scrim that ends above the call bar;
     the panel scrolls inside itself when taller. The page is locked and inert behind it.
   - NAV-3: every link fills its row; the chevron sits at the row's right edge behind a hairline.
   - NAV-9: white 18px links, solid hairlines, transparent chevrons that turn when open, submenus
     indented under a rule, the current page underlined in the site's orange, and the panel on the
     bar's own gutters (4% on tablets, 15px on phones; the parent used 5%).
===================================================================== */
@media (max-width: 1000px) {
	.drawer.is-open {
		display: block;
		max-height: calc(100dvh - var(--bm-nav-top, 92px));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.mobile-navigation.toggle-active .button-toggle span:first-child { display: none; }
	.mobile-navigation.toggle-active .button-toggle span:last-child { display: inline; }

	/* NAV-4: over the page. --bm-nav-top is the bar's bottom edge in the viewport, set on open. */
	.drawer-wrap {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 120;
	}
	.toggle-active + .drawer-wrap {
		height: calc(100dvh - var(--bm-nav-top, 92px));
		background: rgba(0, 30, 40, 0.55);
	}
	body.has-bmtc-call-bar .toggle-active + .drawer-wrap {
		height: calc(100dvh - var(--bm-nav-top, 92px) - 64px - env(safe-area-inset-bottom, 0px));
	}
	/* One step stronger than the viewport cap above, so the panel ends above the call bar. */
	.toggle-active + .drawer-wrap .drawer.is-open {
		max-height: 100%;
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
	}
	/* The root only: its overflow applies to the viewport, and body keeps the parent's overflow-x. */
	html.bm-nav-open { overflow: hidden; }

	/* NAV-9: the panel and its rows. */
	.drawer.drawer-menu-explore { padding: 8px 4% 24px; }
	.drawer .drawer-navigation { padding: 0; font-size: 18px; }
	.drawer .drawer-navigation ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
	.drawer .drawer-navigation ul li:last-child { border-bottom: 0; }

	/* NAV-3: the link is the whole row. */
	.drawer .drawer-navigation ul li a {
		display: flex;
		align-items: center;
		min-height: 52px;
		padding: 10px 0;
		color: #fff;
		font-weight: 600;
		line-height: 1.35;
	}
	.drawer .drawer-navigation .menu-item-has-children > a { padding-right: 64px; }
	.drawer .drawer-navigation a:hover,
	.drawer .drawer-navigation a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
	.drawer .drawer-navigation a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

	/* The chevron: a 52px square at the row's right edge (the parent's grey 50px box, restyled). */
	.drawer .menu-item-has-children .toggle-sub {
		display: flex;
		align-items: center;
		justify-content: center;
		top: 0;
		right: 0;
		width: 52px;
		height: 52px;
		min-height: 0;
		padding: 0;
		border: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: #fff;
	}
	.drawer .menu-item-has-children .toggle-sub:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
	.drawer .menu-item-has-children .toggle-sub:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
	.drawer .toggle-sub .bm-chevron { transition: transform 0.2s ease; }
	.drawer .toggle-sub[aria-expanded="true"] .bm-chevron { transform: rotate(180deg); }

	/* Submenus: indented under a rule, one step smaller, no dividers. */
	.drawer .drawer-navigation .sub-menu {
		width: auto;
		margin: 0 0 12px 2px;
		padding: 0 0 0 16px;
		border-left: 2px solid rgba(255, 255, 255, 0.3);
	}
	.drawer .drawer-navigation .sub-menu li,
	.drawer .drawer-navigation .sub-menu li:first-child { border: 0; }
	.drawer .drawer-navigation .sub-menu li a {
		min-height: 44px;
		padding: 8px 0;
		font-size: 16px;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.9);
	}

	/* The current page. */
	.drawer .drawer-navigation a[aria-current="page"] {
		color: #fff;
		font-weight: 700;
		text-decoration: underline;
		text-decoration-color: #ff6900;
		text-decoration-thickness: 3px;
		text-underline-offset: 6px;
	}
}

@media (max-width: 600px) {
	.drawer.drawer-menu-explore { padding-left: 15px; padding-right: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.drawer .toggle-sub .bm-chevron { transition: none; }
}

/* =====================================================================
   HEADER MENU: ONE ROW FROM 1001 TO 1320PX (NAV-6 A, HEADER_REVIEW.md, applied 2026-09-13)
   The row needs about 755px with the phone pill and the right column reaches that only at 1320px,
   so the pill used to wrap to a second row (CT-15). In that range the pill is a 44px round button
   (the number stays in its aria-label) and the items are 10px closer; from 1321px nothing changes.
===================================================================== */
@media (min-width: 1001px) and (max-width: 1320px) {
	.main-navigation ul li { padding: 0 10px; }
	.main-navigation .bmtc-header-phone { padding-right: 0; }
	.bmtc-header-phone .bmtc-header-phone__link { width: 44px; height: 44px; padding: 0; justify-content: center; }
	.bmtc-header-phone .bmtc-header-phone__number { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.bmtc-header-phone .bmtc-icon { width: 20px; height: 20px; }
}

/* =====================================================================
   HEADER MENU: DROPDOWNS CENTRED IN CSS (NAV-10 A, HEADER_REVIEW.md, applied 2026-09-13)
   The parent script centred each first-level dropdown once on window load with an inline margin;
   it is gone, and this keeps the same position (within 1px at 1440) through resizes and font swaps.
===================================================================== */
@media (min-width: 1001px) {
	.main-navigation .menu > li > .sub-menu { margin-left: 0; }
	.main-navigation .menu > li.focus > .sub-menu,
	.main-navigation .menu > li:hover > .sub-menu,
	.main-navigation .menu > li:focus-within > .sub-menu {
		left: 50%;
		transform: translateX(-50%);
	}
}

/* =====================================================================
   HEADER MENU: STICKY BAR ON PHONES AND TABLETS (NAV-1 A, HEADER_REVIEW.md, applied 2026-09-13)
   At 1000px and below the header sticks to the top. js/header-menu.js adds body.bm-nav-compact past
   150px (8px bar padding and a 44px logo: a 60px bar; full size again below 10px) and body.bm-nav-hidden
   while scrolling down, so the bar slides away while reading and returns on any upward scroll. The top
   of the page keeps MH-1's bar. The desktop sticky header (js/sticky-header.js) is separate and unchanged.
===================================================================== */
@media (max-width: 1000px) {
	/* The parent's body { overflow-x: hidden } makes body a scroll container, which cancels sticky (as on the desktop). */
	body { overflow-x: clip; }

	.site-header {
		position: sticky;
		top: 0;
		z-index: 100;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}
	body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 46px); }

	/* The parent transitions every property of the bar; a padding transition would make the script read the
	   old height when it sets the compensating margin. */
	.mobile-navigation { transition: none; }

	body.bm-nav-compact .site-header { box-shadow: 0 2px 10px rgba(0, 38, 51, 0.14); }
	body.bm-nav-compact .mobile-navigation { padding-top: 8px; padding-bottom: 8px; }
	body.bm-nav-compact .mobile-navigation .custom-logo-link img { max-height: 44px; }

	body.bm-nav-hidden .site-header {
		transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px)));
		box-shadow: none;
	}

	/* Contact: CT-0 scrolls the form into view after use; when that scroll goes up the bar returns, so leave it room. */
	.page-id-1158 iframe[id^="JotFormIFrame"] { scroll-margin-top: 70px; }
}

/* Phones: the admin bar scrolls away with the page, so the header sticks at 0. */
@media (max-width: 600px) {
	body.admin-bar .site-header { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header { transition: none; }
}

/* =====================================================================
   GET STARTED: NO ANIMATION ON PHONES AND TABLETS (BTN-1, BUTTON_REVIEW.md, raised by Damian, applied 2026-09-13)
   At 1000px and below the "Get Started" block buttons neither jitter on load nor pulse on hover
   (btn-jittery). They are the btn-jittery buttons whose link goes to the Contact page: every "Get
   Started" links to #contact, which inc/contact-cta.php rewrites to the Contact URL. Other btn-jittery
   buttons ("Find a Center Near You") and the desktop are unchanged. Touch-only screens wider than
   1000px (an iPad in landscape, 1024px) count as tablets too: (hover: none) and (pointer: coarse).
===================================================================== */
@media (max-width: 1000px), (hover: none) and (pointer: coarse) {
	.wp-block-button.btn-jittery .wp-block-button__link[href*="/contact/"],
	.wp-block-button.btn-jittery .wp-block-button__link[href*="/contact/"]:hover {
		animation: none;
	}
}

/* =====================================================================
   BUTTONS: FOCUS, HOVER, AND TEXT COLOUR (BTN-2 A, BTN-3 A, BTN-4 A, BTN-5 A, BUTTON_REVIEW.md, applied 2026-09-14)
   - BTN-2: one keyboard focus ring for every button, 3px #004e66 with a 3px gap, on :focus-visible only
     (a click or a tap shows nothing). Block buttons had outline: none !important; the template buttons and
     the header pill had a ring in their own colour. The call bar keeps its inset white ring (a teal ring on
     the teal bar would not show) and the drawer keeps its white rings.
   - BTN-3: template link buttons keep white text in every state (the parent colours every link #272c30 on
     hover, focus, and active).
   - BTN-4: "View Hours" stays a text link on hover (the shared button hover painted its background the
     colour of its text).
   - BTN-5: every filled button goes one shade darker on hover and nothing moves (the 1px lift is gone from
     css/shared.css). Editor-picked colours get the darker shade through their colour classes. The btn-jittery
     hover repeats the resting animation, so it no longer pulses and the load-time jitter does not replay
     when the pointer leaves.
===================================================================== */
.wp-block-button .wp-block-button__link:focus-visible,
.wp-block-button .wp-element-button:focus-visible,
.bmtc-btn:focus-visible,
.bmtc-header-phone .bmtc-header-phone__link:focus-visible,
.bmtc-hours-toggle:focus-visible {
	outline: 3px solid #004e66 !important;
	outline-offset: 3px;
}

.bmtc-btn--primary:hover,
.bmtc-btn--primary:focus,
.bmtc-btn--primary:active,
.bmtc-btn--alt:hover,
.bmtc-btn--alt:focus,
.bmtc-btn--alt:active {
	color: #fff;
}

.bmtc-hours-toggle:hover,
.bmtc-hours-toggle:focus {
	background: transparent;
}

/* The preset colour classes carry !important in core, so the hover shades need it too. */
.wp-block-button .wp-block-button__link.has-luminous-vivid-orange-background-color:hover { background-color: #e65c00 !important; }
.wp-block-button .wp-block-button__link.has-brand-background-color:hover { background-color: #005f73 !important; }
.wp-block-button .wp-block-button__link.has-brand-dark-background-color:hover { background-color: #004a56 !important; }

.wp-block-button.btn-jittery .wp-block-button__link:hover,
.wp-block-button.btn-jittery .wp-element-button:hover {
	animation: jittery 2s 1s 1 forwards;
}

/* =====================================================================
   CALL BAR AS A FLOATING "CALL" PILL (BTN-10 B, BUTTON_REVIEW.md, raised by Damian, applied 2026-09-14)
   At 1000px and below the fixed full-width call bar (390x64 on a phone) stacked on Safari's bottom
   toolbar. It is now a pill at the bottom right: 48px tall, 16px from the edges, reading "Call" with the
   phone icon (inc/header-phone-cta.php; the number stays in its aria-label). Its footprint is still 64px
   from the bottom, so the page's end padding (has-bmtc-call-bar) is unchanged. With the menu open the
   backdrop runs to the bottom of the screen and the panel stops 64px short, so the pill floats over the
   backdrop instead of leaving an undimmed strip. The desktop has no call bar.
===================================================================== */
@media (max-width: 1000px) {
	.bmtc-call-bar {
		left: auto;
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		min-height: 48px;
		padding: 0 22px 0 18px;
		gap: 8px;
		border-radius: 999px;
		font-size: 17px;
		box-shadow: 0 4px 14px rgba(0, 38, 51, 0.3);
	}
	.bmtc-call-bar .bmtc-icon {
		width: 20px;
		height: 20px;
	}

	body.has-bmtc-call-bar .toggle-active + .drawer-wrap {
		height: calc(100dvh - var(--bm-nav-top, 92px));
	}
	body.has-bmtc-call-bar .toggle-active + .drawer-wrap .drawer.is-open {
		max-height: calc(100% - 64px - env(safe-area-inset-bottom, 0px));
	}
}