/* =========================================================================
   Chicagoland Tuckpointing
   One stylesheet, no framework, no build step.

   Direction: refined industrial. Architectural rather than friendly — square
   geometry, hairline rules doing the structural work instead of boxes and
   shadows, a squared grotesque for type, and a single restrained oxide accent.

   Every text colour here is checked against WCAG AA by tools/contrast-check.php.
   Change a value in the token block and re-run it.
   ========================================================================= */

/* --- 1. Typeface -------------------------------------------------------- */

/* Archivo, self-hosted. One variable file covers 400-700, so using it for body
   text as well as headings costs nothing extra. SIL Open Font License; see
   assets/fonts/OFL.txt. */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/archivo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* --- 2. Tokens ---------------------------------------------------------- */

:root {
	/* Ink and surfaces. Neutral-warm graphite rather than blue-grey: reads as
	   stone and steel instead of software. */
	--ink: #14181a;
	--ink-2: #2f3539;
	--muted: #575f65;
	--muted-2: #656d73;
	--line: #e2e2de;
	--line-2: #d3d3ce;
	--field: #7e837d;
	--bg: #ffffff;
	--bg-2: #f4f4f2;
	--bg-3: #e8e8e4;

	/* Oxide clay, taken from weathered common brick. Deeper and less orange
	   than a stock "brick red", which keeps it from looking like a warning. */
	--brand: #9e3a20;
	--brand-600: #86301a;
	--brand-700: #6e2714;
	--brand-light: #c85f3e;
	--brand-tint: #faf0ec;
	--brand-line: #edd6ce;

	/* Dark sections */
	--dark: #16191b;
	--dark-2: #1f2427;
	--dark-3: #2d3439;

	/* Focus. Overridden on dark surfaces further down so the ring stays
	   visible against them. */
	--focus: var(--brand);

	--logo-accent: var(--brand);

	/* Type */
	--font: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
		Roboto, 'Helvetica Neue', Arial, sans-serif;
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-lg: 1.0625rem;
	--fs-xl: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--fs-h3: clamp(1.0625rem, 1rem + 0.38vw, 1.25rem);
	--fs-h2: clamp(1.5rem, 1.2rem + 1.35vw, 2.375rem);
	--fs-h1: clamp(1.875rem, 1.3rem + 2.6vw, 3.375rem);

	/* Space */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;

	/* Shape. Deliberately tight: square corners read architectural, and a
	   10px radius on everything is the single fastest way to look generic. */
	--r-sm: 2px;
	--r: 3px;
	--r-lg: 4px;
	--sh-1: 0 1px 2px rgba(20, 24, 26, 0.05);
	--sh-2: 0 12px 28px -14px rgba(20, 24, 26, 0.3);

	/* Layout */
	--container: 1200px;
	--prose: 42rem;
	--header-h: 76px;

	/* Running-bond brick pattern. Light lines for dark grounds. */
	--brick-light: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cg stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1' fill='none'%3E%3Cpath d='M0 0.5H140M0 35.5H140'/%3E%3Cpath d='M35 0V35M105 0V35M70 35V70M0 35V70M140 35V70'/%3E%3C/g%3E%3C/svg%3E");

	/* Dark lines for light grounds. */
	--brick-dark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='42'%3E%3Cg stroke='%2314181a' stroke-opacity='0.08' stroke-width='1' fill='none'%3E%3Cpath d='M0 0.5H84M0 21.5H84'/%3E%3Cpath d='M21 0V21M63 0V21M42 21V42M0 21V42M84 21V42'/%3E%3C/g%3E%3C/svg%3E");
}

/* Fallback to the system stack when the webfont is switched off via the
   ctp_use_webfont filter. Nothing references Archivo, so it is never fetched. */
body.no-webfont {
	--font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;
}

/* --- 3. Base ------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink-2);
	font-family: var(--font);
	font-size: var(--fs-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sp-4);
	color: var(--ink);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.024em;
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.034em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.028em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.018em; }
h4 { font-size: var(--fs-lg); letter-spacing: -0.014em; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
	color: var(--brand-600);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

a:hover { color: var(--brand-700); }

img, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; }
li { margin-bottom: 0.35em; }

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: var(--sp-7) 0;
}

blockquote {
	margin: var(--sp-6) 0;
	padding: var(--sp-5) var(--sp-6);
	background: var(--bg-2);
	border-left: 2px solid var(--brand);
	font-size: var(--fs-lg);
	color: var(--ink);
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

/* One focus treatment everywhere, and it is never removed. --focus is
   redefined on dark surfaces so the ring keeps its 3:1 contrast. */
:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-radius: 1px;
}

::selection { background: var(--brand); color: #fff; }

.icon { flex: none; display: block; }

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 0.85rem 1.35rem;
	background: var(--ink);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus { left: 0; color: #fff; }

/* --- 4. Layout ---------------------------------------------------------- */

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

@media (min-width: 720px) {
	.container { padding-inline: 32px; }
}

.container--narrow { max-width: 58rem; }

.section { padding-block: clamp(3.25rem, 1.8rem + 5vw, 6rem); }
.section--tight { padding-block: clamp(2.25rem, 1.4rem + 3vw, 3.5rem); }
.section--alt { background: var(--bg-2); }
.section--line { border-top: 1px solid var(--line); }

.section__head {
	max-width: 44rem;
	margin-bottom: var(--sp-7);
}

.section__head--center { margin-inline: auto; text-align: center; }

/* Eyebrow: a short clay rule then tracked caps. The rule is the structural
   tell that ties the sections together. */
.section__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: var(--sp-4);
	color: var(--brand-600);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.section__eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--brand);
	flex: none;
}

.section__head--center .section__eyebrow { justify-content: center; }

.section__title { margin-bottom: var(--sp-4); }

.section__text {
	max-width: 42rem;
	color: var(--muted);
	font-size: var(--fs-xl);
	line-height: 1.6;
	margin-bottom: 0;
}

.section__head--center .section__text { margin-inline: auto; }

.stack > * + * { margin-top: var(--sp-5); }

/* --- 5. Buttons --------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.7rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	background: none;
	font: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.002em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.btn--primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.btn--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--dark-2); border-color: var(--dark-2); color: #fff; }

.btn--ghost {
	border-color: var(--line-2);
	color: var(--ink);
	background: var(--bg);
}

.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn--ghost-light {
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.btn--ghost-light:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
}

.btn--lg { min-height: 52px; padding: 0.95rem 1.85rem; font-size: var(--fs-base); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --- 6. Logo ------------------------------------------------------------ */

.logo {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-right: auto;
	color: var(--ink);
	text-decoration: none;
	line-height: 1;
}

.logo:hover { color: var(--ink); }
.logo:hover .logo__mark { color: var(--brand); }

.logo__mark {
	flex: none;
	color: var(--ink);
	transition: color 0.2s ease;
}

.logo__word { display: flex; flex-direction: column; gap: 0.18rem; }

.logo__over {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted-2);
}

.logo__main {
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: inherit;
}

.logo--custom img { max-height: 48px; width: auto; }

.logo--footer { color: #fff; margin-right: 0; }
.logo--footer .logo__mark { color: #fff; }
.logo--footer .logo__over { color: rgba(255, 255, 255, 0.6); }
.logo--footer:hover { color: #fff; }
.logo--footer:hover .logo__mark { color: var(--brand-light); }

@media (max-width: 420px) {
	.logo__main { font-size: 1rem; }
	.logo__mark { width: 30px; height: 30px; }
}

/* --- 7. Header and navigation ------------------------------------------- */

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

.header__inner {
	display: flex;
	align-items: stretch;
	gap: var(--sp-5);
	min-height: var(--header-h);
}

.header .logo { align-self: center; }

.nav { display: flex; }

.nav > ul {
	display: flex;
	align-items: stretch;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav li { margin: 0; display: flex; align-items: center; }

.nav > ul > li { position: relative; }

/* Scoped to top-level links only.
 *
 * A bare `.nav a` is specificity (0,1,1), which quietly outranks every
 * single-class rule inside the nav — .btn--primary, .mega__aside-link and so
 * on — and repaints them charcoal. The mega panels live inside .nav and carry
 * their own components, so the nav's own link styling has to stay in its lane. */
.nav > ul > li > a {
	display: flex;
	align-items: center;
	padding-block: 1.6rem;
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: none;
	letter-spacing: 0.002em;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.nav > ul > li > a:hover { color: var(--ink); }

/* Plain submenu links; the media queries below add layout on top. */
.nav .sub-menu a {
	color: var(--ink-2);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.nav .sub-menu a:hover { color: var(--brand-600); }

.nav > ul > .current-menu-item > a,
.nav > ul > .current_page_item > a,
.nav > ul > .current-menu-ancestor > a,
.nav > ul > .current-menu-parent > a {
	color: var(--ink);
	border-bottom-color: var(--brand);
}

/* Disclosure button beside a parent link. */
.nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: 0.1rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted-2);
	cursor: pointer;
	transition: color 0.15s ease;
}

.nav__toggle:hover { color: var(--ink); }
.nav__chevron { transition: transform 0.2s ease; }
.nav__toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Mega panels --------------------------------------------------------- */

.mega__grid,
.mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mega__grid li,
.mega__list li { margin: 0; }

.mega__aside-title {
	margin-bottom: 0.4rem;
	color: var(--ink);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: -0.012em;
}

.mega__aside-text {
	margin-bottom: var(--sp-5);
	color: var(--muted);
	font-size: var(--fs-xs);
	line-height: 1.6;
}

.mega__aside-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--brand-600);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.mega__aside-link:hover { color: var(--brand-700); }

/* Only when the link follows the CTA button — in the Areas panel it sits
   straight after the paragraph, which already has its own spacing. */
.mega__aside .btn + .mega__aside-link { margin-top: var(--sp-4); }

/* --- Desktop navigation -------------------------------------------------- */

@media (min-width: 961px) {
	.nav .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: -16px;
		z-index: 60;
		min-width: 17rem;
		padding: 0.4rem 0;
		background: var(--bg);
		border: 1px solid var(--line);
		border-top: 2px solid var(--brand);
		box-shadow: var(--sh-2);
	}

	.nav > ul > li:hover > .sub-menu,
	.nav .nav__toggle[aria-expanded="true"] + .sub-menu {
		display: block;
	}

	.nav .sub-menu li { display: block; }

	.nav .sub-menu a {
		display: block;
		padding: 0.6rem 1.15rem;
		font-size: var(--fs-sm);
		border-bottom: 0;
		border-left: 2px solid transparent;
	}

	.nav .sub-menu a:hover {
		background: var(--bg-2);
		border-left-color: var(--brand);
		color: var(--ink);
	}

	.nav .sub-menu .current-menu-item > a {
		border-left-color: var(--brand);
		color: var(--ink);
		font-weight: 600;
	}

	/* A mega item drops out of the positioning context so its panel can span
	   the full header width rather than the width of one list item. */
	.nav > ul > li.menu-item--mega { position: static; }

	.mega {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 60;
		/* Never let a panel run past the fold; scroll it instead. */
		max-height: calc(100vh - var(--header-h));
		overflow-y: auto;
		background: var(--bg);
		border-top: 2px solid var(--brand);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--sh-2);
	}

	.nav > ul > li:hover > .mega,
	.nav .nav__toggle[aria-expanded="true"] + .mega { display: block; }

	.mega__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 16rem;
		gap: var(--sp-6);
		padding-block: var(--sp-5);
	}

	/* Services: two columns of icon rows. */
	.mega__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--sp-5);
	}

	.mega__grid a {
		display: flex;
		align-items: flex-start;
		gap: 0.7rem;
		padding: 0.5rem 0.65rem;
		border: 0;
		border-radius: var(--r-sm);
		text-decoration: none;
	}

	.mega__grid a:hover { background: var(--bg-2); }

	.mega__icon {
		display: grid;
		place-items: center;
		flex: none;
		width: 30px;
		height: 30px;
		border-radius: var(--r-sm);
		background: var(--brand-tint);
		border: 1px solid var(--brand-line);
		color: var(--brand);
	}

	.mega__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

	.mega__title {
		color: var(--ink);
		font-size: var(--fs-sm);
		font-weight: 650;
		letter-spacing: -0.01em;
	}

	/* Clamped to two lines. Taglines are author-written and vary in length;
	   without this, one long one sets the row height for the whole grid and
	   the panel grows past the fold. */
	.mega__desc {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: var(--muted);
		font-size: var(--fs-xs);
		line-height: 1.45;
	}

	/* Areas: a plain multi-column list. Column flow keeps alphabetical order
	   reading down each column, and matches the DOM order for keyboard use. */
	.mega__list {
		columns: 4;
		column-gap: var(--sp-6);
	}

	.mega__list li { break-inside: avoid; }

	.mega__list a {
		display: block;
		padding: 0.42rem 0;
		border: 0;
		color: var(--ink-2);
		font-size: var(--fs-sm);
		text-decoration: none;
	}

	.mega__list a:hover { color: var(--brand-600); }

	.mega__aside {
		padding-left: var(--sp-6);
		border-left: 1px solid var(--line);
	}
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--ink);
	cursor: pointer;
}

.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

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

/* --- Mobile navigation --------------------------------------------------- */

@media (max-width: 960px) {
	.nav-toggle { display: inline-flex; }

	.nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		max-height: calc(100vh - var(--header-h));
		overflow-y: auto;
		padding: var(--sp-2) 20px var(--sp-5);
		background: var(--bg);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--sh-2);
	}

	.nav.is-open { display: block; }

	.nav > ul { flex-direction: column; align-items: stretch; gap: 0; }

	.nav > ul > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid var(--line);
	}

	.nav > ul > li > a {
		flex: 1;
		padding-block: 0.95rem;
		min-height: 48px;
		font-size: var(--fs-lg);
		font-weight: 600;
		border-bottom: 0;
	}

	.nav > ul > .current-menu-item > a,
	.nav > ul > .current-menu-ancestor > a { color: var(--brand-600); }

	/* Full-height tap target on the right of the row. */
	.nav__toggle {
		width: 48px;
		height: 48px;
		margin-left: 0;
		border-left: 1px solid var(--line);
		color: var(--ink-2);
	}

	.nav .sub-menu {
		display: none;
		flex-basis: 100%;
		width: 100%;
		padding: 0 0 0.6rem 0.9rem;
		border-left: 2px solid var(--brand-line);
		margin-bottom: 0.6rem;
	}

	.nav .nav__toggle[aria-expanded="true"] + .sub-menu { display: block; }

	.nav .sub-menu li { display: block; }

	.nav .sub-menu a {
		padding-block: 0.6rem;
		min-height: 44px;
		font-size: var(--fs-sm);
		color: var(--muted);
		border-bottom: 0;
	}

	.nav .sub-menu a:hover { color: var(--brand-600); }

	/* Mega panels collapse to the same inline accordion as a plain submenu.
	   No floating panel, no columns, and the aside is dropped — on a phone it
	   is a second CTA competing with the sticky call bar. */
	.mega {
		display: none;
		flex-basis: 100%;
		width: 100%;
		margin-bottom: 0.6rem;
		padding: 0 0 0.6rem 0.9rem;
		border-left: 2px solid var(--brand-line);
	}

	.nav .nav__toggle[aria-expanded="true"] + .mega { display: block; }

	.mega .container { padding-inline: 0; max-width: none; }
	.mega__inner { display: block; }
	.mega__aside { display: none; }
	.mega__grid, .mega__list { display: block; columns: auto; }

	.mega__grid a,
	.mega__list a {
		display: flex;
		align-items: center;
		gap: 0.7rem;
		padding: 0.55rem 0;
		min-height: 44px;
		color: var(--muted);
		font-size: var(--fs-sm);
		text-decoration: none;
	}

	.mega__grid a:hover,
	.mega__list a:hover { color: var(--brand-600); }

	.mega__icon {
		display: grid;
		place-items: center;
		flex: none;
		width: 28px;
		height: 28px;
		border-radius: var(--r-sm);
		background: var(--brand-tint);
		border: 1px solid var(--brand-line);
		color: var(--brand);
	}

	.mega__title { color: var(--ink-2); font-weight: 550; }

	/* The one-line tagline is useful on a wide panel, noise in a phone list. */
	.mega__desc { display: none; }
}

@media (max-width: 520px) {
	.header__actions .btn--primary { display: none; }
}

/* --- 8. Hero ------------------------------------------------------------ */

.hero {
	position: relative;
	isolation: isolate;
	background: var(--dark);
	color: rgba(255, 255, 255, 0.8);
	overflow: hidden;
	--focus: var(--brand-light);
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--brick-light);
	z-index: -2;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(75rem 38rem at 6% -18%, rgba(158, 58, 32, 0.3), transparent 62%),
		linear-gradient(180deg, rgba(22, 25, 27, 0.15), rgba(22, 25, 27, 0.88));
	z-index: -1;
}

.hero--image::after {
	background: linear-gradient(100deg, rgba(20, 24, 26, 0.95) 0%, rgba(20, 24, 26, 0.8) 46%, rgba(20, 24, 26, 0.45) 100%);
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__inner {
	padding-block: clamp(3.5rem, 2rem + 6.5vw, 7.5rem);
	max-width: 48rem;
}

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: var(--sp-5);
	color: rgba(255, 255, 255, 0.88);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hero__eyebrow::before {
	content: "";
	width: 32px;
	height: 2px;
	background: var(--brand-light);
	flex: none;
}

.hero h1 { color: #fff; margin-bottom: var(--sp-5); }

.hero__text {
	max-width: 36rem;
	margin-bottom: var(--sp-6);
	font-size: var(--fs-xl);
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.8);
}

.hero .btn-row { margin-bottom: var(--sp-7); }

/* Compact hero for interior pages */
.page-hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.25rem, 1.4rem + 3.2vw, 4rem);
	background: var(--dark);
	color: rgba(255, 255, 255, 0.78);
	overflow: hidden;
	--focus: var(--brand-light);
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--brick-light);
	z-index: -2;
}

.page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(56rem 26rem at 4% -40%, rgba(158, 58, 32, 0.26), transparent 66%);
	z-index: -1;
}

.page-hero h1 { color: #fff; margin-bottom: var(--sp-3); max-width: 24ch; }

.page-hero__text {
	max-width: 42rem;
	font-size: var(--fs-xl);
	color: rgba(255, 255, 255, 0.78);
	margin-bottom: 0;
}

.page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-6);
	margin: var(--sp-5) 0 0;
	padding: var(--sp-4) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	list-style: none;
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, 0.8);
}

/* flex-start, not center: these wrap to two lines on a phone, and a centred
   icon then floats against the middle of the block instead of its first line. */
.page-hero__meta li {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
}

.page-hero__meta .icon { color: var(--brand-light); margin-top: 0.2em; }

/* --- 9. Breadcrumbs ----------------------------------------------------- */

.breadcrumbs { font-size: var(--fs-xs); font-weight: 500; }

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0 0 var(--sp-5);
	padding: 0;
	list-style: none;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: 0.45rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--muted-2); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumbs span { color: var(--ink); }

.breadcrumbs--light a { color: rgba(255, 255, 255, 0.74); }
.breadcrumbs--light a:hover { color: #fff; }
.breadcrumbs--light span { color: #fff; }
.breadcrumbs--light li + li::before { color: rgba(255, 255, 255, 0.45); }

/* --- 10. Trust bar ------------------------------------------------------ */

.trust-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-6);
	margin: 0;
	padding: var(--sp-5) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	list-style: none;
}

.trust-bar li {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.82);
}

.trust-bar .icon { color: var(--brand-light); margin-top: 0.18em; }

/* --- 11. Cards ---------------------------------------------------------- */

.card-grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.card-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.card-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

.card {
	display: flex;
	flex-direction: column;
	position: relative;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r);
	/* Clips the card image and the hover rule to the corner radius. */
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

/* A clay rule that draws itself across the top on hover. Cheaper visually
   than a shadow, and it stays in the same architectural language. Positioned
   inside the padding box, since overflow:hidden would clip anything set to a
   negative inset. */
.card::after {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 0;
	height: 2px;
	background: var(--brand);
	transition: width 0.25s ease;
}

a.card:hover {
	border-color: var(--line-2);
	transform: translateY(-2px);
	color: inherit;
}

a.card:hover::after { width: 100%; }

.card__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--sp-4);
	border-radius: var(--r-sm);
	background: var(--brand-tint);
	border: 1px solid var(--brand-line);
	color: var(--brand);
}

.card__icon--sm { width: 36px; height: 36px; }

.card__title { margin-bottom: 0.4rem; font-size: var(--fs-h3); }

.card__text {
	margin-bottom: 0;
	color: var(--muted);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.card__meta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.45rem;
	color: var(--muted-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.card__meta .icon { color: var(--muted-2); }

.card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: var(--sp-4);
	color: var(--brand-600);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.card__more .icon { transition: transform 0.18s ease; }
a.card:hover .card__more .icon { transform: translateX(4px); }

.card--service,
.card--area { padding: var(--sp-5); }
.card--service .card__more { margin-top: auto; padding-top: var(--sp-4); }

.card--project .card__body,
.card--post .card__body {
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.card--post .card__more { margin-top: auto; padding-top: var(--sp-4); }
.card--project .card__media { border-bottom: 1px solid var(--line); }

/* --- 12. Media and placeholders ---------------------------------------- */

.media { position: relative; overflow: hidden; background: var(--bg-3); }
.media img { width: 100%; height: 100%; object-fit: cover; }

.media--placeholder {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.6rem;
	aspect-ratio: 4 / 3;
	background-color: var(--bg-3);
	background-image: var(--brick-dark);
	color: var(--muted);
	text-align: center;
	padding: var(--sp-4);
}

.media__mark {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--line-2);
	color: var(--muted);
}

.media__label {
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.card__media { aspect-ratio: 4 / 3; }
.media--wide, .media--wide.media--placeholder { aspect-ratio: 16 / 9; }
.media--rounded { border-radius: var(--r); }

/* --- 13. Checklist, steps, FAQ ----------------------------------------- */

.checklist {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.checklist--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 0.75rem var(--sp-6);
}

.checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.checklist .icon {
	margin-top: 0.18rem;
	color: var(--brand);
	stroke-width: 2.6;
}

.steps {
	display: grid;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.steps--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-6); }

.steps__item { display: flex; gap: var(--sp-4); margin: 0; }

.steps--row .steps__item {
	flex-direction: column;
	gap: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 2px solid var(--ink);
}

/* Square, outlined, monospaced-feeling. Circles read friendly; this reads
   like a drawing callout. */
.steps__num {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border: 1.5px solid var(--ink);
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--ink);
	font-size: var(--fs-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.steps--row .steps__num { margin-bottom: -0.25rem; }

.steps__title { margin-bottom: 0.35rem; font-size: var(--fs-lg); }
.steps__text { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

.faqs { display: grid; gap: 0; }

.faq { border-bottom: 1px solid var(--line); }
.faq:first-of-type { border-top: 1px solid var(--line); }

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4) 0;
	min-height: 48px;
	color: var(--ink);
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--brand-600); }

.faq__chevron { flex: none; color: var(--muted-2); transition: transform 0.2s ease; }
.faq[open] .faq__chevron { transform: rotate(180deg); }

.faq__a { padding: 0 0 var(--sp-5); max-width: var(--prose); color: var(--muted); }

/* --- 14. CTA band ------------------------------------------------------- */

.cta-band {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3rem, 1.8rem + 4vw, 4.75rem);
	background: var(--dark);
	color: rgba(255, 255, 255, 0.78);
	overflow: hidden;
	--focus: var(--brand-light);
}

.cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--brick-light);
	z-index: -2;
}

.cta-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(52rem 24rem at 88% 125%, rgba(158, 58, 32, 0.32), transparent 64%);
	z-index: -1;
}

.cta-band__inner { max-width: 42rem; }
.cta-band__title { color: #fff; margin-bottom: var(--sp-4); }

.cta-band__text {
	margin-bottom: var(--sp-6);
	font-size: var(--fs-lg);
	color: rgba(255, 255, 255, 0.78);
}

.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.cta-band--inline {
	margin-block: var(--sp-7);
	padding: var(--sp-6);
	border-radius: var(--r);
}

/* --- 15. Prose (editor content) ---------------------------------------- */

.prose {
	max-width: var(--prose);
	font-size: var(--fs-lg);
	line-height: 1.7;
}

/* Rhythm is a reset plus an owl, never per-element margins.
 *
 * The obvious version of this — `.prose p { margin: 0 }` alongside
 * `.prose > * + * { margin-top: ... }` — silently flattens the whole article,
 * because `.prose p` (0,1,1) outranks `.prose > * + *` (0,1,0) and wins the
 * top margin too. Zero the margins once on the children, then let the owl and
 * the heading rules layer on top in specificity order. */
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: var(--sp-5); }

/* Headings belong to what follows them: roughly 3x the air above as below. */
.prose > h2 { margin-top: var(--sp-7); }
.prose > h3 { margin-top: var(--sp-6); }
.prose > :is( h2, h3, h4 ) + * { margin-top: var(--sp-4); }

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: 0.5em; }
.prose li:last-child { margin-bottom: 0; }
.prose li > ul, .prose li > ol { margin-top: 0.5em; }
.prose li::marker { color: var(--brand); }
.prose strong { color: var(--ink); font-weight: 650; }
.prose img { border-radius: var(--r); }
.prose a { font-weight: 500; }

.prose--wide { max-width: 50rem; }

.prose figure { margin: 0; }

.prose figcaption {
	margin-top: 0.65rem;
	color: var(--muted-2);
	font-size: var(--fs-sm);
	text-align: center;
}

.wp-block-table { overflow-x: auto; }

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--line);
	text-align: left;
}

.wp-block-table th { background: var(--bg-2); color: var(--ink); font-weight: 650; }

/* --- 16. Two-column layout ---------------------------------------------- */

.layout {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 980px) {
	.layout--sidebar { grid-template-columns: minmax(0, 1fr) 19.5rem; }
	.layout--sidebar-left { grid-template-columns: 19.5rem minmax(0, 1fr); }
}

.sidebar { display: grid; gap: var(--sp-4); align-content: start; }

@media (min-width: 980px) {
	.sidebar--sticky { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
}

.panel {
	padding: var(--sp-5);
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: var(--r);
}

.panel--brand { background: var(--brand-tint); border-color: var(--brand-line); }

.panel--dark {
	background: var(--dark-2);
	border-color: var(--dark-3);
	color: rgba(255, 255, 255, 0.76);
	--focus: var(--brand-light);
}

.panel--dark .panel__title { color: #fff; }
.panel--dark a { color: #fff; }
.panel--dark .panel__text { color: rgba(255, 255, 255, 0.76); }

.panel__title {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-lg);
	font-weight: 700;
	letter-spacing: -0.016em;
}

.panel__text { font-size: var(--fs-sm); color: var(--muted); }

.link-list { margin: 0; padding: 0; list-style: none; }
.link-list li { margin: 0; border-bottom: 1px solid var(--line); }
.link-list li:last-child { border-bottom: 0; }

.link-list a {
	display: block;
	padding: 0.65rem 0;
	min-height: 44px;
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: none;
}

.link-list a:hover { color: var(--brand-600); }
.link-list .is-current a { color: var(--brand-600); font-weight: 650; }

/* --- 17. Service area columns ------------------------------------------- */

.area-columns {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.area-columns__heading {
	margin-bottom: var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: 2px solid var(--ink);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink);
}

.area-columns__list { margin: 0; padding: 0; list-style: none; }

.area-columns__list li {
	margin-bottom: 0.35rem;
	font-size: var(--fs-sm);
	color: var(--muted);
}

.area-columns__list a { color: var(--ink-2); text-decoration: none; }
.area-columns__list a:hover { color: var(--brand-600); text-decoration: underline; }

.pill-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }

.pill {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.42rem 0.8rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--ink-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
}

a.pill:hover { border-color: var(--brand); color: var(--brand-600); }

/* --- 18. Projects and before/after -------------------------------------- */

.ba {
	position: relative;
	margin: 0;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--bg-3);
	user-select: none;
	touch-action: pan-y;
}

.ba__pane { display: block; width: 100%; }
.ba__pane img { width: 100%; display: block; }

.ba__after {
	position: absolute;
	inset: 0;
	width: 50%;
	overflow: hidden;
	border-right: 2px solid #fff;
}

.ba__after img {
	position: absolute;
	inset: 0;
	width: auto;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ba__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 48px;
	margin-left: -24px;
	display: grid;
	place-items: center;
	cursor: ew-resize;
	background: none;
	border: 0;
	padding: 0;
}

.ba__grip {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--r-sm);
	background: #fff;
	box-shadow: var(--sh-2);
	color: var(--ink);
	font-size: 0.8rem;
	font-weight: 700;
}

.ba__label {
	position: absolute;
	bottom: 0.8rem;
	padding: 0.28rem 0.65rem;
	border-radius: var(--r-sm);
	background: rgba(20, 24, 26, 0.82);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	pointer-events: none;
}

.ba__label--before { left: 0.8rem; }
.ba__label--after { right: 0.8rem; }

.spec-list { display: grid; gap: 0; margin: 0; padding: 0; }

.spec-list > div {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-sm);
}

.spec-list > div:last-child { border-bottom: 0; }
.spec-list dt { color: var(--muted); margin: 0; }
.spec-list dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }

.quote-block {
	display: grid;
	gap: var(--sp-4);
	padding: var(--sp-6);
	background: var(--bg-2);
	border-left: 2px solid var(--brand);
	border-radius: 0 var(--r) var(--r) 0;
}

.quote-block .icon { color: var(--brand); opacity: 0.55; }

.quote-block blockquote {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-size: var(--fs-xl);
	line-height: 1.55;
	color: var(--ink);
}

.quote-block cite {
	color: var(--muted);
	font-size: var(--fs-sm);
	font-style: normal;
	font-weight: 600;
}

/* --- 19. Article list --------------------------------------------------- */

.post-list { display: grid; gap: 0; }

.post-list__item {
	display: grid;
	gap: var(--sp-2);
	padding: var(--sp-5) 0;
	border-bottom: 1px solid var(--line);
}

.post-list__item:first-child { border-top: 1px solid var(--line); }

.post-list__title { margin: 0; font-size: var(--fs-h3); }
.post-list__title a { color: var(--ink); text-decoration: none; }
.post-list__title a:hover { color: var(--brand-600); }
.post-list__excerpt { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-4);
	color: var(--muted-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.post-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }

/* --- 20. Pagination ----------------------------------------------------- */

.pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--sp-7); }

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.7rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
	color: var(--ink-2);
	font-size: var(--fs-sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.pagination .page-numbers:hover { border-color: var(--ink); color: var(--ink); }

.pagination .page-numbers.current {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
}

/* --- 21. Forms ---------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
select,
textarea {
	width: 100%;
	min-height: 46px;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--field);
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--ink);
	font: inherit;
	font-size: var(--fs-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(158, 58, 32, 0.16);
}

label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ink);
}

.form-fallback {
	padding: var(--sp-5);
	border: 1px dashed var(--field);
	border-radius: var(--r);
	background: var(--bg-2);
	font-size: var(--fs-sm);
	color: var(--muted);
}

.form-fallback__title { color: var(--ink); font-weight: 650; }

/* The contact page's headline phone number. */
.phone-display {
	display: inline-block;
	color: var(--ink);
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
	font-weight: 700;
	letter-spacing: -0.028em;
	text-decoration: none;
}

.phone-display:hover { color: var(--brand-600); }

.search-form { display: flex; gap: 0.5rem; }
.search-form label { flex: 1; margin: 0; }

/* --- Fluent Forms ------------------------------------------------------- */

/* The plugin ships its own typeface stack, a #dadbdd input border and a blue
 * accent. The border is the one that actually matters: at 1.3:1 against white
 * it fails WCAG 1.4.11 for a UI component boundary, so it is replaced with the
 * same --field token the theme's own inputs use (3.87:1).
 *
 * !important is load-order, not preference — the plugin's stylesheet enqueues
 * after the theme's. */

.fluentform .ff-el-group { margin-bottom: var(--sp-5); }

.fluentform .ff-el-input--label label {
	font-family: var(--font);
	font-size: var(--fs-sm);
	font-weight: 600 !important;
	color: var(--ink);
}

/* Required marker in the brand clay rather than the plugin's alert red.
 *
 * The plugin paints it with var(--fluentform-danger) from a four-class
 * selector, so out-specifying it means an arms race. Redefining the variable
 * on the label wrapper instead wins on inheritance proximity — the nearest
 * ancestor that sets a custom property supplies it — and it leaves genuine
 * validation errors on their own red, which should stay distinct from a
 * decorative required marker. */
.fluentform .ff-el-input--label.ff-el-is-required { --fluentform-danger: var(--brand); }

.fluentform .ff-el-form-control {
	font-family: var(--font) !important;
	font-size: var(--fs-sm) !important;
	min-height: 46px;
	padding: 0.7rem 0.85rem !important;
	border: 1px solid var(--field) !important;
	border-radius: var(--r-sm) !important;
	color: var(--ink) !important;
	background: var(--bg) !important;
}

.fluentform .ff-el-form-control:focus {
	outline: none;
	border-color: var(--brand) !important;
	box-shadow: 0 0 0 3px rgba(158, 58, 32, 0.16) !important;
}

.fluentform textarea.ff-el-form-control { min-height: 8.5rem; }

/* The fill sits on the path, not the svg, so targeting the svg alone misses. */
.fluentform .ff-el-tooltip svg path { fill: var(--muted-2); }
.fluentform .ff-el-tooltip:hover svg path { fill: var(--brand); }

.fluentform .ff-el-help-message {
	color: var(--muted);
	font-size: var(--fs-xs);
	font-family: var(--font);
}

.fluentform .text-danger,
.fluentform .error-text {
	color: var(--brand-700);
	font-size: var(--fs-xs);
	font-family: var(--font);
}

.fluentform .ff-btn-submit {
	font-family: var(--font) !important;
	background: var(--brand) !important;
	border-color: var(--brand) !important;
	border-radius: var(--r-sm) !important;
	color: #fff !important;
	font-size: var(--fs-base) !important;
	font-weight: 600 !important;
	min-height: 52px;
	padding: 0.95rem 1.85rem !important;
}

.fluentform .ff-btn-submit:hover { background: var(--brand-600) !important; }

.fluentform .ff-btn-submit:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* The form sits inside a .panel on the contact page; the stone panel plus the
   plugin's own white inputs already separate it, so drop the inner card. */
.panel > .fluentform .ff-el-group:last-of-type { margin-bottom: 0; }

/* --- 22. Footer --------------------------------------------------------- */

.footer {
	background: var(--dark);
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--fs-sm);
	border-top: 2px solid var(--brand);
	--focus: var(--brand-light);
}

.footer a { color: rgba(255, 255, 255, 0.84); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }

.footer__top {
	display: grid;
	gap: var(--sp-6);
	padding-block: clamp(2.75rem, 1.6rem + 3vw, 4.25rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.footer__brand { grid-column: 1 / -1; max-width: 22rem; }

@media (min-width: 900px) {
	.footer__top { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
	.footer__brand { grid-column: auto; }
}

.footer__heading {
	margin-bottom: var(--sp-4);
	color: #fff;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.footer ul { margin: 0; padding: 0; list-style: none; }
.footer li { margin-bottom: 0.5rem; }

.footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin-bottom: 0.75rem;
}

.footer__contact .icon { margin-top: 0.15rem; color: var(--brand-light); flex: none; }

/* Sized to sit in the footer list, not to shout over it — the weight and the
   white already carry the emphasis. The big treatment belongs on the contact
   page, where the number is the point of the page; see .phone-display. */
.footer__phone {
	font-size: var(--fs-lg);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #fff !important;
}

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sp-3);
	padding-block: var(--sp-5);
	border-top: 1px solid rgba(255, 255, 255, 0.13);
	font-size: var(--fs-xs);
	color: rgba(255, 255, 255, 0.62);
}

.footer__social { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.footer__heading--gap { margin-top: var(--sp-5); }

.footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer__menu li { margin: 0; }

.ctp-hours { margin: 0; padding: 0; list-style: none; }

.ctp-hours li {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: 0.42rem 0;
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
}

.ctp-hours li:last-child { border-bottom: 0; }
.footer .ctp-hours li { border-color: rgba(255, 255, 255, 0.11); }

/* --- 23. Mobile call bar ------------------------------------------------ */

.call-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: none;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
	background: var(--bg);
	border-top: 1px solid var(--line-2);
	box-shadow: 0 -6px 22px -10px rgba(20, 24, 26, 0.3);
}

.call-bar .btn { flex: 1; }

@media (max-width: 860px) {
	.call-bar { display: flex; }
	body { padding-bottom: 76px; }
}

@media print {
	.call-bar, .header, .footer, .cta-band, .skip-link { display: none !important; }
	body { padding-bottom: 0; }
}

/* --- 24. Utilities ------------------------------------------------------ */

.u-center { text-align: center; }
.u-muted { color: var(--muted); }
.u-small { font-size: var(--fs-sm); }

/* Default rhythm for a stack of blocks. */
.u-flow > * + * { margin-top: var(--sp-4); }

/* Single-purpose spacing utilities come AFTER .u-flow on purpose. They carry
 * the same specificity, so source order is the only thing that lets a
 * `u-mt-7` on a child win over the flow rule on its parent. Moving this block
 * above .u-flow silently collapses every spaced section back to 1rem. */
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-7 { margin-top: var(--sp-7); }
.u-measure { max-width: 32rem; }

.alignwide { max-width: min(100%, 68rem); margin-inline: auto; }
.alignfull { max-width: none; }
.aligncenter { margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	a.card:hover { transform: none; }
}

/* Honour a user request for more contrast rather than ignoring it. */
@media (prefers-contrast: more) {
	:root {
		--muted: #40474c;
		--muted-2: #4b5257;
		--line: #c9c9c4;
		--line-2: #9ea39e;
	}
}