/*
Theme Name: Tri-Lakes Family Care
Theme URI: https://trilakesfamilycare.com/
Author: Tri-Lakes Family Care
Description: Custom classic theme for Tri-Lakes Family Care & Urgent Care (the "Two Doors" redesign). Phones, hours, prices and the address come from the TLFC Clinic Data plugin.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tlfc
*/

/*
 * One stylesheet, organised by the sections of tlfc-handoff/SPEC.md:
 *
 *   0. Fonts (SPEC Implementation notes 3)
 *   1. Base and typography (SPEC Typography)
 *   2. Layout: gutters, sections, grids (SPEC Spacing, radii, and grid; Responsive behavior)
 *   3. Components: buttons, text link, kicker, tag, breadcrumb (SPEC Components)
 *   4. Shell: status ribbon, header, menu panel, footer, phone bar (SPEC Components, Responsive)
 *   5. Interior pages (temporary page.php hero and content)
 *   6. States and interactions: hover, focus, skip link (SPEC States and interactions)
 *   7. Redesigned content sections, home page (SPEC Components and Page templates "Home"; the
 *      responsive steps of design/home-responsive.html)
 *   8. Interior pages: shared components (SPEC Components and the Page templates rows for Services,
 *      About, Insurance, Contact and Virtual Visits; docs/content-model.md Part II)
 *
 * Tokens (every colour, spacing step and radius) live in assets/css/tokens.css, loaded first.
 * Class names follow design/home-responsive.html wherever it has one. Breakpoints are the drawn ones:
 * 1439 (fluid desktop), 1199 (nav collapses), 1023 (grids to two, tablet), 767 (phone), 359 (icon-only Book).
 */

/* =====================================================================================================
   0. Fonts: self-hosted variable woff2, latin subset (covers Spanish accents). OFL, see assets/fonts/.
   The unicode-range is Google Fonts' "latin" range, so glyph fallback matches the design files exactly.
   ===================================================================================================== */

@font-face {
	font-family: "Merriweather";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("assets/fonts/merriweather-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Merriweather Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("assets/fonts/merriweather-sans-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================================================
   1. Base and typography
   ===================================================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--ground);
	color: var(--navy);
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* The page content grows; the footer keeps its own height at every width (SPEC Implementation note 5). */
.site-main {
	flex: 1 0 auto;
}

img,
svg,
video {
	max-width: 100%;
}

img {
	height: auto;
}

svg {
	flex-shrink: 0;
}

a {
	color: var(--navy);
}

a:hover {
	color: var(--green-deep);
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 700;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

address {
	font-style: normal;
}

/* Hero door headline (h1, h2): 56 / 48 (1024-1439) / 34 phone */
.h-door {
	font-weight: 900;
	font-size: 56px;
	line-height: 1.08;
	letter-spacing: -0.01em;
}

/* Interior page h1: 52 / 48 / 34 phone */
.h-page {
	font-family: var(--font-serif);
	font-weight: 900;
	font-size: 52px;
	line-height: 1.08;
	letter-spacing: -0.01em;
}

/* Section h2: 40 / 36 / 28 phone, max-width 760 */
.h-sec {
	font-weight: 700;
	font-size: 40px;
	line-height: 1.15;
	max-width: 760px;
}

/* Card and address h3: 24 / 21 phone */
.h-card {
	font-weight: 700;
	font-size: 24px;
	line-height: 1.25;
}

/* Deck under a door headline (18) and under an interior h1 (19); 15 on phone */
.lead,
.deck {
	margin: 0;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.6;
	max-width: 520px;
}

.deck {
	font-size: 19px;
	max-width: none;
	color: var(--ink);
}

/* Body copy: 17 / 15 phone, weight 300, ink */
.body {
	margin: 0;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--ink);
}

/* Caption line (hours line under the door buttons) */
.small {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	font-size: 14px;
	color: var(--cap);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 1439px) {
	.h-door,
	.h-page {
		font-size: 48px;
	}

	.h-sec {
		font-size: 36px;
	}
}

@media (max-width: 767px) {
	.h-door,
	.h-page {
		font-size: 34px;
		line-height: 1.1;
	}

	.h-sec {
		font-size: 28px;
	}

	.h-card {
		font-size: 21px;
	}

	.lead,
	.deck {
		font-size: 15px;
		line-height: 1.55;
	}

	.body {
		font-size: 15px;
	}

	body {
		font-size: 15px; /* the phone artboard's base size */
	}
}

/* =====================================================================================================
   2. Layout: gutters, sections, grids
   ===================================================================================================== */

/* Side gutters: 64 desktop, 48 below 1440, 20 phone (the --gutter token changes per breakpoint).
   There is no centred max-width container: sections are full-bleed (SPEC Spacing). */
.wrap {
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* Section padding 96 / 88 desktop, 80 / 72 below 1440, 40 / 40 phone; header to content 40 (16 phone). */
.section {
	display: flex;
	flex-direction: column;
	gap: var(--section-gap);
	padding-top: var(--section-top);
	padding-bottom: var(--section-bottom);
}

.section.white {
	background: var(--white);
}

.sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-40);
}

.sec-head .t {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	max-width: 760px;
}

/* Three equal tracks; two at 1023, one at 767 (SPEC Implementation note 6). */
.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--grid-gap);
}

@media (max-width: 1023px) {
	.grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sec-head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-16);
	}
}

@media (max-width: 767px) {
	.grid-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =====================================================================================================
   3. Components
   ===================================================================================================== */

/* ---- Buttons ----------------------------------------------------------------------------------------
   .pill            48px pill, 15/700 (the header size)
   .pill-lg         56px, 0 28px, 17/700 (the page size)
   .pill-green      green-deep fill, white text (Patient Portal, Get directions)
   .pill-navy       navy fill, white text (every Book button, Call)
   .pill-outline    2px navy border, navy text
   .pill-ghost      outline on navy: 2px white at 55%, white text
   .actions         a button row; on phone its pills go full width at 52px and stack with 10px gaps
   Outline buttons (.pill-outline, .pill-ghost) are drawn 4px taller than the filled button beside
   them: the artboards put the 2px border outside the filled size. Owner ruling (Tony, 2026-10-09): the
   drawings win over SPEC's "same geometry", so every outline instance measured in the artboards gets
   its drawn height: 52 next to a 48 (the Find-us "Call us" at 768 and up), 60 next to a 56 (the hero
   Call at 768 and up; about.html Call, contact.html Get directions), 56 next to a 52 on phone (the hero
   Call, the Find-us Call, the "Read all reviews on Google" button).
   Buttons never wrap. Icons are 20px (18 in the header) with a 10px gap (8 in the header). */
.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-10);
	height: 48px;
	padding: 0 var(--space-22);
	border: 0;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.pill-lg {
	height: 56px;
	padding: 0 var(--space-28);
	font-size: 17px;
}

.pill-green,
.pill-green:hover {
	background: var(--green-deep);
	color: var(--white);
}

.pill-navy,
.pill-navy:hover {
	background: var(--navy);
	color: var(--white);
}

.pill-outline,
.pill-outline:hover {
	background: transparent;
	border: 2px solid var(--navy);
	color: var(--navy);
}

.pill-outline,
.pill-ghost {
	height: 52px; /* drawn: 4px taller than the 48px filled pill (ruling above) */
}

.pill-outline.pill-lg,
.pill-ghost.pill-lg {
	height: 60px; /* drawn: 4px taller than the 56px filled pill */
}

.pill-ghost,
.pill-ghost:hover {
	background: transparent;
	border: 2px solid var(--on-navy-outline);
	color: var(--white);
}

.actions {
	display: flex;
	align-items: center;
	gap: var(--space-14);
	flex-wrap: wrap;
}

@media (max-width: 767px) {
	.actions {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-10);
	}

	.actions .pill {
		width: 100%;
		height: 52px;
		font-size: 16px;
	}

	/* Outline buttons on phone: 56px beside the 52px filled ones, as home-phone.html draws them. */
	.actions .pill.pill-outline,
	.actions .pill.pill-ghost {
		height: 56px;
	}
}

/* ---- Text link: 700, navy, no underline, trailing arrow typed as text (→) ---------------------- */
.link {
	font-weight: 700;
	font-size: 16px;
	white-space: nowrap;
	text-decoration: none;
	color: var(--navy);
}

.link.on-dark {
	color: var(--white);
}

/* ---- Kicker: uppercase 13/700, 0.18em; green-deep on light, brand green on dark; 12 on phone ---- */
.kicker {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--green-deep);
}

.kicker.on-dark {
	color: var(--green);
}

@media (max-width: 767px) {
	.kicker {
		font-size: 12px;
	}
}

/* ---- Tag: "Walk in" green-deep, "Book" navy; uppercase 12/700, 0.12em ---------------------------- */
.tag {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tag.g {
	color: var(--green-deep);
}

.tag.n {
	color: var(--navy);
}

/* ---- Breadcrumb: 13px, 18px top padding, page's own background, light slash, current bold navy ---- */
.breadcrumb {
	padding-top: 18px;
	font-size: 13px;
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline; /* the first lines line up when the current page wraps inside its item (below) */
	gap: var(--space-10);
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: var(--space-10);
}

/* The slash ends each item but the last (review of the provider pages, 2026-10-09, finding 2): when a long
   name wraps the trail at 320, the slash stays at the end of the first line instead of opening the second
   ("/ Carolyn Clark"). It is drawn, not read (finding 13): the empty alternative text after "/" keeps it
   out of the accessibility tree; a browser without that syntax drops the second declaration and keeps the
   first. */
.breadcrumb li:not(:last-child)::after {
	content: "/";
	content: "/" / "";
	color: var(--on-navy-muted);
}

/* The current page starts on the line of the slash before it and wraps inside its own item (review of the
   service pages, 2026-10-10, finding 2): a long name ("Hormone replacement therapy" at 360 and 320) no longer
   leaves the slash ending a line with the name alone on the next. It moves down whole only when less than
   8em is left after the slash, and then the slash still ends the line above (finding 2 of the provider
   review: no line starts with a slash). Where the trail fits on one line nothing moves. */
.breadcrumb li:last-child {
	flex: 1 1 8em;
}

.breadcrumb a {
	color: var(--cap);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--navy);
	text-decoration: underline;
}

.breadcrumb [aria-current] {
	color: var(--navy);
	font-weight: 700;
}

.breadcrumb.on-ground {
	background: var(--ground);
}

.breadcrumb.on-white {
	background: var(--white);
}

/* =====================================================================================================
   4. Shell
   ===================================================================================================== */

/* ---- Status ribbon: 44px navy, 13px white; 40px / 12px on phone with status + Call only ---------- */
.ribbon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16); /* only matters when the items fill the bar: a long closed label never touches the phone or Call */
	height: var(--ribbon-h);
	background: var(--navy);
	color: var(--white);
	font-size: 13px;
	font-weight: 400;
}

.ribbon .l,
.ribbon .r {
	display: flex;
	align-items: center;
	gap: var(--space-24);
	min-width: 0;
}

/* Nothing in the 44px bar may wrap (the plugin's closed wordings run to "Closed now, opens Wednesday,
   September 30 at 8:00 AM"). When the items do not fit, the walk-in line gives way first (the right group
   shrinks ten times faster), then the status; both end in an ellipsis. The address, the phone and Call
   never shrink. The full status text stays in the DOM for screen readers. */
.ribbon .l {
	flex: 0 1 auto;
}

.ribbon .r {
	flex: 0 10 auto;
}

.ribbon .addr,
.ribbon .tel,
.ribbon .call {
	flex-shrink: 0;
	white-space: nowrap;
}

.ribbon .hide-tablet,
.status .full,
.status .compact {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ribbon a {
	color: var(--white);
	text-decoration: none;
}

.ribbon a:hover {
	color: var(--white);
	text-decoration: underline;
}

.ribbon .addr {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
}

.ribbon .tel {
	font-weight: 700;
}

.ribbon .call {
	display: none;
	align-items: center;
	gap: var(--space-6);
	font-weight: 700;
}

.status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	min-width: 0;
}

.status .dot {
	flex-shrink: 0;
}

/* The 8px dot: brand green while open, --closed when closed. The plugin's refresh script rewrites the
   .tlfc-status span (text and tlfc-status--open/closed class), so the dot follows it through :has();
   the server-rendered is-open / is-closed class covers browsers without :has(). */
.dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--closed);
}

.status.is-open .dot,
.status:has(.tlfc-status--open) .dot {
	background: var(--green);
}

.status:has(.tlfc-status--closed) .dot {
	background: var(--closed);
}

.status .compact {
	display: none;
}

/* ---- Header: 96px white, hairline plus soft shadow, above the hero; 64px on phone ---------------- */
.header {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-32);
	height: var(--header-h);
	background: var(--white);
	box-shadow: 0 1px 0 var(--header-line), var(--shadow-header);
}

.header .brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.header .brand img {
	display: block;
	height: 60px;
	width: auto;
}

.nav {
	flex-shrink: 0;
	font-size: 15px;
	font-weight: 700;
}

.nav ul {
	display: flex;
	align-items: center;
	gap: var(--space-36);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav li {
	display: flex;
}

.nav a {
	text-decoration: none;
}

/* Active page: 3px brand-green underline, drawn exactly as the interior artboards draw it. */
.nav a[aria-current] {
	padding-bottom: var(--space-4);
	border-bottom: 3px solid var(--green);
}

.hdr-actions {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	flex-shrink: 0;
}

.hdr-actions .portal {
	gap: var(--space-8);
	padding: 0 var(--space-20) 0 var(--space-16);
}

.hdr-actions .book {
	gap: var(--space-8);
	padding: 0 var(--space-22) 0 18px;
}

.book .short {
	display: none;
}

.hdr-actions .menu {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--navy);
	cursor: pointer;
}

/* ---- Menu panel (below 1200): full height; five links at 20px, Portal and Book, address and hours -- */
.menu-panel[hidden] {
	display: none;
}

.menu-panel {
	position: fixed;
	inset: 0;
	z-index: 1045; /* above the Tebra floating button (1040), below the Tebra booking dialog (1050) */
	display: flex;
	justify-content: flex-end;
}

.menu-panel .scrim {
	position: absolute;
	inset: 0;
	background: var(--scrim);
}

.menu-panel .sheet {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(100%, 440px);
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--white);
	box-shadow: var(--shadow-header);
}

.menu-panel .sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	height: calc(var(--ribbon-h) + var(--header-h));
	/* The row sits where the header row sits (below the ribbon's height), so the close button lands
	   exactly on the menu button and, on phone, the logo does not move when the panel opens. */
	padding: var(--ribbon-h) var(--gutter) 0;
	box-shadow: 0 1px 0 var(--header-line);
}

.menu-panel .sheet-head img {
	display: block;
	height: 40px;
	width: auto;
}

.menu-panel .close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--navy);
	cursor: pointer;
}

.menu-panel .sheet-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
	padding: var(--space-24) var(--gutter) var(--space-40);
}

.menu-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule);
}

.menu-nav li {
	border-bottom: 1px solid var(--rule);
}

.menu-nav a {
	display: flex;
	align-items: center;
	min-height: 56px;
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
}

.menu-nav a[aria-current] {
	color: var(--green-deep);
}

.menu-panel .menu-actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
}

.menu-panel .menu-actions .pill {
	width: 100%;
	height: 52px;
	font-size: 16px;
}

.menu-panel .menu-visit {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	font-size: 15px;
	color: var(--ink);
}

.menu-panel .menu-visit a {
	color: var(--navy);
	font-weight: 700;
	text-decoration: none;
}

.menu-panel .menu-visit a:hover {
	color: var(--navy);
	text-decoration: underline;
}

html.menu-open,
html.menu-open body {
	overflow: hidden;
}

/* ---- Footer: navy, topographic texture at 21%, fixed height (nothing in it grows) ----------------- */
.footer {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
	padding-top: var(--space-64);
	padding-bottom: var(--space-32);
	background: var(--navy);
	color: var(--white);
}

.texture {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
}

.footer .texture {
	opacity: 0.21;
}

/* ---- Text on the topographic texture (owner ruling, Tony, 2026-10-09) ----------------------------
   Where small text sits on the contour texture, a contour line passing behind a letter drops the
   contrast below 4.5:1 (the urgent door's h1 kicker to about 2.2:1, the footer kickers to about 3.1).
   Every container that carries the texture (a direct child img.texture: the urgent door, the footer,
   and any later navy band that uses the texture) gives its text a soft navy halo, --halo-navy. On plain
   navy the halo is the background colour, so it cannot be seen; over a contour line it hides the line
   for a few pixels around each letter. Colours and the texture's opacity stay as drawn. text-shadow
   inherits, so every line of text inside picks it up; text on its own solid fill (filled buttons) opts
   out. The rule is keyed to the texture, never to "navy", so it cannot reach a light background.
   Measured by scripts/visual/contrast.mjs. */
:where(:has(> img.texture)) {
	text-shadow: var(--halo-navy);
}

:where(:has(> img.texture)) :where(.pill-green, .pill-navy) {
	text-shadow: none;
}

.fgrid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); /* tracks never grow with content */
	gap: var(--space-48);
}

.fcol {
	--fcol-gap: var(--space-10); /* also sizes the links' hit areas (section 6) */
	display: flex;
	flex-direction: column;
	gap: var(--fcol-gap);
	font-size: 15px;
}

.fcol.brand {
	--fcol-gap: var(--space-20);
}

.fcol.brand .flogo {
	display: block;
	align-self: flex-start;
	height: 56px;
	width: auto;
}

.fcol .tagline {
	margin: 0;
	max-width: 360px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--on-navy-muted);
}

.fcol a {
	color: var(--white);
	text-decoration: none;
}

.fcol a:hover {
	color: var(--white);
	text-decoration: underline;
}

.fcol .tel {
	font-weight: 700;
}

.fcol .k {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--green);
}

.fcol .muted {
	color: var(--on-navy-muted);
}

.fcol ul {
	display: contents;
}

.fcol li {
	display: block;
	list-style: none;
}

/* Social pills: 36px, 0 16px, 14/700, 1.5px white at 35%; each network's own glyph at 20px.
   The pills are printed twice: under the tagline (.social-wide, 768 and up) and, on phone, as their own
   grid item after Visit (.social-phone), so the DOM order is the visual (and tab) order in both layouts
   (WCAG 1.3.2, 2.4.3). The hidden copy is display: none, so it is out of the tab order and the a11y tree.
   The row may wrap (as in the design files) rather than overflow its column; it never needs to at the
   drawn widths, see the 1024 to 1199 rule in section 4b. */
.social {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-10);
}

.social-phone {
	display: none;
}

.fcol .social a,
.social a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	box-sizing: content-box; /* 36px inside the 1.5px border, as the artboards render it */
	height: 36px;
	padding: 0 var(--space-16);
	border: 1.5px solid var(--on-navy-pill);
	border-radius: var(--radius-pill);
	font-size: 14px;
	font-weight: 700;
	color: var(--white);
	text-decoration: none;
}

.social a:hover {
	background: var(--navy-6);
	text-decoration: none;
}

.social svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.fbottom {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-24);
	border-top: 1px solid var(--navy-line);
	font-size: 13px;
	color: var(--on-navy-muted);
}

.fbottom a {
	color: inherit;
	/* Underlined at rest: the same colour as the line around it, so without it nothing marks the link
	   (WCAG 1.4.1, axe link-in-text-block). The artboards draw it plain; this is a deliberate deviation. */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.fbottom a:hover {
	color: var(--white);
	text-decoration: underline;
}

/* ---- Phone bar: phone only, 64px, white with a 1px top line, Call (navy) + Directions (green-deep) --
   Hidden until the visitor scrolls past the first hero (or the header area); see assets/js/site.js. */
.sticky {
	display: none;
}

/* =====================================================================================================
   5. Interior pages (page.php for now: a white hero with the title as h1, then the content)
   ===================================================================================================== */

.ihero {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
	padding-top: var(--space-72);
	padding-bottom: var(--space-64);
	background: var(--white);
	border-bottom: 1px solid var(--header-line);
}

.ihero .h-page {
	max-width: 760px;
	color: var(--navy);
}

.entry-content {
	max-width: 860px;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--ink);
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content h2,
.entry-content h3 {
	color: var(--navy);
	margin: 1.6em 0 0.6em;
}

.entry-content a {
	font-weight: 700;
	text-decoration: none;
}

.entry-content a:hover {
	text-decoration: underline;
}

.entry-content img {
	border-radius: var(--radius-card);
}

@media (max-width: 767px) {
	.ihero {
		padding-top: var(--space-40);
		padding-bottom: var(--space-40);
		gap: var(--space-16);
	}

	.entry-content {
		font-size: 15px;
	}
}

/* =====================================================================================================
   4b. Shell responsive behaviour (SPEC Responsive behavior; design/home-responsive.html media queries)
   ===================================================================================================== */

/* 1024 to 1439: 48px gutters (token), nav gaps tighten to 22px, the Book label shortens to "Book". */
@media (max-width: 1439px) {
	.nav ul {
		gap: var(--space-22);
	}

	.book .full {
		display: none;
	}

	.book .short {
		display: inline;
	}
}

/* Below 1200: the nav collapses into the menu button; both header pills stay. */
@media (max-width: 1199px) {
	.header .nav {
		display: none;
	}

	.hdr-actions .menu {
		display: inline-flex;
	}
}

/* 1024 to 1199: the footer's brand column is at its narrowest (249.5px at 1024), and the two pills with
   their 20px glyphs are 28px wider than the text-only pills drawn in the artboards. Tighten them here
   (12px padding, 18px glyph, 6px gap) so they stay on one row inside the column. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.social {
		gap: var(--space-8);
	}

	.fcol .social a,
	.social a {
		gap: var(--space-6);
		padding: 0 var(--space-12);
	}

	.social svg {
		width: 18px;
		height: 18px;
	}
}

/* 768 to 1023: the ribbon drops the walk-in line; the footer goes to two columns. */
@media (max-width: 1023px) {
	.ribbon .hide-tablet {
		display: none;
	}

	.fgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-40);
	}
}

/* Phone (design/home-phone.html): ribbon 40px with status + Call, header 64px with a 40px logo and a
   40px Book; Patient Portal moves into the menu; footer stacks; the phone bar appears on scroll. */
@media (max-width: 767px) {
	.ribbon,
	.header {
		padding-left: var(--space-16);
		padding-right: var(--space-16);
	}

	.ribbon {
		font-size: 12px;
	}

	.ribbon .addr,
	.ribbon .r .hide-tablet,
	.ribbon .tel {
		display: none;
	}

	.ribbon .call {
		display: inline-flex;
	}

	/* Phone: the right group is only "Call", which must never be pushed off-screen; the status shrinks
	   (and ends in an ellipsis) instead. Without this, a long closed wording pushed Call 6px past the
	   right edge at 390 and gave the page a horizontal scroll. */
	.ribbon .l {
		flex: 1 1 auto;
	}

	.ribbon .r {
		flex: 0 0 auto;
	}

	.status .full {
		display: none;
	}

	.status .compact {
		display: inline;
	}

	.header {
		gap: var(--space-12);
	}

	.header .brand img {
		height: 40px;
	}

	.hdr-actions {
		gap: var(--space-8);
	}

	.hdr-actions .portal {
		display: none;
	}

	.hdr-actions .book {
		gap: var(--space-6);
		height: 40px;
		padding: 0 var(--space-14) 0 var(--space-12);
		font-size: 13px;
	}

	.hdr-actions .book svg {
		width: 16px;
		height: 16px;
	}

	.menu-panel .sheet {
		width: 100%;
	}

	.menu-panel .sheet-head {
		padding: var(--ribbon-h) var(--space-16) 0;
	}

	/* Footer, as drawn on the phone artboard: logo 44, Visit, social pills, then Pages and Patients
	   side by side. The markup is already in that order (the phone copy of the pills follows Visit). */
	.footer {
		gap: var(--space-28);
		padding-top: var(--space-40);
		padding-bottom: calc(var(--space-24) + var(--sticky-h));
	}

	.fgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-24) var(--space-20);
	}

	.fcol.brand,
	.fcol.visit,
	.social-phone {
		grid-column: 1 / -1;
	}

	.fcol.brand .flogo {
		height: 44px;
	}

	.fcol .tagline,
	.social-wide {
		display: none;
	}

	.social-phone {
		display: flex;
	}

	.fcol.visit {
		--fcol-gap: var(--space-6);
	}

	.fcol.pages,
	.fcol.patients {
		--fcol-gap: var(--space-8);
	}

	.fcol {
		font-size: 14px;
	}

	.fcol .k {
		letter-spacing: 0.12em;
	}

	.fbottom {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-6);
		padding-top: var(--space-16);
		font-size: 12px;
	}

	/* WCAG 2.4.11: an element that receives focus is scrolled clear of the fixed phone bar, never under it. */
	html.js {
		scroll-padding-bottom: calc(var(--sticky-h) + var(--space-16) + env(safe-area-inset-bottom, 0px));
	}

	/* With the vendor's floating Book button on the page (56px, 16px above the bar; section 4c), the
	   focused element is also scrolled clear of the button (review 2026-10-09, finding 13). */
	html.js:has(body .booking-button) {
		scroll-padding-bottom: calc(var(--sticky-h) + var(--space-16) + 56px + var(--space-16) + env(safe-area-inset-bottom, 0px));
	}

	html.js .sticky {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: var(--space-10);
		height: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px));
		padding: 0 var(--space-16) env(safe-area-inset-bottom, 0px);
		background: var(--white);
		border-top: 1px solid var(--line);
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 0.2s ease, visibility 0s linear 0.2s;
	}

	html.js .sticky.is-visible {
		transform: none;
		visibility: visible;
		transition: transform 0.2s ease, visibility 0s;
	}

	.sticky .pill {
		height: 48px;
		font-size: 15px;
	}
}

/* =====================================================================================================
   4c. The Tebra floating Book button (SPEC Build requirement 5)
   The button and its dialog come from the vendor snippet in WPCode (#bookingButton.booking-button, z-index
   1040); this restyles it without touching its behaviour. The vendor's own <style> is appended to <head>
   at run time, after this file, so every rule here carries "body" to outrank its single-class rules.
   It is sized in px: the vendor's 4.5rem / 1.25rem rendered 54px under X (12px root) but 72px here.
   ===================================================================================================== */

body .booking-button {
	right: var(--space-24);
	bottom: calc(var(--space-24) + env(safe-area-inset-bottom, 0px));
	width: 64px;
	height: 64px;
	padding: var(--space-20);
	background-color: var(--green-deep); /* white on brand green is 2.74:1; on green-deep 5.6:1 */
	color: var(--white);
	box-shadow: var(--shadow-header);
}

body .booking-button svg {
	width: 24px;
	height: 24px;
}

body .booking-button:hover {
	background-color: var(--green-deep);
	filter: brightness(0.94);
}

body .booking-button:focus:not(:focus-visible) {
	outline: none;
}

/* SPEC clarification (review of the landing pages, 2026-10-09, finding 8): SPEC draws this ring in brand
   green, which is only 2.53:1 on the ground and 2.74:1 on white (WCAG 1.4.11 needs 3:1). The button floats
   over light and dark sections alike, so the ring is two-tone: a 3px green-deep band on a white field that
   fills the 2px offset and shows 2px outside the band. The band always meets white on both sides (5.6:1),
   and on navy or charcoal the white edge separates it from the section. */
body .booking-button:focus-visible {
	outline: 3px solid var(--green-deep);
	outline-offset: 2px;
	box-shadow: 0 0 0 7px var(--white), var(--shadow-header);
}

/* The accessibility snippet sets aria-hidden on the button while its dialog is open. */
body .booking-button[aria-hidden="true"] {
	visibility: hidden;
}

/* From 768 (no phone bar): an element that receives focus is scrolled clear of the button (64px, 24px from
   the bottom edge, plus 16px), as on phones (review of the provider pages, 2026-10-09, finding 17: a
   right-aligned link such as "About the clinic ->" near the bottom of the viewport sat partly under it). */
@media (min-width: 768px) {
	html.js:has(body .booking-button) {
		scroll-padding-bottom: calc(64px + var(--space-24) + var(--space-16) + env(safe-area-inset-bottom, 0px));
	}
}

/* Keep the bottom of the footer clear of it (SPEC: "clear of the footer's text columns"). Only when the
   button is on the page, so a page without the snippet keeps the drawn footer exactly. Desktop and
   tablet: the copyright row stops 16px short of the button (64 + 24 + 16 from the viewport edge). */
body:has(.booking-button) .fbottom {
	padding-right: max(0px, calc(64px + var(--space-24) + var(--space-16) - var(--gutter)));
}

@media (max-width: 767px) {
	body .booking-button {
		width: 56px;
		height: 56px;
		padding: var(--space-16);
	}

	/* While the phone bar shows, the button rides 16px above it. */
	html.tlfc-bar-visible body .booking-button {
		bottom: calc(var(--sticky-h) + var(--space-16) + env(safe-area-inset-bottom, 0px));
		transition: bottom 0.2s ease, opacity 0.2s ease, visibility 0s;
	}

	/* Phone: at the bottom of the page the bar is showing and the button sits above it, so the footer
	   ends 16px above the button instead (bar 64 + 16 + button 56 + 16) rather than squeezing the
	   copyright line. This makes the phone footer 64px taller than the artboard's 88px bottom padding. */
	body:has(.booking-button) .fbottom {
		padding-right: 0;
	}

	body:has(.booking-button) .footer {
		padding-bottom: calc(var(--sticky-h) + var(--space-16) + 56px + var(--space-16) + env(safe-area-inset-bottom, 0px));
	}
}

/* At every width: hidden while the page's hero (home's two doors, or an interior hero) lies under it
   (site.js section 3), so it never covers a hero button, phone number or link (SPEC: the bottom bar
   "never covers the hero buttons"), nor the family on the hill at first paint. The header's Book button
   stays in view meanwhile. It fades back as soon as the hero has scrolled out of its band. (Review
   2026-10-09, finding 2: this used to apply to home only, and only from 768px.) */
body .booking-button {
	transition: opacity 0.2s ease, visibility 0s;
}

html.tlfc-hero-under-book body .booking-button,
html.tlfc-hero-under-book.tlfc-bar-visible body .booking-button {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

@media (prefers-reduced-motion: reduce) {
	html.tlfc-bar-visible body .booking-button,
	body .booking-button,
	html.tlfc-hero-under-book body .booking-button {
		transition: none;
	}
}

/* Below 360: the header Book button is icon only (its aria-label still reads "Book an appointment"). */
@media (max-width: 359px) {
	.book .short {
		display: none;
	}

	.hdr-actions .book {
		padding: 0 var(--space-12);
	}
}

@media (prefers-reduced-motion: reduce) {
	html.js .sticky,
	html.js .sticky.is-visible {
		transition: none;
	}
}

/* =====================================================================================================
   6. States and interactions
   ===================================================================================================== */

/* Filled buttons darken slightly; outline buttons fill 6% of their text colour instead. */
.btn:hover {
	filter: brightness(0.94);
}

.pill-outline:hover {
	filter: none;
	background: var(--navy-a06);
}

.pill-ghost:hover {
	filter: none;
	background: var(--navy-6);
}

/* Text links underline on hover and keep their colour (inline content links go green-deep, above). */
.link:hover,
.doorlink:hover {
	text-decoration: underline;
	color: var(--navy);
}

.link.on-dark:hover {
	color: var(--white);
}

.nav a:hover {
	color: var(--green-deep);
}

/* Focus: 2px green-deep outline, 2px offset, on every link, button and field. Never removed. */
:focus-visible {
	outline: 2px solid var(--green-deep);
	outline-offset: 2px;
}

/* SPEC clarification: on the navy ribbon and footer, green-deep is only 2.44:1 against the navy behind
   the ring (WCAG 1.4.11 needs 3:1), so the ring there is brand green (5.0:1), the colour SPEC already uses
   on navy and for the floating button's ring. Green-deep stays on every light surface. */
.ribbon :focus-visible,
.footer :focus-visible {
	outline-color: var(--green);
}

/* The same rule for the dark content surfaces (every section whose links sit on navy or charcoal). Add a
   new dark section here. Brand green is 5.0:1 on navy and 4.95:1 on charcoal. The urgent door is
   different: its topographic texture (35%) lightens the navy in lines that brand green does not clear
   (about 2:1 against a line), so the ring there is white (13.7:1 on navy, and above 3:1 against every
   texture pixel). On phone the navy surface of the Near-you panel is .before itself; its links are the
   same ones as on desktop, so one selector covers both. */
.pricing :focus-visible,
.near .before :focus-visible {
	outline-color: var(--green);
}

.door-urgent :focus-visible {
	outline-color: var(--white);
}

/* Hit areas (SPEC Components: "Hit targets are 44px or taller everywhere"). The artboards draw these
   links at text height; an invisible ::after grows the clickable box to 44px tall (or the full ribbon
   height) without moving anything. Stacked footer links grow only into half the gap to their neighbours
   (they are drawn 32.5px apart, 29px on phone), so no two targets overlap. The content's standalone
   text links (.link and .doorlink paragraphs, the "Read all reviews" link) get the same 44px: each has
   at least 10px of non-interactive space above and below, so the 12px growth meets no other target.
   Links inside a sentence (the Before-you-come and FAQ links, the Find-us phone line) are left at text
   height: growing them would cover the neighbouring lines of text. */
.ribbon a,
.nav a,
.header .brand,
.hdr-actions .pill,
.social a,
.fbottom a,
.breadcrumb a,
.menu-panel .menu-visit a,
.fcol > a,
.link > a,
.doorlink > a,
a.wp-block-tlfc-action.link {
	position: relative;
}

.ribbon a::after,
.nav a::after,
.header .brand::after,
.hdr-actions .pill::after,
.social a::after,
.fbottom a::after,
.breadcrumb a::after,
.menu-panel .menu-visit a::after,
.link > a::after,
.doorlink > a::after,
a.wp-block-tlfc-action.link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: max(100%, 44px);
	transform: translateY(-50%);
}

.ribbon a::after {
	height: max(100%, var(--ribbon-h)); /* the whole bar: 44px, 40px on phone */
}

.fcol > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--fcol-gap) / -2);
	bottom: calc(var(--fcol-gap) / -2);
}

/* Skip link: hidden until focused, then pinned top-left above the ribbon. */
.skip-link {
	position: absolute;
	left: var(--space-16);
	top: -100px;
	z-index: 200;
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 var(--space-20);
	border-radius: var(--radius-pill);
	background: var(--white);
	color: var(--navy);
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus {
	top: var(--space-8);
}

/* =====================================================================================================
   7. Redesigned content sections (docs/content-model.md; SPEC Components and Page templates "Home")

   The page's sections are block groups that carry the design's own class names (hero, door, strip,
   section, card, pricing, tiles, ecard, near, panel, findus, visiting, faq, qa...), so the rules here
   are design/home-responsive.html's, rewritten with tokens. Values are design/home.html's at 1440 where
   the two artboards differ. WordPress adds its own classes (wp-block-group, is-layout-flow,
   wp-block-paragraph, wp-block-heading); nothing here styles or depends on them. Artwork (texture,
   hill, family, lake photo, spots, the "or" badge) is added by inc/artwork.php.
   ===================================================================================================== */

/* Content elements start with no margin: every gap is the container's flex/grid gap, as drawn. */
.tlfc-blocks .site-main :where(p, h1, h2, h3, h4, ul, ol, figure, blockquote, address) {
	margin: 0;
}

/* The artboards break paragraphs and card headings greedily; "pretty" and "balance" (section 1) would
   move words between lines (h1 and h2 keep balance, as drawn). Only the style is reset: the wrap mode (white-space: nowrap on .link) is left alone. */
.tlfc-blocks .site-main p,
.tlfc-blocks .site-main h3 {
	text-wrap-style: auto;
}

/* Kickers are often headings or paragraphs here (the home h1 is a kicker): keep the sans face. */
.kicker {
	font-family: var(--font-sans);
}

/* A kicker breaks greedily, as the artboards draw it, even when it is the h1 (headings balance, section
   1). Scoped to the content, so the shell's kickers (menu panel, footer) are untouched. */
.tlfc-blocks .site-main .kicker {
	text-wrap-style: auto;
}

/* A phone number never breaks at its hyphens. */
.tlfc-blocks .site-main a[href^="tel:"] {
	white-space: nowrap;
}

/* An hours unit never breaks at the derived widths: module A marks each clock time, bare hour range and
   short day span that an hours token prints as span.tl-unit ("8:00 AM", "8 to 6", "Mon to Fri"), so no line
   starts with "PM" or "6," where the design drew no artboard (review of the landing pages, 2026-10-09,
   finding 3). At 1440 the artboards' own line breaks win: About's pillar breaks "8 to" / "6." as drawn.
   The span generates no box (display: contents), so in a flex row (Contact's hour rows) its words stay in
   the same anonymous item as the text around them; its text still inherits the no-wrap. */
.tlfc-blocks .site-main .tl-unit {
	display: contents;
}

@media (max-width: 1439px) {
	.tlfc-blocks .site-main .tl-unit {
		white-space: nowrap;
	}
}

/* A paragraph that is a text link (.link): the link inherits its colour and weight. */
.link a,
.doorlink a {
	color: inherit;
	text-decoration: none;
}

.link a:hover,
.doorlink a:hover {
	color: inherit;
	text-decoration: underline;
}

/* Inline icons drawn before a line, as CSS masks of the design's own paths (no markup, nothing to edit). */
.tl-ic-clock::before,
.tl-ic-check::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--tl-icon) center / contain no-repeat;
	mask: var(--tl-icon) center / contain no-repeat;
}

.tl-ic-clock {
	--tl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.tl-ic-check,
.before li {
	--tl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.tl-ic-check {
	--tl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---- Hero: two doors (SPEC Components, Hero door) ------------------------------------------------ */
.hero {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-height: 640px;
}

.door {
	position: relative;
	display: flex;
}

.door-urgent {
	overflow: hidden;
	background: var(--navy);
	color: var(--white);
}

.door-family {
	background: var(--white);
	color: var(--navy);
}

.door-inner {
	position: relative;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-24);
}

.door-urgent .door-inner {
	padding: var(--space-80) var(--space-72) var(--space-80) var(--space-64);
}

.door-family .door-inner {
	padding: var(--space-72) var(--space-64) 208px var(--space-72);
}

.door-urgent .texture {
	opacity: 0.35;
}

.door-urgent .lead {
	color: var(--on-navy-body);
}

.door-urgent .small {
	color: var(--on-navy-muted);
}

.door-family .lead {
	color: var(--ink);
}

/* Outline buttons keep the filled pill's outer width: 26px padding plus the 2px border (home.html). Their
   height is the drawn one, 4px taller (section 3, Buttons). */
.pill-ghost.pill-lg,
.pill-outline.pill-lg {
	padding: 0 26px;
}

.hill {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 150px;
}

.hill path {
	fill: var(--tint);
}

.family {
	position: absolute;
	right: 76px;
	bottom: var(--space-80);
	width: auto;
	height: 104px;
	pointer-events: none;
}

/* The 72px "or" badge on the seam, with an 8px ring in the page ground. */
.or {
	position: absolute;
	left: -36px;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--green-deep);
	color: var(--white);
	box-shadow: 0 0 0 8px var(--ground);
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 900;
	transform: translateY(-50%);
}

/* ---- Local strip: green-deep band, label at 400, towns at 700 with green-light squares ------------- */
.strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 64px;
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
	background: var(--green-deep);
	color: var(--white);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

.strip .lbl {
	font-weight: 400;
}

.strip .towns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 0;
	list-style: none;
}

.strip .towns li {
	display: flex;
	align-items: center;
	gap: 18px;
}

/* The separator trails its town (li::after), so a wrapped line ends with it, as every artboard draws
   ("Branson West" then the square, never a square starting the next line). Decorative: no text. */
.strip .towns li:not(:last-child)::after {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--green-light);
	transform: rotate(45deg);
}

/* ---- Intent cards: one link (the heading) stretched over the whole card --------------------------- */
.card {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start;
	gap: var(--space-14) 0;
	min-height: calc(236px + 2 * var(--card-pad) + 2px); /* drawn as a 236px content box inside the padding and border */
	padding: var(--card-pad);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	color: var(--navy);
}

.card > * {
	grid-column: 1 / -1;
}

.card > .spot {
	grid-column: 1;
	grid-row: 1;
	display: block;
	width: auto;
	height: 88px;
}

.card > .tag {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	justify-self: end;
}

.card > p:not(.tag) {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink);
}

.h-card a {
	color: inherit;
	text-decoration: none;
}

.h-card a:hover {
	color: inherit;
}

.card .h-card a::after,
.ecard .h-card a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.card:hover {
	border-color: var(--navy-40);
}

/* Focus is drawn on the card, not on the heading text. */
.card:has(.h-card a:focus-visible),
.ecard:has(.h-card a:focus-visible) {
	outline: 2px solid var(--green-deep);
	outline-offset: 2px;
}

.card .h-card a:focus-visible,
.ecard .h-card a:focus-visible {
	outline: none;
}

.grid-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--grid-gap);
}

/* ---- Pricing band on charcoal: copy left, three price tiles right --------------------------------- */
.pricing {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	gap: var(--space-64);
	padding-top: var(--space-80);
	padding-bottom: var(--space-80);
	background: var(--charcoal);
	color: var(--white);
}

.pricing .t {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.pricing .body {
	color: var(--on-charcoal-body);
}

.tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-16);
}

.tile {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding: var(--space-28) var(--space-24);
	background: var(--navy-6);
	border: 1px solid var(--navy-line);
	border-radius: var(--radius-tile);
}

.tile .n {
	font-family: var(--font-serif);
	font-size: 44px;
	font-weight: 900;
	line-height: 1;
}

.tile .l {
	font-size: 14px;
	font-weight: 700;
}

.tile .s {
	font-size: 13px;
	color: var(--on-navy-muted);
}

/* From 1024 to 1279 the band keeps its two columns (SPEC Responsive: "same layout, fluid" from 1024), so
   each of the three tiles is only 126 to 168px wide: the drawn 44px / 900 figure (about 106px for "$100")
   ran past the tile's padding from 1024 to 1212, and past its border below 1048 (review of the landing
   pages, 2026-10-09, finding 1; home-responsive.html draws the same overflow at 1024 and 1200). Here the
   figure scales with the tile, 32.6px at 1024 to the drawn 44px at 1200, and the side padding is 20px, so
   every figure and label stays inside the tile's content box. Shared by the three-tile bands beside their
   copy (home, Services, the urgent care page); Insurance's band (tiles under the header) and the primary
   care page's two tiles are wide enough and keep the drawn sizes. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.pricing:not(.pricing-stack) .tiles:not(.tiles-2) > .tile {
		padding-right: var(--space-20);
		padding-left: var(--space-20);
	}

	.pricing:not(.pricing-stack) .tiles:not(.tiles-2) > .tile .n {
		font-size: clamp(32px, calc(6.5vw - 34px), 44px);
	}
}

/* ---- Elective cards: navy, one stretched link, "Learn more" as text ------------------------------- */
.ecard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
	min-height: calc(240px + 2 * var(--card-pad)); /* a 240px content box inside the padding, as drawn */
	padding: var(--card-pad);
	background: var(--navy);
	border-radius: var(--radius-card);
	color: var(--white);
}

.ecard .tag {
	color: var(--green);
}

.ecard .h-card {
	font-size: 22px;
}

.ecard > p:not(.tag):not(.more) {
	flex-grow: 1;
	font-size: 14px;
	line-height: 1.55;
	color: var(--on-charcoal-body);
}

.ecard .more {
	font-size: 14px;
	font-weight: 700;
}

.ecard:hover .more {
	text-decoration: underline;
}

.note {
	font-size: 15px;
	color: var(--cap);
}

/* ---- Near you: lake photograph, navy panel with Before-you-come, Find-us and Visiting cards ---- */
.near {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: var(--space-48);
	min-height: calc(720px + 2 * var(--space-72)); /* drawn as a 720px content box (home-responsive.html) */
	padding-top: var(--space-72);
	padding-bottom: var(--space-72);
	background: var(--navy);
}

.near > .photo {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

.panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding: var(--space-40);
	background: var(--navy);
	border-radius: var(--radius-card-lg);
	color: var(--white);
}

.panel .body {
	color: var(--on-navy-body);
}

.before {
	padding-top: var(--space-20);
	border-top: 1px solid var(--on-navy-rule);
}

.before .k {
	margin-bottom: var(--space-14);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--green);
}

.before ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: 0;
	list-style: none;
	font-size: 16px;
	line-height: 1.5;
	color: var(--white);
}

.before li {
	position: relative;
	padding-left: 30px; /* 18px check + 12px gap */
}

.before li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 18px;
	height: 18px;
	background-color: var(--green);
	-webkit-mask: var(--tl-icon) center / contain no-repeat;
	mask: var(--tl-icon) center / contain no-repeat;
}

.before a,
.before a:hover {
	color: var(--white);
}

.near-cards {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.findus {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding: var(--space-36);
	background: var(--white);
	border-radius: var(--radius-card-lg);
}

.findus-addr {
	font-family: var(--font-serif);
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.25;
}

.findus-addr a {
	color: inherit;
	text-decoration: none;
}

.hours {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	font-size: 16px;
	color: var(--ink);
}

.hours strong {
	color: var(--navy);
}

.hours a {
	text-decoration: none;
}

.findus .actions {
	gap: var(--space-12);
}

.findus .pill.pill-outline {
	padding: 0 var(--space-22); /* as home-responsive.html draws it, plus the 2px border */
}

.visiting {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-32) var(--space-36);
	background: var(--tint);
	border-radius: var(--radius-card-lg);
}

.visiting .h-card {
	font-size: 22px;
}

.visiting p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink);
}

/* ---- Reviews (rendered only with three or more shown reviews) ------------------------------------ */
.reviews {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--grid-gap);
}

.review {
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
	padding: var(--card-pad);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
}

/* The decorative opening mark: CSS content, so the page text stays straight-quoted and it is not read. */
.review::before {
	content: "\201C";
	height: 22px;
	font-family: var(--font-serif);
	font-size: 48px;
	font-weight: 900;
	line-height: 0.6;
	color: var(--green);
}

.review blockquote {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
}

.review figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: auto;
}

.review .n {
	font-weight: 700;
	color: var(--navy);
}

.review .s {
	font-size: 13px;
	color: var(--cap);
}

/* ---- FAQ: header left (0.8fr), questions right (1.2fr) ------------------------------------------- */
.faq {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: var(--space-64);
	padding-top: var(--space-96);
	padding-bottom: var(--space-96);
}

.faq .t {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.faq .t .body {
	font-size: 16px;
}

.faq .t .body a,
.qa a {
	font-weight: 700;
	text-decoration: none;
	color: var(--navy);
}

.qa {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--rule);
}

.qa-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: 22px 0;
	border-bottom: 1px solid var(--rule);
}

.qa h3 {
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 700;
	text-wrap: wrap;
}

.qa p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink);
}

/* ---- 1440 and up: the values design/home.html draws where it differs from home-responsive.html ----- */
@media (min-width: 1440px) {
	.door-urgent .doorlink {
		font-size: 15px;
	}

	.door-family .actions {
		gap: 22px;
	}

	.card {
		row-gap: var(--space-16);
	}

	/* Intent-card h3: home.html leaves its line height at the inherited 1.5 (36px at 24px). Owner ruling
	   (Tony, 2026-10-09): the drawing wins over SPEC's 1.25. home-responsive.html draws 1.25 (30px) from
	   1439 down and on phone, so only this range changes. The Visiting card's h3 already matches. */
	.card .h-card {
		line-height: 1.5;
	}

	.pricing .body {
		max-width: 520px;
	}

	.near {
		min-height: 0;
	}

	.findus .pill {
		padding: 0 var(--space-28);
	}

	.findus .pill.pill-outline {
		padding: 0 26px;
	}

	/* home.html tops-aligns the 48px Get directions with the 52px Call us; home-responsive.html centres
	   them from 1439 down (the default). */
	.findus .actions {
		align-items: flex-start;
	}

	.faq .t .body {
		font-weight: 400;
	}
}

/* ---- 1024 to 1439: 48px gutters (token), smaller door padding (design/home-responsive.html) ------- */
@media (max-width: 1439px) {
	.door-urgent .door-inner {
		padding: var(--space-64) 56px var(--space-64) var(--space-48);
	}

	.door-family .door-inner {
		padding: var(--space-64) var(--space-48) 208px 56px;
	}
}

/* ---- 768 to 1023: grids to two, two-column sections stack, the doors stack with "or" at the seam -- */
@media (max-width: 1023px) {
	.hero {
		grid-template-columns: 1fr;
	}

	.or {
		left: 50%;
		top: -36px;
		transform: translateX(-50%);
	}

	.door-urgent .door-inner {
		padding: var(--space-64) var(--space-48) var(--space-72);
	}

	.door-family .door-inner {
		padding: var(--space-88) var(--space-48) 208px;
	}

	.grid-4,
	.reviews {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pricing {
		grid-template-columns: 1fr;
		gap: var(--space-40);
	}

	.near {
		grid-template-columns: 1fr;
		gap: var(--space-24);
	}

	.faq {
		grid-template-columns: 1fr;
		gap: var(--space-32);
	}
}

/* ---- Phone (design/home-phone.html) -------------------------------------------------------------- */
@media (max-width: 767px) {
	.door-inner {
		justify-content: flex-start;
		gap: var(--space-16);
	}

	.door-urgent .door-inner {
		padding: var(--space-32) var(--space-20) var(--space-36);
	}

	.door-family .door-inner {
		padding: 52px var(--space-20) 160px;
	}

	.door .actions {
		margin-top: var(--space-4);
	}

	.door-family .actions {
		gap: var(--space-10);
	}

	.door .small {
		align-items: flex-start;
		gap: var(--space-8);
		font-size: 13px;
	}

	.tl-ic-clock::before,
	.tl-ic-check::before {
		width: 15px;
		height: 15px;
		margin-top: 2px;
	}

	.door .doorlink {
		padding: var(--space-8);
		font-size: 15px;
		text-align: center;
	}

	.sec-head > .link,
	.pricing .link {
		font-size: 15px;
	}

	.hill {
		height: 116px;
	}

	.family {
		right: 34px;
		bottom: 62px;
		height: 80px;
	}

	.or {
		top: -28px;
		width: 56px;
		height: 56px;
		font-size: 18px;
		box-shadow: 0 0 0 6px var(--white);
	}

	.strip {
		flex-direction: column;
		gap: var(--space-8);
		padding-top: var(--space-20);
		padding-bottom: var(--space-20);
		font-size: 14px;
	}

	.strip .lbl {
		font-size: 13px;
	}

	.strip .towns {
		gap: var(--space-6) var(--space-10);
		line-height: 1.4;
	}

	.strip .towns li {
		gap: var(--space-10);
	}

	/* Middle dots at 60% instead of the squares (SPEC Components, Local strip). The empty alternative
	   text keeps screen readers from announcing "middle dot" between towns; a browser without the
	   "/ alt" syntax drops that declaration and keeps the plain one before it. */
	.strip .towns li:not(:last-child)::after {
		content: "\00B7";
		content: "\00B7" / "";
		width: auto;
		height: auto;
		background: none;
		opacity: 0.6;
		transform: none;
	}

	.sec-head .t {
		gap: var(--space-16);
	}

	.sec-head:has(> .link) .t {
		gap: var(--space-8);
	}

	.body {
		line-height: 1.55;
	}

	.card {
		gap: var(--space-10) 0;
		min-height: 0;
	}

	.card > .spot {
		height: 64px;
	}

	.card > p:not(.tag) {
		font-size: 14px;
		line-height: 1.5;
	}

	.grid-4,
	.reviews {
		grid-template-columns: minmax(0, 1fr);
	}

	.pricing {
		gap: var(--space-16);
		padding-top: var(--section-top);
		padding-bottom: var(--section-bottom);
	}

	.pricing .t {
		gap: var(--space-16);
	}

	.tiles {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-10);
	}

	.tile {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 2px var(--space-16);
		padding: var(--space-16) 18px;
		border-radius: var(--radius-tile-phone);
	}

	.tile .n {
		grid-row: span 2;
		min-width: 84px;
		font-size: 30px;
	}

	.tile .s {
		font-size: 12px;
	}

	.ecard {
		gap: var(--space-8);
		min-height: 0;
	}

	.ecard .h-card {
		font-size: 21px;
	}

	.ecard > p:not(.tag):not(.more) {
		line-height: 1.5;
	}

	.note {
		font-size: 13px;
		line-height: 1.5;
	}

	/* Near you: the photo becomes a 200px band, the header sits on the ground, and the Before-you-come
	   list becomes the navy card (SPEC Responsive behavior). */
	.near {
		display: flex;
		flex-direction: column;
		align-items: stretch; /* the desktop grid's align-items: start would shrink the panel to its longest line */
		gap: var(--space-16);
		min-height: 0;
		padding-top: var(--section-top);
		padding-bottom: var(--section-bottom);
		background: none;
	}

	.near > .photo {
		position: static;
		height: 200px;
		border-radius: var(--radius-card-phone);
	}

	.panel {
		gap: var(--space-16);
		padding: 0;
		background: none;
		border-radius: 0;
		color: var(--navy);
	}

	.panel .kicker.on-dark {
		color: var(--green-deep);
	}

	.panel .body {
		color: var(--ink);
	}

	.before {
		display: flex;
		flex-direction: column;
		gap: var(--space-12);
		padding: var(--space-24) var(--space-20);
		background: var(--navy);
		border-top: 0;
		border-radius: var(--radius-card-phone);
		color: var(--white);
	}

	.before .k {
		margin-bottom: 0;
		font-size: 12px;
	}

	.before ul {
		gap: var(--space-10);
		font-size: 14px;
	}

	.before li {
		padding-left: 26px; /* 16px check + 10px gap */
	}

	.before li::before {
		width: 16px;
		height: 16px;
	}

	.near-cards {
		gap: var(--space-16);
	}

	.findus {
		gap: var(--space-12);
		padding: var(--space-24) var(--space-20);
		border: 1px solid var(--line);
		border-radius: var(--radius-card-phone);
	}

	.findus-addr {
		font-size: 22px;
	}

	.hours {
		gap: var(--space-4);
		font-size: 14px;
	}

	.findus .actions {
		gap: var(--space-10);
		margin-top: var(--space-4);
	}

	.visiting {
		gap: var(--space-8);
		padding: var(--space-24) var(--space-20);
		border-radius: var(--radius-card-phone);
	}

	.visiting .h-card {
		font-size: 20px;
	}

	.visiting p {
		font-size: 14px;
		line-height: 1.5;
	}

	.review {
		gap: var(--space-10);
	}

	.review::before {
		height: 18px;
		font-size: 40px;
	}

	.review blockquote {
		font-size: 15px;
		line-height: 1.55;
	}

	/* "Read all reviews on Google" becomes a full-width outline button on phone (SPEC Review card). */
	.wp-block-tlfc-reviews .sec-head > .link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 56px; /* drawn (home-phone.html): 4px taller than the 52px filled phone buttons */
		padding: 0 var(--space-20);
		border: 2px solid var(--navy);
		border-radius: var(--radius-pill);
	}

	.faq {
		display: flex;
		flex-direction: column;
		gap: var(--space-12);
		padding-top: var(--section-top);
		padding-bottom: var(--section-bottom);
		background: var(--white);
	}

	.faq .t {
		gap: var(--space-12);
	}

	.faq .t .body {
		font-size: 14px;
		font-weight: 400;
	}

	.qa {
		margin-top: var(--space-4);
	}

	.qa-item {
		gap: var(--space-6);
		padding: var(--space-16) 0;
	}

	.qa h3 {
		font-size: 16px;
	}

	.qa p {
		font-size: 14px;
		line-height: 1.55;
	}
}

/* Phone and tablet: the Find-us buttons carry their icons only on phone, as the artboards draw them. */
@media (min-width: 768px) {
	.findus .pill svg {
		display: none;
	}
}

/* =====================================================================================================
   8. Interior pages: shared components (docs/content-model.md Part II, sections 17 and 29; SPEC
      Components and Page templates rows for Services, About, Insurance, Contact, Virtual Visits)

   The five interior designs are inline-styled 1440 artboards; their values are copied here with tokens
   (owner ruling 2026-10-09: the drawings win over SPEC text for sizes, measured per instance, section
   17.6). No phone artboards exist for these pages: the phone rules derive from SPEC Responsive behavior
   and design/home-responsive.html (section 17.7). Class names are the content model's (17.3).
   ===================================================================================================== */

/* ---- Interior hero: white band, 72 / 64, text column + helper card or photo (1.15fr / 0.85fr) ----- */
.tlfc-blocks .site-main .ihero {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: center;
	gap: var(--space-64);
}

.tlfc-blocks .site-main .ihero.ihero-single {
	grid-template-columns: minmax(0, 1fr);
}

.ihero-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
	max-width: 760px;
	min-width: 0;
}

/* A section header without a link is a column in the artboards: its text block takes the full 760. */
.sec-head:not(:has(> .link)) > .t {
	width: 100%;
}

.ihero .lead {
	max-width: none;
	font-size: 19px;
	color: var(--ink);
}

.ihero-text > .actions {
	margin-top: var(--space-8);
}

/* "Leer esta pagina en espanol" sits in the button row: 15/700 caption grey, as drawn. */
.langlink {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--cap);
}

.langlink a {
	color: var(--cap);
	text-decoration: none;
}

.langlink a:hover {
	color: var(--cap);
	text-decoration: underline;
}

/* The About photo: 380px tall, cover, focus 62% down (SPEC Imagery). Its <picture> wrapper is the hero's
   grid item (with display: contents Chrome gave the <source> a grid cell and pushed the photo under the
   text), and the <img> fills it. */
.ihero-picture {
	display: block;
	min-width: 0;
}

.ihero-photo {
	display: block;
	width: 100%;
	height: 380px;
	object-fit: cover;
	object-position: 50% 62%;
	border-radius: var(--radius-card-lg);
}

/* The photo band at the end of an interior hero (tl-band-featured, owner ruling 2026-10-13, Virtual Visits;
   docs/content-model.md 118.3): the page's featured image across both columns, under the text and the helper
   card, inside the hero's white ground. Its box is reserved by aspect-ratio (2.4:1 here, 2:1 from 768 to 1023,
   16:9 on phone) and the crop keeps the laptop and the sofa in frame. */
.tlfc-blocks .site-main .ihero > .pband {
	grid-column: 1 / -1;
	min-width: 0;
}

.pband-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 12 / 5;
	object-fit: cover;
	object-position: 50% 52%;
	border-radius: var(--radius-card-lg);
}

/* Helper cards in the hero's right column: 32px padding, 24px radius. */
.ihero-aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	min-width: 0;
	padding: var(--space-32);
	border-radius: var(--radius-card-lg);
}

/* "Not sure which?" (Services): ground fill, line border; check icons green-deep (walk in) or navy (book). */
.ihero-aside.notsure {
	background: var(--ground);
	border: 1px solid var(--line);
}

.notsure ul,
ul.notsure {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: 0;
	list-style: none;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
}

.notsure li {
	position: relative;
	min-height: calc(1lh + 2px); /* the drawn icon box: 2px down, so a one-line item is 26px tall */
	padding-left: 30px; /* 18px check + 12px gap */
}

.notsure li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 18px;
	height: 18px;
	background-color: var(--navy);
	-webkit-mask: var(--tl-check) center / contain no-repeat;
	mask: var(--tl-check) center / contain no-repeat;
}

.notsure li.g::before {
	background-color: var(--green-deep);
}

.notsure strong {
	color: var(--navy);
}

/* "Still not sure? Call (417) 332-3639 →" is one line from 375 up, as drawn. Below that it is wider than
   the card's content box: the general "a phone number never breaks" rule (section 7) kept it on one line,
   so at 320 it ran 5px past the card and the page scrolled sideways (review 2026-10-09, finding 3), and at
   360 it still ran 6.3px into the card's 20px padding (found by the text-containment check added in the
   landing-page review, finding 1). There it may wrap, balanced, so the arrow never sits alone on the second
   line (the link is a flex item, so a block container that text-wrap applies to). */
@media (max-width: 374px) {
	.tlfc-blocks .site-main .ihero-aside a.wp-block-tlfc-action.link {
		white-space: normal;
		text-wrap: balance;
	}
}

/* Servicios (docs/content-model.md 90.1): the Spanish label "¿Todavía tiene dudas? Llame al (417) 332-3639 →" is
   longer than the English one and runs past the helper card wherever the card is narrower than at 1440
   (1200 to 1024 beside the text, 390 under it; found by the text-containment check), so inside Spanish
   content it may wrap at every width, balanced, as the English one does below 375. Where it fits (1440,
   1023 to 768) it stays on one line, as drawn. Scoped to lang="es": the English pages are unchanged. */
.tlfc-blocks .site-main [lang="es"] .ihero-aside a.wp-block-tlfc-action.link {
	white-space: normal;
	text-wrap: balance;
}

/* Servicios' pricing link "Detalles de seguro y facturación →" is longer than the English one; on one line it set
   the stacked band's minimum width, so at 320 with WCAG 1.4.12 text spacing the band ran 25px past the screen
   (review 2026-10-10, finding 10). Inside Spanish content it may wrap, balanced; where it fits it is one line. */
.tlfc-blocks .site-main [lang="es"] .pricing .link,
.tlfc-blocks .site-main .pricing[lang="es"] .link {
	white-space: normal;
	text-wrap: balance;
}

/* Below 360 (stacked section heads) every Spanish text link may wrap: "Atención primaria en Branson →" ran 0.6px
   past a 320 screen under the same text spacing. */
@media (max-width: 359px) {
	.tlfc-blocks .site-main [lang="es"] .link,
	.tlfc-blocks .site-main [lang="es"].link {
		white-space: normal;
		text-wrap: balance;
	}
}

/* Phone numbers card (Virtual Visits): navy, numbers in Merriweather 700 26px. No texture, so no halo. */
.ihero-aside.phones {
	background: var(--navy);
	color: var(--white);
}

.pline {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pline + .pline {
	margin-top: -2px; /* the two numbers sit 14px apart, the card's other gaps are 16 */
}

.pline .cap {
	font-size: 13px;
	color: var(--on-navy-muted);
}

.pline .num {
	font-family: var(--font-serif);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.5;
}

.pline .num a,
.pline .num a:hover {
	color: var(--white);
	text-decoration: none;
}

.ihero-aside.phones .note {
	font-size: 14px;
	line-height: 1.6;
	color: var(--on-navy-muted);
}

/* ---- Check and "not for" lists: 18px icons at 2.4 stroke, a green-deep check, an X in the error colour --- */
:root {
	--tl-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	--tl-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}

.checks,
.nots,
.btiles {
	display: flex;
	flex-direction: column;
	padding: 0;
	list-style: none;
	color: var(--ink);
}

.checks li,
.nots li {
	position: relative;
	min-height: calc(1lh + 3px); /* the drawn icon box sits 3px down: a one-line item is a line plus 3px */
	padding-left: 30px; /* 18px icon + 12px gap */
}

.checks li::before,
.nots li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 18px;
	height: 18px;
	background-color: var(--green-deep);
	-webkit-mask: var(--tl-check) center / contain no-repeat;
	mask: var(--tl-check) center / contain no-repeat;
}

.nots li::before {
	background-color: var(--error);
	-webkit-mask-image: var(--tl-x);
	mask-image: var(--tl-x);
}

/* ---- Service cards: the intent card plus a bottom row (optional price, "Details") ----------------- */
.card.svc {
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto 1fr auto;
}

.card.svc > .spot {
	grid-column: 1;
	height: 84px;
}

.card.svc > .tag {
	grid-column: 2;
}

.card.svc > .h-card {
	grid-row: 2;
	font-size: 22px;
	line-height: 1.25;
}

.card.svc > p:not(.tag):not(.price):not(.more) {
	grid-row: 3;
	align-self: start;
}

.card.svc > .price,
.card.svc > .more {
	grid-row: 4;
	align-self: end;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--navy);
}

.card.svc > .price {
	grid-column: 1;
}

.card.svc > .more {
	grid-column: 1 / -1;
	justify-self: start;
	white-space: nowrap;
}

.card.svc > .price ~ .more {
	grid-column: 2;
	justify-self: end;
	padding-left: var(--space-16);
}

.card.svc:hover .more {
	text-decoration: underline;
}

/* Card fill follows the section: white cards on the ground, ground cards on a white section. */
.section.white .card.svc {
	background: var(--ground);
}

/* ---- Virtual-visits band: spot, title over text, link; one stretched link (the title) -------------- */
.vband {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-4) var(--space-24);
	padding: var(--space-28) var(--space-32);
	background: var(--tint);
	border-radius: var(--radius-card);
	color: var(--navy);
}

.vband > .spot {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: block;
	width: auto;
	height: 72px;
}

.vband > .h-card {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	font-size: 22px;
	line-height: 1.5;
}

.vband > p:not(.more) {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
}

.vband > .more {
	grid-column: 3;
	grid-row: 1 / span 2;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.vband .h-card a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.vband:has(.h-card a:focus-visible) {
	outline: 2px solid var(--green-deep);
	outline-offset: 2px;
}

.vband .h-card a:focus-visible {
	outline: none;
}

.vband:hover .more {
	text-decoration: underline;
}

/* ---- Pricing bands on charcoal: the Services band (72px), the Insurance self-pay band (stacked) ---- */
.pricing.tight {
	padding-top: var(--space-72);
	padding-bottom: var(--space-72);
}

.pricing.tight .t {
	gap: var(--space-16);
}

/* The interior bands draw their body copy without home's 520px measure (home.html only). */
.pricing.tight .body,
.pricing-stack .body {
	max-width: none;
}

.pricing-stack {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-40);
}

.pricing-stack > .t {
	gap: var(--space-12);
	max-width: 760px;
}

.selfpay-more {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-48);
	padding-top: var(--space-8);
}

.selfpay-more > * {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.rows {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--on-navy-rule);
}

.rows .row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-24);
	padding: var(--space-12) 0;
	border-bottom: 1px solid var(--on-navy-rule);
	font-size: 15px;
	line-height: 1.5;
}

.rows .row strong {
	font-weight: 700;
	text-align: right;
}

.selfpay-more .body {
	font-size: 15px;
	font-weight: 400;
	color: var(--on-charcoal-body);
}

/* ---- Steps (Virtual Visits): 3-up white cards, the 44px navy number circle is a CSS counter -------- */
.steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--grid-gap);
	counter-reset: tl-step;
}

.step {
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
	padding: var(--card-pad);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	counter-increment: tl-step;
}

.step::before {
	content: counter(tl-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--navy);
	color: var(--green);
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 900;
	line-height: 1.5;
}

.step .h-card,
.fitcard .h-card,
.pillar .h-card,
.ccard .h-card {
	font-size: 22px;
}

.step > p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink);
}

/* ---- Good for / not for (Virtual Visits) ---------------------------------------------------------- */
.fit {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--grid-gap);
}

.fitcard {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding: var(--space-32);
	border-radius: var(--radius-card-lg);
}

.fitcard.good {
	background: var(--tint);
}

.fitcard.not {
	background: var(--ground);
	border: 1px solid var(--line);
}

.fitcard .checks,
.fitcard .nots {
	gap: var(--space-12);
	font-size: 17px;
	line-height: 1.5;
}

.fitnote {
	font-size: 14px;
	line-height: 1.6;
	color: var(--cap);
}

/* ---- CTA band: navy, 72 / 72, words left (1.2fr), buttons right (0.8fr) ---------------------------- */
.cta {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	align-items: center;
	gap: var(--space-48);
	padding-top: var(--space-72);
	padding-bottom: var(--space-72);
	background: var(--navy);
	color: var(--white);
}

.cta .t {
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
}

.cta .body {
	color: var(--on-charcoal-body);
}

.cta .actions {
	justify-content: flex-end;
}

/* ---- FAQ on white (Insurance): 88 / 96 from 768 ----------------------------------------------------- */
.faq.white {
	background: var(--white);
}

/* The drawn 88 / 96 padding and the 300 intro are the 1440 artboard's (insurance-billing.html; home.html
   draws its FAQ intro at 400). Phone keeps the shared phone FAQ (section 7: 40 / 40, intro 14 / 400), as
   every other section on phone does (SPEC "40 phone"; review 2026-10-09, finding 1: this rule used to
   outrank the phone rule at every width). */
@media (min-width: 768px) {
	.faq.white {
		padding-top: var(--space-88);
		padding-bottom: var(--space-96);
	}

	.faq.white .t .body {
		font-weight: 300;
	}
}

/* ---- About: story and pillars ---------------------------------------------------------------------- */
.story {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: var(--space-64);
	padding-top: var(--section-top);
	padding-bottom: var(--section-top);
}

.story > .t {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.pillars {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-20);
}

.pillar {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	padding: 26px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
}

.pillar > p,
.ccard > p:not(.link) {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink);
}

/* ---- About: provider rows (tlfc/providers) and the physician line ---------------------------------- */
.providers {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.provider {
	display: grid;
	grid-template-columns: 200px 300px minmax(0, 1fr);
	align-items: center;
	gap: var(--space-32);
	padding: var(--space-24);
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: var(--radius-card-lg);
}

/* A provider whose bio the clinic still owes: photo and name only, nothing in place of the bio. */
.provider:not(:has(.provider-bio)) {
	grid-template-columns: 200px minmax(0, 1fr);
}

.provider-photo {
	display: block;
	width: 200px;
	height: 250px;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: var(--radius-tile);
}

/* SPEC Photo placeholder: the same 4:5 box, dashed 2px. Never restyled. It shows the provider's initials instead of
   SPEC's bracketed caption (owner ruling L4, 2026-10-12; docs/content-model.md section 115). */
.photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-16);
	border: 2px dashed var(--placeholder-line);
	background: var(--ground);
	font-size: 13px;
	line-height: 1.5;
	color: var(--cap);
	text-align: center;
}

.photo-placeholder .initials {
	font-family: var(--font-serif);
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
}

.provider-name {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.provider-name .role {
	font-size: 14px;
	font-weight: 700;
	color: var(--green-deep);
}

.provider-name .meet {
	margin-top: var(--space-8);
	font-size: 14px;
	font-weight: 700;
}

.provider-name .meet a {
	color: var(--navy);
	text-decoration: none;
}

.provider-name .meet a:hover {
	color: var(--navy);
	text-decoration: underline;
}

.provider-bio {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
}

.provider-bio p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink);
}

.physician {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-16);
	padding: 18px var(--space-24);
	border-top: 1px solid var(--line);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
}

.physician .k {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--green-deep);
}

.physician strong {
	color: var(--navy);
}

/* ---- Insurance: plans accepted (3 columns) --------------------------------------------------------- */
.plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--grid-gap);
}

.plan {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding: var(--card-pad);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
}

.plan .h-card {
	font-size: 20px;
}

.plan .checks {
	gap: var(--space-10);
	font-size: 16px;
	line-height: 1.5;
}

/* ---- Contact: Find-us card, map and Before-you-come tiles (0.9fr / 1.1fr, 48px gap) ---------------- */
.findrow {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	align-items: stretch;
	gap: var(--space-48);
	padding-top: var(--section-top);
	padding-bottom: var(--section-top);
}

.findus.findus-lg {
	gap: var(--space-20);
	border: 1px solid var(--line);
}

.findus-lg .findus-addr {
	font-size: 30px;
}

.hrows {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--rule);
}

.hrows .hrow {
	display: flex;
	justify-content: space-between;
	gap: var(--space-16);
	padding: var(--space-12) 0;
	border-bottom: 1px solid var(--rule);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
}

.hrows .hrow strong {
	flex-shrink: 0; /* the label never breaks ("Walk-ins"); a long value wraps instead, right-aligned */
	color: var(--navy);
	text-align: left;
}

.hrows .hrow {
	text-align: right;
}

.clines {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
}

.clines strong {
	color: var(--navy);
}

.clines a,
.clines a:hover {
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}

.findus-lg .actions {
	gap: var(--space-12);
	margin-top: var(--space-4);
}

.findus-lg .pill {
	padding: 0 var(--space-28);
}

.findus-lg .pill.pill-outline {
	padding: 0 26px;
}

.follow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-10);
}

.follow .k {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--green-deep);
}

.social.social-light a {
	border-color: var(--field-line);
	color: var(--navy);
}

.social.social-light a:hover {
	background: var(--navy-a06);
	color: var(--navy);
}

.mapcol {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	min-width: 0;
}

.map {
	flex-grow: 1;
	display: flex;
	min-height: 420px;
	overflow: hidden;
	border-radius: var(--radius-card-lg);
	background: var(--navy-tint);
}

.map iframe {
	display: block;
	flex-grow: 1;
	width: 100%;
	height: auto;
	min-height: 420px;
	border: 0;
}

.btiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-12);
}

.btiles li {
	position: relative;
	padding: var(--space-12) var(--space-14) var(--space-12) 40px; /* 14px + 16px check + 10px gap */
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-chip);
	font-size: 14px;
	line-height: 1.45;
}

.btiles li::before {
	content: "";
	position: absolute;
	left: var(--space-14);
	top: 14px;
	width: 16px;
	height: 16px;
	background-color: var(--green-deep);
	-webkit-mask: var(--tl-check) center / contain no-repeat;
	mask: var(--tl-check) center / contain no-repeat;
}

/* ---- Contact: message form (1.1fr) and the three cards (0.9fr) ------------------------------------- */
.formrow {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: start;
	gap: var(--space-64);
	padding-top: var(--section-bottom);
	padding-bottom: var(--section-top);
	border-top: 1px solid var(--header-line);
}

.formrow.white {
	background: var(--white);
}

.formcol {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.formintro {
	font-size: 15px;
	line-height: 1.6;
	color: var(--cap);
}

/* Form field (SPEC Components): Fluent Forms' own markup, styled here; its stylesheets are not loaded
   on redesigned pages (inc/content.php). Label 14/700 over a 48px field, 1.5px border, 10px radius,
   16px text; the two .half groups side by side; submit is the navy 52px pill with the note beside it.
   The field border is navy at 55% (--field-border, 3.45:1 on white), not the drawn #c9d2da (1.53:1):
   owner ruling 2026-10-09, WCAG 1.4.11. */
.contact-form fieldset {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px var(--space-16);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.contact-form .ff-el-group {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	min-width: 0;
}

.contact-form .ff-el-group.half {
	grid-column: auto;
}

.contact-form .ff-el-input--label label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--navy);
}

.contact-form .ff-el-form-control {
	box-sizing: content-box; /* the drawn 48px field plus its 1.5px border, as contact.html renders it */
	width: calc(100% - 2 * var(--space-14) - 3px);
	height: 48px;
	padding: 0 var(--space-14);
	border: 1.5px solid var(--field-border);
	border-radius: var(--radius-field);
	background: var(--white);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: normal;
	color: var(--navy);
}

.contact-form textarea.ff-el-form-control {
	height: auto;
	padding: var(--space-12) var(--space-14);
	resize: vertical;
}

.contact-form .ff-el-form-control:focus-visible {
	outline: 2px solid var(--green-deep);
	outline-offset: 2px;
}

.contact-form .ff-el-is-error .ff-el-form-control {
	border-color: var(--error);
}

.contact-form .error,
.contact-form .text-danger {
	margin-top: var(--space-6);
	font-size: 14px;
	line-height: 1.5;
	color: var(--error);
}

.contact-form .ff_submit_btn_wrapper {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-16);
}

.contact-form .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	height: 52px;
	padding: 0 var(--space-28);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--navy);
	color: var(--white);
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
	cursor: pointer;
}

.contact-form .ff-btn-submit:hover {
	filter: brightness(0.94);
}

.contact-form .ff-btn-submit:disabled {
	opacity: 0.7;
	cursor: progress;
}

.contact-form .form-note {
	font-size: 13px;
	line-height: 1.5;
	color: var(--cap);
}

/* The one-line confirmation that replaces the form (SPEC States, Form). */
.contact-form .ff-message-success {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
}

.contact-form .ff-message-success a {
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}

.contact-form .ff_force_hide {
	display: none;
}

/* Cloudflare Turnstile (owner ruling 2026-10-09: on at launch; Fluent Forms renders it from its own
   settings when keys exist, scripts/form-lib.php). Its widget is a fixed 300 x 65 iframe that fits the
   narrowest field column (280px at 320); the group reserves its height so the submit row does not jump
   when the widget loads. */
.contact-form .ff-el-group:has(.ff-el-turnstile) {
	min-height: 65px;
}

.contact-form-unavailable p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
}

/* Contact cards: Visiting (tint), Virtual (ground + line), Emergency (navy). 32 36 padding, 24 radius. */
.ccards {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.ccard {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-32) var(--space-36);
	border-radius: var(--radius-card-lg);
	color: var(--navy);
}

.ccard.tint {
	background: var(--tint);
}

.ccard.ground {
	background: var(--ground);
	border: 1px solid var(--line);
}

.ccard.navy {
	background: var(--navy);
	color: var(--white);
}

.ccard.navy > p:not(.link) {
	color: var(--on-charcoal-body);
}

/* ---- Dark surfaces: the focus ring is brand green (see section 6) ---------------------------------- */
.cta :focus-visible,
.ihero-aside.phones :focus-visible,
.ccard.navy :focus-visible,
.acare :focus-visible {
	outline-color: var(--green);
}

/* ---- Hit areas for the interior's standalone text links (as section 6) ----------------------------- */
.langlink > a,
.provider-name .meet > a,
a.abyline-name,
.aauthor-meet a {
	position: relative;
}

/* The article's byline name and "Meet <first> →" (review 2026-10-10, finding 7): nothing else to click within
   10px above or below either. */
.langlink > a::after,
.provider-name .meet > a::after,
a.abyline-name::after,
.aauthor-meet a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: max(100%, 44px);
	transform: translateY(-50%);
}

/* ---- 1024 to 1439 ---------------------------------------------------------------------------------- */
@media (max-width: 1439px) {
	.provider {
		grid-template-columns: 200px 240px minmax(0, 1fr);
		gap: var(--space-24);
	}
}

/* ---- 768 to 1023: 3-up grids to two; two-column sections stack (SPEC Responsive) ------------------- */
@media (max-width: 1023px) {
	.tlfc-blocks .site-main .ihero {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-32);
	}

	.pband-img {
		aspect-ratio: 2 / 1;
	}

	.steps,
	.plans {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.story,
	.findrow,
	.formrow,
	.cta {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-40);
	}

	.cta .actions {
		justify-content: flex-start;
	}

	.provider {
		grid-template-columns: 200px minmax(0, 1fr);
		align-items: start;
	}

	.provider .provider-bio {
		grid-column: 1 / -1;
	}

	.selfpay-more {
		gap: var(--space-32);
	}
}

/* ---- Phone (SPEC Responsive: single column, 20px gutters; helper cards after the buttons) ---------- */
@media (max-width: 767px) {
	/* The hero's right column goes; the helper card follows the text and its buttons, in DOM order, so
	   what is seen and what is read or tabbed through agree (owner ruling 2026-10-09, overriding SPEC's
	   "under the deck"; docs/content-model.md 36). */
	.tlfc-blocks .site-main .ihero {
		gap: var(--space-16);
	}

	.tlfc-blocks .site-main .ihero:has(> .ihero-aside) {
		gap: var(--space-24);
	}

	.ihero .lead {
		font-size: 15px;
	}

	.ihero-text > .actions {
		margin-top: var(--space-4);
	}

	.ihero-aside {
		gap: var(--space-12);
		padding: var(--space-24) var(--space-20);
		border-radius: var(--radius-card-phone);
	}

	.notsure ul,
	ul.notsure {
		gap: var(--space-10);
		font-size: 14px;
	}

	.pline .num {
		font-size: 22px;
	}

	/* The About photo follows the hero text as a full-width 16:9 strip, the building and its sign in frame
	   (owner ruling 2026-10-13: it no longer disappears on phones; docs/content-model.md 118.1). Its box is
	   reserved by aspect-ratio. The photo band (tl-band-featured) is 16:9 too. */
	.ihero-photo {
		height: auto;
		aspect-ratio: 16 / 9;
		object-position: 50% 62%;
		border-radius: var(--radius-card-phone);
	}

	.pband-img {
		aspect-ratio: 16 / 9;
		border-radius: var(--radius-card-phone);
	}

	.langlink {
		padding: var(--space-8);
		font-size: 15px;
		text-align: center;
		white-space: normal;
	}

	.card.svc > .spot {
		height: 64px;
	}

	.card.svc > .h-card {
		font-size: 21px;
	}

	.vband {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--space-4) var(--space-16);
		padding: var(--space-20);
		border-radius: var(--radius-card-phone);
	}

	.vband > .spot {
		height: 56px;
	}

	.vband > .more {
		grid-column: 2;
		grid-row: 3;
		margin-top: var(--space-4);
	}

	.vband > .h-card {
		font-size: 20px;
	}

	.vband > p:not(.more) {
		font-size: 14px;
	}

	.pricing.tight,
	.cta {
		padding-top: var(--section-top);
		padding-bottom: var(--section-bottom);
	}

	.pricing-stack {
		gap: var(--space-16);
	}

	.selfpay-more {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-24);
		padding-top: var(--space-8);
	}

	.rows .row {
		padding: 11px 0;
		font-size: 14px;
	}

	.steps,
	.plans,
	.fit,
	.pillars,
	.btiles {
		grid-template-columns: minmax(0, 1fr);
	}

	.step,
	.plan {
		gap: var(--space-10);
		padding: var(--card-pad);
		border-radius: var(--radius-card-phone);
	}

	.step::before {
		width: 40px;
		height: 40px;
		font-size: 17px;
	}

	.step .h-card,
	.fitcard .h-card,
	.pillar .h-card,
	.ccard .h-card,
	.plan .h-card {
		font-size: 20px;
	}

	.step > p,
	.pillar > p,
	.ccard > p:not(.link) {
		font-size: 14px;
		line-height: 1.5;
	}

	.fitcard {
		gap: var(--space-12);
		padding: var(--space-24) var(--space-20);
		border-radius: var(--radius-card-phone);
	}

	.fitcard .checks,
	.fitcard .nots {
		gap: var(--space-10);
		font-size: 15px;
	}

	.plan .checks {
		gap: var(--space-8);
		font-size: 15px;
	}

	.cta {
		gap: var(--space-24);
	}

	.story {
		gap: var(--space-24);
		padding-top: var(--section-top);
		padding-bottom: var(--section-bottom);
	}

	.story > .t {
		gap: var(--space-16);
	}

	.pillars {
		gap: var(--space-12);
	}

	.pillar {
		padding: var(--space-20);
		border-radius: var(--radius-card-phone);
	}

	/* Provider rows: photo 160 x 200 above the name above the bio (SPEC). */
	.provider,
	.provider:not(:has(.provider-bio)) {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-16);
		padding: var(--space-20);
		border-radius: var(--radius-card-phone);
	}

	.provider-photo {
		width: 160px;
		height: 200px;
		border-radius: var(--radius-tile-phone);
	}

	.provider-bio p {
		font-size: 14px;
		line-height: 1.55;
	}

	.physician {
		gap: var(--space-8);
		padding: var(--space-16) var(--space-4);
		font-size: 14px;
	}

	/* Contact: the map above the Find-us card at 260px (SPEC), the tiles after the card. */
	.findrow {
		display: flex;
		flex-direction: column;
		gap: var(--space-16);
		padding-top: var(--section-top);
		padding-bottom: var(--section-bottom);
	}

	.findrow > .mapcol {
		display: contents;
	}

	.findrow .map {
		order: -1;
		min-height: 260px;
		height: 260px;
		border-radius: var(--radius-card-phone);
	}

	.findrow .map iframe {
		min-height: 260px;
	}

	.findrow .btiles {
		order: 1;
		gap: var(--space-10);
	}

	.findus-lg .findus-addr {
		font-size: 22px;
	}

	.hrows .hrow {
		padding: 11px 0;
		font-size: 14px;
	}

	.clines {
		gap: var(--space-6);
		font-size: 14px;
	}

	.findus-lg .pill,
	.findus-lg .pill.pill-outline {
		padding: 0 var(--space-20);
	}

	.formrow {
		gap: var(--space-24);
		padding-top: var(--section-top);
		padding-bottom: var(--section-bottom);
	}

	.formcol {
		gap: var(--space-16);
	}

	.formintro {
		font-size: 14px;
	}

	.contact-form fieldset {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-16);
	}

	.contact-form .ff-el-group.half {
		grid-column: 1 / -1;
	}

	.contact-form .ff-btn-submit {
		justify-content: center;
		width: 100%;
	}

	.ccards {
		gap: var(--space-12);
	}

	.ccard {
		gap: var(--space-8);
		padding: var(--space-24) var(--space-20);
		border-radius: var(--radius-card-phone);
	}
}

/* The Contact Find-us buttons carry their icons at every width (design/contact.html draws them at
   1440, unlike the home card), so section 7's 768-and-up rule is undone for the large card. */
@media (min-width: 768px) {
	.findus-lg .pill svg {
		display: inline;
	}
}

/* =====================================================================================================
   9. Services page (design/services.html; docs/content-model.md section 30)

   Two details drawn first on this page. Both are keyed to its components (the hero lead's link, the
   service card), which no other built page uses; nothing on home or the shell changes.
   ===================================================================================================== */

/* The address link inside the hero lead: 700 navy, no underline at rest, as drawn ("All of it at
   1065 State Hwy 248."). Hover keeps the site's link hover colour. */
.ihero .lead a {
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}

/* Service cards keep their drawn 14px row gap at 1440 and up, where section 7 opens home's intent cards
   to 16px (their h3 line height is 1.5 there, the service card's 1.25). */
@media (min-width: 1440px) {
	.card.svc {
		row-gap: var(--space-14);
	}
}

/* =====================================================================================================
   10. Insurance & Billing page (design/insurance-billing.html; docs/content-model.md section 32)

   One detail. Every other Insurance component (single-column hero, self-pay band, plan cards, FAQ on
   white) was built in section 8 at its drawn size. The rule is keyed to the plan cards' section, which
   no other page has; nothing on home, Services, About or the shell changes.
   ===================================================================================================== */

/* The phone number in the plans header ("Call (417) 332-3639 before your visit") is a tel: link by SPEC
   rule 1, though the artboard draws plain text. SPEC: a phone link inside body copy is navy and bold
   with no underline (as the FAQ intro on this page draws it); hover keeps the site's link hover. */
.section:has(> .plans) .sec-head .body a {
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}

.section:has(> .plans) .sec-head .body a:hover {
	color: var(--green-deep);
	text-decoration: underline;
}

/* =====================================================================================================
   11. Contact page (design/contact.html; docs/content-model.md section 33)

   Two details. Every other Contact component (single-column hero, Find-us card, map, Before-you-come
   tiles, message form, contact cards) was built in section 8 at its drawn size. The rules are keyed to the
   message form and the Find-us contact lines, which no other page has; nothing on home, Services, About,
   Insurance or the shell changes.
   ===================================================================================================== */

/* Fluent Forms wraps each field in a block div whose line is 24px; the textarea is inline-block on the
   baseline, so the line kept a 6px descender gap under it and the submit row sat 6px below the drawn
   18px gap. Aligning it to the top of its line removes the gap (measured: Message group 153px, as drawn). */
.contact-form textarea.ff-el-form-control {
	vertical-align: top;
}

/* The Find-us contact lines (Office, After-hours virtual visits, Records and results): each line is a
   bold label and one link, so the line works as a row link, not a link in a sentence (review 2026-10-09,
   findings 5 and 8). The whole row is the link's hit area, grown into half the gap on each side so the
   three targets meet without overlapping. From 768 the drawn 24px line and 8px gap stay (owner ruling:
   the drawings win for sizes), so each row target is 32px; on phone, where no artboard exists, each row
   is 44px tall (SPEC: hit targets 44px or taller, including on phone) and the rows close up (gap 0). */
.clines .cline {
	position: relative;
}

.clines .cline > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--space-8) / -2);
	bottom: calc(var(--space-8) / -2);
}

@media (max-width: 767px) {
	.tlfc-blocks .site-main .clines {
		gap: 0;
	}

	.clines .cline {
		padding: calc((44px - 1lh) / 2) 0;
	}

	.clines .cline > a::after {
		top: 0;
		bottom: 0;
	}
}

/* =====================================================================================================
   12. Virtual Visits page (design/virtual-visits.html; docs/content-model.md section 34)

   Two details. Every other Virtual Visits component (hero with the phone-numbers card, steps, good /
   not-for cards, CTA band) was built in section 8 at its drawn size. Both rules are keyed to components
   only this page has (the phone-numbers card's .pline, the steps' .step); nothing on home, Services,
   About, Insurance, Contact or the shell changes.
   ===================================================================================================== */

/* The two numbers in the phone-numbers card are standalone links (26px serif, 33px tall; 28px on phone).
   SPEC: hit targets are 44px or taller everywhere. The hit area grows around the number, as for the
   interior's other standalone text links (section 8); nothing visible changes. */
.pline .num > a {
	position: relative;
}

.pline .num > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: max(100%, 44px);
	transform: translateY(-50%);
}

/* The two numbers inside step 1's sentence are tel: links by SPEC rule 1, though the artboard draws plain
   text. SPEC: a phone link inside body copy is navy and bold with no underline (as Insurance's plans
   header, section 10); hover keeps the site's link hover. */
.step > p a {
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}

.step > p a:hover {
	color: var(--green-deep);
	text-decoration: underline;
}

/* =====================================================================================================
   13. Landing pages (design/urgent-care-branson.html, design/primary-care-branson.html; docs/content-model.md
       Part III, sections 41 and 47)

   The two landing pages reuse the interior components of section 8 (hero, service cards, steps, pricing
   band, good / not-for cards, FAQ rows, CTA band, reviews). What they draw differently is here, keyed to
   classes only these pages carry (.glance, .glance-row, .faq.landing, .fit.er, .tiles-2) and to the CTA
   body's link, which no other built page has; nothing on home, the five interior pages or the shell
   changes.
   ===================================================================================================== */

/* ---- At-a-glance card (41.1): ground, line border, 32 / 36 padding, 24px radius, 14px gap ------------ */
.ihero-aside.glance {
	gap: var(--space-14);
	padding: var(--space-32) var(--space-36);
	background: var(--ground);
	border: 1px solid var(--line);
}

/* Rows: 12px vertical padding at 15px, a #d5dbe1 rule above the first row and under every row; the label
   700 navy in a 120px column, 16px gap, the value in the body grey. One paragraph per row with a leading
   <strong> (the content model's rule, so an emptied token removes the whole row): the label floats into a
   hanging 136px indent, so the value's later lines hang under the value, and a bold word or a link added
   inside the value stays inline text instead of becoming a grid cell. The paragraph is its own block
   formatting context, so a label that wraps to two lines still sets the row's height. */
.glance-rows {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--rule);
}

.glance-row {
	display: flow-root;
	padding: var(--space-12) 0 var(--space-12) 136px;
	border-bottom: 1px solid var(--rule);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
}

.glance-row > strong:first-child {
	float: left;
	width: 120px;
	margin-left: -136px;
	font-weight: 700;
	color: var(--navy);
	/* A one-word label wider than its column ("Appointment" under WCAG 1.4.12 text spacing, at 96px on
	   phone) wraps inside the column instead of running into the value (review of the landing pages,
	   2026-10-09, finding 5). Only a word that cannot fit alone breaks, so normal rendering is unchanged. */
	overflow-wrap: anywhere;
}

/* At the derived widths (no artboard below 1440) a value's last line never holds one word alone, so a
   price or a time is not left by itself ("$125" at 390; review of the landing pages, finding 3). The
   hours units themselves stay whole through span.tl-unit (section 7; module A, tlfc_cd_keep_units_together()). */
@media (max-width: 1439px) {
	.tlfc-blocks .site-main .glance-row {
		text-wrap-style: pretty; /* outranks the content's greedy reset (section 7) */
	}
}

/* ---- FAQ on the ground (41.3): Insurance's measures, 88 / 96 and a 300 intro, from 768 ------------- */
/* On the ground at every width (review of the landing pages, 2026-10-09, finding 2). The shared phone FAQ
   rule (section 7) paints home's phone FAQ white, as home-phone.html draws it; on these pages the FAQ
   follows a white section (the ER cards, "Also here"), so on phone the two ran together with no boundary.
   Transparent, as at 1440: the body's ground shows through, and SPEC's ground / white alternation holds. */
.faq.landing {
	background: transparent;
}

@media (min-width: 768px) {
	.faq.landing {
		padding-top: var(--space-88);
		padding-bottom: var(--space-96);
	}

	.faq.landing .t .body {
		font-weight: 300;
	}
}

/* ---- Urgent care or the ER? (41.3): Virtual Visits' good / not-for cards, lists drawn at 16px / gap 10.
   From 768 only: on phone the shared phone lists apply (15px, gap 10), as on Virtual Visits. ---------- */
@media (min-width: 768px) {
	.fit.er .checks,
	.fit.er .nots {
		gap: var(--space-10);
		font-size: 16px;
	}
}

/* ---- Two price tiles (41.2; the primary care band draws repeat(2, ...), gap 16): two columns from 768, as
   the three-tile band has three; on phone the shared stacked tiles apply. -------------------------- */
@media (min-width: 768px) {
	.tiles.tiles-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- CTA band: the address link inside the body (SPEC rule 1, "white on navy"): white, 700, no
   underline at rest, as drawn ("at 1065 State Hwy 248 in Branson"); hover underlines. ---------------- */
.cta .body a {
	font-weight: 700;
	color: var(--white);
	text-decoration: none;
}

.cta .body a:hover {
	color: var(--white);
	text-decoration: underline;
}

/* ---- Phone (no artboard; derived as the interior pages, 17.7 and 36.5): the card follows the buttons,
   24 / 20 padding like the other helper cards, rows at 14px. Each row STACKS: the label on its own line
   above the value, both full width (owner ruling, Tony, 2026-10-09, landing question 23), so a value
   reads on one or two natural lines instead of wrapping in a narrow column beside the label. The label
   stops floating (no hanging indent), keeps its 700 navy, and sits 4px above the value; the space after
   the label in the content collapses at the start of the value's line. Every At-a-glance card (both
   landing pages, and the service pages, which reuse .glance-row) stacks from 767 down; 768 and up keep
   the drawn label column. ---------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.ihero-aside.glance {
		gap: var(--space-12);
		padding: var(--space-24) var(--space-20);
	}

	.glance-row {
		padding: var(--space-12) 0;
		font-size: 14px;
	}

	.glance-row > strong:first-child {
		display: block;
		float: none;
		width: auto;
		margin: 0 0 var(--space-4);
	}
}

/* =====================================================================================================
   14. Provider pages (design/provider-carolyn-clark.html, provider-alesha-rose.html,
       provider-kimberly-seevers.html: one template; docs/content-model.md Part IV, sections 52 and 58)

   The page is the provider-page pattern rendered for one record: a hero with the portrait (.phero), the
   two cards (.pcards), "Also on the team" (.team) and the CTA band (section 8). Only these classes are new;
   the kicker, h1, buttons, check list, At-a-glance rows (section 13, with their phone stacking) and the
   physician line are the shared components. The 1440 artboards win for sizes; there is no phone artboard,
   so the narrower layouts derive from SPEC Responsive and the interior pages (Part IV 58).
   ===================================================================================================== */

/* ---- Hero: white, 56 / 72, 380px portrait beside the text (gap 64, centred), text column gap 18, max 720 */
.tlfc-blocks .site-main .ihero.phero {
	grid-template-columns: 380px minmax(0, 1fr);
	gap: var(--space-64);
	padding-top: 56px;
	padding-bottom: var(--space-72);
}

.phero-photo {
	display: block;
	width: 380px;
	height: 475px;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: var(--radius-portrait);
}

.phero-text {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 720px;
	min-width: 0;
}

.phero .h-page {
	font-size: 48px;
}

.phero .provider-bio {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.phero .provider-bio p {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--ink);
}

/* Bold in a bio (the bio editor offers it) shows against the 300 text, as on About (finding 15). */
.phero .provider-bio :is(strong, b) {
	font-weight: 700;
}

.phero-text > .actions {
	margin-top: var(--space-8);
}

/* "Read Carolyn's reviews on Tebra →": 16 / 700 green-deep, no underline, across the text column as drawn
   (a flex item of the column). Its 44px hit area is the shared text-link rule (section 6). */
.phero-text > a.wp-block-tlfc-action.link {
	color: var(--green-deep);
}

.phero-text > a.wp-block-tlfc-action.link:hover {
	color: var(--green-deep);
	text-decoration: underline;
}

/* ---- The two cards, on the ground: 88 / 88, two columns, gap 24 ------------------------------------- */
.pcards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--grid-gap);
	padding-top: var(--space-88);
	padding-bottom: var(--space-88);
}

.pcard {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	padding: var(--space-36);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-card-lg);
}

.pcard .checks {
	gap: var(--space-12);
	font-size: 16px;
	line-height: 1.5;
}

/* ---- Also on the team: the shared white section (96 / 88), cards two across, then the physician line ---- */
.team-list {
	display: flex;
	flex-direction: column;
	gap: var(--section-gap);
}

.team-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--grid-gap);
}

/* One link per card, its heading, stretched over the card (docs/content-model.md 2.5). */
.team-card {
	position: relative;
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	align-items: center;
	gap: var(--space-24);
	padding: var(--space-24);
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: var(--radius-card-lg);
	color: var(--navy);
}

.team-card:hover {
	border-color: var(--navy-40);
}

.team-card:has(.h-card a:focus-visible) {
	outline: 2px solid var(--green-deep);
	outline-offset: 2px;
}

.team-card .h-card a:focus-visible {
	outline: none;
}

.team-card .h-card a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.team-photo {
	display: block;
	width: 120px;
	height: 150px;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: var(--radius-tile);
}

.team-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	min-width: 0;
}

.team-text .h-card {
	font-size: 22px;
}

.team-text .tl-nowrap {
	white-space: nowrap;
}

.team-text .role {
	font-size: 14px;
	font-weight: 700;
	color: var(--green-deep);
}

.team-text .more {
	margin-top: var(--space-6);
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
}

/* Three teammates (owner ruling 2026-10-10 on question 25, docs/content-model.md 108): three across from 1024,
   two across from 768 to 1023, one per row on phones. Two teammates keep the drawn two across (and stack below
   1024, as drawn). Where a third column leaves the name under about 180px (below 1280 three across, and the
   tablet's two across), the card stacks its 120 x 150 photo above the text, as the narrow-phone card does. */
@media (min-width: 1024px) {
	.team-cards:has(> :nth-child(3)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.team-cards:has(> :nth-child(3)) .team-card {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		justify-items: start;
	}
}

/* An editor viewing a page visitors do not see as it is (an incomplete or departed record). */
.tl-editor-banner {
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
	background: var(--tint);
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
}

/* No portrait (an editor viewing an incomplete record; visitors never see this page without one): the text
   takes the whole hero instead of dropping into the 380px portrait slot (finding 16). Every width. */
.tlfc-blocks .site-main .ihero.phero:not(:has(> .phero-photo)) {
	grid-template-columns: minmax(0, 1fr);
}

/* ---- 768 to 1023: portrait 240 x 300 beside the text (gap 40); the cards and the team cards stack ----
   The drawn vertical centring holds only where the 475px portrait and the text column are about the same
   height (1024 and up). Here the text column is two to three times the 300px portrait, so centring left the
   portrait floating 195 to 267px below the kicker; it is top-aligned instead, level with the kicker
   (finding 1). */
@media (max-width: 1023px) {
	.tlfc-blocks .site-main .ihero.phero {
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: start;
		gap: var(--space-40);
	}

	.tlfc-blocks .site-main .ihero.phero:not(:has(> .phero-photo)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.phero-photo {
		width: 240px;
		height: 300px;
	}

	.pcards,
	.team-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Three teammates (content model 108): two across, each card's photo above its text. */
	.team-cards:has(> :nth-child(3)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.team-cards:has(> :nth-child(3)) .team-card {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		justify-items: start;
	}
}

/* ---- Phone: one column in DOM order, the portrait 160 x 200 (SPEC's phone provider-row size) above the
   kicker; Book and Call full width and stacked (section 3); the cards and team cards one per row; the
   credentials rows stack label over value (section 13); 40 / 40 sections. ----------------------------- */
@media (max-width: 767px) {
	.tlfc-blocks .site-main .ihero.phero {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-16);
		padding-top: var(--section-top);
		padding-bottom: var(--section-bottom);
	}

	.phero-photo {
		width: 160px;
		height: 200px;
		border-radius: var(--radius-tile);
	}

	.phero-text {
		gap: var(--space-14);
	}

	.phero .h-page {
		font-size: 34px;
	}

	.phero .provider-bio {
		gap: var(--space-14);
	}

	.phero .provider-bio p {
		font-size: 15px;
		line-height: 1.55;
	}

	.phero-text > .actions {
		margin-top: var(--space-4);
	}

	.phero-text > a.wp-block-tlfc-action.link {
		white-space: normal;
	}

	.pcards {
		gap: var(--space-12);
		padding-top: var(--section-top);
		padding-bottom: var(--section-bottom);
	}

	.pcard {
		gap: var(--space-12);
		padding: var(--space-24) var(--space-20);
		border-radius: var(--radius-card-phone);
	}

	.pcard .checks {
		gap: var(--space-10);
		font-size: 15px;
	}

	.team-card {
		gap: var(--space-16);
		padding: var(--space-16);
		border-radius: var(--radius-card-phone);
	}

	.team-text .h-card {
		font-size: 20px;
	}

	/* Three teammates (content model 108): one per row, the drawn photo beside the text again. */
	.team-cards:has(> :nth-child(3)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.team-cards:has(> :nth-child(3)) .team-card {
		grid-template-columns: 120px minmax(0, 1fr);
		align-items: center;
		justify-items: stretch;
	}
}

/* Below 360 a 120px photo beside the name leaves about 110px for a 20px name, and a credential broke at its
   hyphen ("NP-" / "C"). There the card stacks: the drawn 120 x 150 photo above the name. */
@media (max-width: 359px) {
	.team-card,
	.team-cards:has(> :nth-child(3)) .team-card {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}
}

/* =====================================================================================================
   15. Service pages (design/service-*.html: eleven artboards of one template; docs/content-model.md Part V,
       sections 69 to 79 and 83)

   The service pages reuse the interior components of section 8 (hero, check lists, steps, service cards,
   CTA band) and the At-a-glance row grammar of section 13. What they draw differently is here, keyed to
   classes only these pages carry (.ihero-ground, .glance-split, .covers, .bnotes, .whosee, .pill-link,
   .related); nothing on home, the interior, landing or provider pages, or the shell changes.
   ===================================================================================================== */

/* ---- Hero on the page ground (79): the breadcrumb above it is on the ground too (page.php) ---------- */
.tlfc-blocks .site-main .ihero.ihero-ground {
	background: var(--ground);
}

/* ---- At-a-glance, split rows (71): label regular grey on the left, value 700 navy right-aligned, the two
   split by space-between with a 24px gap; 32px padding all round and a 16px gap (the landing card draws
   32 / 36 and 14). The value is module A's span.glance-v, so a link or a bold word in it stays in the
   value's column. ------------------------------------------------------------------------------------ */
@media (min-width: 768px) {
	.ihero-aside.glance.glance-split {
		gap: var(--space-16);
		padding: var(--space-32);
	}

	.glance-split .glance-row {
		display: flex;
		justify-content: space-between;
		gap: var(--space-24);
		padding: var(--space-12) 0;
	}

	/* The label keeps its own width (review of the service pages, 2026-10-10, finding 1; content model 84.3):
	   it never shrinks, so "In office", "Self-pay" or "Follow-ups" stay on one line where the card is narrow
	   (1024 to 1199, the card 367px wide); the value takes the rest of the row and wraps there. A label wider
	   than half the row (only under WCAG 1.4.12 text spacing today) wraps at its spaces inside that half. */
	.glance-split .glance-row > strong:first-child {
		flex-shrink: 0;
		max-width: 50%;
		float: none;
		width: auto;
		margin: 0;
		overflow-wrap: normal;
	}

	.glance-split .glance-v {
		min-width: 0;
		text-align: right;
	}
}

/* The row itself is navy, as the artboard's row container is (its label and value set their own colours). */
.glance-split .glance-row {
	color: var(--navy);
}

.glance-split .glance-row > strong:first-child {
	font-weight: 400;
	color: var(--cap);
}

.glance-split .glance-v {
	font-weight: 700;
	color: var(--navy);
}

/* Below 768 (owner ruling 23) the rows stack as every glance card does (section 13): the label a full-width
   line, the value under it at the row's left edge, still 700 navy. */
@media (max-width: 767px) {
	.glance-split .glance-v {
		display: block;
		text-align: left;
	}
}

/* The walk-in card ends with a Book button at its natural width, 52px at 16px with 28px sides and a 20px
   icon, 4px below the rows' 16px gap (71.1); on phone it is full width like every phone button. */
.glance-split > .wp-block-tlfc-action.pill {
	align-self: flex-start;
	height: 52px;
	margin-top: var(--space-4);
	padding: 0 var(--space-28);
	font-size: 16px;
}

@media (max-width: 767px) {
	.glance-split > .wp-block-tlfc-action.pill {
		align-self: stretch;
		margin-top: 0;
	}
}

/* ---- What it covers (69.2.2): two check lists, 24 / 64 gap; 17px, 14px between items --------------- */
.covers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-24) var(--space-64);
}

.covers .checks {
	gap: var(--space-14);
	font-size: 17px;
	line-height: 1.5;
}

/* ---- Before you come (69.2.4): two columns of notes on the ground, 26px padding, 20px h3 -------------- */
.bnotes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-20);
}

.bnote {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: 26px;
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
}

.bnote .h-card {
	font-size: 20px;
	line-height: 1.25;
}

.bnote > p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink);
}

/* Phone numbers inside step and note prose are tel: links (SPEC rule 1): navy, bold, no underline. */
.bnote > p a {
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}

.bnote > p a:hover {
	color: var(--green-deep);
	text-decoration: underline;
}

/* ---- "Who you'll see" (70.2): plain navy band (no texture, so no halo), 64 / 64, words 1.2fr and the
   ghost pill link 0.8fr, right-aligned; h2 34px, body 16 / 300. -------------------------------------- */
.whosee {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	align-items: center;
	gap: var(--space-48);
	padding-top: var(--space-64);
	padding-bottom: var(--space-64);
	background: var(--navy);
	color: var(--white);
}

.whosee .t {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.tlfc-blocks .site-main .whosee .h-sec {
	font-size: 34px;
	color: var(--white);
}

.whosee .body {
	font-size: 16px;
	color: var(--on-charcoal-body);
}

.whosee .pill-link {
	display: flex;
	justify-content: flex-end;
}

/* p.pill-link: an internal link drawn as the ghost pill (52px at 16px with 26px sides, plus the 2px border
   outside it, as the artboards draw every outline button: 56px in all). */
.pill-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 0 26px;
	border: 2px solid var(--on-navy-outline);
	border-radius: var(--radius-pill);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none;
	color: var(--white);
}

.pill-link a:hover {
	color: var(--white);
	filter: brightness(0.94);
}

.whosee :focus-visible {
	outline-color: var(--green);
}

/* ---- Related (69.2.6): the ground section with ground cards, as drawn (owner question 30) ------------ */
.section.related .card.svc {
	background: var(--ground);
}

/* ---- 768 to 1023: the band stacks, words then the link, left-aligned ----------------------------------- */
@media (max-width: 1023px) {
	.whosee {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-24);
	}

	.whosee .pill-link {
		justify-content: flex-start;
	}
}

/* ---- Phone (no artboard; 79): one column, 40 / 40 sections, full-width buttons --------------------------- */
@media (max-width: 767px) {
	.covers {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-10);
	}

	.covers .checks {
		gap: var(--space-10);
		font-size: 15px;
	}

	.bnotes {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-12);
	}

	.bnote {
		padding: var(--space-20);
		border-radius: var(--radius-card-phone);
	}

	.bnote .h-card {
		font-size: 19px;
	}

	.bnote > p {
		font-size: 14px;
		line-height: 1.5;
	}

	.whosee {
		padding-top: var(--section-top);
		padding-bottom: var(--section-bottom);
		gap: var(--space-20);
	}

	.tlfc-blocks .site-main .whosee .h-sec {
		font-size: 26px;
	}

	.whosee .body {
		font-size: 15px;
	}

	.whosee .pill-link a {
		width: 100%;
		height: 56px;
	}
}

/* =====================================================================================================
   16. The privacy policy (docs/content-model.md Part VI 91; design/privacy-policy.html; SPEC Page templates,
       Privacy policy row)

   The plain hero (tl-sk-ihero-plain-v1) is the single-column interior hero without buttons: the Insurance and
   Contact hero's rules apply as they are. The policy band: white, padding 64 / 64 / 96 at 1440, a 300px
   "On this page" rail beside a column of at most 800px, 64 apart; the rail sticks 24px below the top of the
   viewport from 1024. Below 1024 (no artboard: derived, 91.3) the rail is a static card above the sections.
   ===================================================================================================== */
.tlfc-blocks .site-main .policy {
	display: grid;
	grid-template-columns: 300px minmax(0, 800px);
	align-items: start;
	gap: var(--space-64);
	padding-top: var(--space-64);
	padding-bottom: var(--space-96);
	background: var(--white);
}

.toc {
	position: sticky;
	top: var(--space-24);
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	min-width: 0;
	padding: var(--space-28);
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
}

.tlfc-blocks .site-main .toc-label {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--green-deep);
}

.tlfc-blocks .site-main .toc ol {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: 0 0 0 var(--space-20);
	font-size: 14px;
	line-height: 1.4;
}

/* Hit areas (review 2026-10-10, finding 7; as the contact lines, section 8 and the article's contents): each
   link is its row, its target grown 4px into each 8px gap (27.6px, no two overlapping, the drawn spacing
   kept); on phones each row is 44px tall (below). */
.toc a {
	position: relative;
	display: block;
	color: var(--navy);
	text-decoration: none;
}

.toc a::after {
	content: "";
	position: absolute;
	inset: -4px 0;
}

.toc a:hover {
	color: var(--green-deep);
	text-decoration: underline;
}

.policy-sections {
	display: flex;
	flex-direction: column;
	gap: var(--space-36);
	min-width: 0;
}

.psec {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding-bottom: var(--space-36);
	border-bottom: 1px solid var(--header-line);
	/* An "On this page" link lands with the heading clear of the top edge. */
	scroll-margin-top: var(--space-24);
}

.h-psec {
	font-family: var(--font-serif);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--navy);
}

.tlfc-blocks .site-main .psec p {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--ink);
}

.psec p a {
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}

.psec p a:hover {
	color: var(--green-deep);
	text-decoration: underline;
}

/* 1024 to 1439: 48px gutters (the token); the rail keeps its 300px and the sections take the rest (at most 800). */
@media (max-width: 1023px) {
	/* One column, at most the drawn 800px (the sections' measure), the rail card as wide as the text. */
	.tlfc-blocks .site-main .policy {
		grid-template-columns: minmax(0, 800px);
		gap: var(--space-40);
	}

	/* Above the sections, not sticky: a contents list is useful before the text (91.3, owner question 61). */
	.toc {
		position: static;
	}
}

@media (max-width: 767px) {
	.tlfc-blocks .site-main .policy {
		gap: var(--space-24);
		padding-top: var(--space-40);
		padding-bottom: var(--space-40);
	}

	.toc {
		padding: var(--space-20);
	}

	.tlfc-blocks .site-main .toc-label {
		font-size: 12px;
	}

	/* 44px rows on phones (93.6). */
	.tlfc-blocks .site-main .toc ol {
		gap: 0;
	}

	.toc a {
		padding: calc((44px - 1lh) / 2) 0;
	}

	.toc a::after {
		inset: 0;
	}

	.policy-sections {
		gap: var(--space-28);
	}

	.psec {
		padding-bottom: var(--space-28);
	}

	.h-psec {
		font-size: 22px;
	}

	.tlfc-blocks .site-main .psec p {
		font-size: 15px;
		line-height: 1.65;
	}
}

/* =====================================================================================================
   17. The Health Articles index and the category and tag archives (docs/content-model.md Part VI 92;
       design/articles.html; SPEC Page templates, "Health Articles index")

   The hero is the plain interior hero (tl-sk-ihero-plain-v1, section 16's rules; the archives print the same
   classes). The listing (.alist: tlfc/slot "articles" on the index, archive.php on the archives) is the page
   ground, 56 / 64 / 96 at 1440 with 32 between its rows: the topic pills (40px, 0 18, 14/700, 1.5px #c9d2da on
   white; the current one navy), the latest card (navy, radius 24, padding 32, text and photo 1fr / 1fr, 40
   apart) and the grid (three across, 24 apart; cards white, 1px line, radius 20, at least 300 tall, the 190px
   band then the text at 24 / 28 / 28 with 12 between). Every card is one link, its heading, stretched over the
   card (as .card). Derived widths (no phone artboard; 93.6): the grid 2 across from 1023 and 1 from 767; the
   latest card stacks (text, then photo) below 1024; the pills wrap; 40 / 40 padding below 768.
   ===================================================================================================== */
.alist {
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
	padding: 56px var(--gutter) var(--space-96);
	background: var(--ground);
}

.apills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-10);
}

.apill {
	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: content-box; /* as drawn: 40px inside the 1.5px border (42px rendered at 1x) */
	height: 40px;
	padding: 0 18px;
	border: 1.5px solid var(--closed);
	border-radius: var(--radius-pill);
	background: var(--white);
	color: var(--navy);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none;
}

.apill:hover {
	border-color: var(--navy);
	color: var(--navy);
}

.apill[aria-current="page"] {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

/* 44px hit targets (SPEC Components): the pill's target grows 1px up and down, into the 10px gaps. */
.apill::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -2.5px;
	bottom: -2.5px;
}

/* ---- The latest card: navy, text left and the photo right ------------------------------------------- */
.alatest {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	gap: var(--space-40);
	padding: var(--space-32);
	background: var(--navy);
	border-radius: var(--radius-card-lg);
	color: var(--white);
}

.alatest.alatest-noimg {
	grid-template-columns: minmax(0, 1fr);
}

.alatest > .t {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	min-width: 0;
	padding: var(--space-8) 0 var(--space-8) var(--space-12);
}

.alatest .akicker {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--green);
}

.h-alatest {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 34px;
	line-height: 1.15;
	color: var(--white);
}

.h-alatest a,
.h-acard a {
	color: inherit;
	text-decoration: none;
}

.h-alatest a:hover,
.h-acard a:hover {
	color: inherit;
}

.alatest .astand {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--on-charcoal-body);
}

.ameta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
	margin-top: auto;
}

.alatest .ameta {
	gap: var(--space-16);
}

.adate {
	font-size: 13px;
	line-height: 1.5;
	color: var(--cap);
}

.alatest .adate {
	color: var(--on-navy-muted);
}

.amore {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

.alatest .amore {
	font-size: 15px;
}

.alatest-fig {
	min-width: 0;
	margin: 0;
}

/* The drawn photo box is 604 x 388 at 1440 (articles.html; drawings win: review 2026-10-10, finding 2), whatever
   the photo's own shape (the new 16:9 covers were 341 tall): the box keeps that ratio, at least 260 tall, and
   grows with a taller text column; the photo covers it. */
.alatest-img {
	display: block;
	width: 100%;
	height: auto;
	min-height: max(260px, 100%);
	aspect-ratio: 604 / 388;
	object-fit: cover;
	border-radius: 16px;
}

/* ---- The grid of cards ------------------------------------------------------------------------------ */
.agrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.agrid > li {
	display: flex;
	min-width: 0;
}

.acard {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 300px;
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	color: var(--navy);
}

.aband {
	flex: none;
	height: 190px;
}

.aband-img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
}

/* A post marked "contain" (224's tick on white; docs/content-model.md 114): the whole photo in the band, on white. */
.aband-contain .aband-img {
	object-fit: contain;
	background: var(--white);
}

.aband-tint {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tint);
}

.aicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 22px;
	background: var(--white);
	color: var(--green-deep);
}

.acard > .t {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--space-12);
	padding: var(--space-24) var(--space-28) var(--space-28);
}

.acard .akicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--green-deep);
}

.h-acard {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	color: var(--navy);
	text-wrap-style: auto; /* drawn as a greedy h3 (92.3: built as h2) */
}

.acard .astand {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--ink);
}

/* One link per card, its heading, stretched over the whole card; focus drawn on the card (as .card). */
.h-alatest a::after,
.h-acard a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.acard:hover {
	border-color: var(--navy-40);
}

.alatest:has(.h-alatest a:focus-visible) {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

.acard:has(.h-acard a:focus-visible) {
	outline: 2px solid var(--green-deep);
	outline-offset: 2px;
}

.h-alatest a:focus-visible,
.h-acard a:focus-visible {
	outline: none;
}

.aload {
	display: flex;
	justify-content: center;
}

@media (max-width: 1439px) {
	.h-alatest {
		font-size: 32px;
	}
}

@media (max-width: 1023px) {
	.agrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The latest card stacks: the text, then the photo (93.6). */
	.alatest {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-28);
	}

	/* Stacked under the text the photo takes a wide crop on tablets (16 / 7: 378px tall at 1023, not 485) and
	   16 / 9 on phones, so the card's text stays the first thing seen (derived; no artboard). */
	.alatest-img {
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 7;
	}
}

@media (max-width: 767px) {
	.alatest-img {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 767px) {
	.alist {
		gap: var(--space-24);
		padding-top: var(--space-40);
		padding-bottom: var(--space-40);
	}

	.agrid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--grid-gap);
	}

	.alatest {
		gap: var(--space-20);
		padding: var(--space-20);
	}

	.alatest > .t {
		gap: var(--space-12);
		padding: var(--space-4) 0 0;
	}

	.alatest .akicker {
		font-size: 12px;
	}

	.h-alatest {
		font-size: 26px;
	}

	.alatest .astand {
		font-size: 15px;
		line-height: 1.55;
	}

	.acard > .t {
		padding: var(--space-20) var(--space-20) var(--space-24);
	}

	.h-acard {
		font-size: 21px;
	}

	.alatest-img {
		border-radius: 14px;
	}
}

/* =====================================================================================================
   18. The article template (docs/content-model.md Part VI 93 and 105; design/article.html; SPEC Page templates,
       "Article template")

   single.php: the breadcrumb on white, the header band (.ahead: white, 56 / 64 / 48, the 1px rule under it;
   the kicker, the 46px h1 and the 20px standfirst in at most 860px, 18 apart, then the author row 8 lower),
   then the body band (.abody: white, 56 / 64 / 80) with the 780px column (.acol) beside the 320px rail
   (.arail), 72 apart, tops aligned. The column is one flex column 22 apart, as drawn: the featured photo, the
   stored body's own elements (.entry is display: contents, so its paragraphs, headings, lists and images are
   the column's items), the author card, the dashed disclaimer line. The body's type (93.3): paragraphs 18 /
   1.75, 28px serif h2s 16 further down, lists with a 7px brand-green dot (CSS, not markup), the two callouts.
   The rail sticks 24 below the top from 1024, where it fits the screen's height (derived, 93.6 and the review
   of 2026-10-10: on a laptop screen the care card and topics stick instead). Below 1024 (no artboard: derived, 93.6) one column, the rail
   after the article and not sticky; below 768 40 / 40 bands and the phone type steps. "Keep reading" and the
   CTA band are the article-page pattern (sections 8 and 17 style them).
   ===================================================================================================== */
.ahead {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
	padding-top: 56px;
	padding-bottom: var(--space-48);
	background: var(--white);
	border-bottom: 1px solid var(--header-line);
}

.ahead-t {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 860px;
}

.tlfc-article .site-main .akick {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--green-deep);
	text-wrap-style: auto;
}

.h-article {
	font-family: var(--font-serif);
	font-weight: 900;
	font-size: 46px;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--navy);
}

.tlfc-article .site-main .astandfirst {
	font-size: 20px;
	font-weight: 300;
	line-height: 1.55;
	color: var(--ink);
}

.abyline {
	display: flex;
	align-items: center;
	gap: var(--space-14);
	margin-top: var(--space-8);
}

.abyline-ph {
	flex: none;
	display: block;
	line-height: 0;
}

.abyline-photo {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 25%;
}

/* The clinic byline: the round mark at the left of the logo (its circle is the first 236 of 720 pixels). */
.abyline-photo.abyline-mark {
	object-position: 0 50%;
	background: var(--white);
}

.abyline-t {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.abyline-name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--navy);
	text-decoration: none;
}

a.abyline-name:hover {
	color: var(--navy);
	text-decoration: underline;
}

.abyline-meta {
	font-size: 13px;
	line-height: 1.5;
	color: var(--cap);
}

/* ---- The body band: the column and the rail ------------------------------------------------------------ */
.abody {
	display: grid;
	grid-template-columns: minmax(0, 780px) 320px;
	align-items: start;
	gap: 72px;
	padding-top: 56px;
	padding-bottom: var(--space-80);
	background: var(--white);
}

.acol {
	display: flex;
	flex-direction: column;
	gap: var(--space-22);
	min-width: 0;
}

.acol > .entry {
	display: contents;
}

.afeature {
	margin: 0;
}

/* A 16:9 frame for every featured photo (owner ruling 2026-10-10, question 66): cropped to fill, as the cards; a
   post marked "contain" (224's cut-out tick on white) shows the whole photo inside the frame on white, which
   blends with the photo's own white ground. */
.afeature-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius-card);
}

.afeature-contain .afeature-img {
	object-fit: contain;
	background: var(--white);
}

.tlfc-article .site-main .entry > p,
.tlfc-article .site-main .entry > div > p {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.75;
	color: var(--ink);
}

.entry strong,
.entry b {
	font-weight: 700;
	color: var(--navy);
}

.entry a {
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}

.entry a:hover {
	color: var(--green-deep);
	text-decoration: underline;
}

/* Links inside the article's own text are underlined at rest (owner ruling 2026-10-10, question 70): drawn navy 700
   with no underline, they could not be told from the bold runs around them (47 links among 199 bold phrases). A
   1px green-deep line 3px under the text; on hover the text turns green-deep and the line 2px. Links elsewhere
   (the rail, the cards, the disclaimer line) are as drawn. */
.acol > .entry a {
	text-decoration-line: underline;
	text-decoration-color: var(--green-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.acol > .entry a:hover {
	color: var(--green-deep);
	text-decoration-thickness: 2px;
}

.tlfc-article .site-main .entry h2 {
	margin-top: var(--space-16);
	font-family: var(--font-serif);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--navy);
	text-wrap: wrap; /* drawn greedy (the artboard's h2s set no wrap mode) */
	scroll-margin-top: var(--space-24);
}

.tlfc-article .site-main .entry h3 {
	margin-top: var(--space-8);
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--navy);
	scroll-margin-top: var(--space-24);
}

.entry ul,
.entry ol {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	padding: 0;
	list-style: none;
}

.entry ol {
	padding-left: 26px;
	list-style: decimal;
}

.entry li {
	position: relative;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--ink);
}

.entry ul > li {
	padding-left: 26px;
}

/* The drawn dot: 7px brand green at 6 / 11 (93.3), drawn by CSS, not copied as markup. */
.entry ul > li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 11px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
}

.entry ol > li::marker {
	font-weight: 700;
	color: var(--navy);
}

/* The two callouts (SPEC; 93.3): the block styles of core/group, and the same classes on a legacy list. */
.is-style-callout-navy,
.is-style-callout-green {
	padding: var(--space-24) var(--space-28);
	border-left: 4px solid var(--navy);
	border-radius: 0 16px 16px 0;
	background: var(--navy-tint);
}

.is-style-callout-green {
	border-left-color: var(--green-deep);
	background: var(--tint);
}

/* Images: at most the column, centred when the post says so (the block bodies' figures included: owner ruling
   2026-10-10, question 64; 279's photo now at the large size, question 63). */
.entry img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}

.entry img.aligncenter,
.entry .aligncenter img {
	margin-left: auto;
	margin-right: auto;
}

.entry .wp-caption {
	max-width: 100%;
	margin: 0;
}

.entry .wp-caption-text {
	margin-top: var(--space-8);
	font-size: 14px;
	line-height: 1.5;
	color: var(--cap);
}

/* The converted block bodies (owner ruling 2026-10-10, question 64; docs/content-model.md 109): image and video
   figures without margins; a callout (core/group with its block style) holding several paragraphs or lists keeps
   the column's own rhythm inside; 224's caption line; 495's transcript as a disclosure under its video. */
.entry .wp-block-image,
.entry .wp-block-video {
	margin: 0;
}

.entry .wp-block-image img {
	width: auto;
}

.entry .wp-block-video video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	background: var(--navy);
}

.entry .is-style-callout-navy,
.entry .is-style-callout-green {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.tlfc-article .site-main .entry > p.acaption {
	margin-top: calc(-1 * var(--space-8));
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	color: var(--cap);
}

.entry .wp-block-details {
	padding: var(--space-20) var(--space-24);
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--ground);
}

.entry .wp-block-details > summary {
	display: list-item; /* keeps the browser's own open / closed marker */
	padding: 10px 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px; /* a 44px target */
	color: var(--navy);
	cursor: pointer;
}

.entry .wp-block-details[open] > summary {
	margin-bottom: var(--space-12);
}

.tlfc-article .site-main .entry .wp-block-details > p {
	margin-top: var(--space-12);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink);
}

/* 495's classic [video] (the fallback before the converted body): the player at the column width. */
.entry .wp-video {
	width: 100% !important;
	max-width: 100%;
}

.entry .wp-video video,
.entry .wp-video .mejs-container {
	width: 100% !important;
	max-width: 100%;
	border-radius: 16px;
	overflow: hidden;
}

.entry .wp-video video {
	height: auto !important;
}

/* ---- The author card and the disclaimer line --------------------------------------------------------- */
.aauthor {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--space-24);
	margin-top: var(--space-16);
	padding: var(--space-28) var(--space-32);
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
}

.aauthor.aauthor-nophoto {
	grid-template-columns: minmax(0, 1fr);
}

.aauthor-photo {
	display: block;
	width: 88px;
	height: 110px;
	border-radius: 16px;
	object-fit: cover;
	object-position: 50% 25%;
}

.aauthor-t {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	min-width: 0;
}

.h-aauthor {
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--navy);
}

.tlfc-article .site-main .aauthor-bio {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--ink);
}

.aauthor-meet {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.aauthor-meet a {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	color: var(--navy);
	text-decoration: none;
}

.aauthor-meet a:hover {
	color: var(--navy);
	text-decoration: underline;
}

.tlfc-article .site-main .adisclaimer {
	padding: 18px var(--space-22);
	font-size: 14px;
	line-height: 1.6;
	color: var(--cap);
	background: var(--white);
	border: 1px dashed var(--closed);
	border-radius: 14px;
}

.adisclaimer a {
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}

.adisclaimer a:hover {
	color: var(--green-deep);
	text-decoration: underline;
}

/* ---- The rail -------------------------------------------------------------------------------------------- */
.arail {
	min-width: 0;
	align-self: stretch;
}

/* The rail sticks 24 below the top and never runs past the bottom of the viewport (review 2026-10-10, findings
   1 and 9: the drawn 812px rail, and 769 to 917px on other posts, ended below a 1366 x 768 or 1440 x 900 laptop
   screen, hiding the Call button and the topics for the whole article). Derived behaviour, in three steps by
   the viewport's height (the drawing is the 1440 x 900 rail, unchanged):
   - 800px and taller: the whole rail sticks, at most the viewport less 24 above and below; where it would be
     taller only the "In this article" list gives way and scrolls inside its card (at least about five rows
     stay in view), so the care card's Book and Call and the topics stay in view;
   - 600 to 799px (a 1366 x 768 or 1440 x 900 laptop): the contents list stays at the top of the article and
     the care card with the topics (.arail-stick) is what sticks, 24 below the top;
   - under 600px: nothing sticks (the care card and topics alone would fill the screen). */
.arail-in {
	position: sticky;
	top: var(--space-24);
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
	max-height: calc(100vh - 2 * var(--space-24));
}

.arail-in > *,
.arail-stick {
	flex: none;
}

.arail-stick {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.tlfc-article .site-main .arail-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--green-deep);
}

.atoc {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-24) var(--space-28);
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
}

/* Its copy before the article shows below 1024 only (owner ruling 2026-10-10, question 61; tlfc_article_toc()). */
.abody > .atoc-top {
	display: none;
}

.arail-in > .atoc {
	flex: 0 1 auto;
	min-height: 0;
}

.tlfc-article .site-main .atoc ol,
.tlfc-article .site-main .atoc ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: 0 0 0 var(--space-20);
	font-size: 14px;
	line-height: 1.4;
}

/* The list is what scrolls when the rail is taller than the viewport (above). 4px of padding, taken back by
   the margin, keeps a focused link's 2px ring (2px out) inside the scrolling box; nothing moves. */
.tlfc-article .site-main .arail-in .atoc ol,
.tlfc-article .site-main .arail-in .atoc ul {
	min-height: 0;
	margin: -4px -4px -4px 0;
	padding-top: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* 312: its headings carry their own numbers (toc_numbers false), so the list draws none. */
.tlfc-article .site-main .atoc ul {
	padding-left: 0;
	list-style: none;
}

/* Hit areas (review 2026-10-10, finding 7; as the contact lines, section 8): each link is its row, its target
   grown 4px into each 8px gap, so the drawn 14 / 1.4 list keeps its spacing and no two targets overlap
   (27.6px); on phones each row is 44px tall (below). */
.atoc a {
	position: relative;
	display: block;
	color: var(--navy);
	text-decoration: none;
}

.atoc a::after {
	content: "";
	position: absolute;
	inset: -4px 0;
}

.atoc a:hover {
	color: var(--green-deep);
	text-decoration: underline;
}

.acare {
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
	padding: var(--space-24) var(--space-28);
	background: var(--navy);
	border-radius: var(--radius-card);
	color: var(--white);
}

.tlfc-article .site-main .acare-k {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--green);
}

.tlfc-article .site-main .acare-h {
	font-family: var(--font-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--white);
}

.tlfc-article .site-main .acare-p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--on-charcoal-body);
}

.acare-p a {
	color: var(--white);
	font-weight: 700;
}

/* As drawn: the two buttons run the card's width with the icon and label at the start. */
.acare .pill {
	justify-content: flex-start;
	padding: 0 var(--space-28);
}

.acare .pill-ghost {
	padding: 0 26px;
}

.atopics {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

/* Rows 9 apart (drawn 8): the pills' 44px targets (below) then meet without overlapping. */
.atopic-list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.atopic {
	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: content-box; /* as drawn: 32px inside the 1.5px border */
	height: 32px;
	padding: 0 var(--space-12);
	border: 1.5px solid var(--closed);
	border-radius: var(--radius-pill);
	background: var(--white);
	color: var(--navy);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}

.atopic:hover {
	border-color: var(--navy);
	color: var(--navy);
}

/* 44px hit targets at every width (SPEC Components; review 2026-10-10, finding 7): the 32px pill's target reaches
   6px above and below its padding box, 4.5px past its border, into the 9px row gap. */
.atopic::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -6px;
	bottom: -6px;
}

/* ---- Keep reading: the article-page pattern (the cards are the index's, section 17, with h3 titles) ---- */
.related-articles {
	background: var(--ground);
}

.related-articles .agrid {
	margin: 0;
}

/* ---- Derived widths (no artboard; 93.6) ------------------------------------------------------------------ */
@media (max-width: 1439px) {
	.abody {
		gap: 56px;
	}
}

@media (max-width: 1199px) {
	.abody {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: var(--space-48);
	}
}

@media (max-width: 1023px) {
	/* One column, at most the drawn 780px; the rail after the article (HANDOFF), not sticky. "In this article"
	   is its copy before the article (owner ruling 2026-10-10, question 61), 24px above the column. */
	.abody {
		grid-template-columns: minmax(0, 780px);
		gap: var(--space-48);
	}

	.abody > .atoc-top {
		display: flex;
		margin-bottom: calc(var(--space-24) - var(--space-48));
	}

	.arail .atoc-rail {
		display: none;
	}

	.arail-in {
		position: static;
		max-height: none;
	}

	/* Keep reading always holds three cards: on tablets the third runs the width of the two above it rather than
	   sitting alone in a half-empty row (review 2026-10-10, finding 5). */
	.related-articles .agrid > li:nth-child(3):last-child {
		grid-column: 1 / -1;
	}

	/* The care card's buttons take their own width on tablets (the card is as wide as the column). */
	.acare {
		align-items: flex-start;
	}
}

@media (max-width: 767px) {
	.ahead {
		gap: var(--space-16);
		padding-top: var(--space-40);
		padding-bottom: var(--space-40);
	}

	.ahead-t {
		gap: var(--space-14);
	}

	.tlfc-article .site-main .akick {
		font-size: 12px;
	}

	.h-article {
		font-size: 32px;
		line-height: 1.12;
	}

	.tlfc-article .site-main .astandfirst {
		font-size: 17px;
		line-height: 1.55;
	}

	.abyline {
		margin-top: var(--space-4);
	}

	.abody {
		gap: var(--space-40);
		padding-top: var(--space-40);
		padding-bottom: var(--space-40);
	}

	.abody > .atoc-top {
		margin-bottom: calc(var(--space-24) - var(--space-40));
	}

	.acol {
		gap: var(--space-20);
	}

	.tlfc-article .site-main .entry > p,
	.tlfc-article .site-main .entry > div > p {
		font-size: 17px;
		line-height: 1.7;
	}

	.tlfc-article .site-main .entry h2 {
		margin-top: var(--space-12);
		font-size: 24px;
	}

	.tlfc-article .site-main .entry h3 {
		font-size: 20px;
	}

	.entry li {
		font-size: 16px;
	}

	.is-style-callout-navy,
	.is-style-callout-green {
		padding: var(--space-20);
	}

	.afeature-img {
		border-radius: var(--radius-card-phone);
	}

	.aauthor {
		padding: var(--space-24);
	}

	.acare {
		align-items: stretch;
		padding: var(--space-24);
	}

	.atoc {
		padding: var(--space-20) var(--space-24);
	}

	.atopic-list {
		gap: var(--space-12) var(--space-8);
	}

	/* 44px rows in the contents list on phones (93.6; as the contact lines, section 8). */
	.tlfc-article .site-main .atoc ol,
	.tlfc-article .site-main .atoc ul {
		gap: 0;
	}

	.atoc a {
		padding: calc((44px - 1lh) / 2) 0;
	}

	.atoc a::after {
		inset: 0;
	}
}

/* The author card stacks below 560 (93.6): the portrait above the words. */
@media (max-width: 559px) {
	.aauthor {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-16);
	}
}

/* A laptop screen (600 to 799px of viewport height), from 1024 wide: the care card and topics stick, the contents
   list does not (see the rail above). The rail's inner column runs the article's height so they can travel. */
@media (min-width: 1024px) and (max-height: 799px) {
	.arail-in {
		position: static;
		height: 100%;
		max-height: none;
	}

	.arail-stick {
		position: sticky;
		top: var(--space-24);
	}
}

/* A screen under 600px tall: nothing sticks, the rail scrolls with the page. */
@media (max-height: 599px) {
	.arail-in,
	.arail-stick {
		position: static;
	}

	.arail-in {
		height: auto;
		max-height: none;
	}
}

/* =====================================================================================================
   19. Search results and the not-found page (docs/content-model.md Part VI 105.4; no artboard)

   The plain interior hero (section 16) with the search form under the h1; the results are the Health Articles
   cards (section 17) on the page ground, a result that is not an article being the same card without its band;
   page links under them. The not-found page and an empty search print one sentence and the main
   destinations as the topic pills.
   ===================================================================================================== */
.asearch {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
	max-width: 620px;
}

.asearch input[type="search"] {
	flex: 1 1 260px;
	min-width: 0;
	height: 48px;
	padding: 0 var(--space-20);
	border: 1.5px solid var(--field-border);
	border-radius: var(--radius-pill);
	background: var(--white);
	color: var(--navy);
	font-family: var(--font-sans);
	font-size: 16px;
}

.asearch input[type="search"]:focus-visible {
	outline: 2px solid var(--green-deep);
	outline-offset: 2px;
}

.asearch .pill {
	cursor: pointer;
}

.acard-plain {
	min-height: 0;
}

/* The search h1 repeats the visitor's words: a long one ("pharmacogenomics") breaks rather than push the page
   sideways on a phone (review 2026-10-10, finding 8; WCAG 1.4.10). Words that fit are untouched. */
.tlfc-utility .site-main .h-page {
	overflow-wrap: anywhere;
}

.alist-short {
	gap: var(--space-16);
	padding-bottom: var(--space-80);
}

.tlfc-utility .site-main .anone {
	max-width: 760px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
}

.anone a {
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}

.apaging ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.apaging a,
.apaging span {
	display: inline-flex;
	align-items: center;
	min-width: 44px;
	height: 44px;
	justify-content: center;
	padding: 0 var(--space-12);
	border-radius: var(--radius-pill);
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}

.apaging .current {
	background: var(--navy);
	color: var(--white);
}

@media (max-width: 767px) {
	.alist-short {
		padding-bottom: var(--space-40);
	}

	.asearch .pill {
		flex: 1 1 100%;
	}
}