/*
Theme Name:  Marsh Contracting
Theme URI:   https://marshcontracting.net
Description: Custom theme for Marsh Contracting, a remodeling and building contractor in Metro Detroit. Built for Core Web Vitals, accessibility, local SEO and AI search. Requires ACF Pro. No jQuery, no icon fonts, no inline scripts.
Version:     2.0.0
Author:      A Lynn Creative
Author URI:  https://alynncreative.com
Text Domain: marsh-contracting
Requires PHP: 8.0
Requires at least: 6.5
*/

/* =========================================================
   1. Tokens
   ---------------------------------------------------------
   Two colors come straight from the logo: the slate gray of
   the cube and the sky blue of its lit face. Everything else
   is a tint or shade of those two. No third hue.
   ========================================================= */
:root {
	--ink:       #333B42;
	--ink-2:     #4F5A63;
	--ink-3:     #7D8790;
	--slate:     #636D75;   /* logo gray */
	--slate-2:   #6B747E;   /* logo gray, lighter face */
	--slate-deep:#333B42;
	--sky:       #63A9D7;   /* logo blue */
	--sky-deep:  #2B78AE;   /* AA-contrast blue for text links */
	--sky-tint:  #E4F0F8;
	--paper:     #FFFFFF;
	--mist:      #EEF1F3;
	--line:      #D8DDE1;
	--white:     #FFFFFF;

	--font-display: "Roboto", "Roboto Fallback", Arial, sans-serif;
	--font-body:    "Inter", "Inter Fallback", Arial, system-ui, sans-serif;

	--wrap: 1280px;
	--wrap-narrow: 760px;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--section: clamp(4rem, 9vw, 8rem);
	--radius: 4px;        /* half the previous softening */
	--radius-lg: 6px;
	--ease: cubic-bezier(.2,.7,.2,1);
}

/* =========================================================
   2. Fonts (self-hosted when present in /assets/fonts; see README)
   ========================================================= */
@font-face { font-family: "Roboto"; src: url("assets/fonts/Roboto-Variable.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter";  src: url("assets/fonts/Inter-Variable.woff2")  format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

/*
 * Metric-matched fallbacks. Arial is adjusted to occupy the same space as the
 * real font, so when the webfont arrives the text does not jump: the glyphs
 * change but the line breaks and heights stay put. This is what removes the
 * visible twitch on load.
 */
@font-face {
	font-family: "Roboto Fallback"; src: local("Arial");
	size-adjust: 100.06%; ascent-override: 92.69%; descent-override: 24.39%; line-gap-override: 0%;
}
@font-face {
	font-family: "Inter Fallback"; src: local("Arial");
	size-adjust: 107.12%; ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%;
}

/* =========================================================
   3. Reset + base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body {
	margin: 0; background: var(--paper); color: var(--ink);
	font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
	font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; }
img { background: var(--mist); }
a { color: var(--sky-deep); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--slate-deep); }
:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul.plain, ol.plain, .plain { list-style: none; margin: 0; padding: 0; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--sky-deep); color: #fff; padding: .6rem 1rem; z-index: 1000; border-radius: var(--radius); }
.skip:focus { left: 8px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section); }
.section--flush { padding-top: 0; }
.section--tint { background: var(--mist); }
.section--dark { background: var(--slate-deep); color: #E8EEF2; }
.section--dark a { color: #fff; }

/* Section headers: title on the left, "see all" on the right. */
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head .h2 { margin: 0; max-width: none; }
@media (min-width: 1024px) { .section__head .h2 { white-space: nowrap; } }
@media (max-width: 640px) { .section__head { flex-direction: column; align-items: flex-start; gap: .75rem; } }

/* =========================================================
   4. Type
   ========================================================= */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .hero__title, .page-head__title, .project__title, .cta__h {
	font-family: var(--font-display); font-weight: 600; line-height: 1.12;
	letter-spacing: -0.02em; margin: 0 0 .6em; color: var(--ink);
}
.section--dark :is(h1,h2,h3,.h1,.h2,.h3) { color: #fff; }
h1, .h1 { font-size: clamp(2.4rem, 5.2vw, 4.25rem); }
h2, .h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3, .h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
h4, .h4 { font-family: var(--font-body); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 1.5rem 0 .5rem; }
p { margin: 0 0 1.1em; }
.lede { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.lede-first > p:first-child { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.5; color: var(--ink-2); }
.small { font-size: .9rem; color: var(--ink-2); }


.rich > :first-child { margin-top: 0; }
.rich > :last-child { margin-bottom: 0; }
.rich h2, .rich h3 { margin-top: 1.6em; }
.rich ul, .rich ol { padding-left: 1.25rem; margin: 0 0 1.2em; }
.rich li { margin-bottom: .35em; }
.rich img { margin-block: 1.5rem; }
.rich blockquote { border-left: 3px solid var(--sky); padding-left: 1.25rem; margin: 1.5rem 0; color: var(--ink-2); font-family: var(--font-display); font-size: 1.2em; }

.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; text-decoration: none; color: var(--sky-deep); white-space: nowrap; }
.link-arrow .icon { width: 1.1em; height: 1.1em; transition: transform .25s var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }
.link-arrow--back .icon { transform: rotate(180deg); }
.link-arrow--back:hover .icon { transform: rotate(180deg) translateX(3px); }

.icon { width: 1.25em; height: 1.25em; flex: none; }

/* =========================================================
   5. Buttons
   ========================================================= */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .95rem 1.6rem; font-weight: 600; font-size: .95rem; letter-spacing: .01em;
	text-decoration: none; border-radius: var(--radius); border: 1px solid transparent;
	transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: .65rem 1.1rem; font-size: .875rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--slate); color: #fff; }
.btn--primary:hover { background: var(--slate-deep); color: #fff; }
.btn--accent { background: var(--sky-deep); color: #fff; }
.btn--accent:hover { background: #226493; color: #fff; }
.btn--light { background: #fff; color: var(--slate-deep); }
.btn--light:hover { background: var(--sky-tint); color: var(--slate-deep); }
.btn--outline { background: transparent; color: var(--slate-deep); border-color: var(--line); }
.btn--outline:hover { border-color: var(--slate); background: var(--mist); color: var(--slate-deep); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

/* =========================================================
   6. Header + nav + the quote tab
   ---------------------------------------------------------
   The quote tab is carried over from the original site: on
   page load it hangs below the header bar like a pennant; as
   soon as you scroll it retracts into a normal rounded
   button. The header itself tightens at the same time.
   ========================================================= */
.site-header {
	position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	transition: box-shadow .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px -18px rgba(42,49,56,.35); }
.site-header__row { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: 5.5rem; transition: min-height .3s var(--ease); }
.site-nav { margin-left: auto; }
.site-header.is-scrolled .site-header__row { min-height: 4.25rem; }
.site-header__logo { text-decoration: none; display: block; }
.site-header__logo img { width: auto; height: 3rem; background: none; transition: height .3s var(--ease); }
.site-header.is-scrolled .site-header__logo img { height: 2.35rem; }
.site-header__wordmark { font-family: var(--font-display); font-size: 1.4rem; color: var(--slate); }

.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.site-nav__list li { position: relative; }
.site-nav__list a { display: block; padding: .6rem .8rem; color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; border-radius: var(--radius); }
.site-nav__list a:hover { color: var(--sky-deep); background: var(--mist); }
.site-nav__list .is-current > a { color: var(--sky-deep); box-shadow: inset 0 -2px 0 var(--sky); border-radius: var(--radius) var(--radius) 0 0; }
.site-nav__list .sub-menu {
	list-style: none; margin: 0; padding: .5rem; min-width: 16rem; border-radius: var(--radius-lg);
	position: absolute; left: 0; top: 100%; background: #fff; border: 1px solid var(--line);
	box-shadow: 0 16px 40px -20px rgba(42,49,56,.35);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s var(--ease);
}
.site-nav__list .has-children:hover > .sub-menu, .site-nav__list .has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.site-nav__list .sub-menu a { font-size: .9rem; padding: .55rem .75rem; border-radius: 3px; }
.site-nav__list .sub-menu a:hover { background: var(--mist); }
.site-nav__actions { display: flex; align-items: center; gap: 1.25rem; }
.site-nav__phone { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; color: var(--ink); font-size: .95rem; }
.site-nav__phone .icon { color: var(--sky-deep); }
.site-nav__quote-mobile { display: none; }

/* The quote tab */
.quote-tab {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	align-self: stretch; min-width: 10.5rem; padding: 0 1.4rem;
	background: var(--sky-deep); color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none;
	--tab-drop: 2.25rem;                       /* how far it hangs below the bar */
	margin-block: -1px calc(var(--tab-drop) * -1);
	border-radius: 0 0 var(--radius) var(--radius);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.4rem), 50% 100%, 0 calc(100% - 1.4rem));
	transition: margin .35s var(--ease), clip-path .35s var(--ease), border-radius .35s var(--ease), min-width .35s var(--ease), padding .35s var(--ease), background .2s;
}
.quote-tab:hover { background: #226493; color: #fff; }
.quote-tab span { transform: translateY(calc(var(--tab-drop) / -2)); transition: transform .35s var(--ease); }
.site-header.is-scrolled .quote-tab {
	align-self: center; margin-block: 0; min-width: 0; padding: .65rem 1.1rem;
	border-radius: var(--radius);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%);
}
.site-header.is-scrolled .quote-tab span { transform: none; }

.site-header__toggle { display: none; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; padding: .5rem; margin: -.5rem; }
.site-header__toggle .icon { width: 1.5rem; height: 1.5rem; }
.site-header__toggle .icon--close { display: none; }
.site-header__toggle[aria-expanded="true"] .icon--open { display: none; }
.site-header__toggle[aria-expanded="true"] .icon--close { display: block; }

@media (max-width: 1023px) {
	/* backdrop-filter makes an element the containing block for fixed children,
	   which clipped the drawer to the header. Solid background on mobile instead. */
	.site-header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
	.site-header__row { min-height: 4.5rem; }
	.site-header__toggle { margin-left: auto; }
	.site-header__toggle { display: inline-flex; }
	.quote-tab { display: none; }
	.site-nav__quote-mobile { display: inline-flex; }
	.site-nav {
		display: none; position: fixed; inset: 4.5rem 0 0; background: var(--paper);
		flex-direction: column; align-items: stretch; padding: 1rem var(--gutter) 3rem; overflow-y: auto; gap: 1.5rem;
	}
	.site-nav.is-open { display: flex; }
	.site-nav__list { flex-direction: column; gap: 0; }
	.site-nav__list a { font-size: 1.25rem; padding: .8rem 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
	.site-nav__list .is-current > a { box-shadow: none; }
	.site-nav__list .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 .5rem 1rem; background: none; }
	.site-nav__list .sub-menu a { font-size: 1rem; border-bottom: 0; padding: .5rem 0; }
	.site-nav__actions { flex-direction: column; align-items: stretch; gap: 1rem; }
	.site-nav__phone { font-size: 1.1rem; justify-content: center; }
	body.nav-open { overflow: hidden; }
}

/* =========================================================
   7. Hero
   ---------------------------------------------------------
   Same shape as the site it replaces: one large photo across
   the full width with a solid card sitting on top of it, so
   the type reads against paper rather than against a kitchen.
   The card is offset left and overlaps the bottom edge of the
   photo, and the title block strip picks up the same edge.
   ========================================================= */
.hero__stage { position: relative; }
.hero__media {
	position: relative; overflow: hidden; background: var(--mist);
	/* Two limits at once. The clamp keeps the band in proportion to the window;
	   the 100vw/2.15 cap keeps the frame short enough that a 3:2 photo, once the
	   parallax overhang scales it up, still shows its full width. Go past that
	   cap and the sides get cropped instead of the top and bottom. */
	height: min(clamp(26rem, 88svh, 56rem), calc(100vw / 1.52));
}
.hero__media img { width: 100%; object-fit: cover; will-change: transform; }
/* The image is taller than its frame; main.js slides it inside that overhang. */
[data-parallax] img { height: 126%; margin-top: -13%; }
.hero__media img { height: 100%; margin-top: 0; }   /* no parallax here: the frame gets the full height instead */
/* The card is centred in the photo, then nudged down so more of the top of the
   image shows. Padding on a centred flex box shifts the card by half its value,
   so --hero-drop is the actual distance moved. It scales with the window and
   disappears on short screens, where there is no room to give away. */
.hero__inner {
	position: absolute; inset: 0; display: flex; align-items: center;
	--hero-drop: 0px;
	padding-top: calc(var(--hero-drop) * 2);
}
@media (max-height: 700px) { .hero__inner { --hero-drop: 0px; } }
.hero__card {
	background: rgba(255,255,255,.9);
	border: 1px solid rgba(255,255,255,.6); border-left: 8px solid var(--sky-deep);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	box-shadow: 0 24px 60px -35px rgba(42,49,56,.5);
	padding: clamp(1.7rem, 2.5vw, 2.3rem) clamp(1.7rem, 2.6vw, 2.4rem);
	max-width: 38rem;
}
.hero__title { font-size: clamp(1.45rem, 2.5vw, 2rem); font-weight: 700; line-height: 1.3; margin: 0 0 1.2rem; text-wrap: balance; }
.hero__list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .3rem; }
.hero__list li { position: relative; padding-left: 1.15rem; color: var(--ink-2); font-size: .97rem; }
.hero__list li::before {
	content: ""; position: absolute; left: 0; top: .62em; width: .4rem; height: .4rem;
	background: var(--sky-deep); border-radius: 1px;
}
.hero__sub { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.5; color: var(--ink-2); margin-bottom: 1.5rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__actions .btn--primary { background: var(--sky-deep); color: #fff; }
.hero__actions .btn--primary:hover { background: #226493; }
.hero .tblock { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 900px) {
	.hero__media { height: auto; aspect-ratio: 4 / 3; }
	.hero__inner { position: relative; z-index: 2; display: block; margin-top: -3.5rem; padding-top: 0; }
	.hero__card { max-width: none; }
}

/* Title block: a ruled strip of labeled cells, like the corner of a drawing
   set. On the homepage it holds proof points; on project pages, project facts. */
.tblock {
	border-radius: var(--radius-lg); overflow: hidden;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	margin: 0; background: var(--sky-tint); color: var(--ink);
	border: 1px solid var(--line);
	position: relative; z-index: 1;
}
.hero .tblock { margin-bottom: clamp(1rem, 2vw, 2rem); }
.tblock__cell { padding: 1rem 1.25rem; border-right: 1px solid var(--line); min-width: 0; }
.tblock__cell:last-child { border-right: 0; }
.tblock__cell--wide { grid-column: span 2; }
.tblock dt { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .25rem; }
.tblock dd { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; color: var(--slate-deep); }
.tblock__areas { font-family: var(--font-body) !important; font-size: .95rem !important; line-height: 1.5 !important; }
.tblock--vertical { grid-template-columns: 1fr; }
.tblock--vertical .tblock__cell { border-right: 0; border-bottom: 1px solid var(--line); }
.tblock--vertical .tblock__cell:last-child { border-bottom: 0; }
.tblock--vertical dd { font-size: 1.15rem; }
.tblock--vertical dd ul { font-family: var(--font-body); font-size: .95rem; line-height: 1.55; }
.tblock--vertical dd li { padding: .15rem 0; }
@media (max-width: 700px) {
	.tblock { grid-template-columns: 1fr 1fr; }
	.tblock__cell:nth-child(2n) { border-right: 0; }
	.tblock__cell { border-bottom: 1px solid var(--line); }
	.tblock__cell--wide { grid-column: 1 / -1; }
}

/* =========================================================
   8. Page headers, breadcrumbs
   ========================================================= */
.page-head { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 3.5rem); }
.page-head__title { font-size: clamp(1.9rem, 3.2vw, 2.6rem); max-width: 22ch; text-wrap: balance; }
.page-head__intro { margin-top: 1rem; }
/* Page-header photo band. A 16:9 frame rather than a 21:9 letterbox, so a
   normal landscape photo shows most of itself instead of a strip through the
   middle. No parallax: the overhang is what crops it, and here the photo is
   the point. */
.page-head__band {
	width: min(100% - 2 * var(--gutter), 1500px); margin: 0 auto clamp(1rem, 2vw, 2rem);
	border-radius: var(--radius-lg); overflow: hidden;
	aspect-ratio: 16 / 9; max-height: 40rem; background: var(--mist);
}
.page-head__band img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .page-head__band { aspect-ratio: 4 / 3; } }

.crumbs { font-size: .8rem; margin-bottom: 1.25rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { color: var(--ink-3); }

/* =========================================================
   9. Homepage sections
   ========================================================= */
.intro__grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.intro__copy { font-size: clamp(1.15rem, 1.7vw, 1.45rem); }
.rule-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.rule-list li { padding: .7rem 0; border-top: 1px solid var(--line); font-weight: 500; }
.rule-list li:last-child { border-bottom: 1px solid var(--line); }
.rule-list a { text-decoration: none; }
@media (max-width: 860px) { .intro__grid { grid-template-columns: 1fr; } }

.split__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split--alt .split__grid { direction: rtl; }
.split--alt .split__grid > * { direction: ltr; }
.split__media img { width: 100%; border-radius: var(--radius-lg); }
.split__copy .btn { margin-top: 1.5rem; }
.split + .split, .section--flush .split { padding-top: 0; }
.section--flush .split + .split { padding-top: var(--section); }
@media (max-width: 860px) { .split__grid, .split--alt .split__grid { grid-template-columns: 1fr; direction: ltr; } }

/* Process , a genuine sequence, so numbering carries meaning. */
.process__list { list-style: none; counter-reset: step; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2.5rem 2rem; }
.process__step { counter-increment: step; border-top: 1px solid rgba(255,255,255,.2); padding-top: 1.25rem; }
.process__step::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-display); font-size: 2rem; color: var(--sky); margin-bottom: .75rem; line-height: 1; }
.process__t { font-size: 1.25rem; margin-bottom: .4rem; }
.process__step p { color: rgba(255,255,255,.78); margin: 0; font-size: .98rem; }

/* =========================================================
   10. Project cards + grids
   ========================================================= */
.pcard, .scard, .review { min-width: 0; }   /* keep grid items from forcing the track wider than the screen */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
/* Homepage: two columns of landscape cards. A mosaic with a tall portrait slot
   looks good only if you have portrait photos to put in it, and most interior
   shots are landscape. Four equal 3:2 frames crop nothing awkwardly. */
.pgrid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgrid--home .pcard__media { aspect-ratio: 3 / 2; }
.pgrid--home .pcard__title { font-size: 1.45rem; }
@media (max-width: 640px) { .pgrid--home { grid-template-columns: minmax(0, 1fr); } }
.pgrid--top { align-items: start; }
.pcard--wide { grid-column: span 2; }
.pcard__link { display: block; text-decoration: none; color: inherit; height: 100%; }
.pcard__media { overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; background: var(--mist); }
.pcard--wide .pcard__media { aspect-ratio: 16 / 10; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pcard__link:hover .pcard__media img { transform: scale(1.03); }
.pcard__body { padding: 1rem 0 0; }
.pcard__meta { font-size: .8rem; color: var(--ink-3); font-weight: 500; margin: 0 0 .35rem; }
.pcard__title { font-size: 1.35rem; margin: 0 0 .35rem; }
.pcard__summary { color: var(--ink-2); font-size: .95rem; margin: 0 0 .6rem; }
.pcard__cta { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; color: var(--sky-deep); }
.pcard__cta .icon { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.pcard__link:hover .pcard__cta .icon { transform: translateX(3px); }
@media (max-width: 1023px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pgrid { grid-template-columns: minmax(0, 1fr); } .pcard--wide { grid-column: auto; } .pcard--wide .pcard__media { aspect-ratio: 4 / 3; } }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filters__item { padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--ink-2); }
.filters__item:hover { border-color: var(--ink-3); color: var(--ink); }
.filters__item.is-active { background: var(--sky-deep); border-color: var(--sky-deep); color: #fff; }

/* Services */
.sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.sgrid--large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scard__link { display: block; border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; height: 100%; background: #fff; border: 1px solid var(--line); transition: border-color .2s, box-shadow .3s var(--ease); }
.scard__link:hover { border-color: var(--sky); box-shadow: 0 20px 40px -30px rgba(42,49,56,.4); }
.scard__media { aspect-ratio: 3 / 2; overflow: hidden; }
.scard__media img { width: 100%; height: 100%; object-fit: cover; }
.scard__body { padding: 1.25rem 1.4rem 1.5rem; }
.scard__title { font-size: 1.3rem; margin-bottom: .4rem; }
.scard__text { color: var(--ink-2); font-size: .95rem; margin-bottom: .75rem; }
.scard__cta { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; color: var(--sky-deep); }
.scard__cta .icon { width: 1em; height: 1em; }
@media (max-width: 1023px) { .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sgrid, .sgrid--large { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   11. Single project
   ========================================================= */
.project__head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.project__title { font-size: clamp(1.8rem, 3vw, 2.4rem); max-width: 24ch; text-wrap: balance; }
/* Cover photo. A 3:2 frame rather than a wide band, so a landscape photo is
   shown almost whole instead of having its top and bottom cut away. No
   parallax here: the overhang is what forces the crop, and on this page the
   photo matters more than the effect. */
.project__cover {
	border-radius: var(--radius-lg); width: min(100% - 2 * var(--gutter), 1500px); margin-inline: auto;
	aspect-ratio: 3 / 2; max-height: 62rem; overflow: hidden;
}
.project__cover img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .project__cover { aspect-ratio: 4 / 3; } }
.project__grid { display: grid; grid-template-columns: 19rem minmax(0,1fr); gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.project__block { position: sticky; top: 6rem; }
.project__block .btn { margin-top: 1rem; }
.project__body { max-width: 62ch; }
@media (max-width: 900px) { .project__grid { grid-template-columns: 1fr; } .project__block { position: static; } }

/* Gallery: everything visible, no carousel. Auto-flow dense with wide/tall
   spans from the image's own aspect ratio so it reads like a photo essay. */
.pgal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(.75rem, 1.5vw, 1.5rem); padding-bottom: var(--section); }
.pgal__item { margin: 0; }
.pgal__item--wide { grid-column: span 2; }
.pgal__item img { width: 100%; height: auto; border-radius: var(--radius); }
.pgal__zoom { display: block; position: relative; border-radius: var(--radius); overflow: hidden; }
.pgal--lightbox .pgal__zoom::after {
	content: ""; position: absolute; inset: 0; background: rgba(42,49,56,0); transition: background .25s;
}
.pgal--lightbox .pgal__zoom:hover::after { background: rgba(42,49,56,.12); }
.pgal__cap { font-size: .85rem; color: var(--ink-2); padding: .5rem 0 0; }
@media (max-width: 600px) { .pgal { grid-template-columns: 1fr; } .pgal__item--wide { grid-column: auto; } }

.project__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.5rem var(--section); border-top: 1px solid var(--line); flex-wrap: wrap; }
.project__nav .link-arrow { white-space: normal; }

/* Lightbox (native <dialog>) */
.lb { border: 0; padding: 0; background: rgba(30,35,40,.96); color: #fff; width: 100vw; height: 100dvh; max-width: none; max-height: none; }
.lb::backdrop { background: rgba(30,35,40,.96); }
.lb__inner { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.lb__bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--gutter); font-size: .9rem; color: rgba(255,255,255,.7); }
.lb__stage { display: grid; place-items: center; min-height: 0; padding: 0 var(--gutter); }
.lb__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: none; }
.lb__cap { padding: 1rem var(--gutter) 1.25rem; text-align: center; color: rgba(255,255,255,.85); font-size: .95rem; min-height: 3.5rem; }
.lb__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff; }
.lb__btn:hover { background: rgba(255,255,255,.1); }
.lb__btn .icon { width: 1.25rem; height: 1.25rem; }
.lb__prev .icon { transform: rotate(180deg); }
.lb__nav { display: flex; gap: .5rem; }

/* =========================================================
   12. Reviews, team, FAQ, CTA, contact
   ========================================================= */
.reviews { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.reviews--home { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.reviews--columns { columns: 3; column-gap: clamp(1.25rem, 2.5vw, 2rem); display: block; }
.reviews--columns .review { break-inside: avoid; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.review { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.6rem 1.4rem; }
.review__quote { margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.5; color: var(--ink); }
.review__quote p:last-child { margin-bottom: 0; }
.review__author { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.review__author::before { content: "- "; }
/* Sits inline at the end of the trimmed quote, right after the ellipsis. */
.review__more {
	display: inline-flex; align-items: center; gap: .3rem; padding: 0; white-space: nowrap;
	font-size: .85em; font-weight: 500; color: var(--ink-3); background: none; border: 0; cursor: pointer;
	transition: color .2s var(--ease);
}
.review__more .icon { width: .9em; height: .9em; }
.review__more:hover { color: var(--sky-deep); }

/* Full review dialog */
.rlb { border: 0; padding: 0; background: none; max-width: min(46rem, calc(100vw - 2rem)); width: 100%; }
.rlb::backdrop { background: rgba(51,59,66,.6); }
.rlb__inner { background: #fff; border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); position: relative; }
.rlb__quote { margin: 0 0 1.2rem; font-size: 1.05rem; line-height: 1.65; color: var(--ink); }
.rlb__quote p { margin: 0 0 1em; }
.rlb__quote p:last-child { margin-bottom: 0; }
.rlb__author { font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.rlb__author::before { content: "— "; }
.rlb__close { position: absolute; top: .75rem; right: .75rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); color: var(--ink-3); }
.rlb__close:hover { background: var(--mist); color: var(--ink); }

.reviews__more { margin-top: 2.5rem; text-align: center; color: var(--ink-2); }
@media (max-width: 1023px) { .reviews--home { grid-template-columns: minmax(0, 1fr); } .reviews--columns { columns: 2; } }
@media (max-width: 640px) { .reviews--columns { columns: 1; } }

.team__list { display: grid; gap: clamp(2rem, 5vw, 4rem); margin-top: 2.5rem; }
.person { display: grid; grid-template-columns: 18rem minmax(0,1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.person__media img { border-radius: var(--radius-lg); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.person__role { font-size: .85rem; font-weight: 500; color: var(--ink-3); margin-bottom: .3rem; }
.person__name { font-size: 1.6rem; margin-bottom: .75rem; }
@media (max-width: 700px) { .person { grid-template-columns: 1fr; } .person__media { max-width: 18rem; } }


.cta { background: var(--slate); color: #fff; padding-block: clamp(3rem, 7vw, 5.5rem); }
.cta__inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta__h { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: .4em; }
.cta__p { color: rgba(255,255,255,.82); max-width: 52ch; margin: 0; }
.cta__actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.contact { display: grid; grid-template-columns: minmax(0,1fr) 18rem; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact__side .h4:first-child { margin-top: 0; }
.contact__phone { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 1.15rem; text-decoration: none; }
.contact__phone .icon { color: var(--sky-deep); }
.steps-mini { padding-left: 1.2rem; margin: 0 0 1.5rem; color: var(--ink-2); }
.steps-mini li { margin-bottom: .6rem; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.lead-form__facade { padding: 2.5rem; text-align: center; }
.lead-form__facade-h { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: .25rem; }
.lead-form__alt { margin: 1.25rem 0 0; font-size: .9rem; color: var(--ink-2); }
.notice { padding: 1rem 1.25rem; background: var(--sky-tint); border-radius: var(--radius); }
.crosslink { padding: 1rem 1.25rem; background: var(--mist); border-radius: var(--radius-lg); border-left: 4px solid var(--sky-deep); margin: 0; color: var(--ink-2); }
.crosslink a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; white-space: nowrap; }
.crosslink .icon { width: .95em; height: .95em; }

/* Fluent Forms (if used) , inherits our tokens */
.lead-form--native .ff-el-input--content input, .lead-form--native .ff-el-input--content textarea, .lead-form--native .ff-el-input--content select {
	border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; font: inherit; width: 100%; background: #fff;
}
.lead-form--native .ff-btn-submit { background: var(--sky-deep) !important; color: #fff !important; border: 0 !important; padding: .95rem 1.6rem !important; font-weight: 600 !important; border-radius: var(--radius) !important; }

/* =========================================================
   13. Footer
   ========================================================= */
.site-footer { background: var(--slate-deep); color: rgba(255,255,255,.8); padding-block: clamp(3rem, 6vw, 5rem) 2rem; font-size: .95rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.25fr; gap: clamp(1.75rem, 3.5vw, 3.5rem); }
.site-footer__name { font-family: var(--font-display); font-size: 1.5rem; color: #fff; margin-bottom: .5rem; }
.site-footer__tag { max-width: 34ch; }
.site-footer__h { font-family: var(--font-body); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); margin: 0 0 .9rem; font-weight: 600; }
.site-footer__hours { white-space: nowrap; margin-top: .9rem; }
.site-footer__hours p { margin: 0; text-wrap: pretty; }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.site-footer__small { font-size: .85rem; color: rgba(255,255,255,.6); margin-top: .75rem; }
.site-footer__small p { margin: 0 0 .5em; }
.area-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .75rem; }
.area-list li { color: #fff; }
.area-list li:not(:last-child)::after { content: "·"; margin-left: .75rem; color: rgba(255,255,255,.35); }
.social { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; gap: .5rem; }
.social a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; }
.social a:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.affiliations { list-style: none; margin: 3rem 0 0; padding: 2rem 0 0; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }
.affiliations a { display: block; background: #fff; border-radius: var(--radius); padding: .6rem .8rem; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.affiliations a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0,0,0,.6); }
.affiliations img { height: 3rem; width: auto; background: none; }
.site-footer__legal { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; color: rgba(255,255,255,.55); }
.site-footer__legal p { margin: 0; }
.site-footer__credit { display: block; margin-top: .35rem; }
.site-footer__credit a { color: inherit; text-decoration: none; }   /* inherits the muted colour of the legal row */
.site-footer__credit a:hover { text-decoration: underline; }
.site-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-footer__menu a { color: rgba(255,255,255,.7); }
@media (max-width: 1023px) { .site-footer__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 600px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* =========================================================
   13a. FAQs on service pages
   ---------------------------------------------------------
   Plain headings and paragraphs rather than accordions: the
   text is the point, and hiding it behind a click hides it
   from the people skimming and from anything reading the page.
   ========================================================= */
.faq__list { border-top: 1px solid var(--line); margin-top: 1.75rem; }
.faq__item { border-bottom: 1px solid var(--line); padding: 1.4rem 0; }
.faq__q { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; margin: 0 0 .5rem; color: var(--ink); }
.faq__a { color: var(--ink-2); max-width: 68ch; }
.faq__a p { margin: 0 0 .8em; }
.faq__a p:last-child { margin-bottom: 0; }

/* =========================================================
   13b. Before / after
   ---------------------------------------------------------
   Two stacked photos; the range input clips the top one.
   Keyboard works because the control is a real <input>.
   ========================================================= */
.ba { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--mist); touch-action: pan-y; }
.ba__pair { position: relative; aspect-ratio: 3 / 2; }
.ba__pair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba__label { position: absolute; bottom: .75rem; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(51,59,66,.75); padding: .3rem .6rem; border-radius: var(--radius); }
.ba__label--before { left: .75rem; }
.ba__label--after { right: .75rem; }
.ba__handle { position: absolute; inset: 0; width: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba__handle:focus-visible + .ba__bar { outline: 2px solid var(--sky-deep); outline-offset: 2px; }
.ba__bar { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(51,59,66,.25); pointer-events: none; }
.ba__bar::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 2.5rem; height: 2.5rem; transform: translate(-50%, -50%);
	border: 2px solid #fff; border-radius: 50%; background: rgba(51,59,66,.35);
}
.ba__cap { font-size: .9rem; color: var(--ink-2); padding-top: .7rem; margin: 0; }
.ba__link { display: inline-flex; align-items: center; gap: .3rem; margin-left: .35rem; font-weight: 600; color: var(--sky-deep); text-decoration: none; white-space: nowrap; }
.ba__link .icon { width: .95em; height: .95em; transition: transform .25s var(--ease); }
.ba__link:hover { text-decoration: underline; }
.ba__link:hover .icon { transform: translateX(2px); }
.ba__review { margin: .9rem 0 0; padding: 1.1rem 1.3rem; background: var(--mist); border-radius: var(--radius-lg); border-left: 4px solid var(--sky-deep); }
.ba__review blockquote { margin: 0; }
.ba__review p { margin: 0 0 .6rem; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.ba__review figcaption { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.ba__review figcaption::before { content: "- "; }
.ba-item { margin: 0; }
.ba-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.75rem); align-items: start; }
@media (max-width: 800px) { .ba-grid { grid-template-columns: minmax(0, 1fr); } }

/* Review with a photo attached */
.review--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; padding: 0; overflow: hidden; align-items: stretch; }
.review--wide .review__media img { width: 100%; height: 100%; object-fit: cover; min-height: 16rem; }
.review--wide .review__text { padding: clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 700px) { .review--wide { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   14. Motion
   ---------------------------------------------------------
   Scroll reveals are applied by main.js to .reveal elements
   (fade + 14px rise). Parallax is a transform on the hero
   image only. Both switch off under prefers-reduced-motion.
   ========================================================= */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .08s; } .reveal--d2 { transition-delay: .16s; } .reveal--d3 { transition-delay: .24s; }
.hero__copy > * { opacity: 0; transform: translateY(12px); animation: rise .8s var(--ease) forwards; }
.hero__copy > :nth-child(2) { animation-delay: .1s; } .hero__copy > :nth-child(3) { animation-delay: .2s; }
.hero .tblock { animation: rise .8s .35s var(--ease) both; }
.hero__media { animation: rise .9s .15s var(--ease) both; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	.hero__copy > *, .hero .tblock, .hero__media { animation: none; opacity: 1; transform: none; }
	[data-parallax] img { height: 100%; margin-top: 0; transform: none !important; }
}

/* =========================================================
   15. Misc
   ========================================================= */
.post-teaser { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.pagination { margin-top: 2rem; }
.pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.pagination a, .pagination span { padding: .4rem .8rem; border: 1px solid var(--line); text-decoration: none; }
.pagination .current { background: var(--sky-deep); color: #fff; border-color: var(--sky-deep); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media print { .site-header, .site-footer, .cta, .site-header__toggle { display: none; } }

/* =========================================================
   16. WordPress bits: consent notice, search form, classic-editor content
   ========================================================= */
.consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200; }
.consent[hidden] { display: none; }
.consent__inner {
	max-width: 46rem; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--sky-deep);
	border-radius: var(--radius-lg); box-shadow: 0 20px 50px -25px rgba(51,59,66,.5);
	padding: 1rem 1.25rem; display: flex; gap: 1.25rem; align-items: center; justify-content: space-between;
}
.consent__text { margin: 0; font-size: .92rem; color: var(--ink-2); }
.consent__text a { white-space: nowrap; }
.consent__actions { display: flex; gap: .5rem; flex: none; }
@media (max-width: 640px) { .consent__inner { flex-direction: column; align-items: stretch; } .consent__actions { justify-content: flex-end; } }

.email-link { word-break: break-word; }

.search-form { display: flex; gap: .5rem; }
.search-form input[type="search"] { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; font: inherit; }

.rich .alignleft { float: left; margin: .25rem 1.5rem 1rem 0; }
.rich .alignright { float: right; margin: .25rem 0 1rem 1.5rem; }
.rich .aligncenter { display: block; margin: 1.5rem auto; }
.rich .wp-caption { max-width: 100%; }
.rich .wp-caption-text { font-size: .85rem; color: var(--ink-2); padding-top: .4rem; }
.rich table { border-collapse: collapse; width: 100%; margin: 0 0 1.2em; }
.rich th, .rich td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; }
.lead-form iframe { width: 100%; border: 0; display: block; min-height: 40rem; }
.lead-form--empty { border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }