/*
 * Limitless — theme helper styles.
 *
 * theme.json owns the design tokens (color/typography/spacing). This file
 * carries the few things tokens can't express: brand-section variables,
 * small utility classes used by the patterns, header/footer chrome, the
 * contact form, card hovers and the mobile call bar.
 *
 * All of it decorates CORE blocks via classes — no new block types.
 */

/* ----------------------------------------------------------------------------
 * Brand-section accent. Default = Underground blue. The block styles
 * .is-style-brand-* override --brand for a wrapped section so kicker bars,
 * section links and "section primary" buttons recolor per service area.
 * The house red accent (--wp--preset--color--accent) never changes.
 * ------------------------------------------------------------------------- */
:root,
body {
	--brand: var(--wp--preset--color--house);
	--brand-on-dark: #97acbd;
}
.is-style-brand-underground { --brand: var(--wp--preset--color--primary);  --brand-on-dark: #5bb0e8; }
.is-style-brand-sewer       { --brand: var(--wp--preset--color--sewer);    --brand-on-dark: #8aa6ee; }
.is-style-brand-plumbing    { --brand: var(--wp--preset--color--plumbing); --brand-on-dark: #3fc679; }

/* ----------------------------------------------------------------------------
 * Section identity. body.section-* (set in functions.php from the page slug)
 * recolors + relabels the header badge and the top bar, so you always know
 * which "room of the house" you're in. The house front door is deep navy.
 * ------------------------------------------------------------------------- */
body.section-house       { --section-color: var(--wp--preset--color--deep); }
body.section-underground { --section-color: var(--wp--preset--color--primary); }
body.section-plumbing    { --section-color: var(--wp--preset--color--plumbing); }
body.section-sewer       { --section-color: var(--wp--preset--color--sewer); }

/* The 4px tint bar across the very top of every page. */
.lim-section-bar {
	width: 100%;
	height: 4px;
	background: var(--section-color, #0a3a5c);
}

/* The header brand badge tile takes the section color (footer chip stays white). */
.lim-header .lim-brandchip { background: var(--section-color, #0a3a5c); }

/* Brand wordmark — ONE cohesive lockup, real text, single element.
 * "LIMITLESS" plus the active section word render in the same Anton face, same
 * size, same baseline, so the whole thing reads as a single wordmark:
 * LIMITLESS UNDERGROUND / LIMITLESS PLUMBING / LIMITLESS SEWER.
 * On the house front door and in the footer, only "LIMITLESS" shows. */
.lim-wordmark {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.2rem;
	text-decoration: none;
	line-height: 1;
	width: 16rem;
	max-width: 100%;
}
/* The logo is fixed (front-page size, navy); the section title sits below in the
 * section's brand color, sized DOWN (subordinate) and tracked out to span the
 * logo's width. */
/* The section word is the BOTTOM BAR of the lockup rectangle: a solid brand-color
 * block with the word centered in white (the page-background base color), at an
 * even, readable track — no edge-to-edge letter spread. Same width as the navy
 * LIMITLESS logo above it, so the two stack into a clean rectangle, and every
 * section reads consistently. Word is right-aligned in the bar. */
.lim-wordmark-spec {
	width: 100%;
	box-sizing: border-box;
	text-align: right;
	background: var(--section-color);
	color: var(--wp--preset--color--base);
	padding: 0.5rem 0.85rem;
	border-radius: 0.4rem;
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	letter-spacing: 0.06em;
}
.lim-wordmark-spec i { font-style: normal; }
.lim-wordmark-name,
.lim-wordmark-spec,
.lim-wordmark-suffix {
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: clamp(1.25rem, 2.8vw, 2.05rem);
	color: #fff;
}
/* Footer house lockup: "LIMITLESS" (brand blue) + suffix word (accent red). */
.lim-footer .lim-wordmark-suffix { color: var(--wp--preset--color--accent); }

/* Footer reuses the header's house lockup verbatim (LIMITLESS + the three
 * linked section badges). The lockup is hidden by default outside the header's
 * house mode, so reveal it here. */
.lim-footer .lim-house-lockup {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.4rem;
}
/* The footer's generic link color must not bleed onto the lockup — keep the
 * header colors (navy wordmark on the white tile, white badge text). */
.lim-footer .lim-house-name,
.lim-footer .lim-house-name:hover { color: var(--wp--preset--color--deep) !important; }
.lim-footer .lim-secbadge,
.lim-footer .lim-secbadge:hover { color: #fff !important; }
/* Specialty word is hidden by default; the active section reveals its own. */
.lim-wordmark-spec { display: none; }
body.section-underground .lim-header .lim-spec-underground,
body.section-plumbing    .lim-header .lim-spec-plumbing,
body.section-sewer       .lim-header .lim-spec-sewer { display: block; }
/* Footer is the unified house — always just "LIMITLESS", in the brand color. */
.lim-footer .lim-wordmark-name { color: var(--wp--preset--color--primary); }
@media (max-width: 360px) { .lim-header .lim-wordmark-spec { display: none !important; } }

/* Default / house brand lockup. A clean RECTANGLE: big "LIMITLESS" on top,
 * three large color-coded section buttons filling the row beneath it. No dark
 * tile in house mode — the name sits in brand navy on the white header, the
 * buttons carry the color. Section pages keep the LIMITLESS UNDERGROUND tile
 * (untouched): this whole lockup is hidden there.
 *
 * align-items:stretch makes the name row and the button row the same width, so
 * they "add up" to a tidy rectangle. */
.lim-house-lockup { display: none; }
body.section-house .lim-header .lim-wordmark { display: none; }
body.section-house .lim-header .lim-brandchip,
body.section-underground .lim-header .lim-brandchip,
body.section-plumbing    .lim-header .lim-brandchip,
body.section-sewer       .lim-header .lim-brandchip { background: transparent; padding-left: 0; padding-right: 0; }
/* The lockup shrinks to the width of its widest row (the LIMITLESS wordmark),
 * and the button bar stretches to exactly that width — so the two rows share
 * the same left/right edges and the whole thing is a true rectangle. */
body.section-house .lim-header .lim-house-lockup {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.35rem;
	width: max-content;
	max-width: 100%;
}
.lim-house-name {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-indent: 0.12em; /* offsets the trailing letter-spacing so it stays centered */
	font-size: clamp(2.3rem, 5.2vw, 3.5rem);
	line-height: 0.95;
	text-align: center;
	white-space: nowrap;
	color: var(--wp--preset--color--deep);
	text-decoration: none;
}
/* Buttons flush (no gap) = one solid bar; only the bar's outer corners round. */
.lim-house-badges { display: flex; gap: 0; width: 100%; }
.lim-house-badges .lim-secbadge { flex: 1 1 0; border-radius: 0; }
.lim-house-badges .lim-secbadge:first-child {
	border-top-left-radius: 0.4rem;
	border-bottom-left-radius: 0.4rem;
}
.lim-house-badges .lim-secbadge:last-child {
	border-top-right-radius: 0.4rem;
	border-bottom-right-radius: 0.4rem;
}
.lim-secbadge {
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.98rem;
	line-height: 1;
	text-align: center;
	color: #fff;
	padding: 0.72rem 0.7rem;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.15s ease;
}
.lim-secbadge:hover { filter: brightness(1.12); }
.lim-secbadge--underground { background: var(--wp--preset--color--primary); }
.lim-secbadge--plumbing    { background: var(--wp--preset--color--plumbing); }
.lim-secbadge--sewer       { background: var(--wp--preset--color--sewer); }

/* ----------------------------------------------------------------------------
 * Eyebrow + kicker bar (the small uppercase label + 64px underline rule).
 * ------------------------------------------------------------------------- */
.lim-eyebrow {
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.85rem;
	color: var(--brand);
	margin-bottom: 0.5rem;
}

hr.lim-kicker.wp-block-separator {
	width: 64px;
	max-width: 64px;
	height: 4px;
	border: 0;
	border-radius: 4px;
	background: var(--brand);
	opacity: 1;
	margin: 1rem auto 0;
}
hr.lim-kicker.wp-block-separator.alignleft { margin-left: 0; }

/* Section-tinted link (e.g. service-card "Learn more"). */
.lim-section-link a,
a.lim-section-link {
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--brand);
	text-decoration: none;
}
.lim-section-link a:hover,
a.lim-section-link:hover { color: var(--wp--preset--color--accent); }

/* Condensed uppercase helper for feature lists / small labels. */
.lim-condensed {
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------------------
 * Buttons — brand + outline variations.
 * ------------------------------------------------------------------------- */
.wp-block-button.is-style-lim-primary > .wp-block-button__link {
	background-color: var(--brand);
	color: #fff;
	border: 2px solid transparent;
}
.wp-block-button.is-style-lim-primary > .wp-block-button__link:hover {
	filter: brightness(1.08);
}
.wp-block-button.is-style-lim-outline > .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.08);
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.6);
}
.wp-block-button.is-style-lim-outline > .wp-block-button__link:hover {
	background-color: #fff;
	color: var(--wp--preset--color--contrast);
}
/* The outline style is built for dark heroes (white text/border). On light
 * sections (surface/white) that washes out — give it dark ink + a dark border. */
.has-surface-background-color .is-style-lim-outline > .wp-block-button__link,
.has-base-background-color .is-style-lim-outline > .wp-block-button__link {
	color: var(--wp--preset--color--deep);
	border-color: var(--wp--preset--color--deep);
	background-color: transparent;
}
.has-surface-background-color .is-style-lim-outline > .wp-block-button__link:hover,
.has-base-background-color .is-style-lim-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--deep);
	color: #fff;
}

/* ----------------------------------------------------------------------------
 * Cards (service cards + content cards).
 * ------------------------------------------------------------------------- */
.is-style-lim-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.is-style-lim-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.13);
}

/* ----------------------------------------------------------------------------
 * Hero / cover text legibility.
 * ------------------------------------------------------------------------- */
.lim-hero h1,
.lim-hero h2 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.lim-hero p  { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }

/* Stronger, layered scrim behind hero text so it never gets lost in the photo —
 * darkest on the left/bottom where the copy sits, easing toward the image on
 * the right. Applies to every .lim-hero cover from one place. */
.lim-hero > .wp-block-cover__background {
	/* WordPress sets opacity:0 on the overlay when dimRatio is 0 — force it
	 * back on, otherwise this scrim (and the original gradient) is invisible. */
	opacity: 1 !important;
	background:
		linear-gradient(90deg, rgba(6, 9, 15, 0.82) 0%, rgba(6, 9, 15, 0.58) 48%, rgba(6, 9, 15, 0.32) 100%),
		linear-gradient(0deg, rgba(6, 9, 15, 0.5) 0%, rgba(6, 9, 15, 0.12) 45%, rgba(6, 9, 15, 0) 100%) !important;
}

/* Section-colored CTAs. On every section page (NOT the unified front/house
 * page) the two headline call-to-action spots take the section's own color
 * instead of the generic house red / primary blue:
 *   1. the hero "Call …" button (accent red -> section color), and
 *   2. the bottom CTA banner bar (primary-blue overlay -> section color).
 * dim-90 is unique to that banner, so sub-page headers (dim-80) are untouched.
 * The banner's inner Call button stays red so it still pops on the colored bar. */
body:not(.section-house) .lim-hero .wp-block-button__link.has-accent-background-color {
	background-color: var(--section-color) !important;
}
body:not(.section-house) .wp-block-cover__background.has-primary-background-color.has-background-dim-90 {
	background-color: var(--section-color) !important;
}

/* Accents that sit on DARK backgrounds (hero scrims, the deep-navy founder
 * note, the near-black gallery/triage) use a lifted tint of the brand so they
 * stay legible. On light sections the eyebrow/kicker keep the deeper --brand. */
.lim-highlight { color: var(--brand-on-dark); }

.lim-hero .lim-eyebrow,
.has-deep-background-color .lim-eyebrow,
.has-contrast-background-color .lim-eyebrow { color: var(--brand-on-dark); }

.lim-hero hr.lim-kicker.wp-block-separator,
.has-deep-background-color hr.lim-kicker.wp-block-separator,
.has-contrast-background-color hr.lim-kicker.wp-block-separator { background: var(--brand-on-dark); }

/* Inline eyebrow pill (accent badge) used in heroes. */
.lim-pill {
	display: inline-block;
	background: var(--brand);
	color: #fff;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.85rem;
	padding: 0.5rem 1rem;
	border-radius: 0.4rem;
}

/* Emergency badge that doubles as a CTA → anchors to the triage section. */
.lim-pill--cta { padding: 0; }
.lim-pill--cta a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-radius: 0.4rem;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.lim-pill--cta a:hover,
.lim-pill--cta a:focus-visible {
	background: rgba(255, 255, 255, 0.16);
}
.lim-pill__go { transition: transform 0.15s ease; }
.lim-pill--cta a:hover .lim-pill__go,
.lim-pill--cta a:focus-visible .lim-pill__go { transform: translateX(3px); }

/* Feature checklist (✓ items) used on service pages + about. */
.lim-checklist { list-style: none; margin: 1.25rem 0; padding: 0; }
/* Step-count modifiers (moved off an inline --cols style so blocks validate). */
.lim-steps-3 { --cols: 3; }
.lim-steps-4 { --cols: 4; }
/* Footer lists are plain wp-block-list now — strip bullets/indent, keep spacing. */
.lim-footer .wp-block-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

/* Footer NAP (name / address / phone) — plain text for local SEO. */
.lim-nap { font-style: normal; display: block; margin-top: 1.1rem; line-height: 1.55; }
.lim-nap-name {
	display: block;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
}
.lim-nap-line { display: block; }
.lim-nap a.lim-nap-line { color: var(--wp--preset--color--footer-ink); text-decoration: none; }
.lim-nap a.lim-nap-line:hover { color: #fff; }

/* Footer contact icons: force monochrome (text) presentation + white so they're
 * visible on the navy footer (the color emoji rendered dark and disappeared). */
.lim-footer .lim-fi {
	font-variant-emoji: text;
	color: #fff;
	margin-right: 0.15rem;
	font-style: normal;
}
.lim-checklist li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.6rem;
	font-weight: 500;
}
.lim-checklist li::before {
	content: "✔";
	position: absolute;
	left: 0;
	color: var(--brand);
	font-weight: 700;
}
.lim-checklist.lim-condensed li { font-weight: 600; letter-spacing: 0.02em; }

/* The "Est. 2017" badge that floats on the about image. */
.lim-badge .wp-block-cover__inner-container,
.lim-badge {
	pointer-events: none;
}
.lim-year {
	font-family: 'Anton', sans-serif;
	font-size: 2.4rem;
	line-height: 1;
}

/* ----------------------------------------------------------------------------
 * Header.
 * ------------------------------------------------------------------------- */
.lim-topbar {
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 500;
	letter-spacing: 0.03em;
	font-size: 0.85rem;
}
/* Superheader: drop the long service-area on phones so License + USDOT + the
 * review line stay tidy (the area is repeated in the footer NAP anyway). */
@media (max-width: 640px) { .lim-topbar .lim-tb-area { display: none; } }
/* In-page anchor jumps (e.g. emergency badge → #triage) clear the sticky header
 * and ease into place rather than snapping. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: 90px; }
.lim-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: #fff;
}
/* --- Navigation: one nav in the header right-group, ordered Call · About ·
 * Contact · Underground · Plumbing · Sewer. It's a hamburger below 900px and a
 * full inline menu at 900px and up. The hamburger is a normal flex child of the
 * right-group, so it sits inline and can't go off-screen. --- */

/* Mobile overlay: core sets BOTH padding-left:2rem and padding-right:2rem on
 * submenu containers via a (0,5,0) selector, so it pushes the 1st-tier sub-links
 * 2rem left of the 0th-tier top-level items (which have no such padding). Drop
 * the right padding (needs !important to beat core's specificity) so the sub-
 * links share the same right edge as the top-level items. */
.lim-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding-right: 0 !important;
}

/* Section headings (the top-level Underground/Plumbing/Sewer toggles) render as
 * full-width brand-color stripes across the overlay pane, with white text (the
 * page-background base color). The expanded sub-links wrap onto their own line
 * below the stripe and keep the default ink. */
/* The overlay menu list spans the full pane so the stripes reach edge to edge;
 * non-stripe items (About / Contact / Call) stay right-aligned inside it. */
.lim-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.lim-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	width: 100%;
}
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-underground,
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-plumbing,
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-sewer {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	row-gap: 0;
}
/* heading row = label link + toggle arrow; both carry the stripe color */
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-underground > .wp-block-navigation-item__content,
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-underground > .wp-block-navigation__submenu-icon { background: var(--wp--preset--color--primary); }
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-plumbing > .wp-block-navigation-item__content,
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-plumbing > .wp-block-navigation__submenu-icon { background: var(--wp--preset--color--plumbing); }
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-sewer > .wp-block-navigation-item__content,
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-sewer > .wp-block-navigation__submenu-icon { background: var(--wp--preset--color--sewer); }

.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-underground > .wp-block-navigation-item__content,
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-plumbing    > .wp-block-navigation-item__content,
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-sewer       > .wp-block-navigation-item__content {
	flex: 1 1 0;
	min-width: 0;
	color: var(--wp--preset--color--base) !important;
	margin: 0;
	padding: 0.7rem 1.5rem;
	text-align: right;
}
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-underground > .wp-block-navigation__submenu-icon,
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-plumbing    > .wp-block-navigation__submenu-icon,
/* The toggle arrow is redundant in the overlay (every submenu is already
 * expanded) and won't sit cleanly on the stripe — hide it for a clean bar. */
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-underground > .wp-block-navigation__submenu-icon,
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-plumbing    > .wp-block-navigation__submenu-icon,
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-sewer       > .wp-block-navigation__submenu-icon { display: none; }
/* sub-links drop to their own full-width row below the stripe */
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-underground > .wp-block-navigation__submenu-container,
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-plumbing    > .wp-block-navigation__submenu-container,
.lim-header .wp-block-navigation__responsive-container.is-menu-open .lim-sub-sewer       > .wp-block-navigation__submenu-container {
	flex-basis: 100%;
	width: 100%;
	margin-top: 0.5rem;
}

@media (max-width: 899.98px) {
	.lim-nav-primary .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.lim-nav-primary .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.lim-nav-primary .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}
}

.lim-nav-group { gap: 1.25rem; }
/* On phones, let the right-group wrap under the brand instead of overflowing. */
@media (max-width: 600px) {
	.lim-header > .wp-block-group.alignwide { flex-wrap: wrap; row-gap: 0.75rem; }
}
@media (max-width: 420px) {
	.lim-secbadge { font-size: 0.82rem; padding: 0.6rem 0.4rem; letter-spacing: 0.02em; }
}

/* ----------------------------------------------------------------------------
 * Brand logo (cleaned SVG wordmark) replaces the word "LIMITLESS". Drawn with
 * a CSS mask so the one file recolors per context via background-color.
 * ------------------------------------------------------------------------- */
.lim-logo {
	display: inline-block;
	aspect-ratio: 1326.81 / 246.32;
	background-color: currentColor;
	-webkit-mask: url("../images/Limitless.svg") center / contain no-repeat;
	mask: url("../images/Limitless.svg") center / contain no-repeat;
}
/* Header section tile (LIMITLESS UNDERGROUND): white logo beside the spec word. */
.lim-wordmark .lim-logo { display: block; width: 100%; height: auto; background-color: var(--wp--preset--color--deep); }
/* The section word sits white on its brand-color bar (beats the shared rule). */
.lim-header .lim-wordmark-spec { color: var(--wp--preset--color--base); }
/* House lockup (header front-door + footer): the badges row sets the width and
 * the logo stretches to exactly match it (height scales from the aspect ratio),
 * so the wordmark always spans the full row of content below it. */
.lim-house-name { display: block; width: 100%; }
.lim-house-name .lim-logo {
	display: block;
	width: 100%;
	height: auto;
	background-color: var(--wp--preset--color--deep);
}
/* Brand chip — the colored tile that holds the wordmark. */
.lim-brandchip { display: inline-flex; width: fit-content; max-width: 100%; }

/* Header navigation underline-on-hover. */
.lim-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-bottom: 4px;
	border-bottom: 3px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.lim-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--accent);
}

/* ----------------------------------------------------------------------------
 * Footer.
 * ------------------------------------------------------------------------- */
.lim-footer { color: var(--wp--preset--color--footer-ink); }
.lim-footer h2, .lim-footer h3, .lim-footer h4, .lim-footer h5 { color: #fff; }
.lim-footer a { color: var(--wp--preset--color--footer-ink); text-decoration: none; }
.lim-footer a:hover { color: #fff; }

/* ----------------------------------------------------------------------------
 * Contact form (core/html block — still a core block).
 * ------------------------------------------------------------------------- */
.lim-form { display: grid; gap: 1.25rem; container-type: inline-size; }
.lim-form .lim-form-row {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr 1fr;
}
/* Prevent grid/flex children from refusing to shrink (the "scrunched" cause:
 * inputs forcing min-content width and overflowing their narrow column). */
.lim-form > div,
.lim-form .lim-form-row > div { min-width: 0; }
.lim-form label {
	display: block;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
	margin-bottom: 0.4rem;
}
.lim-form input:not([type="checkbox"]):not([type="radio"]),
.lim-form select,
.lim-form textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 3rem;
	padding: 0.8rem 1rem;
	border: 2px solid var(--wp--preset--color--line);
	border-radius: 0.5rem;
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	background: #fff;
	transition: border-color 0.2s ease;
}
.lim-form input:focus,
.lim-form select:focus,
.lim-form textarea:focus {
	outline: none;
	border-color: var(--brand);
}
.lim-form textarea { resize: vertical; min-height: 9rem; }
/* Inline checkbox row (e.g. sewer "this is an emergency"). */
.lim-form-check {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.95rem;
	line-height: 1.35;
	cursor: pointer;
}
.lim-form-check input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--brand); margin: 0; }
.lim-form button {
	justify-self: start;
	max-width: 100%;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1.1rem;
	color: #fff;
	background: var(--brand);
	border: 0;
	border-radius: 0.5rem;
	padding: 1rem 2rem;
	cursor: pointer;
	transition: transform 0.15s ease, filter 0.15s ease;
}
.lim-form button:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* Stack name/phone whenever the FORM itself (not the viewport) gets narrow —
 * correct in the 62% contact column, the stacked-mobile layout, and anywhere
 * this pattern is dropped. */
@container (max-width: 30rem) {
	.lim-form .lim-form-row { grid-template-columns: 1fr; }
}
@container (max-width: 20rem) {
	.lim-form button { justify-self: stretch; width: 100%; }
}

/* ----------------------------------------------------------------------------
 * Reputation block big number + stars.
 * ------------------------------------------------------------------------- */
.lim-stat {
	font-family: 'Anton', sans-serif;
	font-size: clamp(4rem, 8vw, 6rem);
	line-height: 1;
	color: var(--brand);
}
.lim-stars { color: var(--wp--preset--color--gold); letter-spacing: 4px; font-size: 1.8rem; }
.lim-stars-sm { color: var(--wp--preset--color--gold); letter-spacing: 2px; }

/* ----------------------------------------------------------------------------
 * Mobile sticky call bar (hidden on large screens).
 * ------------------------------------------------------------------------- */
.lim-callbar { display: none; }
@media (max-width: 1023px) {
	.lim-callbar {
		display: flex;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 90;
		align-items: center;
		justify-content: center;
		gap: 0.75rem;
		padding: 1rem;
		background: var(--wp--preset--color--accent);
		color: #fff !important;
		font-family: 'Barlow Condensed', system-ui, sans-serif;
		font-weight: 700;
		font-size: 1.25rem;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		text-decoration: none;
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
	}
	/* keep the footer clear of the fixed call bar (reserve its height) */
	body { padding-bottom: 3.75rem; }
}

/* ----------------------------------------------------------------------------
 * Prose defaults for service-page body content.
 * ------------------------------------------------------------------------- */
/* Headings inside body prose get clear air above so each reads as a fresh beat
 * rather than hugging the paragraph that closed above it. Tiered by level. */
.lim-prose h2 { margin-top: 3.25rem; }
.lim-prose h3 {
	margin-top: 2.5rem;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
}
.lim-prose h4 { margin-top: 2rem; }
/* The opening heading (or one stacked directly under another) shouldn't inherit
 * the gap — only headings that follow body content do. */
.lim-prose > :is(h2,h3,h4,h5):first-child { margin-top: 0; }
.lim-prose :is(h2,h3,h4,h5,.lim-eyebrow) + :is(h2,h3,h4,h5) { margin-top: 0.5rem; }
.lim-prose p { color: var(--wp--preset--color--body-ink); line-height: 1.7; }

/* ============================================================================
 * Archetype utilities — the structural pieces that make each section feel
 * purpose-built. Still core blocks; these classes only add layout/decoration.
 * --brand resolves from the page's is-style-brand-* wrapper.
 * ========================================================================= */

/* --- Process steps (numbered): Plumbing "how it works", Sewer "what we do" --- */
.lim-steps {
	list-style: none;
	counter-reset: lim-step;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
}
.lim-steps.lim-steps-row { grid-auto-flow: row; }
@media (min-width: 782px) {
	.lim-steps.lim-steps-row { grid-template-columns: repeat(var(--cols, 4), 1fr); }
}
.lim-steps > li {
	counter-increment: lim-step;
	position: relative;
	padding-left: 3.75rem;
	min-height: 2.75rem;
}
.lim-steps > li::before {
	content: counter(lim-step);
	position: absolute;
	left: 0;
	top: -0.1rem;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	font-family: 'Anton', sans-serif;
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lim-steps > li strong {
	display: block;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 1.2rem;
	margin-bottom: 0.15rem;
}

/* --- Service menu rows: Plumbing "catalog" --- */
.lim-menu-row {
	padding: 1.5rem 0.25rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.lim-menu-row:first-child { border-top: 1px solid var(--wp--preset--color--line); }
/* Keep the row's CTA on the same line as the text on desktop — the longest
 * description (Leak Detection) was wrapping the button. Text shrinks; button doesn't. */
@media (min-width: 600px) {
	.lim-menu-row { flex-wrap: nowrap !important; column-gap: 1.5rem; }
	.lim-menu-row > :first-child { flex: 1 1 auto; min-width: 0; }
	.lim-menu-row > .wp-block-buttons { flex: 0 0 auto; }
}
.lim-menu-row .lim-menu-meta {
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--brand);
}

/* --- Symptom triage tiles: Sewer "911" (links on a dark background) --- */
.lim-triage-tile {
	display: block;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0.9rem;
	padding: 1.4rem 1.5rem;
	text-decoration: none;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
/* (No height:100% on the tiles — it makes the flex columns collapse, which let
 * a following sibling button overlap them. Uniform tile content keeps the row
 * visually even without it.) */
.lim-triage-tile:hover {
	background: var(--brand);
	border-color: var(--brand);
	transform: translateY(-4px);
}
.lim-triage-symptom {
	display: block;
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	color: #fff;
	font-size: 1.45rem;
	line-height: 1.05;
}
.lim-triage-sub {
	display: block;
	margin-top: 0.35rem;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
	color: var(--wp--preset--color--footer-ink);
}
.lim-triage-tile:hover .lim-triage-sub { color: rgba(255, 255, 255, 0.9); }

/* --- Oversized emergency phone (Sewer hero) --- */
.lim-phone-xl a,
a.lim-phone-xl {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	font-size: clamp(2.4rem, 6vw, 4rem);
	line-height: 1;
	color: #fff;
	text-decoration: none;
}

/* --- Front-door router cards (the unified home routes to the 3 sections) --- */
.lim-router-card {
	border-radius: 1rem;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lim-router-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
}
/* Darken the lower half of each router card (over its color overlay) so the
 * white title/blurb/button stay legible regardless of the photo behind. */
.lim-router-card .wp-block-cover__background {
	background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 72%) !important;
}

/* --- Capability stat strip (Underground "proof") --- */
.lim-statline .lim-stat { font-size: clamp(2.4rem, 5vw, 3.4rem); }

/* ----------------------------------------------------------------------------
 * Secondary (inner) pages — compact colored header + breadcrumb + sibling nav.
 * Deliberately NOT the cinematic photo hero the landing pages use.
 * ------------------------------------------------------------------------- */
.lim-breadcrumb {
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.82);
}
.lim-breadcrumb a { color: #fff; text-decoration: none; opacity: 0.82; }
.lim-breadcrumb a:hover { opacity: 1; text-decoration: underline; }

.lim-sibling-nav { list-style: none; margin: 0; padding: 0; }
.lim-sibling-nav li { border-bottom: 1px solid var(--wp--preset--color--line); }
.lim-sibling-nav li:last-child { border-bottom: 0; }
.lim-sibling-nav a {
	display: block;
	padding: 0.7rem 0;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.lim-sibling-nav a:hover { color: var(--brand); }
.lim-sibling-nav .is-current { color: var(--brand); font-weight: 700; }

/* ----------------------------------------------------------------------------
 * "Did You Know?" callout — reusable stamp. Colorful but easy on the eyes:
 * a pale tint of the section color, a bold colored edge + label, dark body
 * text. Adapts to whatever brand section it's dropped into (--brand).
 * ------------------------------------------------------------------------- */
.lim-dyk {
	background: var(--wp--preset--color--surface); /* fallback */
	background: color-mix(in srgb, var(--brand) 12%, #fff);
	border-left: 6px solid var(--brand);
	border-radius: 0.75rem;
	padding: 1.4rem 1.6rem;
	margin: 1.75rem 0;
}
.lim-dyk-label {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.85rem;
	color: var(--brand);
	margin: 0 0 0.35rem;
}
.lim-dyk p:not(.lim-dyk-label) {
	margin: 0;
	color: var(--wp--preset--color--body-ink);
	line-height: 1.6;
}
.lim-dyk strong { color: var(--wp--preset--color--contrast); }


/* ----------------------------------------------------------------------------
 * FAQ accordion (custom limitless/faq + limitless/faq-item blocks). Native
 * <details>/<summary> so the front end needs no JS; the editor loads this same
 * stylesheet so what you edit is what ships. Accent follows --section-color so
 * the accordion takes on the branch color when dropped on a section page.
 * ------------------------------------------------------------------------- */
.lim-faq { display: flex; flex-direction: column; gap: 0.75rem; }
.lim-faq__item {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--line);
	border-radius: 0.6rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lim-faq__item[open] {
	border-color: color-mix(in srgb, var(--section-color, var(--brand)) 35%, var(--wp--preset--color--line));
	border-left-color: var(--section-color, var(--brand));
	box-shadow: 0 8px 28px rgba(10, 30, 50, 0.08);
}
/* Question row */
.lim-faq__q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.05rem 1.25rem;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
	-webkit-tap-highlight-color: transparent;
}
.lim-faq__q::-webkit-details-marker { display: none; }
.lim-faq__q:hover { color: var(--section-color, var(--brand)); }
.lim-faq__item[open] .lim-faq__q { color: var(--section-color, var(--brand)); }
.lim-faq__qtext { flex: 1 1 auto; }
/* +/− toggle icon */
.lim-faq__icon {
	flex: 0 0 auto;
	position: relative;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--section-color, var(--brand)) 12%, transparent);
	transition: background 0.2s ease;
}
.lim-faq__icon::before,
.lim-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.72rem;
	height: 2px;
	border-radius: 2px;
	background: var(--section-color, var(--brand));
	transform: translate(-50%, -50%);
}
.lim-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.2s ease; }
.lim-faq__item[open] .lim-faq__icon { background: color-mix(in srgb, var(--section-color, var(--brand)) 20%, transparent); }
.lim-faq__item[open] .lim-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
/* Answer body */
.lim-faq__a {
	padding: 0 1.25rem 1.2rem;
	color: var(--wp--preset--color--body-ink);
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 1.02rem;
	line-height: 1.65;
}
.lim-faq__a > :first-child { margin-top: 0; }
.lim-faq__a > :last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------------------
 * Parallax on banner images — both the full heroes (.lim-hero) and the sub-page
 * compact headers (primary covers dimmed to 80; dim-90 = the CTA banner, which
 * is left static). On heroes the photo drifts behind the fixed scrim/gradient.
 * Pure CSS scroll-driven motion: the
 * banner image is slightly oversized and drifts as the cover passes through the
 * viewport. Honors reduced-motion and degrades to a static image where the
 * scroll timeline isn't supported. The cover clips overflow, so edges stay clean.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.wp-block-cover:has(> .wp-block-cover__background.has-background-dim-80) > .wp-block-cover__image-background,
		.lim-hero > .wp-block-cover__image-background,
		.lim-guide-hero > .wp-block-cover__image-background {
			height: 134%;
			top: -17%;
			animation: lim-parallax linear both;
			animation-timeline: view();
			animation-range: cover;
			will-change: transform;
		}
		@keyframes lim-parallax {
			from { transform: translateY(-14%); }
			to   { transform: translateY(14%); }
		}
	}
}

/* ----------------------------------------------------------------------------
 * Guides (custom post type) — branch pill on the editorial hero. The post-terms
 * block renders the guide_branch term; we style it as a small brand-color pill.
 * ------------------------------------------------------------------------- */
.lim-guide-branch {
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.85rem;
	line-height: 1;
}
.lim-guide-branch a {
	display: inline-block;
	background: var(--section-color, var(--wp--preset--color--accent));
	color: var(--wp--preset--color--base) !important;
	padding: 0.35rem 0.7rem;
	border-radius: 0.3rem;
	text-decoration: none;
}
.lim-guide-branch a:hover { filter: brightness(1.1); }


/* ----------------------------------------------------------------------------
 * Contact modal — native <dialog> holding the "free estimate" form. Opened by
 * any #contact / Free-Estimate CTA and by .lim-modal-open buttons (wired in
 * footer.html). Accent follows --section-color so it self-brands per page.
 * ------------------------------------------------------------------------- */
.lim-modal {
	width: min(94vw, 540px);
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: 1.1rem;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	box-shadow: 0 30px 80px rgba(6, 12, 24, 0.45);
	color: var(--wp--preset--color--body-ink);
}
.lim-modal::backdrop { background: rgba(6, 9, 15, 0.62); backdrop-filter: blur(3px); }
@media (prefers-reduced-motion: no-preference) {
	.lim-modal[open] { animation: lim-modal-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
	.lim-modal[open]::backdrop { animation: lim-modal-fade 0.28s ease; }
}
@keyframes lim-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes lim-modal-fade { from { opacity: 0; } to { opacity: 1; } }

.lim-modal__head {
	position: relative;
	padding: 1.6rem 1.85rem 1.5rem;
	color: #fff;
	background:
		radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--section-color, var(--wp--preset--color--deep)) 55%, #fff 0%) 0%, transparent 60%),
		linear-gradient(135deg, var(--section-color, var(--wp--preset--color--deep)) 0%, color-mix(in srgb, var(--section-color, var(--wp--preset--color--deep)) 60%, #05080f) 100%);
}
.lim-modal__eyebrow {
	margin: 0 0 0.35rem;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.82);
}
.lim-modal__title {
	margin: 0;
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: clamp(1.6rem, 4vw, 2.1rem);
	line-height: 1;
	color: #fff;
}
.lim-modal__sub { margin: 0.5rem 0 0; font-size: 0.98rem; color: rgba(255, 255, 255, 0.88); }
.lim-modal__close {
	position: absolute;
	top: 0.7rem;
	right: 0.8rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}
.lim-modal__close:hover { background: rgba(255, 255, 255, 0.3); }
.lim-modal__body { padding: 1.5rem 1.85rem 1.85rem; overflow-y: auto; }
/* the modal form is the existing .lim-form, just a touch tighter */
.lim-form--modal { gap: 1rem; }
.lim-form--modal .lim-form-row { gap: 1rem; }
/* "razzle" submit — full width, brand gradient, lift on hover */
.lim-form--modal button[type="submit"] {
	width: 100%;
	justify-self: stretch;
	background: linear-gradient(135deg, var(--section-color, var(--wp--preset--color--primary)), color-mix(in srgb, var(--section-color, var(--wp--preset--color--primary)) 65%, #05080f));
	box-shadow: 0 10px 24px color-mix(in srgb, var(--section-color, var(--wp--preset--color--primary)) 35%, transparent);
}
.lim-form--modal .lim-form-status { margin-top: 0.25rem; }

/* The abbreviated inline contact band (the big form now lives in the modal). */
.lim-contact-cta .wp-block-buttons { justify-content: center; }

/* The 📞 receiver renders as a dark color-emoji that disappears on coloured
 * call buttons and the red call bar. Force monochrome text presentation on every
 * button + the call bar so the receiver inherits the white text color. */
.wp-block-button__link,
.lim-callbar { font-variant-emoji: text; }

/* ----------------------------------------------------------------------------
 * Latest-content card grids (home "From the Field" guides + "Recent Projects").
 * Core Query Loop renders the posts; we style the post-template items as cards.
 * ------------------------------------------------------------------------- */
.lim-postgrid .wp-block-post-template { gap: 1.4rem; }
.lim-postgrid li.wp-block-post {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.85rem;
	padding: 1.3rem 1.4rem;
	overflow: hidden;
	transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.lim-postgrid li.wp-block-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 38px rgba(10, 30, 50, 0.1);
	border-color: color-mix(in srgb, var(--section-color, var(--wp--preset--color--primary)) 40%, var(--wp--preset--color--line));
}
.lim-postgrid .wp-block-post-featured-image { margin: -1.3rem -1.4rem 0.4rem; }
.lim-postgrid .wp-block-post-featured-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.lim-postgrid .lim-guide-branch { align-self: flex-start; }
.lim-postgrid .wp-block-post-title { margin: 0; line-height: 1.18; }
.lim-postgrid .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.lim-postgrid .wp-block-post-title a:hover { color: var(--section-color, var(--wp--preset--color--primary)); }
.lim-postgrid .wp-block-post-date { margin: 0; font-family: 'Barlow Condensed', system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; }
.lim-postgrid .wp-block-post-excerpt { margin: 0; color: var(--wp--preset--color--body-ink); font-size: 0.96rem; line-height: 1.55; }
.lim-postgrid .wp-block-post-excerpt__more-text { display: none; }

/* ----------------------------------------------------------------------------
 * Owner card (home "Meet the Owner" section, on the deep-navy band).
 * ------------------------------------------------------------------------- */
.lim-owner-card {
	display: flex;
	gap: 1.6rem;
	align-items: flex-start;
	margin-top: 1.75rem;
	padding: 1.75rem;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 1rem;
}
.lim-owner-avatar {
	flex: 0 0 auto;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-family: 'Anton', sans-serif;
	font-size: 2.7rem;
	line-height: 1;
}
.lim-owner-name { margin: 0; font-family: 'Anton', sans-serif; text-transform: uppercase; color: #fff; font-size: 1.65rem; line-height: 1; }
.lim-owner-role { margin: 0.3rem 0 0; font-family: 'Barlow Condensed', system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.09em; color: #fff; font-size: 0.9rem; }
.lim-owner-bio { margin: 0.9rem 0 1.2rem; color: var(--wp--preset--color--footer-ink); line-height: 1.6; }
@media (max-width: 600px) {
	.lim-owner-card { flex-direction: column; align-items: center; text-align: center; }
}



/* ----------------------------------------------------------------------------
 * Branch term archive (/topics/{branch}/) — branded head band + card grid.
 * ------------------------------------------------------------------------- */
.lim-archive-head {
	background:
		radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--section-color, var(--wp--preset--color--deep)) 60%, #fff 0%) 0%, transparent 60%),
		linear-gradient(135deg, var(--section-color, var(--wp--preset--color--deep)) 0%, color-mix(in srgb, var(--section-color, var(--wp--preset--color--deep)) 62%, #05080f) 100%);
	color: #fff;
}
.lim-archive-head .lim-eyebrow { color: rgba(255, 255, 255, 0.82); }
.lim-archive-head .wp-block-query-title {
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: #fff;
}
.lim-archive-head .wp-block-term-description { color: rgba(255, 255, 255, 0.88); max-width: 60ch; }

/* ----------------------------------------------------------------------------
 * Phone icon — a CSS-masked glyph drawn in the CURRENT TEXT COLOR (so it's white
 * on the coloured call buttons / call bar, dark on light). Replaces the 📞 colour
 * emoji, which can't be recoloured and rendered as a dark receiver. Deterministic
 * across all browsers — no font-variant-emoji dependency.
 * ------------------------------------------------------------------------- */
.lim-tel {
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	vertical-align: -0.13em;
	margin-right: 0.4em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ----------------------------------------------------------------------------
 * Guides archive (/guides/) — same card grid as the category archive, but a
 * restrained, editorial "field guide" header (a single serif-italic lede is the
 * only academic cue — everything else stays on-brand).
 * ------------------------------------------------------------------------- */
.lim-archive-academic { border-bottom: 1px solid var(--wp--preset--color--line); }
.lim-archive-lede {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 1.18rem;
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	max-width: 60ch;
	margin-inline: auto;
}

/* ----------------------------------------------------------------------------
 * Compact home card strips. Guides (--slim, on white) and Projects (--tile, on a
 * deep-navy band) are image-led tiles with no card chrome and no excerpt — far
 * shorter than the old cards, and visually distinct from each other.
 * ------------------------------------------------------------------------- */
.lim-postgrid--slim .wp-block-post-template,
.lim-postgrid--tile .wp-block-post-template { gap: 1.25rem; }
.lim-postgrid--slim li.wp-block-post,
.lim-postgrid--tile li.wp-block-post {
	background: transparent;
	border: 0;
	padding: 0;
	gap: 0.45rem;
	overflow: visible;   /* the card's radius + overflow was clipping the title text */
	border-radius: 0;
}
.lim-postgrid--slim li.wp-block-post:hover,
.lim-postgrid--tile li.wp-block-post:hover { transform: translateY(-3px); box-shadow: none; }
.lim-postgrid--slim .wp-block-post-featured-image,
.lim-postgrid--tile .wp-block-post-featured-image { margin: 0 0 0.15rem; overflow: hidden; }
/* Legacy photos vary from portrait to wide; pin the figure to a fixed ratio per
 * row so every image fills a uniform box and the cards line up. The img carries
 * inline height:100% from core, which now fills this ratio box. */
.lim-postgrid--slim .wp-block-post-featured-image { aspect-ratio: 16 / 10; }
.lim-postgrid--tile .wp-block-post-featured-image { aspect-ratio: 4 / 3; }
.lim-postgrid--slim .wp-block-post-featured-image img,
.lim-postgrid--tile .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
/* Guides tiles keep a soft radius; project tiles are squared off. */
.lim-postgrid--slim .wp-block-post-featured-image { border-radius: 0.6rem; }
.lim-postgrid--tile .wp-block-post-featured-image { border-radius: 0; }
.lim-postgrid--slim .wp-block-post-title,
.lim-postgrid--tile .wp-block-post-title { margin: 0; line-height: 1.2; }

/* Dark Projects band */
.lim-section-dark .lim-eyebrow { color: var(--brand-on-dark); }
.lim-section-dark .lim-condensed a { color: #fff; }
.lim-postgrid--tile .wp-block-post-title a { color: #fff; }
.lim-postgrid--tile .wp-block-post-title a:hover { color: var(--brand-on-dark); }


/* ----------------------------------------------------------------------------
 * Home "latest" rows — a tidy, consolidated 3-up ROW. The query post-template
 * renders flow (1-up) after baking, so force the grid here; stack on small.
 * ------------------------------------------------------------------------- */
.lim-cardsec .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 1.25rem !important;
	align-items: start !important; /* top-align cards so uneven content doesn't stagger them */
}
/* Core flow layout injects vertical margins between siblings; in our grid that
 * pushes later cards into a staircase. Zero it inside these rows. */
.lim-cardsec .wp-block-post-template > li { margin-block: 0 !important; margin-top: 0 !important; }
@media (max-width: 781px) {
	.lim-cardsec .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
	.lim-cardsec .wp-block-post-template { grid-template-columns: 1fr !important; }
}
.lim-cardsec .wp-block-post-title { font-size: 1rem; line-height: 1.25; }

/* ----------------------------------------------------------------------------
 * Guide "Pro Tip" callout — a festive gold star + a little-known fact / often-
 * missed tip. One per guide.
 * ------------------------------------------------------------------------- */
.lim-tip {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.9rem;
	align-items: start;
	margin: 2.25rem 0;
	padding: 1.15rem 1.3rem;
	background: color-mix(in srgb, var(--wp--preset--color--gold) 14%, var(--wp--preset--color--base));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 45%, var(--wp--preset--color--line));
	border-left: 4px solid var(--wp--preset--color--gold);
	border-radius: 0.6rem;
}
.lim-tip::before {
	content: "★";
	grid-row: 1 / span 2;
	color: var(--wp--preset--color--gold);
	font-size: 1.6rem;
	line-height: 1.1;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.lim-tip .lim-tip-label {
	margin: 0 0 0.15rem;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast);
}
.lim-tip > p:last-child { margin: 0; }


/* ----------------------------------------------------------------------------
 * Project "Take It From the Pros" callout — lessons learned / disasters avoided.
 * Branded (section color) with a tools icon; the counterpart to the guide star tip.
 * ------------------------------------------------------------------------- */
.lim-pros {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.9rem;
	align-items: start;
	margin: 2.25rem 0;
	padding: 1.15rem 1.3rem;
	background: color-mix(in srgb, var(--section-color, var(--brand)) 9%, var(--wp--preset--color--base));
	border: 1px solid color-mix(in srgb, var(--section-color, var(--brand)) 30%, var(--wp--preset--color--line));
	border-left: 4px solid var(--section-color, var(--brand));
	border-radius: 0.6rem;
}
.lim-pros::before {
	content: "";
	grid-row: 1 / span 2;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.1rem;
	background-color: var(--section-color, var(--brand));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lim-pros .lim-pros-label {
	margin: 0 0 0.15rem;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.85rem;
	color: var(--section-color, var(--brand));
}
.lim-pros > p:last-child { margin: 0; }

/* ----------------------------------------------------------------------------
 * "Keep exploring" nav control under each guide/project (inviting, not "back to").
 * ------------------------------------------------------------------------- */
.lim-explore-link { margin: 0; }
.lim-explore-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 1.1rem;
	color: var(--section-color, var(--brand));
	text-decoration: none;
}
.lim-explore-link a::after { content: "→"; transition: transform 0.15s ease; }
.lim-explore-link a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.lim-explore-link a:hover::after { transform: translateX(0.35rem); }




/* ----------------------------------------------------------------------------
 * Large-screen bounds. Full-bleed backgrounds (heroes, banners, bands) stay
 * edge-to-edge, but their CONTENT is capped at the wide-size and centered so it
 * never anchors to the far-left edge / sprawls on very wide monitors.
 * ------------------------------------------------------------------------- */
.wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
}
/* Content-positioned covers (heroes, sub-page headers) get margin:0;width:auto
 * from core, which anchors content to the far edge on wide screens — re-center
 * the (capped) content column with the specificity to win. */
.wp-block-cover.alignfull.has-custom-content-position .wp-block-cover__inner-container {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 1200px) !important;
	/* flex-start: flush-left on normal screens; on ultra-wide the left edge lands
	 * on the centered content column instead of the far screen edge. */
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size, 1200px)) / 2)) !important;
	margin-right: auto !important;
}





/* ----------------------------------------------------------------------------
 * Archive card grids: keep rows aligned. Titles vary in length, which pushes the
 * excerpts to different baselines — clamp title (2 lines) + excerpt (3) so every
 * card's sections line up across the row. (Home --slim/--tile have no excerpt.)
 * ------------------------------------------------------------------------- */
.lim-postgrid .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lim-postgrid .wp-block-post-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Trust bar: center the four items when they stack on mobile. */
@media (max-width: 781px) {
	.lim-trust .wp-block-column { text-align: center; }
}