/* =============================================================
   Barebone — skin-neutral.css

   THE SKIN LAYER. Loads after main.css and supplies everything that
   file deliberately withholds: colour, type scale, radius, shadow.

   Greyscale by design. The point is a site that reads as finished and
   well-proportioned while carrying no brand — good for walkthroughs,
   and an honest starting point for a real skin.

   Replacing this with a brand skin: swap the :root block below and
   keep the rest, or delete this file entirely. functions.php guards
   the enqueue with file_exists(), so removing it reverts cleanly to
   bare structure with no PHP edit. See SKIN.md.

   Never edit main.css. The seam between structure and skin is the
   whole architecture.
   ============================================================= */

:root {
	/* ---- Surfaces ---- */
	--bg: #ffffff;
	--bg-alt: #f3f3f1;
	--bg-tint: #e7e7e4;
	--bg-dark: #2b2b29;

	/* ---- Ink ---- */
	--text: #20201e;
	--text-muted: #5d5d58;

	/* Inverted ink, for the dark panels further down. */
	--text-invert: #f8f8f6;
	--text-muted-invert: #c4c4be;
	--line-invert: rgba(248, 248, 246, 0.24);

	/* ---- Accent: intentionally the ink colour, not a hue ---- */
	--accent: #20201e;
	--accent-contrast: #ffffff;
	--cta-bg: #20201e;
	--cta-text: #ffffff;

	--line: #cecec9;
	--line-strong: #9e9e97;

	/* ---- Radius: main.css aliases these to --radius, so each is
	        named explicitly to give a skin author a clear surface. ---- */
	--radius: 6px;
	--r-sm: 4px;
	--r-md: 6px;
	--r-lg: 8px;
	--r-xl: 12px;
	--r-pill: 6px;

	--shadow-sm: 0 1px 2px rgba(32, 32, 30, 0.05);
	--shadow-md: 0 2px 8px rgba(32, 32, 30, 0.07);
	--shadow-lift: 0 4px 14px rgba(32, 32, 30, 0.09);
	--shadow: var(--shadow-sm);

	--ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* No webfont — the theme's rule. system-ui is the honest default. */
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--font-display: var(--font);
	--font-serif: Georgia, "Times New Roman", serif;
}

/* =============================================================
   Base typography

   34 headings share .section__title, but the rest use one-off
   classes (.person__name, .landing-step__title, …). Styling the
   elements catches every one without enumerating them.
   ============================================================= */

body {
	background: var(--bg);
	color: var(--text);
	font-size: 1rem;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	color: var(--text);
	font-family: var(--font-display);
	line-height: 1.15;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.125rem, 1.55rem + 2.35vw, 3.125rem);
	font-weight: 700;
	letter-spacing: -0.025em;
}

h2 {
	font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

h3 {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

h4 {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
}

p {
	max-width: 66ch;
}

strong,
b {
	font-weight: 650;
}

small {
	font-size: 0.875rem;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.18s var(--ease), opacity 0.18s var(--ease);
}

a:hover {
	color: var(--text);
	opacity: 0.68;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* Emphasis spans produced by barebone_accent_title() / _kinetic_title(). */
.accent-word,
.kinetic-word {
	color: var(--accent);
}

/* =============================================================
   Section rhythm and alternating bands

   Sections are siblings inside .site-main, so nth-of-type gives
   adjacent sections separation without touching any template.
   ============================================================= */

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

.site-main > .section:nth-of-type(even) {
	background: var(--bg-alt);
}

.section__head {
	max-width: 60ch;
}

.section__title {
	margin: 0;
}

.section__intro {
	color: var(--text-muted);
	font-size: 1.125rem;
	max-width: 60ch;
}

.eyebrow {
	color: var(--text-muted);
	font-size: 0.78125rem;
	font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-weight: 650;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.post-meta,
.post-reviewed,
.breadcrumbs__list,
.ba-case__label,
.ba-case__duration,
.testimonial__context,
.contact-way__label,
.finance__financing-label,
.service-pricing__financing-label {
	font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	letter-spacing: 0.035em;
}

/* =============================================================
   Buttons

   main.css gives .btn a bare `border: 1px solid` (currentColor),
   so every variant must state its own border colour.
   ============================================================= */

.btn {
	border-color: var(--line-strong);
	border-radius: var(--r-pill);
	font-size: 0.9375rem;
	font-weight: 600;
	justify-content: center;
	line-height: 1.2;
	min-height: 44px;
	text-decoration: none;
	transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
		border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.btn:hover {
	opacity: 1; /* Undo the generic link hover — buttons shift colour instead. */
	transform: translateY(-1px);
}

.btn--cta {
	background: var(--cta-bg);
	border-color: var(--cta-bg);
	color: var(--cta-text);
}

.btn--cta:hover {
	background: #3b3b38;
	border-color: #3b3b38;
	color: var(--cta-text);
}

.btn--outline {
	background: transparent;
	color: var(--text);
}

.btn--outline:hover {
	background: var(--bg-tint);
	border-color: var(--text-muted);
	color: var(--text);
}

.btn--ghost {
	background: var(--bg-alt);
	border-color: var(--line);
	text-decoration: underline;
}

.btn[disabled],
.btn[aria-disabled="true"],
[class*="--placeholder"].btn {
	cursor: not-allowed;
	opacity: 0.58;
	transform: none;
}

.arrow-circle {
	border-color: var(--line-strong);
	border-radius: var(--r-pill);
	min-height: 36px;
	min-width: 36px;
	transition: background-color 0.18s var(--ease);
}

.link-sweep {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

/* =============================================================
   Cards

   main.css already groups every card shell and gives it a bare
   border; the skin only adds surface.
   ============================================================= */

.service-tile,
.service-card,
.person-card,
.office-card,
.post-card,
.testimonial,
.ba-case {
	background: var(--bg);
	border-color: var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.22s var(--ease), transform 0.22s var(--ease),
		border-color 0.22s var(--ease);
}

/* Only the linked cards invite a hover. */
a.service-tile:hover,
a.service-card:hover,
a.person-card:hover,
a.office-card:hover,
a.post-card:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shadow-md);
	opacity: 1;
	transform: translateY(-1px);
}

/* On the alt band, white cards need the contrast the other way round. */
.site-main > .section:nth-of-type(even) .service-tile,
.site-main > .section:nth-of-type(even) .service-card,
.site-main > .section:nth-of-type(even) .person-card,
.site-main > .section:nth-of-type(even) .office-card,
.site-main > .section:nth-of-type(even) .post-card,
.site-main > .section:nth-of-type(even) .testimonial,
.site-main > .section:nth-of-type(even) .ba-case {
	background: var(--bg);
}

.testimonial {
	font-size: 1.0625rem;
}

/* .person is a bare <article> in main.css — it needs its own surface. */
.person {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
}

.person__portrait .placeholder,
.person__portrait img {
	border-radius: var(--r-lg);
}

.person__name {
	margin-top: 0.2em;
}

.person__bio {
	color: var(--text-muted);
	font-size: 0.9375rem;
}

.person__quote {
	border-left: 2px solid var(--line-strong);
	color: var(--text-muted);
	font-size: 0.9375rem;
	font-style: italic;
	padding-left: var(--gap-sm);
}

/* =============================================================
   Placeholder — the stand-in for unset media
   ============================================================= */

.placeholder {
	background-color: var(--bg-tint);
	background-image:
		linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(94, 94, 89, 0.2) 50%, transparent calc(50% + 0.5px)),
		linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(94, 94, 89, 0.2) 50%, transparent calc(50% + 0.5px));
	border-color: var(--line-strong);
	border-radius: var(--r-md);
	color: var(--text-muted);
}

.placeholder__label {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.09em;
	padding: 0.35rem 0.55rem;
	text-transform: uppercase;
}

.brand-fallback {
	align-items: center;
	background: var(--bg-alt);
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-sm);
	display: inline-flex;
	font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	min-height: 44px;
	padding: 0.45rem 0.65rem;
	text-transform: uppercase;
}

/* On the alt band the placeholder would vanish — tint it instead. */
.site-main > .section:nth-of-type(even) .placeholder {
	background-color: #dfdfdc;
}

/* Real content stays neutral without being reduced to full grayscale. */
[class$="__media"] img,
[class$="__figure"] img,
.person__portrait img,
.staff-row__img,
.author-box__img,
.ba-case__shot img,
.tour-grid__item img {
	background: var(--bg-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	filter: saturate(0.45) contrast(0.96);
}

.areas-map__frame,
.contact-map__frame,
.location-map__frame,
.site-footer__map {
	background: var(--bg-tint);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
}

.areas-map__frame iframe,
.contact-map__frame iframe,
.location-map__frame iframe,
.site-footer__map iframe {
	filter: grayscale(0.72) saturate(0.45) contrast(0.95);
	width: 100%;
}

/* =============================================================
   Utility bar + header
   ============================================================= */

.utility-bar {
	background: var(--bg-dark);
	color: var(--text-invert);
	font-size: 0.8125rem;
}

.utility-bar a:hover {
	color: var(--text-invert);
}

.site-header {
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 20;
}

.site-header.is-scrolled {
	box-shadow: var(--shadow-md);
}

.site-header__brand {
	align-items: center;
	background: var(--bg-dark);
	border: 1px solid var(--bg-dark);
	border-radius: var(--r-sm);
	color: var(--text-invert);
	display: inline-flex;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	min-height: 44px;
	padding: 0.35rem 0.6rem;
}

.site-header__brand:hover {
	color: var(--text-invert);
	opacity: 0.86;
}

.site-header__logo {
	filter: grayscale(1) brightness(0) invert(1);
	max-height: 36px;
	object-fit: contain;
	width: auto;
}

.site-header__menu {
	font-size: 0.9375rem;
	font-weight: 550;
}

.site-header__menu a,
.site-header__menu--placeholder span {
	border-radius: var(--r-sm);
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	padding-inline: 0.55rem;
}

.site-header__menu a:hover {
	background: var(--bg-alt);
	opacity: 1;
}

/* The unassigned-menu fallback renders spans, not links. */
.site-header__menu--placeholder span {
	color: var(--text-muted);
}

.site-header__toggle {
	background: transparent;
	border-color: var(--line-strong);
	border-radius: var(--r-sm);
	height: 44px;
	width: 44px;
}

.site-header__toggle-bar {
	background: var(--text);
}

/* The CTA is a <span>, not a link, until a booking URL exists. */
.site-header__book--placeholder {
	cursor: default;
	opacity: 0.55;
}

.site-header__book--placeholder:hover {
	transform: none;
}

/* =============================================================
   Hero
   ============================================================= */

.hero {
	padding-block: clamp(48px, 3rem + 4vw, 96px);
}

.hero__subheadline {
	color: var(--text-muted);
	font-size: 1.1875rem;
	max-width: 52ch;
}

.hero__card {
	background: var(--bg);
	border-color: var(--line);
	border-radius: var(--r-pill);
	box-shadow: var(--shadow-md);
	font-size: 0.875rem;
	font-weight: 600;
}

/* =============================================================
   Trust bar
   ============================================================= */

.trust-bar {
	border-block: 1px solid var(--line);
}

.trust-bar__item {
	color: var(--text-muted);
	font-size: 0.875rem;
	font-weight: 550;
}

.trust-bar__dot {
	background: var(--line-strong);
	border-color: transparent;
	border-radius: var(--r-pill);
}

/* =============================================================
   FAQ
   ============================================================= */

.faq__item {
	background: var(--bg);
	border-color: var(--line);
	border-radius: var(--r-md);
	padding: var(--gap);
}

.faq__question {
	font-size: 1.0625rem;
	font-weight: 600;
	list-style: none;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__answer {
	border-top: 1px solid var(--line);
	color: var(--text-muted);
	margin-top: var(--gap-sm);
}

/* =============================================================
   Forms
   ============================================================= */

.lead-form__label,
.landing-form__label,
.contact-form__label,
label {
	font-size: 0.875rem;
	font-weight: 600;
}

.lead-form input,
.lead-form textarea,
.lead-form select,
.landing-form input,
.landing-form textarea,
.landing-form select,
.contact-form input,
.contact-form textarea,
.contact-form select {
	background: var(--bg);
	border-color: var(--line-strong);
	border-radius: var(--r-sm);
	transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.lead-form input:focus,
.lead-form textarea:focus,
.lead-form select:focus,
.landing-form input:focus,
.landing-form textarea:focus,
.landing-form select:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(26, 26, 24, 0.08);
	outline: none;
}

.landing-form-card {
	background: var(--bg);
	border-color: var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-md);
}

.lead-form__row,
.landing-form__field,
.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.lead-form input,
.lead-form textarea,
.lead-form select,
.landing-form input,
.landing-form textarea,
.landing-form select,
.contact-form input,
.contact-form textarea,
.contact-form select,
.search-form__input {
	min-height: 44px;
}

.lead-form textarea,
.landing-form textarea,
.contact-form textarea {
	min-height: 120px;
	resize: vertical;
}

.lead-form input::placeholder,
.lead-form textarea::placeholder,
.landing-form input::placeholder,
.landing-form textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.search-form__input::placeholder {
	color: #73736e;
	opacity: 1;
}

.lead-form input:hover,
.lead-form textarea:hover,
.lead-form select:hover,
.landing-form input:hover,
.landing-form textarea:hover,
.landing-form select:hover,
.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover,
.search-form__input:hover {
	border-color: var(--text-muted);
}

.lead-form__note,
.landing-form__fineprint,
.landing-form-note {
	color: var(--text-muted);
	font-size: 0.8125rem;
}

/* =============================================================
   Wireframe surfaces

   These section-specific shells previously had structure only. A
   shared surface language makes every block legible before content
   or branding is added, without changing template markup.
   ============================================================= */

.contact-form__panel,
.contact-emergency__panel,
.service-pricing__panel,
.services-triage__panel,
.location-start__panel,
.areas-why__panel,
.finance-brief__panel,
.finance__membership,
.finance__financing,
.service-candidacy__main,
.service-candidacy__alt,
.blog-featured__card,
.landing-service,
.landing-review,
.landing-offer__inner,
.landing-trust__item {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--gap);
}

.site-main > .section:nth-of-type(even) :is(
	.contact-form__panel,
	.contact-emergency__panel,
	.service-pricing__panel,
	.services-triage__panel,
	.location-start__panel,
	.areas-why__panel,
	.finance-brief__panel,
	.finance__membership,
	.finance__financing,
	.service-candidacy__main,
	.service-candidacy__alt,
	.blog-featured__card
) {
	background: var(--bg);
}

.expect__step,
.service-steps__item,
.landing-step,
.step-track__item,
.benefit-list__item,
.candidacy-list__item,
.belief,
.community-list__item,
.triage-list__item,
.directions-list__item,
.person-education__row,
.contact-way {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--gap);
}

.expect__step,
.service-steps__item,
.landing-step,
.step-track__item,
.benefit-list__item,
.belief,
.triage-list__item,
.directions-list__item,
.contact-way {
	transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.expect__step:hover,
.service-steps__item:hover,
.landing-step:hover,
.step-track__item:hover,
.benefit-list__item:hover,
.belief:hover,
.triage-list__item:hover,
.directions-list__item:hover,
.contact-way:hover {
	background: var(--bg-alt);
	border-color: var(--line-strong);
	box-shadow: var(--shadow-sm);
}

.expect__num,
.service-steps__num,
.landing-step__num,
.step-track__num,
.belief__index,
.benefit-list__index {
	align-items: center;
	background: var(--bg-tint);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	display: inline-flex;
	font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	height: 2rem;
	justify-content: center;
	letter-spacing: 0.04em;
	width: 2rem;
}

.expect__step-desc,
.service-steps__desc,
.landing-step__desc,
.step-track__desc,
.benefit-list__desc,
.candidacy-list__item,
.belief__text,
.triage-list__answer,
.directions-list__detail,
.person-education__row,
.contact-way__note,
.service-overview__text,
.service-pricing__text,
.service-pricing__note,
.finance-brief__text,
.services-intro__text,
.areas-statement__text,
.areas-why__text {
	color: var(--text-muted);
}

.expect__step-title,
.service-steps__title,
.landing-step__title,
.step-track__title,
.benefit-list__title,
.belief__title,
.triage-list__situation,
.directions-list__title {
	margin-top: 0.15rem;
}

/* Chips, labels, proof marks, and placeholder partner logos. */
.finance__chip,
.post-card__chip,
.ba-case__tag,
.blog-filter__link,
.landing-offer__badge,
.service-pricing__financing-list li,
.finance-brief__logo-text,
.finance__logo-name,
.staff-row__item,
.credential-row__item {
	background: var(--bg-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 0.8125rem;
	padding: 0.45rem 0.65rem;
}

.finance__chips,
.finance__logos,
.finance-brief__logos,
.service-pricing__financing-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
}

.blog-filter__link {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	text-decoration: none;
}

.blog-filter__link:hover,
.service-pricing__financing-list a:hover {
	border-color: var(--line-strong);
	opacity: 1;
}

/* Stats read as annotations rather than unfinished floating text. */
.why-us__stat,
.areas-why__stat,
.person-hero__years,
.location-hero__rating,
.testimonials__rating,
.landing-hero__rating {
	background: var(--bg-alt);
	border-left: 3px solid var(--line-strong);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	padding: var(--gap-sm) var(--gap);
}

.why-us__stat-number,
.areas-why__stat,
.testimonials__rating-star,
.landing-stars {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.why-us__stat-label,
.areas-why__stat-label,
.testimonials__rating-count,
.person-hero__meta,
.location-hero__nap {
	color: var(--text-muted);
	font-size: 0.875rem;
}

/* Image groups and before/after figures need a deliberate frame. */
.about-story__collage,
.about-community__photos,
.person-outside__photos,
.tour-grid__item,
.ba-case__shot,
.post-hero__figure {
	background: var(--bg-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.tour-grid__caption,
.ba-case__label {
	color: var(--text-muted);
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	padding: 0.45rem 0.65rem;
	text-transform: uppercase;
}

.ba-case__pair {
	background: var(--bg-tint);
	border-radius: var(--r-md);
	padding: var(--gap-sm);
}

.ba-case__dot {
	background: var(--text-muted);
	border-radius: 50%;
	display: inline-block;
	height: 0.35rem;
	width: 0.35rem;
}

/* Quotes and testimonials keep a recognizable editorial hierarchy. */
.testimonial__quote,
.landing-review__quote {
	font-size: 1.0625rem;
	line-height: 1.65;
}

.testimonial__quote-mark {
	color: var(--line-strong);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.5rem;
	line-height: 0.75;
}

.testimonial__meta,
.landing-review__cite {
	border-top: 1px solid var(--line);
	color: var(--text-muted);
	font-size: 0.875rem;
	padding-top: var(--gap-sm);
}

/* Form and request status states stay grayscale but visibly distinct. */
.contact-form__status,
.landing-form-note {
	border: 1px solid var(--line);
	border-left-width: 4px;
	border-radius: var(--r-sm);
	margin-bottom: var(--gap);
	padding: var(--gap-sm);
}

.contact-form__status--ok,
.landing-form-note--ok {
	background: #f1f1ef;
	border-left-color: #777770;
}

.contact-form__status--error,
.landing-form-note--error {
	background: #e4e4e1;
	border-color: var(--line-strong);
	border-left-color: var(--text);
	font-weight: 600;
}

/* Fine-grained content panels. */
.service-pricing__panel,
.services-triage__panel,
.finance-brief__panel,
.landing-offer__inner {
	display: grid;
	gap: var(--gap-lg);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-pricing__factors,
.service-overview__who,
.contact-emergency__points,
.location-start__points,
.landing-why__points,
.landing-meet__points {
	background: var(--bg-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--gap);
}

.service-pricing__factor-list,
.contact-emergency__points,
.location-start__points,
.landing-why__points,
.landing-meet__points {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
}

.service-pricing__factor-list li,
.contact-emergency__points li,
.location-start__points li,
.landing-why__points li,
.landing-meet__points li {
	border-bottom: 1px solid var(--line);
	padding-bottom: var(--gap-sm);
}

.service-pricing__factor-list li:last-child,
.contact-emergency__points li:last-child,
.location-start__points li:last-child,
.landing-why__points li:last-child,
.landing-meet__points li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.service-pricing__anchor,
.contact-emergency__phone,
.contact-way__value {
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	font-weight: 700;
}

.contact-form__panel {
	max-width: 760px;
	width: 100%;
}

.contact-way--primary {
	border-color: var(--line-strong);
	box-shadow: var(--shadow-sm);
}

.faq__marker {
	align-items: center;
	background: var(--bg-tint);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	display: inline-flex;
	flex: 0 0 2rem;
	height: 2rem;
	justify-content: center;
}

/* =============================================================
   Dark panels

   Redefining the tokens inside the scope inverts every descendant
   that reads them, rather than restating colours rule by rule.
   ============================================================= */

.cta-banner__panel,
.landing-final__panel,
.site-footer,
.landing-footer {
	--text: var(--text-invert);
	--text-muted: var(--text-muted-invert);
	--line: var(--line-invert);
	--line-strong: var(--line-invert);
	--accent: var(--text-invert);
	--bg: var(--bg-dark);

	background: var(--bg-dark);
	color: var(--text-invert);
}

.cta-banner__panel,
.landing-final__panel {
	border-color: transparent;
	border-radius: var(--r-xl);
}

.cta-banner__heading,
.landing-final__panel h2 {
	color: var(--text-invert);
}

.cta-banner__text {
	color: var(--text-muted-invert);
	margin-inline: auto;
}

/* A dark-on-dark CTA would disappear — flip it. */
.cta-banner__panel .btn--cta,
.landing-final__panel .btn--cta,
.site-footer .btn--cta,
.landing-footer .btn--cta {
	background: var(--text-invert);
	border-color: var(--text-invert);
	color: var(--bg-dark);
}

.cta-banner__panel .btn--cta:hover,
.landing-final__panel .btn--cta:hover,
.site-footer .btn--cta:hover,
.landing-footer .btn--cta:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--bg-dark);
}

.cta-banner__panel .btn--outline,
.landing-final__panel .btn--outline {
	border-color: var(--line-invert);
	color: var(--text-invert);
}

.cta-banner__panel .btn--outline:hover,
.landing-final__panel .btn--outline:hover {
	background: rgba(247, 247, 246, 0.1);
	color: var(--text-invert);
}

.cta-banner__panel .placeholder,
.site-footer .placeholder {
	background: rgba(247, 247, 246, 0.06);
	border-color: var(--line-invert);
	color: var(--text-muted-invert);
}

/* =============================================================
   Footer
   ============================================================= */

.site-footer__heading {
	color: var(--text-invert);
	font-size: 0.8125rem;
	font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.site-footer__menu,
.site-footer__legal-menu,
.site-footer__hours-list {
	color: var(--text-muted-invert);
	font-size: 0.9375rem;
}

.site-footer__menu a:hover,
.site-footer__legal-menu a:hover,
.site-footer__sitemap:hover {
	color: var(--text-invert);
	opacity: 1;
}

.site-footer__social a {
	align-items: center;
	border: 1px solid var(--line-invert);
	border-radius: var(--r-pill);
	display: inline-flex;
	height: 2.25em;
	justify-content: center;
	width: 2.25em;
}

.site-footer__social a:hover {
	background: rgba(247, 247, 246, 0.1);
	opacity: 1;
}

.site-footer__bar-inner {
	border-top-color: var(--line-invert);
	color: var(--text-muted-invert);
	font-size: 0.875rem;
}

/* =============================================================
   Prose

   main.css strips list markers globally, which is right for nav and
   card lists and wrong for article body copy. Restore them only here.
   ============================================================= */

.post-body ul,
.post-body ol,
.page-content__inner ul,
.page-content__inner ol {
	list-style: revert;
	padding-left: 1.5em;
}

.post-body li + li,
.page-content__inner li + li {
	margin-top: 0.35em;
}

.post-body h2,
.post-body h3,
.page-content__inner h2,
.page-content__inner h3 {
	margin-top: 1.6em;
}

.post-body blockquote {
	border-left: 3px solid var(--line-strong);
	color: var(--text-muted);
	font-size: 1.125rem;
	padding-left: var(--gap);
}

.post-body a,
.page-content__inner a {
	text-decoration: underline;
}

.post-meta,
.post-reviewed {
	color: var(--text-muted);
	font-size: 0.875rem;
}

.post-toc {
	background: var(--bg-alt);
	border-color: var(--line);
	border-radius: var(--r-md);
	padding: var(--gap);
}

.post-toc__list {
	font-size: 0.9375rem;
}

.author-box {
	background: var(--bg-alt);
	border-color: var(--line);
	border-radius: var(--r-lg);
}

.title-banner {
	background: var(--bg-alt);
	border-bottom: 1px solid var(--line);
}

.breadcrumbs__list {
	color: var(--text-muted);
	font-size: 0.875rem;
}

/* =============================================================
   Misc surfaces
   ============================================================= */

.hours-table li,
.site-footer__hours-list li {
	border-bottom: 1px solid var(--line);
	padding-block: 0.4em;
}

.contact-way__label {
	color: var(--text-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.contact-way__value {
	font-size: 1.0625rem;
	font-weight: 600;
}

.landing-header {
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 20;
}

.landing-header__brand {
	font-size: 1.125rem;
	font-weight: 700;
	text-decoration: none;
}

.landing-header__phone {
	min-height: 44px;
}

.landing-footer {
	border-top: 1px solid var(--line-invert);
}

.landing-footer a:hover {
	color: var(--text-invert);
}

.landing-callbar {
	background: var(--bg-dark);
	border-top: 1px solid var(--line-invert);
	color: var(--text-invert);
	gap: var(--gap-sm);
	padding: var(--gap-sm) var(--gutter);
}

.landing-callbar .btn {
	flex: 1 1 0;
}

/* =============================================================
   Legal pages

   Privacy / Terms. The narrow measure comes from main.css
   (.container--narrow); this is the quiet, document-like surface
   that goes with it.
   ============================================================= */

.legal-meta {
	padding-block: var(--gap) 0;
}

.legal-meta__updated {
	font-size: 0.875rem;
	color: var(--text-muted);
	letter-spacing: 0.02em;
}

.legal-meta__intro {
	color: var(--text-muted);
	margin-top: var(--gap-sm);
}

.page-content--narrow .page-content__inner {
	font-size: 1rem;
	line-height: 1.75;
}

.page-content--narrow h2 {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	margin-top: var(--gap-lg);
	margin-bottom: var(--gap-sm);
}

.page-content--narrow h3 {
	font-size: 1.125rem;
	font-weight: 600;
	margin-top: var(--gap);
	margin-bottom: var(--gap-sm);
}

.page-content--narrow p,
.page-content--narrow ul,
.page-content--narrow ol {
	margin-bottom: var(--gap-sm);
}

.page-content--narrow ul,
.page-content--narrow ol {
	padding-left: 1.25rem;
	list-style: revert;
}

/* =============================================================
   Landing: Meet the Doc

   Sits between the value prop and the services list. A face is the
   cheapest trust signal on a paid-traffic page, so the portrait
   carries real weight rather than sitting as a thumbnail.
   ============================================================= */

.landing-meet__inner {
	align-items: center;
}

.landing-meet__portrait {
	width: 100%;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-md);
}

.landing-meet__heading {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
}

.landing-meet__name {
	font-weight: 600;
	font-size: 1.125rem;
	margin-top: var(--gap-sm);
}

.landing-meet__role {
	color: var(--text-muted);
	font-size: 0.9375rem;
}

.landing-meet__bio {
	color: var(--text-muted);
	margin-top: var(--gap-sm);
}

.landing-meet__points {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
	margin-top: var(--gap);
}

.landing-meet__points li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.landing-meet__points svg {
	color: var(--accent);
	flex-shrink: 0;
	margin-top: 0.2em;
}

/* =============================================================
   Authority rows: accreditations and trust badges

   Both reuse .credential-row from main.css, so this block is pure
   surface. Grayscale at rest reads as "quiet proof" and keeps a wall
   of mismatched third-party logos from fighting the brand.

   focus-within, not just hover: a linked badge must reveal itself to
   a keyboard user too.
   ============================================================= */

.person-credentials__inner,
.trust-badges__inner {
	align-items: center;
	text-align: center;
}

.person-credentials__title {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.trust-badges__title {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 600;
}

.person-credentials__row,
.trust-badges__row {
	justify-content: center;
	gap: var(--gap-lg);
}

.person-credentials__row img,
.trust-badges__row img {
	max-height: 56px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter 0.3s var(--ease), opacity 0.3s var(--ease);
}

.person-credentials__row li:hover img,
.person-credentials__row li:focus-within img,
.trust-badges__row li:hover img,
.trust-badges__row li:focus-within img {
	filter: none;
	opacity: 1;
}

.credential-row__text {
	font-size: 0.875rem;
	color: var(--text-muted);
}

/* =============================================================
   Other areas we serve

   A link row of sibling offices. .area-links gets its flex shape
   from main.css; the buttons are already skinned as .btn--outline.
   The ghost variant is the placeholder state — dimmed, not hidden.
   ============================================================= */

.location-other-areas__inner {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

.area-links {
	justify-content: flex-start;
}

.area-links__ghost {
	opacity: 0.45;
	cursor: default;
}

/* =============================================================
   404 and search

   Both are recovery pages: centered, generous, and led by the way
   back rather than by the apology.
   ============================================================= */

.error-404__inner {
	align-items: center;
	text-align: center;
	gap: var(--gap);
}

.error-404__code {
	font-size: 0.75rem;
	letter-spacing: 0.24em;
}

.error-404__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 6vw, 3.5rem);
	font-weight: 700;
	line-height: 1.1;
}

.error-404__text {
	font-size: 1.125rem;
	color: var(--text-muted);
	max-width: 46ch;
}

.error-404__search,
.search-results__form {
	width: 100%;
	max-width: 480px;
}

.search-results__actions {
	margin-top: var(--gap);
}

.search-form {
	display: flex;
	gap: var(--gap-sm);
}

.search-form__input {
	flex: 1;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 0.65rem 0.9rem;
	background: var(--bg);
	color: var(--text);
	font: inherit;
}

.search-form__input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* =============================================================
   Scroll reveal

   Transition only. main.css forces .reveal visible and warns never
   to hide content the skin might not un-hide — if main.js fails to
   add .is-visible, the page must still render. So no opacity: 0.
   ============================================================= */

.reveal {
	transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
	transition-delay: var(--reveal-delay, 0s);
}

/* =============================================================
   Responsive

   main.css already collapses primary split layouts and swaps in the
   mobile nav at 900px. The skin follows the same breakpoints so
   surfaces, controls, and type remain stable at every width.
   ============================================================= */

@media (max-width: 900px) {
	.site-header__brand {
		order: 1;
	}

	.site-header__actions {
		margin-left: auto;
		order: 2;
	}

	.site-header__nav {
		border-top: 1px solid var(--line);
		order: 3;
		padding-top: var(--gap-sm);
		width: 100%;
	}

	.site-header__menu a,
	.site-header__menu--placeholder span {
		background: var(--bg-alt);
		border: 1px solid var(--line);
		width: 100%;
	}

	.site-header__menu a:hover {
		background: var(--bg-tint);
		border-color: var(--line-strong);
	}

	.service-pricing__panel,
	.services-triage__panel,
	.finance-brief__panel,
	.landing-offer__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--gap);
	}

	.person-credentials__row,
	.trust-badges__row {
		gap: var(--gap);
	}
}

@media (max-width: 640px) {
	body {
		font-size: 1rem;
	}

	.section__intro {
		font-size: 1.0625rem;
	}

	.hero__subheadline {
		font-size: 1.0625rem;
	}

	.service-tile,
	.service-card,
	.person-card,
	.office-card,
	.post-card,
	.testimonial,
	.ba-case,
	.faq__item {
		border-radius: var(--r-md);
		padding: var(--gap-sm);
	}

	.contact-form__panel,
	.contact-emergency__panel,
	.service-pricing__panel,
	.services-triage__panel,
	.location-start__panel,
	.areas-why__panel,
	.finance-brief__panel,
	.finance__membership,
	.finance__financing,
	.service-candidacy__main,
	.service-candidacy__alt,
	.blog-featured__card,
	.landing-service,
	.landing-review,
	.landing-offer__inner,
	.landing-trust__item,
	.expect__step,
	.service-steps__item,
	.landing-step,
	.step-track__item,
	.benefit-list__item,
	.candidacy-list__item,
	.belief,
	.community-list__item,
	.triage-list__item,
	.directions-list__item,
	.person-education__row,
	.contact-way {
		padding: var(--gap-sm);
	}

	.hero__actions,
	.title-banner__actions,
	.cta-banner__actions,
	.landing-final__actions,
	.location-hero__actions,
	.person-hero__actions,
	.service-overview__actions,
	.error-404__actions {
		align-items: stretch;
		flex-direction: column;
		width: 100%;
	}

	.hero__actions .btn,
	.title-banner__actions .btn,
	.cta-banner__actions .btn,
	.landing-final__actions .btn,
	.location-hero__actions .btn,
	.person-hero__actions .btn,
	.service-overview__actions .btn,
	.error-404__actions .btn {
		width: 100%;
	}

	.search-form {
		flex-direction: column;
	}

	.search-form .btn,
	.search-form__submit {
		width: 100%;
	}

	.author-box {
		align-items: flex-start;
		flex-direction: column;
	}

	.author-box__body {
		min-width: 0;
		width: 100%;
	}

	.author-box__img,
	.author-box > .placeholder {
		aspect-ratio: 1;
		min-height: 96px;
		width: 96px;
	}

	.cta-banner__panel,
	.landing-final__panel {
		border-radius: var(--r-lg);
	}

	.utility-bar {
		font-size: 0.75rem;
	}

	.utility-bar__group {
		gap: 0.45rem var(--gap-sm);
	}

	.utility-bar__item {
		min-height: 32px;
	}
}