/* Contact page (#325) title band — optional right-hand image.
 *
 * The band (`be6fc6b`) is NOT an instance of the shared `.svc-hero` component used on
 * services/locations/industries/about/portfolio — it predates that component and is
 * bespoke to this one page. It DOES already lay its own direct children out as a row
 * (Elementor emits `--display:flex;--flex-direction:row` on it directly, not via a
 * `.svc-hero__inner` wrapper), and its one existing child (`4ab7e0c`, the H1 + lede
 * text) reserved the right half with `margin-right:50%` (38% tablet) — a placeholder
 * for an image that was never added, not a real second column. Percentage margin on a
 * flex item is resolved against the FLEX CONTAINER's width and doesn't share space with
 * a sibling the way a flex-basis does, so simply inserting a real column next to it
 * would not reliably land in that reserved half. `field_contact_hero_image` (see
 * acf-json/group_contact_hero.json) is bound to a new sibling container `cph0001`
 * (image widget `cph0002`), and 4ab7e0c's `margin`/`margin_tablet` right value was
 * changed from 50/38 to 0 directly in `_elementor_data` so this stylesheet's flex-basis
 * split is the only thing controlling the width — same 54/46 ratio `.svc-hero__text`/
 * `.svc-hero__media` uses everywhere else (service-sections.css), for visual consistency
 * even though this band doesn't share that component's CSS.
 *
 * Elementor's own rule for 4ab7e0c is `.elementor-element-4ab7e0c{...}` at (0,1,0) — the
 * doubled class below reaches (0,2,0), the same trick used in case-study.css, so this
 * beats it regardless of stylesheet load order.
 *
 * No image uploaded: `cph0001` still renders (an empty container, zero width content) so
 * 4ab7e0c is free to grow into the leftover space via its own flex-grow — the band looks
 * exactly as it does today, just without the SVG-overlay-only right side.
 */
.elementor-325 .elementor-element.elementor-element-4ab7e0c.elementor-element-4ab7e0c{
	flex:1 1 54%;
}
.elementor-325 .elementor-element.elementor-element-cph0001.elementor-element-cph0001{
	flex:1 1 46%;
	text-align:center;
}
.cp-hero__img img{
	width:420px;
	max-width:100%;
	height:auto;
	display:inline-block;
}

@media (max-width:767px){
	.elementor-325 .elementor-element.elementor-element-4ab7e0c.elementor-element-4ab7e0c,
	.elementor-325 .elementor-element.elementor-element-cph0001.elementor-element-cph0001{
		flex:1 1 100%;
	}
	.elementor-325 .elementor-element.elementor-element-cph0001.elementor-element-cph0001{
		order:-1;
		text-align:left;
		margin-bottom:20px;
	}
	.cp-hero__img img{max-width:280px;}
}

/* Hero content aligns to the header logo, not to a centred 1200px box.
 *
 * This band is `e-con-boxed`, so Elementor injects `.e-con-inner` and caps it at
 * `--content-width: min(100%, var(--container-max-width))` = 1200px, then centres it with
 * `margin:0 auto`. At 1920 that puts the H1 ~350px in from the logo, and the misalignment
 * grows with the window. Every `.svc-hero` page already solved this by releasing the cap
 * (service-sections.css, "Hero content aligns to the header" block) which measured to 3px
 * from the logo across all eight page types; this is the same fix for this one band.
 * Elementor's `.e-con>.e-con-inner` is (0,2,0), so this needs the extra class to win.
 */
.elementor-325 .elementor-element.elementor-element-be6fc6b > .e-con-inner{max-width:none;}

/* Breadcrumb + eyebrow, added above the H1 2026-08-28. Same treatment every other navy
 * `.svc-hero`-family hero uses for these two elements (service-sections.css __crumbs,
 * industry-page.css/location.css/about.css __eyebrow) — this band predates that shared
 * component (see file header) so it gets its own page-scoped copies of the same rules
 * rather than pulling in `.svc-hero`'s CSS wholesale.
 *
 * No `margin-bottom` on the crumbs on purpose. Measured over CDP on both pages: every widget
 * in this column computes `margin-bottom:0` — Elementor zeroes the Kit's
 * `.elementor-widget:not(:last-child){margin-block-end:20px}` inside a flex container — so
 * ALL the vertical spacing between these widgets is the column's 20px flex gap, and the
 * 18px `.svc-hero__crumbs` asks for is dead on the About hero too. The column therefore
 * carries no `flex_gap` setting, so it inherits the Kit's `--widgets-spacing` 20px exactly
 * as About's column does.
 *
 * Heebo, not Montserrat, for the eyebrow: `.ab-hero__eyebrow` is the reference here, and
 * `.loc-hero__eyebrow`/`.ind1-hero__eyebrow` use Montserrat instead. Same 13px/700/teal.
 */
.cp-hero__crumbs{font-size:14px;}
.cp-hero__crumbs,.cp-hero__crumbs a,.cp-hero__crumbs .elementor-breadcrumbs{color:rgba(255,255,255,.6);}
.cp-hero__crumbs a:hover{color:#0AA3D6;}
.cp-hero__eyebrow .elementor-heading-title{
	margin:0 0 12px;
	font-family:"Heebo",sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;
	text-transform:uppercase;color:#0AA3D6;
}
.cp-hero__eyebrow .elementor-heading-title:empty{display:none;}