/*
Theme Name:        Harling Point Clinic
Template:          generatepress
Description:       GeneratePress child theme. Physiotherapy, registered massage and chiropractic clinic site. Demonstration build by NovelLogic; the clinic is fictional.
Author:            NovelLogic
Version:           0.2.0
Requires at least: 6.5
Tested up to:      7.1
Requires PHP:      8.1
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       nlv-harling
*/

/* ==========================================================================
   BRAND V2 - "the Point" (Kevin, 2026-10-06). Supersedes the Ledger skin.
   Source of truth: _local/brand/harling-brand-kit (README + harling-home-v2
   mock); values below are the mock's unless a comment says otherwise.

   COLOURS: tokens only (theme.json palette and settings.custom) - no raw hex
   here. SIZES: page type uses the font-size presets; component micro-type
   (card rows, chips, labels) uses px, as the mock does.
   TYPE: Archivo variable. Display = font-stretch 125% / 800, tight tracking;
   body and UI = 100%. No all-caps, no italic accents, no arrow glyphs, no
   middle dots (D-brand-4).

   `rule` and `glass` never carry text on a light ground (rule 1.4:1, glass
   2.0:1 on fog). Glass carries text on basalt only (6.9:1). Every text pair
   used here is listed and computed by _local/tools/check-harling-contrast.py.

   Breakpoint: (max-width: 980px) = HARLING_BREAKPOINT - 1 in functions.php.

   Sections:
     1  Base, wrap, GeneratePress frame
     2  Buttons and links
     3  Announcement bar
     4  Header: lockup, nav pill, CTA
     5  Mobile header and menu (< 981px)
     6  Footer (basalt)
     7  Mastheads: Home hero + contour field, inner page head + band
     8  Next available card
     9  Home: billing strip, photo band, practices, basalt band, team split,
        Visit band
    10  Inner pages: sections, service lists, team, Visit
    11  404
    12  Book flow
    13  Under 981px
   ========================================================================== */


/* 1  Base, wrap, GeneratePress frame ======================================= */

/* A METRIC-MATCHED FALLBACK, so the swap to Archivo (font-display: swap,
   preloaded) moves as little as possible on a cold load. Computed from the
   fonts, not guessed: Archivo at wght 400 / wdth 100 against Arial, average
   advance over English letter frequencies 0.4409 vs 0.4470 em -> size-adjust
   98.62%; Archivo's hhea ascent 878, descent 210, gap 0 per 1000, divided by
   it. Headings at wdth 125 cannot be matched by any system face. */
@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
	size-adjust: 98.62%;
	ascent-override: 89.03%;
	descent-override: 21.29%;
	line-gap-override: 0%;
}

body,
button,
input,
select,
textarea {
	font-family: var(--wp--preset--font-family--archivo);
	font-stretch: 100%;
}

body {
	background-color: var(--wp--preset--color--fog);
	color: var(--wp--preset--color--basalt);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	color: inherit;
	font-family: var(--wp--preset--font-family--archivo);
	font-stretch: 125%;
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.04em;
}

h3 {
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

a {
	color: inherit;
}

/* Focus: moss-dark on light grounds (8.0:1 on fog), sea glass on basalt. */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--moss-d);
	outline-offset: 3px;
}

.harling-on-dark :focus-visible,
.site-footer :focus-visible,
.harling-announce :focus-visible {
	outline-color: var(--wp--preset--color--glass);
}

/* GeneratePress's frame becomes full width; each band sets its own wrap
   (the mock's .wrap: 1320px, 44px gutters, 20px below 981px). */
.site,
.site-content,
.one-container .container,
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation {
	background-color: transparent;
}

.site.grid-container {
	max-width: none;
}

.site-content {
	display: block;
	padding: 0;
}

.separate-containers .site-main,
.one-container .site-main {
	margin: 0;
}

.separate-containers .inside-article,
.one-container .inside-article {
	padding: 0;
}

.entry-content {
	margin-top: 0;
}

/* Net only: inc/layout.php removes the parent's page title with a filter. */
body:not(.error404) .inside-article > .entry-header .entry-title {
	display: none;
}

.harling-wrap,
.entry-content > :not(.harling-bleed),
.harling-bleed > .harling-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--custom--wrap);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--custom--gutter);
	padding-right: var(--wp--custom--gutter);
}

.harling-bleed {
	width: 100%;
	margin: 0;
}

/* The display face for big headings. */
.harling-big,
.entry-content h2.has-section-font-size {
	font-size: var(--wp--preset--font-size--section);
	font-stretch: 125%;
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.04em;
}

.harling-lede {
	max-width: 42ch;
	margin: 30px 0 0;
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--lede);
	line-height: 1.55;
}

.harling-eyebrow {
	margin: 0 0 18px;
	color: var(--wp--preset--color--moss);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.harling-prose,
.harling-prose p {
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--prose);
	line-height: 1.6;
}

.harling-prose a,
.harling-insurers-sentence a {
	color: var(--wp--preset--color--moss-d);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Photos (nlv-harling/photo): rounded, cropped by their frame. */
.harling-photo {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
}

.harling-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* 2  Buttons and links ===================================================== */

/* The moss pill: 16px 26px, 600, 15.5px (mock). White on moss 6.07:1, on
   moss-dark 8.59:1. No arrows (D-brand-4). */
.harling-btn,
.wp-block-buttons .wp-block-button__link.wp-element-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 16px 26px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--moss);
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s;
}

.harling-btn:hover,
.harling-btn:focus,
.wp-block-buttons .wp-block-button__link.wp-element-button:hover,
.wp-block-buttons .wp-block-button__link.wp-element-button:focus {
	background-color: var(--wp--preset--color--moss-d);
	color: var(--wp--preset--color--white);
}

/* On basalt: the fog pill (basalt on fog 15.4:1). */
.harling-btn--light,
.wp-block-buttons .is-style-light .wp-block-button__link.wp-element-button {
	background-color: var(--wp--preset--color--fog);
	color: var(--wp--preset--color--basalt);
}

.harling-btn--light:hover,
.harling-btn--light:focus,
.wp-block-buttons .is-style-light .wp-block-button__link.wp-element-button:hover,
.wp-block-buttons .is-style-light .wp-block-button__link.wp-element-button:focus {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--basalt);
}

.harling-btn--block {
	display: flex;
	width: 100%;
}

/* The quiet link: basalt text, a 2px sea-glass rule under it (mock .link).
   44px tall so it is a real target. */
.harling-link a,
a.harling-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--basalt);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--glass);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.harling-link a:hover,
a.harling-link:hover {
	text-decoration-color: var(--wp--preset--color--moss);
}

.harling-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	margin-top: 40px;
}

.harling-actions > * {
	margin: 0;
}


/* 3  Announcement bar (Home) =============================================== */

/* Fog on basalt 15.4:1. */
.harling-announce {
	padding: 10px 16px;
	background-color: var(--wp--preset--color--basalt);
	color: var(--wp--preset--color--fog);
	font-size: 13.5px;
	text-align: center;
}

.harling-announce p {
	margin: 0;
}

.harling-announce a {
	margin-left: 10px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--glass);
	text-underline-offset: 4px;
}


/* 4  Header: lockup, nav pill, CTA ========================================= */

/* Transparent and ABOVE the masthead, which every page pulls up under it
   (section 7), so the contour field runs behind the header as in the mock. */
.site-header {
	position: relative;
	z-index: 20;
	background-color: transparent;
}

.inside-header.grid-container {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	max-width: var(--wp--custom--wrap);
	min-height: var(--wp--custom--header-height);
	margin: 0 auto;
	padding: 0 var(--wp--custom--gutter);
}

.site-description {
	display: none;
}

/* THE LOCKUP: mark 46px + "Harling Point" 700 + "Clinic" 400, wdth 125. */
.site-header .main-title {
	margin: 0;
	line-height: 1;
}

.site-header .harling-lockup,
.site-header .harling-lockup:hover {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--wp--preset--color--basalt);
	text-decoration: none;
}

.harling-lockup__mark {
	flex: none;
	width: 46px;
	height: 46px;
}

.harling-lockup__word {
	font-size: var(--wp--preset--font-size--brand);
	font-stretch: 125%;
	font-weight: 700;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.harling-lockup__tail {
	font-weight: 400;
}

.site-header .main-navigation,
.site-header .main-navigation ul ul {
	background-color: transparent;
}

.site-header .main-navigation {
	flex: 1;
}

.site-header .main-navigation .inside-navigation {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* THE NAV PILL: white at .82 over the field, blurred behind, a hairline and
   a soft shadow, so it reads over any contour. Basalt 600 links, 10px 20px;
   fog on hover; the current page (aria-current) is basalt with fog text.
   Basalt on the pill's white >= 14:1 even over fog-2 behind the glass. */
.site-header .main-navigation .main-nav {
	margin: 0 auto;
}

.site-header .main-navigation .main-nav > ul {
	display: flex;
	gap: 2px;
	padding: 4px;
	border: 1px solid var(--wp--custom--color--card-ring);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--color--pill-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 30px -14px var(--wp--custom--color--card-shadow);
}

.site-header .main-navigation .main-nav ul li a {
	padding: 10px 20px;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--basalt);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
	line-height: 1.3;
}

.site-header .main-navigation .main-nav ul li a:hover,
.site-header .main-navigation .main-nav ul li a:focus {
	background-color: var(--wp--preset--color--fog);
	color: var(--wp--preset--color--basalt);
}

.site-header .main-navigation .main-nav ul li a[aria-current],
.site-header .main-navigation .main-nav ul li a[aria-current]:hover {
	background-color: var(--wp--preset--color--basalt);
	color: var(--wp--preset--color--fog);
}

.site-header .main-navigation .menu-bar-items {
	display: flex;
	align-items: center;
}

/* THE HEADER CTA. GeneratePress colours navigation links itself and its rule
   beat .harling-btn (Kevin's 2b review), so white is forced at a specificity
   GP's navigation rules do not reach. */
.site-header .main-navigation .menu-bar-items a.harling-nav-cta,
.site-header .main-navigation .menu-bar-items a.harling-nav-cta:link,
.site-header .main-navigation .menu-bar-items a.harling-nav-cta:visited {
	margin-left: 8px;
	padding: 16px 26px;
	background-color: var(--wp--preset--color--moss);
	color: var(--wp--preset--color--white);
	line-height: 1.2;
	text-decoration: none;
}

.site-header .main-navigation .menu-bar-items a.harling-nav-cta:hover,
.site-header .main-navigation .menu-bar-items a.harling-nav-cta:focus,
.site-header .main-navigation .menu-bar-items a.harling-nav-cta:active {
	background-color: var(--wp--preset--color--moss-d);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* GP prints menu-bar-items twice (2b); only the copy inside the main nav
   shows, and only from 981px. GP's own mobile toggles never show: the theme's
   menu (section 5) replaces them. */
.site-header .harling-nav-cta,
.site-header .mobile-menu-control-wrapper,
.site-header .menu-toggle,
.harling-menu {
	display: none;
}

@media (min-width: 981px) {
	.site-header .main-navigation .menu-bar-items a.harling-nav-cta {
		display: inline-flex;
	}
}

/* The mobile pill exists in the DOM on every page and is shown only < 981. */
.harling-book-pill {
	display: none;
}


/* 5  Mobile header and menu (< 981px) ====================================== */

@media (max-width: 980px) {
	.inside-header.grid-container {
		min-height: var(--wp--custom--header-height-mobile);
		padding: 0 var(--wp--custom--gutter-mobile);
	}

	/* Mark 36px + the wordmark at 17px: at 360px the whole lockup, "Clinic"
	   included, ends 47px clear of the 44px button (measured by
	   tools/harness/menu-measure.js), so nothing is dropped and no type goes
	   under 16px (D-brand-6). */
	.harling-lockup__mark {
		width: 36px;
		height: 36px;
	}

	.site-header .harling-lockup {
		gap: 10px;
	}

	.harling-lockup__word {
		font-size: 17px;
	}

	.site-header .main-navigation:not(.mobile-menu-control-wrapper) {
		display: none;
	}

	.harling-menu {
		display: block;
		margin-left: auto;
	}

	/* The button: 44 x 44, the nav pill's glass, basalt bars; an X when open. */
	.harling-menu__button {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--wp--custom--color--card-ring);
		border-radius: var(--wp--custom--radius--pill);
		background-color: var(--wp--custom--color--pill-glass);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		box-shadow: 0 10px 30px -14px var(--wp--custom--color--card-shadow);
		color: var(--wp--preset--color--basalt);
		list-style: none;
		cursor: pointer;
	}

	.harling-menu__button::-webkit-details-marker {
		display: none;
	}

	.harling-menu__x,
	.harling-menu[open] .harling-menu__bars {
		display: none;
	}

	.harling-menu[open] .harling-menu__x {
		display: inline;
	}

	/* Open: the button stays put in the corner, above the panel. */
	.harling-menu[open] .harling-menu__button {
		position: fixed;
		top: 14px;
		right: var(--wp--custom--gutter-mobile);
		z-index: 1001;
		background-color: var(--wp--preset--color--white);
	}

	/* Closed, the panel is not laid out at all (Chrome still lays out a closed
	   <details>' content, and its full-width button widened the page). */
	.harling-menu:not([open]) .harling-menu__panel {
		display: none;
	}

	/* The panel: fog over the whole page; the links as large wdth-125 rows;
	   "Book an appointment" full width at the bottom. */
	.harling-menu__panel {
		position: fixed;
		inset: 0;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		padding: 88px var(--wp--custom--gutter-mobile) calc(24px + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		background-color: var(--wp--preset--color--fog);
	}

	.harling-menu__list {
		margin: 0;
		padding: 0;
		border-top: 1px solid var(--wp--preset--color--rule);
		list-style: none;
	}

	.harling-menu__list li {
		margin: 0;
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}

	.harling-menu__list a {
		display: flex;
		align-items: center;
		min-height: 64px;
		color: var(--wp--preset--color--basalt);
		font-size: 30px;
		font-stretch: 125%;
		font-weight: 700;
		letter-spacing: -0.03em;
		text-decoration: none;
	}

	.harling-menu__list a[aria-current] {
		color: var(--wp--preset--color--moss-d);
	}

	.harling-menu__book.harling-btn {
		width: 100%;
		margin-top: auto;
	}

	html.harling-menu-open {
		overflow: hidden;
	}

	/* Open, the menu owns the screen: the header (the panel's stacking
	   context) rises above everything, and the floating Book pill - which
	   would sit on the menu's own Book button - goes. :has() covers JS off. */
	.site-header:has(.harling-menu[open]) {
		z-index: 1000;
	}

	html.harling-menu-open .harling-book-pill,
	body:has(.harling-menu[open]) .harling-book-pill {
		display: none;
	}

	.harling-book-pill {
		display: inline-flex;
		position: fixed;
		right: 20px;
		bottom: calc(20px + env(safe-area-inset-bottom, 0px));
		z-index: 100;
		padding: 13px 22px;
		box-shadow: 0 12px 30px -12px var(--wp--custom--color--card-shadow);
	}

	/* No fixed pill on the Book page (D-book-7). */
	body:has(.harling-book) .harling-book-pill {
		display: none;
	}
}


/* 6  Footer (basalt) ======================================================= */

/* Fog on basalt 15.4:1; the veil (fog at .74) 9.2:1; labels fog. */
.site-footer,
.site-footer .site-info {
	background-color: var(--wp--preset--color--basalt);
	color: var(--wp--custom--color--fog-veil);
}

.harling-footer__brand.grid-container,
.harling-footer.grid-container {
	box-sizing: border-box;
	max-width: var(--wp--custom--wrap);
	margin: 0 auto;
	padding-left: var(--wp--custom--gutter);
	padding-right: var(--wp--custom--gutter);
}

.harling-footer__brand {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-top: 56px;
	padding-bottom: 32px;
}

.harling-footer__seal {
	flex: none;
	width: 96px;
	height: 96px;
}

.site-footer .harling-footer__name {
	margin: 0;
	color: var(--wp--preset--color--fog);
	font-size: 28px;
	font-stretch: 125%;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.harling-footer {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px 40px;
	padding-bottom: 40px;
}

.harling-footer > * {
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid var(--wp--custom--color--fog-veil-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.harling-footer p,
.harling-footer address {
	margin: 0;
	font-style: normal;
}

.site-footer .harling-footer .harling-footer__label {
	margin-bottom: 6px;
	color: var(--wp--preset--color--fog);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
}

.harling-footer__hours,
.harling-hours {
	white-space: nowrap;
}

.site-footer a,
.site-footer a:visited {
	color: var(--wp--preset--color--fog);
}

.site-footer .harling-footer a.harling-footer__phone,
.site-footer .harling-footer__nav a,
.site-footer .harling-footer__nav a:visited {
	display: inline-block;
	padding: 2px 0;
	color: var(--wp--preset--color--fog);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--glass);
	text-underline-offset: 4px;
}

.site-footer .harling-footer__nav a:hover,
.site-footer .harling-footer a.harling-footer__phone:hover {
	text-decoration-color: var(--wp--preset--color--fog);
}

.harling-footer__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.harling-footer__nav li + li {
	margin-top: 6px;
}

/* The disclosure: unchanged words, now fog-veil on basalt (9.2:1). */
.harling-disclosure {
	box-sizing: border-box;
	max-width: var(--wp--custom--wrap);
	margin: 0 auto;
	padding: 18px var(--wp--custom--gutter) 32px;
	border-top: 1px solid var(--wp--custom--color--fog-veil-2);
	color: var(--wp--custom--color--fog-veil);
	font-size: 12.5px;
	line-height: 1.55;
	text-align: left;
}

/* The wp_footer backstop copy lands outside the basalt footer (the 404 is the
   case it exists for): give it the footer's ground so it stays readable. */
body > .harling-disclosure {
	max-width: none;
	background-color: var(--wp--preset--color--basalt);
}

/* GP's site-info is a 1240px grid-container; the disclosure sets its own wrap. */
.site-info .inside-site-info,
.site-info .inside-site-info.grid-container {
	display: block;
	max-width: none;
	padding: 0;
}

.site-info .copyright-bar {
	width: 100%;
}


/* 7  Mastheads ============================================================= */

/* Every page opens with a masthead pulled up under the transparent header,
   so the contour field (Home) or band (inner pages) runs behind it. */
.entry-content > .harling-hero,
.entry-content > .harling-page-head {
	position: relative;
	margin-top: calc(-1 * var(--wp--custom--header-height));
	padding-top: var(--wp--custom--header-height);
	overflow: hidden;
}

/* HOME HERO. The field is a fixed 1440px SVG; its left edge keeps the
   headland tip and the dot ~30px left of the 440px card at any desktop
   width (kit README, rev 2). It fades in from the left by mask. */
.harling-hero {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.harling-field {
	position: absolute;
	top: 0;
	left: min(calc(50% - 720px), calc(100% - 1380px));
	width: 1440px;
	height: 100%;
	margin: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 38%, black 100%);
	mask-image: linear-gradient(90deg, transparent 0%, black 38%, black 100%);
}

.harling-field svg {
	display: block;
	width: 100%;
	height: 100%;
}

.harling-field path {
	fill: none;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.harling-field .l {
	stroke: var(--wp--custom--color--field-land);
	stroke-width: 1.4;
}

.harling-field .w {
	stroke: var(--wp--custom--color--field-water);
	stroke-width: 1.4;
}

.harling-field .c {
	stroke: var(--wp--preset--color--moss);
	stroke-width: 2.4;
	opacity: 0.55;
}

.harling-field .dot {
	fill: var(--wp--preset--color--basalt);
}

/* THE MOTION MOMENT (Home only): the coast draws first, then the water and
   land lines, then the dot fades in. Once, on load. None with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.harling-field path {
		stroke-dashoffset: 1;
		animation: harling-draw 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
	}

	.harling-field .c {
		animation-duration: 1.6s;
	}

	.harling-field .w {
		animation-delay: 0.35s;
	}

	.harling-field .l {
		animation-delay: 0.6s;
	}

	.harling-field .dot {
		opacity: 0;
		animation: harling-pop 0.5s ease 1.5s forwards;
	}

	@keyframes harling-draw {
		to {
			stroke-dashoffset: 0;
		}
	}

	@keyframes harling-pop {
		to {
			opacity: 1;
		}
	}
}

.harling-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	gap: 56px;
	align-items: center;
	padding-top: 64px;
	padding-bottom: 128px;
}

.harling-hero__grid > * {
	margin: 0;
}

/* The H1 is sized to its column (container query) and never wraps a line
   at >= 981px: "Three practices." / "One front desk." */
.harling-hero__text {
	container-type: inline-size;
}

.harling-hero__text > * {
	margin-top: 0;
	margin-bottom: 0;
}

.harling-hero h1 {
	margin: 0;
	font-size: clamp(40px, 10.2cqi, 76px);
	font-stretch: 125%;
	font-weight: 800;
	line-height: 0.94;
	letter-spacing: -0.05em;
}

.harling-hero h1 span {
	display: block;
}

@media (min-width: 981px) {
	.harling-hero h1 span {
		white-space: nowrap;
	}
}

.harling-hero .harling-lede {
	margin-top: 30px;
}

/* TEXT OVER THE FIELD. The mock sets ledes in basalt-2 and eyebrows in moss;
   measured against the pixels actually behind them (tools/harness/
   masthead-contrast.js), a contour line under a glyph took them to 3.95:1
   and 3.54:1. Over the field and band they are basalt and moss-dark instead
   (D-brand-11); everywhere else the mock's colours stand. */
.harling-hero .harling-lede,
.harling-page-head .harling-lede {
	color: var(--wp--preset--color--basalt);
}

.harling-page-head .harling-eyebrow {
	color: var(--wp--preset--color--moss-d);
}

.harling-hero .harling-actions {
	margin-top: 40px;
}

/* INNER PAGES: a slim, static crop of the same field behind the title (no
   draw-in; the motion moment is Home's). Faded in from the left. */
.harling-page-head {
	padding-bottom: 56px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.harling-page-head::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("assets/brand/contours-band.svg") right center / auto 100% no-repeat;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 55%, black 100%);
	mask-image: linear-gradient(90deg, transparent 0%, black 55%, black 100%);
	pointer-events: none;
}

.harling-page-head > * {
	position: relative;
}

.harling-page-head__inner {
	padding-top: 56px;
}

.harling-page-head h1 {
	margin: 0;
	font-size: var(--wp--preset--font-size--title);
	letter-spacing: -0.05em;
}

/* A service page head carries its room's photo (#2/#3/#4); Team, #5. */
.harling-page-head--photo .harling-page-head__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: 56px;
	align-items: center;
}

.harling-page-head--photo .harling-photo {
	aspect-ratio: 4 / 3;
}


/* 8  Next available card =================================================== */

.harling-ledger {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 22px 24px 18px;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 30px 60px -30px var(--wp--custom--color--card-shadow), 0 0 0 1px var(--wp--custom--color--card-ring);
}

.harling-ledger__title {
	margin: 0;
	font-size: 19px;
	font-stretch: 125%;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* basalt-2 on white 7.6:1. */
.harling-ledger__desc,
.harling-ledger__empty {
	margin: 3px 0 0;
	color: var(--wp--preset--color--basalt-2);
	font-size: 13px;
}

.harling-ledger__empty {
	padding: 14px 0;
}

.harling-seg {
	display: flex;
	gap: 4px;
	margin: 16px 0 4px;
	padding: 4px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--fog);
}

/* THE TABS ARE RADIOS (D-2b-1): visually hidden, still focusable. */
.harling-seg__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* basalt-2 on fog 6.9:1. */
.harling-seg__item {
	flex: 1;
	padding: 8px 0;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--basalt-2);
	font-size: 13.5px;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	user-select: none;
}

.harling-ledger > .harling-seg__input:nth-of-type(1):checked ~ .harling-seg .harling-seg__item:nth-of-type(1),
.harling-ledger > .harling-seg__input:nth-of-type(2):checked ~ .harling-seg .harling-seg__item:nth-of-type(2),
.harling-ledger > .harling-seg__input:nth-of-type(3):checked ~ .harling-seg .harling-seg__item:nth-of-type(3) {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--basalt);
	box-shadow: 0 1px 3px var(--wp--custom--color--shadow);
}

.harling-ledger > .harling-seg__input:nth-of-type(1):focus-visible ~ .harling-seg .harling-seg__item:nth-of-type(1),
.harling-ledger > .harling-seg__input:nth-of-type(2):focus-visible ~ .harling-seg .harling-seg__item:nth-of-type(2),
.harling-ledger > .harling-seg__input:nth-of-type(3):focus-visible ~ .harling-seg .harling-seg__item:nth-of-type(3) {
	outline: 3px solid var(--wp--preset--color--moss-d);
	outline-offset: 2px;
}

/* All three panels share one grid cell (D-2b-2): the card never changes
   height between tabs. */
.harling-ledger__panels {
	display: grid;
}

.harling-ledger__panel {
	display: flex;
	flex-direction: column;
	grid-area: 1 / 1;
	visibility: hidden;
}

.harling-ledger > .harling-seg__input:nth-of-type(1):checked ~ .harling-ledger__panels > .harling-ledger__panel:nth-child(1),
.harling-ledger > .harling-seg__input:nth-of-type(2):checked ~ .harling-ledger__panels > .harling-ledger__panel:nth-child(2),
.harling-ledger > .harling-seg__input:nth-of-type(3):checked ~ .harling-ledger__panels > .harling-ledger__panel:nth-child(3) {
	visibility: visible;
}

.harling-ledger__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.harling-ledger__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: center;
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--wp--custom--color--hairline);
}

.harling-ledger__row:first-child {
	border-top: 0;
}

.harling-ledger__row strong {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
}

.harling-ledger__row > div > span {
	color: var(--wp--preset--color--basalt-2);
	font-size: 12.5px;
}

/* The slot chip: moss-dark on the chip tint 7.1:1; "with Idris C." in
   basalt-2 on the tint 6.5:1. */
.harling-slot {
	display: inline-block;
	padding: 6px 11px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--color--chip);
	color: var(--wp--preset--color--moss-d);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.25;
	text-align: right;
	text-decoration: none;
	white-space: nowrap;
}

.harling-slot time {
	display: block;
}

.harling-slot__with {
	display: block;
	color: var(--wp--preset--color--basalt-2);
	font-size: 11px;
	font-weight: 400;
}

.harling-slot:hover {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--moss);
}

.harling-ledger .harling-ledger__panel > .harling-btn--block {
	margin-top: auto;
	padding: 13px;
}

.harling-ledger__panel > .harling-ledger__rows,
.harling-ledger__panel > .harling-ledger__empty {
	margin-bottom: 12px;
}

/* Every tab has three rows (D-4b-1), but on phones the titles wrap
   differently per practice ("Registered Massage Therapy" takes 2-3 lines,
   "Follow-up" one), and the shared cell is as tall as the tallest tab. The
   list fills the cell and its rows share the height equally, content
   centred, so no tab shows a gap above "See all times". Desktop: no slack,
   no change. */
.harling-ledger__panel > .harling-ledger__rows {
	display: grid;
	flex: 1 0 auto;
	grid-auto-rows: 1fr;
}

.harling-ledger__fine {
	margin: 10px 0 0;
	color: var(--wp--preset--color--basalt-2);
	font-size: 11.5px;
	text-align: center;
}


/* 9  Home: billing strip, photo band, practices, basalt band, team split,
      Visit band =========================================================== */

/* BILLING STRIP (D-brand-9): the claim left, the one insurer list right. */
.harling-billing {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.harling-billing > .harling-wrap {
	display: grid;
	grid-template-columns: minmax(260px, 330px) 1fr;
	align-items: center;
}

.harling-billing__say {
	margin: 0;
	padding: 34px 40px 34px 0;
	border-right: 1px solid var(--wp--preset--color--rule);
}

.harling-billing__say > * {
	margin: 0;
}

.harling-billing__say h2 {
	font-size: 22px;
	font-stretch: 125%;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.harling-billing__say p {
	margin-top: 8px;
	color: var(--wp--preset--color--basalt-2);
	font-size: 14px;
	line-height: 1.5;
}

/* moss on fog 5.4:1. */
.harling-billing__say .harling-link {
	margin-top: 4px;
}

.harling-billing__say .harling-link a {
	color: var(--wp--preset--color--moss);
	font-size: 14px;
}

/* Insurer names: basalt-2, NOT the mock's lighter grey (#6F7C75 is 3.8:1 on
   fog, which fails at the 16px the names drop to on phones). */
.harling-insurers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px 32px;
	margin: 0;
	padding: 30px 0 30px 56px;
	list-style: none;
}

.harling-insurers li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--wp--preset--color--basalt-2);
	font-size: clamp(16px, 1.4vw, 19px);
	font-stretch: 125%;
	font-weight: 700;
	letter-spacing: -0.025em;
	white-space: nowrap;
}

.harling-insurers li::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--glass);
}

/* PHOTO BAND: full bleed, at most 560px tall (kit README). */
.harling-photo.harling-photo--band {
	height: min(62vh, 560px);
	border-radius: 0;
}

.harling-photo--band img {
	object-position: 50% 55%;
}

/* SECTIONS. */
.harling-block {
	padding-top: 120px;
	padding-bottom: 120px;
}

.harling-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: end;
	margin-bottom: 52px;
}

.harling-head > * {
	margin: 0;
}

.harling-head p {
	justify-self: end;
	max-width: 44ch;
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--prose);
	line-height: 1.6;
}

/* PRACTICE CARDS. */
.harling-practices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.harling-pcard {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.harling-pcard > * {
	margin: 0;
}

.harling-pcard .harling-photo {
	aspect-ratio: 4 / 3.3;
}

.harling-pcard h3 {
	margin-top: 22px;
	font-size: var(--wp--preset--font-size--card-title);
}

.harling-pcard h3 a {
	text-decoration: none;
}

.harling-pcard h3 a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--glass);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.harling-pcard > p:not(.harling-pmeta) {
	flex: 1;
	margin-top: 8px;
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--ui);
	line-height: 1.55;
}

.harling-pmeta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 18px 0 0;
	padding-top: 6px;
	border-top: 1px solid var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--small);
}

.harling-pmeta span {
	color: var(--wp--preset--color--basalt-2);
}

/* moss on fog 5.4:1, 44px tall. */
.harling-pmeta a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--moss);
	font-weight: 600;
	text-decoration: none;
}

.harling-pmeta a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--glass);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* BASALT BAND: "Book in a minute, not a phone call." */
.harling-band {
	background-color: var(--wp--preset--color--basalt);
	color: var(--wp--preset--color--fog);
}

.harling-band > .harling-wrap {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 84px;
	padding-top: 120px;
	padding-bottom: 120px;
}

.harling-band__say > * {
	margin: 0;
}

.harling-mark {
	margin: 0 0 30px;
}

.harling-seal {
	display: block;
	width: 64px;
	height: 64px;
}

.harling-band h2 {
	color: var(--wp--preset--color--fog);
}

/* fog at .74 on basalt 9.2:1. */
.harling-band__say p {
	max-width: 40ch;
	margin-top: 24px;
	color: var(--wp--custom--color--fog-veil);
	font-size: var(--wp--preset--font-size--prose);
	line-height: 1.6;
}

.harling-band__say .wp-block-buttons {
	margin-top: 36px;
}

/* "A preview of BookOS booking" (D-4e-1): fog-veil on basalt (9.2:1), small. */
.harling-band__say p.harling-powered {
	margin-top: 22px;
	font-size: 13px;
}

.harling-steps-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: harling-step;
}

.harling-steps-list li {
	display: grid;
	grid-template-columns: 72px 1fr;
	margin: 0;
	padding: 26px 0;
	border-top: 1px solid var(--wp--custom--color--fog-veil-2);
	counter-increment: harling-step;
	color: var(--wp--custom--color--fog-veil);
	font-size: 15px;
	line-height: 1.55;
}

.harling-steps-list li:last-child {
	border-bottom: 1px solid var(--wp--custom--color--fog-veil-2);
}

/* The step number: sea glass on basalt 6.9:1. */
.harling-steps-list li::before {
	content: counter(harling-step);
	grid-row: 1 / span 2;
	color: var(--wp--preset--color--glass);
	font-size: 34px;
	font-stretch: 125%;
	font-weight: 800;
	line-height: 1;
}

.harling-steps-list strong {
	display: block;
	margin-bottom: 5px;
	color: var(--wp--preset--color--fog);
	font-size: 17.5px;
	font-weight: 600;
}

/* TEAM SPLIT: the hands photo (#5) and the counted summary. */
.harling-split {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 76px;
	align-items: center;
}

.harling-split > * {
	margin: 0;
}

.harling-split .harling-photo {
	aspect-ratio: 5 / 4;
}

.harling-team-summary > * {
	margin: 0;
}

.harling-team-summary__who {
	max-width: 42ch;
	margin-top: 20px;
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--prose);
	line-height: 1.6;
}

.harling-team-summary__marks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0 18px;
	padding: 0;
	list-style: none;
}

/* Round monograms: basalt on fog-2 13.5:1. With portraits on (D-4b-3) a
   staff id that has one shows it as a round crop instead; the rest keep
   the monogram. */
.harling-team-summary__marks li {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--fog-2);
	font-size: 15px;
	font-stretch: 125%;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.harling-team-summary__marks li.harling-team-summary__has-portrait {
	overflow: hidden;
}

/* Explicit 54 x 54: in the li's centring grid a percentage height does not
   resolve, and the 4:5 box would only be clipped, not cropped (measured 54 x 68). */
.harling-team-summary__portrait {
	display: block;
	width: 54px;
	height: 54px;
	object-fit: cover;
	object-position: 50% 22%;
}

/* Whenever the split's text ends the section (stacked on phones; and at
   desktop once the caption made the text taller than the photo), its last
   paragraph's 24px margin sat on top of the section padding: 184px to the
   Visit band's photo at phone widths against 160 between every other Home
   section, 255 against 240 at 1440 (batch 4b, measured). */
.harling-split__text > :last-child {
	margin-bottom: 0;
}

/* The caption under the crops (D-4b-3): the crops keep their 18px, the
   caption takes the same 18px before "Meet the team". */
.harling-team-summary .harling-team__caption {
	max-width: 42ch;
	margin: 0 0 18px;
}

/* VISIT BAND: the entrance (#6) and the facts. */
.harling-visit-band {
	background-color: var(--wp--preset--color--fog-2);
}

.harling-visit-band > .harling-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 76px;
	align-items: center;
	padding-top: 120px;
	padding-bottom: 120px;
}

.harling-visit-band .harling-wrap > * {
	margin: 0;
}

.harling-visit-band .harling-photo {
	aspect-ratio: 3 / 2;
}

.harling-facts-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 34px;
	margin-top: 34px;
}

.harling-facts-grid > * {
	margin: 0;
}

.harling-facts-grid p {
	margin: 0;
	color: var(--wp--preset--color--basalt-2);
	font-size: 15px;
	line-height: 1.55;
}

.harling-facts-grid p.harling-fact__label {
	margin-bottom: 6px;
	color: var(--wp--preset--color--basalt);
	font-weight: 600;
}


/* 10  Inner pages ========================================================== */

/* Section hairlines run the CONTENT width, not into the gutters: the wrap's
   padding holds the gutter, so the rule is a 1px background sized to the
   padded box minus both gutters. */
.harling-section,
.harling-visit-row {
	padding-top: 64px;
	padding-bottom: 64px;
	background: linear-gradient(var(--wp--preset--color--rule), var(--wp--preset--color--rule)) center top / calc(100% - 2 * var(--wp--custom--gutter)) 1px no-repeat;
}

.harling-page-head + .harling-section,
.harling-page-head + .harling-visit-row {
	background: none;
}

.harling-section > * {
	margin-top: 0;
}

.harling-section > h2 {
	margin-bottom: 16px;
	font-size: clamp(28px, 3vw, 40px);
}

.harling-section__intro {
	max-width: 60ch;
	margin: 0 0 32px;
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--prose);
}

.harling-more {
	margin: 24px 0 0;
}

.harling-more a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--moss-d);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--glass);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Service lists. */
.harling-services__rows {
	max-width: 760px;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	list-style: none;
}

.harling-services__row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 12px 24px;
	align-items: center;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.harling-services__what strong {
	display: block;
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
}

.harling-services__what span {
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--small);
}

.harling-services__price {
	font-size: var(--wp--preset--font-size--ui);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* The Book chip: moss-dark on the chip tint 7.1:1, 44px tall. */
.harling-services__book {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--color--chip);
	color: var(--wp--preset--color--moss-d);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.harling-services__book:hover {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--moss);
}

/* The team (full) and practitioner lists: round monograms, or a 4:5
   portrait where the block asks for portraits and one exists (D-4b-3). */
.harling-team {
	display: grid;
	gap: 40px 56px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.harling-team--full {
	grid-template-columns: repeat(2, 1fr);
}

.harling-team--teaser {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
}

.harling-person {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 18px;
	align-items: start;
	margin: 0;
}

.harling-monogram {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--fog-2);
	color: var(--wp--preset--color--basalt);
	font-size: 16px;
	font-stretch: 125%;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

/* 4:5, rounded 10px. width/height attributes (640 x 800) size the box before
   the file arrives: no layout shift. fog-2 shows until it loads. */
.harling-person__portrait {
	display: block;
	width: 120px;
	height: auto;
	aspect-ratio: 4 / 5;
	border-radius: 10px;
	background-color: var(--wp--preset--color--fog-2);
	object-fit: cover;
}

/* basalt-2 on fog, as the bios. Once, under the list (D-4b-3). */
.harling-team__caption {
	margin: 40px 0 0;
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--small);
}

.harling-person__text > * {
	margin: 0;
}

.harling-person__name {
	font-size: var(--wp--preset--font-size--card-title);
	font-stretch: 125%;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

/* moss on fog 5.4:1. */
.harling-person__title {
	margin-top: 4px;
	color: var(--wp--preset--color--moss);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.harling-person__text .harling-person__bio,
.harling-person__text .harling-person__sees {
	margin-top: 8px;
	color: var(--wp--preset--color--basalt-2);
}

.harling-person__sees {
	font-size: var(--wp--preset--font-size--small);
}

/* VISIT PAGE: two photo rows (#7 hours, #6 accessibility), then the rest. */
.harling-visit-row {
	display: grid;
	grid-template-columns: minmax(0, 440px) 1fr;
	gap: 64px;
	align-items: center;
}

.harling-visit-row--flip {
	grid-template-columns: 1fr minmax(0, 440px);
}

.harling-visit-row--flip > .harling-photo {
	order: 2;
}

.harling-visit-row > * {
	margin: 0;
}

.harling-visit-row .harling-photo--portrait {
	aspect-ratio: 4 / 5;
}

.harling-visit-row .harling-photo--wide {
	aspect-ratio: 3 / 2;
}

.harling-facts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 48px;
}

.harling-fact {
	margin: 0;
	padding: 24px 0 28px;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.harling-visit-row .harling-facts {
	grid-template-columns: 1fr;
}

.harling-fact > * {
	margin: 0;
}

.harling-fact h2 {
	margin-bottom: 8px;
	font-size: 20px;
	font-stretch: 125%;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.harling-fact p {
	color: var(--wp--preset--color--basalt-2);
}

.harling-fact p + p {
	margin-top: 8px;
}


/* 11  404 ================================================================== */

.error404 .inside-article {
	box-sizing: border-box;
	max-width: var(--wp--custom--wrap);
	margin: 0 auto;
	padding: 72px var(--wp--custom--gutter) 0;
}

.error404 .entry-title {
	font-size: var(--wp--preset--font-size--title);
	font-stretch: 125%;
	font-weight: 800;
	letter-spacing: -0.05em;
}

.error404 .search-form {
	display: none;
}

/* The 404's article is already on the wrap; its text must not be wrapped twice. */
.error404 .entry-content > * {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.harling-notfound {
	box-sizing: border-box;
	max-width: var(--wp--custom--wrap);
	margin: 0 auto;
	padding: 8px var(--wp--custom--gutter) 96px;
}

.harling-notfound__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.harling-notfound__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--basalt);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--glass);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Photo #8: the linen texture, faint, behind the 404's right side. */
.harling-notfound__texture {
	position: absolute;
	top: 0;
	right: 0;
	width: 40%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	opacity: 0.35;
	-webkit-mask-image: linear-gradient(90deg, transparent, black 60%);
	mask-image: linear-gradient(90deg, transparent, black 60%);
	pointer-events: none;
}

.harling-notfound__texture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.error404 .site-content {
	position: relative;
}


/* 12  Book flow ============================================================ */

/* The flow and, from 981px, the side panel (texture #8, hours, address). */
.harling-book-layout {
	display: grid;
	grid-template-columns: minmax(0, 760px) minmax(0, 340px);
	gap: 48px;
	align-items: start;
	padding-top: 48px;
	padding-bottom: 96px;
}

.harling-book {
	transition: opacity 0.15s;
}

:where(.harling-book, .harling-book-side) p {
	margin: 0;
}

.harling-book.is-entering {
	opacity: 0;
}

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

/* The demo line, first on every step: basalt on fog-2 13.5:1. */
.harling-book .harling-book__demo {
	margin: 0 0 24px;
	padding: 12px 16px;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--fog-2);
	font-size: var(--wp--preset--font-size--small);
}

/* Step indicator: eight bars (colour only), named by the count line. */
.harling-steps {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.harling-steps__item {
	height: 4px;
	margin: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--rule);
}

.harling-steps__item.is-done,
.harling-steps__item.is-current {
	background-color: var(--wp--preset--color--moss);
}

.harling-book .harling-book__count {
	margin: 8px 0 16px;
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--small);
}

.harling-book__card {
	padding: 32px;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 30px 60px -36px var(--wp--custom--color--card-shadow), 0 0 0 1px var(--wp--custom--color--card-ring);
}

/* Back: words only (no arrow glyph, D-brand-4), 44px tall, glass rule. */
.harling-book__back {
	display: inline-flex;
	align-items: center;
	min-width: 44px;
	min-height: 44px;
	margin: -12px 0 8px;
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--glass);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.harling-book__back:hover {
	color: var(--wp--preset--color--basalt);
}

/* The step heading: the #book-step fragment target, focused on arrival
   (D-book-7). Its scroll margin keeps the demo line and progress in view. */
.harling-book .harling-book__title {
	margin: 0;
	font-size: clamp(32px, 3.6vw, 48px);
	scroll-margin-top: 200px;
}

.harling-book .harling-book__title:focus {
	outline: none;
}

.harling-book .harling-book__sub {
	margin-top: 10px;
	color: var(--wp--preset--color--basalt-2);
}

.harling-book .harling-book__empty {
	margin-top: 28px;
	color: var(--wp--preset--color--basalt-2);
}

.harling-book__tiles,
.harling-book__rows,
.harling-book__strip,
.harling-book__summary,
.harling-book__fields,
.harling-book__policy,
.harling-book__explain,
.harling-book .harling-book__done {
	margin: 28px 0 0;
}

/* THE WHOLE CARD IS THE TARGET (Kevin, 2026-10-06): no arrow glyph; a moss
   border and a fog fill on hover AND keyboard focus. */
.harling-book__tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	padding: 0;
	list-style: none;
}

.harling-book__tiles li {
	margin: 0;
}

.harling-book__tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	height: 100%;
	min-height: 112px;
	padding: 18px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--basalt);
	text-decoration: none;
	transition: border-color 0.15s, background-color 0.15s;
}

.harling-book__tile-name {
	font-size: 20px;
	font-stretch: 125%;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.harling-book__tile-meta {
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--small);
}

.harling-book__tile:hover,
.harling-book__tile:focus-visible,
.harling-book__row:hover,
.harling-book__row:focus-visible {
	border-color: var(--wp--preset--color--moss);
	background-color: var(--wp--preset--color--fog);
}

.harling-book__tile:focus-visible,
.harling-book__row:focus-visible {
	outline: 2px solid var(--wp--preset--color--moss);
	outline-offset: 2px;
}

/* Rows (services, practitioners): bordered cards, the whole card a link. */
.harling-book__rows {
	display: grid;
	gap: 10px;
	padding: 0;
	list-style: none;
}

.harling-book__rows li {
	margin: 0;
}

.harling-book__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	align-items: center;
	min-height: 64px;
	padding: 16px 18px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--basalt);
	text-decoration: none;
	transition: border-color 0.15s, background-color 0.15s;
}

.harling-book__row--person {
	grid-template-columns: 44px 1fr;
}

.harling-book__row-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.harling-book__row-main strong {
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
}

.harling-book__row-title {
	color: var(--wp--preset--color--moss);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.harling-book__row-desc {
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.harling-book__row-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	white-space: nowrap;
}

.harling-book__row-side span {
	color: var(--wp--preset--color--basalt-2);
	font-size: 13px;
}

.harling-book__row-side strong {
	font-size: var(--wp--preset--font-size--ui);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.harling-book__row--person .harling-monogram {
	width: 44px;
	height: 44px;
	font-size: 14px;
}

.harling-book .harling-monogram--any {
	border: 1px dashed var(--wp--preset--color--rule);
	background-color: transparent;
}

/* Step 4: the date strip; 7 across from ~340px of card, else 4 + 3. */
.harling-book__strip {
	container-type: inline-size;
}

.harling-book__range {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.harling-book .harling-book__range-label {
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
}

/* The pagers are words (no chevrons): basalt, 44px, glass rule. */
.harling-book__pager {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	min-height: 44px;
	color: var(--wp--preset--color--basalt);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--glass);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.harling-book__pager.is-off {
	visibility: hidden;
}

.harling-book__days {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@container (min-width: 340px) {
	.harling-book__days {
		grid-template-columns: repeat(7, 1fr);
		gap: 4px;
	}
}

.harling-book__days li {
	margin: 0;
}

/* Day tiles: sentence case (no caps, D-brand-4). */
.harling-book__day {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 68px;
	padding: 8px 2px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--basalt);
	line-height: 1.25;
	text-decoration: none;
}

.harling-book__day span {
	color: var(--wp--preset--color--basalt-2);
	font-size: 12px;
}

.harling-book__day strong {
	font-size: 19px;
	font-stretch: 125%;
	font-weight: 700;
}

a.harling-book__day:hover {
	border-color: var(--wp--preset--color--moss);
	background-color: var(--wp--preset--color--fog);
}

/* The chosen day: white on moss 6.07:1. */
.harling-book__day[aria-current="date"],
.harling-book__day[aria-current="date"]:hover {
	border-color: var(--wp--preset--color--moss);
	background-color: var(--wp--preset--color--moss);
	color: var(--wp--preset--color--white);
}

.harling-book__day[aria-current="date"] span {
	color: var(--wp--preset--color--white);
}

/* No times: not a link. basalt-2 on fog 6.9:1. */
.harling-book__day.is-off {
	border-color: transparent;
	background-color: var(--wp--preset--color--fog);
}

.harling-book .harling-book__on {
	margin-top: 28px;
	font-size: 22px;
	font-stretch: 125%;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* Period headings: sentence case, basalt-2. */
.harling-book .harling-book__period {
	margin: 20px 0 10px;
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--small);
	font-stretch: 100%;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
}

.harling-book__times {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.harling-book__times li {
	margin: 0;
}

/* Time chips: moss-dark on the chip tint 7.1:1. */
.harling-book__time {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--color--chip);
	color: var(--wp--preset--color--moss-d);
	font-size: var(--wp--preset--font-size--ui);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.harling-book__time:hover {
	background-color: var(--wp--preset--color--moss);
	color: var(--wp--preset--color--white);
}

.harling-book__summary {
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.harling-book__summary > div {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.harling-book__summary dt {
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.harling-book__summary dd {
	margin: 0;
	font-weight: 600;
}

.harling-book__summary dd span {
	display: block;
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.harling-book__nowrap {
	white-space: nowrap;
}

.harling-book__fields {
	min-width: 0;
	padding: 0;
	border: 0;
}

.harling-book__fields legend,
.harling-book__consent legend {
	margin-bottom: 4px;
	padding: 0;
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
}

.harling-book .harling-book__note {
	margin-bottom: 16px;
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--small);
}

.harling-book__field + .harling-book__field {
	margin-top: 14px;
}

.harling-book__field label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Read-only samples: basalt-2 borders (>= 3:1 on white and fog). */
.harling-book .harling-book__field input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--basalt-2);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--fog);
	color: var(--wp--preset--color--basalt);
	font-size: var(--wp--preset--font-size--body);
}

.harling-book__policy,
.harling-book__explain,
.harling-book__done {
	padding: 18px 20px;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--fog-2);
}

.harling-book .harling-book__policy p + p,
.harling-book .harling-book__explain p + p,
.harling-book .harling-book__live p + p {
	margin-top: 10px;
}

.harling-book__consent {
	margin: 24px 0 0;
}

.harling-book__consent fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.harling-book__check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 56px;
	padding: 16px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--card);
	cursor: pointer;
}

.harling-book__check:hover {
	border-color: var(--wp--preset--color--moss);
	background-color: var(--wp--preset--color--fog);
}

.harling-book__check input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--wp--preset--color--moss);
}

.harling-book button.harling-btn {
	margin-top: 20px;
}

.harling-book__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.harling-book .harling-book__actions {
	margin-top: 28px;
}

.harling-book__done strong {
	display: block;
	margin-bottom: 4px;
	font-size: 22px;
	font-stretch: 125%;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.harling-book__live {
	margin-top: 28px;
}

.harling-book__live h3 {
	margin: 0 0 8px;
	font-size: 22px;
}

.harling-book .harling-book__policy--details {
	margin-top: 20px;
	padding: 0 20px;
}

.harling-book__policy--details[open] {
	padding-bottom: 16px;
}

.harling-book__policy--details summary {
	padding: 11px 0;
	font-weight: 600;
	line-height: 22px;
	cursor: pointer;
}

.harling-book__quiet {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--basalt);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--glass);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.harling-book .harling-book__mark {
	margin-top: 20px;
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--small);
}

/* THE SIDE PANEL (>= 981px): photo #8, then hours and address. Sticky beside
   the flow; decorative texture, real text. */
.harling-book-side {
	position: sticky;
	top: 24px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 0 0 1px var(--wp--custom--color--card-ring);
}

.harling-book-side__texture {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.harling-book-side__texture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.harling-book-side > p {
	padding: 0 22px;
	color: var(--wp--preset--color--basalt-2);
	font-size: var(--wp--preset--font-size--small);
}

.harling-book-side > p:last-child {
	padding-bottom: 22px;
}

.harling-book-side p.harling-book-side__label {
	margin-top: 18px;
	margin-bottom: 4px;
	color: var(--wp--preset--color--basalt);
	font-weight: 600;
}


/* 13  Under 981px ========================================================== */

@media (max-width: 980px) {
	.harling-wrap,
	.entry-content > :not(.harling-bleed),
	.harling-bleed > .harling-wrap,
	.harling-footer__brand.grid-container,
	.harling-footer.grid-container,
	.harling-notfound,
	.error404 .inside-article {
		padding-left: var(--wp--custom--gutter-mobile);
		padding-right: var(--wp--custom--gutter-mobile);
	}

	.harling-disclosure {
		padding: 18px var(--wp--custom--gutter-mobile) 96px;
	}

	.harling-section,
	.harling-visit-row {
		background-size: calc(100% - 2 * var(--wp--custom--gutter-mobile)) 1px;
	}

	.harling-page-head + .harling-section,
	.harling-page-head + .harling-visit-row {
		background: none;
	}

	.entry-content > .harling-hero,
	.entry-content > .harling-page-head {
		margin-top: calc(-1 * var(--wp--custom--header-height-mobile));
		padding-top: var(--wp--custom--header-height-mobile);
	}

	/* Hero: the field fills the width, at .6, no mask; the dot hides; the
	   card goes under the text (kit README). */
	.harling-field {
		left: 0;
		width: 100%;
		opacity: 0.6;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.harling-field .dot {
		display: none;
	}

	.harling-hero__grid {
		grid-template-columns: 1fr;
		gap: 40px;
		padding-top: 28px;
		padding-bottom: 64px;
	}

	.harling-page-head__inner {
		padding-top: 28px;
	}

	.harling-page-head--photo .harling-page-head__inner,
	.harling-head,
	.harling-practices,
	.harling-band > .harling-wrap,
	.harling-split,
	.harling-visit-band > .harling-wrap,
	.harling-visit-row,
	.harling-visit-row--flip,
	.harling-team--full,
	.harling-facts,
	.harling-book-layout {
		grid-template-columns: 1fr;
	}

	.harling-visit-row--flip > .harling-photo {
		order: 0;
	}

	.harling-head p {
		justify-self: start;
	}

	.harling-practices {
		gap: 48px;
	}

	.harling-band > .harling-wrap,
	.harling-split,
	.harling-visit-band > .harling-wrap {
		gap: 48px;
	}

	.harling-band > .harling-wrap,
	.harling-visit-band > .harling-wrap,
	.harling-block {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.harling-billing > .harling-wrap {
		grid-template-columns: 1fr;
	}

	.harling-billing__say {
		padding: 28px 0 22px;
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}

	/* Two equal columns; a long name wraps rather than push the page wide
	   ("Pacific Blue Cross" in wdth 125 bold is wider than half of 320px). */
	.harling-insurers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 20px;
		padding: 22px 0 28px;
	}

	.harling-insurers li {
		align-items: baseline;
		font-size: 16px;
		line-height: 1.25;
		white-space: normal;
	}

	.harling-footer {
		grid-template-columns: 1fr 1fr;
	}

	.harling-footer__seal {
		width: 72px;
		height: 72px;
	}

	.site-footer .harling-footer__name {
		font-size: 22px;
	}

	.harling-book-layout {
		padding-top: 32px;
		padding-bottom: 64px;
	}

	.harling-book-side {
		display: none;
	}

	.harling-book__card {
		padding: 24px 20px;
	}

	.harling-book .harling-book__title {
		scroll-margin-top: 224px;
	}

	.harling-book__tiles {
		grid-template-columns: 1fr;
	}

	.harling-book__tile {
		min-height: 88px;
	}

	.harling-book__summary > div {
		grid-template-columns: 72px 1fr;
		gap: 12px;
	}

	.harling-notfound__texture {
		display: none;
	}

	.harling-person__portrait {
		width: 96px;
	}
}