/*
 * cm-areas-single.css: GENERATED FILE, DO NOT EDIT.
 * Source: assets/css/areas/0*.css, concatenated in order by
 * assets/css/areas/build.sh. Loaded by header.php after cm-interior.css
 * on the area singles only.
 * Fragments: 01-base.css 02-form.css 03-single.css
 */

/* ---- 01-base.css ---- */
/* ==========================================================================
   01 BASE: shared tokens and primitives for Areas We Serve
   --------------------------------------------------------------------------
   Everything is scoped under body.single-area / body.post-type-archive-area,
   so nothing here can leak into another template family. Later fragments
   (02-form, 03-single, 04-archive) build on these custom properties.

   Colour rules (see design.md 2.4): coral #ff675b is decorative only on light
   grounds; text accents use --cm26-brand-ink #b8352b; coral buttons carry
   #292725 text, never white.
   ========================================================================== */

body.single-area,
body.post-type-archive-area {
	--cm-area-ink: var(--cm26-ink, #262423);
	--cm-area-body: var(--cm26-body, #4a4542);
	--cm-area-muted: var(--cm26-stone, #6b6460);
	--cm-area-accent: var(--cm26-brand-ink, #b8352b);
	--cm-area-coral: var(--cm26-brand, #ff675b);
	--cm-area-on-coral: var(--studio-charcoal, #292725);
	--cm-area-card: var(--cm26-card, #fffdfb);
	--cm-area-panel: var(--studio-panel, #f0e7de);
	--cm-area-rule: var(--studio-rule, #d5c8bd);
	--cm-area-line: var(--cm26-line, #e4dcd4);
	--cm-area-radius: 7px;
	--cm-area-radius-sm: 6px;
	--cm-area-reading: var(--studio-reading, 70ch);
	--cm-area-gap: clamp(16px, 2.4vw, 28px);
}

/* No horizontal page scroll at 320px: long city names and URLs wrap. */
body.single-area .cm-main,
body.post-type-archive-area .cm-main {
	overflow-wrap: anywhere;
}

body.single-area .cm-main img,
body.post-type-archive-area .cm-main img,
body.single-area .cm-main iframe,
body.post-type-archive-area .cm-main iframe {
	max-width: 100%;
}

/* Inline cm_icon() glyphs that replace the Bootstrap Icons font. */
body.single-area .cm-area-glyph,
body.post-type-archive-area .cm-area-glyph {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--cm-area-radius-sm);
	background: var(--cm-area-panel);
	color: var(--cm-area-accent);
}

body.single-area .cm-area-glyph svg,
body.post-type-archive-area .cm-area-glyph svg {
	width: 22px;
	height: 22px;
}

body.single-area .cm-area-glyph-sm,
body.post-type-archive-area .cm-area-glyph-sm {
	width: 32px;
	height: 32px;
}

body.single-area .cm-area-glyph-sm svg,
body.post-type-archive-area .cm-area-glyph-sm svg {
	width: 18px;
	height: 18px;
}

/* Small uppercase meta label (region codes, "Client in Bath, PA"). */
body.single-area .cm-area-meta-label,
body.post-type-archive-area .cm-area-meta-label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--cm-area-muted);
}

/* Reading width for prose on area pages. */
body.single-area .cm-area-prose,
body.post-type-archive-area .cm-area-prose {
	max-width: var(--cm-area-reading);
}

/* Visible keyboard focus on every area control (matches 2026:2183-2210). */
body.single-area .cm-main :is(a, button, summary, input, select, textarea):focus-visible,
body.post-type-archive-area .cm-main :is(a, button, summary, input, select, textarea):focus-visible {
	outline: 3px solid var(--cm-area-accent);
	outline-offset: 3px;
}

/* Dark surfaces keep the 2026 light ring (2026:2209-2213): the accent ring is
   only about 2.5:1 on the dark CTA panel, short of the 3:1 SC 1.4.11 needs. */
body.single-area .cm-main :is(.cm-cta-panel, .cm-band-dark) :is(a, button, summary, input, select, textarea):focus-visible,
body.post-type-archive-area .cm-main :is(.cm-cta-panel, .cm-band-dark) :is(a, button, summary, input, select, textarea):focus-visible {
	outline-color: var(--cm26-dark-link);
}

@media (prefers-reduced-motion: reduce) {
	body.single-area .cm-main *,
	body.post-type-archive-area .cm-main * {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}


/* ---- 02-form.css ---- */
/* ===========================================================================
   02 · LEAD FORM CARD  (template-parts/area/lead-form.php, Gravity Form 1)
   ---------------------------------------------------------------------------
   The card language of the landing form (cm-lp.css .cm-lp-form-card), scoped
   to #area-form on the area routes only.

   SPECIFICITY. Gravity Forms prints its own sheets after this one, and
   gf-2026.css / gravity-forms.css write labels at (0,5,0) and controls at
   (0,4,1). Every field rule here goes through the #area-form id, so it wins on
   specificity whatever the load order, with no !important. The id is the
   card, not #gform_wrapper_1: on an AJAX confirmation GF replaceWith()s the
   whole wrapper, and the card survives the swap.

   cm-contact.css (the /contact/ skin) is not loaded on area routes; the few
   rules this form needs from it are restated below.
   =========================================================================== */

:is(body.single-area, body.post-type-archive-area) #area-form {
	position: relative;
	min-width: 0;
	padding: 26px 20px 22px;
	background: var(--cm26-card);
	border: 1px solid rgba(41, 39, 37, .10);
	border-radius: 8px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 24px 60px -24px rgba(80, 22, 16, .30), 0 6px 18px -8px rgba(41, 39, 37, .16);
	scroll-margin-top: 96px; /* clears the sticky header on #area-form jumps */
}

/* The coral tab: decorative, so coral is fine here (it is not text). */
:is(body.single-area, body.post-type-archive-area) #area-form::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 20px;
	width: 72px;
	height: 4px;
	background: var(--studio-coral, #ff675b);
}

/* Focus lands here from in-page "#area-form" links; the heading names it. */
:is(body.single-area, body.post-type-archive-area) #area-form:focus { outline: none; }
:is(body.single-area, body.post-type-archive-area) #area-form:focus-visible {
	outline: 2px solid var(--cm26-brand-ink);
	outline-offset: 4px;
}

@media (min-width: 640px) {
	:is(body.single-area, body.post-type-archive-area) #area-form { padding: 34px 32px 28px; }
	:is(body.single-area, body.post-type-archive-area) #area-form::before { left: 32px; }
}

:is(body.single-area, body.post-type-archive-area) #area-form .cm-area-leadform-kicker {
	margin: 0 0 10px;
	font-family: var(--cm26-font-display);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cm26-brand-ink);
}

:is(body.single-area, body.post-type-archive-area) #area-form .cm-area-leadform-title {
	margin: 0;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: clamp(22px, 2.1vw, 27px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -.025em;
	text-transform: none;
	color: var(--cm26-ink);
}

:is(body.single-area, body.post-type-archive-area) #area-form .cm-area-leadform-sub {
	margin: 8px 0 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--cm26-body);
}

:is(body.single-area, body.post-type-archive-area) #area-form .cm-area-leadform-body {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--cm26-line);
}

:is(body.single-area, body.post-type-archive-area) #area-form .cm-area-leadform-note,
:is(body.single-area, body.post-type-archive-area) #area-form .cm-area-leadform-fallback {
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--cm26-stone);
}

:is(body.single-area, body.post-type-archive-area) #area-form .cm-area-leadform-fallback { margin-top: 0; font-size: 15px; color: var(--cm26-body); }

:is(body.single-area, body.post-type-archive-area) #area-form .cm-area-leadform-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 0;
}

:is(body.single-area, body.post-type-archive-area) #area-form .cm-area-leadform-alt {
	margin: 10px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--cm26-line);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--cm26-body);
}

:is(body.single-area, body.post-type-archive-area) #area-form .cm-area-leadform-note a,
:is(body.single-area, body.post-type-archive-area) #area-form .cm-area-leadform-alt a {
	color: var(--cm26-brand-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 44px target for the call link without moving the line box. */
:is(body.single-area, body.post-type-archive-area) #area-form .cm-area-leadform-alt a {
	display: inline-block;
	padding-block: 10px;
	margin-block: -10px;
}

:is(body.single-area, body.post-type-archive-area) #area-form .cm-area-leadform-hours { color: var(--cm26-stone); }

/* ---------------------------------------------------------------------------
   Gravity Forms inside the card
   --------------------------------------------------------------------------- */

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper {
	--cm26-radius-input: 5px;
	--cm26-radius: 6px;
	margin: 0;
	max-width: 100%;
}

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields { row-gap: 20px; }
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields > .gfield { margin: 0; padding: 0; }
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gfield .ginput_container { margin-top: 0; }

/* Labels: always visible. The area variant clears the form's hidden_label
   setting server side (cm_area_trim_form()); this is the fallback if a field
   still arrives with it. Honeypot, hidden and validation fields stay hidden. */
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields .gfield > .gfield_label,
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields .gfield > .gform-field-label,
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields .gfield legend.gfield_label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--cm26-font-display);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--cm26-ink);
}

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gfield.hidden_label:not(.gfield--type-honeypot):not(.gfield_visibility_hidden):not(.gform_validation_container) > .gfield_label {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* Required marker: a "*" in brand ink; the "(Required)" text stays for
   screen readers, visually hidden. */
:is(body.single-area, body.post-type-archive-area) #area-form .gfield_required { margin-left: 3px; font-size: inherit; font-style: normal; color: var(--cm26-brand-ink); }

:is(body.single-area, body.post-type-archive-area) #area-form .gfield_required > .gfield_required_text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

:is(body.single-area, body.post-type-archive-area) #area-form .gfield_required:has(> .gfield_required_text)::after {
	content: "*";
	content: "*" / "";
	font-weight: 600;
	color: var(--cm26-brand-ink);
}

/* Controls: 48px tall, 16px text (no iOS zoom), a 3:1 boundary. */
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields .gfield input[type="text"],
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields .gfield input[type="email"],
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields .gfield input[type="tel"],
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields .gfield input[type="url"],
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields .gfield select,
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields .gfield textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	background-color: #fdfaf7;
	color: var(--cm26-ink);
	border: 1.5px solid var(--cm26-input-border);
	border-radius: 5px;
	font-family: var(--cm26-font-body);
	font-size: 16px;
	line-height: 1.65;
}

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields .gfield textarea {
	height: 132px;
	min-height: 132px;
	resize: vertical;
}

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gfield input:focus-visible,
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gfield select:focus-visible,
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gfield textarea:focus-visible {
	border-color: var(--cm26-brand-ink);
	outline: 2px solid var(--cm26-brand-ink);
	outline-offset: 2px;
}

/* Service tiles: two up from a 340px viewport (a single column below, where
   a half-width tile would leave the label under 90px), at least 46px tall.
   The label's ::before covers the whole tile, so the tile is the hit area
   (well over 24 by 24) and still one native checkbox + label pair inside the
   field's fieldset/legend. Unchecked boxes keep a 3:1 border. */
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gfield_checkbox { gap: 8px; margin-top: 0; }

@media (min-width: 340px) {
	:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields .gfield--type-checkbox .gfield_checkbox {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 8px;
	}
}

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields .gfield .gchoice {
	position: relative;
	grid-template-columns: auto minmax(0, 1fr); /* the box sizes its own column (gravity-forms.css draws it at 22px) */
	align-items: center;
	gap: 8px;
	min-width: 0;
	min-height: 46px;
	margin: 0;
	padding: 8px 10px;
}

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gfield .gchoice label::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

@media (min-width: 640px) {
	:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields .gfield .gchoice { gap: 10px; padding: 10px 12px; }
}

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gchoice input[type="checkbox"] { margin: 0; }
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gfield input[type="checkbox"]:not(:checked) { border-color: #8a7a70; }

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gfield .gchoice label,
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gfield .gchoice .gform-field-label--type-inline {
	min-width: 0;
	margin: 0;
	font-family: var(--cm26-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--cm26-ink);
	overflow-wrap: break-word;
	hyphens: manual;
	cursor: pointer;
}

@media (min-width: 640px) {
	:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gfield .gchoice label,
	:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gfield .gchoice .gform-field-label--type-inline { font-size: 15px; line-height: 1.4; }
}

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gfield .ginput_container_consent { margin-inline: 0; }

/* Errors: message text + border + aria-invalid, never colour alone. */
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gfield_validation_message,
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .validation_message {
	margin-top: 6px;
	padding: 8px 10px;
	background: rgba(163, 34, 26, .07);
	border-left: 3px solid var(--cm26-error);
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--cm26-error);
}

/* (1,6,2): above the control rule's (1,5,2), so every control type turns red,
   not only the textarea. */
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields .gfield.gfield_error :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea),
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_fields .gfield :is(input[type], select, textarea)[aria-invalid="true"] { border-color: var(--cm26-error-line); }

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_validation_errors {
	margin: 0 0 20px;
	padding: 14px 16px;
	background: rgba(163, 34, 26, .07);
	border: 1px solid var(--cm26-error);
	border-radius: 6px;
}

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_validation_errors h2,
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_submission_error {
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--cm26-error);
}

/* Submit: the studio primary. Coral fill, #292725 text (5.20:1), 6px radius,
   full width, 48px tall. */
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_footer { margin-top: 24px; padding: 0; }

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_footer .gform_button,
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_footer input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0 22px;
	background: var(--studio-coral, #ff675b);
	color: var(--studio-charcoal, #292725);
	border: 1.5px solid transparent;
	border-radius: 6px;
	box-shadow: none;
	font-family: var(--cm26-font-display);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.65;
	cursor: pointer;
}

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_footer .gform_button:hover:not(:disabled),
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_footer .gform_button:focus-visible {
	background: #ff5747;
	color: var(--studio-charcoal, #292725);
}

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_footer .gform_button:focus-visible {
	outline: 3px solid var(--cm26-brand-ink);
	outline-offset: 3px;
}

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_button svg {
	width: 18px;
	height: 18px;
	margin-right: -4px;
	transition: transform .2s var(--cm26-ease);
}

:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_button:hover svg,
:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_button:focus-visible svg { transform: translateX(3px); }

/* Confirmation (replaces the wrapper on success). */
:is(body.single-area, body.post-type-archive-area) #area-form .gform_confirmation_message {
	padding: 18px 20px;
	border: 0;
	border-left: 3px solid var(--cm26-brand-ink);
	border-radius: 6px;
	background: var(--cm26-tint);
	color: var(--cm26-ink);
	font-size: 16px;
	line-height: 1.6;
}

:is(body.single-area, body.post-type-archive-area) #area-form .gform_confirmation_message:focus { outline: none; }
:is(body.single-area, body.post-type-archive-area) #area-form .gform_confirmation_message:focus-visible { outline: 2px solid var(--cm26-brand-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_button svg { transition: none; }
	:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_button:hover svg,
	:is(body.single-area, body.post-type-archive-area) #area-form .gform_wrapper .gform_button:focus-visible svg { transform: none; }
}


/* ---- 03-single.css ---- */
/* ==========================================================================
   03 SINGLE: the area detail page (single-area.php + template-parts/area/*)
   --------------------------------------------------------------------------
   Namespace .cm-as-* ("area single"), scoped under body.single-area. The
   legacy .cm-area-* rules in cm-interior.css (AREAS fragment) belong to the
   old template and are not reused here, so nothing below has to fight them.

   Bands: single-area.php alternates paper / .cm-band-sand-60 by rendered
   position, so no rule here sets a section background.

   Colour: coral is decorative only (tabs, rules, the hero field); every text
   accent is --cm-area-accent (#b8352b). Buttons are the studio .cm-btn set.
   ========================================================================== */

/* List resets for this template's own lists only; .cm-prose lists in the
   record's body copy keep their bullets. */
body.single-area :is(.cm-as-trust, .cm-as-hero-next-list, .cm-as-hero-badges, .cm-as-hero-office-list, .cm-as-pgrid, .cm-as-pcard-services, .cm-as-svc-grid, .cm-as-ind-list, .cm-as-ben-grid, .cm-as-steps, .cm-as-tags, .cm-as-near) {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* style.css gives every h3 padding-bottom:27px + margin-bottom:35px (and a
   60px uppercase face). Same approach as the 2026 COMPONENT HEADING RESET:
   our own heading classes only, so .cm-prose headings keep their rhythm. */
body.single-area :is(.cm-as-glance-title, .cm-as-pcard-title, .cm-as-svc-title, .cm-as-ben-title, .cm-as-step-title, .cm-as-cov-title, .cm-as-office-title) {
	padding: 0;
	margin-bottom: 0;
	text-transform: none;
}

/* ---- Hero ---------------------------------------------------------------- */

/* clip, not hidden: .cm-page-head and .cm-section are overflow:hidden, which
   makes each band a scroll container, and the sticky columns inside (hero
   copy, At a glance, office card) would never stick. clip still clips the
   orbitals and the coral field, without the scroll container. */
body.single-area .cm-as-hero,
body.single-area .cm-as > .cm-section {
	overflow: clip;
}

/* style.css sets `html, body { overflow-x: hidden }`; on BODY that makes a
   scroll container that never scrolls, so nothing on the page can stick.
   Same fix as the landing page and team single (cm-lp.css:17-20,
   cm-interior.css:7053). The Get Started modal locks scrolling with an
   inline style, which still wins over this. */
body.single-area {
	overflow-x: clip;
	overflow-y: visible;
}

body.single-area .cm-as-hero-grid {
	gap: clamp(32px, 4vw, 56px);
}

body.single-area .cm-as-hero-copy {
	min-width: 0;
}

body.single-area .cm-as-hero .cm-h-page {
	max-width: 17ch;
	text-wrap: balance;
}

body.single-area .cm-as-hero .cm-lede {
	max-width: 46ch;
}

body.single-area .cm-as-hero-intro {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	max-width: 52ch;
	margin: 20px 0 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--cm-area-body);
}

body.single-area .cm-as-hero-intro-icon {
	flex: none;
	margin-top: 3px;
	color: var(--cm-area-accent);
}

body.single-area .cm-as-hero-actions {
	margin-top: 26px;
}

body.single-area .cm-as-call {
	gap: 8px;
}

body.single-area .cm-as-call .cm-icon {
	color: var(--cm-area-accent);
}

body.single-area .cm-as-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 0;
	max-width: 520px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--cm-area-rule);
	font-size: 14px;
	font-weight: 600;
	color: var(--cm-area-ink);
}

body.single-area .cm-as-trust li + li::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 12px;
	border-radius: 50%;
	background: var(--cm-area-coral);
	vertical-align: middle;
}

/* Desktop proof group under the trust line: the first real project, the
   platform partner badges and our offices, so the copy column is not a
   short block beside a very tall form card. Hidden below 1024px, where the
   client work section follows the form directly and the footer carries
   the partner strip. */
body.single-area .cm-as-hero-more {
	display: none;
}

@media (min-width: 1024px) {
	body.single-area .cm-as-hero-more {
		display: grid;
		gap: 26px;
		max-width: 520px;
		margin-top: 36px;
	}

	body.single-area .cm-as-hero-proof {
		display: flex;
		gap: 18px;
		align-items: center;
		padding: 14px;
		border: 1px solid var(--cm-area-rule);
		border-radius: var(--cm-area-radius);
		background: var(--cm-area-card);
		color: var(--cm-area-ink);
		text-decoration: none;
		box-shadow: 0 14px 32px -26px rgba(41, 39, 37, .5);
		transition: border-color .15s ease, box-shadow .15s ease;
	}

	body.single-area .cm-as-hero-proof:hover {
		border-color: rgba(41, 39, 37, .28);
		box-shadow: 0 18px 36px -24px rgba(41, 39, 37, .55);
	}
}

body.single-area .cm-as-hero-proof-media {
	flex: 0 0 168px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: 4px;
	background: var(--cm-area-panel);
}

body.single-area .cm-as-hero-proof-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

body.single-area .cm-as-hero-proof-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

body.single-area .cm-as-hero-proof-kicker {
	font-family: var(--cm26-font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cm-area-accent);
}

body.single-area .cm-as-hero-proof-title {
	font-family: var(--cm26-font-display);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
}

body.single-area .cm-as-hero-proof:hover .cm-as-hero-proof-title {
	text-decoration-color: currentColor;
}

body.single-area .cm-as-hero-proof-where {
	display: flex;
	gap: 6px;
	align-items: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--cm-area-muted);
}

body.single-area .cm-as-hero-proof-where .cm-icon {
	flex: none;
	color: var(--cm-area-accent);
}

body.single-area .cm-as-hero-next-list {
	display: grid;
	gap: 12px;
	counter-reset: none;
}

body.single-area .cm-as-hero-next-list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.55;
	color: var(--cm-area-body);
}

body.single-area .cm-as-hero-next-num {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--cm-area-card);
	box-shadow: inset 0 0 0 1px var(--cm-area-rule);
	font-family: var(--cm26-font-display);
	font-size: 13px;
	font-weight: 700;
	color: var(--cm-area-accent);
}

body.single-area .cm-as-hero-more-label {
	margin: 0 0 12px;
	font-family: var(--cm26-font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cm-area-muted);
}

/* Partner artwork always sits on white, never filtered or recoloured
   (same rule as the landing page and the footer strip). */
body.single-area .cm-as-hero-badges {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

body.single-area .cm-as-hero-badge {
	display: grid;
	place-items: center;
	height: 68px;
	padding: 5px 12px;
	border: 1px solid var(--cm-area-rule);
	border-radius: 6px;
	background: #fff;
}

body.single-area .cm-as-hero-badge img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 30px;
}

body.single-area .cm-as-hero-badge--google img {
	max-height: 58px;
}

body.single-area .cm-as-hero-more-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 4px;
	font-size: 14.5px;
	font-weight: 600;
}

body.single-area .cm-as-hero-offices {
	padding-top: 22px;
	border-top: 1px solid var(--cm-area-rule);
}

body.single-area .cm-as-hero-office-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	font-size: 15px;
	font-weight: 600;
	color: var(--cm-area-ink);
}

body.single-area .cm-as-hero-office-list li {
	display: flex;
	gap: 6px;
	align-items: center;
}

body.single-area .cm-as-hero-office-list .cm-icon {
	flex: none;
	color: var(--cm-area-accent);
}

body.single-area .cm-as-hero-office-hq {
	margin-left: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--cm-area-panel);
	font-size: 12px;
	font-weight: 700;
	color: var(--cm-area-muted);
}

/* The form column: a coral field sits behind the card's upper right, the
   same move as the landing page hero, smaller. Decorative only. */
body.single-area .cm-as-hero-form {
	position: relative;
	min-width: 0;
}

body.single-area .cm-as-hero-form::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 36px;
	right: -12px;
	width: 62%;
	height: min(340px, 60%);
	border-radius: 8px;
	background: var(--cm-area-coral);
	opacity: .92;
	pointer-events: none;
}

body.single-area .cm-as-hero-form #area-form {
	z-index: 1;
}

@media (min-width: 1024px) {
	body.single-area .cm-as-hero-grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
		align-items: start;
	}

	/* The form is the tall column; the copy waits beside it. */
	body.single-area .cm-as-hero-copy {
		position: sticky;
		top: calc(var(--cm26-header-h, 72px) + 40px);
		padding-top: 8px;
	}

	body.single-area .cm-as-hero-form::before {
		top: -18px;
		right: -28px;
		width: 58%;
		height: 420px;
	}
}

@media (min-width: 1280px) {
	body.single-area .cm-as-hero-form::before { right: -48px; }
}

/* ---- Market situation + At a glance ----------------------------------- */

body.single-area .cm-as-market-grid {
	display: grid;
	gap: 40px;
}

body.single-area .cm-as-prose {
	min-width: 0;
}

body.single-area .cm-as-prose > :first-child {
	margin-top: 0;
}

body.single-area .cm-as-glance {
	align-self: start;
	padding: 22px 22px 8px;
	border: 1px solid var(--cm-area-rule);
	border-radius: var(--cm-area-radius);
	background: var(--cm-area-card);
}

/* No body copy: the card runs the full wrap and the rows sit side by side
   from 768px, instead of a 560px card beside an empty half band. */
@media (min-width: 768px) {
	body.single-area .cm-as-market-grid--solo .cm-as-glance-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		column-gap: 32px;
	}

	body.single-area .cm-as-market-grid--solo .cm-as-glance-row,
	body.single-area .cm-as-market-grid--solo .cm-as-glance-row:first-child {
		border-top: 1px solid var(--cm-area-line);
	}

	body.single-area .cm-as-market-grid--solo .cm-as-glance {
		padding: 24px 28px 12px;
	}
}

body.single-area .cm-as-glance-title {
	margin: 0 0 6px;
	font-family: var(--cm26-font-display);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cm-area-muted);
}

body.single-area .cm-as-glance-list {
	margin: 0;
}

body.single-area .cm-as-glance-row {
	padding: 14px 0;
	border-top: 1px solid var(--cm-area-line);
}

body.single-area .cm-as-glance-row:first-child {
	border-top: 0;
}

body.single-area .cm-as-glance-row dt {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--cm-area-muted);
}

body.single-area .cm-as-glance-row dd {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--cm-area-ink);
}

body.single-area .cm-as-glance-link {
	align-self: flex-start;
	font-size: 14px;
	font-weight: 600;
	color: var(--cm-area-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.single-area .cm-as-glance-link:hover {
	color: var(--cm26-brand-hover, #9c2c23);
}

@media (min-width: 1024px) {
	body.single-area .cm-as-market-grid {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: clamp(48px, 6vw, 88px);
	}

	body.single-area .cm-as-market-grid--solo {
		grid-template-columns: minmax(0, 1fr);
	}

	body.single-area .cm-as-market-grid--solo .cm-as-glance {
		position: static;
	}

	body.single-area .cm-as-glance {
		position: sticky;
		top: calc(var(--cm26-header-h, 72px) + 24px);
	}
}

/* ---- Shared card surface (projects, services) ------------------------- */

body.single-area .cm-as-pcard,
body.single-area .cm-as-svc {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--cm-area-rule);
	border-radius: 8px;
	background: var(--cm-area-card);
	transition: border-color .2s ease, transform .25s var(--cm26-ease, ease), box-shadow .25s ease;
}

/* The title link covers the whole card: one link per card, one tab stop. */
body.single-area .cm-as-pcard-link::after,
body.single-area .cm-as-svc-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

body.single-area .cm-as-pcard-link,
body.single-area .cm-as-svc-link {
	color: inherit;
	text-decoration: none;
}

body.single-area .cm-as-pcard-link:focus-visible,
body.single-area .cm-as-svc-link:focus-visible {
	outline: none;
}

body.single-area .cm-as-pcard:has(:focus-visible),
body.single-area .cm-as-svc:has(:focus-visible) {
	outline: 3px solid var(--cm-area-accent);
	outline-offset: 3px;
}

body.single-area .cm-as-pcard-more,
body.single-area .cm-as-svc-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--cm-area-accent);
}

body.single-area .cm-as-pcard-more .cm-icon,
body.single-area .cm-as-svc-more .cm-icon {
	transition: transform .2s ease;
}

@media (hover: hover) and (pointer: fine) {
	body.single-area .cm-as-pcard:hover,
	body.single-area .cm-as-svc:hover {
		border-color: var(--cm-area-accent);
		transform: translateY(-3px);
		box-shadow: 0 18px 36px -24px rgba(41, 39, 37, .35);
	}

	body.single-area .cm-as-pcard:hover .cm-as-pcard-more .cm-icon,
	body.single-area .cm-as-svc:hover .cm-as-svc-more .cm-icon {
		transform: translateX(3px);
	}

	body.single-area .cm-as-pcard:hover .cm-as-pcard-desk img {
		transform: scale(1.02);
	}
}

/* ---- Client work ------------------------------------------------------- */

body.single-area .cm-as-pgrid {
	display: grid;
	gap: 24px;
}

@media (min-width: 768px) {
	body.single-area .cm-as-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* One project: a wide card, screenshot left, details right, rather than
	   one narrow card beside a blank column. */
	body.single-area .cm-as-pgrid--1 { grid-template-columns: minmax(0, 960px); }
	body.single-area .cm-as-pgrid--1 .cm-as-pcard { flex-direction: row; }
	body.single-area .cm-as-pgrid--1 .cm-as-pcard-media {
		display: flex;
		flex: 0 0 58%;
		flex-direction: column;
		justify-content: flex-end;
		padding-top: 28px;
		border-right: 1px solid var(--cm-area-rule);
		border-bottom: 0;
	}
	body.single-area .cm-as-pgrid--1 .cm-as-pcard-body { justify-content: center; padding: 28px 30px; }
	body.single-area .cm-as-pgrid--1 .cm-as-pcard-more { margin-top: 18px; }
}

/* Three projects: three columns from 768px, so tablets do not leave the
   third card alone on a second row. */
@media (min-width: 768px) {
	body.single-area .cm-as-pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

@media (min-width: 1024px) {
	body.single-area .cm-as-pgrid--3 { gap: 24px; }
}

body.single-area .cm-as-pcard {
	overflow: hidden;
}

body.single-area .cm-as-pcard-media {
	position: relative;
	padding: 22px 22px 0;
	background:
		radial-gradient(120% 90% at 100% 0, rgba(255, 103, 91, .16), transparent 60%),
		var(--cm-area-panel);
	border-bottom: 1px solid var(--cm-area-rule);
}

body.single-area .cm-as-pcard--phone .cm-as-pcard-media {
	padding-right: 64px;
}

body.single-area .cm-as-pcard-desk {
	overflow: hidden;
	border: 1px solid rgba(41, 39, 37, .14);
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	background: #fff;
	box-shadow: 0 -1px 0 rgba(255, 255, 255, .6) inset, 0 10px 24px -16px rgba(41, 39, 37, .4);
}

body.single-area .cm-as-pcard-bar {
	display: flex;
	gap: 5px;
	align-items: center;
	height: 20px;
	padding: 0 9px;
	background: #f6f1ec;
	border-bottom: 1px solid rgba(41, 39, 37, .08);
}

body.single-area .cm-as-pcard-bar i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #d5c8bd;
}

body.single-area .cm-as-pcard-desk img,
body.single-area .cm-as-pcard-ph {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: top center;
	transition: transform .4s var(--cm26-ease, ease);
}

body.single-area .cm-as-pcard-ph {
	display: grid;
	place-items: center;
	padding: 16px;
	font-family: var(--cm26-font-display);
	font-weight: 700;
	text-align: center;
	color: var(--cm-area-muted);
}

body.single-area .cm-as-pcard-phone {
	position: absolute;
	right: 16px;
	bottom: 0;
	width: 72px;
	overflow: hidden;
	border: 4px solid var(--studio-charcoal, #292725);
	border-bottom-width: 0;
	border-radius: 14px 14px 0 0;
	background: #fff;
	box-shadow: -8px 10px 22px -12px rgba(41, 39, 37, .55);
}

body.single-area .cm-as-pcard-phone img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 17;
	object-fit: cover;
	object-position: top center;
}

@media (min-width: 768px) {
	body.single-area .cm-as-pcard--phone .cm-as-pcard-media { padding-right: 76px; }
	body.single-area .cm-as-pcard-phone { width: 84px; }
}

body.single-area .cm-as-pcard-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 18px 22px 22px;
}

body.single-area .cm-as-pcard-where {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--cm-area-muted);
}

body.single-area .cm-as-pcard-where .cm-icon {
	flex: none;
	margin-top: 2px;
	color: var(--cm-area-accent);
}

body.single-area .cm-as-pcard-title {
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: clamp(19px, 1.6vw, 21px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--cm-area-ink);
}

body.single-area .cm-as-pcard-services {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

body.single-area .cm-as-pcard-services li {
	padding: 3px 9px;
	border: 1px solid var(--cm-area-line);
	border-radius: 999px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--cm-area-body);
	background: var(--cm26-paper, #fbf8f5);
}

body.single-area .cm-as-reviews {
	margin-top: 32px;
}

body.single-area .cm-as-rev-meta {
	display: block;
	font-size: 13.5px;
	color: var(--cm-area-muted);
}

/* ---- Services ---------------------------------------------------------- */

body.single-area .cm-as-svc-grid {
	display: grid;
	gap: 20px;
}

@media (min-width: 640px) {
	body.single-area .cm-as-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	body.single-area .cm-as-svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body.single-area .cm-as-svc {
	gap: 12px;
	padding: 24px;
}

body.single-area .cm-as-svc-title {
	margin: 4px 0 0;
	font-family: var(--cm26-font-display);
	font-size: clamp(18px, 1.5vw, 20px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--cm-area-ink);
}

body.single-area .cm-as-svc-copy {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--cm-area-body);
}

body.single-area .cm-as-svc-more {
	padding-top: 4px;
}

/* ---- Industries -------------------------------------------------------- */

body.single-area .cm-as-ind-grid {
	display: grid;
	gap: 8px;
}

body.single-area .cm-as-ind-list {
	display: grid;
	gap: 10px;
}

@media (min-width: 480px) {
	body.single-area .cm-as-ind-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	body.single-area .cm-as-ind-grid {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
		gap: clamp(40px, 5vw, 72px);
		align-items: start;
	}

	body.single-area .cm-as-ind-grid .cm-section-head {
		margin-bottom: 0;
	}
}

body.single-area .cm-as-ind {
	display: flex;
	gap: 12px;
	align-items: center;
	min-width: 0;
	padding: 10px 14px 10px 10px;
	border: 1px solid var(--cm-area-rule);
	border-radius: var(--cm-area-radius);
	background: var(--cm-area-card);
}

body.single-area .cm-as-ind-name {
	min-width: 0;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cm-area-ink);
}

/* ---- Benefits ---------------------------------------------------------- */

body.single-area .cm-as-ben-grid {
	display: grid;
	gap: 28px;
}

@media (min-width: 640px) {
	body.single-area .cm-as-ben-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}

@media (min-width: 1024px) {
	body.single-area .cm-as-ben-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body.single-area .cm-as-ben-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

body.single-area .cm-as-ben {
	position: relative;
	min-width: 0;
	padding-top: 22px;
	border-top: 1px solid var(--cm-area-rule);
}

body.single-area .cm-as-ben::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 36px;
	height: 3px;
	background: var(--cm-area-coral);
}

body.single-area .cm-as-ben-title {
	margin: 16px 0 0;
	font-family: var(--cm26-font-display);
	font-size: 18.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cm-area-ink);
}

body.single-area .cm-as-ben-copy {
	margin: 8px 0 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--cm-area-body);
}

/* ---- Working together -------------------------------------------------- */

body.single-area .cm-as-steps {
	display: grid;
	gap: 26px;
	counter-reset: none;
}

/* 640 to 1023: a six-track grid, three steps on the first row and two
   wider ones on the second, so step 05 is never alone beside a blank cell. */
@media (min-width: 640px) and (max-width: 1023.98px) {
	body.single-area .cm-as-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 28px; }
	body.single-area .cm-as-step { grid-column: span 2; }
	body.single-area .cm-as-step:nth-child(n+4) { grid-column: span 3; }
}

@media (min-width: 1024px) {
	body.single-area .cm-as-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; }
}

body.single-area .cm-as-step {
	position: relative;
	min-width: 0;
	padding-top: 18px;
	border-top: 1px solid var(--cm-area-rule);
}

body.single-area .cm-as-step::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cm-area-coral);
	box-shadow: 0 0 0 4px var(--cm26-paper, #fbf8f5);
}

body.single-area .cm-band-sand-60 .cm-as-step::before {
	box-shadow: 0 0 0 4px #f7f3ef;
}

body.single-area .cm-as-step-num {
	display: block;
	font-family: var(--cm26-font-display);
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--cm-area-accent);
}

body.single-area .cm-as-step-title {
	margin: 12px 0 0;
	font-family: var(--cm26-font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cm-area-ink);
}

body.single-area .cm-as-step-copy {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cm-area-body);
}

/* ---- Coverage + office ------------------------------------------------- */

body.single-area .cm-as-cov-grid {
	display: grid;
	gap: 40px;
}

@media (min-width: 1024px) {
	body.single-area .cm-as-cov-grid {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: clamp(48px, 5vw, 72px);
		align-items: start;
	}

}

/* No counties or communities: the office card takes the full wrap, text
   left and the map right, instead of a 560px stack beside an empty half. */
@media (min-width: 1024px) {
	body.single-area .cm-as-cov-grid--solo { grid-template-columns: minmax(0, 1fr); }
	/* relative, not static: the card stays the containing block of its coral
	   ::before accent (sticky is dropped because there is no list to scroll
	   beside). */
	body.single-area .cm-as-cov-grid--solo .cm-as-office { position: relative; top: auto; padding: 32px 32px 30px; }
	body.single-area .cm-as-cov-grid--solo .cm-as-office::before { left: 32px; }
	body.single-area .cm-as-cov-grid--solo .cm-as-office--map {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: clamp(32px, 4vw, 56px);
		align-items: center;
	}
	body.single-area .cm-as-cov-grid--solo .cm-as-office-body { max-width: 52ch; }
	body.single-area .cm-as-cov-grid--solo .cm-as-office--map .cm-as-map { margin-top: 0; aspect-ratio: 16 / 9; }
	/* Solo remote card: copy left, the two next steps right. */
	body.single-area .cm-as-cov-grid--solo .cm-as-office--actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: clamp(32px, 4vw, 56px);
		align-items: center;
	}
	body.single-area .cm-as-cov-grid--solo .cm-as-office--actions .cm-as-office-actions {
		flex-direction: column;
		align-items: stretch;
		margin-top: 0;
	}
}

/* Next steps on a solo remote office card (stacked under the copy below
   1024px). */
body.single-area .cm-as-office-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

@media (max-width: 639.98px) {
	body.single-area .cm-as-office-actions { flex-direction: column; align-items: stretch; }
}

body.single-area .cm-as-cov-main {
	display: grid;
	gap: 36px;
	min-width: 0;
}

body.single-area .cm-as-cov-title {
	margin: 0 0 14px;
	font-family: var(--cm26-font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cm-area-ink);
}

body.single-area .cm-as-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

body.single-area .cm-as-tags li {
	padding: 6px 12px;
	border: 1px solid var(--cm-area-rule);
	border-radius: var(--cm-area-radius-sm);
	background: var(--cm-area-card);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cm-area-ink);
}

body.single-area .cm-as-near {
	display: grid;
	column-gap: 32px;
}

@media (min-width: 640px) {
	body.single-area .cm-as-near { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.single-area .cm-as-near-item {
	min-width: 0;
	padding: 16px 0 18px;
	border-top: 1px solid var(--cm-area-line);
}

body.single-area .cm-as-near-name {
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cm-area-ink);
}

body.single-area .cm-as-near-name a {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: var(--cm-area-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.single-area .cm-as-near-name a:hover {
	color: var(--cm26-brand-hover, #9c2c23);
}

body.single-area .cm-as-near-dist {
	margin: 3px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--cm-area-muted);
}

body.single-area .cm-as-near-copy {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cm-area-body);
}

body.single-area .cm-as-office {
	position: relative;
	min-width: 0;
	padding: 26px 22px 24px;
	border: 1px solid rgba(41, 39, 37, .12);
	border-radius: 8px;
	background: var(--cm-area-card);
	box-shadow: 0 18px 40px -28px rgba(41, 39, 37, .45);
}

@media (min-width: 1024px) {
	body.single-area .cm-as-office {
		position: sticky;
		top: calc(var(--cm26-header-h, 72px) + 24px);
	}
}

body.single-area .cm-as-office::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 22px;
	width: 56px;
	height: 4px;
	background: var(--cm-area-coral);
}

body.single-area .cm-as-office-kicker {
	margin: 0 0 8px;
	font-family: var(--cm26-font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cm-area-accent);
}

body.single-area .cm-as-office-title {
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: 21px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--cm-area-ink);
}

body.single-area .cm-as-office-copy {
	margin: 10px 0 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--cm-area-body);
}

body.single-area .cm-as-office-address {
	display: flex;
	gap: 10px;
	margin: 16px 0 0;
	font-size: 15.5px;
	font-style: normal;
	line-height: 1.55;
	color: var(--cm-area-ink);
}

body.single-area .cm-as-office-address .cm-icon {
	flex: none;
	margin-top: 3px;
	color: var(--cm-area-accent);
}

body.single-area .cm-as-office-call {
	margin: 16px 0 0;
	font-weight: 600;
}

body.single-area .cm-as-office-maps {
	margin: 12px 0 0;
	font-size: 15px;
}

/* Map: the box is reserved before anything loads, so the iframe drops into
   exactly the same space. */
body.single-area .cm-as-map {
	position: relative;
	margin-top: 20px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--cm-area-rule);
	border-radius: 6px;
	background-color: var(--cm-area-panel);
	background-image:
		linear-gradient(rgba(41, 39, 37, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(41, 39, 37, .06) 1px, transparent 1px),
		linear-gradient(32deg, transparent 46%, rgba(255, 255, 255, .7) 46%, rgba(255, 255, 255, .7) 50%, transparent 50%);
	background-size: 28px 28px, 28px 28px, 100% 100%;
}

/* Below 1024 the office card runs full width; a 4:3 box would be huge. */
@media (min-width: 640px) and (max-width: 1023.98px) {
	body.single-area .cm-as-map { aspect-ratio: 16 / 7; }
}

body.single-area .cm-as-map-ph {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	justify-content: center;
	padding: 16px;
	text-align: center;
}

body.single-area .cm-as-map-pin {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--cm-area-card);
	color: var(--cm-area-accent);
	box-shadow: 0 8px 18px -10px rgba(41, 39, 37, .5);
}

body.single-area .cm-as-map-ph .cm-as-map-btn {
	min-height: 44px;
	background: var(--cm-area-card);
}

body.single-area .cm-as-map-btn[hidden] {
	display: none;
}

body.single-area .cm-as-map-note {
	max-width: 30ch;
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	text-wrap: balance;
	color: var(--cm-area-muted);
}

body.single-area .cm-as-map-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---- FAQ ---------------------------------------------------------------- */

body.single-area .cm-as-faqs .cm-faq-more {
	margin-top: 16px;
	color: var(--cm-area-body);
}

/* ---- Closing CTA -------------------------------------------------------- */

body.single-area .cm-as-cta {
	padding-top: clamp(40px, 6vw, 72px);
	padding-bottom: clamp(40px, 6vw, 72px);
}

/* The area actions row ("Tell us about your project" + "Call ...") is about
   460px wide, so the shared 768px two column grid (1.4fr auto) left the
   heading 95 to 150px and broke words mid-word. Stay stacked until 1024px,
   then let the heading column shrink safely beside the buttons. */
body.single-area .cm-as-cta .cm-cta-inner {
	grid-template-columns: minmax(0, 1fr);
}

body.single-area .cm-as-cta .cm-cta-inner h2 {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: manual;
}

@media (min-width: 1024px) {
	body.single-area .cm-as-cta .cm-cta-inner {
		grid-template-columns: minmax(0, 1.4fr) auto;
	}
}

/* ---- Phones: swipe rails (cm-rail.js) ---------------------------------- */

@media (max-width: 767.98px) {
	/* The grids above are (0,2,1); the shared .cm-rail is (0,1,0), so the
	   flex row has to be restated here or the cards just stack. */
	body.single-area :is(.cm-as-pgrid, .cm-as-svc-grid, .cm-as-ben-grid, .cm-as-reviews).cm-rail {
		display: flex;
		gap: var(--cm-rail-gap, 14px);
	}

	body.single-area .cm-as-pgrid.cm-rail { --cm-rail-w: 86%; padding-block: 4px 22px; align-items: stretch; }
	body.single-area .cm-as-svc-grid.cm-rail { --cm-rail-w: 82%; padding-block: 4px 22px; align-items: stretch; }
	body.single-area .cm-as-ben-grid.cm-rail { --cm-rail-w: 80%; --cm-rail-gap: 24px; padding-block: 4px 12px; }
	body.single-area .cm-as-reviews.cm-rail { --cm-rail-w: 86%; }

	body.single-area .cm-as-pgrid.cm-rail + .cm-rail-ui,
	body.single-area .cm-as-svc-grid.cm-rail + .cm-rail-ui { margin-top: -6px; }
}

/* The benefits rail has no links inside, so the list itself takes focus
   for keyboard scrolling (tabindex in benefits.php). */
body.single-area .cm-as-ben-grid.cm-rail:focus-visible {
	outline: 2px solid var(--cm26-brand-ink, #292725);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	body.single-area .cm-as-pcard,
	body.single-area .cm-as-svc,
	body.single-area .cm-as-pcard-desk img {
		transition: none;
	}

	body.single-area .cm-as-pcard:hover,
	body.single-area .cm-as-svc:hover {
		transform: none;
	}
}