/*
Theme Name:   Kadence Child
Theme URI:    https://staging.copperbandtech.com/
Description:  Child theme of Kadence for the Copperband Technologies redesign.
Author:       Copperband Technologies
Author URI:   https://copperbandtech.com/
Template:     kadence
Version:      1.0.67
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  kadence-child
*/

/* Add your custom styles below this line. */

/* ===========================================================================
   HEADING WEIGHT — Bebas Neue has ONLY a 400 cut. Kadence's H1-H6 defaults
   applied 700, so browsers synthesised a faux-bold (thick/wrong strokes). The
   Customizer mods now generate font-weight:400 / line-height:0.95; this is the
   safety net in case Kadence hard-codes a weight anywhere. All site headings
   are Bebas Neue, so forcing 400 sitewide is correct. (Open Sans BODY weights
   are untouched — only h1-h6 here.)
   =========================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-weight: 400 !important;
	line-height: 0.95;
	letter-spacing: 0.01em;
}

/* ===========================================================================
   SCROLL-REVEAL — homepage body sections fade up as they enter view; grids
   stagger their direct children. JS (js/scroll-reveal.js) adds `.in`. The hero
   animates separately on load (.hero-anim) and is NOT affected here.
   =========================================================================== */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in {
	opacity: 1;
	transform: none;
}
.stagger > * {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.stagger.in > * {
	opacity: 1;
	transform: none;
}
.stagger.in > *:nth-child(1) { transition-delay: 0.04s; }
.stagger.in > *:nth-child(2) { transition-delay: 0.12s; }
.stagger.in > *:nth-child(3) { transition-delay: 0.20s; }
.stagger.in > *:nth-child(4) { transition-delay: 0.28s; }
.stagger.in > *:nth-child(5) { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
	.reveal,
	.stagger > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --- Header utility bar (top row) ---
   Light bar (#f3f4f5, 42px tall) configured in the Customizer (Header > Top
   Row). Kadence renders this as a single CENTER column, so we ONLY stretch that
   column chain to fill the row's native `.site-container` — the SAME container
   (max-width 1290px / --global-content-width, identical edge padding) that the
   main nav row uses. That guarantees the geo text's left edge lines up with the
   logo, and the phone's right edge lines up with the Get In Touch button.
   IMPORTANT: do NOT override `.site-top-header-wrap .site-container` here —
   leaving it native is what keeps the two rows edge-aligned. */
.site-top-header-wrap .site-top-header-inner-wrap,
.site-top-header-wrap .site-header-top-section-center,
.site-top-header-wrap .site-header-section-center,
.site-top-header-wrap .site-header-item,
.site-top-header-wrap .header-html,
.site-top-header-wrap .header-html-inner {
	width: 100%;
	max-width: none;
	flex: 1 1 100%;
	justify-content: stretch;
}
.cb-utility {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.cb-utility a {
	white-space: nowrap;
}

/* Header row separators — exactly ONE 1px #e2e3e5 line under the utility bar
   and one under the main nav row. Borders live only on each row's bottom edge
   (no top borders) so the boundary between rows never doubles up. */
.site-top-header-wrap .site-header-row-container-inner {
	border-top: 0;
	border-bottom: 1px solid #e2e3e5;
}
.site-main-header-wrap .site-header-row-container-inner {
	background: #ffffff;
	border-top: 0;
	border-bottom: 1px solid #e2e3e5;
}
.cb-serving {
	color: #5c5d5c !important; /* must beat Kadence's .header-html colour */
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.02em;
}

/* Right-hand group: social icons + phone on one row, 24px apart. */
.cb-right {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* Phone (.tphone): red icon + bold dark number, 7px apart; whole thing turns
   red on hover. */
.cb-phone {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #1a1b1a !important; /* darker than geo, on purpose; beats .header-html a */
	font-weight: 700;
	font-size: 14px;
}
.cb-phone .cb-phone-num {
	color: #1a1b1a !important;
}
.cb-phone .cb-phone-icon {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	color: #9D0000 !important; /* red phone icon (fill = currentColor) */
	fill: currentColor;
}
.cb-phone:hover,
.cb-phone:focus,
.cb-phone:hover .cb-phone-num,
.cb-phone:focus .cb-phone-num {
	color: #9D0000 !important; /* number turns red; icon already red */
}

/* Social icons — 17px muted glyphs, 15px apart, red lift on hover.
   Sized in px (and via the SVG width/height attrs) so they never stretch. */
.cb-social {
	display: inline-flex;
	align-items: center;
	gap: 15px;
}
.cb-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #5c5d5c !important; /* muted charcoal; beats .header-html a colour */
	line-height: 0;
	transition: color 0.15s ease, transform 0.15s ease;
}
.cb-social-link:hover,
.cb-social-link:focus {
	color: #9D0000 !important; /* brand red */
	transform: translateY(-1px);
}
.cb-social .cb-social-link svg {
	width: 17px;
	height: 17px;
	max-width: 17px;
	max-height: 17px;
	display: inline-block;
	vertical-align: middle;
	fill: currentColor;
	flex: 0 0 auto;
}

/* --- Logo: 52px tall in the main nav row. max-width:none overrides Kadence's
   default logo max-width so the height drives the size at natural ratio. --- */
#main-header .site-branding a.brand img.custom-logo {
	height: 52px;
	width: auto;
	max-height: 52px;
	max-width: none;
}

/* --- Primary nav link letter-spacing (size/weight/color/spacing set in the
   Customizer: Header > Primary Navigation). --- */
#main-header .header-navigation .header-menu-container ul li a {
	letter-spacing: 0.02em;
}

/* --- Header action buttons (main row): the two buttons sit far right, 22px
   apart. The container holds BOTH the custom charcoal "Support" button
   (functions.php) and the native red "Get In Touch" button. NOTE: the
   .cb-support-* rules are temporary — remove them when "Support" becomes a
   native Kadence Pro button. --- */
[data-section="kadence_customizer_header_button"] {
	display: flex;
	align-items: center;
	gap: 22px;
}
.cb-support-wrap {
	margin: 0;
}

/* Shared button base. The native red button takes most of this from the
   Customizer; these rules add what Kadence can't express (letter-spacing) and
   keep the custom Support button pixel-identical. */
.cb-support-btn,
#main-header .header-button.button {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	border-radius: 3px;
	border: none;
	transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

/* SUPPORT — solid charcoal with a white headset icon. */
.cb-support-btn,
.cb-support-btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 28px;
	background: #434443;
	color: #ffffff;
}
.cb-support-btn:hover,
.cb-support-btn:focus {
	background: #1a1b1a;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35);
}
.cb-support-icon {
	width: 17px;
	height: 17px;
	display: inline-block;
	flex: 0 0 auto;
}

/* GET IN TOUCH — solid red. Background/hover-colour/padding/radius come from
   the Customizer; this adds the lift + red glow on hover. */
#main-header .header-button.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px -8px rgba(157, 0, 0, 0.45);
}

/* --- Header one-row fit (desktop). Two top-level items (Tech Resources, Blog)
   were added to the primary menu, widening the nav until "Get In Touch" wrapped
   to two lines. Keep both action buttons on a single line and reclaim a little
   horizontal room so logo + nav + Support + Get In Touch sit on ONE row. All
   scoped to #main-header so page bodies and the mobile menu are untouched. --- */
/* 1) Buttons never wrap (was the visible "Get In / Touch" split). */
.cb-support-btn,
#main-header .header-button.button {
	white-space: nowrap;
}
/* 2) Nav labels never wrap (keeps "Tech Resources" on one line). */
#main-header .main-navigation .primary-menu-container > ul > li.menu-item > a {
	white-space: nowrap;
}
/* 3) Tighten nav item spacing: Customizer sets 15px L/R padding per link
   (30px between items). Trim to 10px to give the row back ~50px across 5 items. */
#main-header .main-navigation .primary-menu-container > ul > li.menu-item > a {
	padding-left: 10px;
	padding-right: 10px;
}
/* 4) Trim the gap between the Support and Get In Touch buttons (was 22px). */
#main-header [data-section="kadence_customizer_header_button"] {
	gap: 16px;
}

/* ===========================================================================
   FOOTER POLISH — STYLING ONLY (scoped to .site-footer).
   All footer CONTENT lives in native blocks in the footer widget areas
   (Appearance > Widgets) so Samantha can edit labels/links/addresses/email.
   Only the things the block UI can't do live here.
   =========================================================================== */

/* 1. Wrapper + layout ----------------------------------------------------- */
.site-footer .site-footer-wrap {
	background: #141514;
	padding: 70px 0 34px;
}
/* Neutralise Kadence's own footer-row vertical padding so the wrap padding
   above is exact (avoids doubling). */
.site-footer .site-top-footer-wrap .site-footer-row-container-inner,
.site-footer .site-bottom-footer-wrap .site-footer-row-container-inner {
	padding-top: 0;
	padding-bottom: 0;
}
/* Inner container: 1200px centered, 28px side padding — shared by both rows. */
.site-footer .site-top-footer-inner-wrap,
.site-footer .site-bottom-footer-inner-wrap {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding-left: 28px;
	padding-right: 28px;
}
/* 4-column grid. padding-top:0 — the 70px top space belongs to the footer
   wrapper, NOT this nested Kadence row (which otherwise adds 30px above the
   logo). Only the 48px before the divider lives here. */
.site-footer .site-top-footer-inner-wrap {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 40px;
	padding-top: 0;
	padding-bottom: 48px;
	border-bottom: 1px solid #2a2b2a;
}
/* Kill Kadence's default per-widget bottom margin so it doesn't inflate the
   gap above the divider / below the copyright. */
.site-footer .site-top-footer-inner-wrap .widget,
.site-footer .site-bottom-footer-inner-wrap .widget {
	margin-bottom: 0;
}
/* Copyright row: vertical padding lives ONLY here as 26px top / 0 bottom
   (overrides Kadence's stacked 30px/30px). The 34px below comes from the
   footer wrapper. Result: divider-to-copyright distance = exactly 26px. */
.site-footer .site-bottom-footer-inner-wrap {
	padding-top: 26px;
	padding-bottom: 0;
}
/* Let the grid govern column widths (reset Kadence's flex sizing). */
.site-footer .site-top-footer-inner-wrap > .site-footer-section {
	width: auto;
	max-width: none;
	flex: initial;
	padding: 0;
}
@media (max-width: 980px) {
	.site-footer .site-top-footer-inner-wrap {
		grid-template-columns: 1fr 1fr;
	}
}

/* 0. White brand logo ----------------------------------------------------- */
.site-footer .cb-footer-logo {
	margin: 0 0 18px;
}
.site-footer .cb-footer-logo img {
	height: 46px;
	width: auto;
}

/* 2. Brand column --------------------------------------------------------- */
.site-footer .cb-footer-tagline {
	color: #ACACAC;
	font-size: 14.5px;
	max-width: 30ch;
}
.site-footer .cb-footer-email a {
	font-size: 14.5px;
	font-weight: 600;
	margin-top: 8px;
	display: inline-block;
}
/* The email link colour is also set at the block level (editable), but Kadence's
   footer link rule .site-footer .site-top-footer-wrap a:not(.button):not(...)
   has very high specificity (0,5,1) and the Cloudflare-obfuscated href is NOT a
   mailto:, so we force the brand red here on the real block class. */
.site-footer .cb-footer-email a {
	color: #9D0000 !important;
}
.site-footer .cb-footer-email a:hover {
	color: #ffffff !important;
}

/* 3. Social icons (core/social-links, logos-only) ------------------------- */
.site-footer .cb-footer-social {
	display: flex;
	gap: 14px;
	margin-top: 20px;
	padding: 0;
}
.site-footer .cb-footer-social .wp-social-link {
	width: 19px;
	height: 19px;
	margin: 0;
	padding: 0;
	background: transparent !important;
	transition: transform 0.15s ease;
}
.site-footer .cb-footer-social .wp-social-link a {
	padding: 0;
	color: #ACACAC;
	transition: color 0.15s ease;
}
.site-footer .cb-footer-social .wp-social-link svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}
.site-footer .cb-footer-social .wp-social-link:hover {
	transform: translateY(-2px);
}
.site-footer .cb-footer-social .wp-social-link:hover a {
	color: #c41019;
}

/* 4. Link columns — Services & Company ------------------------------------ */
.site-footer .cb-foot-head {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 17px;
	letter-spacing: 0.12em;
	color: #ffffff;
	margin-bottom: 16px;
}
.site-footer .cb-footer-links,
.site-footer .cb-footer-links li {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}
.site-footer .cb-footer-links li {
	margin-top: 0;
	margin-bottom: 0;
}
.site-footer .cb-footer-links a {
	display: block;
	color: #ACACAC;
	font-size: 14.5px;
	margin-bottom: 10px;
}
.site-footer .cb-footer-links a:hover {
	color: #c41019;
}

/* 5. Offices column ------------------------------------------------------- */
.site-footer .cb-office {
	margin-bottom: 18px;
}
.site-footer .cb-office:last-child {
	margin-bottom: 0;
}
.site-footer .cb-office p {
	margin: 0;
}
.site-footer .cb-office-city strong {
	display: block;
	color: #ffffff;
	font-size: 14px;
	font-weight: 800;
	margin-bottom: 4px;
}
.site-footer .cb-office-addr {
	font-style: normal;
	color: #ACACAC;
	font-size: 14px;
	line-height: 1.55;
	margin-bottom: 10px;
}
.site-footer .cb-office-phone a {
	color: #ffffff;
	font-weight: 600;
}

/* 6. Footer bottom bar ---------------------------------------------------- */
.site-footer .site-footer-bottom-section-1,
.site-footer .footer-html,
.site-footer .footer-html-inner {
	width: 100%;
}
.site-footer .cb-foot-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	/* 26px top padding now lives on the copyright ROW (.site-bottom-footer-inner-wrap),
	   not here, so it isn't doubled. */
	color: #6f706f;
	font-size: 13px;
}
.site-footer .cb-foot-bottom span {
	color: #6f706f;
}

/* ---------------------------------------------------------------------------
   FOOTER BOTTOM SPACING — bulletproof. The ONLY space below the copyright is
   the footer wrapper's 34px. Zero every Kadence default bottom padding/margin
   in the bottom-row chain so nothing stacks under the copyright. (#colophon
   prefix beats every Kadence-generated footer rule regardless of source order.)
   Result: copyright text -> page bottom = exactly 34px.
   --------------------------------------------------------------------------- */
#colophon .site-bottom-footer-wrap,
#colophon .site-bottom-footer-wrap .site-footer-row-container-inner,
#colophon .site-bottom-footer-wrap .site-container,
#colophon .site-bottom-footer-inner-wrap,
#colophon .site-footer-bottom-section-1,
#colophon .site-bottom-footer-wrap .footer-widget-area,
#colophon .site-bottom-footer-wrap .footer-widget-area-inner,
#colophon .site-bottom-footer-wrap .footer-html,
#colophon .site-bottom-footer-wrap .footer-html-inner,
#colophon .cb-foot-bottom {
	padding-bottom: 0;
	margin-bottom: 0;
}
/* Copyright row: 26px top only (left/right stay at the shared 28px container
   inset so the copyright lines up with the columns above it). */
#colophon .site-bottom-footer-inner-wrap {
	padding-top: 26px;
	padding-bottom: 0;
}
/* Footer wrapper owns the only bottom space. */
#colophon .site-footer-wrap {
	padding-bottom: 34px;
}

/* ===========================================================================
   CTA BAND — dark full-width section directly above the footer.
   Content is a native-block synced pattern ("cta-band"); only the styling the
   block UI can't express lives here, scoped to .cta-band.
   =========================================================================== */
.cta-band {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, #2a0404, #1a1b1a 60%);
}
/* Decorative circuit SVG sits behind everything. It's absolutely positioned
   (inset:0) and resolves to .cta-band (position:relative); content above wins
   via .cta-band-inner z-index:2. Descendant selector because Gutenberg wraps
   group children in .wp-block-group__inner-container. */
.cta-band svg {
	z-index: 1;
}
/* Content container: 1200px centered, above the SVG. */
.cta-band .cta-band-inner {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	padding: 88px 28px;
	text-align: center;
}

/* 3. Eyebrow */
.cta-band .cta-eyebrow {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 18px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #c41019;
	margin: 0;
}
/* 4. Headline */
.cta-band .cta-headline {
	font-family: 'Bebas Neue', sans-serif;
	font-size: clamp(44px, 6vw, 84px);
	color: #ffffff;
	max-width: 18ch;
	margin: 14px auto 0;
	line-height: 0.95; /* matches the global heading metric (was 1.04) */
}
/* 5. Subhead */
.cta-band .cta-subhead {
	color: #cfd0cf;
	font-size: 18px;
	max-width: 48ch;
	margin: 18px auto 0;
}

/* 6. CTA group — centered, stacked */
.cta-band .cta-actions {
	margin-top: 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.cta-band .cta-actions .cta-btn-wrap {
	margin: 0;
}
/* a) Solid white button */
.cta-band .cta-btn .wp-block-button__link {
	background: #ffffff;
	color: #1a1b1a;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.02em;
	padding: 18px 38px;
	border-radius: 3px;
	border: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta-band .cta-btn .wp-block-button__link:hover,
.cta-band .cta-btn .wp-block-button__link:focus {
	background: #ffffff;
	color: #1a1b1a;
	transform: translateY(-2px);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}
/* b) GoHighLevel form placeholder (until LeadConnector is reactivated). */
.cta-band .cta-form-placeholder {
	border: 1.5px dashed #6a3a3a;
	border-radius: 6px;
	padding: 20px 30px;
	color: #d9a;
	font-size: 14px;
	letter-spacing: 0.03em;
	background: rgba(157, 0, 0, 0.12);
}

/* ===========================================================================
   STICKY HEADER — stuck appearance.
   Native sticky is enabled in the Customizer (Header > Sticky Header =
   "Top Row & Main Row"), which pins the whole upper header as one unit and
   adds `kadence-sticky-header` to .site-header-upper-inner-wrap; on scroll its
   JS adds `item-is-fixed` and removes `item-at-start`. Kadence sets the sticky
   background to rgba(255,255,255,0.9) (sticky background option); these rules
   add the blur, the single bottom border, and z-index that the toggle can't.
   =========================================================================== */
#masthead .site-header-upper-inner-wrap.kadence-sticky-header.item-is-fixed:not(.item-at-start) {
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid #e2e3e5;
	z-index: 50;
}
/* The inner rows are normally opaque (#f3f4f5 / #fff) and would cover the
   translucent blurred panel — make them transparent and drop their per-row
   borders while stuck so the whole header reads as one glass bar with a single
   1px bottom border. */
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-top-header-wrap .site-header-row-container-inner,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-main-header-wrap .site-header-row-container-inner {
	background: transparent;
	border-bottom: 0;
}

/* ===========================================================================
   HERO — full-width light section at the top of the homepage. Content is a
   native-block synced pattern ("hero"); only styling the block UI can't express
   lives here, scoped to .hero. Circuit SVG + glow + eyebrow dot are decorative.
   =========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f3f4f5 100%);
	border-bottom: 1px solid #e2e3e5;
	/* The hero's bottom space lives HERE on the section wrapper. Condensed to
	   56px (was 104px) to tighten the rhythm into the trust bar. */
	padding-bottom: 56px;
}
/* Belt-and-suspenders: kill any default flow margin on the group wrappers so
   the trust strip can never be pushed down by block spacing. */
.hero > .wp-block-group__inner-container,
.hero .hero-inner > .wp-block-group__inner-container {
	margin: 0;
}
/* Decorative circuit traces (anchored right) + soft glow sit behind content. */
.hero svg {
	z-index: 1;
}
.hero .hero-glow {
	position: absolute;
	top: -220px;
	right: -220px;
	width: 720px;
	height: 720px;
	background: radial-gradient(circle, rgba(157, 0, 0, 0.12), rgba(157, 0, 0, 0) 62%);
	pointer-events: none;
	z-index: 1;
}
/* Content: 1200px centered box, left-aligned, above the graphic. */
.hero .hero-inner {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	padding: 96px 28px 0; /* bottom space moved to the .hero section wrapper */
	text-align: left;
}

/* 3. Eyebrow row — red glowing dot (::before) + Bebas text. */
.hero .hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 18px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #9D0000;
}
.hero .hero-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #9D0000;
	box-shadow: 0 0 12px 2px rgba(157, 0, 0, 0.5);
}

/* 4. Two-tone headline (line 1 ink, line 2 red via inline <mark> colour). */
.hero .hero-headline {
	font-family: 'Bebas Neue', sans-serif;
	font-weight: 400;
	line-height: 0.95;
	font-size: clamp(58px, 9vw, 128px);
	max-width: 14ch;
	color: #1a1b1a;
	margin: 0;
}
.hero .hero-headline mark,
.hero .hero-headline .has-inline-color {
	background: transparent;
}

/* 5. Subhead */
.hero .hero-sub {
	max-width: 54ch;
	margin: 26px 0 0;
	color: #5c5d5c;
	font-size: 19px;
}

/* 6. Button row */
.hero .hero-cta-row {
	display: flex;
	gap: 14px;
	margin-top: 40px;
	flex-wrap: wrap;
}
.hero .hero-cta-row .wp-block-button__link {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	padding: 15px 28px;
	border-radius: 3px;
	border: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.hero .hero-btn-primary .wp-block-button__link {
	background: #9D0000;
	color: #ffffff;
}
.hero .hero-btn-primary .wp-block-button__link:hover {
	background: #c41019;
	transform: translateY(-2px);
}
/* Ghost button: transparent + 1.5px border. Vertical/horizontal padding reduced
   by 1.5px so its outer size matches the borderless primary. */
.hero .hero-btn-ghost .wp-block-button__link {
	background: transparent;
	color: #1a1b1a;
	border: 1.5px solid #cdced0;
	padding: 13.5px 26.5px;
}
.hero .hero-btn-ghost .wp-block-button__link:hover {
	border-color: #9D0000;
	color: #9D0000;
	transform: translateY(-2px);
}

/* 7. Google reviews pill */
.hero .hero-reviews {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
	padding: 11px 20px;
	background: #ffffff;
	border: 1px solid #e2e3e5;
	border-radius: 40px;
	box-shadow: 0 6px 22px -10px rgba(0, 0, 0, 0.2);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hero .hero-reviews:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.28);
}
.hero .hero-g {
	display: inline-flex;
	line-height: 0;
}
.hero .hero-stars {
	color: #FBBC05;
	letter-spacing: 2px;
	font-size: 16px;
}
.hero .hero-reviews-text {
	font-size: 14px;
	color: #5c5d5c;
}
.hero .hero-reviews-score {
	font-size: 15px;
	font-weight: 700;
	color: #1a1b1a;
}

/* ===========================================================================
   HERO MOTION — staggered content fade-up, circuit draw-in, pulsing red nodes.
   Pure CSS, starts on load (hero is above the fold). Respects reduced-motion.
   =========================================================================== */
@keyframes fadeUp    { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes drawIn    { to { stroke-dashoffset: 0; } }
@keyframes nodePulse { 0%, 100% { opacity: .45; r: 4; } 50% { opacity: 1; r: 5.5; } }
@keyframes glowPulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }

/* 2. Content fade-up (staggered). Base + per-element delays. */
.hero .hero-anim {
	opacity: 0;
	animation: fadeUp 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.hero .hero-eyebrow  { animation-delay: 0.10s; }
.hero .hero-headline { animation-delay: 0.22s; }
.hero .hero-sub      { animation-delay: 0.36s; }
.hero .hero-cta-row  { animation-delay: 0.50s; }
.hero .hero-reviews  { animation-delay: 0.62s; }

/* 3. Circuit lines draw themselves in, staggered. */
.hero-circuit path {
	stroke-dasharray: 1400;
	stroke-dashoffset: 1400;
	animation: drawIn 2.4s cubic-bezier(0.3, 0.7, 0.2, 1) forwards;
}
.hero-circuit path:nth-child(2) { animation-delay: 0.12s; }
.hero-circuit path:nth-child(3) { animation-delay: 0.24s; }
.hero-circuit path:nth-child(4) { animation-delay: 0.36s; }
.hero-circuit path:nth-child(5) { animation-delay: 0.48s; }
.hero-circuit path:nth-child(6) { animation-delay: 0.60s; }
.hero-circuit path:nth-child(7) { animation-delay: 0.72s; }
.hero-circuit path:nth-child(8) { animation-delay: 0.84s; }

/* 4. Red nodes pulse forever. */
.hero-circuit g[fill="#9D0000"] circle {
	animation: nodePulse 3s ease-in-out infinite;
	filter: drop-shadow(0 0 4px rgba(157, 0, 0, 0.5));
}
.hero-circuit g[fill="#9D0000"] circle:nth-child(2) { animation-delay: 0.9s; }
.hero-circuit g[fill="#9D0000"] circle:nth-child(3) { animation-delay: 1.7s; }

/* 5. Soft red glow blob pulse. */
.hero .hero-glow {
	animation: glowPulse 7s ease-in-out infinite;
}

/* 6. Reduced-motion: everything appears instantly, no animation. */
@media (prefers-reduced-motion: reduce) {
	.hero * {
		animation: none !important;
		transition: none !important;
	}
	.hero .hero-anim {
		opacity: 1 !important;
		transform: none !important;
	}
	.hero-circuit path {
		stroke-dashoffset: 0 !important;
	}
}

/* ===========================================================================
   TRUST STRIP — dark full-width bar between the hero and the section below it.
   Blocks live on the Home page (group + 4 flex stat items, editable); only the
   styling the block UI can't express lives here, scoped to .trust.
   =========================================================================== */
.trust {
	background: #1a1b1a;
	border-bottom: 1px solid #e2e3e5;
	margin-top: 0; /* butt directly against the hero — no block-spacing gap */
}
.trust .trust-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 26px 28px;
}
.trust .trust-item {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 14px;
	margin: 0;
}
.trust .trust-num {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 42px;
	color: #c41019;
	line-height: 0.8;
	margin: 0;
	flex: 0 0 auto;
}
.trust .trust-lbl {
	font-size: 14px;
	color: #cfd0cf;
	max-width: 22ch;
	line-height: 1.3;
	margin: 0;
}
/* Wrap to 2x2 on narrow screens. */
@media (max-width: 768px) {
	.trust .trust-item {
		flex: 1 1 calc(50% - 12px);
	}
}

/* ===========================================================================
   HOME BODY SECTIONS 2-4 (Service Cards / Why / Service Areas). Native blocks
   on page 206; static look only (scroll-reveal wired later). Section bg/borders
   are full-bleed via the fullwidth page layout.
   =========================================================================== */

/* Shared section header + base ------------------------------------------- */
.sec-head {
	margin-bottom: 32px; /* condensed (was 54px) */
	max-width: 62ch;
	text-align: left;
}
.sec-eyebrow {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 18px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #9D0000;
	margin: 0;
}
.sec-h2 {
	font-family: 'Bebas Neue', sans-serif; /* weight 400 + line-height .95 from global net */
	margin: 10px 0 0; /* tightened eyebrow->headline gap (was 14px) */
}
/* Guarantee the eyebrow->H2 gap is ~10px in every section header — beats any
   block-gap / paragraph margin from the block stylesheet. Leaves the H2->subhead
   gap (sec-sub margin-top) untouched. */
.sec-head .sec-eyebrow,
.blog-head-text .sec-eyebrow {
	margin-bottom: 0;
}
.sec-head .sec-h2,
.blog-head-text .sec-h2 {
	margin-top: 10px;
}
.sec-sub {
	color: #5c5d5c;
	font-size: 18px;
	margin: 16px 0 0;
}
.svc-section,
.loc-section {
	background: #ffffff;
	padding: 56px 0; /* condensed (was 104px 0) */
}
/* Services is the first section under the dark trust bar — ride up close. */
.svc-section {
	padding-top: 36px;
}
.svc-inner,
.loc-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px;
}

/* Section 2 — Service cards ---------------------------------------------- */
.svc-h2 { font-size: clamp(40px, 5.5vw, 72px); }
.svc-section .svc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
}
.svc {
	background: #fff;
	border: 1px solid #e2e3e5;
	border-radius: 6px;
	padding: 32px 22px;
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.svc:hover {
	border-color: #9D0000;
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.25);
}
.svc .ico {
	width: 54px;
	height: 54px;
	margin: 0 auto 16px;
	border-radius: 12px;
	color: #9D0000;
	background: rgba(157, 0, 0, 0.07);
	display: flex;
	align-items: center;
	justify-content: center;
}
.svc .ico svg {
	width: 30px;
	height: 30px;
}
.svc-title {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 25px;
	line-height: 1.05;
	margin: 0 0 9px;
}
.svc-body {
	color: #5c5d5c;
	font-size: 13.5px;
	line-height: 1.45;
	margin: 0;
}
.svc .more {
	margin: 14px 0 0;
}
.svc .more a {
	display: inline-block;
	color: #9D0000;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
}

/* Section 3 — Why -------------------------------------------------------- */
.why {
	background: #f3f4f5;
	border-top: 1px solid #e2e3e5;
	border-bottom: 1px solid #e2e3e5;
	position: relative;
	overflow: hidden;
	padding: 56px 0; /* condensed (was 104px 0) */
}
.why svg {
	z-index: 1; /* decorative circuit sits behind */
}
.why .why-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 64px;
	align-items: center;
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px;
}
.why-h2 { font-size: clamp(38px, 5vw, 64px); }
.why .why-cta {
	margin-top: 30px;
}
.why .why-btn .wp-block-button__link {
	background: #9D0000;
	color: #ffffff;
	border: none;
	border-radius: 3px;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	padding: 15px 28px;
	transition: transform 0.15s ease, background 0.15s ease;
}
.why .why-btn .wp-block-button__link:hover {
	background: #c41019;
	transform: translateY(-2px);
}
.why-list {
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.why-item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.why-item .k {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 30px;
	color: #9D0000;
	min-width: 46px;
	line-height: 1;
	margin: 0;
	flex: 0 0 auto;
}
.why-item-title {
	font-family: var(--global-body-font-family); /* Open Sans */
	font-weight: 800 !important; /* beat the global h1-h6 400!important */
	font-size: 19px;
	color: #1a1b1a;
	line-height: 1.3;
	letter-spacing: normal;
	margin: 0 0 5px;
}
.why-item-body {
	color: #5c5d5c;
	font-size: 15.5px;
	margin: 0;
}

/* Section 4 — Service areas ---------------------------------------------- */
.loc-h2 { font-size: clamp(40px, 5.5vw, 72px); }
.loc-section .loc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.loc {
	border: 1px solid #e2e3e5;
	border-radius: 6px;
	padding: 34px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.loc:hover {
	border-color: #9D0000;
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.22);
}
.loc .pin {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 15px;
	letter-spacing: 0.18em;
	color: #ACACAC;
	margin: 0;
}
.loc-h3 {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 38px;
	margin: 8px 0 10px;
}
.loc-body {
	color: #5c5d5c;
	font-size: 15px;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   EQUAL-HEIGHT CARDS — homepage Service cards (.svc-grid > .svc, 4-up) and
   Service-areas cards (.loc-grid > .loc, 3-up). Both are native Gutenberg grids
   (is-layout-grid), which stretch items by default; we enforce that explicitly
   and make each card a flex column so every card in a row matches the tallest
   regardless of copy length. The card's content lives in Gutenberg's
   .wp-block-group__inner-container wrapper, so that wrapper is flexed to fill the
   stretched card height. Scoped to these two grids only — nothing else changes.
   NOTE: the staggered scroll-reveal already settles to transform:none via
   `.stagger.in > *` (above) at the same specificity as .svc:hover, so we do NOT
   add another transform:none here — doing so would out-specify and kill the
   card hover lift. */
.svc-grid,
.loc-grid {
	align-items: stretch;
}
.svc-grid > .svc,
.loc-grid > .loc {
	align-self: stretch;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.svc-grid > .svc > .wp-block-group__inner-container,
.loc-grid > .loc > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
/* Bottom-align the Services "more" link so links line up across the row. */
.svc-grid > .svc .more {
	margin-top: auto;
}

/* Responsive (mockup @media max-width:980px): sections shrink 104px 0 -> 72px 0;
   Why + Service-areas stack to 1 column; why-grid gap 64px -> 40px. (Service
   cards already auto-fit. Core block UI can't set breakpoint-specific values,
   so this lives here.) */
@media (max-width: 980px) {
	.svc-section,
	.loc-section,
	.why {
		padding: 40px 0; /* condensed mobile (was 72px 0) */
	}
	.why .why-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.loc-section .loc-grid {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================================
   CONTENT WIDTH HARD FALLBACK — force every homepage section's INNER content to
   the mockup's 1200px, no matter what Kadence's global content width is. These
   target the real rendered inner-wrapper classes (NOT .entry-content / the
   section groups) so the full-width coloured backgrounds are untouched —
   only the centered content column is capped. Scoped to .home + !important so
   nothing (Kadence content width, Gutenberg layout) can override it.
   =========================================================================== */
.home .hero-inner,
.home .trust-inner,
.home .svc-inner,
.home .why .why-grid,
.home .loc-inner,
.home .cta-band-inner {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ===========================================================================
   TESTIMONIALS — dark "Rated 5.0 On Google" band (below Service Areas, above
   the CTA hook). Native blocks on page 206. Condensed rhythm (56px / ~10px) to
   match the other sections; shared .sec-head handles the eyebrow->h2 gap.
   =========================================================================== */
.quotes {
	background: #1a1b1a;
	position: relative;
	overflow: hidden;
	padding: 56px 0;
}
.quotes .quotes-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px;
}
/* Dark-section header colour overrides (eyebrow red-hot, white h2, muted sub). */
.quotes .sec-eyebrow {
	color: #c41019;
}
.quotes .sec-h2 {
	color: #ffffff;
	font-size: clamp(40px, 5.5vw, 72px);
}
.quotes .sec-sub {
	color: #ACACAC;
	font-size: 17px;
	margin-top: 14px;
}
/* Quote grid */
.quotes .q-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.quotes .q {
	border-left: 3px solid #9D0000;
	padding: 6px 0 6px 26px;
}
.quotes .qhead {
	margin-bottom: 13px;
}
.quotes .qhead .stars {
	color: #FBBC05;
	letter-spacing: 2px;
	font-size: 15px;
}
.quotes .q-quote {
	font-size: 16px;
	color: #e2e3e1;
	font-style: italic;
	margin: 0;
}
.quotes .who {
	margin-top: 18px;
	margin-bottom: 0;
	font-style: normal;
	color: #ACACAC;
	font-size: 13.5px;
}
.quotes .who strong {
	display: block;
	font-family: var(--global-body-font-family); /* Open Sans */
	font-weight: 800;
	color: #ffffff;
	font-size: 15px;
}
/* White bottom button */
.quotes .q-cta {
	margin-top: 34px;
}
.quotes .q-btn .wp-block-button__link {
	background: #ffffff;
	color: #1a1b1a;
	font-weight: 700;
	font-size: 15px;
	padding: 15px 28px;
	border-radius: 3px;
	border: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.quotes .q-btn .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}
@media (max-width: 980px) {
	.quotes {
		padding: 40px 0;
	}
	.quotes .q-grid {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================================
   BLOG — "From The Blog" light section. Dynamic core Query Loop (latest 3
   posts), styled to the mockup. Condensed rhythm (56px / ~10px). Below
   testimonials, above the CTA hook.
   =========================================================================== */
.blog {
	background: #ffffff;
	padding: 56px 0;
}
.blog .blog-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px;
}
/* Split header: heading left, ghost button right, bottom-aligned. */
.blog .blog-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 32px;
}
.blog-h2 {
	font-size: clamp(40px, 5.5vw, 72px);
}
.blog .blog-btn .wp-block-button__link {
	background: transparent;
	color: #1a1b1a;
	border: 1.5px solid #cdced0;
	font-weight: 700;
	font-size: 15px;
	padding: 13.5px 26.5px; /* +1.5px border = 15/28 outer */
	border-radius: 3px;
	transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.blog .blog-btn .wp-block-button__link:hover {
	border-color: #9D0000;
	color: #9D0000;
	transform: translateY(-2px);
}
/* Post grid + cards */
.blog .blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.blog .wp-block-post {
	margin: 0;
	border: 1px solid #e2e3e5;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.blog .wp-block-post:hover {
	transform: translateY(-3px);
	border-color: #9D0000;
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.2);
}
.blog .wp-block-post-featured-image {
	margin: 0;
	border-bottom: 1px solid #e2e3e5;
	overflow: hidden;
}
.blog .wp-block-post-featured-image a {
	display: block;
	line-height: 0;
}
.blog .wp-block-post-featured-image img {
	width: 100%;
	height: 172px;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
.blog .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}
.blog .post-body {
	padding: 24px;
}
.blog .cat {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 14px;
	letter-spacing: 0.16em;
	color: #9D0000;
}
.blog .cat a {
	color: #9D0000;
	text-decoration: none;
}
.blog .post-title {
	font-family: var(--global-body-font-family); /* Open Sans */
	font-weight: 800 !important; /* beat global h1-h6 400!important */
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: normal;
	margin: 8px 0 10px;
	color: #1a1b1a;
}
.blog .post-title a {
	color: #1a1b1a;
	text-decoration: none;
}
.blog .post-title a:hover {
	color: #9D0000;
}
.blog .date {
	color: #ACACAC;
	font-size: 13px;
}
@media (max-width: 980px) {
	.blog {
		padding: 40px 0;
	}
	.blog .blog-grid {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================================
   SERVICE PAGE TEMPLATE (shared shell). Condensed spacing to match the live
   site (hero 48/40, body 56). Bare classes from the mockup — no collision with
   the homepage (which uses .svc / .svc-grid for cards).
   =========================================================================== */
.svc-hero {
	background: linear-gradient(180deg, #fff, #f3f4f5);
	border-bottom: 1px solid #e2e3e5;
	position: relative;
	overflow: hidden;
}
/* Right-anchored circuit accent — IDENTICAL treatment to the About hero
   (.ab-page.pg-hero .hero-circuit). Added to the service heroes via the shared
   "Hero Circuit" synced pattern (wp_block 7494). The hero section is already
   position:relative + overflow:hidden and .svc-hero-inner already z-index:2, so
   only the circuit's own positioning is needed here. Global rules animate it. */
.svc-hero .hero-circuit {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(620px, 55%);
	height: 100%;
	opacity: .55;
	pointer-events: none;
	z-index: 1;
}
.svc-hero .svc-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 28px 40px;
	position: relative;
	z-index: 2;
}
.breadcrumb {
	font-size: 13px;
	color: #ACACAC;
	margin: 0 0 16px;
	font-weight: 600;
}
.breadcrumb a { color: #5c5d5c; }
.breadcrumb a:hover { color: #9D0000; }
.breadcrumb .sep { margin: 0 8px; color: #cdced0; }
.breadcrumb .cur { color: #9D0000; }
.svc-hero h1 {
	font-size: clamp(46px, 7vw, 90px);
	margin: 4px 0 0;
}
.svc-hero .lede {
	max-width: 62ch;
	margin: 18px 0 0;
	color: #5c5d5c;
	font-size: 19px;
	line-height: 1.6;
}
.svc-body {
	padding: 56px 0;
}
.svc-body-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px;
}
.svc-layout > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 50px;
	align-items: start;
}
.svc-main > :first-child { margin-top: 0; }
/* Body prose links — site's normal red treatment (matches .iv-main / .ind-prose-inner). */
.svc-main a { color: #9D0000; font-weight: 600; }
.svc-main a:hover { color: #c41019; }
.svc-main h2 {
	font-size: 33px;
	margin: 34px 0 14px;
}
.svc-main h3 {
	font-size: 24px;
	margin: 28px 0 10px;
}
.svc-main p {
	color: #5c5d5c;
	font-size: 16.5px;
	line-height: 1.7;
	margin: 0 0 16px;
}
.svc-main ul {
	list-style: none;
	margin: 6px 0 16px;
	padding: 0;
}
.svc-main ul li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 13px;
	color: #5c5d5c;
	font-size: 16px;
	line-height: 1.55;
}
.svc-main ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 7px;
	width: 10px;
	height: 10px;
	background: #9D0000;
	border-radius: 2px;
	transform: rotate(45deg);
}
/* "What's Included" benefit grid + dark stat call-out (IT Security, vCIO).
   Scoped to .svc-main so they only apply inside the service-page body. */
.svc-main h2.mt { margin-top: 46px; }
.svc-main .stat-call {
	background: #1a1b1a;
	border-radius: 12px;
	padding: 30px 34px;
	margin: 34px 0;
	position: relative;
	overflow: hidden;
}
.svc-main .stat-call p {
	color: #fff;
	font-size: 20px;
	line-height: 1.45;
	margin: 0;
	font-weight: 700;
	position: relative;
	z-index: 2;
}
.svc-main .stat-call .accent { color: #c41019; }
.svc-main .stat-call svg {
	position: absolute;
	right: -30px;
	top: 0;
	height: 100%;
	opacity: .5;
}
.svc-main .benefit-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 13px;
	margin: 6px 0 22px;
}
.svc-main .benefit {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: #fff;
	border: 1px solid #e2e3e5;
	border-radius: 8px;
	padding: 15px 17px;
}
.svc-main .benefit svg {
	width: 20px;
	height: 20px;
	color: #9D0000;
	flex: 0 0 auto;
	margin-top: 1px;
}
.svc-main .benefit span {
	font-size: 14.5px;
	font-weight: 600;
	color: #1a1b1a;
}

/* ===========================================================================
   MANAGED IT page (3871) — rebuilt LEFT column only. Headings/body/checklist
   inherit the shared .svc-main styles (Bebas h2, Open Sans gray p, red-diamond
   ul). This block styles ONLY the Section-2 benefit CARD grid. The grid itself
   is a native core Group GRID layout (minimumColumnWidth:260px → 2-up in the
   ~688px left column, 1-up on mobile) — core emits the grid, not hand-rolled.
   Scoped to .managed-it-content so it can't leak to other service pages.
   Card look mirrors the industry service cards (red icon chip + bold title +
   gray sentence); equal-height via flex column + the inner flow wrapper. */
.managed-it-content .mic-grid { gap: 16px; align-items: stretch; margin: 6px 0 22px; }
.managed-it-content .mic-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e2e3e5;
	border-radius: 10px;
	padding: 22px 22px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.managed-it-content .mic-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(20, 20, 20, 0.08);
	border-color: #d2d3d5;
}
.managed-it-content .mic-card > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.managed-it-content .mic-chip {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: rgba(157, 0, 0, 0.08);
	color: #9D0000;
	margin-bottom: 14px;
}
.managed-it-content .mic-chip svg { width: 22px; height: 22px; }
.managed-it-content .mic-card h3 {
	font-size: 19px;
	line-height: 1.15;
	margin: 0 0 6px;
	color: #1a1b1a;
}
.managed-it-content .mic-card p {
	color: #5c5d5c;
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0;
}

/* ===========================================================================
   CLOUD SERVICES page (3873) — rebuilt LEFT column only. Headings/body inherit
   the shared .svc-main styles (Bebas h2/h3, Open Sans gray p). This block styles
   Section 1's icon+text ROWS (.cl-rows/.cl-row, native groups laid out with FLEX
   — not a grid) and Section 2's bold-title styled list (.cl-points, reuses the
   .svc-main red-diamond markers). Scoped to .cloud-content so nothing leaks. */
.cloud-content .cl-rows { margin: 10px 0 6px; }
.cloud-content .cl-rows > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.cloud-content .cl-row > .wp-block-group__inner-container {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.cloud-content .cl-ico {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(157, 0, 0, 0.08);
	color: #9D0000;
	margin-top: 2px;
}
.cloud-content .cl-ico svg { width: 24px; height: 24px; }
.cloud-content .cl-rowtext { flex: 1 1 auto; }
.cloud-content .cl-rowtext h4 {
	font-size: 21px;
	line-height: 1.05;
	letter-spacing: 0.01em;
	margin: 0 0 3px;
	color: #1a1b1a;
}
.cloud-content .cl-rowtext p {
	margin: 0;
	color: #5c5d5c;
	font-size: 15.5px;
	line-height: 1.5;
}
/* Section 2 — styled list with bold lead-in titles (red-diamond markers
   inherited from .svc-main ul). */
.cloud-content .cl-points li { margin-bottom: 16px; }
.cloud-content .cl-points li strong { color: #1a1b1a; font-weight: 700; }

/* ===========================================================================
   SERVICES LANDING page (3860) — rebuilt LEFT column only. Headings/body inherit
   the shared .svc-main styles (Bebas h2, Open Sans gray p). Section 2 reuses the
   icon+text ROW component (same treatment as the Cloud page) but with LINKED
   titles; Section 3 reuses the .cl-points bold-title styled list (red-diamond
   markers from .svc-main ul). Scoped to .services-landing-content so nothing
   leaks (the .cl-* rules above are scoped to .cloud-content and don't reach here). */
.services-landing-content .cl-rows { margin: 10px 0 6px; }
.services-landing-content .cl-rows > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.services-landing-content .cl-row > .wp-block-group__inner-container {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
.services-landing-content .cl-ico {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(157, 0, 0, 0.08);
	color: #9D0000;
	margin-top: 2px;
}
.services-landing-content .cl-ico svg { width: 24px; height: 24px; }
.services-landing-content .cl-rowtext { flex: 1 1 auto; }
.services-landing-content .cl-rowtext h4 {
	font-size: 21px;
	line-height: 1.05;
	letter-spacing: 0.01em;
	margin: 0 0 3px;
	color: #1a1b1a;
}
/* Linked row titles keep the dark heading look; red on hover. */
.services-landing-content .cl-rowtext h4 a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}
.services-landing-content .cl-rowtext h4 a:hover { color: #9D0000; }
/* Bebas Neue has ONLY a 400 cut — any bold weight (incl. the .svc-main a 600 on
   the linked row titles) synthesizes faux-bold (thick/muddy). Force weight 400 on
   all Bebas headings + the row-title links and disable font-synthesis so the
   browser can't fake it. Size/letter-spacing kept; the row titles still read as
   titles via Bebas caps + larger size. (Open Sans .cl-points strong is untouched
   — it has a real bold cut.) */
.services-landing-content h2,
.services-landing-content h3,
.services-landing-content h4,
.services-landing-content .cl-rowtext h4,
.services-landing-content .cl-rowtext h4 a {
	font-weight: 400 !important;
	font-synthesis: none;
	-webkit-font-synthesis: none;
}
.services-landing-content .cl-rowtext p {
	margin: 0;
	color: #5c5d5c;
	font-size: 15.5px;
	line-height: 1.5;
}
/* Section 3 — styled list with bold lead-in titles (red-diamond markers from
   .svc-main ul). */
.services-landing-content .cl-points li { margin-bottom: 16px; }
.services-landing-content .cl-points li strong { color: #1a1b1a; font-weight: 700; }

.svc-aside {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.aside-card {
	background: #fff;
	border: 1px solid #e2e3e5;
	border-radius: 10px;
	padding: 26px;
}
.aside-card h4 {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 23px;
	letter-spacing: 0.06em;
	color: #1a1b1a;
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid #e2e3e5;
}
/* Real 2-column GRID (was CSS column-count, which auto-flowed ragged rows with
   uneven column lengths). Each industry is its own grid cell, top-aligned, so a
   1-line label ("Education") and a 2-line label ("County & Municipal Government")
   in the same row line up at the top with consistent row rhythm. 11 items flow
   row-wise into 6 rows → 6 left / 5 right. Spacing via row-gap (no per-li margin)
   so every gap is identical. */
.ind-list {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 18px;
	row-gap: 9px;
	align-items: start;
	margin: 0;
	padding: 0;
}
.ind-list li {
	position: relative;
	padding-left: 16px;
	font-size: 13.5px;
	line-height: 1.35;
	color: #5c5d5c;
}
.ind-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 6px;
	height: 6px;
	background: #9D0000;
	border-radius: 50%;
}
/* Linked industry names keep the plain-text look (inherit gray); red on hover. */
.ind-list li a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}
.ind-list li a:hover { color: #9D0000; }
.aside-contact {
	background: #1a1b1a;
	border-color: #2a2b2a;
}
.aside-contact h4 {
	color: #fff;
	border-color: #2a2b2a;
}
.aside-contact .hours {
	color: #ACACAC;
	font-size: 14px;
	margin: 0;
}
.aside-contact .ph {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 34px;
	color: #fff;
	display: block;
	margin: 10px 0 16px;
	letter-spacing: 0.02em;
}
.aside-contact .ph:hover { color: #c41019; }

/* ===========================================================================
   SUPPORT PAGE. Condensed spacing. JotForm + ScreenConnect embeds.
   =========================================================================== */
.support-hero {
	background: linear-gradient(180deg, #fff, #f3f4f5);
	border-bottom: 1px solid #e2e3e5;
	position: relative;
	overflow: hidden;
}
.support-hero .support-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 28px 40px;
	position: relative;
	z-index: 2;
}
.support-hero h1 {
	font-size: clamp(48px, 7vw, 96px);
	margin: 12px 0 0;
}
.support-hero p.sub {
	max-width: 62ch;
	margin: 18px 0 0;
	color: #5c5d5c;
	font-size: 19px;
}
.support-body {
	padding: 56px 0;
}
.support-body-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px;
}
.support-grid > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 40px;
	align-items: start;
}
.ticket {
	background: #fff;
	border: 1px solid #e2e3e5;
	border-radius: 10px;
	padding: 40px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.ticket h2 {
	font-size: 30px;
	margin: 0 0 8px;
}
.ticket .sub {
	color: #5c5d5c;
	font-size: 15.5px;
	margin: 0 0 22px;
}
.ticket iframe {
	display: block;
	width: 100%;
	border: none;
}
.support-aside {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.remote-card {
	background: linear-gradient(180deg, #1c1d1c, #101110);
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #2a2b2a;
	box-shadow: 0 20px 54px -26px rgba(0, 0, 0, 0.55);
}
.remote-card .rc-head {
	background: #9D0000;
	color: #fff;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 11px;
}
.remote-card .rc-head svg {
	width: 22px;
	height: 22px;
	flex: none;
	opacity: 0.9;
}
.remote-card .rc-head h3 {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 22px;
	letter-spacing: 0.06em;
	color: #fff;
	line-height: 1;
	margin: 0;
}
.remote-card .rc-body {
	padding: 26px 22px 20px;
}
.remote-card .rc-body p {
	color: #cfd0cf;
	font-size: 14.5px;
	margin: 0 0 18px;
}
.remote-card .rc-body iframe {
	display: block;
	width: 100%;
	height: 360px;
	border: 1px solid #2a2b2a;
	border-radius: 6px;
	background: #fff;
}
.remote-card .rc-link {
	display: inline-block;
	margin-top: 14px;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
}
.remote-card .rc-link:hover { color: #c41019; }
.remote-card .rc-note {
	font-size: 11.5px;
	color: #8a8b8a;
	padding: 0 22px 20px;
	margin: 0;
}
.urgent-card {
	background: #fff;
	border: 1px solid #e2e3e5;
	border-radius: 10px;
	padding: 26px;
}
.urgent-card .lbl {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 16px;
	letter-spacing: 0.14em;
	color: #ACACAC;
	margin: 0;
}
.urgent-card .phone-big {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 40px;
	color: #1a1b1a;
	line-height: 1;
	margin: 6px 0;
	display: block;
	letter-spacing: 0.02em;
}
.urgent-card .phone-big:hover { color: #9D0000; }
.urgent-card p {
	color: #5c5d5c;
	font-size: 14.5px;
	margin: 6px 0 0;
}

@media (max-width: 980px) {
	.svc-layout > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 34px; }
	.svc-main .benefit-grid { grid-template-columns: 1fr; }
	.support-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; }
	.svc-body, .support-body { padding: 40px 0; }
	.ticket { padding: 28px; }
}
/* ===========================================================================
   INDUSTRY PAGES. Two templates, both scoped so NOTHING here can touch the
   homepage (.home / page 206), the service pages (.svc-*) or support (.support-*).

     .ind-page     — shared single-industry shell (11 pages): hero (breadcrumb +
                     H1 + lede) + 2-col body (.iv-main copy + synced "Industry
                     Aside" reusable block, ref 7259).
     .ind-landing  — the /industries/ landing: hero + intro + card grid.

   Each top-level section group carries the scope class (.ind-page / .ind-landing)
   as a COMPOUND on its root so the section backgrounds stay full-bleed while every
   selector remains scoped. Bare mockup class names (pg-hero, iv-*, acard,
   svc-links, ic) are confirmed zero-collision but never used unscoped here.
   Condensed spacing matches the homepage / service shell (hero 48/40, body 56).
   2-col stacks at <=980px.
   =========================================================================== */

/* ---- shared hero (single + landing) ---- */
.ind-page.pg-hero,
.ind-landing.pg-hero {
	background: linear-gradient(180deg, #fff, #f3f4f5);
	border-bottom: 1px solid #e2e3e5;
	position: relative;
	overflow: hidden;
}
/* Right-anchored circuit accent — IDENTICAL to the About hero (shared "Hero
   Circuit" synced pattern, wp_block 7494). Section is already relative+overflow
   hidden and .pg-hero-inner already z-index:2; only the circuit positioning here. */
.ind-page.pg-hero .hero-circuit,
.ind-landing.pg-hero .hero-circuit {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(620px, 55%);
	height: 100%;
	opacity: .55;
	pointer-events: none;
	z-index: 1;
}
.ind-page .pg-hero-inner,
.ind-landing .pg-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 28px 40px;
	position: relative;
	z-index: 2;
}
.ind-page .breadcrumb,
.ind-landing .breadcrumb {
	font-size: 13px;
	color: #ACACAC;
	margin: 0 0 16px;
	font-weight: 600;
}
.ind-page .breadcrumb a,
.ind-landing .breadcrumb a { color: #5c5d5c; }
.ind-page .breadcrumb a:hover,
.ind-landing .breadcrumb a:hover { color: #9D0000; }
.ind-page .breadcrumb .sep,
.ind-landing .breadcrumb .sep { margin: 0 8px; color: #cdced0; }
.ind-page .breadcrumb .cur,
.ind-landing .breadcrumb .cur { color: #9D0000; }
.ind-page .pg-hero-inner h1,
.ind-landing .pg-hero-inner h1 {
	font-size: clamp(46px, 7vw, 90px);
	margin: 4px 0 0;
}
.ind-page .pg-hero-inner .lede,
.ind-landing .pg-hero-inner .lede {
	max-width: 64ch;
	margin: 18px 0 0;
	color: #5c5d5c;
	font-size: 19px;
	line-height: 1.6;
}

/* ---- single-industry body ---- */
.ind-page.iv-body { padding: 56px 0; }
.ind-page .iv-body-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px;
}
/* The real 2-column container is .iv-layout's Kadence inner-container, whose two
   direct children are .iv-main + .iv-aside (same proven pattern as .svc-layout on
   the service pages). Scoped two ways for robustness: by the .ind-page compound on
   the body section, AND by body.parent-pageid-3863 (every single-industry page is a
   child of Industries 3863). Home=page-id-206, services=parent-pageid-3860,
   support=top-level — none match, so this can never touch them. NOT placed on
   .entry-content.single-content: that holds the hero + body sections (which must
   stay stacked), not the main/aside columns. */
.ind-page .iv-layout > .wp-block-group__inner-container,
body.parent-pageid-3863 .iv-layout > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 50px;
	align-items: start;
}
.ind-page .iv-main > :first-child { margin-top: 0; }
.ind-page .iv-main h2 {
	font-size: 32px;
	margin: 34px 0 14px;
}
.ind-page .iv-main p {
	color: #5c5d5c;
	font-size: 16.5px;
	line-height: 1.7;
	margin: 0 0 16px;
}
.ind-page .iv-main a { color: #9D0000; font-weight: 600; }
.ind-page .iv-main a:hover { color: #c41019; }
.ind-page .iv-main ul {
	list-style: none;
	margin: 6px 0 16px;
	padding: 0;
}
.ind-page .iv-main ul li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 13px;
	color: #5c5d5c;
	font-size: 16px;
	line-height: 1.55;
}
.ind-page .iv-main ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 7px;
	width: 10px;
	height: 10px;
	background: #9D0000;
	border-radius: 2px;
	transform: rotate(45deg);
}

/* ---- single-industry aside (synced "Industry Aside" block) ---- */
.ind-page .iv-aside {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.ind-page .acard {
	background: #fff;
	border: 1px solid #e2e3e5;
	border-radius: 10px;
	padding: 26px;
}
.ind-page .acard h4 {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 23px;
	letter-spacing: 0.06em;
	color: #1a1b1a;
	margin: 0 0 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid #e2e3e5;
}
.ind-page .svc-links { list-style: none; margin: 0; padding: 0; }
.ind-page .svc-links li { margin-bottom: 11px; }
.ind-page .svc-links a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #5c5d5c;
	font-size: 15px;
	font-weight: 600;
	transition: color 0.15s;
}
.ind-page .svc-links a:hover { color: #9D0000; }
.ind-page .svc-links a::before {
	content: "";
	width: 7px;
	height: 7px;
	background: #9D0000;
	border-radius: 2px;
	transform: rotate(45deg);
	flex: 0 0 auto;
}
.ind-page .acard.contact { background: #1a1b1a; border-color: #2a2b2a; }
.ind-page .acard.contact h4 { color: #fff; border-color: #2a2b2a; }
.ind-page .acard.contact .hours { color: #ACACAC; font-size: 14px; margin: 0; }
.ind-page .acard.contact .ph {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 34px;
	color: #fff;
	display: block;
	margin: 10px 0 16px;
	letter-spacing: 0.02em;
}
.ind-page .acard.contact .ph a { color: #fff; }
.ind-page .acard.contact .ph:hover,
.ind-page .acard.contact .ph a:hover { color: #c41019; }
.ind-page .acard.contact .wp-block-button { width: 100%; }
.ind-page .acard.contact .wp-block-button__link {
	width: 100%;
	justify-content: center;
	display: flex;
	background: #9D0000;
	color: #fff;
	border: none;
	font-weight: 700;
}
.ind-page .acard.contact .wp-block-button__link:hover { background: #c41019; }

/* ---- landing: intro + card grid ---- */
.ind-landing.ind-intro { padding: 48px 0 8px; }
.ind-landing .ind-intro-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px;
}
.ind-landing .ind-intro-inner h2 {
	font-size: clamp(32px, 4.5vw, 52px);
	max-width: 20ch;
	margin: 0;
}
.ind-landing .ind-intro-inner p {
	color: #5c5d5c;
	font-size: 18px;
	max-width: 70ch;
	margin-top: 16px;
	line-height: 1.7;
}
.ind-landing.ind-section { padding: 34px 0 72px; }
.ind-landing .ind-section-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px;
}
.ind-landing .ind-grid > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
}
.ind-landing .ic {
	background: #fff;
	border: 1px solid #e2e3e5;
	border-radius: 9px;
	padding: 28px 26px;
	position: relative;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	display: flex;
	flex-direction: column;
	height: 100%;
}
.ind-landing .ic:hover {
	transform: translateY(-4px);
	border-color: #9D0000;
	box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.25);
}
.ind-landing .ic .ico {
	width: 48px;
	height: 48px;
	border-radius: 11px;
	background: rgba(157, 0, 0, 0.07);
	color: #9D0000;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.ind-landing .ic .ico svg { width: 26px; height: 26px; }
.ind-landing .ic h3 { font-size: 25px; margin: 0 0 8px; }
.ind-landing .ic h3 a { color: #1a1b1a; transition: color 0.15s; }
.ind-landing .ic h3 a:hover { color: #9D0000; }
.ind-landing .ic p {
	color: #5c5d5c;
	font-size: 14.5px;
	line-height: 1.5;
	flex: 1;
	margin: 0;
}
.ind-landing .ic .more {
	margin-top: 16px;
	color: #9D0000;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	display: inline-block;
}
.ind-landing .ic.yours {
	background: linear-gradient(180deg, #434443, #1c1d1c);
	border-color: #3a3b3a;
}
.ind-landing .ic.yours h3,
.ind-landing .ic.yours h3 a { color: #fff; }
.ind-landing .ic.yours p { color: #ACACAC; }
.ind-landing .ic.yours .ico { background: rgba(196, 16, 25, 0.18); color: #fff; }
.ind-landing .ic.yours .more { color: #ff6b6b; }

/* ---- industries responsive: 2-col stacks at <=980px ---- */
@media (max-width: 980px) {
	.ind-page .iv-layout > .wp-block-group__inner-container,
	body.parent-pageid-3863 .iv-layout > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: 34px; }
	.ind-page.iv-body { padding: 40px 0; }
	.ind-landing .ind-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; }
}

/* ---- landing: real existing prose band (kept verbatim, condensed headings) ---- */
.ind-landing.ind-prose { padding: 44px 0 8px; }
.ind-landing .ind-prose-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px;
}
.ind-landing .ind-prose-inner > :first-child { margin-top: 0; }
.ind-landing .ind-prose-inner h2 { font-size: 30px; margin: 30px 0 12px; }
.ind-landing .ind-prose-inner p {
	color: #5c5d5c;
	font-size: 16.5px;
	line-height: 1.7;
	margin: 0 0 16px;
	max-width: 78ch;
}
.ind-landing .ind-prose-inner a { color: #9D0000; font-weight: 600; }
.ind-landing .ind-prose-inner a:hover { color: #c41019; }

/* ===========================================================================
   TEAM + LOCATIONS PAGES. Three templates, all scoped so nothing here can
   touch the homepage (.home/206), services (.svc-*), support (.support-*),
   or industries (.ind-*):
     .tm-page   — Meet The Team (6568): hero + per-office member card grids.
     .loc-land  — Locations landing (7174): hero + intro + 3 office cards.
     .lv-page   — single-location (Clarksville 6217, Nashville 6219): hero +
                  2-col body (.lv-main copy + .lv-aside map/office card).
   Section groups carry the scope class as a COMPOUND on their root so section
   backgrounds stay full-bleed while selectors stay scoped. Grid/column/card
   structures are rendered as raw HTML inside wp:html blocks, so their grid
   container is a plain div (NO Kadence inner-container) — display:grid goes
   directly on .team-grid / .loc-cards / .lv-layout (cf. [[kadence-grid-inner-container]],
   which only bites Kadence GROUP grids). 2-cols stack at <=980px.
   =========================================================================== */

/* ---- shared hero (all three) ---- */
.tm-page.pg-hero,
.loc-land.pg-hero,
.lv-page.pg-hero {
	background: linear-gradient(180deg, #fff, #f3f4f5);
	border-bottom: 1px solid #e2e3e5;
	position: relative;
	overflow: hidden;
}
.tm-page .pg-hero-inner,
.loc-land .pg-hero-inner,
.lv-page .pg-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 28px 40px;
	position: relative;
	z-index: 2;
}
.tm-page .breadcrumb,
.loc-land .breadcrumb,
.lv-page .breadcrumb { font-size: 13px; color: #ACACAC; margin: 0 0 16px; font-weight: 600; }
.tm-page .breadcrumb a,
.loc-land .breadcrumb a,
.lv-page .breadcrumb a { color: #5c5d5c; }
.tm-page .breadcrumb a:hover,
.loc-land .breadcrumb a:hover,
.lv-page .breadcrumb a:hover { color: #9D0000; }
.tm-page .breadcrumb .sep,
.loc-land .breadcrumb .sep,
.lv-page .breadcrumb .sep { margin: 0 8px; color: #cdced0; }
.tm-page .breadcrumb .cur,
.loc-land .breadcrumb .cur,
.lv-page .breadcrumb .cur { color: #9D0000; }
.tm-page .pg-hero-inner h1,
.loc-land .pg-hero-inner h1 { font-size: clamp(46px, 7vw, 90px); margin: 4px 0 0; }
.lv-page .pg-hero-inner h1 { font-size: clamp(44px, 6.5vw, 82px); margin: 4px 0 0; }
.tm-page .pg-hero-inner .lede,
.loc-land .pg-hero-inner .lede,
.lv-page .pg-hero-inner .lede {
	max-width: 64ch;
	margin: 18px 0 0;
	color: #5c5d5c;
	font-size: 19px;
	line-height: 1.6;
}

/* ---- team ---- */
.tm-page.team-section { padding: 60px 0 10px; }
.tm-page.team-section.last { padding-bottom: 80px; }
.tm-page .tm-section-inner { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.tm-page .team-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 30px; }
.tm-page .team-head h2 { font-size: clamp(32px, 4.5vw, 52px); margin: 0; }
.tm-page .team-head .tag {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 16px;
	letter-spacing: 0.16em;
	color: #ACACAC;
}
.tm-page .team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
	gap: 24px;
}
.tm-page .member { text-align: center; }
.tm-page .member .ph {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	border-radius: 12px;
	object-fit: cover;
	object-position: top center;
	background: #eceef0;
	border: 1px solid #e2e3e5;
	margin-bottom: 13px;
	transition: transform 0.2s, box-shadow 0.2s;
}
.tm-page .member:hover .ph { transform: translateY(-3px); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.3); }
.tm-page .member h4 {
	font-family: 'Open Sans', sans-serif;
	font-size: 17px;
	font-weight: 800;
	color: #1a1b1a;
	line-height: 1.2;
	margin: 0;
}
.tm-page .member .role { color: #5c5d5c; font-size: 13.5px; margin-top: 3px; }
.tm-page .member.owner .ph { border-color: #9D0000; box-shadow: 0 0 0 2px rgba(157, 0, 0, 0.25); }
.tm-page .member.owner .role { color: #9D0000; font-weight: 700; }

/* ---- locations landing ---- */
.loc-land.loc-intro { padding: 44px 0 8px; }
.loc-land .loc-intro-inner { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.loc-land .loc-intro-inner h2 { font-size: clamp(30px, 4vw, 46px); max-width: 24ch; margin: 0; }
.loc-land .loc-intro-inner p { color: #5c5d5c; font-size: 18px; max-width: 74ch; margin-top: 16px; line-height: 1.7; }
.loc-land.loc-sec { padding: 30px 0 76px; }
.loc-land .loc-sec-inner { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.loc-land .loc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.loc-land .lc {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid #e2e3e5;
	border-radius: 10px;
	padding: 34px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.loc-land .lc:hover { transform: translateY(-4px); border-color: #9D0000; box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.22); }
.loc-land .lc .badge {
	position: absolute;
	top: 18px;
	right: 18px;
	background: #9D0000;
	color: #fff;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 13px;
	letter-spacing: 0.1em;
	padding: 3px 10px;
	border-radius: 3px;
}
.loc-land .lc .pinico {
	width: 46px;
	height: 46px;
	border-radius: 11px;
	background: rgba(157, 0, 0, 0.07);
	color: #9D0000;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.loc-land .lc .pinico svg { width: 24px; height: 24px; }
.loc-land .lc .state { font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 0.18em; color: #ACACAC; }
.loc-land .lc h3 { font-size: 34px; margin: 4px 0 8px; color: #1a1b1a; }
.loc-land .lc .line { color: #5c5d5c; font-size: 14.5px; }
.loc-land .lc .addr { color: #5c5d5c; font-size: 14.5px; margin-top: 12px; line-height: 1.5; flex: 1; }
.loc-land .lc .more { margin-top: 18px; color: #9D0000; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; }

/* ---- single-location 2-col body ---- */
.lv-page.lv-body { padding: 56px 0 84px; }
/* .lv-layout is a plain div (raw HTML); its two DIRECT children are .lv-main + .lv-aside,
   so the grid goes straight on .lv-layout — no .wp-block-group__inner-container here. */
.lv-page .lv-layout {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 50px;
	align-items: start;
}
.lv-page .lv-main > :first-child { margin-top: 0; }
.lv-page .lv-main h2 { font-size: 32px; margin: 0 0 14px; }
.lv-page .lv-main h2.mt { margin-top: 40px; }
.lv-page .lv-main p { color: #5c5d5c; font-size: 16.5px; line-height: 1.7; margin: 0 0 16px; }
.lv-page .rating-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 20px;
	padding: 8px 15px;
	background: #fff;
	border: 1px solid #e2e3e5;
	border-radius: 40px;
	box-shadow: 0 6px 22px -12px rgba(0, 0, 0, 0.2);
	font-size: 13.5px;
	color: #5c5d5c;
}
.lv-page .rating-chip .stars { color: #FBBC05; letter-spacing: 1px; }
.lv-page .rating-chip b { color: #1a1b1a; }
.lv-page .offer-list { list-style: none; margin: 6px 0 0; padding: 0; }
.lv-page .offer-list li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 13px;
	color: #5c5d5c;
	font-size: 16px;
	line-height: 1.55;
}
.lv-page .offer-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 7px;
	width: 10px;
	height: 10px;
	background: #9D0000;
	border-radius: 2px;
	transform: rotate(45deg);
}
.lv-page .offer-list a { color: #9D0000; font-weight: 600; }
.lv-page .offer-list a:hover { color: #c41019; }
.lv-page .lv-aside { display: flex; flex-direction: column; gap: 20px; }
.lv-page .map-card { border: 1px solid #e2e3e5; border-radius: 10px; overflow: hidden; background: #fff; }
.lv-page .map-card .gmap { width: 100%; height: 230px; border: 0; display: block; }
.lv-page .map-card .mbtn {
	display: block;
	text-align: center;
	padding: 14px;
	font-weight: 700;
	font-size: 14px;
	color: #9D0000;
	border-top: 1px solid #e2e3e5;
}
.lv-page .map-card .mbtn:hover { background: #f3f4f5; }
.lv-page .office-card { background: #1a1b1a; border-radius: 10px; padding: 26px; color: #fff; }
.lv-page .office-card h4 {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 23px;
	letter-spacing: 0.06em;
	color: #fff;
	margin: 0 0 8px;
}
.lv-page .office-row { padding: 13px 0; border-bottom: 1px solid #2a2b2a; }
.lv-page .office-row:last-child { border-bottom: none; padding-bottom: 0; }
.lv-page .office-row .k {
	font-size: 11px;
	letter-spacing: 0.12em;
	color: #ACACAC;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 4px;
}
.lv-page .office-row .v { font-size: 15px; color: #fff; line-height: 1.5; }
.lv-page .office-row a.v:hover { color: #c41019; }

/* ---- team + locations responsive ---- */
@media (max-width: 980px) {
	.lv-page .lv-layout { grid-template-columns: 1fr; gap: 34px; }
	.lv-page.lv-body { padding: 40px 0 64px; }
	.loc-land .loc-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.tm-page .team-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; }
}

/* ============================================================================
   ABOUT PAGE  (page 3608, slug affordable-it-services). All rules scoped to
   .ab-page (compound on each section root) so nothing here leaks site-wide.
   Headings inherit the global Bebas Neue 400 (no font-family needed except the
   owner name h4, which is intentionally Open Sans). Reuses the global .reveal /
   .stagger / .hero-circuit animation system. cf. INDUSTRY / TEAM+LOCATIONS.
   ============================================================================ */
.ab-page .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* --- hero --- */
.ab-page.pg-hero { background: linear-gradient(180deg,#fff,#f3f4f5); border-bottom: 1px solid #e2e3e5; position: relative; overflow: hidden; }
/* circuit = background accent only: absolute + behind content, so it never dictates
   hero height (in normal flow its viewBox forced a ~320px empty band above the H1). */
.ab-page.pg-hero .hero-circuit { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 55%); height: 100%; opacity: .55; pointer-events: none; z-index: 1; }
.ab-page.pg-hero .wrap { padding: 48px 28px 40px; position: relative; z-index: 2; }
.ab-page.pg-hero h1 { font-size: clamp(46px, 7vw, 92px); margin: 6px 0 0; }
.ab-page.pg-hero .lede { max-width: 66ch; margin-top: 18px; color: #5c5d5c; font-size: 19px; line-height: 1.6; }
.ab-page .breadcrumb { font-size: 13px; color: #ACACAC; margin-bottom: 14px; font-weight: 600; }
.ab-page .breadcrumb a { color: #5c5d5c; }
.ab-page .breadcrumb a:hover { color: #9D0000; }
.ab-page .breadcrumb .sep { margin: 0 8px; color: #cdced0; }
.ab-page .breadcrumb .cur { color: #9D0000; }
.ab-page .eyebrow { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: .22em; color: #9D0000; text-transform: uppercase; }

/* --- intro: text + owners (2-col, collapse-prone) --- */
.ab-page.ab-intro { padding: 72px 0; }
.ab-page .ab-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 54px; align-items: center; }
.ab-page .ab-grid h2 { font-size: clamp(32px, 4.2vw, 52px); margin-bottom: 18px; }
.ab-page .ab-grid p { color: #5c5d5c; font-size: 16.5px; line-height: 1.7; margin-bottom: 15px; }
.ab-page .ab-owners { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ab-page .owner-card { text-align: center; }
.ab-page .owner-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: top center; border-radius: 12px; border: 1px solid #9D0000; box-shadow: 0 0 0 2px rgba(157,0,0,.22), 0 18px 44px -22px rgba(0,0,0,.35); background: #eceef0; margin-bottom: 12px; }
.ab-page .owner-card h4 { font-family: var(--global-body-font-family); font-size: 18px; font-weight: 800; color: #1a1b1a; line-height: 1.2; }
.ab-page .owner-card .role { color: #9D0000; font-weight: 700; font-size: 13.5px; margin-top: 3px; }

/* --- dark "independent by design" anchor --- */
.ab-page.ab-indep { background: #1a1b1a; position: relative; overflow: hidden; }
.ab-page.ab-indep .wrap { padding: 84px 28px; position: relative; z-index: 2; max-width: 880px; }
.ab-page.ab-indep .eyebrow { color: #c41019; }
.ab-page.ab-indep h2 { color: #fff; font-size: clamp(34px, 4.6vw, 60px); margin-top: 12px; }
.ab-page.ab-indep p { color: #cfd0cf; font-size: 17.5px; line-height: 1.7; margin-top: 18px; }
.ab-page .ab-indep-circuit { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }

/* --- values: 4-card auto-fit grid (collapse-prone) --- */
.ab-page.ab-values { padding: 80px 0; }
.ab-page.ab-values h2 { font-size: clamp(34px, 4.6vw, 60px); margin-top: 12px; }
.ab-page .val-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 42px; }
.ab-page .val { background: #fff; border: 1px solid #e2e3e5; border-radius: 9px; padding: 30px 26px; position: relative; }
.ab-page .val::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 3px; background: #9D0000; }
.ab-page .val h3 { font-size: 24px; margin-bottom: 10px; }
.ab-page .val p { color: #5c5d5c; font-size: 15px; line-height: 1.55; }

/* --- closing "people behind it" + CTA --- */
.ab-page.ab-team { background: #f3f4f5; border-top: 1px solid #e2e3e5; border-bottom: 1px solid #e2e3e5; }
.ab-page.ab-team .wrap { padding: 64px 28px; text-align: center; }
.ab-page.ab-team h2 { font-size: clamp(32px, 4.4vw, 54px); }
.ab-page.ab-team p { color: #5c5d5c; font-size: 18px; max-width: 54ch; margin: 14px auto 26px; }
.ab-page .ab-cta { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: .02em; padding: 15px 28px; border-radius: 3px; background: #9D0000; color: #fff; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.ab-page .ab-cta:hover { background: #c41019; transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(157,0,0,.45); }

/* --- about responsive: all three collapse-prone grids stack at <=980px --- */
@media (max-width: 980px) {
	.ab-page .ab-grid { grid-template-columns: 1fr; gap: 30px; }
	.ab-page .ab-owners { grid-template-columns: 1fr; }
	.ab-page .val-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   TECH RESOURCES PAGE  (page 1028, slug tech-resources). All rules scoped to
   .res-page (compound on each section root) so nothing here leaks site-wide —
   .res / .nl / .btn are generic mockup names, kept safe by the scope. Reuses the
   global Bebas Neue 400 headings + .reveal / .stagger / .hero-circuit animation
   system. cf. ABOUT / INDUSTRY / SERVICE.
   ============================================================================ */
.res-page .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* --- hero (compact; circuit = absolute background accent so it never dictates
       hero height — same fix as About / Service) --- */
.res-page.pg-hero { background: linear-gradient(180deg,#fff,#f3f4f5); border-bottom: 1px solid #e2e3e5; position: relative; overflow: hidden; }
.res-page.pg-hero .hero-circuit { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 55%); height: 100%; opacity: .55; pointer-events: none; z-index: 1; }
.res-page.pg-hero .wrap { padding: 48px 28px 40px; position: relative; z-index: 2; }
.res-page.pg-hero h1 { font-size: clamp(46px, 7vw, 92px); margin: 6px 0 0; }
.res-page.pg-hero .lede { max-width: 64ch; margin-top: 18px; color: #5c5d5c; font-size: 19px; line-height: 1.6; }
.res-page .breadcrumb { font-size: 13px; color: #ACACAC; margin-bottom: 14px; font-weight: 600; }
.res-page .breadcrumb a { color: #5c5d5c; }
.res-page .breadcrumb a:hover { color: #9D0000; }
.res-page .breadcrumb .sep { margin: 0 8px; color: #cdced0; }
.res-page .breadcrumb .cur { color: #9D0000; }
.res-page .eyebrow { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: .22em; color: #9D0000; text-transform: uppercase; }

/* --- guide card grid (auto-fit, collapse-prone) --- */
.res-page.res-sec { padding: 70px 0 20px; }
.res-page .res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.res-page .res { background: #fff; border: 1px solid #e2e3e5; border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, border-color .2s, box-shadow .2s; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.res-page .res:hover { transform: translateY(-4px); border-color: #9D0000; box-shadow: 0 20px 44px -24px rgba(0,0,0,.22); }
.res-page .res .thumb { aspect-ratio: 1200/628; background: #eceef0; overflow: hidden; border-bottom: 1px solid #e2e3e5; }
.res-page .res .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.res-page .res:hover .thumb img { transform: scale(1.04); }
.res-page .res .body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.res-page .res .tag { font-family: 'Bebas Neue', sans-serif; font-size: 14px; letter-spacing: .16em; color: #9D0000; }
.res-page .res h3 { font-family: var(--global-body-font-family); font-weight: 800; font-size: 19px; line-height: 1.3; margin: 8px 0 10px; color: #1a1b1a; }
.res-page .res p { color: #5c5d5c; font-size: 14.5px; line-height: 1.55; flex: 1; }
.res-page .res .more { margin-top: 16px; color: #9D0000; font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.res-page .res-foot { text-align: center; margin-top: 42px; }

/* ghost button (mockup .btn / .btn-ghost — not defined globally, so scoped here) */
.res-page .btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: .02em; padding: 15px 28px; border-radius: 3px; cursor: pointer; border: none; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.res-page .btn-ghost { background: transparent; color: #1a1b1a; border: 1.5px solid #cdced0; }
.res-page .btn-ghost:hover { border-color: #9D0000; color: #9D0000; transform: translateY(-2px); }

/* --- newsletter band (2-col, collapse-prone). Form body is a flagged GHL
       placeholder in the markup — no real fields rendered. --- */
.res-page.nl { padding: 36px 0 98px; }
.res-page .nl-card { background: linear-gradient(135deg, #f3f4f5, #fff); border: 1px solid #e2e3e5; border-radius: 14px; padding: 48px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; position: relative; overflow: hidden; }
.res-page .nl-card h2 { font-size: clamp(32px, 3.6vw, 46px); margin-top: 10px; }
.res-page .nl-card p { color: #5c5d5c; font-size: 16px; margin-top: 14px; line-height: 1.6; }
.res-page .nl-form { background: #fff; border: 1px solid #e2e3e5; border-radius: 10px; padding: 26px; box-shadow: 0 14px 40px -24px rgba(0,0,0,.25); }
.res-page .nl-form .ghl-note { font-size: 12.5px; color: #ACACAC; text-align: center; font-style: italic; }

/* --- resources responsive: both 2-col grids stack at <=980px (cards already
       auto-fit) --- */
@media (max-width: 980px) {
	.res-page .nl-card { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
}

/* ===========================================================================
   BLOG top-gap fix — the posts index (body.blog) renders with a 56px
   body padding-top (Kadence sticky/fixed-header "header-is-fixed" offset)
   that pushes the utility bar down, unlike the static pages. Zero it, scoped
   to body.blog ONLY so no other page's body is touched. Confirmed via console
   2026-06-28: all child elements were pt:0/mt:0; the gap was the body's own
   padding-top. (→ ver 1.0.41)
   =========================================================================== */
body.blog { padding-top: 0 !important; }

/* ===========================================================================
   BLOG LANDING (/blog/ + category archives) — .cb-blog scope.
   Templates: home.php, category.php. Section scope class sits ON each <section>
   (.cb-blog.pg-hero / .cb-blog.blog-sec); inner centring via .cb-blog .wrap.
   Feed is the real WP loop (see functions.php cb_* helpers). Colours are the
   site literals used across the other built pages (red #9D0000, ink #1a1b1a…).
   =========================================================================== */
.cb-blog .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* --- hero --- */
.cb-blog.pg-hero { background: linear-gradient(180deg,#fff,#f3f4f5); border-bottom: 1px solid #e2e3e5; position: relative; overflow: hidden; }
/* circuit accent = background only: absolute + behind content so it never
   dictates hero height (see CLAUDE.md hero-circuit gotcha). */
.cb-blog.pg-hero .hero-circuit { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 55%); height: 100%; opacity: .5; pointer-events: none; z-index: 1; }
.cb-blog.pg-hero .wrap { padding: 52px 28px 44px; position: relative; z-index: 2; }
.cb-blog.pg-hero h1 { font-size: clamp(46px, 7vw, 92px); margin: 6px 0 0; line-height: .95; }
.cb-blog.pg-hero .lede { max-width: 62ch; margin-top: 16px; color: #5c5d5c; font-size: 19px; line-height: 1.6; }

/* --- breadcrumb --- */
.cb-blog .breadcrumb { font-size: 13px; color: #ACACAC; margin-bottom: 14px; font-weight: 600; }
.cb-blog .breadcrumb a { color: #5c5d5c; }
.cb-blog .breadcrumb a:hover { color: #9D0000; }
.cb-blog .breadcrumb .sep { margin: 0 8px; color: #cdced0; }
.cb-blog .breadcrumb .cur { color: #9D0000; }

/* --- category chips (real categories; links to category archives) --- */
.cb-blog .chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.cb-blog .chip { padding: 8px 16px; border: 1px solid #e2e3e5; border-radius: 30px; font-size: 13.5px; font-weight: 600; color: #5c5d5c; background: #fff; transition: .15s; cursor: pointer; }
.cb-blog .chip:hover { border-color: #9D0000; color: #9D0000; }
.cb-blog .chip.active { background: #9D0000; color: #fff; border-color: #9D0000; }

/* --- feed section --- */
.cb-blog.blog-sec { padding: 60px 0 92px; }

/* --- featured (latest) post --- */
.cb-blog .feat { display: grid; grid-template-columns: 1.25fr 1fr; border: 1px solid #e2e3e5; border-radius: 13px; overflow: hidden; margin-bottom: 42px; background: #fff; transition: box-shadow .2s, border-color .2s; }
.cb-blog .feat:hover { border-color: #9D0000; box-shadow: 0 24px 56px -28px rgba(0,0,0,.28); }
.cb-blog .feat .img { overflow: hidden; min-height: 320px; background: #eceef0; }
.cb-blog .feat .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-blog .feat .ct { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.cb-blog .feat .lbl { font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: .18em; color: #ACACAC; margin-bottom: 6px; }
.cb-blog .feat .cat { font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: .16em; color: #9D0000; }
.cb-blog .feat h2 { font-size: clamp(28px, 3vw, 42px); margin: 8px 0 14px; line-height: 1.04; }
.cb-blog .feat p { color: #5c5d5c; font-size: 16px; line-height: 1.6; margin-bottom: 18px; }
.cb-blog .feat .meta { font-size: 13px; color: #ACACAC; font-weight: 600; }
.cb-blog .feat .more { margin-top: 18px; color: #9D0000; font-weight: 700; font-size: 14px; }
/* The featured block + cards are whole-link <a>s wrapping text; Kadence's
   .inner-link-style-normal a:not(.button) rule underlines their title/excerpt.
   Strip it — the red "Read the article →" + hover border stay the affordance. */
.cb-blog .feat, .cb-blog .feat h2, .cb-blog .feat p,
.bcard, .bcard h3, .bcard p { text-decoration: none; }

/* --- post grid (shared card .bcard also used by single-post related grid) --- */
.cb-blog .bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bcard { background: #fff; border: 1px solid #e2e3e5; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, border-color .2s, box-shadow .2s; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.bcard:hover { transform: translateY(-4px); border-color: #9D0000; box-shadow: 0 20px 44px -24px rgba(0,0,0,.2); }
.bcard .thumb { aspect-ratio: 16 / 10; overflow: hidden; background: #eceef0; border-bottom: 1px solid #e2e3e5; }
.bcard .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; display: block; }
.bcard:hover .thumb img { transform: scale(1.04); }
.bcard .body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.bcard .cat { font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: .16em; color: #9D0000; }
.bcard h3 { font-family: 'Open Sans', sans-serif; font-weight: 800; font-size: 18px; line-height: 1.3; margin: 7px 0 9px; color: #1a1b1a; }
.bcard p { color: #5c5d5c; font-size: 14px; line-height: 1.5; flex: 1; }
.bcard .date { color: #ACACAC; font-size: 12.5px; margin-top: 14px; }

/* --- pagination (paginate_links output: a/span.page-numbers) --- */
.cb-blog .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 54px; flex-wrap: wrap; }
.cb-blog .pagination .page-numbers { min-width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 700; font-size: 14px; padding: 0 14px; border: 1px solid #e2e3e5; color: #5c5d5c; background: #fff; transition: .15s; text-decoration: none; }
.cb-blog .pagination a.page-numbers:hover { border-color: #9D0000; color: #9D0000; }
.cb-blog .pagination .page-numbers.current { background: #9D0000; color: #fff; border-color: #9D0000; }
.cb-blog .pagination .page-numbers.dots { border: none; background: none; color: #ACACAC; min-width: 0; padding: 0 4px; }

@media (max-width: 980px) {
	.cb-blog .feat { grid-template-columns: 1fr; }
	.cb-blog .feat .img { min-height: 220px; }
	.cb-blog .bgrid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   SINGLE-POST TEMPLATE (single.php) — .cb-post scope. ONE template; all posts
   inherit it. The article body is the post's own the_content() output, styled
   generically (headings/paragraphs/lists/images/quotes) — content is never
   altered. Related grid reuses .bcard above.
   =========================================================================== */
/* --- post hero --- */
.cb-post.post-hero { background: linear-gradient(180deg,#fff,#f3f4f5); border-bottom: 1px solid #e2e3e5; }
.cb-post.post-hero .wrap { max-width: 860px; margin: 0 auto; padding: 46px 28px 40px; }
.cb-post.post-hero .breadcrumb { font-size: 13px; color: #ACACAC; margin-bottom: 18px; font-weight: 600; }
.cb-post.post-hero .breadcrumb a { color: #5c5d5c; }
.cb-post.post-hero .breadcrumb a:hover { color: #9D0000; }
.cb-post.post-hero .breadcrumb .sep { margin: 0 8px; color: #cdced0; }
.cb-post .pcat { font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: .16em; color: #9D0000; }
.cb-post.post-hero h1 { font-size: clamp(36px, 5vw, 64px); margin: 10px 0 18px; line-height: 1.02; }
.cb-post .pmeta { color: #ACACAC; font-size: 14px; font-weight: 600; }

/* --- featured image --- */
.cb-post.post-feat { max-width: 1000px; margin: 0 auto; padding: 0 28px; }
.cb-post.post-feat .pf-wrap { margin-top: 36px; }
.cb-post.post-feat img { width: 100%; border-radius: 12px; display: block; border: 1px solid #e2e3e5; height: auto; }

/* --- article body (renders each post's existing HTML) --- */
.cb-post.article { max-width: 760px; margin: 0 auto; padding: 48px 28px 0; }
.cb-post.article > *:first-child { margin-top: 0; }
.cb-post.article p { color: #33352f; font-size: 17.5px; line-height: 1.78; margin-bottom: 22px; }
.cb-post.article h2 { font-size: 30px; margin: 38px 0 16px; color: #1a1b1a; line-height: 1.15; }
.cb-post.article h3 { font-size: 24px; margin: 32px 0 14px; color: #1a1b1a; line-height: 1.2; }
.cb-post.article h4 { font-size: 20px; margin: 28px 0 12px; color: #434443; line-height: 1.2; }
.cb-post.article ul, .cb-post.article ol { margin: 0 0 22px 1.2em; color: #33352f; font-size: 17.5px; line-height: 1.78; }
.cb-post.article li { margin-bottom: 8px; }
.cb-post.article a { color: #9D0000; text-decoration: underline; text-underline-offset: 2px; }
.cb-post.article a:hover { color: #c41019; }
.cb-post.article img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 28px auto; }
.cb-post.article figure { margin: 28px 0; }
.cb-post.article figcaption { font-size: 13.5px; color: #ACACAC; text-align: center; margin-top: 8px; }
.cb-post.article strong, .cb-post.article b { font-weight: 700; color: #1a1b1a; }
.cb-post.article hr { border: none; border-top: 1px solid #e2e3e5; margin: 38px 0; }
.cb-post.article table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; }
.cb-post.article th, .cb-post.article td { border: 1px solid #e2e3e5; padding: 10px 14px; text-align: left; }
/* pull-quotes: mockup uses .pull; migrated posts use <blockquote> — style both. */
.cb-post.article .pull, .cb-post.article blockquote { border-left: 4px solid #9D0000; padding: 6px 0 6px 24px; margin: 34px 0; font-size: 22px; line-height: 1.45; color: #1a1b1a; font-weight: 700; }
.cb-post.article blockquote p { font-size: inherit; line-height: inherit; color: inherit; margin-bottom: 0; }

/* --- in-article CTA box (dark) --- */
.cb-post.post-cta { max-width: 760px; margin: 44px auto 0; padding: 0 28px; }
.cb-post.post-cta .box { background: #1a1b1a; border-radius: 12px; padding: 34px 36px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.cb-post.post-cta h3 { color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: .02em; }
.cb-post.post-cta p { color: #ACACAC; font-size: 14.5px; margin-top: 4px; }
.cb-post.post-cta .btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: .02em; padding: 15px 28px; border-radius: 3px; border: none; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.cb-post.post-cta .btn-primary { background: #9D0000; color: #fff; }
.cb-post.post-cta .btn-primary:hover { background: #c41019; transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(157,0,0,.45); }

/* --- tags --- */
.cb-post.tags { max-width: 760px; margin: 40px auto 0; padding: 0 28px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cb-post.tags .tl { font-size: 13px; color: #ACACAC; font-weight: 700; }
.cb-post.tags a { font-size: 13px; color: #5c5d5c; background: #f3f4f5; border: 1px solid #e2e3e5; padding: 6px 13px; border-radius: 30px; }
.cb-post.tags a:hover { border-color: #9D0000; color: #9D0000; }

/* --- related "Keep Reading" --- */
.cb-post.related { max-width: 1000px; margin: 0 auto; padding: 64px 28px 96px; }
.cb-post.related h2 { font-size: 34px; margin-bottom: 28px; line-height: 1; }
.cb-post .rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cb-post .rgrid .body { padding: 20px; }
.cb-post .rgrid h3 { font-size: 17px; }

@media (max-width: 980px) {
	.cb-post .rgrid { grid-template-columns: 1fr; }
	.cb-post.post-cta .box { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   CONTACT PAGE (/contact-us/, page 3777) — scoped .ct-page
   pg-hero (compact, like education/res) + ct-body / ct-grid
   (TWO-COLUMN: JotForm left, map + office cards right).
   Everything compounds on .ct-page so nothing leaks site-wide.
   ============================================================ */
.ct-page .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* hero — compact; hero-circuit MUST be positioned here or it adds a tall dead band */
.ct-page.pg-hero { background: linear-gradient(180deg,#fff,#f3f4f5); border-bottom: 1px solid #e2e3e5; position: relative; overflow: hidden; }
.ct-page.pg-hero .hero-circuit { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 55%); height: 100%; opacity: .55; pointer-events: none; z-index: 1; }
.ct-page.pg-hero .wrap { padding: 48px 28px 40px; position: relative; z-index: 2; }
.ct-page.pg-hero h1 { font-size: clamp(46px, 7vw, 92px); margin: 6px 0 0; }
.ct-page.pg-hero .lede { max-width: 64ch; margin-top: 18px; color: #5c5d5c; font-size: 19px; line-height: 1.6; }
.ct-page .breadcrumb { font-size: 13px; color: #ACACAC; margin-bottom: 14px; font-weight: 600; }
.ct-page .breadcrumb a { color: #5c5d5c; }
.ct-page .breadcrumb a:hover { color: #9D0000; }
.ct-page .breadcrumb .sep { margin: 0 8px; color: #cdced0; }
.ct-page .breadcrumb .cur { color: #9D0000; }

/* body + two-column grid (collapses <=980px) */
.ct-page.ct-body { padding: 64px 0 94px; }
.ct-page .ct-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }

/* left: form card holding the real JotForm embed */
.ct-page .ct-form { background: #fff; border: 1px solid #e2e3e5; border-radius: 12px; padding: 40px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.ct-page .ct-form h2 { font-size: 32px; margin-bottom: 6px; }
.ct-page .ct-form .sub { color: #5c5d5c; font-size: 15px; margin-bottom: 26px; }
.ct-page .ct-form iframe { display: block; }
.ct-page .ct-support { margin-top: 22px; background: rgba(157,0,0,.05); border: 1px solid #e9c9c9; border-radius: 8px; padding: 16px 18px; font-size: 14px; color: #5c5d5c; }
.ct-page .ct-support a { color: #9D0000; font-weight: 700; }

/* right: aside column */
.ct-page .ct-aside { display: flex; flex-direction: column; gap: 20px; }
.ct-page .map-card { border: 1px solid #e2e3e5; border-radius: 10px; overflow: hidden; background: #fff; }
.ct-page .map-card .gmap { width: 100%; height: 200px; border: 0; display: block; }
.ct-page .map-card .mbtn { display: block; text-align: center; padding: 13px; font-weight: 700; font-size: 14px; color: #9D0000; border-top: 1px solid #e2e3e5; }
.ct-page .map-card .mbtn:hover { background: #f3f4f5; }
.ct-page .off-card { background: #1a1b1a; border-radius: 10px; padding: 24px 26px; color: #fff; }
.ct-page .off-card .ohead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #2a2b2a; }
.ct-page .off-card .ohead h4 { font-family: 'Bebas Neue', sans-serif; font-size: 23px; letter-spacing: .06em; color: #fff; margin: 0; }
.ct-page .off-card .ohead a { font-size: 12px; color: #ACACAC; font-weight: 600; }
.ct-page .off-card .ohead a:hover { color: #c41019; }
.ct-page .off-row { padding: 8px 0; }
.ct-page .off-row .k { font-size: 10.5px; letter-spacing: .12em; color: #ACACAC; text-transform: uppercase; font-weight: 700; margin-bottom: 3px; }
.ct-page .off-row .v { font-size: 14.5px; color: #fff; line-height: 1.5; }
.ct-page .off-row a.v:hover { color: #c41019; }
.ct-page .pay-note { font-size: 13px; color: #5c5d5c; background: #f3f4f5; border: 1px solid #e2e3e5; border-radius: 8px; padding: 16px 18px; }
.ct-page .pay-note b { color: #1a1b1a; display: block; margin-bottom: 3px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.ct-page .pay-note a { color: #9D0000; font-weight: 700; }

@media (max-width: 980px) {
	.ct-page .ct-grid { grid-template-columns: 1fr; }
	.ct-page .ct-form { padding: 28px; }
}

/* ===========================================================================
   PRIVACY POLICY (/privacy-policy/, page 3) — scoped .pp-page
   Legal page: compact hero + single-column readable prose. Content is the
   existing policy text (preserved verbatim); only presentation is themed.
   Everything compounds on .pp-page so nothing leaks site-wide.
   =========================================================================== */
.pp-page .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* Hero — matches the other page heroes (see .ct-page / .ab-page). */
.pp-page.pg-hero { background: linear-gradient(180deg,#fff,#f3f4f5); border-bottom: 1px solid #e2e3e5; position: relative; overflow: hidden; }
.pp-page.pg-hero .hero-circuit { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 55%); height: 100%; opacity: .55; pointer-events: none; z-index: 1; }
.pp-page.pg-hero .wrap { padding: 48px 28px 40px; position: relative; z-index: 2; }
.pp-page.pg-hero h1 { font-size: clamp(46px, 7vw, 92px); margin: 6px 0 0; }
.pp-page.pg-hero .lede { max-width: 64ch; margin-top: 18px; color: #5c5d5c; font-size: 19px; line-height: 1.6; }
.pp-page .breadcrumb { font-size: 13px; color: #ACACAC; margin-bottom: 14px; font-weight: 600; }
.pp-page .breadcrumb a { color: #5c5d5c; }
.pp-page .breadcrumb a:hover { color: #9D0000; }
.pp-page .breadcrumb .sep { margin: 0 8px; color: #cdced0; }
.pp-page .breadcrumb .cur { color: #9D0000; }

/* Body — single-column legal prose, comfortable measure. */
.pp-page.pp-body { padding: 56px 0 88px; }
.pp-page .pp-doc { max-width: 820px; }
.pp-page .pp-doc p { color: #3f403f; font-size: 16.5px; line-height: 1.75; margin: 0 0 18px; }
.pp-page .pp-doc h2 { font-size: 24px; line-height: 1.3; margin: 40px 0 14px; padding-top: 22px; border-top: 1px solid #e9eaec; color: #1a1b1a; }
.pp-page .pp-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pp-page .pp-doc ul { margin: 0 0 18px; padding-left: 24px; list-style: disc; }
.pp-page .pp-doc li { color: #3f403f; font-size: 16.5px; line-height: 1.7; margin-bottom: 8px; }
.pp-page .pp-doc a { color: #9D0000; font-weight: 600; text-decoration: underline; }
.pp-page .pp-doc a:hover { color: #c41019; }
.pp-page .pp-doc .pp-contact { background: #f3f4f5; border: 1px solid #e2e3e5; border-radius: 10px; padding: 22px 24px; line-height: 1.7; }
.pp-page .pp-doc .pp-eff { font-size: 13.5px; color: #8a8b8a; margin-top: 24px; }

@media (max-width: 680px) {
	.pp-page.pp-body { padding: 40px 0 64px; }
	.pp-page .pp-doc h2 { font-size: 21px; }
}

/* Footer bottom bar now holds THREE items (copyright | Privacy Policy | location).
   Switch from flex space-between to a 1fr/auto/1fr grid so the Privacy Policy link
   is truly centered in the bar regardless of the side text widths. Overrides the
   earlier `.site-footer .cb-foot-bottom` flex rule (same specificity, later wins). */
.site-footer .cb-foot-bottom {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px 18px;
}
.site-footer .cb-foot-bottom .cb-foot-copy { justify-self: start; }
.site-footer .cb-foot-bottom .cb-foot-privacy { justify-self: center; color: #6f706f; text-decoration: none; }
.site-footer .cb-foot-bottom .cb-foot-privacy:hover { color: #9D0000; }
.site-footer .cb-foot-bottom .cb-foot-loc { justify-self: end; text-align: right; }
/* Stack centered on narrow screens (the copyright line is too long to share a row). */
@media (max-width: 768px) {
	.site-footer .cb-foot-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.site-footer .cb-foot-bottom .cb-foot-copy,
	.site-footer .cb-foot-bottom .cb-foot-privacy,
	.site-footer .cb-foot-bottom .cb-foot-loc { justify-self: center; text-align: center; }
}

/* ===========================================================================
   TESTIMONIALS (/testimonials/, page 3793) — scoped .tst-page
   Reuses the homepage .quotes visual language (gold 5-star, red accent, italic
   quote, bold name + muted location) as boxed white cards so the 5 long, real
   testimonials read cleanly. Everything compounds on .tst-page; nothing leaks.
   =========================================================================== */
.tst-page .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* Hero — matches the other page heroes (see .ct-page / .pp-page). */
.tst-page.pg-hero { background: linear-gradient(180deg,#fff,#f3f4f5); border-bottom: 1px solid #e2e3e5; position: relative; overflow: hidden; }
.tst-page.pg-hero .hero-circuit { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 55%); height: 100%; opacity: .55; pointer-events: none; z-index: 1; }
.tst-page.pg-hero .wrap { padding: 48px 28px 40px; position: relative; z-index: 2; }
.tst-page.pg-hero h1 { font-size: clamp(46px, 7vw, 92px); margin: 6px 0 0; }
.tst-page.pg-hero .lede { max-width: 66ch; margin-top: 18px; color: #5c5d5c; font-size: 19px; line-height: 1.6; }
.tst-page .breadcrumb { font-size: 13px; color: #ACACAC; margin-bottom: 14px; font-weight: 600; }
.tst-page .breadcrumb a { color: #5c5d5c; }
.tst-page .breadcrumb a:hover { color: #9D0000; }
.tst-page .breadcrumb .sep { margin: 0 8px; color: #cdced0; }
.tst-page .breadcrumb .cur { color: #9D0000; }

/* Testimonial wall — CSS multi-column (masonry) flow so the very different-length
   reviews pack tightly with NO reserved-row gaps below short cards (a rigid grid
   reserves the tallest card's height per row). 3 cols desktop / 2 <=980 / 1 <=600. */
.tst-page.tst-body { padding: 64px 0 72px; }
.tst-page .tgrid { column-count: 3; column-gap: 24px; }
.tst-page .tcard { background: #fff; border: 1px solid #e2e3e5; border-left: 3px solid #9D0000; border-radius: 10px; padding: 26px 28px; box-shadow: 0 1px 3px rgba(0,0,0,.04); break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 24px; }
.tst-page .tcard .thead { margin-bottom: 14px; }
.tst-page .tcard .stars { color: #FBBC05; letter-spacing: 2px; font-size: 16px; }
.tst-page .tcard .tquote { margin: 0; border: 0; padding: 0; font-size: 15.5px; line-height: 1.7; color: #3f403f; font-style: italic; }
.tst-page .tcard .twho { margin: 20px 0 0; font-style: normal; font-size: 13.5px; color: #6f706f; line-height: 1.5; }
.tst-page .tcard .twho strong { font-weight: 800; color: #1a1b1a; font-size: 15px; }
.tst-page .tcard .twho .vrev { color: #6f706f; font-weight: 600; }
.tst-page .tcard .twho .vrev::before { content: " \00B7 "; color: #c2c4c7; }

/* "Leave a Review" CTA — light band, centered card, red button to Google. */
.tst-page.tst-review { padding: 8px 0 88px; }
.tst-page .rev-card { background: #f3f4f5; border: 1px solid #e2e3e5; border-radius: 14px; padding: 48px 40px; text-align: center; max-width: 880px; margin: 0 auto; }
.tst-page .rev-eyebrow { color: #c41019; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; }
.tst-page .rev-h2 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 14px; color: #1a1b1a; }
.tst-page .rev-copy { color: #5c5d5c; font-size: 16.5px; line-height: 1.7; max-width: 60ch; margin: 0 auto 28px; }
.tst-page .rev-btn { display: inline-block; background: #9D0000; color: #fff; font-weight: 700; font-size: 15px; padding: 15px 30px; border-radius: 3px; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.tst-page .rev-btn:hover { background: #c41019; transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(157,0,0,.5); }

@media (max-width: 980px) {
	.tst-page.tst-body { padding: 44px 0 52px; }
	.tst-page .tgrid { column-count: 2; }
	.tst-page.tst-review { padding: 8px 0 64px; }
	.tst-page .rev-card { padding: 36px 24px; }
}
@media (max-width: 600px) {
	.tst-page .tgrid { column-count: 1; }
}

/* ===========================================================================
   CAREERS (/join-our-team/, page 4140) — scoped .cr-page
   Old Avada shortcodes stripped; rebuilt as native blocks. Compact hero +
   two-column body: intro prose (left) + sticky IT Support Technician role
   card (right). All copy preserved verbatim from the old page.
   Everything compounds on .cr-page so nothing leaks site-wide.
   =========================================================================== */
.cr-page .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* Hero — matches the other page heroes (see .ct-page / .pp-page). */
.cr-page.pg-hero { background: linear-gradient(180deg,#fff,#f3f4f5); border-bottom: 1px solid #e2e3e5; position: relative; overflow: hidden; }
.cr-page.pg-hero .hero-circuit { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 55%); height: 100%; opacity: .55; pointer-events: none; z-index: 1; }
.cr-page.pg-hero .wrap { padding: 48px 28px 40px; position: relative; z-index: 2; }
.cr-page.pg-hero h1 { font-size: clamp(46px, 7vw, 92px); margin: 6px 0 0; }
.cr-page.pg-hero .lede { max-width: 64ch; margin-top: 18px; color: #5c5d5c; font-size: 19px; line-height: 1.6; }
.cr-page .breadcrumb { font-size: 13px; color: #ACACAC; margin-bottom: 14px; font-weight: 600; }
.cr-page .breadcrumb a { color: #5c5d5c; }
.cr-page .breadcrumb a:hover { color: #9D0000; }
.cr-page .breadcrumb .sep { margin: 0 8px; color: #cdced0; }
.cr-page .breadcrumb .cur { color: #9D0000; }

/* Body — intro prose + role card. */
.cr-page.cr-body { padding: 64px 0 94px; }
.cr-page .cr-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: start; }

.cr-page .cr-intro h2 { font-size: clamp(28px, 3.4vw, 38px); margin: 0 0 22px; color: #1a1b1a; }
.cr-page .cr-intro p { color: #3f403f; font-size: 16.5px; line-height: 1.75; margin: 0 0 18px; }
.cr-page .cr-inline { margin-top: 26px; font-size: 16.5px; }
.cr-page .cr-inline a { color: #9D0000; font-weight: 700; }
.cr-page .cr-inline a:hover { color: #c41019; }

.cr-page .cr-role { position: sticky; top: 96px; }
.cr-page .cr-card { background: #fff; border: 1px solid #e2e3e5; border-top: 4px solid #9D0000; border-radius: 12px; padding: 34px 32px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.cr-page .cr-role-title { font-size: 25px; margin: 0 0 16px; color: #1a1b1a; }
.cr-page .cr-card p { color: #5c5d5c; font-size: 15px; line-height: 1.7; margin: 0 0 26px; }
.cr-page .cr-apply { display: inline-block; background: #9D0000; color: #fff; font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 3px; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.cr-page .cr-apply:hover { background: #c41019; transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(157,0,0,.5); }

@media (max-width: 980px) {
	.cr-page.cr-body { padding: 48px 0 64px; }
	.cr-page .cr-grid { grid-template-columns: 1fr; gap: 32px; }
	.cr-page .cr-role { position: static; }
}

/* ===========================================================================
   IT SUPPORT TECHNICIAN job detail (/it-support-technician/, page 6083) —
   scoped .job-page. Old Avada shortcodes stripped; rebuilt as native blocks.
   Compact hero + two-column body (job description left / sticky Position
   Details card right) + full-width JotForm apply section. All job-posting
   copy preserved verbatim. Everything compounds on .job-page so nothing leaks.
   =========================================================================== */
.job-page .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* Hero — matches the other page heroes (see .ct-page / .cr-page). */
.job-page.pg-hero { background: linear-gradient(180deg,#fff,#f3f4f5); border-bottom: 1px solid #e2e3e5; position: relative; overflow: hidden; }
.job-page.pg-hero .hero-circuit { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 55%); height: 100%; opacity: .55; pointer-events: none; z-index: 1; }
.job-page.pg-hero .wrap { padding: 48px 28px 40px; position: relative; z-index: 2; }
.job-page.pg-hero .eyebrow { color: #c41019; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.job-page.pg-hero h1 { font-size: clamp(44px, 6.5vw, 86px); margin: 8px 0 0; }
.job-page .breadcrumb { font-size: 13px; color: #ACACAC; margin-bottom: 14px; font-weight: 600; }
.job-page .breadcrumb a { color: #5c5d5c; }
.job-page .breadcrumb a:hover { color: #9D0000; }
.job-page .breadcrumb .sep { margin: 0 8px; color: #cdced0; }
.job-page .breadcrumb .cur { color: #9D0000; }

/* Body — description + sticky details card. */
.job-page.job-body { padding: 64px 0 90px; }
.job-page .job-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }

.job-page .job-main h2 { font-size: clamp(26px, 3.2vw, 34px); margin: 0 0 18px; color: #1a1b1a; }
.job-page .job-intro { color: #3f403f; font-size: 16.5px; line-height: 1.75; margin: 0 0 22px; }
.job-page .job-apply-link { display: inline-block; color: #9D0000; font-weight: 700; font-size: 15.5px; margin-bottom: 8px; }
.job-page .job-apply-link:hover { color: #c41019; }

/* Job description prose — verbatim duties/requirements/etc. */
.job-page .job-desc { margin-top: 24px; }
.job-page .job-desc h3 { font-size: 22px; margin: 30px 0 12px; color: #1a1b1a; }
.job-page .job-desc h3:first-child { margin-top: 0; }
.job-page .job-desc h4 { font-size: 17px; margin: 26px 0 10px; color: #1a1b1a; }
.job-page .job-desc ul { margin: 0 0 6px; padding-left: 22px; }
.job-page .job-desc li { color: #3f403f; font-size: 15.5px; line-height: 1.65; margin-bottom: 8px; }

/* Sticky Position Details card. */
.job-page .job-side { position: sticky; top: 96px; }
.job-page .job-card { background: #fff; border: 1px solid #e2e3e5; border-top: 4px solid #9D0000; border-radius: 12px; padding: 30px 28px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.job-page .job-card h3 { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #1a1b1a; margin: 0 0 18px; }
.job-page .jrow { padding: 12px 0; border-top: 1px solid #eceded; }
.job-page .jrow:first-of-type { border-top: 0; padding-top: 0; }
.job-page .jrow .k { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #9a9b9a; font-weight: 700; margin-bottom: 5px; }
.job-page .jrow .v { font-size: 15.5px; color: #1a1b1a; font-weight: 600; }
.job-page .jben { margin: 4px 0 0; padding-left: 18px; }
.job-page .jben li { font-size: 14.5px; color: #3f403f; font-weight: 500; line-height: 1.5; margin-bottom: 4px; }
.job-page .job-apply { display: block; text-align: center; margin-top: 22px; background: #9D0000; color: #fff; font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 3px; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.job-page .job-apply:hover { background: #c41019; transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(157,0,0,.5); }

/* Apply section — full-width JotForm embed. */
.job-page.job-applysec { padding: 8px 0 90px; scroll-margin-top: 90px; }
.job-page .apply-h2 { font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 8px; color: #1a1b1a; }
.job-page .apply-sub { color: #5c5d5c; font-size: 16.5px; line-height: 1.65; max-width: 64ch; margin: 0 0 28px; }
.job-page .job-form { background: #fff; border: 1px solid #e2e3e5; border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.job-page .job-form iframe { display: block; }

@media (max-width: 980px) {
	.job-page.job-body { padding: 48px 0 60px; }
	.job-page .job-grid { grid-template-columns: 1fr; gap: 34px; }
	.job-page .job-side { position: static; }
}

/* ===========================================================================
   3CX (/3cx/, page 5850) — scoped .cx-page
   UNLISTED partner page (slug must stay /3cx/). Compact hero + single-column
   readable prose, mirrors the .pp-page shell. Content preserved; only themed.
   Everything compounds on .cx-page so nothing leaks site-wide.
   =========================================================================== */
.cx-page .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* Hero — matches the other page heroes (see .pp-page / .ct-page). */
.cx-page.pg-hero { background: linear-gradient(180deg,#fff,#f3f4f5); border-bottom: 1px solid #e2e3e5; position: relative; overflow: hidden; }
.cx-page.pg-hero .wrap { padding: 48px 28px 40px; position: relative; z-index: 2; }
.cx-page.pg-hero h1 { font-size: clamp(46px, 7vw, 92px); margin: 6px 0 0; }
.cx-page.pg-hero .lede { max-width: 66ch; margin-top: 18px; color: #5c5d5c; font-size: 19px; line-height: 1.6; }
.cx-page .breadcrumb { font-size: 13px; color: #ACACAC; margin-bottom: 14px; font-weight: 600; }
.cx-page .breadcrumb a { color: #5c5d5c; }
.cx-page .breadcrumb a:hover { color: #9D0000; }
.cx-page .breadcrumb .sep { margin: 0 8px; color: #cdced0; }
.cx-page .breadcrumb .cur { color: #9D0000; }

/* Body — single-column prose, comfortable measure. */
.cx-page.cx-body { padding: 56px 0 88px; }
.cx-page .cx-doc { max-width: 820px; }
.cx-page .cx-doc p { color: #3f403f; font-size: 16.5px; line-height: 1.75; margin: 0 0 18px; }
.cx-page .cx-doc h2 { font-size: 24px; line-height: 1.3; margin: 40px 0 14px; padding-top: 22px; border-top: 1px solid #e9eaec; color: #1a1b1a; }
.cx-page .cx-doc h2:first-of-type { margin-top: 8px; }
.cx-page .cx-doc h3 { font-size: 18.5px; line-height: 1.35; margin: 28px 0 10px; color: #1a1b1a; }
.cx-page .cx-doc ul { margin: 0 0 18px; padding-left: 24px; list-style: disc; }
.cx-page .cx-doc li { color: #3f403f; font-size: 16.5px; line-height: 1.7; margin-bottom: 8px; }
.cx-page .cx-doc a { color: #9D0000; font-weight: 600; text-decoration: underline; }
.cx-page .cx-doc a:hover { color: #c41019; }
.cx-page .cx-doc .cx-figure { text-align: center; margin: 8px 0 28px; }
.cx-page .cx-doc .cx-figure img { max-width: 420px; width: 100%; height: auto; }

@media (max-width: 680px) {
	.cx-page.cx-body { padding: 40px 0 64px; }
	.cx-page .cx-doc h2 { font-size: 21px; }
}

/* ===========================================================================
   INDUSTRIES LANDING — intro two-column (native core Columns block, ver 1.0.52).
   Left = existing prose; right = sticky dark CTA aside. The two columns are
   real core <!-- wp:columns --> (flex, stacks at <=781px natively) — NOT a
   hand-rolled grid. Scoped .industries-intro so nothing else is affected.
   =========================================================================== */
.ind-landing.industries-intro { padding: 48px 0 8px; }
.industries-intro-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px;
}
.industries-intro .intro-cols { gap: 48px; }
.industries-intro .intro-copy > :first-child { margin-top: 0; }
.industries-intro .intro-copy h2 { font-size: 30px; margin: 30px 0 12px; }
.industries-intro .intro-copy p {
	color: #5c5d5c;
	font-size: 16.5px;
	line-height: 1.7;
	margin: 0 0 16px;
}
.industries-intro .intro-copy a { color: #9D0000; font-weight: 600; }
.industries-intro .intro-copy a:hover { color: #c41019; }

/* dark CTA aside — mirrors the service-page aside card look (3871 / .aside-contact).
   Scrolls normally with the page (no sticky/fixed — removed per Bill 2026-06-29). */
.industries-intro .ia-card {
	background: #1a1b1a;
	border: 1px solid #2a2b2a;
	border-radius: 10px;
	padding: 28px;
}
.industries-intro .ia-title {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 27px;
	letter-spacing: 0.04em;
	line-height: 1.05;
	color: #fff;
	margin: 0 0 12px;
}
.industries-intro .ia-line {
	color: #ACACAC;
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 20px;
}
.industries-intro .ia-btn { margin-bottom: 16px; }
.industries-intro .ia-btn .wp-block-button { width: 100%; }
.industries-intro .ia-btn .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	background: #9D0000;
	color: #fff;
	border: none;
	font-weight: 700;
	padding: 14px 26px;
	border-radius: 3px;
	transition: background 0.15s ease, transform 0.15s ease;
}
.industries-intro .ia-btn .wp-block-button__link:hover { background: #c41019; transform: translateY(-2px); }
.industries-intro .ia-phone {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 30px;
	letter-spacing: 0.02em;
	text-align: center;
	margin: 0 0 22px;
}
.industries-intro .ia-phone a { color: #fff; }
.industries-intro .ia-phone a:hover { color: #c41019; }
.industries-intro .ia-svc-h {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 19px;
	letter-spacing: 0.06em;
	color: #fff;
	margin: 0 0 12px;
	padding-top: 18px;
	border-top: 1px solid #2a2b2a;
}
.industries-intro .ia-svc { list-style: none; margin: 0; padding: 0; }
.industries-intro .ia-svc li {
	position: relative;
	padding-left: 16px;
	margin-bottom: 9px;
}
.industries-intro .ia-svc li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	background: #9D0000;
	border-radius: 50%;
}
.industries-intro .ia-svc a {
	color: #d7d8da;
	font-size: 14.5px;
	transition: color 0.15s ease;
}
.industries-intro .ia-svc a:hover { color: #fff; }

@media (max-width: 781px) {
	.industries-intro .intro-cols { gap: 28px; }
}

/* ===========================================================================
   INDUSTRY PAGES — shared "Explore Our IT Services" card band (ver 1.0.52).
   Built once as a synced pattern (wp_block 7479) and inserted on all 11
   industry pages. The grid is a native core Group GRID layout
   (layout:{type:grid,minimumColumnWidth:16rem}) — core emits the auto-fill
   grid, NOT a hand-rolled display:grid. Only card visuals are scoped here.
   =========================================================================== */
.industry-svc-cards {
	background: #f4f5f6;
	border-top: 1px solid #e2e3e5;
	padding: 56px 0 64px;
}
.industry-svc-cards .isc-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 28px;
}
.industry-svc-cards .isc-h { font-size: 32px; margin: 0 0 8px; }
.industry-svc-cards .isc-lede {
	color: #5c5d5c;
	font-size: 16.5px;
	line-height: 1.6;
	margin: 0 0 30px;
	max-width: 72ch;
}
/* EQUAL-HEIGHT CARDS — structural, holds for ANY copy length (2 lines or 4).
   The grid stretches every cell to the tallest in its row (align-items:stretch);
   each card fills its cell (height:100% + flex column) and its inner flow wrapper
   flexes to fill the card, so slack collapses ABOVE the "Learn More" link
   (.sc-more, margin-top:auto) which pins to the card bottom and lines up across
   the row. NO per-card min-height/height hacks — all 7 cards in synced block 7479
   use identical structure. (Same proven pattern as the homepage .svc-grid cards.) */
.industry-svc-cards .isc-grid { gap: 22px; align-items: stretch; }
.industry-svc-cards .svc-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e2e3e5;
	border-radius: 10px;
	padding: 26px 24px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.industry-svc-cards .svc-card > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.industry-svc-cards .svc-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(20, 20, 20, 0.08);
	border-color: #d2d3d5;
}
.industry-svc-cards .sc-ico {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(157, 0, 0, 0.08);
	color: #9D0000;
	margin-bottom: 16px;
}
.industry-svc-cards .sc-ico svg { width: 26px; height: 26px; }
.industry-svc-cards .svc-card h3 { font-size: 22px; margin: 0 0 8px; line-height: 1.12; }
.industry-svc-cards .svc-card h3 a { color: #1a1b1a; transition: color 0.15s ease; }
.industry-svc-cards .svc-card h3 a:hover { color: #9D0000; }
.industry-svc-cards .svc-card p {
	color: #5c5d5c;
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0 0 14px;
}
.industry-svc-cards .sc-more { margin: 0; margin-top: auto; }
.industry-svc-cards .sc-more a {
	color: #9D0000;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: color 0.15s ease;
}
.industry-svc-cards .sc-more a:hover { color: #c41019; }