/* =============================================================
   Barebone — main.css

   STRUCTURE ONLY. This file answers "what goes next to what" and
   nothing else: no colour, no type scale, no shadow, no motion,
   no decoration.

   Every BEM class the templates emit still resolves here, so a skin
   can restyle the whole site without touching a single PHP file.
   Add the skin as a SECOND stylesheet — do not edit this one. The
   token block below is the surface it overrides. See SKIN.md.
   ============================================================= */

:root {
	/* ---- Layout: the only tokens with real values ---------------- */
	--container: 1200px;
	--container-narrow: 800px; /* Legal/long-form prose. Sane range: 750–900px. */
	--gutter: 24px;
	--section-pad: 64px;
	--gap: 24px;
	--gap-sm: 12px;
	--gap-lg: 48px;

	/* ---- Skin surface: deliberately inert ----------------------- */
	--font: system-ui, sans-serif;
	--font-display: var(--font);
	--font-serif: var(--font);

	--bg: transparent;
	--bg-alt: transparent;
	--bg-dark: transparent;
	--bg-tint: transparent;
	--text: inherit;
	--text-muted: inherit;
	--accent: inherit;
	--accent-contrast: inherit;
	--cta-bg: transparent;
	--cta-text: inherit;

	--line: currentColor;
	--radius: 0;
	--r-sm: var(--radius);
	--r-md: var(--radius);
	--r-lg: var(--radius);
	--r-xl: var(--radius);
	--r-pill: var(--radius);

	--shadow: none;
	--shadow-sm: none;
	--shadow-md: none;
	--shadow-lift: none;

	--ease: linear;
}

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

body {
	margin: 0;
	font-family: var(--font);
}

img,
svg,
iframe {
	max-width: 100%;
	display: block;
}

img {
	height: auto;
}

/* =============================================================
   Media composition contract

   Content photography keeps its intrinsic ratio. Only explicit portrait
   and comparison roles receive a frame, so CMS uploads are never stretched
   or accidentally cropped by a generic card rule.
   ============================================================= */

.hero__img,
.service-tile__img,
.service-overview__img,
.why-us__img,
.location-hero__img,
.tour-grid__img,
.about-story__img,
.about-community__img,
.person-outside__img {
	display: block;
	width: 100%;
	height: auto;
}

.person__portrait,
.person-card__media,
.person-hero__media {
	aspect-ratio: 1;
	overflow: hidden;
}

.person__portrait img,
.person-card__media img,
.person-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ba-case__img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	height: auto;
	object-fit: contain;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid;
	outline-offset: 2px;
}

/* =============================================================
   Layout primitives
   ============================================================= */

/*
 * Visually hidden, still announced. Structure, not skin — core emits this
 * class itself (the_posts_pagination() wraps its heading in one, and
 * get_search_form() labels its input with one), so without this rule those
 * strings render as stray visible text.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Long-form prose. Full-width text lines are unreadable past ~90 characters. */
.container--narrow {
	max-width: var(--container-narrow);
}

.section {
	padding-block: var(--section-pad);
}

.section__head {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: var(--gap-lg);
}

.section__head > * + * {
	margin-top: var(--gap-sm);
}

.section__title + .section__intro {
	margin-top: 20px;
}

.site-main {
	display: block;
}

/* Generic BEM shapes. One rule each instead of 400 near-identical
   ones — a skeleton only has to establish the flow. */
[class$="__inner"] {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

[class$="__grid"],
[class$="__cards"],
[class$="__list"] {
	display: grid;
	gap: var(--gap);
}

[class$="__actions"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
	align-items: center;
}

[class$="__media"],
[class$="__figure"] {
	display: block;
}

[class$="__body"] {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
}

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

.placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 120px;
	/* Capped: at full container width a bare 3/2 box runs ~800px tall and
	   pushes the rest of the page out of sight. */
	max-height: 360px;
	aspect-ratio: 3 / 2;
	border: 1px dashed;
	padding: var(--gap-sm);
	text-align: center;
}

.placeholder__label {
	display: block;
}

/* =============================================================
   Buttons, chips, icon affordances
   ============================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.65em 1.2em;
	border: 1px solid;
	text-decoration: none;
	cursor: pointer;
}

.arrow-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border: 1px solid;
	flex: none;
}

.eyebrow,
.accent-word,
.kinetic-word {
	display: inline;
}

.link-sweep {
	text-decoration: underline;
}

.ring-ornament {
	display: none; /* Decorative only — a skin re-enables it. */
}

/* =============================================================
   Header + utility bar
   ============================================================= */

.utility-bar__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--gap-sm);
	padding-block: var(--gap-sm);
}

.utility-bar__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gap);
}

.utility-bar__item,
.utility-bar__social {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	text-decoration: none;
}

.site-header__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	padding-block: var(--gap-sm);
}

.site-header__brand {
	text-decoration: none;
	flex: none;
}

.site-header__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}

.site-header__menu a {
	text-decoration: none;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--gap-sm);
}

.site-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 40px;
	height: 40px;
	padding: 8px;
	background: none;
	border: 1px solid;
}

.site-header__toggle-bar {
	display: block;
	height: 2px;
	background: currentColor;
}

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

.hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap-lg);
	align-items: center;
}

.hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	align-items: flex-start;
}

.hero__media {
	position: relative;
}

.hero__card {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: var(--gap-sm);
	border: 1px solid;
}

.hero__orbit {
	display: none; /* Decorative badge — a skin re-enables it. */
}

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

.trust-bar__marquee {
	overflow: hidden;
}

.trust-bar__track {
	display: flex;
	align-items: center;
	gap: var(--gap);
	padding-block: var(--gap-sm);
}

.trust-bar__track:nth-child(2) {
	display: none; /* The duplicate only earns its keep once a skin loops it. */
}

.trust-bar__item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	white-space: nowrap;
}

.trust-bar__dot {
	width: 4px;
	height: 4px;
	border: 1px solid;
	flex: none;
}

/* =============================================================
   Card grids — the repeated shape across services, team, offices,
   posts and locations.
   ============================================================= */

.services__grid,
.service-cards,
.person-cards,
.office-cards,
.post-cards,
.service-tiles,
.testimonials__grid,
.ba__grid,
.tour-grid,
.blog-grid,
.related-posts__grid,
.meet-lead__list,
.service-group__grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.service-tile,
.service-card,
.person-card,
.office-card,
.post-card,
.testimonial,
.ba-case {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
	border: 1px solid;
	padding: var(--gap);
	text-decoration: none;
}

.service-tile__overlay {
	display: none;
}

/* Two-up before/after pair inside a case card. */
.ba-case__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap-sm);
}

/* =============================================================
   Split panels — content beside media
   ============================================================= */

.why-us__inner,
.meet-lead__inner,
.about-story__inner,
.about-tour__inner,
.service-overview__inner,
.person-hero__inner,
.location-hero__inner,
.finance__inner,
.finance-brief__inner,
.contact-map__inner,
.location-map__inner,
.landing-why__inner,
.landing-meet__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap-lg);
	align-items: start;
}

.why-us__content,
.meet-lead__content,
.landing-why__content {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	align-items: flex-start;
}

/* =============================================================
   Numbered / ordered lists
   ============================================================= */

.expect__steps,
.service-steps__list,
.landing-steps__list,
.step-track {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--gap);
}

.expect__step,
.service-steps__item,
.landing-step {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
}

/* =============================================================
   Simple stacked lists
   ============================================================= */

.belief-list,
.benefit-list,
.candidacy-list,
.community-list,
.triage-list,
.directions-list,
.hours-table,
.contact-ways,
.faq__list,
.post-toc__list {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
}

.breadcrumbs__list,
.credential-row,
.area-links,
.staff-row,
.blog-filter__list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--gap-sm);
	align-items: center;
}

.hours-table li,
.site-footer__hours-list li {
	display: flex;
	justify-content: space-between;
	gap: var(--gap);
}

/* =============================================================
   FAQ (details/summary accordion)
   ============================================================= */

.faq__item {
	border: 1px solid;
	padding: var(--gap-sm);
}

.faq__question {
	display: flex;
	justify-content: space-between;
	gap: var(--gap-sm);
	cursor: pointer;
}

.faq__answer {
	padding-top: var(--gap-sm);
}

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

.lead-form,
.contact-form__form,
.landing-form {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
}

.lead-form__field,
.landing-form__field,
.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.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 {
	width: 100%;
	padding: 0.6em;
	border: 1px solid;
	background: none;
}

/* Honeypot: must stay unreachable, not merely invisible. */
.lead-form__hp,
.landing-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =============================================================
   CTA banner + title banner
   ============================================================= */

.cta-banner__panel,
.landing-final__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap);
	text-align: center;
	padding: var(--gap-lg) var(--gutter);
	border: 1px solid;
}

.title-banner {
	padding-block: var(--section-pad);
}

.title-banner__inner {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
	align-items: flex-start;
}

/* =============================================================
   Blog
   ============================================================= */

.blog-featured__inner,
.post-single__inner {
	display: grid;
	gap: var(--gap-lg);
}

.post-single__inner {
	grid-template-columns: minmax(0, 1fr);
	max-width: 72ch;
}

/* The prose sits one level down, inside .post-body__prose — spacing only the
   direct children of .post-body would leave every paragraph flush against
   the last. */
.post-body > * + *,
.post-body__prose > * + * {
	margin-top: 1em;
}

.post-meta,
.post-reviewed {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
}

.post-toc {
	border: 1px solid;
	padding: var(--gap-sm);
	margin-bottom: var(--gap);
}

.author-box {
	display: flex;
	gap: var(--gap);
	border: 1px solid;
	padding: var(--gap);
	margin-top: var(--gap-lg);
}

.page-content__inner > * + * {
	margin-top: 1em;
}

/* =============================================================
   Landing template (no site nav, single conversion goal)
   ============================================================= */

.landing-header__inner,
.landing-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-sm);
	padding-block: var(--gap-sm);
}

.landing-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap-lg);
	align-items: start;
}

.landing-form-card {
	border: 1px solid;
	padding: var(--gap);
}

.landing-offer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gap);
}

.landing-services__grid,
.landing-reviews__grid,
.landing-trust__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--gap);
}

/* Sticky mobile call bar: hidden on desktop, pinned on small screens. */
.landing-callbar {
	display: none;
	position: fixed;
	inset: auto 0 0 0;
	z-index: 10;
}

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

.site-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--gap-lg);
	padding-block: var(--section-pad);
}

.site-footer__brand,
.site-footer__links,
.site-footer__services,
.site-footer__connect {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
}

.site-footer__menu,
.site-footer__legal-menu {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.site-footer__menu a,
.site-footer__legal-menu a,
.site-footer__sitemap {
	text-decoration: none;
}

.site-footer__social,
.socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-sm);
}

.site-footer__ghost {
	display: none; /* Oversized decorative wordmark — skin territory. */
}

.site-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--gap-sm);
	padding-block: var(--gap);
	border-top: 1px solid;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}

.site-footer__legal-menu {
	flex-direction: row;
	gap: var(--gap);
}

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

   The class hooks stay so main.js keeps working and a skin can
   attach a transition. Unstyled, elements are simply always
   visible — never hide content the skin might not un-hide.
   ============================================================= */

.reveal,
.reveal.is-visible {
	opacity: 1;
	transform: none;
}

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

@media (max-width: 900px) {
	:root {
		--section-pad: 48px;
		--gap-lg: 32px;
	}

	.hero__inner,
	.landing-hero__inner,
	.why-us__inner,
	.meet-lead__inner,
	.about-story__inner,
	.about-tour__inner,
	.service-overview__inner,
	.person-hero__inner,
	.location-hero__inner,
	.finance__inner,
	.finance-brief__inner,
	.contact-map__inner,
	.location-map__inner,
	.landing-why__inner,
	.landing-meet__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The full nav stops fitting a long way above the phone breakpoint — at
	   768px it wraps onto two lines and shoves the CTA below the call button.
	   Swap in the toggle here, and drop the long "Call <number>" control. The
	   primary CTA survives to 640px, so a tablet still shows brand + CTA. */
	.site-header__inner {
		flex-wrap: wrap;
	}

	.site-header__nav {
		display: none;
		flex-basis: 100%;
	}

	.site-header.is-nav-open .site-header__nav {
		display: block;
	}

	.site-header__menu {
		flex-direction: column;
		gap: var(--gap-sm);
	}

	.site-header__toggle {
		display: flex;
	}

	.site-header__call {
		display: none;
	}
}

@media (max-width: 640px) {
	:root {
		--gutter: 16px;
		--section-pad: 40px;
	}

	/* The nav already collapsed at 900px; below 640 the CTA goes too, leaving
	   brand + toggle. The sticky call bar takes over as the phone affordance. */
	.site-header__book {
		display: none;
	}

	.landing-callbar {
		display: flex;
	}

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

	.utility-bar__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* =============================================================
   Outline mode — add class="barebone-outline" to <body> (or toggle
   it in devtools) to see every section and card boundary while
   wiring up content.
   ============================================================= */

.barebone-outline .section,
.barebone-outline [class*="__grid"],
.barebone-outline [class*="__inner"],
.barebone-outline .placeholder {
	outline: 1px solid rgba(128, 128, 128, 0.4);
	outline-offset: -1px;
}