/* ============================================================================
 * BRIMICH LOGISTICS -- SITE STYLESHEET (combined)
 * ============================================================================
 *
 * Single consolidated stylesheet covering the homepage, footer, and all
 * interior pages (currently: About Us).
 *
 * Paste into:
 *   Elementor -> Site Settings -> Custom CSS    (Elementor Pro)
 *     OR
 *   Appearance -> Customize -> Additional CSS   (any theme)
 *
 * Structure (search for these markers to jump to a section):
 *
 *   PART 1 -- DESIGN TOKENS (:root)
 *   PART 2 -- HOMEPAGE STYLES
 *   PART 3 -- FOOTER STYLES
 *   PART 4 -- INTERIOR PAGE STYLES  (About, plus reusable interior hero)
 *
 * Design system:
 *   * Brand colors:     blue #013479, blue-deep #0a1929, green #5a8538,
 *                       green-bright #7eaa4d, cream #fffbf2, tan #8c6d44
 *   * Type system:      Poppins (heading) + Glacial Indifference (body)
 *   * Easing curves:    --brimich-ease, --brimich-ease-out, --brimich-ease-bounce
 *   * Shadow scale:     --brimich-shadow-sm/md/lg/xl
 *
 * Edit any token value below to update sitewide colors, shadows, or easing.
 * All component CSS references the tokens -- no hardcoded colors below part 1.
 *
 * ============================================================================ */


/* ============================================================================
 * PART 1 -- DESIGN TOKENS (:root)
 * ============================================================================
 * Single source of truth for brand colors, easing curves, and shadows.
 * Override any value here to update the whole site at once.
 * ============================================================================ */

:root {
	--brimich-blue: #013479;
	--brimich-blue-deep: #0a1929;
	--brimich-blue-dark: #011d4a;
	--brimich-blue-hover: #173d8c;
	--brimich-slate: #1f2937;
	--brimich-slate-soft: #6b7280;
	--brimich-cream: #fffbf2;
	--brimich-cream-deep: #f5f0e3;
	--brimich-tan: #8c6d44;
	--brimich-tan-bright: #b99360;
	--brimich-green: #5a8538;
	--brimich-green-bright: #7eaa4d;
	--brimich-white: #ffffff;
	--brimich-border: #e8e4d6;
	--brimich-border-dark: rgba(255, 255, 255, 0.08);

	--brimich-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--brimich-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--brimich-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

	--brimich-shadow-sm: 0 2px 8px rgba(1, 52, 121, 0.06);
	--brimich-shadow-md: 0 8px 24px rgba(1, 52, 121, 0.10);
	--brimich-shadow-lg: 0 20px 50px rgba(1, 52, 121, 0.18);
	--brimich-shadow-xl: 0 30px 80px rgba(1, 52, 121, 0.25);
}

/* ============================================================================
 * PART 2 -- HOMEPAGE STYLES
 * ============================================================================
 * Hero, certifications strip, services grid, mission/vision, values, stats,
 * CTA banner, news cards, closing CTA. Also defines the shared button system
 * (.brimich-button-primary / -secondary / -on-dark / -on-dark-outline / -ghost)
 * used across the homepage, footer, and interior pages.
 * ============================================================================ */


/* ============================================================
   GLOBAL -- typography refinements, smooth scroll
   ============================================================ */

html {
	scroll-behavior: smooth;
}

.brimich-section h1,
.brimich-section h2,
.brimich-section h3 {
	letter-spacing: -0.015em;
}

/* Slight text rendering tweak for crisper headings */
.brimich-section .elementor-heading-title {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   EYEBROW SIGNATURE ELEMENT
   ============================================================ */

.brimich-eyebrow .elementor-heading-title {
	text-transform: uppercase;
	font-feature-settings: "tnum";
	display: inline-block;
	position: relative;
}

.brimich-accent-line {
	max-width: 48px;
}

/* ============================================================
   DARK SECTIONS -- global treatment
   Adds subtle texture, ensures all child text is light, scopes
   accent colors to bright variants for visibility.
   ============================================================ */

.brimich-section-dark {
	position: relative;
	color: var(--brimich-white);
}

/* Subtle radial vignette inside dark sections for depth */
.brimich-section-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at top right, rgba(126, 170, 77, 0.06) 0%, transparent 50%),
		radial-gradient(ellipse at bottom left, rgba(185, 147, 96, 0.05) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}

.brimich-section-dark > * {
	position: relative;
	z-index: 1;
}

/* ============================================================
   HERO
   ============================================================ */

.brimich-hero {
	position: relative;
	overflow: hidden;
}

/* Decorative radial glow in upper right */
.brimich-hero::after {
	content: "";
	position: absolute;
	top: -15%;
	right: -10%;
	width: 65%;
	height: 70%;
	background: radial-gradient(circle, rgba(126, 170, 77, 0.18) 0%, transparent 65%);
	pointer-events: none;
	z-index: 1;
}

.brimich-hero .brimich-hero-inner {
	position: relative;
	z-index: 3;
}

/* Staggered entrance animations */
.brimich-hero-eyebrow,
.brimich-hero-accent,
.brimich-hero-title,
.brimich-hero-content > .elementor-widget-text-editor,
.brimich-hero-content > .brimich-hero-cta-row {
	animation: brimichFadeUp 0.9s var(--brimich-ease-out) both;
}

.brimich-hero-eyebrow { animation-delay: 0.05s; }
.brimich-hero-accent { animation-delay: 0.15s; }
.brimich-hero-title { animation-delay: 0.25s; }
.brimich-hero-content > .elementor-widget-text-editor { animation-delay: 0.4s; }
.brimich-hero-content > .brimich-hero-cta-row { animation-delay: 0.55s; }

@keyframes brimichFadeUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

.brimich-hero-cta .elementor-button {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s var(--brimich-ease-bounce),
				box-shadow 0.3s var(--brimich-ease),
				background-color 0.2s ease;
}

.brimich-hero-cta .elementor-button:hover {
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   CERTIFICATIONS
   ============================================================ */

.brimich-certs .brimich-cert-logo {
	transition: transform 0.3s var(--brimich-ease),
				opacity 0.3s ease,
				filter 0.3s ease;
	opacity: 0.7;
	filter: grayscale(0.4);
}

.brimich-certs .brimich-cert-logo:hover {
	transform: translateY(-4px);
	opacity: 1;
	filter: grayscale(0);
}

.brimich-certs .brimich-cert-logo img {
	display: block;
	max-height: 100px;
	width: auto;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.brimich-certs .brimich-cert-logo img {
		max-height: 80px;
	}
}

/* Subtle separator dots between cert logos on desktop */
@media (min-width: 768px) {
	.brimich-certs-row .brimich-cert-col {
		position: relative;
	}
	.brimich-certs-row .brimich-cert-col:not(:last-child)::after {
		content: "";
		position: absolute;
		right: -2px;
		top: 50%;
		transform: translateY(-50%);
		width: 4px;
		height: 4px;
		background: var(--brimich-border);
		border-radius: 50%;
	}
}

/* ============================================================
   APPROACH SECTION
   ============================================================ */

.brimich-approach-image-wrap {
	position: relative;
}

/* Decorative offset square behind the photo -- Brimich Blue,
   shifts dramatically on section hover */
.brimich-approach-image-wrap::before {
	content: "";
	position: absolute;
	top: 32px;
	left: 32px;
	width: 100%;
	height: 100%;
	background: var(--brimich-blue);
	z-index: 0;
	transition: transform 0.7s var(--brimich-ease-out);
}

.brimich-approach:hover .brimich-approach-image-wrap::before {
	transform: translate(-12px, -12px);
}

.brimich-approach-image {
	position: relative;
	z-index: 1;
	box-shadow: var(--brimich-shadow-xl);
}

.brimich-approach-image img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 1023px) {
	.brimich-approach-image-wrap::before {
		display: none;
	}
}

/* ============================================================
   STATS -- dark navy version
   Big numbers, bright green underline, vertical dividers
   ============================================================ */

.brimich-stats-row .brimich-stat-card {
	position: relative;
	transition: transform 0.4s var(--brimich-ease);
}

.brimich-stats-row .brimich-stat-card:hover {
	transform: translateY(-6px);
}

/* Vertical separators between stat cards on desktop -- subtle white lines */
@media (min-width: 768px) {
	.brimich-stats-row .brimich-stat-card:not(:last-child)::after {
		content: "";
		position: absolute;
		right: 0;
		top: 25%;
		bottom: 25%;
		width: 1px;
		background: var(--brimich-border-dark);
	}
}

/* Counter number with bright green accent underline */
.brimich-counter .elementor-counter-number-wrapper {
	position: relative;
	display: inline-block;
}

.brimich-counter .elementor-counter-number-wrapper::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	background: var(--brimich-green-bright);
	margin: 20px auto 18px;
	border-radius: 2px;
	transition: width 0.4s var(--brimich-ease);
}

.brimich-stat-card:hover .elementor-counter-number-wrapper::after {
	width: 80px;
}

/* Counter title on dark -- uppercase, tracked, slightly muted */
.brimich-stats .elementor-counter-title {
	text-transform: uppercase;
}

/* ============================================================
   FANCY GRID -- shared hover-spotlight effect
   Applied to any grid tagged with .brimich-fancy-grid (currently
   services + values). Hovering one card dims the others slightly
   so attention focuses on the hovered card.

   Uses :has() so the dim only kicks in when an actual card is
   hovered -- not when the cursor is in the gap between cards or
   the grid's padding area. Without :has(), hovering grid gaps was
   triggering the dim because :hover fires on the parent grid even
   when no child card is active. Old browsers (pre-:has()) just
   skip the dim effect entirely -- safe progressive enhancement.

   Disabled on touch devices via @media (hover: hover) -- on touch,
   the dim state would feel like a stuck UI bug.
   ============================================================ */

@media (hover: hover) {
	/* All immediate child cards transition opacity + saturation together */
	.brimich-fancy-grid > * {
		transition: opacity 0.5s var(--brimich-ease),
					filter 0.5s var(--brimich-ease);
	}

	/* When the grid CONTAINS a hovered card, dim its children... */
	.brimich-fancy-grid:has(> *:hover) > * {
		opacity: 0.45;
		filter: saturate(0.7);
	}

	/* ...then bring the actually-hovered one back to full presence.
	   Faster transition on the focused card so it feels responsive
	   while the dim fades in/out around it more gently. */
	.brimich-fancy-grid > *:hover {
		opacity: 1;
		filter: saturate(1);
		transition: opacity 0.25s var(--brimich-ease),
					filter 0.25s var(--brimich-ease),
					transform 0.4s var(--brimich-ease),
					background-color 0.35s var(--brimich-ease),
					border-color 0.35s var(--brimich-ease),
					box-shadow 0.4s var(--brimich-ease);
	}
}

/* ============================================================
   SERVICES -- hand-built cards
   Cards now have direct selectors: .brimich-service-icon,
   .brimich-service-title, .brimich-service-desc
   ============================================================ */

.brimich-service-card {
	position: relative;
	background: var(--brimich-white) !important;
	overflow: hidden;
	transition: transform 0.4s var(--brimich-ease),
				box-shadow 0.4s var(--brimich-ease);
	border: 1px solid var(--brimich-border);
}

/* Outline-only at rest -- accent border emerges on hover from the left */
.brimich-service-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--brimich-blue);
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform 0.5s var(--brimich-ease-out);
	z-index: 2;
}

.brimich-service-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--brimich-shadow-lg);
	border-color: transparent;
}

.brimich-service-card:hover::before {
	transform: scaleY(1);
}

/* Standalone icon widget -- sits in a cream square at rest, fills blue on hover */
.brimich-service-card .brimich-service-icon {
	display: inline-flex;
	margin-bottom: 28px;
}

.brimich-service-card .brimich-service-icon .elementor-icon {
	background: var(--brimich-cream-deep);
	width: 64px !important;
	height: 64px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	transition: background-color 0.4s var(--brimich-ease),
				transform 0.4s var(--brimich-ease-bounce),
				box-shadow 0.4s var(--brimich-ease),
				color 0.4s var(--brimich-ease),
				fill 0.4s var(--brimich-ease);
	position: relative;
}

/* Icon glyph -- color set on wrapper (which Elementor sets via inline style),
   the SVG inherits via currentColor. Both color AND fill set for max coverage. */
.brimich-service-card .brimich-service-icon .elementor-icon i,
.brimich-service-card .brimich-service-icon .elementor-icon svg {
	font-size: 28px;
	transition: color 0.4s var(--brimich-ease),
				fill 0.4s var(--brimich-ease);
}

.brimich-service-card:hover .brimich-service-icon .elementor-icon {
	background: var(--brimich-blue);
	transform: rotate(-4deg) scale(1.05);
	box-shadow: 0 12px 28px rgba(1, 52, 121, 0.3);
	/* !important required to override Elementor's inline color style
	   that the icon widget emits from its primary_color setting. */
	color: var(--brimich-white) !important;
	fill: var(--brimich-white) !important;
}

.brimich-service-card:hover .brimich-service-icon .elementor-icon i,
.brimich-service-card:hover .brimich-service-icon .elementor-icon svg {
	color: var(--brimich-white) !important;
	fill: var(--brimich-white) !important;
}

/* Service title -- tight tracking, deep blue */
.brimich-service-card .brimich-service-title .elementor-heading-title {
	color: var(--brimich-blue);
	letter-spacing: -0.01em;
}

/* Service description -- soft slate */
.brimich-service-card .brimich-service-desc {
	color: var(--brimich-slate-soft);
}

/* Discovery cue -- small arrow in the bottom-right corner that fades in
   when the card is focused. Signals interactivity even before the cards
   are wired to links. */
.brimich-service-card::after {
	content: "";
	position: absolute;
	right: 28px;
	bottom: 32px;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--brimich-blue);
	border-top: 2px solid var(--brimich-blue);
	transform: rotate(45deg) translate(-6px, 6px);
	opacity: 0;
	transition: opacity 0.4s var(--brimich-ease),
				transform 0.4s var(--brimich-ease-out);
	z-index: 2;
}

.brimich-service-card:hover::after {
	opacity: 1;
	transform: rotate(45deg) translate(0, 0);
}

/* Mobile: cards stack one per row */
@media (max-width: 767px) {
	.brimich-services-grid .brimich-service-card {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.brimich-services-grid .brimich-service-card {
		width: 50% !important;
		flex-basis: 50% !important;
	}
}

/* ============================================================
   MISSION / VISION -- dark navy section
   Two columns, each with a vertical accent bar
   ============================================================ */

.brimich-mission-vision {
	position: relative;
}

.brimich-mission-vision .brimich-mission,
.brimich-mission-vision .brimich-vision {
	position: relative;
	padding-left: 40px !important;
}

.brimich-mission-vision .brimich-mission::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	bottom: 12px;
	width: 4px;
	background: var(--brimich-green);
}

.brimich-mission-vision .brimich-vision::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	bottom: 12px;
	width: 4px;
	background: var(--brimich-tan);
}

/* Faint background numbers behind each column */
.brimich-mission-vision .brimich-mission::after,
.brimich-mission-vision .brimich-vision::after {
	position: absolute;
	top: -40px;
	right: 0;
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: 200px;
	line-height: 1;
	color: rgba(1, 52, 121, 0.05);
	pointer-events: none;
	z-index: 0;
}

.brimich-mission-vision .brimich-mission::after { content: "01"; }
.brimich-mission-vision .brimich-vision::after { content: "02"; }

@media (max-width: 1023px) {
	.brimich-mission-vision .brimich-mission::after,
	.brimich-mission-vision .brimich-vision::after {
		font-size: 140px;
	}
}

@media (max-width: 767px) {
	.brimich-mission-vision .brimich-mission,
	.brimich-mission-vision .brimich-vision {
		padding-left: 24px !important;
	}
	.brimich-mission-vision .brimich-mission::after,
	.brimich-mission-vision .brimich-vision::after {
		display: none;
	}
}

/* ============================================================
   VALUES -- professional reference-card design
   Dark navy section background. Cards are dark-tinted, restrained,
   differentiated by prominent number indices and a single accent
   color used minimally (top accent bar).

   Card structure (in JSON):
   .brimich-value-card
     .brimich-value-index    -- "01", "02", etc.
     .brimich-value-icon     -- single icon widget
     .brimich-value-title    -- h3 value name
     .brimich-value-desc     -- description text

   Accent variants (set on the card itself, JSON):
   .brimich-value-accent-blue
   .brimich-value-accent-green
   .brimich-value-accent-tan
   ============================================================ */

.brimich-values-grid {
	position: relative;
}

/* Card surface -- owns the background completely (no inline bg from JSON).
   Subtle dark variation on the dark navy section creates depth without
   adding color noise. Each card sits on a slightly-lighter navy tile. */
.brimich-value-card {
	position: relative;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-top: 3px solid transparent;
	transition: background-color 0.35s var(--brimich-ease),
				border-color 0.35s var(--brimich-ease),
				transform 0.4s var(--brimich-ease);
}

/* Accent color goes on the top border. Three accent variants assigned
   in the JSON via .brimich-value-accent-* classes. */
.brimich-value-card.brimich-value-accent-blue   { border-top-color: var(--brimich-blue-hover); }
.brimich-value-card.brimich-value-accent-green  { border-top-color: var(--brimich-green-bright); }
.brimich-value-card.brimich-value-accent-tan    { border-top-color: var(--brimich-tan-bright); }

/* Decorative left-edge marker that fills in on hover.
   Echoes the top accent color from each variant for visual continuity. */
.brimich-value-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: -3px;
	bottom: 0;
	width: 3px;
	background: currentColor;
	opacity: 0;
	transform: scaleY(0);
	transform-origin: top;
	transition: opacity 0.35s ease, transform 0.4s var(--brimich-ease-out);
}

.brimich-value-card.brimich-value-accent-blue::before   { color: var(--brimich-blue-hover); }
.brimich-value-card.brimich-value-accent-green::before  { color: var(--brimich-green-bright); }
.brimich-value-card.brimich-value-accent-tan::before    { color: var(--brimich-tan-bright); }

.brimich-value-card:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.18);
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.brimich-value-card:hover::before {
	opacity: 1;
	transform: scaleY(1);
}

/* All card content sits above any decoration */
.brimich-value-card > * {
	position: relative;
	z-index: 1;
}

/* ----- The number index -- the new design's hero element ----- */
.brimich-value-card .brimich-value-index .elementor-heading-title {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 2px;
	color: rgba(255, 255, 255, 0.4);
	transition: color 0.3s ease;
}

/* Tinted to accent color on hover -- subtle but reinforces the variant */
.brimich-value-card.brimich-value-accent-blue:hover .brimich-value-index .elementor-heading-title {
	color: var(--brimich-blue-hover);
}
.brimich-value-card.brimich-value-accent-green:hover .brimich-value-index .elementor-heading-title {
	color: var(--brimich-green-bright);
}
.brimich-value-card.brimich-value-accent-tan:hover .brimich-value-index .elementor-heading-title {
	color: var(--brimich-tan-bright);
}

/* The number gets a thin underline divider beneath it -- connects to a
   horizontal accent line that grows from left to right.
   Pure CSS so no extra widgets needed. */
.brimich-value-card .brimich-value-index {
	position: relative;
	width: 100%;
}

.brimich-value-card .brimich-value-index::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -12px;
	width: 32px;
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
	transition: width 0.4s var(--brimich-ease-out),
				background-color 0.3s ease;
}

.brimich-value-card:hover .brimich-value-index::after {
	width: 80px;
}

.brimich-value-card.brimich-value-accent-blue:hover .brimich-value-index::after {
	background: var(--brimich-blue-hover);
}
.brimich-value-card.brimich-value-accent-green:hover .brimich-value-index::after {
	background: var(--brimich-green-bright);
}
.brimich-value-card.brimich-value-accent-tan:hover .brimich-value-index::after {
	background: var(--brimich-tan-bright);
}

/* ----- Icon -- restrained, just a colored icon, no container ----- */
.brimich-value-card .brimich-value-icon {
	display: inline-flex;
	margin-bottom: 20px;
	margin-top: 12px; /* breathing room from the index underline */
}

.brimich-value-card .brimich-value-icon .elementor-icon {
	background: transparent;
	border: 0;
	padding: 0;
	width: auto !important;
	height: auto !important;
	transition: color 0.3s ease, fill 0.3s ease, transform 0.4s var(--brimich-ease-out);
}

.brimich-value-card .brimich-value-icon .elementor-icon i,
.brimich-value-card .brimich-value-icon .elementor-icon svg {
	font-size: 32px;
	transition: color 0.3s ease, fill 0.3s ease;
}

/* Icon tints to accent color on hover.
   Target BOTH the wrapper (which carries Elementor's inline color style)
   and the child glyph. !important is required to overcome inline styles. */
.brimich-value-card.brimich-value-accent-blue:hover .brimich-value-icon .elementor-icon,
.brimich-value-card.brimich-value-accent-blue:hover .brimich-value-icon .elementor-icon i,
.brimich-value-card.brimich-value-accent-blue:hover .brimich-value-icon .elementor-icon svg {
	color: var(--brimich-blue-hover) !important;
	fill: var(--brimich-blue-hover) !important;
}

.brimich-value-card.brimich-value-accent-green:hover .brimich-value-icon .elementor-icon,
.brimich-value-card.brimich-value-accent-green:hover .brimich-value-icon .elementor-icon i,
.brimich-value-card.brimich-value-accent-green:hover .brimich-value-icon .elementor-icon svg {
	color: var(--brimich-green-bright) !important;
	fill: var(--brimich-green-bright) !important;
}

.brimich-value-card.brimich-value-accent-tan:hover .brimich-value-icon .elementor-icon,
.brimich-value-card.brimich-value-accent-tan:hover .brimich-value-icon .elementor-icon i,
.brimich-value-card.brimich-value-accent-tan:hover .brimich-value-icon .elementor-icon svg {
	color: var(--brimich-tan-bright) !important;
	fill: var(--brimich-tan-bright) !important;
}

/* ----- Title -- clean white headline ----- */
.brimich-value-card .brimich-value-title .elementor-heading-title {
	color: var(--brimich-white);
	letter-spacing: -0.01em;
}

/* ----- Description -- soft white, comfortable line height ----- */
.brimich-value-card .brimich-value-desc {
	max-width: 95%;
}

/* ----- Responsive ----- */
@media (max-width: 767px) {
	.brimich-values-grid .brimich-value-card {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.brimich-values-grid .brimich-value-card {
		width: 50% !important;
		flex-basis: 50% !important;
	}
}

/* ============================================================
   CTA BANNER -- dark with brand glows
   ============================================================ */

.brimich-cta-banner {
	position: relative;
	overflow: hidden;
}

/* Override the default ::before of .brimich-section-dark with the
   stronger glows we want on the CTA banner specifically */
.brimich-cta-banner::before {
	background:
		radial-gradient(ellipse at top right, rgba(126, 170, 77, 0.14) 0%, transparent 55%),
		radial-gradient(ellipse at bottom left, rgba(185, 147, 96, 0.10) 0%, transparent 55%) !important;
}

/* Diagonal accent line at the top of the CTA banner */
.brimich-cta-banner::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 4px;
	background: var(--brimich-green-bright);
	z-index: 2;
}

.brimich-banner-cta .elementor-button {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s var(--brimich-ease-bounce),
				box-shadow 0.3s var(--brimich-ease),
				background-color 0.2s ease;
}

.brimich-banner-cta .elementor-button:hover {
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   NEWS CARDS -- cream section, big imagery, image zoom on hover
   ============================================================ */

.brimich-news-card {
	background: var(--brimich-white) !important;
	overflow: hidden;
	transition: transform 0.4s var(--brimich-ease),
				box-shadow 0.4s var(--brimich-ease);
	cursor: pointer;
}

.brimich-news-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--brimich-shadow-lg);
}

.brimich-news-card .brimich-news-image {
	overflow: hidden;
	margin: 0;
	aspect-ratio: 16 / 10;
}

.brimich-news-card .brimich-news-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.8s var(--brimich-ease-out);
}

.brimich-news-card:hover .brimich-news-image img {
	transform: scale(1.07);
}

/* Read more -- ghost button with arrow that slides */
.brimich-news-readmore .elementor-button {
	font-size: 13px !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase;
	font-weight: 700 !important;
}

.brimich-news-readmore .elementor-button-text {
	position: relative;
	padding-right: 28px !important;
	transition: padding-right 0.3s var(--brimich-ease);
}

.brimich-news-readmore .elementor-button-text::after {
	content: "->";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	font-weight: 400;
	transition: transform 0.3s var(--brimich-ease);
}

.brimich-news-readmore .elementor-button:hover .elementor-button-text::after {
	transform: translateY(-50%) translateX(6px);
}

/* News card width fixes */
.brimich-news-card {
	width: 32% !important;
	flex-basis: 32% !important;
}

@media (max-width: 1023px) {
	.brimich-news-card {
		width: 100% !important;
		flex-basis: 100% !important;
		margin-bottom: 24px;
	}
}

/* Gap simulation via margin since parent has no gap */
.brimich-news-grid {
	gap: 2% !important;
}

/* Service cards similar gap fix -- they're 33.333% with 0 gap */
.brimich-services-grid > .brimich-service-card {
	border-right: 1px solid var(--brimich-border);
	border-bottom: 1px solid var(--brimich-border);
}

/* Remove right border on every 3rd card */
.brimich-services-grid > .brimich-service-card:nth-child(3n) {
	border-right: 0;
}

/* Remove bottom border on last row */
.brimich-services-grid > .brimich-service-card:nth-last-child(-n+3) {
	border-bottom: 0;
}

/* ============================================================
   BUTTON ARROW DECORATIONS
   ============================================================ */

/* ============================================================
   BUTTON ARROW -- universal animation for all CTA-style buttons
   Arrow is always visible (subtly), slides right on hover.
   NO vertical lift on any button -- only the arrow moves.
   ============================================================ */

.brimich-button-primary .elementor-button-text,
.brimich-button-secondary .elementor-button-text,
.brimich-button-on-dark .elementor-button-text,
.brimich-button-on-dark-outline .elementor-button-text {
	position: relative;
	padding-right: 28px;
	display: inline-block;
}

.brimich-button-primary .elementor-button-text::after,
.brimich-button-secondary .elementor-button-text::after,
.brimich-button-on-dark .elementor-button-text::after,
.brimich-button-on-dark-outline .elementor-button-text::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	opacity: 0.7;
	transition: opacity 0.3s ease,
				transform 0.35s var(--brimich-ease-out);
}

.brimich-button-primary .elementor-button:hover .elementor-button-text::after,
.brimich-button-secondary .elementor-button:hover .elementor-button-text::after,
.brimich-button-on-dark .elementor-button:hover .elementor-button-text::after,
.brimich-button-on-dark-outline .elementor-button:hover .elementor-button-text::after {
	opacity: 1;
	transform: translateY(-50%) rotate(45deg) translate(5px, -5px);
}

/* Ghost button (read more etc) -- has its own arrow via text */
.brimich-button-ghost .elementor-button {
	position: relative;
}

.brimich-button-ghost .elementor-button::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--brimich-blue);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s var(--brimich-ease-out);
}

.brimich-button-ghost .elementor-button:hover::after {
	transform: scaleX(1);
}

/* ============================================================
   CLOSING CTA -- clean section, primary button shines
   ============================================================ */

.brimich-closing-cta {
	position: relative;
}

/* Decorative thin line through the middle */
.brimich-closing-cta::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(to right, transparent 0%, var(--brimich-border) 30%, var(--brimich-border) 70%, transparent 100%);
	pointer-events: none;
	z-index: 0;
}

.brimich-closing-cta > * {
	position: relative;
	z-index: 1;
}

.brimich-closing-cta .brimich-button-primary .elementor-button {
	box-shadow: var(--brimich-shadow-md);
	transition: transform 0.3s var(--brimich-ease-bounce),
				box-shadow 0.3s var(--brimich-ease),
				background-color 0.2s ease;
}

.brimich-closing-cta .brimich-button-primary .elementor-button:hover {
	box-shadow: var(--brimich-shadow-lg);
}

/* ============================================================
   GLOBAL FOCUS STATES
   ============================================================ */

.brimich-section a:focus-visible,
.brimich-section button:focus-visible,
.brimich-section .elementor-button:focus-visible {
	outline: 3px solid var(--brimich-green-bright);
	outline-offset: 3px;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}

	.brimich-service-card:hover,
	.brimich-value-card:hover,
	.brimich-news-card:hover,
	.brimich-stat-card:hover {
		transform: none !important;
	}

	.brimich-approach:hover .brimich-approach-image-wrap::before {
		transform: none !important;
	}
}
/* ============================================================================
 * PART 3 -- FOOTER STYLES
 * ============================================================================
 * Dark navy footer with 4-column grid, certifications band, and sub-footer
 * (copyright + legal + design credit). Uses the same design tokens defined
 * in PART 1.
 * ============================================================================ */

/* ============================================================
   Outer footer section -- dark navy
   ============================================================ */

.brimich-footer {
	color: var(--brimich-white, #ffffff);
	font-family: "Glacial Indifference", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* All footer headings + raw text widgets inherit white text by default. */
.brimich-footer .elementor-widget-text-editor a {
	color: inherit;
}

/* ============================================================
   Top band -- 4-column grid
   ============================================================ */

.brimich-footer-grid {
	position: relative;
}

/* On tablet, switch to 2x2 grid; on mobile, single column.
   Widths set on the container in JSON; tablet override fixes the layout. */
@media (max-width: 1023px) {
	.brimich-footer-grid {
		flex-wrap: wrap !important;
	}
	.brimich-footer-grid > .brimich-footer-col {
		width: 50% !important;
		flex-basis: 50% !important;
		margin-bottom: 40px;
		padding-right: 24px !important;
	}
	.brimich-footer-grid > .brimich-footer-col-brand {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

@media (max-width: 640px) {
	.brimich-footer-grid > .brimich-footer-col {
		width: 100% !important;
		flex-basis: 100% !important;
		padding-right: 0 !important;
	}
}

/* ============================================================
   Brand column
   ============================================================ */

.brimich-footer-logo img {
	max-width: 220px;
	height: auto;
	margin-bottom: 24px;
	display: block;
}

.brimich-footer-tagline {
	max-width: 360px;
}

.brimich-footer-tagline p {
	margin: 0;
}

/* ============================================================
   Social icons (in brand column)
   ============================================================ */

.brimich-footer-social .brimich-footer-social-list {
	display: flex;
	gap: 8px;
	align-items: center;
}

.brimich-footer-social .brimich-footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: background-color 0.25s ease,
				color 0.25s ease,
				transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-footer-social .brimich-footer-social-link:hover,
.brimich-footer-social .brimich-footer-social-link:focus-visible {
	background: var(--brimich-green-bright, #7eaa4d);
	color: var(--brimich-blue-deep, #0a1929);
	outline: none;
}

.brimich-footer-social .brimich-footer-social-link svg {
	display: block;
}

/* ============================================================
   Column heading -- green eyebrow style
   ============================================================ */

.brimich-footer-heading .elementor-heading-title {
	text-transform: uppercase;
	position: relative;
	padding-bottom: 12px;
}

.brimich-footer-heading .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	background: var(--brimich-green-bright, #7eaa4d);
}

/* ============================================================
   Link list (Services / Company columns)
   ============================================================ */

.brimich-footer-list-wrap .brimich-footer-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.brimich-footer-list-wrap .brimich-footer-list li {
	list-style: none !important;
	margin: 0 0 10px 0 !important;
	padding: 0 !important;
}

.brimich-footer-list-wrap .brimich-footer-list li::before,
.brimich-footer-list-wrap .brimich-footer-list li::marker {
	content: none !important;
	display: none !important;
}

.brimich-footer-list-wrap .brimich-footer-list a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 14px;
	font-family: "Glacial Indifference", sans-serif;
	line-height: 1.5;
	display: inline-block;
	position: relative;
	padding-left: 0;
	transition: color 0.2s ease,
				padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-footer-list-wrap .brimich-footer-list a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 1px;
	background: var(--brimich-green-bright, #7eaa4d);
	transform: translateY(-50%);
	transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-footer-list-wrap .brimich-footer-list a:hover,
.brimich-footer-list-wrap .brimich-footer-list a:focus-visible {
	color: var(--brimich-white, #ffffff);
	padding-left: 16px;
	outline: none;
}

.brimich-footer-list-wrap .brimich-footer-list a:hover::before,
.brimich-footer-list-wrap .brimich-footer-list a:focus-visible::before {
	width: 10px;
}

/* ============================================================
   Contact column
   ============================================================ */

.brimich-footer-contact .brimich-footer-contact-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.brimich-footer-contact .brimich-footer-contact-item {
	list-style: none !important;
	margin: 0 0 14px 0 !important;
	padding: 0 !important;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	font-family: "Glacial Indifference", sans-serif;
	line-height: 1.5;
}

.brimich-footer-contact .brimich-footer-contact-item::before,
.brimich-footer-contact .brimich-footer-contact-item::marker {
	content: none !important;
	display: none !important;
}

.brimich-footer-contact .brimich-footer-contact-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--brimich-green-bright, #7eaa4d);
}

.brimich-footer-contact .brimich-footer-contact-icon svg {
	display: block;
}

.brimich-footer-contact .brimich-footer-contact-item a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.brimich-footer-contact .brimich-footer-contact-item a:hover,
.brimich-footer-contact .brimich-footer-contact-item a:focus-visible {
	color: var(--brimich-green-bright, #7eaa4d);
	outline: none;
}

.brimich-footer-contact .brimich-footer-contact-address span:last-child {
	display: block;
}

/* ============================================================
   Certifications band
   ============================================================ */

.brimich-footer-certs-band {
	position: relative;
}

.brimich-footer-cert-label .elementor-heading-title {
	text-transform: uppercase;
}

.brimich-footer-certs .brimich-footer-cert-list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
}

.brimich-footer-certs .brimich-footer-cert-logo {
	max-height: 50px;
	width: auto;
	opacity: 0.55;
	filter: grayscale(0.4);
	transition: opacity 0.3s ease,
				filter 0.3s ease,
				transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-footer-certs .brimich-footer-cert-logo:hover {
	opacity: 1;
	filter: grayscale(0);
	transform: translateY(-2px);
}

@media (max-width: 640px) {
	.brimich-footer-certs .brimich-footer-cert-list {
		gap: 24px;
	}
	.brimich-footer-certs .brimich-footer-cert-logo {
		max-height: 40px;
	}
}

/* ============================================================
   Sub-footer band -- copyright + legal + credit
   ============================================================ */

.brimich-footer-subfooter {
	font-size: 13px;
}

.brimich-footer-copyright p {
	margin: 0;
}

/* Right side wrapper (inside HTML widget) */
.brimich-footer-subfooter-right .brimich-footer-subfooter-right-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: flex-end;
	font-family: "Glacial Indifference", sans-serif;
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
}

.brimich-footer-subfooter .brimich-footer-legal-link {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.2s ease;
}

.brimich-footer-subfooter .brimich-footer-legal-link:hover,
.brimich-footer-subfooter .brimich-footer-legal-link:focus-visible {
	color: var(--brimich-white, #ffffff);
	outline: none;
}

.brimich-footer-subfooter .brimich-footer-legal-sep {
	color: rgba(255, 255, 255, 0.3);
	user-select: none;
}

.brimich-footer-subfooter .brimich-footer-credit {
	color: rgba(255, 255, 255, 0.5);
}

.brimich-footer-subfooter .brimich-footer-credit a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.2s ease;
}

.brimich-footer-subfooter .brimich-footer-credit a:hover,
.brimich-footer-subfooter .brimich-footer-credit a:focus-visible {
	color: var(--brimich-green-bright, #7eaa4d);
	outline: none;
}

/* Mobile: stack the sub-footer's two halves */
@media (max-width: 767px) {
	.brimich-footer-subfooter-left,
	.brimich-footer-subfooter-right-col {
		width: 100% !important;
		flex-basis: 100% !important;
	}
	.brimich-footer-subfooter-right .brimich-footer-subfooter-right-inner {
		justify-content: flex-start;
	}
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.brimich-footer *,
	.brimich-footer *::before,
	.brimich-footer *::after {
		transition-duration: 0.01ms !important;
	}
	.brimich-footer-certs .brimich-footer-cert-logo:hover,
	.brimich-footer-social .brimich-footer-social-link:hover,
	.brimich-footer-list-wrap .brimich-footer-list a:hover {
		transform: none !important;
		padding-left: 0 !important;
	}
}

/* ============================================================================
 * PART 4 -- INTERIOR PAGE STYLES
 * ============================================================================
 * About Us page sections AND the reusable .brimich-interior-hero-* pattern
 * for use on all interior pages (Services, Contact, News, etc.).
 *
 * To reuse the interior hero: duplicate the hero section in Elementor,
 * edit the content (eyebrow, title, subtitle, background image, breadcrumb).
 * The CSS classes are generic so the same component renders consistently
 * across every interior page.
 * ============================================================================ */

/* ============================================================
   1. REUSABLE INTERIOR HERO PATTERN
   ============================================================ */

.brimich-interior-hero {
	position: relative;
	overflow: hidden;
}

/* Decorative green glow accent -- matches homepage hero language */
.brimich-interior-hero::after {
	content: "";
	position: absolute;
	bottom: -200px;
	right: -200px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(126, 170, 77, 0.18) 0%, transparent 70%);
	pointer-events: none;
	z-index: 1;
}

.brimich-interior-hero-content {
	position: relative;
	z-index: 2;
}

.brimich-interior-hero-eyebrow .brimich-interior-hero-eyebrow-inner {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
}

.brimich-interior-hero-eyebrow .brimich-interior-hero-eyebrow-line {
	display: inline-block;
	width: 36px;
	height: 2px;
	background: var(--brimich-green-bright, #7eaa4d);
}

.brimich-interior-hero-eyebrow .brimich-interior-hero-eyebrow-text {
	font-family: "Glacial Indifference", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3px;
	color: var(--brimich-green-bright, #7eaa4d);
	text-transform: uppercase;
}

.brimich-interior-hero-title .elementor-heading-title {
	max-width: 760px;
}

.brimich-interior-hero-subtitle {
	max-width: 620px;
}

.brimich-interior-hero-subtitle p {
	margin: 0;
}

.brimich-interior-hero-breadcrumb {
	margin-top: 40px;
}

.brimich-interior-hero-breadcrumb .brimich-interior-hero-crumbs {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.5px;
}

.brimich-interior-hero-breadcrumb .brimich-interior-hero-crumbs a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition: color 0.2s ease;
}

.brimich-interior-hero-breadcrumb .brimich-interior-hero-crumbs a:hover,
.brimich-interior-hero-breadcrumb .brimich-interior-hero-crumbs a:focus-visible {
	color: var(--brimich-green-bright, #7eaa4d);
	outline: none;
}

.brimich-interior-hero-breadcrumb .brimich-interior-hero-crumbs-sep {
	opacity: 0.4;
}

.brimich-interior-hero-breadcrumb .brimich-interior-hero-crumbs-current {
	color: var(--brimich-white, #ffffff);
}

/* ============================================================
   2. SHARED ABOUT-PAGE EYEBROW
   Used on multiple section heads. Matches homepage rhythm.
   ============================================================ */

.brimich-about-eyebrow-wrap .brimich-about-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

.brimich-about-eyebrow-wrap-center .brimich-about-eyebrow {
	justify-content: center;
}

.brimich-about-eyebrow .brimich-about-eyebrow-line {
	display: inline-block;
	width: 36px;
	height: 2px;
	background: var(--brimich-green-bright, #7eaa4d);
}

.brimich-about-eyebrow span:not(.brimich-about-eyebrow-line) {
	font-family: "Glacial Indifference", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3px;
	color: var(--brimich-green, #5a8538);
	text-transform: uppercase;
}

.brimich-about-eyebrow-on-dark span:not(.brimich-about-eyebrow-line) {
	color: var(--brimich-green-bright, #7eaa4d);
}

/* ============================================================
   3. INTRO SPLIT (white bg, image + text)
   ============================================================ */

.brimich-about-intro-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 24px 60px rgba(10, 25, 41, 0.12);
}

.brimich-about-intro-body p {
	margin: 0 0 18px 0;
}

.brimich-about-intro-body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1023px) {
	.brimich-about-intro-row {
		flex-direction: column !important;
	}
	.brimich-about-intro-col {
		width: 100% !important;
		flex-basis: 100% !important;
		padding-right: 0 !important;
	}
	.brimich-about-intro-col-image {
		margin-bottom: 40px;
	}
}

/* ============================================================
   4. MANAGEMENT TEAM GRID (cream bg)
   ============================================================ */

.brimich-about-team-grid {
	row-gap: 0 !important;
}

.brimich-team-card {
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-team-card .brimich-team-card-photo {
	overflow: hidden;
	border-radius: 4px;
	background: rgba(10, 25, 41, 0.06);
}

.brimich-team-card .brimich-team-card-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-team-card:hover .brimich-team-card-photo img {
	transform: scale(1.04);
}

.brimich-team-card .brimich-team-card-name .elementor-heading-title {
	color: var(--brimich-slate, #313131);
	transition: color 0.25s ease;
}

.brimich-team-card:hover .brimich-team-card-name .elementor-heading-title {
	color: var(--brimich-green, #5a8538);
}

.brimich-team-card .brimich-team-card-title p {
	margin: 0;
}

/* ---- 4-column layout (.brimich-about-team-grid-4col) ----
   Desktop: 4 cards per row. The grid container uses flex-start
   justification (not space-between) so the last row -- which has
   only 2 of the 6 cards -- aligns left instead of splitting to
   opposite edges. Inter-card horizontal gap is handled here with
   margin-right, and every 4th card clears it.
   Cards are 23% wide; 3 gaps of ~2.66% fill the remaining 8%. */
@media (min-width: 1024px) {
	.brimich-about-team-grid-4col > .brimich-team-card {
		width: 23% !important;
		flex-basis: 23% !important;
		margin-right: 2.66%;
	}
	/* Every 4th card ends a row -- no trailing margin */
	.brimich-about-team-grid-4col > .brimich-team-card:nth-child(4n) {
		margin-right: 0;
	}
}

/* Tablet -- 2 columns. Applies to both the 3-col and 4-col grids. */
@media (min-width: 641px) and (max-width: 1023px) {
	.brimich-about-team-grid > .brimich-team-card {
		width: 48% !important;
		flex-basis: 48% !important;
		margin-right: 0;
	}
	/* 4-col grid in tablet: explicit 2-up with a gap */
	.brimich-about-team-grid-4col > .brimich-team-card {
		width: 48% !important;
		flex-basis: 48% !important;
		margin-right: 4%;
	}
	.brimich-about-team-grid-4col > .brimich-team-card:nth-child(2n) {
		margin-right: 0;
	}
}

/* Mobile -- 1 column */
@media (max-width: 640px) {
	.brimich-about-team-grid > .brimich-team-card {
		width: 100% !important;
		flex-basis: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 32px;
	}
}

/* "Fancy grid" hover dim -- hovering one card dims the others.
   Same pattern as homepage services + values grids. Touch devices
   skip this so it doesn't strand cards in dimmed state.

   Uses :has() so the dim only triggers when a card is actually
   hovered -- not when the cursor enters the grid's gap or padding
   area between cards. */
@media (hover: hover) {
	.brimich-about-team-grid.brimich-fancy-grid .brimich-team-card {
		transition: opacity 0.5s ease, filter 0.5s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.brimich-about-team-grid.brimich-fancy-grid:has(.brimich-team-card:hover) .brimich-team-card:not(:hover) {
		opacity: 0.45;
		filter: saturate(0.7);
	}
}

/* ============================================================
   5. OUR HISTORY (dark navy, image + text)
   ============================================================ */

.brimich-about-history {
	position: relative;
	overflow: hidden;
}

/* Subtle blue accent in the bg, matches homepage rhythm */
.brimich-about-history::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(ellipse at top left, rgba(23, 61, 140, 0.25) 0%, transparent 50%),
		radial-gradient(ellipse at bottom right, rgba(126, 170, 77, 0.08) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}

.brimich-about-history-row {
	position: relative;
	z-index: 1;
}

.brimich-about-history-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.brimich-about-history-body p {
	margin: 0 0 18px 0;
}

.brimich-about-history-body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1023px) {
	.brimich-about-history-row {
		flex-direction: column !important;
	}
	.brimich-about-history-col {
		width: 100% !important;
		flex-basis: 100% !important;
		padding-right: 0 !important;
	}
	.brimich-about-history-col-image {
		margin-bottom: 40px;
	}
}

/* ============================================================
   6. MISSION + VALUES (white bg)
   Structured 2-part composition: prominent mission card, then a
   labeled values row with icon circles.
   ============================================================ */

.brimich-about-values-inner {
	max-width: 1100px !important;
	width: 100%;
	margin: 0 auto;
}

.brimich-about-values-heading .elementor-heading-title {
	color: var(--brimich-slate, #313131);
}

/* ----- Mission card ------------------------------------------ */

.brimich-about-mission-wrap {
	width: 100%;
	max-width: 820px;
	margin: 0 auto 64px;
}

.brimich-about-mission-card {
	position: relative;
	background: linear-gradient(180deg, rgba(255, 251, 242, 0.6) 0%, rgba(255, 251, 242, 1) 100%);
	border: 1px solid rgba(140, 109, 68, 0.18);
	border-radius: 4px;
	padding: 64px 56px 48px;
	text-align: center;
	box-shadow: 0 24px 60px rgba(10, 25, 41, 0.06);
}

/* Decorative left-edge accent -- vertical green bar at the start */
.brimich-about-mission-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 32px;
	bottom: 32px;
	width: 3px;
	background: var(--brimich-green-bright, #7eaa4d);
	border-radius: 0 2px 2px 0;
}

/* Large opening quote mark -- sits at the top center as a visual flourish */
.brimich-about-mission-card .brimich-about-mission-mark {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	font-family: "Poppins", Georgia, serif;
	font-size: 72px;
	font-weight: 700;
	line-height: 1;
	color: var(--brimich-green-bright, #7eaa4d);
	opacity: 0.5;
	user-select: none;
}

.brimich-about-mission-card .brimich-about-mission-text {
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-size: 22px;
	line-height: 1.55;
	font-weight: 400;
	font-style: italic;
	color: rgba(49, 49, 49, 0.92);
	letter-spacing: -0.2px;
}

.brimich-about-mission-card .brimich-about-mission-label {
	display: inline-block;
	margin-top: 28px;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 3px;
	color: var(--brimich-green, #5a8538);
	text-transform: uppercase;
}

@media (max-width: 768px) {
	.brimich-about-mission-card {
		padding: 56px 28px 40px;
	}
	.brimich-about-mission-card .brimich-about-mission-text {
		font-size: 18px;
	}
	.brimich-about-mission-card .brimich-about-mission-mark {
		font-size: 56px;
	}
}

/* ----- "Our Values" mini-label between mission + values --------- */

.brimich-about-values-label-wrap {
	width: 100%;
	margin-bottom: 40px;
}

.brimich-about-values-label-wrap .brimich-about-values-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.brimich-about-values-label-wrap .brimich-about-values-label-line {
	display: inline-block;
	width: 48px;
	height: 1px;
	background: rgba(49, 49, 49, 0.2);
}

.brimich-about-values-label-wrap .brimich-about-values-label-text {
	font-family: "Glacial Indifference", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3px;
	color: rgba(49, 49, 49, 0.55);
	text-transform: uppercase;
}

/* ----- Value tiles -------------------------------------------- */

.brimich-about-values-row {
	width: 100%;
}

.brimich-about-value {
	position: relative;
	background: transparent;
	border-radius: 4px;
	/* --value-accent defaults to green; modifier classes below override.
	   Defined here on .brimich-about-value (not the inner circle) so any
	   descendant -- including hover rules that target the circle -- can read
	   it without inheritance gymnastics. */
	--value-accent: var(--brimich-green, #5a8538);
	transition: background-color 0.3s ease,
				transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Per-instance accent variants (set in the JSON via modifier classes).
   Using modifier classes instead of inline style="" so the icon widget
   itself doesn't need any custom attributes -- Elementor's icon widget
   handles FontAwesome enqueueing automatically. */
.brimich-about-value-accent-green { --value-accent: var(--brimich-green, #5a8538); }
.brimich-about-value-accent-blue  { --value-accent: var(--brimich-blue, #013479); }
.brimich-about-value-accent-tan   { --value-accent: var(--brimich-tan, #8c6d44); }

.brimich-about-value:hover {
	background: rgba(255, 251, 242, 0.7);
	transform: translateY(-4px);
}

/* Icon circle wrapper -- colored ring at rest, fills with its accent on hover.
   The circle is a flex container holding Elementor's icon widget output. */
.brimich-about-value .brimich-about-value-icon-circle {
	width: 72px !important;
	height: 72px !important;
	min-height: 72px !important;
	max-width: 72px !important;
	border-radius: 50%;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: var(--brimich-white, #ffffff);
	border: 2px solid var(--value-accent);
	margin: 0 auto 24px;
	padding: 0 !important;
	flex: 0 0 auto !important;
	transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
				border-color 0.3s ease,
				transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 8px 20px rgba(10, 25, 41, 0.05);
}

/* Target Elementor's icon widget output (.elementor-icon contains an i tag or svg).
   The !important is needed because Elementor sets inline color via the
   primary_color setting; same defensive pattern as the homepage value icons.
   Both color (for the i tag) and fill (for inline svg) are set since Elementor may
   render either depending on the FA version. */
.brimich-about-value .brimich-about-value-icon-circle .elementor-icon,
.brimich-about-value .brimich-about-value-icon-circle .elementor-icon i,
.brimich-about-value .brimich-about-value-icon-circle .elementor-icon svg {
	color: var(--value-accent) !important;
	fill: var(--value-accent) !important;
	transition: color 0.3s ease, fill 0.3s ease;
}

.brimich-about-value .brimich-about-value-icon-circle .elementor-icon i {
	font-size: 28px;
	line-height: 1;
}

.brimich-about-value .brimich-about-value-icon-circle .elementor-icon svg {
	width: 28px;
	height: 28px;
}

/* Hover state -- circle fills with accent, icon flips white, slight rotate */
.brimich-about-value:hover .brimich-about-value-icon-circle {
	background: var(--value-accent);
	border-color: var(--value-accent);
	transform: scale(1.08) rotate(-4deg);
}

.brimich-about-value:hover .brimich-about-value-icon-circle .elementor-icon,
.brimich-about-value:hover .brimich-about-value-icon-circle .elementor-icon i,
.brimich-about-value:hover .brimich-about-value-icon-circle .elementor-icon svg {
	color: var(--brimich-white, #ffffff) !important;
	fill: var(--brimich-white, #ffffff) !important;
}

/* Value name */
.brimich-about-value .brimich-about-value-label .elementor-heading-title {
	color: var(--brimich-slate, #313131);
	font-family: "Poppins", sans-serif;
	letter-spacing: -0.2px;
}

/* Tagline */
.brimich-about-value .brimich-about-value-tagline p {
	margin: 0;
	font-family: "Glacial Indifference", sans-serif;
}

/* Vertical thin separator between tiles (desktop only) */
.brimich-about-values-row > .brimich-about-value:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 32px;
	bottom: 32px;
	right: 0;
	width: 1px;
	background: rgba(49, 49, 49, 0.08);
	pointer-events: none;
}

/* Tablet -- 3 columns, hide separators that would wrap awkwardly */
@media (max-width: 1023px) {
	.brimich-about-values-row {
		flex-wrap: wrap !important;
	}
	.brimich-about-values-row > .brimich-about-value {
		width: 33.33% !important;
		flex-basis: 33.33% !important;
		margin-bottom: 16px;
	}
	.brimich-about-values-row > .brimich-about-value::after {
		display: none;
	}
}

/* Mobile -- 2 columns */
@media (max-width: 640px) {
	.brimich-about-values-row > .brimich-about-value {
		width: 50% !important;
		flex-basis: 50% !important;
		padding: 28px 12px !important;
	}
	.brimich-about-value .brimich-about-value-icon-circle {
		width: 60px;
		height: 60px;
	}
	.brimich-about-value .brimich-about-value-icon-circle i {
		font-size: 22px;
	}
}

/* ============================================================
   7. CONTACT CTA BANNER (dark navy)
   Button styling intentionally inherits from .brimich-button-on-dark
   defined in brimich-home.css (so the arrow-slide hover matches the
   homepage CTA exactly). We only style the section-level decoration here.
   ============================================================ */

.brimich-about-cta {
	position: relative;
	overflow: hidden;
}

.brimich-about-cta::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 4px;
	background: var(--brimich-green-bright, #7eaa4d);
	z-index: 2;
}

.brimich-about-cta-sub p {
	margin: 0;
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   8. SECTION-LEVEL HELPERS
   Marker classes used across sections -- borrowed from homepage.
   ============================================================ */





/* ============================================================
   9. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.brimich-interior-hero *,
	.brimich-about-intro *,
	.brimich-about-team *,
	.brimich-about-history *,
	.brimich-about-values *,
	.brimich-about-cta * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
	.brimich-team-card:hover,
	.brimich-about-value:hover {
		transform: none !important;
	}
	.brimich-team-card:hover .brimich-team-card-photo img {
		transform: none !important;
	}
}


/* ============================================================================
 * PART 5 -- WAREHOUSING PAGE
 * ============================================================================
 * Warehousing interior page. Reuses .brimich-interior-hero-* (from PART 4)
 * and .brimich-button-on-dark / .brimich-banner-cta (from PART 2). All
 * warehousing-specific component CSS namespaced with .brimich-wh-*.
 * ============================================================================ */

/* ============================================================
   1. CAPABILITIES STRIP (4 storage type cards, white bg)
   Sits directly under the hero. Lifts the page out of "intro paragraph"
   territory and gives the visitor immediate scannable proof of scope.
   ============================================================ */

.brimich-wh-capabilities {
	position: relative;
}

.brimich-wh-capabilities-row {
	width: 100%;
}

.brimich-wh-cap {
	position: relative;
	background: transparent;
	border-radius: 4px;
	/* Per-card accent flows through --cap-accent. Modifiers below set it. */
	--cap-accent: var(--brimich-green, #5a8538);
	transition: background-color 0.3s ease,
				transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-wh-cap-accent-blue  { --cap-accent: var(--brimich-blue, #013479); }
.brimich-wh-cap-accent-green { --cap-accent: var(--brimich-green, #5a8538); }
.brimich-wh-cap-accent-tan   { --cap-accent: var(--brimich-tan, #8c6d44); }

.brimich-wh-cap:hover {
	background: rgba(255, 251, 242, 0.5);
	transform: translateY(-4px);
}

/* Icon circle wrapper. Filled at rest (in the accent color) -- the opposite
   pattern from the About values, since capabilities are "things we DO" and
   should feel solid/established, not "values we WORK ON". */
.brimich-wh-cap .brimich-wh-cap-icon-circle {
	width: 80px !important;
	height: 80px !important;
	min-height: 80px !important;
	max-width: 80px !important;
	border-radius: 50%;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: var(--cap-accent);
	margin: 0 auto 24px;
	padding: 0 !important;
	flex: 0 0 auto !important;
	transition: background-color 0.3s ease,
				transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 10px 24px rgba(10, 25, 41, 0.08);
}

.brimich-wh-cap:hover .brimich-wh-cap-icon-circle {
	transform: scale(1.06) rotate(-3deg);
}

/* Target the icon widget output inside the circle */
.brimich-wh-cap .brimich-wh-cap-icon-circle .elementor-icon,
.brimich-wh-cap .brimich-wh-cap-icon-circle .elementor-icon i,
.brimich-wh-cap .brimich-wh-cap-icon-circle .elementor-icon svg {
	color: var(--brimich-white, #ffffff) !important;
	fill: var(--brimich-white, #ffffff) !important;
}

.brimich-wh-cap .brimich-wh-cap-icon-circle .elementor-icon i {
	font-size: 30px;
	line-height: 1;
}

.brimich-wh-cap .brimich-wh-cap-icon-circle .elementor-icon svg {
	width: 30px;
	height: 30px;
}

.brimich-wh-cap .brimich-wh-cap-name .elementor-heading-title {
	color: var(--brimich-slate, #313131);
	font-family: "Poppins", sans-serif;
	letter-spacing: -0.2px;
}

.brimich-wh-cap .brimich-wh-cap-desc p {
	margin: 0;
	font-family: "Glacial Indifference", sans-serif;
}

/* Thin vertical hairline between cards (desktop) */
.brimich-wh-capabilities-row > .brimich-wh-cap:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 40px;
	bottom: 40px;
	right: 0;
	width: 1px;
	background: rgba(49, 49, 49, 0.08);
	pointer-events: none;
}

@media (max-width: 1023px) {
	.brimich-wh-capabilities-row {
		flex-wrap: wrap !important;
	}
	.brimich-wh-capabilities-row > .brimich-wh-cap {
		width: 50% !important;
		flex-basis: 50% !important;
		margin-bottom: 16px;
	}
	.brimich-wh-capabilities-row > .brimich-wh-cap::after {
		display: none;
	}
}

@media (max-width: 640px) {
	.brimich-wh-capabilities-row > .brimich-wh-cap {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

/* ============================================================
   2. OVERVIEW SPLIT (white bg, image + text + stat callout)
   ============================================================ */

.brimich-wh-overview-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 24px 60px rgba(10, 25, 41, 0.14);
}

.brimich-wh-overview-body p {
	margin: 0 0 16px 0;
}

.brimich-wh-overview-body p:last-child {
	margin-bottom: 0;
}

/* Big stat callout under the body text. Designed to feel like a typographic
   exclamation point rather than just another paragraph. */
.brimich-wh-overview-stat-wrap .brimich-wh-overview-stat {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 20px 24px;
	background: linear-gradient(135deg, rgba(126, 170, 77, 0.08) 0%, rgba(126, 170, 77, 0) 100%);
	border-left: 3px solid var(--brimich-green-bright, #7eaa4d);
	border-radius: 0 4px 4px 0;
}

.brimich-wh-overview-stat-wrap .brimich-wh-overview-stat-num {
	font-family: "Poppins", sans-serif;
	font-size: 56px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -2px;
	color: var(--brimich-green, #5a8538);
}

.brimich-wh-overview-stat-wrap .brimich-wh-overview-stat-label {
	font-family: "Glacial Indifference", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--brimich-slate, #313131);
	opacity: 0.7;
	line-height: 1.5;
	max-width: 200px;
}

@media (max-width: 1023px) {
	.brimich-wh-overview-row {
		flex-direction: column !important;
	}
	.brimich-wh-overview-col {
		width: 100% !important;
		flex-basis: 100% !important;
		padding-right: 0 !important;
	}
	.brimich-wh-overview-col-image {
		margin-bottom: 40px;
	}
}

@media (max-width: 640px) {
	.brimich-wh-overview-stat-wrap .brimich-wh-overview-stat-num {
		font-size: 44px;
	}
}

/* ============================================================
   3. GALLERY (asymmetric 12-col CSS grid, cream bg)
   Six tiles laid out in a deliberate mosaic. Built with CSS grid
   positioning rather than flex so the spans are deterministic.
   ============================================================ */

/* The gallery grid container needs to win over Elementor's container flex
   defaults. The JSON ships it as content_width=full (NOT boxed) so Elementor
   doesn't insert a .e-con-inner wrapper between this container and its tile
   children. That keeps the direct-child grid spans intact.

   Defensive note: even if the wrapper appears (theme override, future
   Elementor version change), the rules below use descendant selectors where
   safe so the grid still works. */
.brimich-wh-gallery-grid.e-con,
.brimich-wh-gallery-grid.e-con-full,
.brimich-wh-gallery-grid.e-flex,
.brimich-wh-gallery-grid {
	display: grid !important;
	grid-template-columns: repeat(12, 1fr) !important;
	grid-auto-rows: 180px !important;
	gap: 16px !important;
	width: 100% !important;
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	box-sizing: border-box !important;
	/* Kill Elementor's flex container behavior so it doesn't fight the grid. */
	flex-direction: unset !important;
	flex-wrap: unset !important;
	align-items: unset !important;
	justify-content: unset !important;
}

/* Individual tiles. Each tile is an Elementor container (.e-con), so we
   override its default flex sizing and tell it to act like a grid item --
   letting grid-column / grid-row from the position rules below dictate
   dimensions instead of Elementor's flex defaults.

   Selector uses descendant (not direct-child) so it matches whether the
   tiles are direct children of the grid OR nested in an .e-con-inner
   wrapper (defensive against Elementor version differences). */
.brimich-wh-gallery-grid .brimich-wh-gal-tile {
	overflow: hidden;
	border-radius: 4px;
	background: rgba(10, 25, 41, 0.06);
	position: relative;
	/* Override Elementor's flex item sizing so grid spans win */
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	flex: 0 0 auto !important;
	align-self: stretch !important;
	/* Inside the tile, stack the image full-bleed */
	display: flex !important;
	flex-direction: column !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Per-tile grid positions. The layout (12-col grid):

   |  TILE 1 (wide top-left)  |  TILE 2  |  TILE 4 (tall)  |
   |   6 cols x 2 rows        |  3x2     |  3 cols x 3 rows|
   |--------------------------|----------|                 |
   |  TILE 3  |  TILE 5 (wide bottom)    |                 |
   |  3x2     |  6 cols x 2 rows         |                 |
   |          |--------------------- TILE 6 (3x1) ---------|

   Descendant selectors (not >) so we match the tiles wherever they land
   in the DOM. */
.brimich-wh-gallery-grid .brimich-wh-gal-tile-1 { grid-column: 1 / 7   !important; grid-row: 1 / 3 !important; }
.brimich-wh-gallery-grid .brimich-wh-gal-tile-2 { grid-column: 7 / 10  !important; grid-row: 1 / 3 !important; }
.brimich-wh-gallery-grid .brimich-wh-gal-tile-3 { grid-column: 1 / 4   !important; grid-row: 3 / 5 !important; }
.brimich-wh-gallery-grid .brimich-wh-gal-tile-4 { grid-column: 10 / 13 !important; grid-row: 1 / 4 !important; }
.brimich-wh-gallery-grid .brimich-wh-gal-tile-5 { grid-column: 4 / 10  !important; grid-row: 3 / 5 !important; }
.brimich-wh-gallery-grid .brimich-wh-gal-tile-6 { grid-column: 10 / 13 !important; grid-row: 4 / 5 !important; }

/* If Elementor inserts an .e-con-inner wrapper around the tiles, the wrapper
   becomes the grid item -- not the tile. In that case, the wrapper takes
   over the cell and tiles inside it stack normally. This handles that case
   by passing display: contents to the wrapper so it disappears from layout. */
.brimich-wh-gallery-grid > .e-con-inner {
	display: contents !important;
}

/* Image inside the tile fills the entire tile cell. Elementor wraps images
   in several layers, so make every layer 100% tall and wide. */
.brimich-wh-gallery-grid .brimich-wh-gal-tile > .e-con-inner,
.brimich-wh-gallery-grid .brimich-wh-gal-tile .elementor-widget-image,
.brimich-wh-gallery-grid .brimich-wh-gal-tile .elementor-widget-image > .elementor-widget-container,
.brimich-wh-gallery-grid .brimich-wh-gal-tile .elementor-image,
.brimich-wh-gallery-grid .brimich-wh-gal-tile .brimich-wh-gal-img,
.brimich-wh-gallery-grid .brimich-wh-gal-tile .brimich-wh-gal-img > a {
	height: 100% !important;
	width: 100% !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 1 1 auto !important;
}

.brimich-wh-gallery-grid .brimich-wh-gal-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
				filter 0.4s ease;
}

.brimich-wh-gallery-grid .brimich-wh-gal-tile:hover .brimich-wh-gal-img img {
	transform: scale(1.06);
}

/* Subtle dim of non-hovered tiles */
@media (hover: hover) {
	.brimich-wh-gallery-grid:has(.brimich-wh-gal-tile:hover) .brimich-wh-gal-tile:not(:hover) .brimich-wh-gal-img img {
		filter: saturate(0.8) brightness(0.92);
	}
}

/* Tablet -- 6-column layout */
@media (max-width: 1023px) {
	.brimich-wh-gallery-grid.e-con,
	.brimich-wh-gallery-grid.e-con-full,
	.brimich-wh-gallery-grid.e-flex,
	.brimich-wh-gallery-grid {
		grid-template-columns: repeat(6, 1fr) !important;
		grid-auto-rows: 160px !important;
	}
	.brimich-wh-gallery-grid .brimich-wh-gal-tile-1 { grid-column: 1 / 5 !important; grid-row: 1 / 3 !important; }
	.brimich-wh-gallery-grid .brimich-wh-gal-tile-2 { grid-column: 5 / 7 !important; grid-row: 1 / 2 !important; }
	.brimich-wh-gallery-grid .brimich-wh-gal-tile-3 { grid-column: 1 / 4 !important; grid-row: 3 / 4 !important; }
	.brimich-wh-gallery-grid .brimich-wh-gal-tile-4 { grid-column: 5 / 7 !important; grid-row: 2 / 4 !important; }
	.brimich-wh-gallery-grid .brimich-wh-gal-tile-5 { grid-column: 4 / 7 !important; grid-row: 4 / 5 !important; }
	.brimich-wh-gallery-grid .brimich-wh-gal-tile-6 { grid-column: 1 / 4 !important; grid-row: 4 / 5 !important; }
}

/* Mobile -- single column stack */
@media (max-width: 640px) {
	.brimich-wh-gallery-grid.e-con,
	.brimich-wh-gallery-grid.e-con-full,
	.brimich-wh-gallery-grid.e-flex,
	.brimich-wh-gallery-grid {
		grid-template-columns: 1fr !important;
		grid-auto-rows: 220px !important;
		gap: 12px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.brimich-wh-gallery-grid .brimich-wh-gal-tile {
		grid-column: 1 !important;
		grid-row: auto !important;
	}
}

/* ============================================================
   4. VALUE-ADDED SERVICES (3-col tile grid, white bg)
   Compact tiles -- icon left, name right, single line.
   ============================================================ */

.brimich-wh-services-grid {
	width: 100%;
	row-gap: 12px !important;
}

.brimich-wh-svc {
	background: var(--brimich-cream, #fffbf2);
	border: 1px solid rgba(140, 109, 68, 0.12);
	border-radius: 3px;
	transition: background-color 0.25s ease,
				border-color 0.25s ease,
				transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-wh-svc:hover {
	background: var(--brimich-white, #ffffff);
	border-color: var(--brimich-green-bright, #7eaa4d);
	transform: translateX(3px);
}

/* The icon widget is a child container; constrain its size and adjust the
   inline color treatment we set in the JSON (COLOR_GREEN at rest). */
.brimich-wh-svc .brimich-wh-svc-icon .elementor-icon {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.brimich-wh-svc .brimich-wh-svc-icon .elementor-icon i,
.brimich-wh-svc .brimich-wh-svc-icon .elementor-icon svg {
	color: var(--brimich-green, #5a8538) !important;
	fill: var(--brimich-green, #5a8538) !important;
	transition: color 0.25s ease, fill 0.25s ease;
}

.brimich-wh-svc:hover .brimich-wh-svc-icon .elementor-icon i,
.brimich-wh-svc:hover .brimich-wh-svc-icon .elementor-icon svg {
	color: var(--brimich-green-bright, #7eaa4d) !important;
	fill: var(--brimich-green-bright, #7eaa4d) !important;
}

.brimich-wh-svc .brimich-wh-svc-name .elementor-heading-title {
	color: var(--brimich-slate, #313131);
	font-family: "Glacial Indifference", sans-serif;
	letter-spacing: 0;
}

@media (max-width: 1023px) {
	.brimich-wh-services-grid > .brimich-wh-svc {
		width: 48% !important;
		flex-basis: 48% !important;
	}
}

@media (max-width: 640px) {
	.brimich-wh-services-grid > .brimich-wh-svc {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

/* ============================================================
   5. INDUSTRIES SERVED (2 cards, dark navy bg)
   Each card has icon + name + green tagline + bullet list.
   ============================================================ */

.brimich-wh-industries {
	position: relative;
	overflow: hidden;
}

/* Same atmospheric texture as homepage values section */
.brimich-wh-industries::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(ellipse at top right, rgba(23, 61, 140, 0.22) 0%, transparent 50%),
		radial-gradient(ellipse at bottom left, rgba(126, 170, 77, 0.10) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}

.brimich-wh-industries-heading,
.brimich-wh-industries-row {
	position: relative;
	z-index: 1;
}

.brimich-wh-ind {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	transition: background-color 0.3s ease,
				border-color 0.3s ease,
				transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-wh-ind:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(126, 170, 77, 0.4);
	transform: translateY(-4px);
}

.brimich-wh-ind .brimich-wh-ind-icon-wrap {
	margin-bottom: 20px;
}

.brimich-wh-ind .brimich-wh-ind-icon .elementor-icon i,
.brimich-wh-ind .brimich-wh-ind-icon .elementor-icon svg {
	color: var(--brimich-green-bright, #7eaa4d) !important;
	fill: var(--brimich-green-bright, #7eaa4d) !important;
}

.brimich-wh-ind .brimich-wh-ind-tagline p {
	margin: 0;
	font-family: "Glacial Indifference", sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* The bullet list -- emitted via HTML widget for clean markup */
.brimich-wh-ind-list-wrap .brimich-wh-ind-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.brimich-wh-ind-list-wrap .brimich-wh-ind-list li {
	list-style: none !important;
	margin: 0 0 12px 0 !important;
	padding: 0 0 0 28px !important;
	position: relative;
	color: rgba(255, 255, 255, 0.82);
	font-family: "Glacial Indifference", sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

.brimich-wh-ind-list-wrap .brimich-wh-ind-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 14px;
	height: 1px;
	background: var(--brimich-green-bright, #7eaa4d);
	transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-wh-ind:hover .brimich-wh-ind-list li::before {
	width: 20px;
}

.brimich-wh-ind-list-wrap .brimich-wh-ind-list li::marker {
	content: none !important;
	display: none !important;
}

@media (max-width: 1023px) {
	.brimich-wh-industries-row {
		flex-direction: column !important;
	}
	.brimich-wh-industries-row > .brimich-wh-ind {
		width: 100% !important;
		flex-basis: 100% !important;
		margin-bottom: 24px;
	}
}

/* ============================================================
   6. TRUST BAND (certifications & technology, white bg)
   Two side-by-side credibility panels.
   ============================================================ */

.brimich-wh-trust-band {
	position: relative;
}

.brimich-wh-trust {
	background: var(--brimich-cream, #fffbf2);
	border: 1px solid rgba(140, 109, 68, 0.15);
	border-radius: 4px;
	transition: background-color 0.3s ease,
				border-color 0.3s ease,
				transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-wh-trust:hover {
	border-color: rgba(126, 170, 77, 0.4);
	transform: translateY(-3px);
}

.brimich-wh-trust .brimich-wh-trust-icon-wrap {
	margin-bottom: 18px;
}

.brimich-wh-trust .brimich-wh-trust-icon .elementor-icon i,
.brimich-wh-trust .brimich-wh-trust-icon .elementor-icon svg {
	color: var(--brimich-green, #5a8538) !important;
	fill: var(--brimich-green, #5a8538) !important;
}

.brimich-wh-trust .brimich-wh-trust-title .elementor-heading-title {
	color: var(--brimich-slate, #313131);
	font-family: "Poppins", sans-serif;
	letter-spacing: -0.3px;
}

.brimich-wh-trust .brimich-wh-trust-body p {
	margin: 0;
}

@media (max-width: 1023px) {
	.brimich-wh-trust-row {
		flex-direction: column !important;
	}
	.brimich-wh-trust-row > .brimich-wh-trust {
		width: 100% !important;
		flex-basis: 100% !important;
		margin-bottom: 16px;
	}
}

/* ============================================================
   7. REDUCED MOTION (warehousing-specific)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.brimich-wh-capabilities *,
	.brimich-wh-overview *,
	.brimich-wh-gallery *,
	.brimich-wh-services *,
	.brimich-wh-industries *,
	.brimich-wh-trust-band * {
		transition-duration: 0.01ms !important;
	}
	.brimich-wh-cap:hover,
	.brimich-wh-svc:hover,
	.brimich-wh-ind:hover,
	.brimich-wh-trust:hover,
	.brimich-wh-gal-tile:hover .brimich-wh-gal-img img {
		transform: none !important;
	}
}


/* ============================================================================
 * PART 6 -- TRANSPORTATION PAGE
 * ============================================================================
 * Sibling to the Warehousing page. Reuses .brimich-interior-hero-* (PART 4),
 * the shared service-tile styles (.brimich-wh-svc, PART 5), the gallery grid
 * (.brimich-wh-gallery-grid, PART 5) and .brimich-button-* (PART 2).
 * Transportation-specific components are namespaced .brimich-tr-*.
 * ============================================================================ */

/* ============================================================
   1. HUMBLE BEGINNINGS (origin story split, white bg)
   ============================================================ */

.brimich-tr-story-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 24px 60px rgba(10, 25, 41, 0.14);
}

.brimich-tr-story-body p {
	margin: 0 0 16px 0;
}

.brimich-tr-story-body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1023px) {
	.brimich-tr-story-row {
		flex-direction: column !important;
	}
	.brimich-tr-story-col {
		width: 100% !important;
		flex-basis: 100% !important;
		padding-right: 0 !important;
	}
	.brimich-tr-story-col-image {
		margin-bottom: 40px;
	}
}

/* ============================================================
   2. COVERAGE SPLIT (dark navy, text + image + two-stat callout)
   ============================================================ */

.brimich-tr-coverage {
	position: relative;
	overflow: hidden;
}

/* Atmospheric texture, same family as other dark sections */
.brimich-tr-coverage::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(ellipse at top right, rgba(23, 61, 140, 0.22) 0%, transparent 50%),
		radial-gradient(ellipse at bottom left, rgba(126, 170, 77, 0.10) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}

.brimich-tr-coverage-row {
	position: relative;
	z-index: 1;
}

.brimich-tr-coverage-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.brimich-tr-coverage-body p {
	margin: 0 0 16px 0;
}

.brimich-tr-coverage-body p:last-child {
	margin-bottom: 0;
}

/* Two-stat callout strip */
.brimich-tr-coverage-stats-wrap .brimich-tr-coverage-stats {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 22px 28px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
}

.brimich-tr-coverage-stats-wrap .brimich-tr-coverage-stat-num {
	font-family: "Poppins", sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.5px;
	color: var(--brimich-green-bright, #7eaa4d);
}

.brimich-tr-coverage-stats-wrap .brimich-tr-coverage-stat-label {
	font-family: "Glacial Indifference", sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 4px;
}

.brimich-tr-coverage-stats-wrap .brimich-tr-coverage-stat-divider {
	width: 1px;
	align-self: stretch;
	background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 1023px) {
	.brimich-tr-coverage-row {
		flex-direction: column !important;
	}
	.brimich-tr-coverage-col {
		width: 100% !important;
		flex-basis: 100% !important;
		padding-right: 0 !important;
	}
	.brimich-tr-coverage-col-text {
		margin-bottom: 40px;
	}
}

@media (max-width: 480px) {
	.brimich-tr-coverage-stats-wrap .brimich-tr-coverage-stats {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.brimich-tr-coverage-stats-wrap .brimich-tr-coverage-stat-divider {
		width: 100%;
		height: 1px;
		align-self: auto;
	}
}

/* ============================================================
   3. EQUIPMENT SHOWCASE (photo cards, white bg)
   5 cards in a row, photo on top + name + descriptor below.
   ============================================================ */

.brimich-tr-equipment-grid {
	width: 100%;
}

.brimich-tr-eq-card {
	background: var(--brimich-white, #ffffff);
	border: 1px solid rgba(10, 25, 41, 0.08);
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
				box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
				border-color 0.3s ease;
}

.brimich-tr-eq-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(10, 25, 41, 0.12);
	border-color: rgba(126, 170, 77, 0.4);
}

/* Photo sits at the top of the card, fixed aspect ratio */
.brimich-tr-eq-card .brimich-tr-eq-photo {
	overflow: hidden;
	background: rgba(10, 25, 41, 0.06);
}

.brimich-tr-eq-card .brimich-tr-eq-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 15 / 11;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-tr-eq-card:hover .brimich-tr-eq-photo img {
	transform: scale(1.05);
}

.brimich-tr-eq-card .brimich-tr-eq-name .elementor-heading-title {
	color: var(--brimich-slate, #313131);
	font-family: "Poppins", sans-serif;
	letter-spacing: -0.2px;
	transition: color 0.25s ease;
}

.brimich-tr-eq-card:hover .brimich-tr-eq-name .elementor-heading-title {
	color: var(--brimich-green, #5a8538);
}

.brimich-tr-eq-card .brimich-tr-eq-desc p {
	margin: 0;
	font-family: "Glacial Indifference", sans-serif;
}

/* Tablet -- 3 per row */
@media (max-width: 1023px) {
	.brimich-tr-equipment-grid {
		flex-wrap: wrap !important;
	}
	.brimich-tr-equipment-grid > .brimich-tr-eq-card {
		width: 31.5% !important;
		flex-basis: 31.5% !important;
		margin-bottom: 24px;
	}
}

/* Mobile -- 1 per row */
@media (max-width: 640px) {
	.brimich-tr-equipment-grid > .brimich-tr-eq-card {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

/* ============================================================
   4. DEPARTMENTS / CONTACTS (dark navy, 2 contact cards)
   ============================================================ */

.brimich-tr-departments {
	position: relative;
	overflow: hidden;
}

.brimich-tr-departments::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(ellipse at top left, rgba(23, 61, 140, 0.20) 0%, transparent 50%),
		radial-gradient(ellipse at bottom right, rgba(126, 170, 77, 0.08) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}

.brimich-tr-departments-heading,
.brimich-tr-departments-row {
	position: relative;
	z-index: 1;
}

.brimich-tr-dept {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	transition: background-color 0.3s ease,
				border-color 0.3s ease,
				transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-tr-dept:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(126, 170, 77, 0.4);
	transform: translateY(-4px);
}

.brimich-tr-dept .brimich-tr-dept-icon-wrap {
	margin-bottom: 18px;
}

.brimich-tr-dept .brimich-tr-dept-icon .elementor-icon i,
.brimich-tr-dept .brimich-tr-dept-icon .elementor-icon svg {
	color: var(--brimich-green-bright, #7eaa4d) !important;
	fill: var(--brimich-green-bright, #7eaa4d) !important;
}

.brimich-tr-dept .brimich-tr-dept-blurb p {
	margin: 0;
}

/* Contact rows -- click-to-call + click-to-email */
.brimich-tr-dept-contacts-wrap .brimich-tr-dept-contacts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.brimich-tr-dept-contacts-wrap .brimich-tr-dept-contact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--brimich-white, #ffffff);
	text-decoration: none;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 15px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 3px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.brimich-tr-dept-contacts-wrap .brimich-tr-dept-contact:hover,
.brimich-tr-dept-contacts-wrap .brimich-tr-dept-contact:focus-visible {
	background: var(--brimich-green-bright, #7eaa4d);
	color: var(--brimich-blue-deep, #0a1929);
	outline: none;
}

.brimich-tr-dept-contacts-wrap .brimich-tr-dept-contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--brimich-green-bright, #7eaa4d);
	flex-shrink: 0;
	transition: color 0.2s ease;
}

.brimich-tr-dept-contacts-wrap .brimich-tr-dept-contact:hover .brimich-tr-dept-contact-icon,
.brimich-tr-dept-contacts-wrap .brimich-tr-dept-contact:focus-visible .brimich-tr-dept-contact-icon {
	color: var(--brimich-blue-deep, #0a1929);
}

@media (max-width: 1023px) {
	.brimich-tr-departments-row {
		flex-direction: column !important;
	}
	.brimich-tr-departments-row > .brimich-tr-dept {
		width: 100% !important;
		flex-basis: 100% !important;
		margin-bottom: 24px;
	}
}

/* ============================================================
   5. DRIVER RECRUITMENT (compact callout band, white bg)
   Image on one side, text + Apply button on the other.
   ============================================================ */

.brimich-tr-driver-band {
	background: var(--brimich-cream, #fffbf2);
	border: 1px solid rgba(140, 109, 68, 0.18);
	border-radius: 6px;
	overflow: hidden;
}

.brimich-tr-driver-col-image {
	min-height: 280px;
	position: relative;
}

/* The image fills its half of the band as a cover background-style image */
.brimich-tr-driver-col-image .brimich-tr-driver-img,
.brimich-tr-driver-col-image .brimich-tr-driver-img .elementor-widget-container,
.brimich-tr-driver-col-image .brimich-tr-driver-img .elementor-image,
.brimich-tr-driver-col-image .brimich-tr-driver-img a {
	height: 100% !important;
	width: 100%;
}

.brimich-tr-driver-col-image .brimich-tr-driver-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.brimich-tr-driver-body p {
	margin: 0;
}

@media (max-width: 1023px) {
	.brimich-tr-driver-band {
		flex-direction: column !important;
	}
	.brimich-tr-driver-col {
		width: 100% !important;
		flex-basis: 100% !important;
	}
	.brimich-tr-driver-col-image {
		min-height: 220px;
	}
}

/* ============================================================
   6. REDUCED MOTION (transportation-specific)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.brimich-tr-story *,
	.brimich-tr-coverage *,
	.brimich-tr-equipment *,
	.brimich-tr-departments *,
	.brimich-tr-driver * {
		transition-duration: 0.01ms !important;
	}
	.brimich-tr-eq-card:hover,
	.brimich-tr-dept:hover {
		transform: none !important;
	}
	.brimich-tr-eq-card:hover .brimich-tr-eq-photo img {
		transform: none !important;
	}
}


/* ============================================================================
 * PART 7 -- OUR FACILITIES / LOCATIONS PAGE
 * ============================================================================
 * The facility cards are the centerpiece. Each card is a mini spec sheet,
 * color-coded by temperature zone via .brimich-loc-zone-* modifier classes.
 * Reuses .brimich-interior-hero-* (PART 4) and .brimich-button-* (PART 2).
 * Locations-specific components namespaced .brimich-loc-*.
 * ============================================================================ */

/* ============================================================
   1. INTRO + FOOTPRINT STAT (white bg)
   ============================================================ */

.brimich-loc-intro-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 24px 60px rgba(10, 25, 41, 0.14);
}

.brimich-loc-intro-body p {
	margin: 0 0 16px 0;
}

.brimich-loc-intro-body p:last-child {
	margin-bottom: 0;
}

/* Two-stat callout strip */
.brimich-loc-intro-stats-wrap .brimich-loc-intro-stats {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 22px 28px;
	background: linear-gradient(135deg, rgba(126, 170, 77, 0.08) 0%, rgba(126, 170, 77, 0) 100%);
	border-left: 3px solid var(--brimich-green-bright, #7eaa4d);
	border-radius: 0 4px 4px 0;
}

.brimich-loc-intro-stats-wrap .brimich-loc-intro-stat-num {
	font-family: "Poppins", sans-serif;
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -1.5px;
	color: var(--brimich-green, #5a8538);
}

.brimich-loc-intro-stats-wrap .brimich-loc-intro-stat-label {
	font-family: "Glacial Indifference", sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: var(--brimich-slate, #313131);
	opacity: 0.7;
	margin-top: 6px;
	line-height: 1.4;
	max-width: 130px;
}

.brimich-loc-intro-stats-wrap .brimich-loc-intro-stat-divider {
	width: 1px;
	align-self: stretch;
	background: rgba(49, 49, 49, 0.12);
}

@media (max-width: 1023px) {
	.brimich-loc-intro-row {
		flex-direction: column !important;
	}
	.brimich-loc-intro-col {
		width: 100% !important;
		flex-basis: 100% !important;
		padding-right: 0 !important;
	}
	.brimich-loc-intro-col-image {
		margin-bottom: 40px;
	}
}

@media (max-width: 480px) {
	.brimich-loc-intro-stats-wrap .brimich-loc-intro-stats {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.brimich-loc-intro-stats-wrap .brimich-loc-intro-stat-divider {
		width: 100%;
		height: 1px;
		align-self: auto;
	}
}

/* ============================================================
   2. FACILITIES GRID -- the centerpiece
   3 cards per row. Each card color-coded by temperature zone.
   ============================================================ */

.brimich-loc-facilities-grid {
	width: 100%;
	row-gap: 32px !important;
}

/* ---- Zone accent colors ----
   Each card gets a --zone-accent custom property from its modifier class.
   refrigerated -> cool blue, ambient -> warm tan, freezer -> deep cyan. */
.brimich-loc-card {
	--zone-accent: var(--brimich-blue, #013479);
	--zone-accent-soft: rgba(1, 52, 121, 0.08);
}
.brimich-loc-zone-refrigerated {
	--zone-accent: #2c7fb8;            /* cool refrigerated blue */
	--zone-accent-soft: rgba(44, 127, 184, 0.10);
}
.brimich-loc-zone-ambient {
	--zone-accent: var(--brimich-tan, #8c6d44);   /* warm ambient tan */
	--zone-accent-soft: rgba(140, 109, 68, 0.10);
}
.brimich-loc-zone-freezer {
	--zone-accent: #1f6f8b;            /* deep cold cyan-navy */
	--zone-accent-soft: rgba(31, 111, 139, 0.12);
}

/* ---- The card shell ---- */
.brimich-loc-card {
	background: var(--brimich-white, #ffffff);
	border: 1px solid rgba(10, 25, 41, 0.08);
	border-top: 3px solid var(--zone-accent);
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
				box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-loc-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 50px rgba(10, 25, 41, 0.14);
}

/* ---- Photo with overlaid zone badge ---- */
.brimich-loc-card-photo-wrap {
	position: relative;
	overflow: hidden;
}

.brimich-loc-card-photo-wrap .brimich-loc-card-photo,
.brimich-loc-card-photo-wrap .brimich-loc-card-photo .elementor-widget-container,
.brimich-loc-card-photo-wrap .brimich-loc-card-photo .elementor-image {
	display: block;
	line-height: 0;
}

.brimich-loc-card-photo-wrap .brimich-loc-card-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 35 / 24;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-loc-card:hover .brimich-loc-card-photo img {
	transform: scale(1.05);
}

/* Zone badge -- sits over the bottom-left of the photo */
.brimich-loc-card-badge-wrap {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
}

.brimich-loc-card-badge-wrap .brimich-loc-card-badge {
	display: inline-block;
	background: var(--zone-accent);
	color: #ffffff;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 0 4px 0 0;
}

/* ---- Card body ---- */
.brimich-loc-card-name .elementor-heading-title {
	color: var(--brimich-slate, #313131);
	font-family: "Poppins", sans-serif;
	letter-spacing: -0.3px;
}

.brimich-loc-card-city p {
	margin: 0 0 18px 0;
	font-family: "Glacial Indifference", sans-serif;
}

/* ---- Spec grid ---- */
.brimich-loc-card-specs-wrap {
	width: 100%;
	margin-bottom: 18px;
}

.brimich-loc-card-specs-wrap .brimich-loc-card-specs {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid rgba(10, 25, 41, 0.08);
}

.brimich-loc-card-specs-wrap .brimich-loc-card-spec {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(10, 25, 41, 0.08);
	font-family: "Glacial Indifference", sans-serif;
}

.brimich-loc-card-specs-wrap .brimich-loc-card-spec-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--zone-accent);
	background: var(--zone-accent-soft);
	border-radius: 3px;
}

.brimich-loc-card-specs-wrap .brimich-loc-card-spec-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(49, 49, 49, 0.5);
	width: 48px;
	flex-shrink: 0;
}

.brimich-loc-card-specs-wrap .brimich-loc-card-spec-value {
	font-size: 13.5px;
	color: var(--brimich-slate, #313131);
	line-height: 1.4;
}

/* ---- Certification pills ---- */
.brimich-loc-card-certs-wrap {
	width: 100%;
}

.brimich-loc-card-certs-wrap .brimich-loc-card-certs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.brimich-loc-card-certs-wrap .brimich-loc-card-cert {
	display: inline-block;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--zone-accent);
	background: var(--zone-accent-soft);
	border: 1px solid var(--zone-accent);
	padding: 4px 10px;
	border-radius: 100px;
}

/* ---- Click-to-call action ---- */
.brimich-loc-card-call-wrap {
	width: 100%;
	margin-top: 18px;
}

.brimich-loc-card-call-wrap .brimich-loc-card-call {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--zone-accent);
	text-decoration: none;
	padding: 9px 16px;
	border: 1.5px solid var(--zone-accent);
	border-radius: 3px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.brimich-loc-card-call-wrap .brimich-loc-card-call:hover,
.brimich-loc-card-call-wrap .brimich-loc-card-call:focus-visible {
	background: var(--zone-accent);
	color: #ffffff;
	outline: none;
}

.brimich-loc-card-call-wrap .brimich-loc-card-call-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---- Responsive: 3 across -> 2 across (tablet) -> 1 (mobile) ---- */
@media (max-width: 1023px) {
	.brimich-loc-facilities-grid {
		flex-wrap: wrap !important;
	}
	.brimich-loc-facilities-grid > .brimich-loc-card {
		width: 48% !important;
		flex-basis: 48% !important;
	}
}

@media (max-width: 640px) {
	.brimich-loc-facilities-grid > .brimich-loc-card {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

/* ============================================================
   3. COMING SOON (2 teaser cards, white bg)
   Deliberately different from facility cards -- dark, no specs.
   ============================================================ */

.brimich-loc-soon-row {
	width: 100%;
}

.brimich-loc-soon-card {
	position: relative;
	background: var(--brimich-blue-deep, #0a1929);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
				border-color 0.3s ease;
}

.brimich-loc-soon-card:hover {
	transform: translateY(-4px);
	border-color: rgba(126, 170, 77, 0.4);
}

/* Decorative diagonal hatch pattern in the background */
.brimich-loc-soon-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 60%;
	height: 100%;
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(255, 255, 255, 0.03) 0px,
		rgba(255, 255, 255, 0.03) 2px,
		transparent 2px,
		transparent 12px
	);
	pointer-events: none;
}

.brimich-loc-soon-card > * {
	position: relative;
	z-index: 1;
}

.brimich-loc-soon-badge-wrap {
	margin-bottom: 18px;
}

.brimich-loc-soon-badge-wrap .brimich-loc-soon-badge {
	display: inline-block;
	background: rgba(126, 170, 77, 0.15);
	color: var(--brimich-green-bright, #7eaa4d);
	font-family: "Glacial Indifference", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 6px 14px;
	border-radius: 100px;
	border: 1px solid rgba(126, 170, 77, 0.4);
}

.brimich-loc-soon-card .brimich-loc-soon-name .elementor-heading-title {
	color: #ffffff;
	font-family: "Poppins", sans-serif;
}

.brimich-loc-soon-card .brimich-loc-soon-blurb p {
	margin: 0;
}

@media (max-width: 767px) {
	.brimich-loc-soon-row {
		flex-direction: column !important;
	}
	.brimich-loc-soon-row > .brimich-loc-soon-card {
		width: 100% !important;
		flex-basis: 100% !important;
		margin-bottom: 20px;
	}
}

/* ============================================================
   4. REDUCED MOTION (locations-specific)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.brimich-loc-intro *,
	.brimich-loc-facilities *,
	.brimich-loc-soon * {
		transition-duration: 0.01ms !important;
	}
	.brimich-loc-card:hover,
	.brimich-loc-soon-card:hover {
		transform: none !important;
	}
	.brimich-loc-card:hover .brimich-loc-card-photo img {
		transform: none !important;
	}
}


/* ============================================================================
 * PART 8 -- CAREERS PAGE
 * ============================================================================
 * Reuses .brimich-interior-hero-* (PART 4), .brimich-about-cta-* (PART 4),
 * .brimich-button-* (PART 2). Careers-specific components namespaced
 * .brimich-car-*.
 * ============================================================================ */

/* ============================================================
   1. WHY BRIMICH (white bg, image + text + two-stat callout)
   ============================================================ */

.brimich-car-why-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 24px 60px rgba(10, 25, 41, 0.14);
}

.brimich-car-why-body p {
	margin: 0 0 16px 0;
}

.brimich-car-why-body p:last-child {
	margin-bottom: 0;
}

.brimich-car-why-stats-wrap .brimich-car-why-stats {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 22px 28px;
	background: linear-gradient(135deg, rgba(126, 170, 77, 0.08) 0%, rgba(126, 170, 77, 0) 100%);
	border-left: 3px solid var(--brimich-green-bright, #7eaa4d);
	border-radius: 0 4px 4px 0;
}

.brimich-car-why-stats-wrap .brimich-car-why-stat-num {
	font-family: "Poppins", sans-serif;
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -1.5px;
	color: var(--brimich-green, #5a8538);
}

.brimich-car-why-stats-wrap .brimich-car-why-stat-label {
	font-family: "Glacial Indifference", sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: var(--brimich-slate, #313131);
	opacity: 0.7;
	margin-top: 6px;
	line-height: 1.4;
	max-width: 120px;
}

.brimich-car-why-stats-wrap .brimich-car-why-stat-divider {
	width: 1px;
	align-self: stretch;
	background: rgba(49, 49, 49, 0.12);
}

@media (max-width: 1023px) {
	.brimich-car-why-row {
		flex-direction: column !important;
	}
	.brimich-car-why-col {
		width: 100% !important;
		flex-basis: 100% !important;
		padding-right: 0 !important;
	}
	.brimich-car-why-col-image {
		margin-bottom: 40px;
	}
}

@media (max-width: 480px) {
	.brimich-car-why-stats-wrap .brimich-car-why-stats {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.brimich-car-why-stats-wrap .brimich-car-why-stat-divider {
		width: 100%;
		height: 1px;
		align-self: auto;
	}
}

/* ============================================================
   2. VIDEO PLACEHOLDER (dark navy)
   Poster image with a play-button overlay. Swap for a real
   video embed later -- see README.
   ============================================================ */

.brimich-car-video-wrap {
	width: 100%;
}

.brimich-car-video-wrap .brimich-car-video-frame {
	position: relative;
	width: 100%;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.brimich-car-video-wrap .brimich-car-video-poster {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Overlay sits over the poster, centered play button + label */
.brimich-car-video-wrap .brimich-car-video-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: rgba(10, 25, 41, 0.45);
	transition: background-color 0.3s ease;
}

.brimich-car-video-wrap .brimich-car-video-frame:hover .brimich-car-video-overlay {
	background: rgba(10, 25, 41, 0.3);
}

.brimich-car-video-wrap .brimich-car-video-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--brimich-green-bright, #7eaa4d);
	color: var(--brimich-blue-deep, #0a1929);
	padding-left: 4px; /* optical centering of the play triangle */
	box-shadow: 0 10px 30px rgba(126, 170, 77, 0.4);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-car-video-wrap .brimich-car-video-frame:hover .brimich-car-video-play {
	transform: scale(1.08);
}

.brimich-car-video-wrap .brimich-car-video-label {
	font-family: "Glacial Indifference", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   3. OPEN POSITIONS (Indeed) -- cream bg
   The .brimich-car-positions-box frames whatever is inside:
   the default button OR a future embed snippet.
   ============================================================ */

.brimich-car-positions-box-wrap {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}

.brimich-car-positions-box-wrap .brimich-car-positions-box {
	background: var(--brimich-white, #ffffff);
	border: 1px solid rgba(140, 109, 68, 0.18);
	border-radius: 6px;
	box-shadow: 0 20px 50px rgba(10, 25, 41, 0.07);
	overflow: hidden;
}

.brimich-car-positions-box-wrap .brimich-car-positions-box-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 52px 40px;
}

.brimich-car-positions-box-wrap .brimich-car-positions-icon {
	color: var(--brimich-green, #5a8538);
	margin-bottom: 20px;
}

.brimich-car-positions-box-wrap .brimich-car-positions-box-title {
	margin: 0 0 10px 0;
	font-family: "Poppins", sans-serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.3px;
	color: var(--brimich-slate, #313131);
}

.brimich-car-positions-box-wrap .brimich-car-positions-box-text {
	margin: 0 0 28px 0;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(49, 49, 49, 0.7);
	max-width: 420px;
}

/* The button -- arrow-slide hover, matches the site button language */
.brimich-car-positions-box-wrap .brimich-car-positions-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.8px;
	color: #ffffff;
	background: var(--brimich-green, #5a8538);
	text-decoration: none;
	padding: 18px 38px;
	border-radius: 2px;
	transition: background-color 0.3s ease;
}

.brimich-car-positions-box-wrap .brimich-car-positions-btn:hover,
.brimich-car-positions-box-wrap .brimich-car-positions-btn:focus-visible {
	background: var(--brimich-green-bright, #7eaa4d);
	outline: none;
}

.brimich-car-positions-box-wrap .brimich-car-positions-btn-arrow {
	display: inline-block;
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-car-positions-box-wrap .brimich-car-positions-btn:hover .brimich-car-positions-btn-arrow,
.brimich-car-positions-box-wrap .brimich-car-positions-btn:focus-visible .brimich-car-positions-btn-arrow {
	transform: translateX(4px);
}

@media (max-width: 600px) {
	.brimich-car-positions-box-wrap .brimich-car-positions-box-inner {
		padding: 40px 24px;
	}
}

/* ============================================================
   4. AODA ACCESSIBILITY STATEMENT (white bg)
   Quiet, respectful card -- cream-tinted, green left accent.
   ============================================================ */

.brimich-car-aoda-card {
	width: 100%;
	background: var(--brimich-cream, #fffbf2);
	border: 1px solid rgba(140, 109, 68, 0.16);
	border-left: 3px solid var(--brimich-green-bright, #7eaa4d);
	border-radius: 0 4px 4px 0;
}

.brimich-car-aoda-card .brimich-car-aoda-heading .elementor-heading-title {
	color: var(--brimich-slate, #313131);
	font-family: "Poppins", sans-serif;
}

.brimich-car-aoda-card .brimich-car-aoda-body p {
	margin: 0 0 14px 0;
}

.brimich-car-aoda-card .brimich-car-aoda-body p:last-child {
	margin-bottom: 0;
}

.brimich-car-aoda-card .brimich-car-aoda-body a {
	color: var(--brimich-green, #5a8538);
	text-decoration: none;
	font-weight: 700;
	border-bottom: 1px solid rgba(90, 133, 56, 0.3);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.brimich-car-aoda-card .brimich-car-aoda-body a:hover,
.brimich-car-aoda-card .brimich-car-aoda-body a:focus-visible {
	color: var(--brimich-green-bright, #7eaa4d);
	border-bottom-color: var(--brimich-green-bright, #7eaa4d);
	outline: none;
}

/* ============================================================
   5. REDUCED MOTION (careers-specific)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.brimich-car-why *,
	.brimich-car-video *,
	.brimich-car-positions *,
	.brimich-car-aoda * {
		transition-duration: 0.01ms !important;
	}
	.brimich-car-video-frame:hover .brimich-car-video-play {
		transform: none !important;
	}
}


/* ============================================================================
 * PART 9 -- CONTACT US PAGE
 * ============================================================================
 * Reuses .brimich-interior-hero-* (PART 4), .brimich-about-cta-* (PART 4),
 * .brimich-about-eyebrow-* (PART 4). Contact-specific components namespaced
 * .brimich-con-*. Includes optional Gravity Forms styling to match the
 * Brimich design -- see the GRAVITY FORMS block at the end of this part.
 * ============================================================================ */

/* ============================================================
   1. FORM SECTION (2-column: info left, form right)
   ============================================================ */

.brimich-con-intro-heading .elementor-heading-title {
	color: var(--brimich-slate, #313131);
	font-family: "Poppins", sans-serif;
}

.brimich-con-intro-body p {
	margin: 0;
}

/* ---- Contact detail rows ---- */
.brimich-con-details {
	width: 100%;
}

.brimich-con-detail-row {
	width: 100%;
}

.brimich-con-detail-icon-wrap {
	width: 38px !important;
	min-width: 38px !important;
	height: 38px !important;
	flex: 0 0 38px !important;
	border-radius: 50%;
	background: rgba(90, 133, 56, 0.1);
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.brimich-con-detail-icon-wrap .brimich-con-detail-icon .elementor-icon i,
.brimich-con-detail-icon-wrap .brimich-con-detail-icon .elementor-icon svg {
	color: var(--brimich-green, #5a8538) !important;
	fill: var(--brimich-green, #5a8538) !important;
}

.brimich-con-detail-text {
	padding-top: 2px;
}

.brimich-con-detail-label .elementor-heading-title {
	color: rgba(49, 49, 49, 0.5);
	font-family: "Glacial Indifference", sans-serif;
	text-transform: uppercase;
	letter-spacing: 1.2px;
}

.brimich-con-detail-value-wrap .brimich-con-detail-value {
	font-family: "Glacial Indifference", sans-serif;
	font-size: 15.5px;
	color: var(--brimich-slate, #313131);
	line-height: 1.5;
}

.brimich-con-detail-value-wrap a.brimich-con-detail-value-link {
	text-decoration: none;
	transition: color 0.2s ease;
}

.brimich-con-detail-value-wrap a.brimich-con-detail-value-link:hover,
.brimich-con-detail-value-wrap a.brimich-con-detail-value-link:focus-visible {
	color: var(--brimich-green, #5a8538);
	outline: none;
}

/* ---- Form column ---- */
.brimich-con-col-form {
	background: var(--brimich-cream, #fffbf2);
	border: 1px solid rgba(140, 109, 68, 0.16);
	border-radius: 6px;
}

.brimich-con-form-label .elementor-heading-title {
	color: var(--brimich-slate, #313131);
	font-family: "Poppins", sans-serif;
}

.brimich-con-form-sub p {
	margin: 0;
}

/* ---- The shortcode placeholder slot ----
   Visible dashed box marking where the Gravity Forms shortcode goes.
   Once the real shortcode renders a form, this styling no longer
   applies (it targets .brimich-con-form-slot specifically). */
.brimich-con-form-slot-wrap .brimich-con-form-slot {
	border: 2px dashed rgba(140, 109, 68, 0.45);
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.6);
}

.brimich-con-form-slot-wrap .brimich-con-form-slot-inner {
	padding: 40px 32px;
	text-align: center;
}

.brimich-con-form-slot-wrap .brimich-con-form-slot-tag {
	display: inline-block;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--brimich-tan, #8c6d44);
	background: rgba(140, 109, 68, 0.12);
	padding: 5px 12px;
	border-radius: 100px;
	margin-bottom: 14px;
}

.brimich-con-form-slot-wrap .brimich-con-form-slot-text {
	margin: 0 0 14px 0;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 15px;
	color: rgba(49, 49, 49, 0.75);
}

.brimich-con-form-slot-wrap .brimich-con-form-slot-code {
	display: block;
	font-family: "Courier New", monospace;
	font-size: 13px;
	color: var(--brimich-blue, #013479);
	background: rgba(1, 52, 121, 0.06);
	padding: 12px 14px;
	border-radius: 4px;
	margin-bottom: 16px;
	word-break: break-word;
}

.brimich-con-form-slot-wrap .brimich-con-form-slot-hint {
	margin: 0;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 12.5px;
	line-height: 1.6;
	color: rgba(49, 49, 49, 0.5);
}

@media (max-width: 1023px) {
	.brimich-con-row {
		flex-direction: column !important;
	}
	.brimich-con-col {
		width: 100% !important;
		flex-basis: 100% !important;
		padding-right: 0 !important;
	}
}

/* ============================================================
   2. MAP SECTION (cream bg)
   ============================================================ */

.brimich-con-map-slot-wrap {
	width: 100%;
}

.brimich-con-map-slot-wrap .brimich-con-map-slot {
	width: 100%;
	border: 2px dashed rgba(10, 25, 41, 0.2);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.6);
	aspect-ratio: 21 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
}

.brimich-con-map-slot-wrap .brimich-con-map-slot-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: rgba(10, 25, 41, 0.4);
}

.brimich-con-map-slot-wrap .brimich-con-map-slot-tag {
	display: inline-block;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--brimich-blue, #013479);
	background: rgba(1, 52, 121, 0.08);
	padding: 5px 12px;
	border-radius: 100px;
	margin: 12px 0 8px;
}

.brimich-con-map-slot-wrap .brimich-con-map-slot-text {
	margin: 0;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 14px;
	color: rgba(49, 49, 49, 0.55);
}

@media (max-width: 640px) {
	.brimich-con-map-slot-wrap .brimich-con-map-slot {
		aspect-ratio: 4 / 3;
	}
}

/* ============================================================
   3. GRAVITY FORMS styling (optional)
   Scoped to .brimich-con-col-form so it only touches a Gravity
   Form placed inside the Contact form column. Makes the form
   match the Brimich design. Safe to ignore if styling the form
   in Gravity's own settings instead.
   ============================================================ */

.brimich-con-col-form .gform_wrapper .gfield_label {
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--brimich-slate, #313131);
	letter-spacing: 0.2px;
}

.brimich-con-col-form .gform_wrapper input[type="text"],
.brimich-con-col-form .gform_wrapper input[type="email"],
.brimich-con-col-form .gform_wrapper input[type="tel"],
.brimich-con-col-form .gform_wrapper select,
.brimich-con-col-form .gform_wrapper textarea {
	font-family: "Glacial Indifference", sans-serif;
	font-size: 15px;
	color: var(--brimich-slate, #313131);
	background: var(--brimich-white, #ffffff);
	border: 1px solid rgba(10, 25, 41, 0.18);
	border-radius: 3px;
	padding: 12px 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.brimich-con-col-form .gform_wrapper input[type="text"]:focus,
.brimich-con-col-form .gform_wrapper input[type="email"]:focus,
.brimich-con-col-form .gform_wrapper input[type="tel"]:focus,
.brimich-con-col-form .gform_wrapper select:focus,
.brimich-con-col-form .gform_wrapper textarea:focus {
	border-color: var(--brimich-green, #5a8538);
	box-shadow: 0 0 0 3px rgba(90, 133, 56, 0.12);
	outline: none;
}

.brimich-con-col-form .gform_wrapper .gform_footer input[type="submit"],
.brimich-con-col-form .gform_wrapper .gform_footer button {
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.8px;
	color: #ffffff;
	background: var(--brimich-green, #5a8538);
	border: 0;
	border-radius: 2px;
	padding: 16px 38px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.brimich-con-col-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.brimich-con-col-form .gform_wrapper .gform_footer button:hover {
	background: var(--brimich-green-bright, #7eaa4d);
}

.brimich-con-col-form .gform_wrapper .gfield_required {
	color: var(--brimich-green, #5a8538);
}

.brimich-con-col-form .gform_wrapper .validation_message {
	font-family: "Glacial Indifference", sans-serif;
	font-size: 13px;
}


/* ============================================================================
 * PART 10 -- NEWS PAGE
 * ============================================================================
 * Interior hero + a 2-across post-card grid. Cards are static placeholders
 * meant to be rebuilt as an Elementor Loop -- the .brimich-news-card-*
 * classes are generic so a Loop card template can reuse this exact CSS.
 * ============================================================================ */

.brimich-news-grid {
	width: 100%;
	row-gap: 0 !important;
}

/* ---- Post card ---- */
.brimich-news-card {
	background: var(--brimich-white, #ffffff);
	border: 1px solid rgba(10, 25, 41, 0.08);
	border-radius: 5px;
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
				box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-news-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 50px rgba(10, 25, 41, 0.12);
}

/* ---- Photo + category badge ---- */
.brimich-news-card-photo-wrap {
	position: relative;
	overflow: hidden;
}

.brimich-news-card-photo-wrap .brimich-news-card-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 20 / 13;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-news-card:hover .brimich-news-card-img img {
	transform: scale(1.05);
}

.brimich-news-card-badge-wrap {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
}

.brimich-news-card-badge-wrap .brimich-news-card-badge {
	display: inline-block;
	background: var(--brimich-blue-deep, #0a1929);
	color: #ffffff;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 3px;
}

/* ---- Card body ---- */
.brimich-news-card-meta-wrap .brimich-news-card-meta {
	margin-bottom: 12px;
}

.brimich-news-card-meta-wrap .brimich-news-card-date {
	font-family: "Glacial Indifference", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--brimich-green, #5a8538);
}

.brimich-news-card-title .elementor-heading-title {
	color: var(--brimich-slate, #313131);
	font-family: "Poppins", sans-serif;
	letter-spacing: -0.3px;
	transition: color 0.25s ease;
}

.brimich-news-card:hover .brimich-news-card-title .elementor-heading-title {
	color: var(--brimich-blue, #013479);
}

.brimich-news-card-excerpt p {
	margin: 0;
	font-family: "Glacial Indifference", sans-serif;
}

/* ---- Read-more link ---- */
.brimich-news-card-link-wrap .brimich-news-card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--brimich-green, #5a8538);
	text-decoration: none;
	transition: color 0.2s ease;
}

.brimich-news-card-link-wrap .brimich-news-card-link:hover,
.brimich-news-card-link-wrap .brimich-news-card-link:focus-visible {
	color: var(--brimich-green-bright, #7eaa4d);
	outline: none;
}

.brimich-news-card-link-wrap .brimich-news-card-link-arrow {
	display: inline-block;
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.brimich-news-card-link-wrap .brimich-news-card-link:hover .brimich-news-card-link-arrow,
.brimich-news-card-link-wrap .brimich-news-card-link:focus-visible .brimich-news-card-link-arrow {
	transform: translateX(4px);
}

/* ---- Placeholder note -- client deletes when rebuilding as a Loop ---- */
.brimich-news-placeholder-note-wrap {
	width: 100%;
	max-width: 720px;
	margin: 24px auto 0;
}

.brimich-news-placeholder-note-wrap .brimich-news-placeholder-note {
	margin: 0;
	text-align: center;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(49, 49, 49, 0.5);
	background: rgba(140, 109, 68, 0.07);
	border: 1px dashed rgba(140, 109, 68, 0.3);
	border-radius: 4px;
	padding: 14px 20px;
}

/* ---- Responsive: 2 across -> 1 (mobile) ---- */
@media (max-width: 767px) {
	.brimich-news-grid > .brimich-news-card {
		width: 100% !important;
		flex-basis: 100% !important;
		margin-bottom: 28px;
	}
}

/* ============================================================
   REDUCED MOTION (contact + news)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.brimich-con-form-section *,
	.brimich-con-map *,
	.brimich-news-section * {
		transition-duration: 0.01ms !important;
	}
	.brimich-news-card:hover {
		transform: none !important;
	}
	.brimich-news-card:hover .brimich-news-card-img img {
		transform: none !important;
	}
}


/* ============================================================================
 * PART 11 -- EB FACILITIES PLUGIN
 * ============================================================================
 * Styles for the frontend filter buttons and empty-state rendered by the
 * eb-facilities plugin's [brimich_facilities filterable="yes"] shortcode.
 * The facility cards themselves are styled by PART 7 (.brimich-loc-card-*)
 * since the plugin renders matching markup.
 * ============================================================================ */

.eb-facilities-wrap {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;       /* don't let parent flex shrink us */
	flex-basis: 100% !important;
	min-width: 0;                     /* but allow inner content to be narrower */
	box-sizing: border-box;
}

/* Defensive: Elementor wraps shortcode output in a div with class elementor-shortcode.
   If that div sits inside a flex container, it can collapse too.
   Force it to stay full-width.  */
/* The real fix for the filter-collapse bug.
   When the shortcode is filtered to fewer cards, Elementor's flex layout
   sizes the widget to intrinsic content width (because the widget has
   flex: 0 1 auto and the flex parent .e-con-inner sizes flex children
   by their content's minimum).
   We force any shortcode widget CONTAINING our plugin to claim full
   width, regardless of how many cards are currently visible.
   :has() scope means other shortcode widgets on the site are untouched. */
.elementor-widget-shortcode:has(.eb-facilities-wrap) {
	width: 100% !important;
	flex: 1 1 100% !important;
	flex-basis: 100% !important;
	max-width: 100% !important;
}

.elementor-widget-shortcode:has(.eb-facilities-wrap) .elementor-shortcode {
	width: 100%;
}

/* ============================================================
   0. SELF-SUFFICIENT GRID LAYOUT
   The plugin's grid must work whether the shortcode lives inside
   a plain page builder column, an Elementor flexbox container,
   or any other wrapper. So .eb-facilities-grid carries its own
   flex layout rules -- doesn't depend on the parent being a
   particular kind of container.

   This is also what caused the v1.0.0 -> v1.0.1 bug: when the
   shortcode was dropped inside an Elementor container that had
   .brimich-loc-facilities-grid as a CSS class, PART 7's
   `.brimich-loc-facilities-grid > .brimich-loc-card` rule
   matched the wrong element (it tried to size MY plain-div
   children but they weren't direct children of the Elementor
   container). Solution: plugin uses its own .eb-facilities-grid
   class with its own layout rules, and PART 7 still styles the
   inner card visuals via .brimich-loc-card.
   ============================================================ */

.eb-facilities-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 32px 2%;
	width: 100% !important;
	min-width: 100% !important;
	box-sizing: border-box;
	/* When filtered down to 1 card, justify-content:flex-start keeps
	   that single card on the left rather than centered/stretched. */
	justify-content: flex-start;
	align-content: flex-start;
}

/* Cards: 3 per row on desktop. The 2% gap + 32% width = 100%
   (3 cards + 2 gaps = 32 + 2 + 32 + 2 + 32 = 100). The PART 7
   .brimich-loc-card rule covers all the visual styling; we
   only set width/sizing here. */
.eb-facilities-grid > .brimich-loc-card {
	width: 32% !important;
	flex-basis: 32% !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	max-width: 32% !important;
	box-sizing: border-box;
	margin: 0 !important; /* gap on parent handles spacing */
}

/* Tablet: 2 across */
@media (max-width: 1023px) {
	.eb-facilities-grid {
		gap: 28px 3%;
	}
	.eb-facilities-grid > .brimich-loc-card {
		width: 48.5% !important;
		flex-basis: 48.5% !important;
		max-width: 48.5% !important;
	}
}

/* Mobile: 1 across */
@media (max-width: 640px) {
	.eb-facilities-grid {
		gap: 24px 0;
	}
	.eb-facilities-grid > .brimich-loc-card {
		width: 100% !important;
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}

/* Coming-soon row: same self-sufficient pattern (2 cards across) */
.eb-facilities-soon-row {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	width: 100%;
	box-sizing: border-box;
}

/* Coming-soon cards always span full width of their row.
   Reads better as a teaser banner per facility than 2-across compressed
   half-cards -- especially when there's only one coming-soon entry. */
.eb-facilities-soon-row > .brimich-loc-soon-card {
	width: 100% !important;
	flex-basis: 100% !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box;
	margin: 0 !important;
}

/* ============================================================
   1. Filter buttons (only render when filterable="yes")
   ============================================================ */

.eb-facilities-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0 auto 48px;
	max-width: 900px;
}

.eb-facilities-filter-btn {
	display: inline-flex;
	align-items: center;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--brimich-slate, #313131);
	background: var(--brimich-white, #ffffff);
	border: 1.5px solid rgba(10, 25, 41, 0.12);
	border-radius: 100px;
	padding: 10px 22px;
	cursor: pointer;
	transition: background-color 0.2s ease,
				color 0.2s ease,
				border-color 0.2s ease,
				transform 0.2s ease;
}

.eb-facilities-filter-btn:hover,
.eb-facilities-filter-btn:focus-visible {
	border-color: var(--brimich-green, #5a8538);
	color: var(--brimich-green, #5a8538);
	outline: none;
}

.eb-facilities-filter-btn.is-active {
	background: var(--brimich-blue-deep, #0a1929);
	border-color: var(--brimich-blue-deep, #0a1929);
	color: #ffffff;
}

.eb-facilities-filter-btn.is-active:hover,
.eb-facilities-filter-btn.is-active:focus-visible {
	background: var(--brimich-blue, #013479);
	border-color: var(--brimich-blue, #013479);
	color: #ffffff;
}

/* ============================================================
   2. Empty state
   Shown when a filter (server or client) matches zero facilities.
   ============================================================ */

.eb-facilities-empty-state {
	width: 100%;
	max-width: 560px;
	margin: 32px auto 0;
	text-align: center;
}

.eb-facilities-empty-state p {
	margin: 0;
	padding: 32px 24px;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 15px;
	color: rgba(49, 49, 49, 0.6);
	background: rgba(140, 109, 68, 0.06);
	border: 1px dashed rgba(140, 109, 68, 0.3);
	border-radius: 4px;
}

/* ============================================================
   3. Empty-photo fallback for facilities with no image
   ============================================================ */

.brimich-loc-card-photo-empty {
	display: block;
	width: 100%;
	aspect-ratio: 35 / 24;
	background:
		repeating-linear-gradient(
			-45deg,
			rgba(10, 25, 41, 0.05) 0px,
			rgba(10, 25, 41, 0.05) 2px,
			transparent 2px,
			transparent 14px
		),
		var(--zone-accent-soft, rgba(10, 25, 41, 0.06));
}

/* ============================================================
   4. Hidden attribute on cards (used by filter JS)
   ============================================================ */

.brimich-loc-card[hidden],
.eb-facilities-empty-state[hidden] {
	display: none !important;
}

/* ============================================================
   5. Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.eb-facilities-filter-btn {
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
   6. PLUGIN-RENDERED CARD INTERNALS
   The static Locations page rendered card content via Elementor
   widgets, which emitted wrapper divs like .elementor-widget-heading
   that PART 7's rules target. The plugin renders plain HTML
   (an h3 with class brimich-loc-card-name, etc.), so those PART 7
   rules don't match.

   These selectors are scoped to .eb-facilities-grid (and the
   coming-soon row) so they ONLY apply to plugin-rendered cards.
   The original Elementor-rendered cards on any other page keep
   their existing styling untouched.

   The body padding here is what the static cards had as Elementor
   container settings (24/26/26/26) -- not previously expressed as
   CSS because Elementor was setting it inline.
   ============================================================ */

/* Card body padding -- the main fix for "text runs to the edge" */
.eb-facilities-grid .brimich-loc-card-body {
	padding: 24px 26px 26px;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Heading: plain h3 tag, not wrapped in Elementor's .elementor-heading-title */
.eb-facilities-grid .brimich-loc-card-body .brimich-loc-card-name {
	margin: 0 0 4px 0;
	color: var(--brimich-slate, #313131);
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.3px;
}

/* City line */
.eb-facilities-grid .brimich-loc-card-body .brimich-loc-card-city {
	margin: 0 0 18px 0;
}

.eb-facilities-grid .brimich-loc-card-body .brimich-loc-card-city p {
	margin: 0;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: rgba(49, 49, 49, 0.6);
}

/* Photo wrapper -- the plugin renders an img tag direct, not via Elementor's
   image widget. PART 7's image selectors expected Elementor wrappers, so
   we need plain-img rules here. */
.eb-facilities-grid .brimich-loc-card-photo-wrap {
	position: relative;
	overflow: hidden;
	line-height: 0;
}

.eb-facilities-grid .brimich-loc-card-photo-wrap .brimich-loc-card-photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 35 / 24;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.eb-facilities-grid .brimich-loc-card:hover .brimich-loc-card-photo {
	transform: scale(1.05);
}

/* Coming-soon cards have similar plain-HTML rendering needs */
.eb-facilities-soon-row .brimich-loc-soon-card {
	padding: 44px 40px;
}

.eb-facilities-soon-row .brimich-loc-soon-card .brimich-loc-soon-name {
	margin: 0 0 10px 0;
	color: #ffffff;
	font-family: "Poppins", sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.3px;
}

.eb-facilities-soon-row .brimich-loc-soon-card .brimich-loc-soon-blurb p {
	margin: 0;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 640px) {
	.eb-facilities-grid .brimich-loc-card-body {
		padding: 22px 22px 24px;
	}
	.eb-facilities-soon-row .brimich-loc-soon-card {
		padding: 36px 28px;
	}
}

/* ============================================================
   7. v1.0.2 FIXES -- badge line-height, filter buttons, soon fallback
   ============================================================

   Badge fix:
     The .brimich-loc-card-photo-wrap rule sets line-height:0 to
     kill the inline-image whitespace gap, which is correct -- but
     that 0 cascades down to the badge span inside the wrap and
     squishes its text. Restore line-height on the badge directly.

   Filter button fix:
     Bumping specificity (.eb-facilities-wrap .eb-facilities-filter-btn)
     and explicitly resetting browser-default and theme-default
     button properties so the pill shape wins against whatever
     Hello Elementor (or any other theme) applies to buttons.
   ============================================================ */

/* --- Badge: restore text rhythm killed by photo-wrap line-height:0 --- */
.eb-facilities-grid .brimich-loc-card-badge-wrap,
.eb-facilities-grid .brimich-loc-card-badge {
	line-height: normal;
}

.eb-facilities-grid .brimich-loc-card-badge {
	line-height: 1.3;
}

/* --- Filter buttons: high-specificity pill styling --- */
.eb-facilities-wrap .eb-facilities-filter-btn {
	/* Reset everything browser/theme might inject on button elements */
	all: unset;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;

	/* Layout */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	/* Sizing -- this is the actual pill */
	padding: 9px 20px !important;
	min-height: 0 !important;
	height: auto !important;
	line-height: 1.3 !important;

	/* Typography */
	font-family: "Glacial Indifference", sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.8px !important;
	text-transform: uppercase !important;
	text-decoration: none !important;

	/* Colors */
	color: var(--brimich-slate, #313131) !important;
	background: var(--brimich-white, #ffffff) !important;
	background-color: var(--brimich-white, #ffffff) !important;

	/* Border + shape */
	border: 1.5px solid rgba(10, 25, 41, 0.12) !important;
	border-radius: 100px !important;
	box-shadow: none !important;

	/* Behavior */
	cursor: pointer !important;
	user-select: none !important;
	transition: background-color 0.2s ease, color 0.2s ease,
				border-color 0.2s ease !important;
}

.eb-facilities-wrap .eb-facilities-filter-btn:hover,
.eb-facilities-wrap .eb-facilities-filter-btn:focus-visible {
	border-color: var(--brimich-green, #5a8538) !important;
	color: var(--brimich-green, #5a8538) !important;
	background: var(--brimich-white, #ffffff) !important;
	background-color: var(--brimich-white, #ffffff) !important;
	outline: none !important;
}

.eb-facilities-wrap .eb-facilities-filter-btn.is-active {
	background: var(--brimich-blue-deep, #0a1929) !important;
	background-color: var(--brimich-blue-deep, #0a1929) !important;
	border-color: var(--brimich-blue-deep, #0a1929) !important;
	color: #ffffff !important;
}

.eb-facilities-wrap .eb-facilities-filter-btn.is-active:hover,
.eb-facilities-wrap .eb-facilities-filter-btn.is-active:focus-visible {
	background: var(--brimich-blue, #013479) !important;
	background-color: var(--brimich-blue, #013479) !important;
	border-color: var(--brimich-blue, #013479) !important;
	color: #ffffff !important;
}

/* --- Coming Soon fallback message (v1.0.2 shortcode addition) --- */
.eb-facilities-soon-empty {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
	box-sizing: border-box;
}

.eb-facilities-soon-empty p {
	margin: 0;
	padding: 36px 28px;
	font-family: "Glacial Indifference", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(49, 49, 49, 0.7);
	background: var(--brimich-cream, #fffbf2);
	border: 1px dashed rgba(140, 109, 68, 0.35);
	border-radius: 4px;
}


/* ============================================================================
 * PART 12 -- GRAVITY FORMS (Brimich Contact Form)
 * ============================================================================
 * Styles the Gravity Forms "Orbital" theme to match the Brimich design.
 *
 * Strategy: Orbital is built on CSS custom properties (--gf-color-primary,
 * --gf-ctrl-padding-x, etc.). The cleanest override is setting those vars
 * on the wrapper -- much less brittle than fighting individual properties.
 * A few property-level rules cover what variables don't control (label
 * font, layout polish, the form-slot wrapper neutralization).
 *
 * This block supersedes the older GF rules in PART 9 (which targeted only
 * a handful of input types and didn't account for Orbital).
 * ============================================================================ */

/* ============================================================
   1. Neutralize the placeholder form-slot styling
   When a real Gravity Form is present inside .brimich-con-form-slot,
   strip the dashed-box "FORM SLOT HERE" decoration. The placeholder
   styling was only meant for the empty state.
   ============================================================ */

.brimich-con-form-slot-wrap .brimich-con-form-slot:has(.gform_wrapper) {
	border: 0;
	background: transparent;
	border-radius: 0;
}

.brimich-con-form-slot-wrap .brimich-con-form-slot:has(.gform_wrapper) .brimich-con-form-slot-inner {
	padding: 0;
	text-align: left;
}

/* If any of the placeholder children somehow remain (tag, hint, code),
   hide them when a real form is present */
.brimich-con-form-slot:has(.gform_wrapper) .brimich-con-form-slot-tag,
.brimich-con-form-slot:has(.gform_wrapper) .brimich-con-form-slot-text,
.brimich-con-form-slot:has(.gform_wrapper) .brimich-con-form-slot-code,
.brimich-con-form-slot:has(.gform_wrapper) .brimich-con-form-slot-hint {
	display: none;
}

/* ============================================================
   2. Override Orbital CSS variables to use Brimich palette
   This is the workhorse -- swaps Orbital's blue defaults for the
   brand green and fixes the bizarre 0px vertical padding default
   that was making inputs look cramped.
   ============================================================ */

.brimich-con-col-form .gform_wrapper.gform-theme--orbital,
.brimich-con-col-form .gform_wrapper.gform-theme {
	/* Primary color: brand green (was Orbital's default blue) */
	--gf-color-primary: #5a8538;
	--gf-color-primary-rgb: 90, 133, 56;
	--gf-color-primary-contrast: #ffffff;
	--gf-color-primary-darker: #45691c;
	--gf-color-primary-lighter: #7eaa4d;

	/* Input chrome */
	--gf-color-in-ctrl: #ffffff;
	--gf-color-in-ctrl-darker: #f8f6f0;
	--gf-color-in-ctrl-light: rgba(10, 25, 41, 0.18);
	--gf-color-in-ctrl-lighter: #ffffff;
	--gf-color-in-ctrl-error: #b94a3a;

	/* Outer chrome / borders */
	--gf-color-out-ctrl-light: rgba(10, 25, 41, 0.18);
	--gf-color-out-ctrl-dark: #1f2937;

	/* Shape + spacing */
	--gf-radius: 3px;
	--gf-ctrl-radius: 3px;
	--gf-ctrl-border-width: 1px;
	--gf-ctrl-padding-x: 14px;
	--gf-ctrl-padding-y: 12px;  /* was 0 -- the main "wonky" culprit */

	/* Typography */
	--gf-font-size-secondary: 13px;
	--gf-line-height-base: 1.5;
}

/* ============================================================
   3. Property-level polish (things variables don't control well)
   ============================================================ */

/* Labels: brand font + sizing.
   Orbital's label color is fine but font family isn't variabilized. */
.brimich-con-col-form .gform_wrapper .gfield_label {
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: var(--brimich-slate, #1f2937);
	margin-bottom: 6px;
}

/* Required asterisk in green */
.brimich-con-col-form .gform_wrapper .gfield_required {
	color: var(--brimich-green, #5a8538);
}

/* Inputs / textareas / selects: brand body font + reliable padding.
   The variable override above handles colors/borders/radius -- this
   just ensures font-family and minimum height behave as expected. */
.brimich-con-col-form .gform_wrapper input[type="text"],
.brimich-con-col-form .gform_wrapper input[type="email"],
.brimich-con-col-form .gform_wrapper input[type="tel"],
.brimich-con-col-form .gform_wrapper input[type="url"],
.brimich-con-col-form .gform_wrapper input[type="number"],
.brimich-con-col-form .gform_wrapper select,
.brimich-con-col-form .gform_wrapper textarea {
	font-family: "Glacial Indifference", sans-serif !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--brimich-slate, #1f2937) !important;
	padding: 12px 14px !important;       /* belt-and-braces over the variable */
	min-height: 46px !important;          /* prevents cramped inputs from any residual line-height shenanigans */
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.brimich-con-col-form .gform_wrapper textarea {
	min-height: 140px !important;
	line-height: 1.55 !important;
	resize: vertical;
}

/* Focus ring: subtle green glow */
.brimich-con-col-form .gform_wrapper input:focus,
.brimich-con-col-form .gform_wrapper select:focus,
.brimich-con-col-form .gform_wrapper textarea:focus {
	border-color: var(--brimich-green, #5a8538) !important;
	box-shadow: 0 0 0 3px rgba(90, 133, 56, 0.14) !important;
	outline: none !important;
}

/* Placeholders -- soft brand grey */
.brimich-con-col-form .gform_wrapper input::placeholder,
.brimich-con-col-form .gform_wrapper textarea::placeholder {
	color: rgba(31, 41, 55, 0.4);
	opacity: 1;
}

/* ============================================================
   4. Submit button -- brand button styling
   Orbital wraps the submit input in .gform_footer with its own
   layout. Override to match the rest of the site's button language.
   ============================================================ */

.brimich-con-col-form .gform_wrapper .gform_footer {
	margin-top: 12px !important;
	padding-top: 0 !important;
	justify-content: flex-start;
}

.brimich-con-col-form .gform_wrapper .gform_footer input[type="submit"],
.brimich-con-col-form .gform_wrapper .gform_footer button[type="submit"] {
	font-family: "Poppins", sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.8px !important;
	text-transform: uppercase !important;
	color: #ffffff !important;
	background: var(--brimich-green, #5a8538) !important;
	border: 0 !important;
	border-radius: 2px !important;
	padding: 16px 38px !important;
	min-height: 0 !important;
	cursor: pointer !important;
	transition: background-color 0.3s ease, transform 0.2s ease !important;
	box-shadow: none !important;
}

.brimich-con-col-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.brimich-con-col-form .gform_wrapper .gform_footer button[type="submit"]:hover,
.brimich-con-col-form .gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.brimich-con-col-form .gform_wrapper .gform_footer button[type="submit"]:focus-visible {
	background: var(--brimich-green-bright, #7eaa4d) !important;
	outline: none !important;
}

/* ============================================================
   5. Field row layout (half-width name/company/email/phone)
   Orbital handles the half-width split via .gfield--width-half --
   we just want to ensure the gap is consistent and the row spacing
   between fields reads well in the column.
   ============================================================ */

.brimich-con-col-form .gform_wrapper .gform_fields {
	row-gap: 22px !important;
	column-gap: 18px !important;
}

/* Stack the half-width pairs on narrow column widths */
@media (max-width: 600px) {
	.brimich-con-col-form .gform_wrapper .gfield--width-half {
		grid-column: 1 / -1 !important;
	}
}

/* ============================================================
   6. Validation + error states
   ============================================================ */

.brimich-con-col-form .gform_wrapper .gfield_validation_message,
.brimich-con-col-form .gform_wrapper .validation_message {
	font-family: "Glacial Indifference", sans-serif !important;
	font-size: 13px !important;
	color: #b94a3a !important;
	background: transparent !important;
	border: 0 !important;
	padding: 4px 0 0 0 !important;
	margin-top: 4px;
}

.brimich-con-col-form .gform_wrapper .gfield_error input,
.brimich-con-col-form .gform_wrapper .gfield_error textarea,
.brimich-con-col-form .gform_wrapper .gfield_error select {
	border-color: #b94a3a !important;
	box-shadow: 0 0 0 3px rgba(185, 74, 58, 0.10) !important;
}

/* Top-of-form validation summary banner */
.brimich-con-col-form .gform_wrapper .gform_validation_errors {
	background: rgba(185, 74, 58, 0.08) !important;
	border: 1px solid rgba(185, 74, 58, 0.3) !important;
	border-radius: 4px !important;
	padding: 14px 18px !important;
	margin-bottom: 20px !important;
}

.brimich-con-col-form .gform_wrapper .gform_validation_errors h2 {
	font-family: "Poppins", sans-serif !important;
	font-size: 15px !important;
	color: #b94a3a !important;
	margin: 0 0 6px 0 !important;
}

/* Confirmation message after successful submit */
.brimich-con-col-form .gform_confirmation_message,
.brimich-con-col-form .gform_confirmation_wrapper {
	font-family: "Glacial Indifference", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--brimich-slate, #1f2937);
	background: rgba(90, 133, 56, 0.08);
	border: 1px solid rgba(90, 133, 56, 0.3);
	border-radius: 4px;
	padding: 20px 24px;
}

/* ============================================================
   7. Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.brimich-con-col-form .gform_wrapper input,
	.brimich-con-col-form .gform_wrapper textarea,
	.brimich-con-col-form .gform_wrapper select,
	.brimich-con-col-form .gform_wrapper button,
	.brimich-con-col-form .gform_wrapper input[type="submit"] {
		transition-duration: 0.01ms !important;
	}
}
/* ============================================================================
 * PART 13 -- CORPORATE SOCIAL RESPONSIBILITY (/brimich-csr/)
 * ============================================================================
 * Recreates the CSR page in the Brimich design. The intro reuses the shared
 * brimich-about-intro two-column layout, eyebrows use the shared
 * brimich-about-eyebrow markup, and the page reuses the about-cta closer.
 * New classes below are scoped with the brimich-csr- prefix.
 * ============================================================================ */

/* ---- Commitment attribution (sits under the reused about-intro body) ---- */
.brimich-csr-intro-attr p {
	margin: 0;
	font-weight: 600;
	font-style: italic;
	letter-spacing: 0.2px;
}

/* ---- Current ESG Focuses (3-up cards) ---- */
.brimich-csr-focus-row {
	width: 100%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
.brimich-csr-focus {
	background: var(--brimich-white, #ffffff);
	border: 1px solid var(--brimich-border, #e8e4d6);
	border-radius: 6px;
	box-shadow: var(--brimich-shadow-sm, 0 2px 8px rgba(1, 52, 121, 0.06));
	transition: transform 0.3s var(--brimich-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
		box-shadow 0.3s var(--brimich-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
	box-sizing: border-box;
}
.brimich-csr-focus:hover {
	transform: translateY(-4px);
	box-shadow: var(--brimich-shadow-md, 0 8px 24px rgba(1, 52, 121, 0.10));
}
.brimich-csr-focus-icon-circle {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--brimich-blue, #013479);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
.brimich-csr-focus-icon-circle .brimich-csr-focus-icon {
	display: inline-flex;
}
.brimich-csr-focus-icon-circle .brimich-csr-focus-icon svg,
.brimich-csr-focus-icon-circle .brimich-csr-focus-icon i {
	width: 28px;
	height: 28px;
	color: var(--brimich-white, #ffffff);
	fill: var(--brimich-white, #ffffff);
}
.brimich-csr-focus-title .elementor-heading-title {
	font-size: 20px;
}
.brimich-csr-focus-blurb p {
	margin: 0;
}

/* ---- Modern Slavery band ---- */
.brimich-csr-modern-slavery {
	background: var(--brimich-blue-deep, #0a1929);
}
.brimich-csr-ms-btn .elementor-button {
	background: var(--brimich-white, #ffffff);
	color: var(--brimich-blue, #013479);
}
.brimich-csr-ms-btn .elementor-button:hover {
	background: var(--brimich-green, #5a8538);
	color: var(--brimich-white, #ffffff);
}

/* ---- Full report (PDF + page gallery) ---- */
.brimich-csr-report-sub {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
.brimich-csr-report-dl-wrap {
	width: 100%;
}

/* Report pages as a compact gallery. Elementor wraps a boxed container's
   children in .e-con-inner, so the grid must sit on that inner element --
   not the outer container (otherwise .e-con-inner is the only grid item and
   every page stacks inside it). */
.brimich-csr-report-pages > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 22px !important;
	width: 100%;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	align-items: start;
}
.brimich-csr-report-pages .brimich-csr-report-page {
	width: 100%;
	margin: 0;
}
.brimich-csr-report-pages .brimich-csr-report-page img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--brimich-border, #e8e4d6);
	border-radius: 4px;
	box-shadow: var(--brimich-shadow-md, 0 8px 24px rgba(1, 52, 121, 0.10));
	background: var(--brimich-white, #ffffff);
	transition: transform 0.25s var(--brimich-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.brimich-csr-report-pages .brimich-csr-report-page img:hover {
	transform: translateY(-3px);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.brimich-csr-focus {
		width: 47% !important;
	}
	.brimich-csr-report-pages > .e-con-inner {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 767px) {
	.brimich-csr-focus-row {
		flex-direction: column !important;
	}
	.brimich-csr-focus {
		width: 100% !important;
	}
}
@media (max-width: 600px) {
	.brimich-csr-report-pages > .e-con-inner {
		grid-template-columns: 1fr !important;
		max-width: 440px;
	}
}