/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ============================================================
 * TAB Property Enhancement — Brand tokens not in ACSS
 * ============================================================
 * Cream:        page/section background (paired with body-bg-color)
 * Accent Green: sparse use only (≤5%) — landscaping/eco/success accents
 * Accent Blue:  sparse use only (≤5%) — pool/water/data accents
 * Kept out of ACSS palette so they don't appear in the Bricks color
 * picker — usage stays intentional, not one-click.
 */
:root {
	--cream: #F8F6F3;
	--accent-green: #34875D;
	--accent-blue: #1EA1D2;
}

/* ============================================================
 * Heading sizes — brand guide ladder
 * ============================================================
 * Brand guide ladder is intentionally irregular (56→40→28→22→18→16)
 * and doesn't fit any single heading-scale ratio, so we override
 * --h1..--h6 directly. ACSS continues to handle line-height,
 * letter-spacing, font-weight, color, and font-family — all
 * configured in `automatic_css_settings`.
 */
:root {
	--h1: 3.5rem;   /* 56px — Hero */
	--h2: 2.5rem;   /* 40px — Section */
	--h3: 1.75rem;  /* 28px — Subhead */
	--h4: 1.375rem; /* 22px */
	--h5: 1.125rem; /* 18px */
	--h6: 1rem;     /* 16px */
}
@media (max-width: 768px) {
	:root {
		--h1: 2.5rem;   /* 40px */
		--h2: 1.875rem; /* 30px */
		--h3: 1.375rem; /* 22px */
		--h4: 1.125rem; /* 18px */
		--h5: 1rem;     /* 16px */
		--h6: 0.875rem; /* 14px */
	}
}

/* Body line-height — ACSS schema doesn't expose a global key for this */
body {
	line-height: 1.65;
}

/* ============================================================
 * Reading measure — long-form text width constraint
 * ============================================================
 * 72ch is the ideal line-length for prose readability. Used on
 * blog post bodies, long-form content sections. Distinct from
 * --content-width (~85rem), which constrains layout sections.
 * Not an ACSS-native token.
 */
:root {
	--reading-measure: 72ch;
}

/* h4 line-height — ACSS schema is missing h4-line-height (h1/h2/h3/h5/h6 exist) */
h4 {
	line-height: 1.4;
}

/* ============================================================
 * Eyebrow / Section Label utility — canonical
 * ============================================================
 * Brand spec: Jost 700, 11px, uppercase, 3px tracking. Color is
 * context-aware for WCAG 2.1 AA (gold-as-text is dark-bg-only per
 * docs/accessibility.md):
 *   • base (light / cream sections) → bronze (--primary), AA-safe
 *   • charcoal hero / dark-cta sections → gold (--secondary), AA on dark
 *   • home-hero slides → white
 * One canonical class; section context resolves the color below, so
 * individual sections don't need bespoke eyebrow classes.
 * Used for section labels, category tags above headings, and similar
 * small structural labels.
 */
.eyebrow {
	font-family: 'Jost', sans-serif;
	font-weight: 700;
	font-size: 0.6875rem; /* 11px */
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--primary); /* bronze — AA-safe on cream/light (the common case) */
	line-height: 1.4;
}

/* Eyebrows on charcoal / dark sections → gold (brand section-label color, AA on dark) */
.about-hero .eyebrow,
.hero .eyebrow,
.service-hero .eyebrow,
.reviews-hero .eyebrow,
.thankyou-hero .eyebrow,
.dark-cta .eyebrow,
.awards .eyebrow,
.our-process__materials .eyebrow {
	color: var(--secondary);
}

/* Homepage hero slides use white eyebrows */
.home-hero .eyebrow {
	color: var(--white);
}

/* ============================================================
 * Defensive cascade override — multi-column flex blocks
 * ============================================================
 * Bricks `@layer bricks { .brxe-block { flex-direction: column;
 * flex-wrap: wrap } }` defaults silently win over non-layered
 * Global Class settings on this stack. Doubled-class + !important
 * forces row layout on action clusters that need horizontal flow.
 */

/* Defensive cascade override — wrapper-block-as-figure margin reset
 * ------------------------------------------------------------
 * Bricks frontend.min.css ships UA-default-mimic `figure { margin: 1em 40px }`
 * and zeros it ONLY for `figure.brxe-image` (image-element-as-figure pattern).
 * Our wrapper-block-as-figure pattern (block element with tag="figure", used
 * for captioned photos per the image/figure decision tree case (c)) renders
 * as `<figure class="brxe-block …">` and does NOT match that reset, so the
 * UA margin survives — visible as ~16px vertical + 40px horizontal cream
 * gutter inside the photo's container.
 * Mirrors Bricks' own `figure.brxe-image { margin: 0 }` for the block variant
 * so future captioned photos don't re-hit this. Documented in stack-gotchas.md.
 */
figure.brxe-block {
	margin: 0;
}

/* ============================================================
 * About — Story section: inline-element styling
 * ============================================================
 * Story h2 has an <em> ("one project at a time") and the eyebrow
 * meta has a <strong> ("18 Years"). Splitting into separate Bricks
 * elements would break the heading semantics — these two scoped
 * rules keep the markup natural.
 */
.story__title em {
	font-style: normal;
	color: var(--primary);
}
.story__eyebrow-meta strong {
	color: var(--base);
	font-weight: 700;
}

/* ============================================================
 * Card box-shadow — applied to the white-bg card utilities
 * ============================================================
 * Bricks _boxShadow setting wouldn't accept rgba() reliably
 * (compiled to `transparent` once already), so the shadow lives
 * here. One rule covers all card variants — `card-gold-top` and
 * `card-gold-left` shared utilities, plus `team__card` (gold
 * bottom border, section-scoped on About).
 */
.card-gold-top,
.card-gold-left,
.card-gold-bottom {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* ============================================================
 * Hero h1 — italic gold accent on <em>
 * ============================================================
 * Hero headlines wrap an emphasis word/phrase in <em> with italic
 * + gold styling for visual punch. Splitting into separate heading
 * elements would break the semantic h1.
 *
 * Applied to: .hero__title (About / Our Process / Contact static
 * heroes) and .home-hero__slide-title (homepage slider headlines).
 * Append new selectors here when other heros pick up the same em.
 */
.hero__title em,
.home-hero__slide-title em {
	font-style: italic;
	color: var(--secondary);
	font-weight: 600;
}

/* TAB Difference h2 — bronze italic on <em>, distinct from hero gold em */
.our-process__difference-title em {
	font-style: italic;
	color: var(--primary);
	font-weight: 600;
}

/* Materials brands strip — gold highlight on <strong> brand names within
   the faded white-trans-50 base text. Splitting into separate elements
   would lose the inline rhythm with the bullet separators. */
.our-process__materials-brands-text strong {
	color: var(--secondary);
	font-weight: 700;
}

/* Home Intro h2 — bronze accent on <em>, non-italic.
   Pattern matches story__title em: emphasis without italicizing.
   Splitting "Elevated." into a separate element would break the heading. */
.home__intro-title em {
	font-style: normal;
	color: var(--primary);
}

/* ============================================================
 * Service Area — linked priority cities
 * ============================================================
 * The 7 priority cities (Aurora, Avon, Gates Mills, Hudson,
 * Hunting Valley, Pepper Pike, Strongsville) are <a>-linked to
 * their /locations/ pages within the otherwise-plain city list.
 * Treatment: bolder weight, charcoal color, gold underline —
 * visually marks them as "click me, this is more than text."
 */
.area__cities a {
	color: var(--base);
	font-weight: 600;
	border-bottom: 1px solid var(--secondary);
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s;
}
.area__cities a:hover {
	color: var(--primary);
	border-bottom-color: var(--primary);
}

/* ============================================================
 * Our Process — stage deliverables list (✓ bullets)
 * ============================================================
 * The "What you'll see from us" list inside each stage. ul/li
 * markup is hardcoded into a Bricks text element; this rule
 * suppresses the default disc bullets and replaces them with a
 * gold ✓ via ::before. li padding-left makes room for the mark.
 */
.our-process__stage-deliverables-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.our-process__stage-deliverables-list li {
	position: relative;
	padding: 6px 0 6px 22px;
	font-size: var(--text-s);
	line-height: 1.6;
}
.our-process__stage-deliverables-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--secondary);
	font-weight: 700;
}

/* ============================================================
 * Our Process — vertical connector line behind stage badges
 * ============================================================
 * Decorative gold-to-fade gradient line running behind the 6
 * circular stage badges, suggesting forward progression. Only
 * meaningful at desktop (where the 3-col grid keeps badges in
 * column 1); collapses to single-col at tablet_portrait, so
 * we hide it below 992px.
 */
@media (min-width: 992px) {
	.our-process__stages-list::before {
		content: '';
		position: absolute;
		left: 75px;
		top: 60px;
		bottom: 60px;
		width: 1px;
		background: linear-gradient(180deg, var(--secondary) 0%, var(--secondary) 30%, var(--neutral-light) 100%);
		z-index: 0;
	}
}

/* ============================================================
 * About — Process section: connector line behind step badges
 * ============================================================
 * Decorative gold rule that runs behind the 5 circular step
 * badges, suggesting forward motion. Only meaningful when the
 * 5-column layout is active — the grid breaks to 2-col at
 * 991px and 1-col at 767px, so we hide the connector below
 * that threshold.
 */
@media (min-width: 992px) {
	.process__steps {
		position: relative;
	}
	.process__steps::before {
		content: '';
		position: absolute;
		top: 32px;
		left: 10%;
		right: 10%;
		height: 1px;
		background: var(--secondary);
		opacity: 0.4;
		z-index: 0;
	}
	.process__step {
		position: relative;
		z-index: 1;
	}
}

/* ============================================================
 * Cert / proof badge — hover treatment
 * ============================================================
 * Bronze fill + white text + subtle 1px lift on hover. Currently
 * scoped to `home__why-tab-badge`; pattern is intended for reuse
 * across credential / cert / award badge clusters in other sections.
 *
 * Reuse plan: when this hover is applied to a second section's
 * badges, either (a) append the new BEM selector to both rule
 * blocks below, or (b) extract to a shared utility class such as
 * `.badge--proof` and apply it alongside the section-scoped BEM
 * class on each badge element.
 *
 * Contrast: bronze (--primary #7E6740) bg with white text = 4.99:1,
 * clears WCAG 2.1 AA. cursor: default signals "interactive UI
 * surface, not a link" since these badges aren't anchored to
 * destinations.
 */
.home__why-tab-badge {
	transition: background-color 0.2s, color 0.2s, translate 0.2s, box-shadow 0.2s;
	cursor: default;
}
.home__why-tab-badge:hover {
	background-color: var(--primary);
	color: var(--white);
	translate: 0 -1px;
	box-shadow: 0 4px 12px var(--primary-trans-30);
}

/* ============================================================
 * Accessibility utilities
 * ============================================================
 * Site-wide a11y rules applied across all pages and templates.
 * Documented in /docs/accessibility.md.
 */

/* :focus-visible — keyboard-only focus indicator
 * ------------------------------------------------------------
 * Bronze outline at 2px + 2px offset. Bronze (--primary) clears
 * AA contrast (4.99:1) against cream and white backgrounds.
 * On charcoal sections the offset gap reads against the dark bg;
 * the bronze ring against gap-then-charcoal still reads clearly.
 * :focus-visible only triggers on keyboard focus (modern browsers
 * suppress on click), so mouse users don't see persistent rings.
 */
*:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* prefers-reduced-motion — respect OS-level motion preferences
 * ------------------------------------------------------------
 * Users who've enabled "reduce motion" in their OS get near-instant
 * transitions and disabled animations. Affects accordion expand,
 * hover lifts, scroll-snap, etc. !important needed to override any
 * inline-set durations from Bricks element settings.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* .sr-only — visually-hidden, screen-reader-accessible utility
 * ------------------------------------------------------------
 * Apply to text that should be announced by SR but not visually
 * shown. Examples: hidden labels on icon-only buttons, supplementary
 * context on links ("opens in new tab"), section landmarks without
 * a visible heading.
 */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
 * Third-party widget hiding
 * ============================================================
 * reCAPTCHA badge — Google's TOS allows hiding the badge on the
 * condition that the disclaimer ("This site is protected by reCAPTCHA…")
 * appears on any page where reCAPTCHA loads. Disclaimer lives on the
 * Contact and Quote forms.
 */
.grecaptcha-badge {
	visibility: hidden;
}

/* ============================================================
 * Login / Lost Password / Reset Password pages
 * ============================================================
 * Layout shims for the custom-built /login/, /lost-password/, and
 * /reset-password/ pages. The form-field-grxbiw-0 selector is an
 * Elementor-era field ID baked into the current Bricks page content
 * for these three pages — preserved as-is until those pages are
 * rebuilt natively, at which point this whole block can go.
 */
.login__form .options-wrapper li {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}
.login__form .options-wrapper label[for=form-field-grxbiw-0] {
	font-size: var(--text-s);
	line-height: 100%;
}
.login__form .login__form-forgot-password {
	text-align: end;
	font-size: var(--text-s);
	font-weight: 600;
	color: var(--primary);
	line-height: 100%;
	text-decoration: none;
}
.login__form .form-group:nth-of-type(1),
.login__form .form-group:nth-of-type(2) {
	width: 100% !important;
}
.login__form .form-group:nth-of-type(3),
.login__form .form-group:nth-of-type(4) {
	width: 50% !important;
}

/* ===========================================================================
   WS FORM — Brand skin (ACSS variable remap)
   WS Form's Styler builds its entire skin from a small set of root --wsf-form-*
   theme vars, declared at :where([data-wsf-style-id]) (ZERO specificity), with
   every component var (‑dark/‑light shades, fields, buttons, borders, messages)
   derived from them via color-mix. So we theme by overriding the roots with
   ACSS brand tokens — a plain .wsf-form scope wins with no specificity fight,
   WS Form's tested layout + a11y stay intact, and it applies to all forms.
   Verified against WS Form Pro 1.11.5 / Styler style-id 1 (2026-05-31).
   Tokens: --primary bronze (interactive) · --secondary gold (structural) ·
   --base charcoal · --neutral slate · --cream surface · --white.
   =========================================================================== */
.wsf-form {
	/* --- Root theme remap (every component var derives from these) --- */
	--wsf-form-font-family:          var(--text-font-family);
	--wsf-form-font-size:            var(--text-s);
	--wsf-form-color-base:           var(--base);      /* ink: labels, legends, field text */
	--wsf-form-color-base-contrast:  var(--cream);     /* field bg + text on primary buttons */
	--wsf-form-color-primary:        var(--primary);   /* bronze: submit, selected chip, focus */
	--wsf-form-color-neutral:        var(--neutral);   /* slate: placeholder + unselected chip bg */
	--wsf-form-color-secondary:      var(--neutral);   /* WS Form "secondary" button (unused here) */
	--wsf-form-color-accent:         var(--secondary); /* gold: accent usage */

	/* --- Targeted component overrides where a flat recolor isn't enough --- */
	--wsf-field-color-background-focus: var(--white);          /* subtle lift on focus */
	--wsf-field-border-color:           var(--base-trans-20);  /* subtle border, not full charcoal */
	--wsf-field-border-radius:          var(--radius-s);
	--wsf-field-help-color:             var(--neutral);

	/* Labels + section legends use the heading font (Jost) */
	--wsf-field-label-font-family:    var(--heading-font-family);
	--wsf-field-label-font-weight:    600;
	--wsf-field-label-font-size:      var(--text-xs);
	--wsf-field-label-letter-spacing: .02em;
	--wsf-section-legend-font-family: var(--heading-font-family);
	--wsf-section-legend-font-weight: 700;
	--wsf-section-legend-font-size:   var(--h6);

	/* Buttons — submit + button-style choice chips */
	--wsf-field-button-font-family:    var(--heading-font-family);
	--wsf-field-button-border-radius:  var(--btn-radius);
	--wsf-field-button-letter-spacing: var(--btn-letter-spacing, 1.5px);
}

/* Required-field marker → structural gold (real class is .wsf-required-wrapper) */
.wsf-form .wsf-required-wrapper {
	color: var(--secondary);
}

/* Uppercase the submit button only — scoped to the real <button type=submit>,
   not the button-style choice chips (which are <label> content, not submits) */
.wsf-form .wsf-button[type="submit"] {
	text-transform: uppercase;
}

/* ===========================================================================
   WS FORM — Request a Quote (#5): choice-field treatments
   Matches wireframes/tab-quote-form.html. checkbox_style/radio_style cleared →
   WS Form renders native inputs (it styles the checkbox as a box itself via
   --wsf-field-checkbox-* vars). Doubled class (.tab-x.tab-x) is required to beat
   WS Form's own field CSS, which loads AFTER the child theme.
   Scoped by class_field_wrapper:
     tab-chips   → 2-col grid of cards; the native checkbox sits inside the
                   clickable card-label (no drawn pseudo-box)
     tab-toggles → flex-wrap pills; native radio dot hidden, label = pill
   DOM: .wsf-field-wrapper.<scope> > label.wsf-label (field label)
        > div > div[data-row-checkbox|radio] > input.wsf-field + label.wsf-label
   =========================================================================== */

/* --- Service checkboxes → 2-col grid of cards, native checkbox inside --- */
.tab-chips > div:has(> [data-row-checkbox]) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .65rem;
}
@media (max-width: 480px) {
	.tab-chips > div:has(> [data-row-checkbox]) { grid-template-columns: 1fr; }
}
.tab-chips [data-row-checkbox] { position: relative; }

/* brand WS Form's native checkbox box (zero-specificity vars → .tab-chips wins) */
.tab-chips {
	--wsf-field-checkbox-size: 18px;
	--wsf-field-checkbox-border-radius: 2px;
	--wsf-field-checkbox-color-background: var(--white);
	--wsf-field-checkbox-checked-color-background: var(--secondary);
	--wsf-field-checkbox-checkmark-color: var(--white);
}

/* place the native checkbox inside the card-label (override WS Form layout) */
.tab-chips.tab-chips [data-row-checkbox] > input.wsf-field {
	position: absolute;
	left: 1rem;
	top: 1rem;
	margin: 0;
	z-index: 1;
}

/* the label is the full clickable card */
.tab-chips.tab-chips [data-row-checkbox] > input.wsf-field + label.wsf-label {
	display: block;
	width: 100%;
	margin: 0;
	cursor: pointer;
	font-family: var(--text-font-family);
	font-weight: 500;
	font-size: var(--text-s);
	letter-spacing: 0;
	color: var(--base);
	background: var(--cream);
	border: 1px solid var(--base-trans-20);
	border-radius: var(--radius-s);
	padding: .85rem 1rem .85rem 2.7rem;
	transition: border-color .18s, background .18s, color .18s;
}
.tab-chips.tab-chips [data-row-checkbox] > input.wsf-field + label.wsf-label:hover {
	border-color: var(--secondary);
}
.tab-chips.tab-chips [data-row-checkbox] > input.wsf-field:checked + label.wsf-label {
	border-color: var(--primary);
	background: var(--primary-dark);
	color: var(--white);
}
.tab-chips.tab-chips [data-row-checkbox] > input.wsf-field:focus-visible + label.wsf-label {
	box-shadow: 0 0 0 3px var(--secondary-trans-20);
}

/* --- Contact-method / Best-time radios → flex-wrap pills --- */
.tab-toggles > div:has(> [data-row-radio]) {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}
.tab-toggles [data-row-radio] { position: relative; }

/* hide the native radio dot (beat WS Form opacity:1) */
.tab-toggles.tab-toggles [data-row-radio] > input[type=radio].wsf-field {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
	margin: 0;
	pointer-events: none;
}
.tab-toggles.tab-toggles [data-row-radio] > input.wsf-field + label.wsf-label {
	display: inline-block;
	margin: 0;
	cursor: pointer;
	font-family: var(--heading-font-family);
	font-weight: 600;
	font-size: var(--text-xs);
	letter-spacing: .02em;
	color: var(--base);
	background: var(--cream);
	border: 1px solid var(--base-trans-20);
	border-radius: var(--radius-s);
	padding: .7rem 1.15rem;
	transition: border-color .18s, background .18s, color .18s;
}
.tab-toggles.tab-toggles [data-row-radio] > input.wsf-field + label.wsf-label:hover {
	border-color: var(--secondary);
}
.tab-toggles.tab-toggles [data-row-radio] > input.wsf-field:checked + label.wsf-label {
	background: var(--primary-dark);
	border-color: var(--primary-dark);
	color: var(--white);
}
.tab-toggles.tab-toggles [data-row-radio] > input.wsf-field:focus-visible + label.wsf-label {
	box-shadow: 0 0 0 3px var(--secondary-trans-20);
}

/* =========================================================================
   Project gallery lightbox (shared module — markup in functions.php footer,
   behaviour in js/lightbox.js). Namespaced .tab-lightbox.
   ========================================================================= */
.tab-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--black-trans-70, rgba(0, 0, 0, .7));
	padding: clamp(1rem, 4vw, 3rem);
}
.tab-lightbox[data-open] {
	display: flex;
}
.tab-lightbox__figure {
	margin: 0;
	max-width: min(72rem, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	gap: .85rem;
}
.tab-lightbox__img {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	margin-inline: auto;
	object-fit: contain;
	background: var(--base-ultra-dark, #1a1a1a);
}
.tab-lightbox__caption {
	color: var(--white-trans-80, rgba(255, 255, 255, .8));
	text-align: center;
	font-size: .9rem;
	margin: 0;
}
.tab-lightbox__counter {
	position: absolute;
	top: 1.2rem;
	left: 50%;
	transform: translateX(-50%);
	color: var(--white-trans-80, rgba(255, 255, 255, .8));
	font-family: var(--heading-font-family, sans-serif);
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: 2px;
}
.tab-lightbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	cursor: pointer;
	background: var(--black-trans-50, rgba(0, 0, 0, .5));
	color: #fff;
	border: 2px solid var(--white-trans-80, rgba(255, 255, 255, .8));
	width: 48px;
	height: 48px;
	transition: background .3s, border-color .3s;
}
.tab-lightbox__btn:hover {
	background: var(--primary);
	border-color: var(--primary);
}
.tab-lightbox__btn:focus-visible {
	outline: 3px solid var(--secondary);
	outline-offset: 2px;
}
.tab-lightbox__btn svg {
	width: 24px;
	height: 24px;
}
.tab-lightbox__close {
	top: 1.2rem;
	right: 1.2rem;
}
.tab-lightbox__nav--prev {
	left: 1.2rem;
	top: 50%;
	transform: translateY(-50%);
}
.tab-lightbox__nav--next {
	right: 1.2rem;
	top: 50%;
	transform: translateY(-50%);
}
@media (max-width: 768px) {
	.tab-lightbox__nav--prev { left: .6rem; }
	.tab-lightbox__nav--next { right: .6rem; }
}

/* ============================================================
   Locations archive — service area grouped by county.
   Markup is generated by the {tab_service_area_by_county} dynamic
   tag (class-location-query.php), so its classes live here in the
   child theme: Bricks only emits a global class's CSS when a Bricks
   ELEMENT uses it, and these classes exist only inside the tag's
   HTML string — never on an element — so global-class CSS never fires.
   ============================================================ */
/* County blocks flow into balanced columns (directory); each block kept whole. */
.service-area__groups {
	columns: 3;
	column-gap: var(--space-xxl);
}
.service-area__group {
	break-inside: avoid;
	margin-bottom: var(--space-l);
}
.service-area__county {
	font-family: var(--heading-font-family);
	font-size: var(--h5);
	font-weight: 700;
	color: var(--base);
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom: 2px solid var(--secondary);
	padding-bottom: var(--space-xs);
	margin: 0 0 var(--space-s);
}
.service-area__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.service-area__list li {
	padding: .6rem 0;
	border-bottom: 1px solid var(--black-trans-10);
	font-size: var(--text-s);
	color: var(--base);
}
@media (max-width: 991px) { .service-area__groups { columns: 2; } }
@media (max-width: 600px) { .service-area__groups { columns: 1; } }