/*
  The Name: Us Valve
  Author: 
  Support: 
  Description: Us Valve
  Version: 1.0
*/

/* ==================================================================
   CSS INDEX
   ------------------------------------------------------------------
   1.  Font Face Declarations
   2.  Font Utility Classes
   3.  Base / Global Styles
   4.  Lenis Smooth Scroll
   5.  Custom Scrollbar (OverlayScrollbars)
   6.  Animation Utilities
   7.  Parallax Image Utilities
   8.  Global Links
   9.  Background Utilities
   10. Container
   11. Z-Index Utilities
   12. Form Elements (inputs / textarea)
   13. Heading Styles (h1 - h6)
   14. Buttons
   15. Border Radius Utilities
   16. Header Section
        16.1 Header Top / Main Menu
        16.2 Header Offcanvas (mobile menu)
   17. Banner Section
   18. Value Props Section
   19. Metrics Ribbon Section
   20. Video Promo Section
   21. Industry Solutions Section
   22. Product Catalog Section
   23. Spec Quote Section
   24. Process Timeline Section
   25. Resource Banner Section
   26. Placement Section
   27. Footer Section
   28. header podcast
   29. featured-podcast-section
   30. podcast-modal-area
   31. Advantage Hero Section
   32. Advantage Video Section
   33. Advantage Details Section
   34. Advantage Pillars Section
   35. Advantage Markets + Next Step Overrides
   36. Custom Focus Section
   37. Custom Spotlight Section
   38. Custom Start Section
   39. Custom Contact Section
   40. Pillar (Advantage Detail) Sections
   41. Flexible Image Fit
   42. Heading Line Balance
   43. Primary Menu Dropdown (Valve Solutions mega panel)
   44. Get the Report Popup
   45. Champion Hero + Family Sections
   46. Champion Solutions / Product Rows
   47. Champion Why-Choose Grid
   48. Industry Split + Strip Sections
   ================================================================== */

/* ==================================================================
   1. FONT FACE DECLARATIONS
   Acumin Pro (regular / medium / bold) and acumin-pro-condensed
   (medium / regular / bold) self-hosted webfonts.
   ================================================================== */

/* ==================================================================
   2. FONT UTILITY CLASSES
   Quick helper classes to force a specific font-family on an element.
   ================================================================== */

.tk-acumin-pro {
	font-family: "acumin-pro", sans-serif;
}
.tk-acumin-pro-condensed {
	font-family: "acumin-pro-condensed", sans-serif;
}

/* ==================================================================
   3. BASE / GLOBAL STYLES
   Site-wide defaults for body copy and the main wrapper.
   ================================================================== */

body {
	font-size: 18px;
	line-height: 1.5;
	font-weight: 400;
	font-family: "acumin-pro", sans-serif;
	color: #000;
}
/* Body copy is 1.4 in the design (25.2px on 18px), not the 1.5 body default -
   the token diff found 62 paragraphs across 15 pages inheriting 27px. Scoped to
   p so 16px UI text keeps the 1.5 rhythm it was built to. */
p {
	line-height: 1.4;
}
/* overflow-x clip contains the skewed full-bleed decorations exactly
   like overflow hidden did, but does not create a scroll container -
   position: sticky (Champion solutions panel) needs that. */
main {
	overflow-x: clip;
}

/* ==================================================================
   4. LENIS SMOOTH SCROLL
   Required housekeeping styles for the Lenis smooth-scroll library.
   ================================================================== */

html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* ==================================================================
   5. CUSTOM SCROLLBAR (OverlayScrollbars)
   Brand-colored scrollbar handle, kept above all other content.
   ================================================================== */

.os-scrollbar-handle {
	background: #e31827;
}
body > .os-scrollbar {
	z-index: 999;
}

img {
	max-width: 100%;
	height: auto;
}

/* ==================================================================
   6. ANIMATION UTILITIES
   Wrapper used to clip elements that animate/reveal via GSAP.
   ================================================================== */

.animation-line {
	overflow: hidden;
}

/* ==================================================================
   7. PARALLAX IMAGE UTILITIES
   Trigger wrapper + oversized image used for scroll-based parallax.
   ================================================================== */

/* .trigger-parallax {
    overflow: hidden;
    position: relative;
}
.parallax-img {
    height: calc(100% + 120px);
    width: 100%;
    object-fit: cover;
    transform: translateY(0);
} */
/* ==================================================================
   8. GLOBAL LINKS
   ================================================================== */

a {
	text-decoration: none;
	color: #000;
}

a:hover {
	color: #000;
}

img {
	max-width: 100%;
	height: auto;
}

/* ==================================================================
   9. BACKGROUND UTILITIES
   ================================================================== */

.bg-fix {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* ==================================================================
   10. CONTAINER
   ================================================================== */

.container {
	max-width: 1460px;
	padding-left: 30px;
	padding-right: 30px;
}

/* ==================================================================
   11. Z-INDEX UTILITIES
   ================================================================== */

.z-4 {
	z-index: 4 !important;
}

/* ==================================================================
   12. FORM ELEMENTS (inputs / textarea)
   Shared styling for all text-like inputs and the textarea, plus
   their placeholder text and focus state.
   ================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
	width: 100%;
	padding: 12px;
	background: #fff;
	border: 1px solid #000;
	color: #dbdbdb;
	font-family: "acumin-pro", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	opacity: 1;
}
textarea {
	height: 116px;
}
input:focus,
textarea:focus {
	outline: none;
	box-shadow: none;
}
::placeholder {
	color: #dbdbdb;
	font-family: "acumin-pro", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

.animation-line p:last-child,
.mb-p p:last-child {
	margin-bottom: 0;
}

/* ==================================================================
   13. HEADING STYLES (h1 - h6)
   Fluid type scale using clamp() so headings scale smoothly between
   the min and max viewport widths.
   ================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.h4,
.h5,
.h6 {
	color: #134060;
	font-weight: 600;
	line-height: 1.05;
	font-family: "acumin-pro-condensed", sans-serif;
}

h1 {
	font-size: clamp(45px, 5vw, 56px);
}

h2 {
	font-size: clamp(40px, 4.5vw, 50px);
}

h3 {
	font-size: clamp(36px, 4vw, 40px);
}

/* h4 and centred h2 run at 1.15 in the design, not the 1.05 the shared heading
   rule sets - 51 instances across 12 and 14 pages respectively. The 1.05 is
   still correct for the other headings, so this is scoped rather than global. */
h4,
.h4 {
	font-size: clamp(30px, 3.5vw, 35px);
	line-height: 1.15;
}

h2 {
	line-height: 1.15;
}

h5,
.h5 {
	font-size: clamp(20px, 2.8vw, 24px);
}

h6,
.h6 {
	font-size: clamp(18px, 2.5vw, 20px);
}

/* ==================================================================
   14. BUTTONS
   Primary pill-shaped CTA button with an inverted hover state.
   ================================================================== */

.us-btn-1 {
	display: inline-block;
	color: #fff;
	font-family: "acumin-pro", sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 1.36px;
	text-transform: uppercase;
	border-radius: 100px;
	background: #e31827;
	padding: 11.3px 37px;
	border: 1px solid transparent;
	transition: all 0.3s linear;
}
.us-btn-1:hover {
	border-color: #e31827;
	background-color: #fff;
	color: #e31827;
}

/* ==================================================================
   15. BORDER RADIUS UTILITIES
   ================================================================== */

.b-radius-24 {
	border-radius: 24px;
}

/* ==================================================================
   16. HEADER SECTION
   Fixed header containing the logo, search, main navigation and the
   mobile offcanvas menu.
   ================================================================== */

/* ---- 16.1 Header top / main menu ---- */

.header-area {
	position: fixed;
	width: 100%;
	z-index: 999;
}
.header-area::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: -1;
	background: linear-gradient(180deg, #081a2d 0%, #010a14 100%);
	opacity: 0.87;
}
.header-area .container {
	max-width: 1460px;
}

.footer-logo:focus,
.header-logo:focus {
	outline: none;
}
.header-logo img {
	max-width: clamp(101px, 18vw, 163px);
}
.search-area .search-input {
	border-radius: 100px;
	border: 1px solid #c4c4c4;
	background: #000;
	padding: 4px clamp(10px, 4vw, 34px);
}
.search-icon {
	position: absolute;
	top: 50%;
	left: 2px;
	transform: translateY(-50%);
	margin-top: -2px;
	z-index: 1;
}
.main-menu-area {
	border-left: 1px solid #636363;
	margin-right: 25px;
}
.main-menu-area::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: calc(100% + 5000px);
	background: linear-gradient(180deg, #081a2d 0%, #06121f 100%);
	z-index: 1;
}
.footer-inner-menu ul,
.offcanvas-bottom-btn ul,
.mobile-menu,
.main-menu-wrapper ul,
.header-top-element-info ul {
	list-style: none;
	padding: 0;
	margin: 0;
	/* The info box flex-grows past its items (widest with the in-stock link
	   hidden) - keep the items packed against the right edge. */
	justify-content: flex-end;
}
.offcanvas-bottom-btn ul li {
	margin-bottom: 10px;
}
.offcanvas-bottom-btn ul li:last-child {
	margin-bottom: 0;
}
.main-menu-wrapper ul li,
.header-top-element-info ul li {
	display: inline-block;
}
.offcanvas-bottom-btn ul li a,
.header-top-element-info ul li a {
	display: inline-block;
	color: #dbdbdb;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(14px, 1.6vw, 16px);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: clamp(0.3px, 0.08vw, 0.8px);
	transition: all 0.3s linear;
}
.main-menu-wrapper ul li a {
	display: inline-block;
	color: #fff;
	font-family: "acumin-pro", sans-serif;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: clamp(0.4px, 0.1vw, 0.85px);
	transition: all 0.3s linear;
}

.main-menu-wrapper ul li {
	margin-right: clamp(10px, 4vw, 50px);
	padding: clamp(8px, 1.5vw, 10px) 0;
}

.main-menu-wrapper ul li:last-child {
	margin-right: 0;
}
.header-top-element-info ul li a:hover,
.main-menu-wrapper ul li a:hover {
	color: #e31827;
}
.header-top-element-info .us-btn-1 {
	border-radius: clamp(30px, 5vw, 45px);
	border: 1px solid #ffa2a4;
	background-color: #e31827;
	color: #fff;
	letter-spacing: clamp(0.8px, 0.2vw, 1.92px);
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.48);
	font-family: "acumin-pro-condensed";
	font-weight: 600;
	font-size: clamp(13px, 1.6vw, 16px);
	padding: clamp(4px, 1vw, 5.5px) clamp(14px, 2vw, 20px);
}

.header-top-element-info .us-btn-1:hover {
	background-color: #fff;
	color: #e31827;
}
.header-top-element-wrapper {
	gap: clamp(16px, 3vw, 30px);
}
.header-top-element-wrapper > div {
	flex: 1 0 auto;
}
.search-area {
	min-width: 324px;
}
.header-top-element-info > ul > li:first-child {
	padding: clamp(10px, 2vw, 18px) clamp(10px, 3vw, 20px);
}

.header-top-element-info > ul > li {
	padding: 0 clamp(10px, 3vw, 22px);
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;
}
.header-top-element-info > ul > li:last-child {
	padding: 0 clamp(10px, 3vw, 28px);
	padding-right: 0;
}
.header-top-element-info > ul > li::before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 1px;
	background-color: #636363;
}
.header-top-element-info ul {
	display: flex;
}
.header-top-element-info > ul > li:last-child:before {
	display: none;
}
.header-top-element::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	background: #636363;
	height: 1px;
	width: calc(100% + 5000px);
	z-index: 1;
}
.header-bottom-element,
.header-top-element {
	padding-left: clamp(10px, 5vw, 66px);
}

.header-fix {
	width: 100%;
	height: 107.5px;
}

/* ---- 16.2 Header offcanvas (mobile menu) ---- */

#offcanvasRight.offcanvas {
	background: -webkit-gradient(
		linear,
		left bottom,
		left top,
		from(#4e4e53),
		to(#37373b)
	);
	background: -o-linear-gradient(bottom, #4e4e53 0%, #37373b 100%);
	background: linear-gradient(0deg, #4e4e53 0%, #37373b 100%);
}
#offcanvasRight .offcanvas-header {
	padding: 20px;
	margin-bottom: 23px;
}
#offcanvasRight .offcanvas-body {
	padding: 0px 20px 52px;
}
.mobile-nav {
	padding: 37px 0;
}

.humbarger-btn {
	border: 0;
	height: 43px;
	width: 43px;
	background: #ffffff;
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
	position: relative;
}

.humbarger-btn span {
	display: block;
	background-color: #e31827;
	height: 4px;
	width: 27px;
	position: absolute;
	top: 25px;
	transition:
		background-color ease 0.3s,
		top ease 0.3s 0.3s,
		transform ease 0.3s,
		-webkit-transform ease 0.3s;
	left: 50%;
	-webkit-transform: translate(-50%, -1.5px);
	-ms-transform: translate(-50%, -1.5px);
	transform: translate(-50%, -1.5px);
}

.humbarger-btn span:nth-child(1) {
	top: 13px;
}

.humbarger-btn span:nth-child(2) {
	top: 21px;
}
.humbarger-btn span:nth-child(3) {
	top: auto;
	bottom: 10px;
}
.offcanvas-translate-div {
	gap: 40px;
}
.header-offcanvas .btn-close {
	--bs-btn-close-bg: none;
	--bs-btn-close-opacity: 1;
	--bs-btn-close-hover-opacity: 1;
	border: 0;
	border-radius: 0;
	height: 43px;
	width: 43px;
	gap: 0px;
	-webkit-transition:
		top ease 0.3s,
		-webkit-transform ease 0.3s 0.3s;
	-o-transition:
		top ease 0.3s,
		transform ease 0.3s 0.3s;
	transition:
		background-color ease 0.3s,
		top ease 0.3s,
		transform ease 0.3s 0.3s,
		-webkit-transform ease 0.3s 0.3s;
	background-color: #fff;
}
.header-offcanvas .btn-close:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
}
.offcanvas-product-filter .btn-close,
.header-offcanvas .btn-close {
	padding: 0;
	margin: 0;
}

#productFilterOffcanvas .offcanvas-product-filter {
	background-color: rgba(255, 255, 255, 0.97);
}
#productFilterOffcanvas .accordion-item {
	background-color: transparent;
}
.header-offcanvas .btn-close span {
	background-color: #e31827;
	height: 5px;
	width: 27px;
	-webkit-transition:
		top ease 0.3s,
		-webkit-transform ease 0.3s 0.3s;
	-o-transition:
		top ease 0.3s,
		transform ease 0.3s 0.3s;
	transition:
		top ease 0.3s,
		transform ease 0.3s 0.3s,
		-webkit-transform ease 0.3s 0.3s;
}

.mobile-nav > ul > li {
	padding-bottom: 15px;
}

.mobile-nav ul > li > a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 20px;
}
.has-sub-item > a.active,
.has-sub-item:hover > a,
.mobile-nav ul > li > a.active,
.mobile-nav ul > li:hover > a {
	color: #e31827;
}

/* The list-style reset only names the top-level .mobile-menu, so nested
   submenus fall back to the browser's default bullet. */
.mobile-nav ul li .sub-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding-top: 5px;
	padding-left: 16px;
	padding-bottom: 2px;
}

.mobile-nav > ul > li .sub-menu li {
	padding-bottom: 0;
}
.mobile-nav > ul > li:last-child {
	padding-bottom: 0;
}

.mobile-nav .sub-menu li a {
	line-height: 1.7;
	font-size: 15px;
	color: #d4d4d4;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.mobile-nav .sub-menu li a:hover {
	color: #e31827;
}

.mobile-nav ul > li > a svg {
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-transform-origin: center;
	-ms-transform-origin: center;
	transform-origin: center;
}
.has-sub-item > a svg path,
.mobile-nav ul > li > a svg path {
	fill: #fff;
}
.has-sub-item > a svg,
.mobile-nav ul > li > a svg {
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
.has-sub-item > a.rotate svg,
.mobile-nav ul > li > a.rotate svg {
	-webkit-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	transform: rotate(-180deg);
}
.has-sub-item:hover a svg path,
.has-sub-item > a.rotate svg path,
.mobile-nav ul > li > a.rotate svg path {
	fill: #e31827;
}

.offcanvas-bottom-btn .btn-1 {
	padding: 9.5px 35px;
}

.page-template-template-capabilities-php
	.our-approach-area.version-2
	.corporate-responsibility-caption,
.header-offcanvas .search-area {
	max-width: 100%;
}
.header-offcanvas .search-area input[type="text"] {
	padding: 10px;
	padding-left: 42px;
	background: transparent;
	font-size: 14px;
}
.offcanvas-header-info {
	z-index: 2;
	background: #e31827;
	-webkit-clip-path: polygon(
		100% 0,
		100% 100%,
		calc(50% + 74px) 100%,
		calc(50% + 23px) calc(100% - 45px),
		0 calc(100% - 45px),
		0 0
	);
	clip-path: polygon(
		100% 0,
		100% 100%,
		calc(50% + 74px) 100%,
		calc(50% + 23px) calc(100% - 45px),
		0 calc(100% - 45px),
		0 0
	);
}
.offcanvas-header-info::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 3;
	-webkit-clip-path: polygon(
		100% 0,
		100% calc(100% - 5px),
		calc(50% + 78px) calc(100% - 5px),
		calc(50% + 28px) calc(100% - 50px),
		0 calc(100% - 50px),
		0 0
	);
	clip-path: polygon(
		100% 0,
		100% calc(100% - 5px),
		calc(50% + 78px) calc(100% - 5px),
		calc(50% + 28px) calc(100% - 50px),
		0 calc(100% - 50px),
		0 0
	);
	background: -webkit-gradient(
		linear,
		left bottom,
		left top,
		from(#4e4e53),
		to(#37373b)
	);
	background: -o-linear-gradient(bottom, #4e4e53 0%, #37373b 100%);
	background: linear-gradient(0deg, #4e4e53 0%, #37373b 100%);
}
.offcanvas-button-wrapper .btn-2 {
	margin-bottom: 15px;
	padding: 7px 20px;
	border: 1px solid #94c949;
}
.offcanvas-button-wrapper .btn-2.version-2.transparent-version {
	text-transform: none;
	color: #fff;
}
.social-div-box {
	margin-top: 35px;
}
.main-menu-wrapper > .main-menu li.beverage-menu-items > .sub-menu .sub-menu {
	display: block;
}
.main-menu-wrapper
	> .main-menu
	li.beverage-menu-items
	> .sub-menu
	li
	> .sub-menu
	> li {
	margin-right: 0;
	display: block;
}
.main-menu-wrapper > .main-menu li.beverage-menu-items > .sub-menu {
	width: 414px;
}

/* ==================================================================
   17. BANNER SECTION
   Full-width hero with background video, skewed content panel and
   decorative diagonal lines.
   ================================================================== */

.video-item {
	display: block;
	object-fit: cover;
	z-index: -1;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}
.us-banner-area {
	padding: clamp(150px, 30vw, 326px) 0 36px;
}
.us-banner-area .container {
	max-width: 1420px;
}
.us-banner-content h1 {
	font-size: clamp(40px, 5vw, 50px);
}

.us-banner-content p {
	color: #f4f4f4;
	line-height: 1.4;
}
.us-banner-content {
	max-width: 588px;
	padding: 40px 0 38px;
}
.us-banner-content::before {
	content: "";
	position: absolute;
	left: -50%;
	top: 0;
	height: 100%;
	width: calc(100% + 5000px);
	background: rgba(35, 35, 35, 0.86);
	z-index: -1;
	transform: translateX(-50%) skewX(-27.7deg);
	margin-left: -1849px;
}
.us-banner-content-line {
	position: absolute;
	top: -8px;
	left: 0;
	height: 8px;
	width: calc(100% + 150px);
	background: #e31827;
	transform: skewX(-26deg);
	z-index: 1;
}
.us-banner-content .us-btn-1 {
	margin-top: 9px;
}
.line {
	position: absolute;
	bottom: 0;
	right: 50%;
	display: inline-block;
	width: calc(100% + 5000px);
	height: 58.141px;
	background: transparent;
	border: 1.5px solid transparent;
	border-image: linear-gradient(to right, #c9c9c9 0%, #636363 100%) 1;
	transform: skewX(-26deg);
}
.line-one {
	bottom: 68px;
	transform: translateX(105.5%) skewX(-26deg);
}
.line-two {
	bottom: 0px;
	transform: translateX(107.9%) skewX(-26deg);
}
.line-three {
	bottom: -69px;
	transform: translateX(110.7%) skewX(-26deg);
}

/* ==================================================================
   18. VALUE PROPS SECTION
   ================================================================== */

.value-props-area {
	padding: clamp(36px, 6vw, 58px) 0 clamp(16px, 3vw, 21px);
}
.value-props-area .container > .row {
	--bs-gutter-x: clamp(24px, 3vw, 53px);
}
.value-props-content-wrapper .row {
	--bs-gutter-x: clamp(20px, 4vw, 38px);
	--bs-gutter-y: 21px;
}
.value-props-title-wrapper p {
	font-size: 20px;
	line-height: 1.4;
}
.value-props-title-wrapper {
	max-width: 505px;
}
.value-props-content h5,
.value-props-content .h5 {
	color: #e03643;
	line-height: 1.2;
	text-transform: uppercase;
}
.value-props-content-inner {
	padding-left: clamp(12px, 3vw, 29px);
}

/* ==================================================================
   19. METRICS RIBBON SECTION
   Dark banner with key stats/verified badges over a brand-blue bg.
   ================================================================== */

.metrics-ribbon-area {
	background: #134060;
	padding: clamp(24px, 5vw, 40px) 0;
}
.metrics-ribbon-area .row {
	--bs-gutter-x: clamp(24px, 4vw, 56px);
}

.metrics-ribbon-title {
	padding-bottom: 10px;
}
.metrics-ribbon-title::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: #e31827;
}

.metrics-ribbon-item span {
	color: #fff;
	font-family: "acumin-pro-condensed";
	font-size: 21px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.63px;
}
.metrics-ribbon-item .mark-text {
	color: #ff4450;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0.84px;
}
.verified-item {
	color: #fff;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.78px;
	padding-left: clamp(10px, 1vw, 16px);
	display: inline-block;
}
.verified-item:nth-child(4),
.verified-item:first-child {
	padding-left: 0;
}
.verified-item::after,
.verified-item:nth-child(4)::before,
.verified-item:first-child::before {
	display: none;
}
.metrics-ribbon-title {
	font-size: 24px;
}
.verified-item::after,
.verified-item::before {
	content: "";
	position: absolute;
	/* Center the dot in the WHOLE inter-item space (8px flex gap + the
	   item's left padding) - at left:0 it hugged the previous word with all
	   the air after it (agency pre-launch note). */
	left: calc((clamp(10px, 1vw, 16px) - 8px) / 2 - 2px);
	top: 50%;
	height: 4px;
	width: 4px;
	background: #e31827;
	transform: translateY(-50%);
	margin-top: 2px;
}

/* Clickable card media/title keep the card's designed look (agency note). */
.product-catalog-card-media-link {
	color: inherit;
}
.product-catalog-card-title-link {
	color: inherit;
	text-decoration: none;
}
.product-catalog-card-title-link:hover {
	color: #e31827;
}

.metrices-shape {
	position: absolute;
	top: 50%;
	left: 0;
	max-width: 96px;
	transform: translateY(-50%);
	opacity: 0.15;
	mix-blend-mode: multiply;
	z-index: 1;
}
.metrices-shape.metrices-shape-2 {
	left: auto;
	right: 0;
}

/* ==================================================================
   20. VIDEO PROMO SECTION
   Inline promo video with a circular play button overlay.
   ================================================================== */

.video-promo-section {
	padding: clamp(24px, 5vw, 42px) 0;
}

.video-btn.us-btn-1 {
	padding: 11.3px 61px 11.3px 36px;
}
.video-icon {
	height: 56px;
	width: 56px;
	border: 3px solid #e03643;
	border-radius: 100%;
	background-color: #134060;
	position: absolute;
	top: 50%;
	right: -14px;
	transform: translateY(-50%);
}
.video-icon svg {
	margin-right: -5px;
}
.video-promo-title {
	max-width: 566px;
}
.video-promo-wrapper {
	max-width: 798px;
}
.video-promo-wrapper::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(
		116deg,
		rgba(33, 75, 177, 0) 54.76%,
		rgba(19, 64, 96, 0.6) 95.13%
	);
	z-index: 1;
}
.video-promo-wrapper video {
	height: 275px;
	width: 100%;
	object-fit: cover;
	display: block;
}

/* ==================================================================
   21. INDUSTRY SOLUTIONS SECTION
   Hover-reveal cards: image zooms and description text/height
   expands on hover via CSS transitions.
   ================================================================== */

.industry-solutions-area {
	background: linear-gradient(180deg, #134060 2.14%, #141428 100%);
	padding: 74px 0 156px;
}
.industry-solutions-area .section-title-wrapper {
	max-width: 950px;
	margin-bottom: 50px;
}
.view-btn {
	display: inline-block;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 1.28px;
	text-transform: uppercase;
	text-align: center;
	transition: all 0.3s linear;
}

.industry-solutions-card .view-btn {
	border-bottom: 1px solid #e31827;
	position: absolute;
	bottom: 33px;
	right: 27px;
	z-index: 1;
	max-width: 103px;
}
.view-btn:hover {
	color: #fff;
}
.industry-solutions-card-wrapper .row {
	--bs-gutter-x: clamp(16px, 3vw, 33px);
	--bs-gutter-y: clamp(26px, 3vw, 33px);
}

.industry-solutions-card {
	box-shadow: 0 0 35.1px 0 rgba(0, 0, 0, 0.72) inset;
	filter: drop-shadow(0 0 39px rgba(255, 255, 255, 0.1));
}
.industry-solutions-card-content {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 13px 160px 20px 20px;
	height: 100px;
	transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.industry-solutions-card-content::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	opacity: 0.9;
	background: rgba(46, 46, 46, 0.9);
	mix-blend-mode: multiply;
	z-index: 1;
}
.industry-solutions-card-content h6,
.industry-solutions-card-content .h6 {
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.2;
	margin: 12px 0;
	transition:
		margin 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.industry-solutions-card-content p {
	color: #dedede;
	line-height: 1.4;
	font-size: 16px;
	opacity: 0;
	transform: translateY(25px);
	transition:
		opacity 0.45s ease 0.12s,
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
	pointer-events: none;
}
.industry-solutions-card img {
	width: 100%;
	height: 100%;
	min-height: 252px;
	object-fit: cover;
	display: block;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.industry-solutions-card:hover img {
	transform: scale(1.08);
}
.industry-solutions-card:hover .industry-solutions-card-content p {
	opacity: 1;
	transform: translateY(0);
}
.industry-solutions-card:hover .industry-solutions-card-content h6,
.industry-solutions-card:hover .industry-solutions-card-content .h6 {
	margin: 0;
	transform: translateY(-4px);
}
.industry-solutions-card:hover .industry-solutions-card-content {
	height: 192px;
}
.industry-shape-02,
.industry-shape-01 {
	position: absolute;
	top: 42px;
	right: 88px;
	max-width: 485px;
	opacity: 0.18;
}
.industry-shape-02 {
	max-width: 733px;
	top: auto;
	bottom: 47px;
	right: auto;
	left: 26px;
}

/* ==================================================================
   22. PRODUCT CATALOG SECTION
   Skewed red section title ("stripe") treatment plus product cards
   with a soft drop-shadow that lifts on hover.
   ================================================================== */

.product-catalog-section {
	margin-top: -71px;
	padding-bottom: 66px;
}
.product-catalog-section .container {
	max-width: 1428px;
}
.product-catalog-section::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 140px;
	width: 100%;
	background: linear-gradient(180deg, #fff 0%, #e0e0e0 100%);
	z-index: -1;
}
.section-title {
	max-width: 660px;
	padding: 20px 50px 13px;
}
.section-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: #e31827;
	z-index: -1;
	transform: skewX(-26deg);
}
.stripe-item {
	display: inline-block;
	position: absolute;
	top: 0;
	height: 100%;
	width: 85px;
	background: #e31827;
	transform: skewX(-26deg) translateX(-50%);
	left: 50%;
}
.title-stripe-wrapper.left-side .stripe-item {
	margin-left: -371px;
}
.title-stripe-wrapper.left-side .stripe-item.stripe-one {
	margin-left: -493px;
}
.title-stripe-wrapper.left-side .stripe-item.stripe-two {
	margin-left: -442px;
}
.title-stripe-wrapper.right-side .stripe-item:nth-child(1),
.title-stripe-wrapper.left-side .stripe-item:nth-child(1) {
	width: 45px;
	opacity: 1;
}
.title-stripe-wrapper.right-side .stripe-item:nth-child(2),
.title-stripe-wrapper.left-side .stripe-item:nth-child(2) {
	width: 60px;
	opacity: 1;
}
.title-stripe-wrapper.right-side .stripe-item:nth-child(3),
.title-stripe-wrapper.left-side .stripe-item:nth-child(3) {
	opacity: 1;
}
.title-stripe-wrapper.right-side .stripe-item {
	left: auto;
	right: 50%;
	margin-right: -456px;
}
.title-stripe-wrapper.right-side .stripe-item:nth-child(1) {
	margin-right: -538px;
}
.title-stripe-wrapper.right-side .stripe-item:nth-child(2) {
	margin-right: -502px;
}
.edge-outline .line {
	width: calc(100% + 5000px);
	top: 50%;
	transform: translateY(-50%) skewX(-26deg);
	height: 90px;
}
.edge-outline .edge-outline-line-1 {
	left: 92%;
}
.edge-outline .edge-outline-line-2 {
	left: auto;
	right: 92%;
	border-image: linear-gradient(to left, #c9c9c9 0%, #636363 100%) 1;
}
.product-catalog-card-img-info {
	min-height: clamp(180px, 35vw, 300px);
}

.product-catalog-card-img-wrapper img {
	transition: all 0.3s ease;
}
.product-img-shadow {
	height: 38px;
	width: 206px;
	background: rgba(0, 0, 0, 0.09);
	mix-blend-mode: multiply;
	filter: blur(11px);
	transition: all 0.3s ease;
}
.product-img-shadow-2 {
	width: 90px;
	height: 16px;
	fill: rgba(0, 0, 0, 0.18);
	filter: blur(15px);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.product-catalog-card-wrapper {
	margin-top: 48px;
}
.product-catalog-card:hover .product-img-shadow-2 {
	background: rgba(0, 0, 0, 0.1);
}
.product-catalog-card:hover .product-img-shadow-1 {
	background: rgba(0, 0, 0, 0.06);
}
.product-catalog-card:hover .product-catalog-card-img-wrapper img {
	transform: translateY(-20px);
}
.product-catalog-card-content {
	margin-top: 12px;
}
.product-catalog-card-content h5,
.product-catalog-card-content .h5 {
	color: #4e4e53;
	font-size: 33px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1.32px;
	min-height: 66px;
}
.process-timeline-content p,
.product-catalog-card-content p {
	color: #3c3c3c;
	line-height: 1.4;
}
.product-catalog-card-content p {
	margin-bottom: 20px;
}
.product-catalog-card-content .us-btn-1 {
	padding: 11.3px 24px;
}
.sticky-title {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 10;
	opacity: 0.04;
	pointer-events: none;
	transform: translateY(-50%);
	max-width: clamp(70px, 12vw, 125px);
}

/* ==================================================================
   23. SPEC QUOTE SECTION
   ================================================================== */

.spec-quote-section {
	padding-top: 67px;
}
.spec-quote-content {
	max-width: 513px;
}
.spec-quote-section .row {
	--bs-gutter-x: clamp(32px, 8vw, 126px);
}
.spec-quote-line {
	display: inline-block;
	background: #e31827;
	width: 134px;
	height: 4px;
	position: absolute;
	bottom: 29px;
	left: 118px;
	z-index: 1;
}
.spec-quote-line:nth-child(1) {
	left: auto;
	bottom: auto;
	right: 131px;
	top: 35px;
}

/* ==================================================================
   24. PROCESS TIMELINE SECTION
   Numbered step markers connected by a horizontal brand-red line.
   ================================================================== */

.process-timeline-section {
	padding: 33px 0 78px;
}
.process-timeline-step-marker {
	height: 40px;
	width: 40px;
	background: #fff;
	border: 1px solid transparent;
	background-image:
		linear-gradient(#fff, #fff),
		linear-gradient(to bottom, transparent 45%, #e31827 55%);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}
.process-timeline-step-marker .process-timeline-step-marker-inner {
	background: #134060;
	height: 26px;
	width: 26px;
	color: #fff;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}
.process-timeline-step-marker .process-timeline-step-marker-inner span {
	transform: translateY(-2px);
}
.process-timeline-content {
	margin-top: 22px;
}
.process-timeline-content h5,
.process-timeline-content .h5 {
	color: #e03643;
}
.process-timeline-step::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	height: 1px;
	width: calc(100% + 24px);
	background: #e31827;
	transform: translateY(-50%);
	z-index: -1;
}
.process-timeline-step-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-top: 36px;
}
.process-timeline-title-wrapper h3 {
	color: #134060;
	font-size: 43px;
	line-height: 1;
}
.process-timeline-section .col-lg-3:last-child .process-timeline-step-marker {
	margin-right: auto;
	margin-left: auto;
}
.process-timeline-section .col-lg-3:last-child .process-timeline-step::before {
	width: 50%;
}
.process-timeline-title-wrapper {
	margin-top: 40px;
}

/* ==================================================================
   25. RESOURCE BANNER SECTION
   ================================================================== */

.resource-banner-area {
	background: #134060;
	padding: 30px 0;
}
.resource-banner-area .row {
	--bs-gutter-x: clamp(24px, 6vw, 82px);
}

.resource-banner-content {
	max-width: 700px;
}
.resource-banner-content h5,
.resource-banner-content .h5 {
	text-transform: uppercase;   /* frame: the benchmark banner title is UPPER */
}
/* Interior Application Spotlight variant (Power Generation frame): the
   content cluster sits deeper in the band than the homepage benchmark
   banner - 119px left inset, 727px measure, 55px text-to-button gap
   (design x: title/desc 269, button 1051 on the 1700 frame), and a 24px
   white breather separates it from the navy section above (1600 -> 1624). */
.resource-banner-area--spotlight {
	margin-top: 24px;
}
.resource-banner-area--spotlight .resource-banner-content p {
	font-size: 18px;
	line-height: 1.4;
}
@media (min-width: 992px) {
	.resource-banner-area--spotlight .resource-banner-content {
		margin-left: clamp(40px, 7vw, 119px);
		max-width: 727px;
	}
	.resource-banner-area--spotlight .row {
		--bs-gutter-x: clamp(24px, 3.8vw, 55px);
	}
}

/* ==================================================================
   26. PLACEMENT SECTION
   Location search field plus a 3-column card grid with vertical
   divider rules and skewed decorative background lines.
   ================================================================== */

.placement-area {
	padding-top: 50px;
}
.placement-search-area input[type="search"] {
	border-radius: 100px;
	border: 1px solid #b8b8b8;
	background: #f4f4f4;
	padding: 9px 48px 9px 40px;
	display: block;
	width: 100%;
	color: #505050;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
}
.placement-search-area ::placeholder {
	color: #505050;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
}
.location-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 16px;
}
.placement-search-area .placement-search-icon {
	height: 42px;
	width: 42px;
	background: #e31827;
	border-radius: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: auto;
	right: 5px;
	border: 0;
}
.placement-search-icon svg {
	margin-right: -2px;
}
.placement-search-area {
	max-width: 261px;
	margin-right: auto;
	margin-left: auto;
}
.placement-card {
	border-right: 2px solid #e31827;
	padding: clamp(24px, 4vw, 50px) clamp(20px, 4vw, 58px)
		clamp(24px, 4vw, 70px);
	height: 100%;
}

.placement-card p {
	color: #134060;
	line-height: 1.2;
}
.placement-area .container {
	max-width: 1518px;
}
.placement-card-wrapper .col-lg-4:last-child .placement-card {
	border-right: 0;
}
.placement-card-wrapper .col-lg-4:last-child .placement-card::before {
	display: none;
}
.placement-card p {
	color: #134060;
	line-height: 1.2;
	min-height: 66px;
}
.placement-card::before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 53px;
	height: 2px;
	background: #e03643;
	transform: translateX(50%);
}
.placement-area .section-title-wrapper {
	max-width: 825px;
	margin-bottom: 44px;
}
.placement-line {
	background: linear-gradient(
		90deg,
		rgba(19, 64, 96, 0.2) 0%,
		rgba(19, 64, 96, 0.1) 100%
	);
	display: inline-block;
	height: 18px;
	width: calc(100% + 5000px);
	position: absolute;
	opacity: 1;
	bottom: 19px;
}
.placement-line-wrapper.left-side .placement-line {
	left: 50%;
	transform: translateX(-50%) skewX(26deg);
	margin-left: -3936px;
}
.placement-line-wrapper.right-side .placement-line:nth-child(2),
.placement-line-wrapper.left-side .placement-line:nth-child(2) {
	bottom: 56px;
}
.placement-line-wrapper.left-side .placement-line:nth-child(2) {
	margin-left: -3962px;
}
.placement-line-wrapper.right-side .placement-line:nth-child(3),
.placement-line-wrapper.left-side .placement-line:nth-child(3) {
	bottom: 93px;
}
.placement-line-wrapper.left-side .placement-line:nth-child(3) {
	margin-left: -3988px;
}
.placement-line-wrapper.right-side .placement-line {
	right: 50%;
	transform: translateX(50%) skewX(-26deg);
	margin-right: -3936px;
	background: linear-gradient(
		90deg,
		rgba(19, 64, 96, 0.1) 0%,
		rgba(19, 64, 96, 0.2) 100%
	);
}
.placement-line-wrapper.right-side .placement-line:nth-child(2) {
	margin-right: -3962px;
}
.placement-line-wrapper.right-side .placement-line:nth-child(3) {
	margin-right: -3988px;
}

/* ==================================================================
   27. FOOTER SECTION
   Dark footer with logo, menu columns, contact info and the
   copyright bar.
   ================================================================== */

.footer-area {
	background: linear-gradient(180deg, #081a2d 0%, #010a14 100%);
	border-top: 4px solid #e03643;
	padding: 50px 0 10px;
}
.footer-logo img {
	max-width: clamp(148px, 20vw, 203px);
}
.footer-shape-2,
.footer-shape {
	position: absolute;
	top: 0;
	z-index: -1;
	width: 100%;
	right: -256px;
	min-height: 44px;
}
.footer-shape-2 {
	right: -65px;
	max-width: 256px;
	min-height: auto;
}
.footer-title {
	color: #ff2737;   /* the footer's own brighter red per the frame - deliberate token, not #e31827 */
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 1.6px;
	padding-bottom: 12px;
	margin-bottom: 10px;
}
.footer-title::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: #1b6ea8;
}
.footer-item h6,
.footer-item .h6 {
	color: #2ca7ff;
	font-family: "acumin-pro", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
}
.footer-item p {
	color: #fff;
	font-size: 14px;
	font-style: italic;
}
.footer-item address a {
	color: #fbfdff;
	font-weight: 275;
}
.footer-item a {
	color: #fbfdff;
	font-weight: 600;
	display: block;
	transition: all 0.3s ease;
}
.footer-item a:hover {
	color: #e31827;
}
.contact-link {
	text-decoration: underline;
}
.footer-item {
	margin-bottom: 22px;
	max-width: 255px;
}
.footer-item:last-child {
	margin-bottom: 0;
}
.footer-inner-menu ul li a {
	color: #fff;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
}
.other-link-wrapper a,
.social-link,
.footer-inner-menu ul li a {
	transition: all 0.3s linear;
}
.social-link:hover {
	opacity: 0.7;
}
.other-link-wrapper a:hover,
.footer-inner-menu ul li a:hover {
	color: #e31827;
}
.footer-inner-menu-wrapper {
	gap: clamp(32px, 6vw, 100px);
}

.footer-top-area {
	margin-top: 42px;
	margin-bottom: 50px;
}
.footer-top-area .row {
	--bs-gutter-x: 47px;
	--bs-gutter-y: 35px;
}
.footer-menu-area {
	min-width: 255px;
}
.footer-top-area .col:nth-child(1) .footer-menu-area {
	min-width: 429px;
}
.footer-inner-menu ul li {
	margin-bottom: 12px;
}
.footer-inner-menu ul li:last-child {
	margin-bottom: 0;
}
.other-link-wrapper a,
.copy-right-text {
	color: #5d76a1;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 1.12px;
}
/* END OF MAIN.CSS */

/* es-MX */
html[lang="es-MX"] .main-menu-wrapper ul li {
	margin-right: clamp(10px, 4vw, 40px);
}
/* es-MX */
html[lang="es-MX"] .header-top-element-info > ul > li {
	padding: clamp(10px, 2vw, 18px) clamp(10px, 3vw, 10px);
}
html[lang="es-MX"] .header-bottom-element,
.header-top-element {
	padding-left: clamp(10px, 5vw, 40px);
}

/* es-MX */

/* header podcast start */
.header-podcast {
	background: linear-gradient(180deg, #081a2d 0%, #010a14 100%);
	padding: 20px 0;
}
/* header podcast end */

/* featured-podcast-section start */
.featured-podcast-section {
	background-color: #0d1e35;
}
.featured-podcast-section::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(180deg, #134060 2.14%, #141428 100%);
	z-index: 1;
}
.featured-podcast-bg {
	z-index: 2;
}
.featured-podcast-section .container {
	max-width: 1304px;
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	padding-left: calc(var(--bs-gutter-x) * 0.5);
}
.featured-podcast-sub-title {
	font-size: clamp(14px, 2.5vw, 16px);
	letter-spacing: clamp(0.8px, 0.2vw, 1.28px);
}
.featured-podcast-content-inner h1 {
	color: #e31827;
	font-size: clamp(36px, 8vw, 64px);
	line-height: 1.05;
}
.featured-podcast-content-inner p {
	color: #fff;
	font-size: clamp(22px, 5vw, 32px);
}
.podcast-author-info h6 {
	font-size: clamp(18px, 3.5vw, 21px);
	line-height: 1.2;
}
.podcast-author-info p {
	color: #dbdbdb;
	font-size: clamp(14px, 2.5vw, 16px);
	line-height: 1.4;
}
.featured-podcast-content-inner::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #e31827;
	z-index: 1;
}
.featured-podcast-content-inner {
	padding-bottom: clamp(15px, 5vw, 30px);
	margin-bottom: clamp(15px, 5vw, 23px);
}
.podcast-author-info .video-btn.us-btn-1 {
	margin-top: clamp(10px, 2.5vw, 15px);
}
.featured-podcast-content {
	padding: clamp(32px, 6vw, 50px) clamp(20px, 7vw, 80px)
		clamp(32px, 6vw, 50px) clamp(20px, 7vw, 80px);
}
.featured-podcast-img-wrapper {
	max-width: clamp(320px, 55vw, 642px);
}
.podcast-author-info .video-btn.us-btn-1 {
	padding: clamp(8px, 2vw, 11.3px) clamp(50px, 6vw, 61px)
		clamp(8px, 2vw, 11.3px) clamp(20px, 4vw, 36px);
	font-size: clamp(14px, 2.8vw, 17px);
}

/* featured-podcast-section end */

/* consultation-form-section start */
.consultation-form-section {
	padding: clamp(64px, 10vw, 100px) 0;
}
.consultation-form-section .container {
	max-width: 860px;
}
.consultation-intro-text p {
	color: #827872;
}
.contact-info label {
	color: #0a1628;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	display: block;
	margin-bottom: 8px;
}
.contact-info label span {
	display: inline-block;
	color: #e31827;
	font-size: 11px;
	font-weight: 400;
	transform: translate(2px, 2px);
}
.consultation-form-area .row {
	--bs-gutter-x: 16px;
}
.consultation-form-area input[type="text"],
.consultation-form-area input[type="email"],
.consultation-form-area input[type="tel"],
.consultation-form-area input[type="number"],
.consultation-form-area input[type="password"],
.consultation-form-area input[type="url"],
.consultation-form-area textarea {
	color: #0a1628;
	border-radius: 24px;
	border: 1px solid #d0d4db;
	background: #f5f6f8;
	padding: clamp(10px, 2vw, 13px) clamp(14px, 3vw, 18px);
	display: block;
}
.consultation-form-area textarea {
	border-radius: 8px;
	height: 120px;
}
.nice-select {
	background-color: #f5f6f8;
	border-radius: 24px;
	border: 1px solid #d0d4db;
	height: 48.6px;
	line-height: 48.6px;
	padding-right: 40px;
}
.nice-select:after {
	display: none;
}
.nice-select:before {
	content: "";
	display: block;
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	width: 10px;
	height: 7px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="7" viewBox="0 0 10 7" fill="none"><path d="M1 1L5 5L9 1" stroke="%230A1628" stroke-width="2" stroke-linecap="round"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.2s ease-in-out;
}
.nice-select.open:before {
	transform: translateY(-50%) rotate(180deg);
}
.consultation-form-area .us-btn-1 {
	margin-top: clamp(16px, 4vw, 24px);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1.12px;
}
.modal-header h6,
.consultation-form-box h6 {
	font-size: clamp(18px, 3.5vw, 22px);
}
.consultation-form-box {
	border-radius: 8px;
	box-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.25);
	background: #fff;
}
.consultation-form-area {
	padding: clamp(20px, 5vw, 32px);
}
.consultation-form-box h6 {
	font-size: clamp(18px, 3.5vw, 22px);
	background: #0a1628;
	padding: clamp(16px, 3vw, 20px);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
.consultation-intro-text {
	margin-bottom: clamp(24px, 5vw, 40px);
}

/* consultation-form-section end */

/* podcast-modal-area start */
.modal-header {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	border-bottom: 0;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	background-color: #0a1628;
	padding: clamp(16px, 4vw, 20px);
}
.modal-header .btn-close {
	padding: 0;
	margin: 0;
	box-shadow: none;
}
.modal-header .btn-close {
	--bs-btn-close-opacity: 1;
	width: auto;
	height: auto;
}
.modal {
	--bs-modal-width: 600px;
	--bs-modal-padding: 0;
	--bs-modal-border-radius: 8px;
	box-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.25);
}
.modal-content {
	border: 0;
	border-radius: 10px 10px 8px 8px;
}
/* podcast-modal-area end */

/* footer podcast section start */
.footer-podcast {
	border-top: 4px solid #e03643;
	background: linear-gradient(180deg, #081a2d 0%, #010a14 100%);
}
.footer-intro-text p {
	color: #fff;
	font-size: clamp(16px, 4vw, 24px);
	font-weight: 300;
}
.footer-podcast-top {
	padding: clamp(30px, 7vw, 42px) 0;
}
.footer-podcast .container {
	max-width: 1212px;
}
/* Footer bottom links (Privacy Policy / Designed by Mighty 8th) are
   underlined globally, on both the main and podcast footers. */
.other-link-wrapper a {
	text-decoration: underline;
}
.other-link-wrapper a:hover {
	text-decoration: none;
}
.footer-bottom-area {
	padding-bottom: 9px;
}
/* footer podcast section end */

/* ==================================================================
   31. ADVANTAGE HERO SECTION
   Interior page hero: photo background with dark overlay, eyebrow,
   uppercase headline, copy and CTA buttons. Reuses the banner
   .line-wrapper diagonal decorations.
   ================================================================== */

/* Design heroes are a consistent 599px tall at the 1700 frame width;
   sizing purely to content left them 27-52px short and shifted every
   following section up the page. */
.advantage-hero-area {
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	padding: clamp(170px, 17vw, 283px) 0 clamp(40px, 4vw, 44px);
	min-height: clamp(420px, 35.24vw, 599px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.advantage-hero-area::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	/* Softened per agency pre-launch review: the old stack (0.34 flat + 0.55
	   left + 0.46 bottom) crushed heroes to ~2/3 darker than the approved
	   contact hero. This lands them at contact's level while the left
	   gradient keeps the H1 side readable. */
	background:
		linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(102, 102, 102, 0) 55%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0%, rgba(102, 102, 102, 0) 55%),
		rgba(0, 0, 0, 0.12);
	z-index: 1;
}
/* Heroes whose background export already bakes the design's dark
   treatment (the About pages' mask-group renders) skip the CSS
   overlay - stacking both double-darkens vs Figma. */
.advantage-hero-area.hero-baked::before {
	background: none;
}
.advantage-hero-area .container {
	max-width: 1420px;
}
.advantage-hero-eyebrow {
	color: #c6c6c6;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(18px, 2vw, 23px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0.69px;
	margin-bottom: 4px;
}
.advantage-hero-content h1 {
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.15;
}
.advantage-hero-content p {
	color: #fff;
	font-size: 20px;
	line-height: 1.27;
	max-width: 696px;
}
.advantage-hero-buttons {
	margin-top: 45px;
}
.advantage-hero-area .line-wrapper .line-one {
	bottom: 154px;
}
.advantage-hero-area .line-wrapper .line-two {
	bottom: 86px;
}
.advantage-hero-area .line-wrapper .line-three {
	bottom: 18px;
}

/* ==================================================================
   32. ADVANTAGE VIDEO SECTION
   Video promo variant: rounded video thumb with centered play
   button on the left, title/copy/CTA on the right.
   ================================================================== */

.advantage-video-section {
	padding: clamp(40px, 5vw, 59px) 0;
}
.advantage-video-section .row {
	--bs-gutter-x: clamp(24px, 4vw, 37px);
}
.advantage-video-wrapper {
	max-width: 679px;
	box-shadow: 0 0 44px 0 rgba(0, 0, 0, 0.23) inset;
}
.advantage-video-wrapper > img {
	width: 100%;
	height: clamp(240px, 24vw, 313px);
	object-fit: cover;
	display: block;
}
.advantage-video-wrapper::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.31);
	mix-blend-mode: multiply;
	z-index: 1;
}
.advantage-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: clamp(90px, 9vw, 126px);
	width: clamp(90px, 9vw, 126px);
	border: 4px solid #e03643;
	background-color: rgba(19, 64, 96, 0.85);
	z-index: 2;
	transition: all 0.3s linear;
}
.advantage-video-play:hover {
	background-color: #e31827;
}
.advantage-video-play svg {
	margin-right: -6px;
}
.advantage-video-title {
	max-width: 684px;
}
.advantage-video-description {
	margin-bottom: 24px;
}
.advantage-video-description p {
	line-height: 1.4;
}
.advantage-video-description p:last-child {
	margin-bottom: 0;
}
.advantage-video-title h2 {
	margin-bottom: 16px;
}

/* ==================================================================
   33. ADVANTAGE DETAILS SECTION
   Full-bleed photo band with dark overlay and white heading/copy.
   ================================================================== */

/* The details background export ships with its overlay treatment baked
   into the image itself (matches Figma exactly) - no CSS overlay here. */
.advantage-details-area {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #181818;
	padding: clamp(50px, 6vw, 93px) 0;
}
.advantage-details-content {
	max-width: 684px;
}
.advantage-details-content p,
.advantage-details-description {
	color: #fff;
	line-height: 1.4;
}
.advantage-details-description p {
	color: #fff;
}
.advantage-details-description p:last-child {
	margin-bottom: 0;
}

/* ==================================================================
   34. ADVANTAGE PILLARS SECTION
   Intro row (title/copy + product collage) followed by the numbered
   process-timeline markers with per-pillar CTA buttons.
   ================================================================== */

.advantage-pillars-section {
	padding: clamp(50px, 8vw, 146px) 0 clamp(40px, 5vw, 76px);
}
.advantage-pillars-title-wrapper {
	max-width: 635px;
}
.advantage-pillars-title-wrapper h2 {
	margin-bottom: 12px;
}
.advantage-pillars-img-wrapper {
	width: fit-content;
	margin-left: auto;
}
.advantage-pillars-img-wrapper img {
	max-width: 759px;
	width: 100%;
	display: block;
}
.advantage-pillars-img-wrapper::before,
.advantage-pillars-img-wrapper::after {
	content: "";
	position: absolute;
	height: 4px;
	width: 133.5px;
	background: #e31827;
	z-index: 1;
}
.advantage-pillars-img-wrapper::before {
	top: 35px;
	left: 65%;
}
.advantage-pillars-img-wrapper::after {
	bottom: 25px;
	left: 15.5%;
}
.advantage-pillars-timeline {
	margin-top: clamp(30px, 4vw, 53px);
	padding: 0;
}
/* All four markers are left-aligned steps (unlike the homepage timeline,
   whose last column is a centered CTA card). */
.advantage-pillars-timeline .col-lg-3:last-child .process-timeline-step-marker {
	margin-left: 0;
	margin-right: auto;
}
.advantage-pillars-timeline .col-lg-3:last-child .process-timeline-step::before {
	width: 100%;
}
.advantage-pillars-timeline .process-timeline-content p {
	color: #3c3c3c;
	line-height: 1.5;
}
/* Equal-height pillar columns with bottom-aligned CTAs so the four
   View Details buttons sit on one line regardless of copy length. */
.advantage-pillars-timeline .row > [class*="col-"] {
	display: flex;
}
.advantage-pillars-timeline .process-timeline-item {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.advantage-pillars-timeline .process-timeline-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.advantage-pillars-button {
	margin-top: auto;
	padding-top: 20px;
}

/* ==================================================================
   35. ADVANTAGE MARKETS + NEXT STEP OVERRIDES
   Markets We Serve reuses the industry-solutions section; Next Step
   reuses the placement section as a two-column variant.
   ================================================================== */

.advantage-markets-area {
	padding: clamp(50px, 6vw, 74px) 0 clamp(60px, 7vw, 98px);
}
.advantage-markets-area .section-title-wrapper p {
	font-size: clamp(20px, 2.5vw, 32px);
	line-height: 1.4;
}
.advantage-next-area {
	padding-top: clamp(36px, 4vw, 50px);
}
.advantage-next-area .section-title-wrapper p {
	font-size: 20px;
}
.advantage-next-area .placement-card-wrapper .col-lg-5:last-child .placement-card {
	border-right: 0;
}
.advantage-next-area .placement-card-wrapper .col-lg-5:last-child .placement-card::before {
	display: none;
}
.advantage-next-area .placement-card p {
	max-width: 362px;
	margin-left: auto;
	margin-right: auto;
}

/* ==================================================================
   36. CUSTOM FOCUS SECTION
   CAD image left, title/copy right with four red-titled items along
   a continuous vertical red rule.
   ================================================================== */

.custom-focus-section {
	padding: clamp(40px, 5vw, 59px) 0;
}
.custom-focus-section .row {
	--bs-gutter-x: clamp(24px, 3vw, 38px);
}
.custom-focus-img-wrapper img {
	max-width: 678px;
	width: 100%;
	display: block;
}
.custom-focus-content {
	max-width: 684px;
}
.custom-focus-content > p {
	margin-bottom: 24px;
}
.custom-focus-items {
	padding-left: clamp(20px, 3vw, 34px);
}
/* Design uses the site's light-gray tapered marker here, not a solid
   red bar (re-QA decoration inventory, Aug 2026). */
.custom-focus-items::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 8px;
	background: #e0e0e0;
	clip-path: polygon(0 0, 100% 3.8%, 100% 52.1%, 46% 54.2%, 46% 100%, 0 100%);
}
.custom-focus-item h5 {
	color: #e31827;
	line-height: 1.2;
}
.custom-focus-item p {
	color: #3c3c3c;
}
.custom-focus-item + .custom-focus-item {
	margin-top: 20px;
}
.custom-focus-item p:last-child {
	margin-bottom: 0;
}

/* ==================================================================
   37. CUSTOM SPOTLIGHT SECTION
   Navy gradient band: centered intro, market spotlight copy + stat
   left, video (poster + play) right with overlapping product photo
   and decorative ring line-art.
   ================================================================== */

/* overflow-x clip keeps the ring decoration from causing horizontal
   scroll while letting the overlapping product photo hang below the
   band into the next section, as designed. */
.custom-spotlight-section {
	background: linear-gradient(180deg, #134060 2.14%, #141428 100%);
	padding: clamp(50px, 6vw, 90px) 0 clamp(60px, 6vw, 84px);
	overflow-x: clip;
}
.custom-spotlight-rings {
	position: absolute;
	left: 38%;
	top: 90px;
	max-width: 766px;
	pointer-events: none;
}
.custom-spotlight-section .section-title-wrapper {
	max-width: 1080px;
	margin-bottom: clamp(30px, 4vw, 58px);
}
.custom-spotlight-content {
	max-width: 684px;
}
.custom-spotlight-content h3 {
	font-size: clamp(36px, 4vw, 50px);
	margin-bottom: 10px;
}
.custom-spotlight-stat {
	color: #76c1ff;
	font-size: clamp(20px, 2.2vw, 25px);
	font-weight: 300;
	line-height: 1.4;
	margin-bottom: 16px;
}
.custom-spotlight-stat u,
.custom-spotlight-stat strong {
	color: #bee2ff;
	font-weight: 600;
}
.custom-spotlight-stat p:last-child {
	margin-bottom: 0;
}
.custom-spotlight-content > p {
	color: #fff;
}
.custom-spotlight-buttons {
	margin-top: 30px;
}
.custom-spotlight-video > img {
	width: 100%;
	height: clamp(260px, 27vw, 367px);
	object-fit: cover;
	display: block;
}
/* The spotlight poster has no dark multiply overlay in the design -
   that treatment belongs to the Advantage video variant only. */
.custom-spotlight-video::before {
	display: none;
}
.custom-spotlight-overlap {
	position: absolute;
	left: -102px;
	top: 194px;
	width: 298px;
	z-index: 4;
}

/* ==================================================================
   38. CUSTOM START SECTION
   Photo left, title/copy right with three numbered steps and CTA.
   ================================================================== */

.custom-start-section {
	padding: clamp(40px, 5vw, 59px) 0 clamp(50px, 6vw, 66px);
}
.custom-start-section .row {
	--bs-gutter-x: clamp(24px, 3vw, 38px);
}
.custom-start-img-wrapper {
	position: relative;
	max-width: 679px;
}
.custom-start-img-wrapper img {
	width: 100%;
	height: clamp(400px, 42vw, 602px);
	object-fit: cover;
	display: block;
}
.custom-start-img-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 24px;
	box-shadow: 0 0 44px 0 rgba(0, 0, 0, 0.23) inset;
	pointer-events: none;
}
.custom-start-content {
	max-width: 684px;
}
.custom-start-content > p {
	margin-bottom: 24px;
}
.custom-start-step-number {
	color: transparent;
	-webkit-text-stroke: 2px #134060;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(56px, 5.5vw, 80px);
	font-weight: 600;
	line-height: 1;
	min-width: clamp(48px, 5vw, 64px);
	/* Centre the numeral in its column - "1" is narrow and was hugging the
	   left edge instead of sitting centred like the comp. */
	text-align: center;
}
.custom-start-step h5 {
	color: #e31827;
	line-height: 1.2;
}
.custom-start-step p {
	color: #3c3c3c;
}
.custom-start-step + .custom-start-step {
	margin-top: 22px;
}
.custom-start-step p:last-child {
	margin-bottom: 0;
}
.custom-start-button {
	margin-top: 32px;
}

/* ==================================================================
   39. CUSTOM CONTACT SECTION
   Navy band: title/copy/collage left, styled Contact Form 7 right
   (pill inputs, rounded textarea, acceptance checkboxes).
   ================================================================== */

.custom-contact-section {
	background: #134060;
	padding: clamp(50px, 6vw, 86px) 0 clamp(60px, 7vw, 100px);
}
.custom-contact-section .row {
	--bs-gutter-x: clamp(24px, 4vw, 48px);
}
.custom-contact-content {
	/* The heading's trailing red dash is drawn past the h2 box; on pages
	   where the title runs long the dash was reaching INTO the form column
	   (ClickUp pre-launch list + BugHerd #39). Clipping at the content
	   column's edge caps it on every page and width - the dash now always
	   stops before the form cells. */
	overflow-x: clip;
}
.custom-contact-content h2 {
	position: relative;
	line-height: 1;
	max-width: 360px;
}
.custom-contact-content h2::after {
	content: "";
	position: absolute;
	left: 306px;
	top: 22px;
	height: 4px;
	width: 259px;
	background: #e31827;
}
.custom-contact-content > p {
	color: #fff;
	margin-top: 14px;
	max-width: 535px;
}
.custom-contact-img-wrapper {
	margin-top: 24px;
	max-width: 565px;
}
.custom-contact-img-wrapper img {
	width: 100%;
	display: block;
}
.custom-contact-img-wrapper::before,
.custom-contact-img-wrapper::after {
	content: "";
	position: absolute;
	height: 4px;
	width: 203px;
	background: #e31827;
	z-index: 1;
}
.custom-contact-img-wrapper::before {
	top: 55px;
	left: 95px;
}
.custom-contact-img-wrapper::after {
	bottom: 39px;
	left: 242px;
}
.custom-contact-form label {
	display: block;
	color: #fff;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 8px;
}
.custom-contact-form label .req {
	color: #e31827;
	font-size: 13px;
	vertical-align: super;
}
.custom-contact-form .form-row {
	margin-bottom: 22px;
}
.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form input[type="tel"],
.custom-contact-form select {
	width: 100%;
	height: 50px;
	border-radius: 100px;
	background: #f4f4f4;
	border: 1px solid #b8b8b8;
	padding: 0 24px;
	color: #505050;
	font-size: 18px;
	appearance: none;
	background-image: url("../images/custom/select-chevron.svg");
	background-repeat: no-repeat;
	background-position: right 24px center;
	background-size: 14px;
}
.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form input[type="tel"] {
	background-image: none;
}
/* CF7 wraps controls in an inline span inside an inline label - both
   collapse to zero width, leaving the nice-select dropdowns tiny and
   unclickable. Block the chain so selects fill the row. */
.custom-contact-form .form-row > label {
	display: block;
	width: 100%;
}
.custom-contact-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}
.custom-contact-form .nice-select {
	width: 100%;
	height: 50px;
	border-radius: 100px;
	background-color: #f4f4f4;
	border: 1px solid #b8b8b8;
	line-height: 48px;
	padding-left: 24px;
	font-size: 18px;
	color: #505050;
}
.custom-contact-form .nice-select .list {
	width: 100%;
	/* 9 whole rows (42px each) so the cap never slices an option in half,
	   plus an always-visible scrollbar - the macOS overlay scrollbar made the
	   scrolling list read as "cut off" (ClickUp pre-launch list). */
	max-height: 378px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #b9b9b9 #f1f1f1;
}
.custom-contact-form .nice-select .list::-webkit-scrollbar {
	width: 8px;
}
.custom-contact-form .nice-select .list::-webkit-scrollbar-thumb {
	background: #b9b9b9;
	border-radius: 4px;
}
.custom-contact-form .nice-select .list::-webkit-scrollbar-track {
	background: #f1f1f1;
}
.custom-contact-form textarea {
	width: 100%;
	height: 143px;
	border-radius: 20px;
	background: #f4f4f4;
	border: 1px solid #b8b8b8;
	padding: 14px 24px;
	color: #505050;
	font-size: 18px;
	resize: vertical;
}
.custom-contact-form .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	margin: 0;
}
.custom-contact-form .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	font-family: "acumin-pro", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	margin-bottom: 0;
}
.custom-contact-form input[type="checkbox"] {
	appearance: none;
	height: 21px;
	width: 21px;
	flex: 0 0 21px;
	background: #f4f4f4;
	border: 1px solid #b8b8b8;
	border-radius: 3px;
	margin-top: 2px;
	cursor: pointer;
	position: relative;
}
.custom-contact-form input[type="checkbox"]:checked::before {
	content: "";
	position: absolute;
	inset: 3px;
	background: #e31827;
	border-radius: 2px;
}
.custom-contact-form .consent-row {
	margin-bottom: 18px;
}
.custom-contact-form .form-submit-row {
	margin-top: 30px;
}
.custom-contact-form .wpcf7-spinner {
	position: absolute;
}
.custom-contact-form .wpcf7-not-valid-tip {
	color: #ffb3b8;
	font-size: 14px;
	margin-top: 6px;
}
.custom-contact-form .wpcf7 form .wpcf7-response-output {
	color: #fff;
	border-color: #e31827;
	margin: 24px 0 0;
	padding: 12px 18px;
}

/* ==================================================================
   40. PILLAR (ADVANTAGE DETAIL) SECTIONS
   Shared template for the four advantage pages: hero video support,
   intro split with feature mini-grid, navy deep-dive band, and the
   angled "Next Advantage" teaser ribbon.
   ================================================================== */

.advantage-hero-video {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	z-index: 0;
}
.pillar-intro-section {
	padding: clamp(40px, 5vw, 59px) 0 clamp(50px, 6vw, 70px);
}
.pillar-intro-section .row {
	--bs-gutter-x: clamp(24px, 3vw, 37px);
}
.pillar-intro-img-wrapper {
	max-width: 679px;
}
.pillar-intro-img-wrapper img {
	width: 100%;
	aspect-ratio: 679 / 386;
	object-fit: cover;
	display: block;
}
.pillar-intro-img-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 24px;
	box-shadow: 0 0 44px 0 rgba(0, 0, 0, 0.23) inset;
	pointer-events: none;
}
.pillar-intro-features {
	/* Full-width horizontal band under the intro row (BugHerd #33). */
	margin-top: clamp(28px, 3vw, 48px);
}
.pillar-feature-item {
	padding-left: clamp(16px, 2vw, 23px);
	max-width: 318px;
	/* Equalize the tapered left accent: items stretch to the row height so
	   the 100%-height icon renders the same length on every callout. */
	height: 100%;
}
.pillar-feature-icon {
	height: 100%;
	width: 8px;
}
/* Design is 35px in #e03643, not the 24px h5 default in brand red. The 1.2
   ratio was already right - the reported 42px vs 28.8px line-height was purely
   downstream of the wrong font-size, so sizing it correctly fixes both. */
.pillar-feature-item h5 {
	color: #e03643;
	font-size: clamp(24px, 2.06vw, 35px);
	line-height: 1.2;
}
.pillar-feature-item p {
	color: #3c3c3c;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 0;
}
.pillar-intro-content {
	max-width: 684px;
}
.pillar-intro-content h2 {
	margin-bottom: 14px;
}
.pillar-intro-description p:last-child {
	margin-bottom: 0;
}
.pillar-intro-button {
	margin-top: 28px;
}
/* Keep the intro CTA pair on one row like the design. */
.pillar-intro-button .us-btn-1 {
	padding: 11.3px 26px;
}
.pillar-intro-button.d-flex {
	gap: 16px !important;
}
.pillar-deep-section {
	background: #134060;
	padding: clamp(50px, 6vw, 96px) 0;
}
.pillar-deep-section .row {
	--bs-gutter-x: clamp(24px, 3vw, 40px);
}
.pillar-deep-content {
	max-width: 684px;
}
.pillar-deep-content h2 {
	margin-bottom: 14px;
}
.pillar-deep-copy,
.pillar-deep-copy p {
	color: #fff;
}
.pillar-deep-copy h5 {
	color: #fff;
	text-transform: uppercase;
	margin: 18px 0 8px;
}
.pillar-deep-copy ul {
	list-style: none;
	padding-left: 24px;
	margin: 0;
}
.pillar-deep-copy ul li {
	position: relative;
	padding-left: 16px;
	font-weight: 600;
	line-height: 1.6;
}
.pillar-deep-copy ul li::before {
	content: "\2022";
	color: #e31827;
	position: absolute;
	left: 0;
}
.pillar-deep-img-wrapper {
	max-width: 680px;
	margin-left: auto;
}
/* Deep/detail image heights differ per pillar page - the image keeps
   its own (design-cropped) ratio rather than a forced box. */
.pillar-deep-img-wrapper img {
	width: 100%;
	height: auto;
	display: block;
}
.pillar-deep-img-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 24px;
	box-shadow: 0 0 44px 0 rgba(0, 0, 0, 0.23) inset;
	pointer-events: none;
}
.pillar-teaser-section {
	background: #fff;
}
.pillar-teaser-ribbon {
	margin-left: auto;
	width: min(770px, 92%);
	background: #134060;
	clip-path: polygon(111.5px 0, 100% 0, 100% 100%, 0 100%);
	padding: 40px clamp(24px, 8vw, 150px) 42px clamp(120px, 18%, 160px);
	text-align: right;
	transition: background-color 0.3s linear;
}
.pillar-teaser-ribbon:hover {
	background: #0d2f49;
}
.pillar-teaser-eyebrow {
	color: #ff4450;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 2.24px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
}
.pillar-teaser-eyebrow::before {
	content: "";
	height: 1px;
	width: 188px;
	background: #e31827;
	flex: 0 0 auto;
}
.pillar-teaser-title {
	color: #fff;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(24px, 2.5vw, 32px);
	font-weight: 600;
	line-height: 1;
	margin: 12px 0 14px;
}
.pillar-teaser-more {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 2.56px;
	border-bottom: 1px solid #e31827;
	padding-bottom: 2px;
	transition: all 0.3s linear;
}
.pillar-teaser-ribbon:hover .pillar-teaser-more {
	color: #e31827;
	border-color: #e31827;
}

/* ==================================================================
   41. FLEXIBLE IMAGE FIT
   Content images render inside fixed design-ratio boxes with
   object-fit, so any upload size fills the space as designed.
   ================================================================== */

.industry-solutions-card {
	aspect-ratio: 445 / 252;
}
.industry-solutions-card img {
	min-height: 0;
	height: 100%;
}
.custom-focus-img-wrapper img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.custom-start-img-wrapper img {
	aspect-ratio: 679 / 602;
	height: auto;
}
.advantage-video-wrapper > img {
	aspect-ratio: 679 / 313;
	height: auto;
}
.custom-spotlight-video > img {
	aspect-ratio: 684 / 367;
	height: auto;
}

/* ==================================================================
   42. HEADING LINE BALANCE
   Balanced wrapping on headings prevents hanging single words
   (widows) so line breaks read like the design's manual breaks.
   ================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

/* Pillar detail section: white variant of the deep dive with image
   left, red H5 kicker and red-bulleted payoff list. */
.pillar-detail-section {
	padding: clamp(40px, 5vw, 70px) 0 clamp(50px, 6vw, 80px);
}
.pillar-detail-section .row {
	--bs-gutter-x: clamp(24px, 3vw, 37px);
}
.pillar-detail-img-wrapper {
	max-width: 680px;
}
.pillar-detail-img-wrapper img {
	width: 100%;
	height: auto;
	display: block;
}
.pillar-detail-img-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 24px;
	box-shadow: 0 0 44px 0 rgba(0, 0, 0, 0.23) inset;
	pointer-events: none;
}
.pillar-detail-content {
	max-width: 684px;
}
.pillar-detail-content h2 {
	margin-bottom: 14px;
}
.pillar-detail-copy h5 {
	color: #e31827;
	text-transform: uppercase;
	margin: 18px 0 8px;
}
.pillar-detail-copy ul {
	list-style: none;
	padding-left: 24px;
	margin: 0;
}
.pillar-detail-copy ul li {
	position: relative;
	padding-left: 16px;
	font-weight: 600;
	line-height: 1.6;
	color: #000;
}
.pillar-detail-copy ul li::before {
	content: "\2022";
	color: #e31827;
	position: absolute;
	left: 0;
}

/* ==================================================================
   43. PRIMARY MENU DROPDOWN (Valve Solutions mega panel)
   Two-tone hover panel matched to the Figma nav reference: featured
   links left (#134060, fixed 251px red underlines), "Engineered to
   Perform" pillar links right (#0d2d43) with the blue eyebrow.
   Items placed with CSS grid via vs-primary / vs-pillar classes.
   ================================================================== */

.main-menu-wrapper .main-menu > li {
	position: relative;
}
.main-menu-wrapper .main-menu > li > a {
	position: relative;
}
.main-menu-wrapper .main-menu > li.menu-item-has-children:hover > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 3px;
	background: #2ca7ff;
}
/* All four Figma dropdown reference frames show the hovered top-level item
   staying white - the blue underline is the only marker. The generic nav
   hover turns links red, which is right for the utility links but not here. */
.main-menu-wrapper .main-menu > li > a:hover {
	color: #fff;
}
/* A dropdown whose panel would run past the window edge anchors to its
   parent's right instead (Resources is the last nav item, so it always
   would). The design does the same thing by hand: it shifts the Resources
   panel 141px left of its label where Industries/About sit ~35px left. */
.main-menu-wrapper .main-menu > li.dd-flip > .sub-menu {
	left: auto;
	right: -55px;
}
.main-menu-wrapper .main-menu > li.menu-simple-dd.dd-flip > .sub-menu {
	left: auto;
	right: -33px;
}
.main-menu-wrapper .main-menu > li > .sub-menu {
	position: absolute;
	top: 100%;
	left: -55px;
	display: grid;
	grid-template-columns: 332px 373px;
	column-gap: 0;
	row-gap: 0;
	padding: 0;
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.main-menu-wrapper .main-menu > li:hover > .sub-menu,
.main-menu-wrapper .main-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.main-menu-wrapper .main-menu > li > .sub-menu > li {
	display: block;
	margin: 0;
	padding: 0;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li.vs-primary {
	grid-column: 1;
	background: #134060;
	padding: 0 26px 0 46px;
}
/* The two columns are INDEPENDENT, per the Figma: the pillar list flows
   naturally (tight stack, it defines the panel height) while the three
   featured links sit on a fixed 84px rhythm, absolutely placed so neither
   column's content can push the other around (sharing grid rows made the
   left leading drift when Champion Valves was added - BugHerd #76 - and
   equalizing the rows scattered the pillar list instead). The gradient
   paints both column backgrounds since the absolute items no longer
   stretch the left track; :has() scopes it to the mega panel. */
.main-menu-wrapper .main-menu > li > .sub-menu:has(> li.vs-primary) {
	background: linear-gradient(90deg, #134060 0 332px, #0d2d43 332px);
	min-height: 300px;
	/* 13th filler row soaks up the min-height surplus so the pillar rows
	   keep their natural (content) heights - the list stays tight. */
	grid-template-rows: repeat(12, auto) 1fr;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li.vs-primary {
	position: absolute;
	left: 0;
	width: 332px;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li:nth-child(1 of .vs-primary) {
	top: 45px;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li:nth-child(2 of .vs-primary) {
	top: 129px;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li:nth-child(3 of .vs-primary) {
	top: 213px;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li.vs-primary > a {
	display: block;
	color: #fff;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li.vs-primary > a::after {
	content: "";
	display: block;
	width: 251px;
	height: 3px;
	background: #e31827;
	margin-top: 6px;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li.vs-primary > a:hover {
	color: #2ca7ff;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li.vs-pillar {
	grid-column: 2;
	background: #0d2d43;
	padding: 3px 30px 3px 36px;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li:nth-child(1 of .vs-pillar) {
	grid-row: 1 / 4;
	padding-top: 42px;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li:nth-child(2 of .vs-pillar) {
	grid-row: 4 / 7;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li:nth-child(3 of .vs-pillar) {
	grid-row: 7 / 10;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li:nth-child(4 of .vs-pillar) {
	grid-row: 10 / 13;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li:nth-child(1 of .vs-pillar)::before {
	content: "Engineered to Perform";
	display: block;
	color: #2ca7ff;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li:nth-child(4 of .vs-pillar) {
	padding-bottom: 26px;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li.vs-pillar > a {
	display: block;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.65;
	padding: 0;
	margin: 0;
	white-space: nowrap;
}
.main-menu-wrapper .main-menu > li > .sub-menu > li.vs-pillar > a:hover {
	color: #2ca7ff;
}

/* ==================================================================
   44. GET THE REPORT POPUP
   Global gated-report modal (footer.php): navy panel, title with red
   rule, reuses the custom-contact-form field styling. Opened by any
   link ending in #get-the-report via Magnific inline popup.
   ================================================================== */

.report-popup {
	position: relative;
	background: #134060;
	max-width: 950px;
	margin: 60px auto;
	padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 75px) clamp(30px, 4vw, 50px);
}
.report-popup-header h3 {
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(30px, 3.5vw, 40px);
	white-space: nowrap;
}
.report-popup-line {
	height: 3px;
	background: #e31827;
}
.report-popup .report-popup-sub {
	color: #fff;
	margin: 10px 0 26px;
}
.report-popup-wrap .mfp-close {
	position: absolute;
	top: -48px;
	right: 0;
	width: 48px;
	height: 48px;
	background: #2ca7ff;
	color: #fff;
	opacity: 1;
	font-size: 30px;
	line-height: 48px;
}
.report-popup-wrap .mfp-close:hover {
	background: #e31827;
}
.report-popup .form-submit-row {
	margin-top: 24px;
}

/* ==================================================================
   45. CHAMPION HERO + FAMILY SECTIONS
   Champion brand page: hero with logo lockup right; red "Part of
   the US Valve Family" heading with copy, and the angled gray
   "More Expertise" band with skewed stripe decorations.
   ================================================================== */

.champion-hero-logo img {
	max-width: 291px;
	width: 100%;
	display: block;
	margin-right: auto;
}
.champion-family-section {
	padding: clamp(40px, 5vw, 64px) 0 0;
}
.champion-family-title {
	color: #e31827;
	font-size: clamp(40px, 4.5vw, 60px);
	line-height: 1.1;
	max-width: 480px;
}
.champion-family-copy p {
	line-height: 1.4;
}
.champion-family-copy p:last-child {
	margin-bottom: 0;
}
.champion-family-band-wrapper {
	margin-top: clamp(30px, 4vw, 52px);
}
.champion-family-band {
	margin-left: auto;
	width: min(1490px, 88%);
	background: #e4e4e4;
	clip-path: polygon(90px 0, 100% 0, 100% 100%, 0 100%);
	padding: 22px 40px 22px 130px;
	text-align: center;
}
.champion-family-band p {
	color: #134060;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 600;
	line-height: 1.2;
}
.champion-band-stripes span {
	position: absolute;
	left: 0;
	height: 18px;
	width: 12%;
	background: linear-gradient(90deg, rgba(19, 64, 96, 0.2) 0%, rgba(19, 64, 96, 0.05) 100%);
	transform: skewX(26deg);
}
.champion-band-stripes span:nth-child(1) {
	top: 6px;
}
.champion-band-stripes span:nth-child(2) {
	top: 32px;
	left: -20px;
}
.champion-band-stripes span:nth-child(3) {
	top: 58px;
	left: -40px;
}

/* ==================================================================
   46. CHAMPION SOLUTIONS / PRODUCT ROWS
   Navy intro panel plus alternating rows of technical line-art and
   product content with red callout rules and red H5 kickers.
   ================================================================== */

/* overflow-x clip (not overflow hidden) - a hidden ancestor disables
   position sticky; clip contains the full-bleed layer without a
   scroll container so the panel can pin. */
.champion-solutions-section {
	padding: clamp(50px, 6vw, 90px) 0 clamp(50px, 6vw, 80px);
	overflow-x: clip;
}
.champion-solutions-section .row {
	--bs-gutter-x: clamp(24px, 3vw, 37px);
}
.champion-product-row {
	margin-top: clamp(30px, 4vw, 60px);
}
/* The prototype flags this panel STICKY_SCROLLS: it pins below the
   fixed header while the valve line-art rows scroll and parallax by. */
.champion-solutions-panel {
	background: #134060;
	padding: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px);
	position: sticky;
	top: 140px;
	z-index: 2;
}
/* Full-bleed left to the viewport edge, and tucked ~27% under the
   line-art column on the right (design: panel 0-832, art from 747)
   so the illustrations parallax on top of the pinned navy block. */
.champion-solutions-panel::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -100vw;
	right: clamp(-145px, -8.5vw, -90px);
	background: #134060;
	z-index: -1;
}
.champion-solutions-panel {
	background: transparent;
}
.champion-product-art {
	position: relative;
	z-index: 3;
}
.champion-solutions-panel h3 {
	font-size: clamp(26px, 2.5vw, 32px);
	margin-bottom: 14px;
}
.champion-solutions-copy,
.champion-solutions-copy p {
	color: #fff;
	font-size: 16px;
	line-height: 1.5;
}
.champion-solutions-buttons {
	margin-top: 22px;
}
.champion-solutions-buttons .us-btn-1 {
	padding: 11.3px 24px;
	font-size: 14px;
}
.champion-product-art img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}
/* Design is 50px / weight 400 / lh 52.5 (verified against node 17131:16632 with
   getComputedStyle, not just the token diff). This shipped at 32px/600 - the
   size came from a too-small clamp and the weight from the h3 base. */
.champion-product-title {
	color: #134060;
	font-size: clamp(30px, 2.95vw, 50px);
	font-weight: 400;
	line-height: 1.05;
	position: relative;
	padding-top: 14px;
	margin-bottom: 14px;
}
.champion-product-title::before {
	content: "";
	position: absolute;
	top: 0;
	left: -120px;
	width: 200px;
	height: 2px;
	background: #e31827;
}
.champion-product-title::after {
	content: "";
	position: absolute;
	top: -6px;
	left: -132px;
	width: 14px;
	height: 14px;
	border: 2px solid #e31827;
	border-radius: 50%;
	background: transparent;
}
.champion-product-copy h5 {
	color: #e31827;
	text-transform: uppercase;
	font-size: clamp(17px, 2vw, 19px);
	margin: 16px 0 4px;
}
.champion-product-copy h5:first-child {
	margin-top: 0;
}
.champion-product-copy p {
	color: #3c3c3c;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 0;
}

/* ==================================================================
   47. CHAMPION WHY-CHOOSE GRID
   Five icon columns with red line-art icons and uppercase titles.
   ================================================================== */

.champion-why-section {
	padding: clamp(50px, 6vw, 80px) 0 clamp(50px, 6vw, 90px);
}
.champion-why-title {
	margin-bottom: clamp(30px, 4vw, 56px);
}
.champion-why-grid {
	gap: clamp(20px, 2vw, 30px) 0;
	margin: 0 -12px;
}
.champion-why-item {
	flex: 0 0 20%;
	max-width: 20%;
	padding: 0 12px;
}
.champion-why-icon {
	height: 118px;
	display: flex;
	align-items: flex-end;
	margin-bottom: 18px;
}
.champion-why-icon img {
	max-height: 118px;
	width: auto;
}
.champion-why-item h5 {
	color: #e31827;
	font-size: 18px;
	line-height: 1.25;
	margin-bottom: 8px;
	min-height: 45px;
}
.champion-why-item p {
	color: #3c3c3c;
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 0;
}

/* Champion contact heading: force the design's two-line break so the
   red rule follows "Put Our Expertise to" on line one. */
.champion-contact-section .custom-contact-content h2 {
	max-width: 460px;
}
.champion-contact-section .custom-contact-content h2::after {
	left: 435px;
	width: 150px;
}

/* ==================================================================
   48. INDUSTRY SPLIT + STRIP SECTIONS
   Industry pages: alternating white/navy split sections built from
   a repeater (style + image side + optional CTA pair), plus the
   light-gray "Why Teams Choose US Valve" feature strip.
   ================================================================== */

.ind-split {
	padding: clamp(40px, 5vw, 59px) 0;
}
.ind-split .row {
	--bs-gutter-x: clamp(24px, 3vw, 37px);
}
.ind-split--navy {
	background: #134060;
	padding: clamp(50px, 6vw, 82px) 0;
}
.ind-split--navy .ind-split-copy,
.ind-split--navy .ind-split-copy p {
	color: #fff;
}
.ind-split-content {
	max-width: 684px;
}
.ind-split-content h2 {
	margin-bottom: 14px;
}
.ind-split-copy p:last-child {
	margin-bottom: 0;
}
.ind-split-buttons {
	margin-top: 26px;
}
.ind-split-img-wrapper {
	max-width: 684px;
}
.ind-split-img-wrapper img {
	width: 100%;
	height: auto;
	display: block;
}
.ind-split-img-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 24px;
	box-shadow: 0 0 44px 0 rgba(0, 0, 0, 0.23) inset;
	pointer-events: none;
}
.ind-strip-section {
	background: linear-gradient(90deg, #ececec 0%, #f7f7f7 50%, #ececec 100%);
	padding: clamp(40px, 5vw, 64px) 0;
}
.ind-strip-title {
	margin-bottom: clamp(26px, 3.5vw, 48px);
}

/* Simple single-panel dropdown (Industries): a plain #134060 list,
   used by any top-level item carrying the menu-simple-dd class. */
.main-menu-wrapper .main-menu > li.menu-simple-dd > .sub-menu {
	display: block;
	grid-template-columns: none;
	background: #134060;
	min-width: 250px;
	left: -33px;
	padding: 20px 33px 20px;
}
.main-menu-wrapper .main-menu > li.menu-simple-dd > .sub-menu > li {
	display: block;
	margin: 0;
	padding: 0;
	background: none;
}
/* Figma specs every simple dropdown (Industries, About, Resources)
   as Acumin Pro 18 / 32.4px line-height. */
.main-menu-wrapper .main-menu > li.menu-simple-dd > .sub-menu > li > a {
	display: block;
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 32.4px;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
.main-menu-wrapper .main-menu > li.menu-simple-dd > .sub-menu > li > a:hover {
	color: #2ca7ff;
}

/* ==================================================================
   49. DATA CENTER FLAGSHIP PAGE
   Bespoke industry page: numbered proof strip, video promos,
   challenges banner (homepage stripe animation), product platform
   cards, performance table + chart, CDU spec boxes, scale stats and
   the full-bleed statement band.
   ================================================================== */

.dc-proof-section {
	padding: 36px 0 10px;
}
.dc-proof-section .process-timeline-content p {
	color: #3c3c3c;
	font-size: 16px;
	line-height: 1.5;
	max-width: 326px;
}

.dc-intro-video-section {
	padding: 30px 0 60px;
}
.dc-video-frame {
	max-width: 650px;
}
.dc-video-frame video,
.dc-video-frame img {
	width: 100%;
	aspect-ratio: 650 / 345;
	object-fit: cover;
	display: block;
}
/* Empty video slot: plain gradient block, no text - a static
   placeholder waiting for a video, per Michael. */
.dc-video-placeholder {
	aspect-ratio: 650 / 345;
	background: linear-gradient(116deg, #134060 30%, #141428 100%);
}
.dc-video-popup {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
}
.dc-video-popup video {
	width: 100%;
	display: block;
	border-radius: 12px;
}
.dc-video-popup-wrap .mfp-close {
	color: #fff;
	right: -6px;
	top: -42px;
}
.dc-intro-video-content h2 {
	color: #134060;
	margin-bottom: 18px;
}
.dc-intro-video-copy p {
	color: #3c3c3c;
}
.dc-intro-video-content .video-btn {
	margin-top: 14px;
}

.dc-challenges-section {
	background: #134060;
	padding: 62px 0;
}
.dc-challenges-section .section-title-wrapper {
	margin-bottom: 56px;
}
.dc-challenges-row {
	margin-top: 0;
}
/* Client review (CR #1): the whole block centers in its column so the four
   columns read centered under the banner; icon, title and copy keep one
   shared left edge inside the block. */
.dc-challenge-item {
	max-width: 327px;
	margin-left: auto;
	margin-right: auto;
}
.dc-challenge-icon {
	height: 131px;
	margin-bottom: 24px;
}
.dc-challenge-icon img {
	max-height: 131px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	object-position: left bottom;
}
/* Figma: titles AND copy are white (only the icons are red). */
.dc-challenge-item h5 {
	color: #fff;
	font-size: 24px;
}
.dc-challenge-item p {
	color: #fff;
	font-size: 18px;
	line-height: 1.4;
	max-width: 327px;
}

.dc-platform-section {
	padding: 64px 0 84px;
}
.dc-platform-content h2 {
	color: #134060;
	margin-bottom: 18px;
}
.dc-platform-copy p {
	color: #3c3c3c;
}
.dc-platform-copy ul {
	margin: 0 0 18px;
}
.dc-platform-img-wrapper {
	max-width: 684px;
}
.dc-platform-img-wrapper img {
	width: 100%;
	aspect-ratio: 684 / 454;
	object-fit: cover;
	display: block;
}
.dc-product-row {
	margin-top: 46px;
}
/* Bootstrap .row > * padding/margin would fatten these absolute
   decoration spans - zero them out. */
.dc-product-divider {
	/* Frame 17131:11445 Group 2194 at 47.4% (x813 of the 1400 content - left
	   of center because the IRX-B art box overlaps it). The caps ALIGN with
	   the visible valve, top and bottom (Michael + the node span 2328..2631
	   vs the art's alpha extent 2316..2646 agree): the IRX-B render's art
	   occupies 18%..82.7% of its box, and the box sits below the row's
	   gutter, so both offsets fold the gutter out of the row height. Stem
	   drawn 3px per the frame's fill+stroke (1px rect + 1px stroke). */
	position: absolute;
	left: 47.4%;
	top: calc(var(--bs-gutter-y, 3rem) + (100% - var(--bs-gutter-y, 3rem)) * 0.18);
	bottom: calc((100% - var(--bs-gutter-y, 3rem)) * 0.173);
	width: 3px;
	background: #e31827;
	transform: translateX(-50%);
	padding: 0;
	margin: 0;
}
.dc-product-divider::before,
.dc-product-divider::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 55px;
	height: 3px;
	background: #e31827;
}
.dc-product-divider::before {
	top: 0;
}
.dc-product-divider::after {
	bottom: 0;
}
/* Full-height cards so both info columns center identically and the
   four buttons line up across the row (Figma: both name rows and both
   button pairs share the same y). */
.dc-product-card {
	gap: 8px;
	height: 100%;
}
/* Art assets are BAKED node renders (atts 1540/1541) - square boxes with the
   design's own placement, so the box IS the node: IRX 370, IRX-B 510 on the
   1400 frame. The old "near-equal 342/356" sizing was derived from trimmed
   assets and undershot IRX-B by 30%. Percentages are of the col (700). */
.dc-product-art {
	width: clamp(240px, 24vw, 342px);
}
.dc-product-row .col-lg-6:nth-child(3) .dc-product-art {
	width: clamp(250px, 25vw, 356px);
}
@media (min-width: 992px) {
	.dc-product-row .col-lg-6:nth-child(2) .dc-product-art {
		width: 52.86%;              /* 370/700 */
		margin-left: -6.29%;        /* box starts 44px left of the content edge */
	}
	.dc-product-row .col-lg-6:nth-child(3) .dc-product-art {
		width: 72.86%;              /* 510/700 */
		margin-left: -8%;           /* box overlaps the divider per the frame */
	}
	.dc-product-row .col-lg-6:nth-child(3) .dc-product-info {
		margin-left: -8%;           /* text sits over the art box's transparent right padding */
	}
	.dc-product-info .us-btn-1,
	.dc-product-info .us-btn-outline {
		white-space: nowrap;
	}
}
.dc-product-art > img:first-child {
	pointer-events: none;   /* transparent padding must not block the buttons */
}
.dc-product-art > img:first-child {
	width: 100%;
	height: auto;
	display: block;
}
.dc-product-badge {
	/* Badge boxes from the frame, as fractions of each (square) art box:
	   IRX 100/370 at (67.8%, 19.2%); IRX-B 100/510 at (64.3%, 25.9%). */
	width: 27%;
	height: auto;
	top: 19.2%;
	left: 67.8%;
	right: auto;
}
.dc-product-row .col-lg-6:nth-child(3) .dc-product-badge {
	width: 19.6%;
	top: 25.9%;
	left: 64.3%;
}
.dc-product-name {
	color: #e31827;
	font-size: clamp(36px, 3vw, 50px);
	font-weight: 600;
	line-height: 1.1;
}
.dc-product-subtitle {
	color: #134060;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(24px, 2.1vw, 35px);
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 20px;
}
.dc-product-info .us-btn-1 {
	margin-bottom: 14px;
}
.us-btn-outline {
	display: inline-block;
	color: #e31827;
	background: transparent;
	border: 1px solid #e31827;
	border-radius: 40px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 1.28px;
	text-transform: uppercase;
	text-align: center;
	padding: 11.5px 35px;
	transition: all 0.3s linear;
}
.us-btn-outline:hover {
	background: #e31827;
	color: #fff;
}

/* Straddles the white -> navy boundary like the design: the navy
   band starts partway down the banner card. */
.dc-video-banner-section {
	background: linear-gradient(180deg, #ffffff 58%, #134060 58%);
	padding: 42px 0 0;
}
.dc-video-banner video,
.dc-video-banner img,
.dc-video-banner .dc-video-placeholder--wide {
	width: 100%;
	aspect-ratio: 1400 / 309;
	object-fit: cover;
	display: block;
}
.dc-video-banner .dc-video-placeholder--wide {
	background: linear-gradient(116deg, #134060 30%, #141428 100%);
	aspect-ratio: 1400 / 309;
}
.dc-video-banner-overlay {
	background: rgba(19, 64, 96, 0.5);
	gap: 24px 46px;
	padding: 24px;
	z-index: 1;
}
.dc-video-banner-overlay h2 {
	max-width: 440px;
	text-wrap: balance;
}

.dc-cv-section {
	background: #134060;
	padding: 92px 0 64px;
}
.dc-cv-content h2 {
	margin-bottom: 18px;
}
.dc-cv-img-wrapper {
	max-width: 684px;
}
.dc-cv-img-wrapper img {
	width: 100%;
	aspect-ratio: 684 / 364;
	object-fit: cover;
	display: block;
}

.dc-table-section {
	padding: 66px 0 84px;
}
.dc-table-heading {
	color: #134060;
	position: relative;
	padding-bottom: 26px;
	margin-bottom: 40px;
}
.dc-table-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 8px;
	background: #e0e0e0;
	clip-path: polygon(0 0, 100% 0, 100% 42%, 56% 42%, 54% 100%, 0 100%);
}
.dc-table-wrapper {
	overflow-x: auto;
}
.dc-perf-table {
	width: 100%;
	max-width: 684px;
	border-collapse: collapse;
	text-align: center;
}
.dc-perf-table th,
.dc-perf-table td {
	border: 2px solid #fff;
	padding: 9px 10px;
	font-size: 17px;
	line-height: 1.25;
}
.dc-perf-table thead th {
	background: #c2d1e1;
	color: #134060;
	font-weight: 700;
}
.dc-perf-table thead th.dc-th-size {
	background: #1f315a;
	color: #fff;
}
.dc-perf-table thead th.dc-th-irx,
.dc-perf-table thead th.dc-th-adv {
	color: #134060;
}
.dc-perf-table thead th.dc-th-irx::first-line,
.dc-perf-table thead th.dc-th-adv::first-line {
	color: #e31827;
}
.dc-perf-table td {
	color: #3c3c3c;
	border-color: #e6e6e6;
}
.dc-perf-table .dc-td-size {
	background: #1f315a;
	color: #fff;
	font-weight: 700;
	border-color: #fff;
}
.dc-perf-table .dc-td-adv {
	background: #2ca7ff;
	color: #134060;
	font-weight: 700;
	border-color: #fff;
}
.dc-table-footnote {
	color: #3c3c3c;
	font-size: 15px;
	margin: 18px 0 0;
	max-width: 684px;
}
.dc-chart-wrapper {
	max-width: 660px;
}
.dc-chart-wrapper img {
	width: 100%;
	height: auto;
	display: block;
}

.dc-cdu-section {
	background: #134060;
	padding: 90px 0 84px;
}
.dc-cdu-content h2 {
	margin-bottom: 16px;
}
.dc-cdu-copy p {
	color: #fff;
}
/* Equal-height grid so the red cross sits exactly centered in both
   gutters (a bootstrap row's uneven rows put 50% inside a box). */
.dc-cdu-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 1fr;
	gap: 24px;
	margin-top: 24px;
}
.dc-spec-box {
	background: #1d4c6d;
	padding: 24px 30px 28px;
}
.dc-spec-box::before,
.dc-spec-box::after {
	content: "";
	position: absolute;
	width: 50px;
	height: 42px;
	border: 2px solid #2ca7ff;
}
.dc-spec-box::before {
	top: 10px;
	right: 10px;
	border-left: 0;
	border-bottom: 0;
}
.dc-spec-box::after {
	bottom: 10px;
	left: 10px;
	border-right: 0;
	border-top: 0;
}
.dc-spec-items ul li {
	color: #fff;
}
.dc-cdu-cross {
	position: absolute;
	background: #e31827;
	z-index: 1;
	padding: 0;
	margin: 0;
}
.dc-cdu-cross-v {
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	transform: translateX(-50%);
}
.dc-cdu-cross-h {
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	transform: translateY(-50%);
}
.dc-cdu-photo {
	max-width: 684px;
}
.dc-cdu-photo img {
	width: 100%;
	aspect-ratio: 684 / 355;
	object-fit: cover;
	display: block;
}
.dc-cdu-lower {
	gap: 10px;
	margin-top: -40px;
}
.dc-cdu-product {
	width: clamp(220px, 20vw, 340px);
	filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.45));
}
.dc-cdu-product img {
	width: 100%;
	height: auto;
	display: block;
}
.dc-cdu-overlay-text {
	max-width: 348px;
	padding-top: 56px;
}
.dc-cdu-overlay-text h4 {
	margin-bottom: 12px;
}
.dc-cdu-overlay-copy p {
	color: #fff;
	font-size: 16px;
	line-height: 1.5;
}
.dc-cdu-overlay-text .us-btn-1 {
	margin-top: 10px;
}

.dc-scale-section {
	padding: 70px 0 40px;
}
.dc-scale-content h2 {
	color: #134060;
	margin-bottom: 16px;
}
.dc-scale-copy p {
	color: #3c3c3c;
}
.dc-stat-tile {
	padding-left: clamp(16px, 2vw, 23px);
	max-width: 318px;
}
.dc-stat-tile::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 8px;
	background: #e0e0e0;
	clip-path: polygon(0 0, 100% 3.9%, 100% 54.7%, 46% 56.9%, 46% 100%, 0 100%);
}
.dc-stat-tile h5 {
	color: #e03643;
}
.dc-stat-tile p {
	color: #3c3c3c;
	font-size: 16px;
	line-height: 1.5;
}

.dc-statement-section {
	background-size: cover;
	background-position: center;
	background-color: #134060;
	padding: 120px 0;
}
.dc-statement-text {
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(32px, 2.95vw, 50px);
	font-weight: 400;
	line-height: 1.05;
	max-width: 747px;
	text-wrap: balance;
}
.dc-statement-logo img {
	width: clamp(240px, 24vw, 400px);
	height: auto;
}

/* Video heroes: the design's static hero exports carry a dark navy
   treatment baked in; autoplaying video frames don't, so heroes with
   a video get a stronger scoped overlay for text contrast. */
/* The DC hero description is a multi-paragraph div (not a bare <p>),
   so it needs the hero paragraph treatment applied to the wrapper. */
.advantage-hero-desc {
	color: #fff;
	font-size: 18px;
	line-height: 1.4;
	max-width: 696px;
}

.advantage-hero-area.has-hero-video::before {
	background:
		linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(102, 102, 102, 0) 100%),
		linear-gradient(90deg, rgba(6, 18, 30, 0.78) 0%, rgba(10, 25, 42, 0.25) 70%),
		rgba(9, 24, 40, 0.55);
}

/* ==================================================================
   50. ABOUT PAGES
   About Us: full-bleed brand band over the warehouse photo and the
   small centered note above the footer. Hero/video/contact sections
   reuse advantage-hero, dc-intro-video and custom-contact patterns.
   ================================================================== */

.about-band-section {
	background-size: cover;
	background-position: center;
	background-color: #134060;
	padding: clamp(60px, 7vw, 120px) 0;
}
.about-band-logo img {
	width: clamp(260px, 23vw, 390px);
	height: auto;
}
.about-band-content {
	max-width: 565px;
}
.about-band-content h2 {
	margin-bottom: 14px;
}
.about-band-copy p {
	color: #fff;
}
.about-band-copy ul li {
	font-weight: 400;
}
.about-band-copy ul li strong {
	font-weight: 700;
}

.about-note-section {
	padding: 40px 0 56px;
}
.about-note {
	max-width: 958px;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #3c3c3c;
}
.about-note p {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	margin-bottom: 10px;
}
.about-note a {
	color: #e31827;
	font-weight: 600;
}
.about-note a:hover {
	color: #e03643;
}

/* About page tweaks: wider/shorter video frame than the DC page, and
   the contact heading stays on one line like the design. */
.page-template-template-about .dc-video-frame {
	max-width: 679px;
}
.page-template-template-about .dc-video-frame video,
.page-template-template-about .dc-video-frame img,
.page-template-template-about .dc-video-placeholder {
	aspect-ratio: 679 / 299;
}
@media (min-width: 992px) {
	.page-template-template-about .custom-contact-content h2 {
		white-space: nowrap;
	}
}

/* About contact title is a single line - the red line follows the
   text instead of the fixed offset tuned for the 2-line variant. */
@media (min-width: 992px) {
	/* "Ready to Talk? So are We." is ONE line in the design on every
	   template that uses this section (custom-valves keeps its own
	   2-line variant), and its rule measures 104px. */
	/* NOT pneumatics: its donor title ("Let's Solve the Bigger Challenge")
	   fills the whole column on one line, so the trailing dash landed inside
	   the form under "Reason for Contact" (BugHerd #39). It uses the base
	   2-line treatment instead. */
	.page-template-template-about .custom-contact-content h2,
	.page-template-template-responsibility .custom-contact-content h2,
	.page-template-template-giving-back .custom-contact-content h2,
	.page-template-template-video-gallery .custom-contact-content h2,
	.page-template-template-contact .custom-contact-content h2,
	.page-template-template-certifications .custom-contact-content h2 {
		max-width: none;
		width: fit-content;
		white-space: nowrap;
	}
	.page-template-template-about .custom-contact-content h2::after,
	.page-template-template-responsibility .custom-contact-content h2::after,
	.page-template-template-giving-back .custom-contact-content h2::after,
	.page-template-template-video-gallery .custom-contact-content h2::after,
	.page-template-template-contact .custom-contact-content h2::after,
	.page-template-template-certifications .custom-contact-content h2::after {
		left: calc(100% + 18px);
		width: 104px;
	}
}

/* -------- Careers page -------- */
.careers-split-section {
	padding: 64px 0 40px;
}
.careers-split-section + .careers-split-section {
	padding-top: 24px;
}
.careers-split-content h2 {
	color: #134060;
	margin-bottom: 14px;
}
.careers-split-intro p {
	color: #3c3c3c;
}
.careers-split-copy {
	margin: 22px 0 8px;
}
.careers-split-copy p {
	color: #3c3c3c;
	margin-bottom: 0;
}
/* The item-list marker is the site's tapered bar (same vector family
   as the pillar/stat markers), not a plain border. */
.careers-split-copy--bar {
	position: relative;
	padding-left: clamp(16px, 2vw, 33px);
}
.careers-split-copy--bar::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 8px;
	height: 100%;
	background: #e0e0e0;
	clip-path: polygon(0 0, 100% 3.8%, 100% 52.1%, 46% 54.2%, 46% 100%, 0 100%);
}
.careers-split-button {
	margin-top: 28px;
}
.careers-split-img-wrapper {
	max-width: 679px;
}
.careers-split-img-wrapper img {
	width: 100%;
	height: auto;
	display: block;
}

/* Band height matches the design ratio (376px at 1700 = 22.1vw) so the
   cover background shows the photo at the design's framing - a taller
   band zooms/crops the photo and brightens the whole b. */
.careers-safety-section {
	background-size: cover;
	background-position: center;
	background-color: #10141c;
	padding: 24px 0;
	min-height: clamp(280px, 22.1vw, 376px);
	display: flex;
	align-items: center;
}
.careers-safety-section > .container {
	width: 100%;
}
.careers-safety-content h2 {
	margin-bottom: 16px;
}
.careers-safety-copy p {
	color: #fff;
	margin-bottom: 0;
}
.careers-safety-stat {
	gap: 0;
}
/* Design tucks the YEARS / NO Accidents cluster ~85px into the
   numeral's open right side. */
.careers-safety-labels {
	margin-left: clamp(-45px, -2.6vw, 0px);
	position: relative;
	z-index: 1;
}
.careers-safety-number {
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(180px, 20vw, 350px);
	font-weight: 600;
	line-height: 0.8;
	color: transparent;
	-webkit-text-stroke: 5px #e31827;
}
.careers-safety-label {
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(48px, 4.6vw, 79px);
	font-weight: 300;
	line-height: 1;
	color: #fff;
}
.careers-safety-sublabel {
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(24px, 2.3vw, 39px);
	font-weight: 300;
	line-height: 1.1;
	color: #fff;
}

.careers-testimonials-section {
	background: #134060;
	padding: clamp(60px, 7vw, 100px) 0;
}
/* Design glyph renders 130px visible (node render at scale 1); the
   242px text box is mostly empty space. */
.careers-quote {
	width: clamp(80px, 7.65vw, 130px);
	height: auto;
	top: clamp(48px, 5.3vw, 84px);
}
.careers-quote-open {
	left: clamp(20px, 10vw, 177px);
}
.careers-quote-close {
	right: clamp(20px, 10vw, 177px);
}
.careers-testimonial {
	max-width: 782px;
}
.careers-testimonial-quote {
	color: #fff;
	font-size: 21px;
	line-height: 1.55;
	margin-bottom: 26px;
}
.careers-testimonial-name {
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: #fff;
}
.careers-testimonial-role {
	color: #2ca7ff;
	font-size: 18px;
	font-weight: 500;
	margin-top: 2px;
}
.careers-testimonial-controls {
	gap: 22px;
	margin-top: 34px;
}
.careers-testimonial-prev,
.careers-testimonial-next {
	width: 28px;
	height: 28px;
	background: #e31827;
	border: 0;
	transition: background 0.3s linear;
}
.careers-testimonial-prev:hover,
.careers-testimonial-next:hover {
	background: #e03643;
}
.careers-testimonial-pagination {
	gap: 10px;
	width: auto !important;
	position: static !important;
}
.careers-testimonial-pagination .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	border-radius: 0;
	background: #fff;
	opacity: 1;
	margin: 0 !important;
}
.careers-testimonial-pagination .swiper-pagination-bullet-active {
	background: #e31827;
}

/* -------- Corporate Responsibility page -------- */
.cr-red-title {
	color: #e31827;
	margin-bottom: 20px;
}
.cr-subtitle {
	color: #134060;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(22px, 1.8vw, 30px);
	font-weight: 400;
	line-height: 1.3;
	max-width: 1163px;
	margin-bottom: 0;
}
.cr-subtitle--light {
	color: #fff;
}
.cr-approach-section {
	padding: 64px 0 70px;
}
.cr-approach-section .cr-red-title {
	margin-bottom: 44px;
}
.cr-approach-text {
	padding-left: clamp(60px, 7vw, 119px);
	max-width: 684px;
}
.cr-approach-text h5 {
	color: #e31827;
}
.cr-approach-text p {
	color: #3c3c3c;
	font-size: 18px;
	line-height: 1.4;
}
.cr-stat-card {
	background: #134060;
	border-radius: 16px;
	margin-left: clamp(40px, 4.2vw, 72px);
	margin-top: 18px;
	padding: 26px 28px 26px clamp(70px, 6.3vw, 106px);
	gap: clamp(16px, 2vw, 32px);
	min-height: 145px;
	max-width: 588px;
}
/* Icon canvas is disc-centered; width sized so the visible disc
   renders at the design's 98px, box center at the design's disc
   center (23px left of the card edge). */
.cr-stat-icon {
	left: clamp(-83px, -4.87vw, -55px);
	top: 50%;
	transform: translateY(-50%);
	width: clamp(85px, 7.12vw, 121px);
}
.cr-stat-icon img {
	width: 100%;
	height: auto;
	display: block;
}
.cr-stat-number {
	color: #fff;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(44px, 3.8vw, 64px);
	font-weight: 600;
	line-height: 1;
	min-width: clamp(100px, 9.5vw, 162px);
}
/* The card divider is the site's tapered marker in blue (8x85 vector
   in the design), not a plain bar. */
.cr-stat-divider {
	width: 8px;
	height: clamp(60px, 5vw, 85px);
	align-self: center;
	background: #2ca7ff;
	clip-path: polygon(0 0, 100% 3.8%, 100% 52.1%, 46% 54.2%, 46% 100%, 0 100%);
}
.cr-stat-desc {
	color: #fff;
	font-size: 18px;
	line-height: 1.35;
	max-width: 297px;
}

.cr-mosaic-section img {
	width: 100%;
	height: auto;
	display: block;
}

.cr-sdg-section {
	padding: 70px 0 76px;
}
.cr-sdg-row {
	margin-top: 46px;
}
.cr-sdg-item {
	gap: 13px;
	max-width: 400px;
}
.cr-sdg-icon {
	width: 122px;
}
.cr-sdg-icon img {
	width: 100%;
	height: auto;
	display: block;
}
.cr-sdg-label {
	color: #e31827;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(28px, 2.2vw, 38px);
	font-weight: 600;
	line-height: 1;
}
.cr-sdg-title {
	color: #134060;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(20px, 1.5vw, 24px);
	font-weight: 600;
	line-height: 1.1;
	margin: 4px 0 6px;
}
.cr-sdg-item p {
	color: #3c3c3c;
	font-size: 18px;
	line-height: 1.35;
}

.cr-awards-section {
	background: #134060;
	padding: 70px 0 84px;
}
.cr-awards-section h2 {
	margin-bottom: 20px;
}
.cr-awards-row {
	margin-top: 52px;
}
.cr-award-item {
	max-width: 448px;
}
.cr-award-icon {
	width: clamp(95px, 7.85vw, 133.5px);
	margin-bottom: -11px;
}
.cr-award-icon img {
	width: 100%;
	height: auto;
	display: block;
}
.cr-award-title {
	color: #fff;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(28px, 2.2vw, 38px);
	font-weight: 600;
	line-height: 1.1;
	margin-bottom: 14px;
}
.cr-award-item p {
	color: #fff;
	font-size: 18px;
	line-height: 1.4;
	max-width: 404px;
	margin-left: auto;
	margin-right: auto;
}

.cr-team-section {
	padding: 66px 0 84px;
}
.cr-team-copy {
	max-width: 767px;
	margin-top: 22px;
}
.cr-team-copy p {
	color: #134060;
	font-size: 18px;
	line-height: 1.4;
}
.cr-team-img-wrapper {
	margin-top: 40px;
}
.cr-team-img-wrapper img {
	width: 100%;
	height: auto;
	display: block;
}

/* Giving Back: navy variant of the careers split section. */
.careers-split-section--navy {
	background: #134060;
	padding: 70px 0 64px;
}
.careers-split-section--navy .careers-split-intro p,
.careers-split-section--navy .careers-split-copy p {
	color: #fff;
}
.careers-split-section--white + .careers-split-section--navy {
	margin-top: 24px;
}


/* Simple dropdown section label (About > GIVING BACK): blue uppercase
   non-link divider heading per the Figma nav spec. */
.main-menu-wrapper .main-menu > li.menu-simple-dd > .sub-menu > li.menu-dd-label > a {
	color: #2ca7ff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 2px;
	text-transform: uppercase;
	pointer-events: none;
	cursor: default;
	margin-top: 25px;
}


/* Careers: the first split section's CTA indents to the items' left
   edge per the design (second section's stays flush). */
@media (min-width: 992px) {
	#why-work .careers-split-button {
		margin-left: clamp(0px, 2vw, 35px);
	}
}

/* Design places the stat cluster ~220px in from the right edge. */
@media (min-width: 992px) {
	.careers-safety-stat {
		padding-right: clamp(0px, 12.9vw, 219px);
	}
}

/* -------- Performance Pneumatics page -------- */
.pp-red-title {
	color: #e31827;
}
.pp-copy p {
	color: #3c3c3c;
}
.pp-copy h4 {
	color: #134060;
	font-weight: 400;
	margin-bottom: 8px;
}
.pp-copy-light p {
	color: #fff;
}
.pp-copy-light h4 {
	color: #fff;
	font-weight: 400;
	margin-bottom: 8px;
}
.pp-why-section {
	padding: 64px 0 40px;
}

.pp-precision-section {
	padding: 40px 0 56px;
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 72%, #e4e4e4 100%);
}
/* Navy panel bleeds to the viewport's left edge (champion pattern). */
.pp-precision-panel {
	background: #134060;
	padding: clamp(28px, 3.4vw, 58px) clamp(24px, 3vw, 60px) clamp(28px, 3.4vw, 58px) 0;
}
.pp-precision-panel::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: calc(100% + 50vw);
	background: #134060;
	z-index: -1;
}
.pp-precision-panel h2 {
	margin-bottom: 10px;
}
.pp-precision-copy p {
	color: #fff;
	margin-bottom: 0;
}
.pp-precision-copy h4 {
	color: #fff;
	font-weight: 400;
	margin-bottom: 8px;
}
.pp-precision-items {
	max-width: 620px;
	margin-left: auto;
}

.pp-three-section {
	padding: 70px 0 50px;
}
.pp-three-logo img {
	width: clamp(400px, 41vw, 695px);
	height: auto;
}
.pp-three-intro {
	margin-top: 44px;
}
.pp-three-subtitle {
	color: #134060;
	font-size: clamp(22px, 1.8vw, 30px);
	line-height: 1.3;
}
/* Title centers over its subtitle; the divider is the site's tapered
   marker, not a plain border. */
.pp-three-intro .col-lg-5 {
	text-align: center;
}
.pp-three-copy {
	position: relative;
	padding-left: clamp(20px, 2.2vw, 36px);
}
.pp-three-copy::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 125px;
	background: #e0e0e0;
	clip-path: polygon(0 0, 100% 3.8%, 100% 52.1%, 46% 54.2%, 46% 100%, 0 100%);
}

.pp-brands-section {
	background: #f5f5f5;
	padding: 64px 0 72px;
}
/* Card dividers are the tapered marker (8x450 vectors in the design). */
.pp-brands-row > .col-md-4 + .col-md-4 {
	position: relative;
}
.pp-brands-row > .col-md-4 + .col-md-4::before {
	content: "";
	position: absolute;
	left: 0;
	top: -15px;
	width: 8px;
	height: calc(100% + 30px);
	background: #e0e0e0;
	clip-path: polygon(0 0, 100% 3.8%, 100% 52.1%, 46% 54.2%, 46% 100%, 0 100%);
}
.pp-brand-card {
	padding: 0 clamp(16px, 2vw, 34px);
}
.pp-brand-logo {
	height: 104px;
	margin-bottom: 26px;
}
.pp-brand-logo img {
	max-height: 104px;
	max-width: clamp(220px, 20vw, 344px);
	width: auto;
	height: auto;
	object-fit: contain;
}
.pp-brand-subtitle {
	color: #e31827;
	margin-bottom: 10px;
}
.pp-brand-copy {
	color: #3c3c3c;
	font-size: 18px;
	line-height: 1.4;
}

.pp-partner-section {
	padding: 70px 0 64px;
}

/* Sticky red panel with cards scrolling beside it (champion pattern:
   overflow-x clip on the section - overflow hidden would kill sticky). */
.pp-portfolio-section {
	background: #fff;
	padding: 74px 0;
	overflow-x: clip;
}
.pp-portfolio-panel {
	position: sticky;
	top: 140px;
	background: #e31827;
	padding: clamp(30px, 4vw, 64px) clamp(24px, 3vw, 56px) clamp(30px, 4vw, 64px) 0;
	margin-right: clamp(16px, 3vw, 55px);
}
.pp-portfolio-panel::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: calc(100% + 50vw);
	background: #e31827;
	z-index: 1;
}
.pp-portfolio-panel h2 {
	margin-bottom: 14px;
}
.pp-portfolio-copy p {
	color: #fff;
}
.pp-portfolio-copy strong em,
.pp-portfolio-copy em strong {
	font-weight: 700;
	font-style: italic;
}
.pp-portfolio-cards {
	gap: 24px;
}
.pp-portfolio-card {
	background: #134060;
	padding: clamp(24px, 2.6vw, 44px) clamp(24px, 3vw, 56px);
	min-height: 228px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.pp-portfolio-card--steel {
	background: #3d5a72;
}
.pp-portfolio-card::before,
.pp-portfolio-card::after {
	content: "";
	position: absolute;
	width: 50px;
	height: 42px;
	border: 2px solid #2ca7ff;
}
.pp-portfolio-card::before {
	top: 10px;
	right: 10px;
	border-left: 0;
	border-bottom: 0;
}
.pp-portfolio-card::after {
	bottom: 10px;
	left: 10px;
	border-right: 0;
	border-top: 0;
}
.pp-portfolio-card h5 {
	color: #2ca7ff;
	margin-bottom: 10px;
}
.pp-portfolio-card p {
	color: #fff;
	font-size: 18px;
	line-height: 1.4;
}

/* Design gradient: white at the top fading to gray at the bottom. */
.pp-ready-section {
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #e3e3e3 100%);
	padding: 64px 0 70px;
}
.pp-ready-copy {
	max-width: 700px;
	margin-top: 6px;
}
.pp-ready-copy p {
	color: #3c3c3c;
	font-size: clamp(18px, 1.4vw, 24px);
	line-height: 1.4;
}
.pp-ready-buttons {
	margin-top: 26px;
}

.pp-idex-section {
	padding: 66px 0 80px;
}
.pp-idex-media {
	max-width: 684px;
}
.pp-idex-logo {
	text-align: center;
	margin-bottom: 28px;
}
.pp-idex-logo img {
	width: clamp(260px, 23.5vw, 400px);
	height: auto;
}
.pp-idex-img img {
	width: 100%;
	height: auto;
	display: block;
}
.pp-idex-copy h4,
.careers-split-intro h4 {
	color: #134060;
	font-weight: 400;
	margin: 0 0 8px;
}
.careers-split-section--navy .careers-split-intro h4 {
	color: #fff;
}

/* -------- IDEX Foundation page -------- */
.if-hero-logo img {
	width: clamp(140px, 11.5vw, 195px);
	height: auto;
	margin-bottom: 18px;
}
.if-quote-section {
	padding: clamp(56px, 6vw, 90px) 0;
}
.if-quote-person {
	gap: 18px;
	margin-top: 30px;
}
.if-quote-photo {
	width: clamp(100px, 8.7vw, 148px);
}
.if-quote-photo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

/* The second card row tucks ~138px down over the photo band (design:
   cards bottom y1990, band top y1852). */
.if-ach-section {
	padding: 66px 0 0;
	position: relative;
	z-index: 2;
	margin-bottom: clamp(-138px, -8.1vw, -60px);
}
.if-ach-section .pp-red-title {
	margin-bottom: 100px;
}
.if-ach-row {
	--bs-gutter-x: clamp(24px, 2.6vw, 45px);
	--bs-gutter-y: clamp(90px, 8vw, 110px);
}
.if-ach-card {
	background: #134060;
	border-radius: 16px;
	padding: clamp(60px, 5.5vw, 90px) clamp(24px, 3vw, 55px) clamp(28px, 3vw, 44px);
	max-width: 588px;
	margin: 0 auto;
}
.if-ach-icon {
	top: 0;
	transform: translate(-50%, -50%);
	width: clamp(75px, 5.85vw, 99.5px);
}
.if-ach-icon img {
	width: 100%;
	height: auto;
	display: block;
}
.if-ach-stat {
	color: #fff;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(44px, 3.8vw, 64px);
	font-weight: 600;
	line-height: 1;
}
.if-ach-label {
	color: #2ca7ff;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(20px, 1.5vw, 24px);
	font-weight: 600;
	margin: 6px 0 12px;
}
.if-ach-card p {
	color: #fff;
	font-size: 18px;
	line-height: 1.4;
	max-width: 393px;
	margin-left: auto;
	margin-right: auto;
}

.if-commit-section {
	padding: 70px 0;
}
.if-commit-content .video-btn {
	margin-top: 22px;
}
.if-commit-thumb {
	max-width: 685px;
	border-radius: 8px;
	overflow: hidden;
}
.if-commit-thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.if-involved-section {
	background: #134060;
	padding: clamp(56px, 6vw, 86px) 0;
	border-bottom: 4px solid #e31827;
}
.if-involved-copy {
	max-width: 961px;
	margin-top: 16px;
}
.if-involved-copy p {
	color: #fff;
	font-size: clamp(18px, 1.4vw, 24px);
	line-height: 1.45;
}
.if-involved-button {
	margin-top: 28px;
}


/* Giving Back splits breathe more than the careers defaults. */
.page-template-template-giving-back .careers-split-section {
	padding: clamp(60px, 5.5vw, 92px) 0 clamp(40px, 4vw, 66px);
}
.page-template-template-giving-back .careers-split-section--navy {
	padding: clamp(70px, 6vw, 100px) 0 clamp(64px, 5.6vw, 94px);
}

/* Foundation quote text is left-aligned in the design (careers rotator
   stays centered). */
.if-quote-section .careers-testimonial-quote {
	text-align: left;
}

/* ==================================================================
   51. FAQ PAGE
   Category-grouped Bootstrap accordions with the brand red toggle
   chip; one answer open at a time per category.
   ================================================================== */

/* The header is position:fixed, so a page without a hero must clear it
   itself: design places the FAQ title 199px down from the page top
   (106px header + 93px gap). */
/* The header is position:fixed (no layout space) and its height does
   NOT scale with the viewport, so the clearance must be header height
   plus a scaling gap - a single scaling value squeezes the gap shut on
   narrower screens. Design gap below the header is 93px at 1700. */
.faq-section {
	padding: calc(121px + clamp(60px, 6vw, 102px)) 0 clamp(50px, 5vw, 80px);
}
/* Design renders these page titles in caps (the node text is title
   case, the layer applies the transform). */
/* Design sets these interior page titles in Acumin Pro Condensed 66/400
   (FAQ, Video Gallery and Product Certifications all share the spec). */
.faq-title {
	color: #e31827;
	font-size: clamp(48px, 5.5vw, 66px);
	font-weight: 400;
	line-height: 1.15;
	margin-bottom: 9px;
	text-transform: uppercase;
}
.faq-intro {
	max-width: 700px;
	margin-bottom: clamp(40px, 4vw, 62px);
}
.faq-intro p {
	color: #000;
	line-height: 1.4;
	margin-bottom: 0;
}
/* Design's outlined skewed bars, bleeding off the right edge
   (group sits at x1264-1709 of the 1700 frame, y157-349). */
/* Offsets are measured from the HEADER, not the page top: the header is
   fixed at 121px and does not scale, so a page-top offset drifts the
   pattern upward as the viewport narrows (at 1200 it slid behind the
   nav). Design gap below the header is 51px at 1700 = 3vw. */
.faq-deco {
	position: absolute;
	top: calc(121px + clamp(25px, 3vw, 51px));
	right: -9px;
	width: clamp(280px, 26.2vw, 445px);
	height: auto;
	z-index: 1;
}

.faq-category {
	margin-bottom: clamp(30px, 3vw, 48px);
}
/* Design insets: category rule starts 119px in from the content edge
   and ends 120px short of it; question rows inset a further 106px. */
.faq-category-title {
	color: #e31827;
	font-size: clamp(26px, 2.3vw, 30px);
	line-height: 1.05;
	padding-bottom: 10px;
	border-bottom: 1px solid #e31827;
	margin: 0 clamp(0px, 7vw, 120px) clamp(18px, 2vw, 30px) clamp(0px, 7vw, 119px);
	scroll-margin-top: 140px;
}
.faq-accordion {
	margin: 0 clamp(0px, 7vw, 120px) 0 clamp(0px, 13.2vw, 225px);
}
.faq-item {
	background: transparent;
	border: 0;
	margin-bottom: 12px;
}
.faq-item .accordion-header {
	margin: 0;
}
.faq-question {
	background: #f2f4f6;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #134060;
	/* Design specs the STANDARD face here at 700, not condensed 600. */
	font-family: "acumin-pro", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	padding: 14px 0 14px 20px;
	gap: 20px;
	align-items: center;
	width: 100%;
	text-align: left;
}
.faq-question:not(.collapsed) {
	background: #f2f4f6;
	color: #134060;
	box-shadow: none;
}
.faq-question:focus {
	box-shadow: none;
	border-color: transparent;
}
.faq-question::after {
	display: none;
}
.faq-toggle-icon {
	width: 30px;
	height: 30px;
	background: #e31827;
	margin-left: auto;
	transition: transform 0.3s linear;
}
.faq-question:not(.collapsed) .faq-toggle-icon {
	transform: rotate(180deg);
}
.faq-answer {
	padding: 16px 46px 8px 20px;
}
.faq-answer p {
	color: #231f20;
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 12px;
}
.faq-answer p:last-child {
	margin-bottom: 0;
}

.faq-support-section {
	padding: clamp(50px, 5vw, 80px) 0 clamp(60px, 6vw, 96px);
}
/* Design: 50px / 57.5px line-height. */
.faq-support-title {
	color: #134060;
	line-height: 1.15;
}
.faq-support-copy {
	max-width: 660px;
	margin-top: 10px;
}
.faq-support-copy p {
	color: #3c3c3c;
	font-size: 20px;
	line-height: 1.2;
	margin-bottom: 0;
}
.faq-support-button {
	margin-top: 30px;
}
/* Design's skewed stripe clusters (389x91 each) flanking the CTA and
   bleeding 50px off each viewport edge. */
.faq-support-stripes {
	position: absolute;
	top: clamp(120px, 12.2vw, 207px);
	width: clamp(240px, 22.9vw, 389px);
	height: auto;
	z-index: 1;
}
.faq-support-stripes--left {
	left: clamp(-50px, -2.9vw, 0px);
}
.faq-support-stripes--right {
	right: clamp(-50px, -2.9vw, 0px);
}

/* ==================================================================
   52. VIDEO GALLERY
   Category-grouped card grid with instant search and lightbox
   playback. Cards carry the design's offset shadow-plate.
   ================================================================== */

.vg-head {
	margin-bottom: clamp(26px, 3vw, 44px);
}
.vg-intro {
	margin-bottom: 0;
	max-width: 700px;
}
.vg-search-wrap {
	max-width: 388px;
}
.vg-search {
	width: 100%;
	height: 39px;
	background: #f2f4f6;
	border: 1px solid #d9dde2;
	border-radius: 100px;
	color: #134060;
	font-size: 17px;
	padding: 0 42px 0 26px;
	outline: 0;
}
.vg-search::placeholder {
	color: #7b8794;
}
.vg-search:focus {
	border-color: #2ca7ff;
}
.vg-search-clear {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: #7b8794;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}
.vg-search-clear:hover {
	color: #e31827;
}

.vg-category-title {
	margin-left: 0;
	margin-right: 0;
}
.vg-grid {
	margin-bottom: clamp(28px, 3vw, 46px);
}
.vg-card {
	text-decoration: none;
}
/* Design offsets a plate behind the thumbnail (12px right / 12px down). */
.vg-thumb {
	aspect-ratio: 443 / 236;
	background: #0d1b26;
	box-shadow: 12px 12px 0 0 rgba(19, 64, 96, 0.18);
	transition: box-shadow 0.3s linear, transform 0.3s linear;
}
.vg-card:hover .vg-thumb {
	box-shadow: 12px 12px 0 0 rgba(227, 24, 39, 0.55);
}
.vg-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s linear;
}
.vg-card:hover .vg-thumb img {
	transform: scale(1.04);
}
.vg-thumb-empty {
	width: 100%;
	height: 100%;
	background: linear-gradient(116deg, #134060 30%, #141428 100%);
}
.vg-play {
	width: clamp(74px, 8vw, 136px);
	height: clamp(74px, 8vw, 136px);
	transform: translate(-50%, -50%);
	border: 5px solid #fff;
	border-radius: 100%;
	transition: background 0.3s linear, border-color 0.3s linear;
}
.vg-play svg {
	width: clamp(18px, 2vw, 34px);
	height: auto;
	margin-left: 6px;
}
.vg-card:hover .vg-play {
	background: rgba(227, 24, 39, 0.85);
	border-color: #e31827;
}
.vg-duration {
	right: 12px;
	bottom: 12px;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 3px;
}
.vg-card-title {
	color: #134060;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(24px, 1.9vw, 30px);
	font-weight: 600;
	line-height: 1.2;
	margin-top: 18px;
	transition: color 0.3s linear;
}
.vg-card:hover .vg-card-title {
	color: #e31827;
}

.vg-noresults,
.vg-empty {
	color: #3c3c3c;
	font-size: 18px;
	padding: 20px 0 10px;
}
.vg-reset {
	background: none;
	border: 0;
	color: #e31827;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}

/* Lightbox */
/* Design: the player sits inside a solid navy frame (27px at a 1051px
   box = 2.6%), on a desaturated dark overlay, with a blue square close
   chip above the frame's top-right corner. No title bar - the embed
   carries its own title. */
.vg-lightbox {
	position: relative;
	max-width: 1051px;
	margin: 0 auto;
	background: #134060;
	padding: 2.57%;
}
.vg-lightbox iframe,
.vg-lightbox video {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: block;
	border: 0;
	background: #000;
}
.vg-lightbox-wrap.mfp-bg {
	background: #0e1a22;
	opacity: 0.82;
}
/* Design: a 67x63 dark-navy chip sitting flush on top of the frame's
   right edge, holding a 24px light-blue X (not a blue chip with a
   white X - the design inverts those). */
.vg-lightbox-wrap .mfp-close {
	width: 67px;
	height: 63px;
	right: 0;
	top: -63px;
	background: #0a273b;
	opacity: 1;
	font-size: 0;
	line-height: 0;
	padding: 0;
	transition: background 0.3s linear;
}
.vg-lightbox-wrap .mfp-close::before,
.vg-lightbox-wrap .mfp-close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 24px;
	height: 4px;
	background: #2ca7ff;
	transition: background 0.3s linear;
}
.vg-lightbox-wrap .mfp-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.vg-lightbox-wrap .mfp-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
.vg-lightbox-wrap .mfp-close:hover {
	background: #134060;
}
.vg-lightbox-wrap .mfp-close:hover::before,
.vg-lightbox-wrap .mfp-close:hover::after {
	background: #fff;
}

/* -------- Contact Us page -------- */
/* Design: title sits 116px below the section top. */
.ct-touch-section {
	padding: clamp(60px, 6.8vw, 116px) 0 clamp(60px, 7vw, 100px);
}
.ct-details {
	margin-top: clamp(20px, 1.65vw, 28px);
}
.ct-details-label {
	color: #e31827;
	font-size: 16px;
	letter-spacing: 1.2px;
	padding-bottom: 10px;
	border-bottom: 1px solid #3d6280;
	margin-bottom: 22px;
}
/* Standard Acumin Pro here, not condensed: the address node's BASE
   style is condensed but every visible character overrides to standard
   (Acumin Pro w275 for the lines, w600 for the Ph/Fx labels). Only the
   CONTACT / Socials column labels are genuinely condensed. */
.ct-company {
	color: #2ca7ff;
	font-family: "acumin-pro", sans-serif;
	font-size: 20px;
	font-weight: 600;
}
.ct-company-sub {
	color: #fff;
	font-size: 14px;
	font-style: italic;
	margin-bottom: 19px;
}
.ct-address p {
	color: #fbfdff;
	font-family: "acumin-pro", sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	margin-bottom: 12px;
}
.ct-address strong {
	font-weight: 600;
}
.ct-address p:last-child {
	margin-bottom: 0;
}
.ct-address a {
	color: #fff;
	text-decoration: underline;
}
.ct-address a:hover {
	color: #2ca7ff;
}
.ct-touch-content .custom-contact-img-wrapper {
	margin-top: clamp(30px, 3.24vw, 55px);
}


/* Design starts the form column 30px above the section title. */
@media (min-width: 992px) {
	.ct-touch-section .col-lg-7 {
		margin-top: clamp(-6px, -0.35vw, 0px);
	}
}

/* Contact page: the "Get In Touch with US Valve" rule is its own length
   (75px in the design, vs 104px on "Ready to Talk? So are We.") and sits
   on the text's vertical centre. */
@media (min-width: 992px) {
	.page-template-template-contact .ct-touch-content h2::after {
		left: calc(100% + 10px);
		width: 75px;
		top: 50%;
		transform: translateY(-50%);
	}
}

/* ==================================================================
   53. PRODUCT CERTIFICATIONS & PATENTS
   ================================================================== */

/* Design: title tight-top y199 (line box 191.5), intro line box y399.
   66px / 115% type puts 132px of margin between the two boxes. */
.pc-title {
	line-height: 1.15;
	margin-bottom: clamp(50px, 7.74vw, 132px);
}
.pc-intro {
	max-width: 1400px;
	margin-bottom: clamp(24px, 2.6vw, 44px);
}
.pc-intro p {
	color: #231f20;
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 25px;
}
.pc-intro p:last-child {
	margin-bottom: 0;
}
.pc-intro a {
	color: #e31827;
	text-decoration: underline;
}
.pc-intro a:hover {
	color: #e03643;
}

.pc-cert-row {
	gap: clamp(24px, 2.5vw, 42px);
	margin-bottom: clamp(34px, 3.7vw, 63px);
}
.pc-badge {
	width: clamp(120px, 10.1vw, 172px);
}
.pc-badge img {
	width: 100%;
	height: auto;
	display: block;
}
/* Design sizes each certificate button to its own label (247 vs 386 wide),
   so they hug their text rather than stretching to a shared width. */
.pc-doc-buttons {
	gap: 21px;
	align-items: flex-start;
}
.pc-doc-buttons .us-btn-1 {
	text-align: center;
}

.pc-patents {
	margin-bottom: clamp(30px, 3.9vw, 67px);
}
/* Design grid: table spans x391-1310 of the 1700 frame (253px in from
   the container's left edge, 920 wide) and cell text indents 73px. */
.pc-patents-title {
	color: #134060;
	font-size: clamp(38px, 3.5vw, 50px);
	line-height: 1.05;
	margin: 0 0 12px clamp(0px, 13vw, 221px);
}
.pc-table-wrap {
	margin-left: clamp(0px, 13.12vw, 223px);
	margin-right: clamp(0px, 13vw, 221px);
	overflow-x: auto;
}
.pc-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}
.pc-table thead th {
	color: #e31827;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 1.28px;
	text-transform: uppercase;
	padding: 0 20px 12px clamp(12px, 4.3vw, 73px);
	border-bottom: 1px solid #134060;
	white-space: nowrap;
}
.pc-table thead th.pc-th-item {
	width: 52.5%;
}
/* Design alternates #fafafa / #ffffff rows, 66px tall, split by a
   1px #c4c4c4 rule under every row including the last. */
.pc-table tbody tr {
	height: clamp(52px, 3.88vw, 66px);
	border-bottom: 1px solid #c4c4c4;
}
.pc-table tbody tr:nth-child(odd) {
	background: #fafafa;
}
.pc-table tbody td {
	padding: 9px 20px 9px clamp(12px, 4.3vw, 73px);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 1.28px;
	text-transform: uppercase;
	color: #000;
	vertical-align: middle;
}
.pc-table tbody td.pc-td-item {
	font-weight: 600;
}

/* ==================================================================
   54. NEWS & INSIGHTS (listing + single post)
   ================================================================== */

/* ---------- listing head ---------- */
/* Design gap is measured from the search's bottom edge (340), which sits
   below the intro's (326), not from the intro. */
.news-head {
	gap: 40px;
	margin-bottom: clamp(18px, 1.3vw, 22px);
}
.news-intro {
	flex: 1 1 640px;
	min-width: 0;
	max-width: 921px;
}
.news-intro p {
	color: #000;
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 0;
}

/* Design: 388x39 pill, #f4f4f4 on a #b8b8b8 hairline, sitting 25px
   lower than the intro's first line. */
.news-search {
	flex: 0 0 auto;
	width: clamp(240px, 22.8vw, 388px);
	margin-top: 25px;
}
.news-search-input {
	width: 100%;
	height: 39px;
	border-radius: 100px;
	border: 1px solid #b8b8b8;
	background: #f4f4f4;
	padding: 0 29px;
	font-family: acumin-pro-condensed, sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: #134060;
	outline: none;
}
.news-search-input::placeholder {
	color: #134060;
	opacity: 1;
}
.news-search-input:focus {
	border-color: #134060;
}

/* ---------- filter pills ---------- */
/* Design pills are parallelograms skewed 25.16px over a 47px height, and
   they interlock: the boxes overlap 15px so the slanted edges sit 10px
   apart. Hence the negative margin rather than a gap. */
.news-filters {
	gap: 20px;
	margin-bottom: 17px;
}
.news-sort-label {
	font-family: acumin-pro-condensed, sans-serif;
	font-size: clamp(22px, 1.76vw, 30px);
	font-weight: 700;
	line-height: 1.05;
	color: #134060;
}
.news-pill {
	position: relative;
	border: 0;
	background: #e3e3e3;
	color: #8a8a8a;
	font-family: acumin-pro-condensed, sans-serif;
	font-size: clamp(22px, 1.76vw, 30px);
	font-weight: 500;
	line-height: 1;
	height: 47px;
	padding: 0 34px;
	margin-right: -15px;
	clip-path: polygon(25.16px 0, 0 100%, calc(100% - 25.16px) 100%, 100% 0);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.news-pill:last-child {
	margin-right: 0;
}
.news-pill:hover,
.news-pill:focus-visible {
	background: #d1d1d1;
	color: #7a7a7a;
}
.news-pill.is-active {
	background: #e31827;
	color: #fff;
	z-index: 2;
}
.news-pill.is-active:hover {
	background: #e03643;
	color: #fff;
}

.news-rule {
	height: 2px;
	background: #e31827;
	margin-bottom: 32px;
}

/* ---------- card grid ---------- */
.news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 35px;
	row-gap: 55px;
}
.news-card-link {
	display: block;
	text-decoration: none;
}
.news-card-media {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid #a4a4a4;
	aspect-ratio: 443 / 320;
	background: #f4f4f4;
}
.news-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}
.news-card-link:hover .news-card-media img {
	transform: scale(1.04);
}
/* Angled tag pinned to the card's top-left; the right edge draws in 21px
   from top to bottom (design vector M0 0V39H274.87L296 0H0Z). */
.news-card-badge {
	position: absolute;
	top: 0;
	left: 0;
	height: 39px;
	display: flex;
	align-items: center;
	padding: 0 36px 0 18px;
	background: #134060;
	color: #fff;
	font-family: acumin-pro-condensed, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	clip-path: polygon(0 0, 100% 0, calc(100% - 21.13px) 100%, 0 100%);
}
.news-card-badge.news-badge-case-study {
	background: #2ca7ff;
}
.news-card-title {
	font-size: clamp(22px, 1.76vw, 30px);
	font-weight: 600;
	line-height: 1.05;
	color: #134060;
	margin: 16px 0 0;
	transition: color 0.2s ease;
}
.news-card-link:hover .news-card-title {
	color: #e31827;
}

.news-empty {
	font-size: 18px;
	color: #3c3c3c;
	margin: 40px 0 0;
}
.news-more {
	margin-top: clamp(40px, 5.9vw, 100px);
}
.news-more .us-btn-1[disabled] {
	opacity: 0.6;
	pointer-events: none;
}
.news-section {
	padding-bottom: clamp(50px, 6vw, 102px);
}
.news-pagination {
	gap: 10px;
	margin-top: clamp(40px, 4vw, 68px);
}
.news-pagination .page-numbers {
	min-width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid #d1d1d1;
	color: #134060;
	font-family: acumin-pro-condensed, sans-serif;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
}
.news-pagination .page-numbers.current,
.news-pagination a.page-numbers:hover {
	background: #e31827;
	border-color: #e31827;
	color: #fff;
}

/* ---------- single post ---------- */
/* The header is fixed at 121px and does not scale, so clear it explicitly
   (design gap from header bottom to the Back button is 50px). */
.post-section {
	padding: calc(121px + clamp(28px, 2.94vw, 50px)) 0 clamp(60px, 12vw, 204px);
}
.post-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 148px;
	height: 50px;
	padding: 0 24px;
	border: 2px solid #e31827;
	border-radius: 100px;
	color: #134060;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.post-back:hover,
.post-back:focus-visible {
	background: #e31827;
	color: #fff;
}

/* Design content column is x389-1311 of the 1700 frame. */
.post-column {
	max-width: 922px;
	margin: 0 auto;
	padding-top: clamp(34px, 3.7vw, 63px);
}
.post-title {
	font-size: clamp(34px, 2.94vw, 50px);
	font-weight: 600;
	line-height: 1.05;
	color: #134060;
	margin: 0 0 14px;
}
.post-lead p,
.post-content p {
	font-size: 18px;
	line-height: 1.4;
	color: #414141;
	margin-bottom: 25px;
}
.post-lead p:last-child {
	margin-bottom: 0;
}
.post-featured {
	margin: 33px 0 0;
}
.post-featured img {
	width: 100%;
	aspect-ratio: 922 / 436;
	object-fit: cover;
	display: block;
	border-radius: 16px;
	border: 1px solid #a4a4a4;
}
.post-content {
	margin-top: 33px;
}
.post-content > *:first-child {
	margin-top: 0;
}
.post-content h2,
.post-content h3 {
	font-family: acumin-pro-condensed, sans-serif;
	font-size: clamp(26px, 1.88vw, 32px);
	font-weight: 600;
	line-height: 1.2;
	color: #e31827;
	text-transform: uppercase;
	margin: 28px 0 8px;
}
.post-content h3 {
	font-size: clamp(22px, 1.53vw, 26px);
	color: #134060;
}
.post-content ul,
.post-content ol {
	margin: 0 0 25px 22px;
	padding: 0;
}
.post-content li {
	font-size: 18px;
	line-height: 1.4;
	color: #414141;
	margin-bottom: 8px;
}
.post-content a {
	color: #e31827;
	text-decoration: underline;
}
.post-content a:hover {
	color: #e03643;
}
.post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
	margin: 8px 0 25px;
}
.post-content blockquote {
	margin: 28px 0;
	padding-left: 24px;
	border-left: 4px solid #e31827;
}
.post-content blockquote p {
	font-size: 20px;
	color: #134060;
}
.post-content > *:last-child {
	margin-bottom: 0;
}

.post-share {
	gap: 19px;
	margin-top: clamp(34px, 3.35vw, 57px);
}
.post-share-label {
	font-family: acumin-pro-condensed, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: #e31827;
	text-transform: uppercase;
}
.post-share-link {
	display: inline-flex;
	line-height: 0;
	transition: opacity 0.2s ease;
}
.post-share-link:hover {
	opacity: 0.8;
}

/* ==================================================================
   55. CASE STUDY POST LAYOUT
   Frame 17131:14511. Content column is 1162 centred (the design's
   x269-1431); images and the quote band run wider than the text.
   ================================================================== */

.cs-column {
	max-width: 1162px;
	margin: 0 auto;
}
.cs-eyebrow {
	font-family: acumin-pro-condensed, sans-serif;
	font-size: clamp(20px, 1.41vw, 24px);
	font-weight: 600;
	line-height: 1.2;
	color: #134060;
	margin-top: clamp(32px, 3.35vw, 57px);
}
.cs-title {
	font-size: clamp(38px, 3.88vw, 66px);
	font-weight: 400;
	line-height: 1.15;
	color: #e31827;
	margin: 0;
}

/* Design image is 1226 wide against a 1162 text column. */
.cs-featured,
.cs-block-image {
	max-width: 1226px;
	margin: clamp(18px, 1.47vw, 25px) auto 0;
}
.cs-featured img,
.cs-block-image img {
	width: 100%;
	aspect-ratio: 1226 / 536;
	object-fit: cover;
	display: block;
	border-radius: 16px;
}
.cs-block-image {
	margin-top: clamp(30px, 3.4vw, 58px);
}
/* The quote band's portrait overhangs its bottom edge, so an image that
   follows the band needs to clear it. */
.cs-quote-section + .container > .cs-block-image {
	margin-top: clamp(40px, 4.6vw, 78px);
}

/* Red pill with the navy play disc overlapping its right end. */
.cs-video-btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-decoration: none;
	align-items: center;
}
.cs-video-label {
	display: inline-flex;
	align-items: center;
	height: 50px;
	padding: 0 77px 0 36px;
	border-radius: 100px;
	background: #e31827;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}
.cs-video-play {
	width: 56px;
	height: 56px;
	/* Design: the disc overhangs the pill's right edge by 14px. */
	margin-left: -42px;
	border-radius: 50%;
	background: #134060;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color 0.2s ease;
}
.cs-video-play svg {
	width: 17px;
	height: 16px;
	margin-left: 3px;
}
.cs-video-btn:hover .cs-video-label {
	background: #e03643;
}
.cs-video-btn:hover .cs-video-play {
	background: #1b5688;
}

.cs-chapter {
	margin-top: clamp(24px, 2.24vw, 38px);
}
.cs-chapter-eyebrow {
	font-family: acumin-pro-condensed, sans-serif;
	font-size: clamp(20px, 1.41vw, 24px);
	font-weight: 600;
	line-height: 1.2;
	color: #e31827;
}
.cs-chapter-title {
	font-size: clamp(34px, 2.94vw, 50px);
	font-weight: 600;
	line-height: 1.05;
	color: #134060;
	margin: 0 0 12px;
}
.cs-chapter-body p {
	font-size: 18px;
	line-height: 1.4;
	color: #414141;
	margin-bottom: 25px;
}
.cs-chapter-body p:last-child {
	margin-bottom: 0;
}
.cs-chapter-body a {
	color: #e31827;
	text-decoration: underline;
}

/* Design: icon at 36px in from the column, text at 70px, rows 46px apart. */
.cs-checklist {
	margin: 16px 0 0;
	padding: 0;
}
.cs-check-item {
	gap: 12px;
	padding-left: 36px;
	margin-bottom: 21px;
}
.cs-check-item:last-child {
	margin-bottom: 0;
}
.cs-check-icon {
	width: 22px;
	line-height: 0;
	margin-top: 4px;
}
.cs-check-text {
	font-size: 18px;
	line-height: 1.4;
	color: #231f20;
}
.cs-check-text strong {
	font-weight: 700;
}

/* Full-bleed navy band; the portrait overhangs its bottom edge. */
.cs-quote-section {
	background: #134060;
	/* The chapter body was running straight into the navy band. */
	margin: clamp(50px, 5.9vw, 100px) 0 0;
	padding: clamp(40px, 3.6vw, 61px) 0 0;
	min-height: clamp(280px, 26vw, 442px);
}
/* Sized from the glyph's measured ink (130x112 at the 1700 frame), not
   from the Figma text node's 242px box - the box is far wider than the mark. */
/* The opening mark overlaps the portrait and sits IN FRONT of it in the
   design, so it has to clear the container's z-3. */
.cs-quote-mark {
	top: clamp(14px, 1.6vw, 27px);
	width: clamp(70px, 7.7vw, 131px);
	z-index: 4;
	pointer-events: none;
}
.cs-quote-open {
	left: clamp(10px, 13.76vw, 234px);
}
.cs-quote-close {
	right: clamp(10px, 9vw, 153px);
}
/* Band contents sit on the same 1162 column as the article text. */
.cs-quote-inner {
	gap: clamp(30px, 4.4vw, 74px);
	max-width: 1162px;
	margin: 0 auto;
}
.cs-quote-photo {
	width: clamp(200px, 20.1vw, 342px);
	margin-bottom: clamp(-40px, -3.2vw, -55px);
}
.cs-quote-photo img {
	width: 100%;
	aspect-ratio: 342 / 436;
	object-fit: cover;
	display: block;
	border-radius: 15px;
}
.cs-quote-body {
	flex: 1 1 460px;
	min-width: 0;
	max-width: 703px;
	padding-top: clamp(10px, 2.3vw, 39px);
}
.cs-quote-text {
	color: #fff;
	font-size: clamp(19px, 1.41vw, 24px);
	line-height: 1.4;
	margin-bottom: clamp(20px, 1.65vw, 28px);
}
.cs-quote-name {
	font-family: acumin-pro-condensed, sans-serif;
	font-size: clamp(20px, 1.41vw, 24px);
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}
.cs-quote-role {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	color: #2ca7ff;
}

.cs-section .post-share {
	margin-top: clamp(40px, 4.6vw, 78px);
}

/* ==================================================================
   56. LEGAL / LONG-FORM PAGES
   Terms & Conditions (17131:12946), Warranty (17131:13350) and
   Privacy Policy & Terms of Use (17131:13374) share one shell: the
   red page title, a short intro, then numbered sections.
   ================================================================== */

.legal-intro {
	max-width: 900px;
	margin-bottom: clamp(24px, 2.3vw, 39px);
}
.legal-intro p {
	color: #000;
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 0;
}
/* Terms & Conditions has no intro; the design still drops the body well
   clear of the title. */
.legal-body-no-intro {
	margin-top: clamp(40px, 6vw, 103px);
}
.legal-body p,
.legal-body li {
	color: #231f20;
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 25px;
}
.legal-body p:last-child {
	margin-bottom: 0;
}
.legal-body h2 {
	font-family: acumin-pro-condensed, sans-serif;
	font-size: clamp(20px, 1.41vw, 24px);
	font-weight: 600;
	line-height: 1.2;
	color: #e31827;
	text-transform: uppercase;
	margin: 27px 0 5px;
}
.legal-body h2:first-child {
	margin-top: 0;
}
.legal-body h3 {
	font-size: clamp(18px, 1.24vw, 21px);
	font-weight: 600;
	color: #134060;
	margin: 22px 0 5px;
}
.legal-body strong {
	font-weight: 600;
}
.legal-body a {
	color: #e31827;
	text-decoration: underline;
	word-break: break-word;
}
.legal-body a:hover {
	color: #e03643;
}
.legal-body ul,
.legal-body ol {
	margin: 0 0 25px 22px;
	padding: 0;
}
.legal-body li {
	margin-bottom: 8px;
}

.legal-actions {
	margin-top: clamp(30px, 3.4vw, 58px);
}
/* The comps leave 150-220px between the last block and the footer. */
.legal-section {
	padding-bottom: clamp(60px, 9vw, 153px);
}

/* ==================================================================
   57. UTILITY BANDS (404, Thank You)
   Frames 17131:12696 and 17131:12719. Full-bleed navy between the
   fixed header and the footer, with the oversized corner chevrons.
   ================================================================== */

.usv-utility-band {
	background: #134060;
	padding: calc(121px + clamp(60px, 10.2vw, 173px)) 0 clamp(70px, 16.4vw, 279px);
}
/* Same chevron artwork as .faq-deco, ~3x up (design 1316x568 at x1067). */
.usv-utility-deco {
	position: absolute;
	top: clamp(120px, 13.7vw, 233px);
	left: clamp(50%, 62.8vw, 1067px);
	width: clamp(600px, 77.4vw, 1316px);
	opacity: 0.55;
	pointer-events: none;
}
.usv-utility-title {
	color: #fff;
	font-size: clamp(30px, 2.64vw, 45px);
	font-weight: 400;
	line-height: 1.28;
	margin: 0 0 clamp(10px, 0.82vw, 14px);
}
.usv-utility-text {
	color: #fff;
	font-size: clamp(17px, 1.18vw, 20px);
	line-height: 1.4;
	margin: 0 0 clamp(22px, 1.82vw, 31px);
	max-width: 380px;
}

/* ---------- 404 ---------- */
.usv-404 {
	padding-bottom: clamp(70px, 20.2vw, 344px);
}
.usv-404-code {
	font-family: acumin-pro-condensed, sans-serif;
	font-size: clamp(140px, 18.7vw, 319px);
	font-weight: 600;
	line-height: 0.85;
	color: #fff;
	margin-bottom: clamp(20px, 2.2vw, 38px);
}
.usv-404 .usv-utility-title {
	margin-bottom: clamp(24px, 2.6vw, 44px);
}

/* ---------- Thank You ---------- */
/* Design places the title 261px below the header here, lower than the 404. */
.usv-thanks {
	padding-top: calc(121px + clamp(60px, 15.4vw, 261px));
	padding-bottom: clamp(70px, 20.2vw, 343px);
}
/* Design: the valve render bleeds off the left edge (x-19, 976x844). The
   asset is the mask render at exactly that ratio - do NOT alpha-trim it,
   trimming rescales the valve and it overruns the band. */
.usv-thanks-media {
	left: clamp(-40px, -1.1vw, -19px);
	top: clamp(40px, 4.35vw, 74px);
	width: clamp(420px, 57.4vw, 976px);
	pointer-events: none;
}
.usv-thanks-media img {
	width: 100%;
	height: auto;
	display: block;
}
.usv-thanks-content {
	margin-left: auto;
	width: clamp(300px, 40vw, 420px);
	margin-right: clamp(0px, 15.8vw, 268px);
}
.usv-thanks .usv-utility-title {
	max-width: 360px;
}

/* ==================================================================
   58. FIND IN-STOCK SOLUTIONS (distributor locator)
   Frame 17131:12553. Dark search band, results table, navy CTA band.
   Search is ZIP-territory assignment, not radius - see inc/distributors.php.
   ================================================================== */

/* Design: navy band runs 0-846 of the frame while the map panel (442-972)
   deliberately overhangs it onto white, so the band is a sized ::before
   rather than the section background. */
.loc-search-section {
	padding: calc(121px + clamp(60px, 7.3vw, 124px)) 0 clamp(30px, 3vw, 50px);
	overflow: visible;
}
/* Same chevron artwork as .faq-deco; design places it at y217 x1264 (445x192),
   bleeding 9px past the frame's right edge. */
.loc-deco {
	position: absolute;
	top: clamp(150px, 13.6vw, 232px);
	right: -9px;
	width: clamp(280px, 26.2vw, 445px);
	z-index: 1;
	pointer-events: none;
}
.loc-card-prompt p {
	font-size: 18px;
	line-height: 1.45;
	color: #3c3c3c;
	margin: 6px 0 0;
}
.loc-search-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: clamp(420px, 50.6vw, 861px);
	background: #134060;
	z-index: 0;
}
.loc-eyebrow {
	font-family: acumin-pro-condensed, sans-serif;
	font-size: clamp(26px, 2.1vw, 36px);
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 clamp(10px, 0.88vw, 15px);
}
.loc-intro p {
	color: #fff;
	font-size: clamp(17px, 1.18vw, 20px);
	line-height: 1.4;
	max-width: 696px;
	margin: 0;
}
/* Pill field with the red circular submit sitting on its right end. */
.loc-form {
	margin-top: clamp(20px, 2.6vw, 45px);
	max-width: 358px;
}
/* The theme's global input[type="text"] rule out-specifies a single class,
   so this needs the extra selector or padding/background/size are ignored. */
.loc-form .loc-zip {
	width: 100%;
	height: 50px;
	border: 0;
	border-radius: 100px;
	background: #f4f4f4 no-repeat left 24px center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='21' viewBox='0 0 16 21'%3E%3Cpath fill='%23e31827' d='M8 0a8 8 0 0 0-8 8c0 5.4 8 13 8 13s8-7.6 8-13a8 8 0 0 0-8-8Zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z'/%3E%3C/svg%3E");
	padding: 0 74px 0 53px;
	font-family: acumin-pro-condensed, sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: #134060;
	outline: none;
}
.loc-form .loc-zip::placeholder {
	color: #505050;
	opacity: 1;
}
.loc-go {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: #e31827;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.loc-go:hover {
	background: #e03643;
}
.loc-go svg {
	width: 19px;
	height: 18px;
}

.loc-aside {
	/* Frame 17131:12553: the block is LEFT-aligned at x1059 - title in two
	   50px lines (403px box) with SHARE YOUR VISION directly beneath on the
	   same left edge. It was shipped text-align:right, which glued the button
	   to the map's right edge and let the title run long. */
	text-align: left;
	padding-left: clamp(0px, 5.3vw, 80px);
}
.loc-aside-title {
	font-size: clamp(30px, 2.94vw, 50px);
	font-weight: 600;
	line-height: 1.05;
	color: #fff;
	margin: 0 0 clamp(18px, 1.7vw, 29px);
	text-transform: uppercase;
	max-width: clamp(280px, 26.6vw, 403px);   /* the frame's 2-line break */
}
@media (max-width: 991.98px) {
	.loc-aside {
		text-align: center;   /* collapsed columns centre, site-wide */
		padding-left: 0;
	}
	.loc-aside-title {
		max-width: none;
	}
}

/* ---------- map panel + overlaid result card ----------
   Design: 1241x530 map with a 600px card inset 24px at its top-left. */
.loc-map-panel {
	margin-top: clamp(16px, 1.4vw, 24px);
	border-radius: 16px;
	overflow: hidden;
	background: #0e1c26;
	min-height: clamp(320px, 31.2vw, 530px);
}
.loc-map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/* Until the map draws, the card is the whole panel - no empty dark box. */
.loc-map-panel:not(.has-map) {
	background: transparent;
	border-radius: 0;
	min-height: 0;
	overflow: visible;
}
.loc-map-panel:not(.has-map) .loc-map {
	display: none;
}
.loc-result {
	position: relative;
	z-index: 2;
	padding: 24px;
}
.loc-map-panel:not(.has-map) .loc-result {
	padding: 0;
}
.loc-card {
	background: #fff;
	border-radius: 8px;
	padding: clamp(20px, 2vw, 34px) clamp(20px, 2.6vw, 44px);
	max-width: 600px;
	position: relative;
}
/* Distance sits top-right of the card in the comp. */
.loc-card-distance:empty {
	display: none;
}
.loc-card-distance {
	position: absolute;
	top: clamp(14px, 1.24vw, 21px);
	right: clamp(20px, 2.6vw, 44px);
	font-size: clamp(18px, 1.26vw, 21.5px);
	font-weight: 500;
	color: #134060;
}
.loc-card-logo {
	max-width: 150px;
	height: auto;
	display: block;
	margin-bottom: 12px;
}
/* The design's face here is a normal-width geometric sans, not condensed -
   and h3 inherits the theme's condensed heading default, so state it. */
.loc-card-name {
	font-family: "acumin-pro", sans-serif;
	font-size: clamp(22px, 1.69vw, 28.7px);
	font-weight: 500;
	line-height: 1.15;
	color: #242424;
	margin: 0 0 8px;
}
.loc-card-service {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #2ab8ff;
	font-size: 16px;
	line-height: 1.4;
	margin-bottom: 12px;
}
.loc-card-service svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: #2ab8ff;
}
.loc-card-body {
	display: flex;
	flex-wrap: wrap;
	gap: 12px clamp(30px, 4.3vw, 74px);
}
.loc-card-body p,
.loc-card-body a {
	font-size: 18px;
	line-height: 1.5;
	color: #242424;
	margin: 0;
	text-decoration: none;
}
.loc-card-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px clamp(24px, 3.6vw, 62px);
	margin-top: 16px;
}
.loc-card-links a,
.loc-card-links button {
	background: none;
	border: 0;
	padding: 0;
	color: #e31827;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	/* Design marks both as textDecoration: UNDERLINE. */
	text-decoration: underline;
	cursor: pointer;
}
.loc-card-links a:hover,
.loc-card-links button:hover {
	color: #e03643;
}
.loc-none {
	background: #fff;
	border-radius: 8px;
	padding: clamp(18px, 1.8vw, 30px) clamp(20px, 2.6vw, 44px);
	max-width: 600px;
	color: #242424;
	font-size: 18px;
	line-height: 1.5;
	margin: 0;
}
.loc-none strong {
	color: #134060;
}

/* ---------- results table ---------- */
.loc-table-section {
	padding: clamp(40px, 5vw, 85px) 0 clamp(40px, 5vw, 85px);
}
.loc-table-wrap {
	overflow-x: auto;
}
.loc-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}
.loc-table thead th {
	color: #e31827;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	padding: 0 20px 14px 0;
	white-space: nowrap;
}
.loc-table tbody tr {
	border-top: 1px solid #c4c4c4;
}
.loc-table tbody td {
	padding: 18px 20px 18px 0;
	font-size: 18px;
	line-height: 1.4;
	color: #231f20;
	vertical-align: middle;
}
.loc-td-name {
	color: #000;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
}
.loc-td-phone a {
	color: #231f20;
	text-decoration: none;
}
.loc-td-phone a:hover {
	color: #e31827;
}
.loc-contact-btn {
	background: #e31827;
	border: 0;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 5px 18px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.loc-contact-btn:hover {
	background: #e03643;
}
.loc-empty {
	font-size: 18px;
	color: #3c3c3c;
}

/* ---------- CTA band ---------- */
.loc-band {
	background: #134060;
	padding: clamp(50px, 6vw, 102px) 0 clamp(50px, 6vw, 102px);
}
.loc-band-title {
	font-size: clamp(30px, 2.94vw, 50px);
	font-weight: 600;
	line-height: 1.05;
	color: #fff;
	margin: 0 0 clamp(14px, 1.35vw, 23px);
}
.loc-band-text {
	color: #fff;
	font-size: clamp(18px, 1.41vw, 24px);
	line-height: 1.4;
	max-width: 961px;
	margin: 0 auto clamp(24px, 2.6vw, 44px);
}

/* ---------- contact modal ---------- */
.loc-modal {
	position: relative;
	background: #134060;
	max-width: 993px;
	margin: 0 auto;
	padding: clamp(26px, 3.4vw, 58px) clamp(20px, 3.4vw, 58px);
	border-radius: 8px;
}
.loc-modal-title {
	color: #fff;
	font-size: clamp(28px, 2.94vw, 50px);
	font-weight: 600;
	line-height: 1.05;
	margin: 0 0 6px;
}
.loc-modal-who {
	color: #2ca7ff;
	font-size: 18px;
	font-weight: 500;
	margin: 0 0 clamp(16px, 1.7vw, 28px);
}

/* ==================================================================
   59. PRODUCT CATALOGUE (All Products + category pages)
   Frame 17131:18495. Breadcrumb bar, dark hero, per-category navy
   skewed band, then a 4-up product grid per category.
   ================================================================== */

/* Design: 40px #636363 strip immediately under the header. */
/* The 121px header clearance MUST NOT be a top margin. `.header-area` is
   position:fixed with no `top`, so it resolves to its STATIC position - and a
   collapsing top margin here propagates up through <main> to <body> (main uses
   overflow-x: clip, which unlike `hidden` does NOT create a block formatting
   context) and drags the fixed header down 121px with it. Padding on the
   offset wrapper cannot collapse, so the header stays pinned at 0. */
.pr-crumbs {
	background: #636363;
	padding: 8px 0;
	margin-top: 0;
}
.pr-crumbs-offset {
	/* The real header height, published by the header-height sync in main.js -
	   a hard-coded 121px left a white band on mobile where the header is
	   shorter. Fallback matches the desktop height for no-JS first paint. */
	padding-top: var(--usv-header-h, 121px);
}
.pr-crumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.pr-crumbs li {
	font-family: acumin-pro-condensed, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: #eaeaea;
	text-transform: uppercase;
}
.pr-crumbs li + li::before {
	content: '/';
	margin-right: 8px;
	opacity: 0.6;
}
.pr-crumbs a {
	color: #eaeaea;
	text-decoration: none;
}
.pr-crumbs a:hover {
	color: #fff;
	text-decoration: underline;
}

.ap-hero {
	background: #134060;
	/* Matches the category hero: design band 599 minus the 158px header+crumb
	   zone above this element. Bottom-weighted like the frame. */
	padding: clamp(60px, 7vw, 120px) 0 clamp(36px, 3vw, 50px);
	min-height: clamp(340px, 26vw, 441px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.ap-hero-title {
	font-family: acumin-pro-condensed, sans-serif;
	font-size: clamp(26px, 2.1vw, 36px);
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 clamp(10px, 0.88vw, 15px);
}
.ap-hero-intro p {
	color: #fff;
	font-size: clamp(17px, 1.18vw, 20px);
	line-height: 1.4;
	max-width: 696px;
	margin: 0 0 clamp(24px, 2.6vw, 45px);
}

/* ---------- per-category band ---------- */
/* Design: navy parallelogram bleeding off the left edge behind the title. */
.ap-cat {
	padding-top: clamp(40px, 5vw, 85px);
	/* Product shots overhang their columns per the frame; at sub-1700 widths a
	   right-column overhang would otherwise create horizontal page scroll. The
	   design clips this bleed at the frame edge - clip does the same. */
	overflow-x: clip;
}
.ap-cat-band {
	position: relative;
	/* No top padding: the design aligns the intro column with the TOP of the
	   navy band, and the band's own height is carried by the title below. */
	padding: 0 0 clamp(24px, 2.6vw, 44px);
}
/* Bootstrap's gy-4 gives every column a 24px top margin, which shifted the
   title's flex box 24px into the band - the text centred in the SHIFTED box
   and read bottom-heavy. Kill the gutter on desktop; restore stacking space
   on mobile where the columns collapse. */
.ap-cat-band .row {
	--bs-gutter-y: 0;
}
@media (max-width: 991.98px) {
	.ap-cat-band .row > [class*="col-"] + [class*="col-"] {
		margin-top: 24px;
	}
}
.ap-cat-band::before {
	content: '';
	position: absolute;
	top: 0;
	right: auto;
	left: -50vw;
	/* The title is anchored to the CENTERED container (max 1460), so the
	   shape must grow with the container's side margin - sized in bare vw it
	   stopped at ~1520px viewport and the title walked off the navy edge
	   ("Check Valv" white-on-white, BugHerd #41 at 1861px). */
	width: calc(50vw + (100vw - min(100vw, 1460px)) / 2 + clamp(300px, 30vw, 512px));
	height: clamp(90px, 7.8vw, 132px);
	background: #134060;
	clip-path: polygon(0 0, 100% 0, calc(100% - 66px) 100%, 0 100%);
	z-index: 0;
}
.ap-cat-title {
	position: relative;
	z-index: 2;
	font-size: clamp(30px, 2.94vw, 50px);
	font-weight: 600;
	line-height: 1.05;
	color: #fff;
	/* The title IS the band's content: flexing it to the band's height keeps
	   the text vertically centred in the navy shape (design: 44px top / 38px
	   bottom inside a 132px band) instead of riding low. */
	min-height: clamp(90px, 7.8vw, 132px);
	display: flex;
	align-items: center;
	margin: 0;
	padding-left: clamp(0px, 3.4vw, 57px);
	/* Wrap inside the navy shape (512px max), not at the column edge. */
	max-width: clamp(280px, 27vw, 455px);
}
.ap-cat-band.is-two-line .ap-cat-title {
	min-height: clamp(140px, 10.5vw, 172px);
}
.ap-cat-band.is-two-line::before {
	height: clamp(140px, 10.5vw, 172px);   /* two 52.5px lines + padding */
}
.ap-cat-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 177px;
	height: 50px;
	padding: 0 24px;
	border: 2px solid #e31827;
	border-radius: 100px;
	color: #e31827;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1.36px;   /* node value */
	text-transform: uppercase;
	text-decoration: none;
	margin-left: clamp(0px, 5.1vw, 87px);
	/* Design: pill top sits 48px BELOW the navy band's bottom edge. */
	margin-top: clamp(28px, 2.8vw, 48px);
	transition: background-color 0.2s ease, color 0.2s ease;
}
/* A clicked button keeps :focus, and the browser's focus ring drawn on top of
   the 2px red border reads as a doubled, wobbly outline - that is the "messed
   up" state. Suppress the default ring and give keyboard focus its own offset
   ring instead of stacking on the border. */
.ap-cat-btn:focus {
	outline: none;
}
.ap-cat-btn:focus-visible {
	outline: 2px solid #134060;
	outline-offset: 3px;
}
.ap-cat-btn:hover {
	background: #e31827;
	color: #fff;
}
.ap-cat-intro p {
	color: #000;
	font-size: 18px;
	line-height: 1.4;
	margin: 0 0 18px;
}
.ap-cat-bullets {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ap-cat-bullets li {
	position: relative;
	color: #000;
	font-size: 18px;
	line-height: 1.4;
	padding-left: 20px;
	margin-bottom: 14px;
}
.ap-cat-bullets li::before {
	content: '\2022';
	position: absolute;
	left: 0;
	color: #000;
}

/* ---------- 4-up product grid ---------- */
.pr-grid {
	/* Flex, not grid: the design centres an incomplete last row (Techno, 51,
	   CVL sit centred under the full rows), which grid cannot do. */
	--prg-gap: clamp(20px, 2.1vw, 36px);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: var(--prg-gap);
	row-gap: clamp(64px, 5.6vw, 96px);   /* breathing room under the View Specs pills */
	margin-top: clamp(28px, 2.6vw, 44px);
}
.pr-grid > .pr-card {
	width: calc((100% - 3 * var(--prg-gap)) / 4);
}
.pr-card {
	display: flex;
	flex-direction: column;
	text-align: center;
}
/* Design floats the render larger than its 248px plate, so it may overflow. */
.pr-card-media {
	display: block;
	position: relative;
	/* Design media presence is ~200px on a ~330px column, not a square - the
	   1:1 box added ~130px of air per card and stretched the page by ~1100px. */
	aspect-ratio: 330 / 205;
	margin-bottom: clamp(14px, 1.4vw, 24px);
	overflow: visible;
}
.pr-card-media img {
	position: absolute;
	max-width: none;   /* geometry boxes exceed 100%; the global img cap clamps them */
	/* Per-product geometry from the All Products frame (USV_CARD_GEOM inline
	   vars) - see .prw-img. The design floats shots well past their columns;
	   containment inside the node box reproduces its visible size exactly. */
	left: var(--pi-l, 0);
	top: var(--pi-t, 0);
	width: var(--pi-w, 100%);
	height: var(--pi-h, 100%);
	object-fit: contain;
	display: block;
	pointer-events: none;   /* overhang must not swallow clicks on neighbours */
}
.pr-card-title {
	font-family: acumin-pro-condensed, sans-serif;
	font-size: clamp(24px, 1.94vw, 33px);
	font-weight: 700;
	line-height: 1.1;   /* frame: 36.3/33 - 1.5 ballooned two-line titles */
	letter-spacing: 0.04em;
	color: #4e4e53;
	margin: 0 0 8px;
}
.pr-card-sub {
	color: #050505;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0 0 clamp(14px, 1.4vw, 24px);
}
/* CTAs bottom-align across the row regardless of copy length. */
.pr-card-btn {
	margin-top: auto;
	align-self: center;
	min-width: 177px;
	text-align: center;
}

/* ==================================================================
   60. PRODUCT CATEGORY PAGES + PRODUCT DETAIL
   Category frames 17131:18746 / 15491 / 15448, detail frame 17131:15533.
   Hero = advantage-hero pattern with a per-page photo (ACF hero_image).
   ================================================================== */
/* Category hero rides .advantage-hero-area; this trims it to the design's
   599px band with the title block sitting low-left like the frame. */
.pc-cat-hero {
	background-size: cover;
	background-position: center;
	background-color: #09131a;
	/* Design band is 599px including the 121px header + 37px crumb zone that
	   sit above this element, so the element itself is 441. The base class
	   bottom-aligns content and sets min-height 599 - both overridden here. */
	padding: clamp(40px, 3vw, 60px) 0 clamp(30px, 2.3vw, 39px);
	min-height: clamp(340px, 26vw, 441px);
}
.pc-cat-hero .advantage-hero-content h1 {
	font-size: clamp(26px, 2.12vw, 36px);
	letter-spacing: 0.02em;
}
.pc-cat-hero .advantage-hero-content p {
	margin: 14px 0 26px;
	max-width: 700px;
}
.pc-products {
	/* Frame: hero bottom -> first band top = 101px (the first row's art rises
	   through it into the hero); band-to-band pitch 555 with ~160px of flow
	   gap between a card's copy and the next band, carried by the row gutter. */
	padding: clamp(60px, 6.68vw, 101px) 0 clamp(50px, 5vw, 90px);
	overflow-x: clip;   /* clip product-shot bleed at the viewport edge, like the frame */
}
.pc-products .row {
	--bs-gutter-y: clamp(80px, 10.6vw, 160px);
}
.pc-empty {
	background: #f4f4f4;
	border-left: 4px solid #e31827;
	padding: 18px 22px;
	font-size: 16px;
}

/* ---- wide category card (Figma 17131:18746) ----
   Media = 684x404 area: brushed-metal band (684x197, radius 8) vertically
   centred, product shot overflowing it top and bottom. Title 50/600 mixed
   case; red 700 type line; blurb renders only when Individual Copy lands;
   VIEW SPECS pill top-right of the text row. */
.prw-card {
	max-width: 688px;
}
.prw-media {
	/* The media element IS the band (the design's band->title gap is just the
	   title's 24px margin); product shots overhang upward via their geometry
	   vars. No reserved headroom: per the frame, overhangs OVERLAP what sits
	   above - the first row rises ~100px into the hero, later rows into the
	   previous card's (transparent) copy zone. */
	aspect-ratio: 684 / 197;
	position: relative;
}
.prw-band {
	position: absolute;
	inset: 0;
	/* Node 17131:18838 (all three category frames agree): radius 16, 1px
	   #a4a4a4 inside stroke, and a SECOND fill the texture alone misses - a
	   bottom-to-top black -> #e3e3e3 linear gradient, MULTIPLY at 44% layer
	   opacity. 44% opacity folded into pure multiply stops:
	   mix(white, stop, .44) = rgb(143,143,143) -> rgb(243,243,243). */
	border-radius: 16px;
	border: 1px solid #a4a4a4;
	background-image:
		linear-gradient(to top, rgb(143, 143, 143), rgb(243, 243, 243)),
		url(../images/products/card-metal-texture.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #d7d7d7;
	background-blend-mode: multiply, normal;
}
.prw-img {
	position: absolute;
	max-width: none;   /* geometry boxes exceed 100%; the global img cap clamps them */
	/* Per-product geometry from the design's image nodes (USV_CARD_GEOM inline
	   vars): each shot gets the frame's own box relative to the media area, and
	   object-fit: contain then reproduces Figma's FIT placement exactly - the
	   live <img> is the same source the design places. No uniform scale can
	   match the frame (nodes run 0.74x-1.40x of the band). Fallback for a
	   product without geometry: plain full-box containment. */
	left: var(--pi-l, 0);
	top: var(--pi-t, 0);
	width: var(--pi-w, 100%);
	height: var(--pi-h, 100%);
	object-fit: contain;
	z-index: 2;
	pointer-events: none;   /* overhang must not swallow clicks on neighbours */
}
/* Imagify's webp rewrite wraps the img in <picture> and moves class + style
   up to it, so the geometry box sizes the picture while the inner img falls
   back to source-ratio height (square sources ran ~50% past their node box).
   Fill the box from inside; matches nothing when .prw-img is the img itself. */
.prw-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}
.prw-title {
	font-size: clamp(32px, 2.94vw, 50px);
	line-height: 1.05;
	margin: 24px 0 10px;
}
.prw-row {
	gap: clamp(18px, 2vw, 30px);
	align-items: flex-start;
	justify-content: space-between;
}
.prw-copy {
	max-width: 430px;
}
.prw-type {
	color: #e31827;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 6px;
}
.prw-blurb {
	color: #050505;
	font-size: 16px;
	line-height: 1.4;
	margin: 0;
}
.prw-cta {
	flex: 0 0 auto;
	/* Design: the pill stops 39px short of the card's right edge (node: pill
	   right 795 vs card edge 834), scaled down with the card on smaller
	   viewports. */
	padding-right: clamp(16px, 2.3vw, 39px);
}

/* ---- detail ---- */
.pd-hero {
	padding: clamp(30px, 3vw, 48px) 0 clamp(30px, 3vw, 50px);
}
@media (min-width: 992px) {
	/* Breathing room between the gallery's overhanging next-arrow and the
	   product title/copy (agency pre-launch note). */
	.pd-hero .col-lg-5 {
		padding-left: clamp(32px, 3.4vw, 60px);
	}
}
.pd-title {
	font-size: clamp(38px, 3.53vw, 60px);
	line-height: 1.05;
	margin-bottom: 16px;
}
.pd-intro {
	font-size: 18px;
	line-height: 1.4;
	color: #3c3c3c;
	margin-bottom: 26px;
}
.pd-cta-row {
	gap: 14px;
}

/* Gallery - Figma 17131:15533 geometry, read from the node tree:
   thumb rail w118 (118x34 grey steppers, 118x118 white thumbs #a4a4a4 r16),
   37px gap, 600x600 white stage r16, navy 62x62 arrows overlapping the stage
   edges at mid-height, square dots below. The gradient shade is drawn OVER the
   media per the dev annotation - never also baked into an export. */
.pd-gallery {
	display: flex;
	gap: 37px;
	align-items: flex-start;
}
.pdg-rail {
	width: 118px;
	flex: 0 0 118px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.pdg-step {
	width: 118px;
	height: 34px;
	border: 0;
	background: #c2c2c2;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pdg-step:hover {
	background: #a9a9a9;
}
.pdg-thumbs {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: 386px;   /* 3 thumbs + gaps; steppers scroll the rest */
	overflow-y: auto;
	scrollbar-width: none;   /* steppers are the affordance, not a scrollbar */
}
.pdg-thumbs::-webkit-scrollbar {
	display: none;
}
.pdg-thumb {
	width: 118px;
	height: 118px;
	flex: 0 0 auto;
	padding: 12px;
	background: #fff;
	border: 1px solid #a4a4a4;
	border-radius: 16px;
	cursor: pointer;
}
.pdg-thumb.is-active {
	border-color: #134060;
	border-width: 2px;
}
.pdg-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.pdg-main {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 600px;
}
.pdg-stage {
	aspect-ratio: 1 / 1;
	background: #fff;
	border: 1px solid #a4a4a4;
	border-radius: 16px;
	/* overflow must stay visible: the nav arrows overhang the stage edges
	   (left/right: -22px) and overflow:hidden clips them to lopsided stubs. */
	overflow: visible;
}
/* Non-square product art was top-anchored in the square stage, leaving dead
   space below (client review #3): fill the stage and let contain center it. */
.pdg-stage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.pd-slide {
	position: absolute;
	inset: 0;
	padding: clamp(28px, 4vw, 64px);
	opacity: 0;
	transition: opacity 0.25s ease;
	overflow: hidden;
	border-radius: 16px;
}
.pd-slide.is-active {
	opacity: 1;
}
.pd-media {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.pd-gallery-shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	border-radius: 16px;
	background:
		linear-gradient(to bottom, rgba(9, 19, 26, 0.07) 0%, rgba(9, 19, 26, 0) 18%),
		linear-gradient(to top, rgba(9, 19, 26, 0.09) 0%, rgba(9, 19, 26, 0) 20%);
}
/* Navy squares overlapping the stage edges, vertically centred (design: 62x62
   #134060 at the stage's mid-height, 22px outside each edge). */
.pdg-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 62px;
	height: 62px;
	border: 0;
	background: #134060;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}
.pdg-arrow:hover {
	background: #0d2f49;
}
.pdg-arrow-prev {
	left: -22px;   /* design: 22px outside the stage edge */
}
.pdg-arrow-next {
	right: -20px;  /* design: 20px outside - yes, asymmetric in the node */
}
.pdg-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}
.pdg-dot {
	width: 12px;
	height: 12px;
	border: 0;
	padding: 0;
	background: #c2c2c2;
	cursor: pointer;
}
.pdg-dot.is-active {
	background: #134060;
}
/* Outlined companion to the red pill (design: Download SKU Data). */
.pd-btn-outline {
	display: inline-block;
	border: 1px solid #e31827;
	border-radius: 100px;
	color: #e31827;
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	padding: 14px 32px;
	line-height: 1;
}
.pd-btn-outline:hover {
	background: #e31827;
	color: #fff;
}

/* ---- tabs ----
   Folder tabs, not underlined text. Values from Figma 17131:15533:
     active   bg #ffffff  text 24/600 #e03643 UPPER  corner mark #e31827
     inactive bg #eaeaea  text 24/600 #707070 UPPER  corner mark #c6c6c6
     border   #e2e2e2 on both tab and panel
   The active tab joins the panel by covering the panel's top border, which is
   what makes it read as a folder tab rather than a floating box. */
.pd-tabs {
	padding: 0 0 clamp(40px, 4vw, 70px);
}
.pd-tablist {
	display: flex;
	gap: 0;
	align-items: flex-end;
	margin: 0;
	border: 0;
	position: relative;
	z-index: 2;
}
.pd-tab {
	appearance: none;
	border: 1px solid #e2e2e2;
	border-bottom: 0;
	background: #eaeaea;
	color: #707070;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(19px, 1.41vw, 24px);
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: underline;
	cursor: pointer;
	padding: 13px 26px 15px;
	margin: 0;
	position: relative;
	line-height: 1;
}
.pd-tab.is-active {
	background: #fff;
	color: #e03643;
	text-decoration: none;
	padding-bottom: 16px;   /* overlaps the panel border below */
	margin-bottom: -1px;
	z-index: 3;
}
/* 8x8 corner mark, top-right of each tab. */
.pd-tab::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 8px;
	height: 8px;
	background: #c6c6c6;
	clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.pd-tab.is-active::after {
	background: #e31827;
}
.pd-panel {
	display: none;
}
.pd-panel.is-active {
	display: block;
	border: 1px solid #e2e2e2;
	background: #fff;
	padding: clamp(28px, 3vw, 46px) clamp(24px, 3.4vw, 58px) clamp(24px, 2.4vw, 40px);
	position: relative;
}
.pd-overview {
	font-size: 18px;
	line-height: 1.4;
	color: #050505;
	max-width: 1000px;
}
.pd-highlights {
	margin: 22px 0 0;
	padding-left: 20px;
	max-width: 1030px;
}
.pd-highlights li {
	font-size: 18px;
	line-height: 1.4;
	color: #050505;
	font-weight: 600;
	margin-bottom: 8px;
}

/* Wide tables scroll inside their own container, never the page. */
.pd-table-wrap {
	overflow-x: auto;
}
.pd-spec-table {
	border-collapse: collapse;
	min-width: 560px;
	max-width: 733px;   /* 249 + 484 in the design */
	width: 100%;
}
.pd-spec-table th,
.pd-spec-table td {
	text-align: left;
	padding: 7px 14px;
	font-size: 14px;
	line-height: 1.35;
	border: 1px solid #a9a9a9;
}
.pd-spec-table thead th {
	background: #7b7b7b;
	border-color: #494949;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.pd-spec-table tbody th {
	font-weight: 600;
	color: #000;
	width: 34%;
}
.pd-spec-table tbody td {
	font-weight: 400;
	color: #000;
}
.pd-spec-table tbody tr:nth-child(odd) th,
.pd-spec-table tbody tr:nth-child(odd) td {
	background: #f6f6f6;
}
.pd-spec-table tbody tr:nth-child(even) th,
.pd-spec-table tbody tr:nth-child(even) td {
	background: #fff;
}

/* Prev / Next sit INSIDE the bordered panel, flush into its bottom corners -
   Next on Overview, Previous on Specifications, matching the design frames.
   The panel reserves bottom space so long content cannot run underneath. */
.pd-panel.is-active {
	padding-bottom: 78px;
}
.pd-prev,
.pd-next {
	position: absolute;
	bottom: 0;
	appearance: none;
	border: 0;
	background: #f3f3f3;
	color: #5b5b5b;
	font-size: 18px;
	line-height: 1;
	padding: 13px 22px;
	cursor: pointer;
}
.pd-prev {
	left: 0;
}
.pd-next {
	right: 0;
}
.pd-prev:hover,
.pd-next:hover {
	background: #e6e6e6;
	color: #09131a;
}

/* ---- downloads (hidden entirely until the feed carries documents) ---- */
.pd-downloads {
	padding: 0 0 clamp(50px, 5vw, 90px);
}
.pd-downloads-title {
	font-size: clamp(32px, 2.94vw, 50px);
	line-height: 1.15;
	margin-bottom: clamp(26px, 2.5vw, 42px);
}
.pd-download-table th,
.pd-download-table td {
	text-align: left;
	padding: 14px 16px;
	font-size: 16px;
	border-bottom: 1px solid #e6e6e6;
}
.pd-download-table thead th {
	font-weight: 700;
	text-transform: uppercase;
	color: #134060;
	letter-spacing: 0.04em;
}
.pd-download-link {
	font-weight: 700;
	color: #e31827;
	text-decoration: underline;
}

/* ==================================================================
   61. PRODUCTS MEGAMENU
   Figma 17131:17961. Values read from the node tree:
     panel #134060, headings Acumin Pro Condensed 30/600 white over a #e31827
     rule, items Acumin Pro 18/400 white lh32.4, CTA #2ca7ff condensed 24/600.
   Built from the product CPT, so it grows as the Salsify importer adds
   products - see inc/nav-megamenu.php.
   ================================================================== */
.main-menu-wrapper .main-menu > li.has-mega {
	position: static;
}
/* The panel is bounded by the nav list itself, so it starts at Data Center and
   ends at Resources rather than spanning the viewport. Positioning against the
   ul (not the li, which is static, and not a fixed viewport box) is what pins
   those edges. */
.main-menu-wrapper .main-menu {
	position: relative;
}
.mega-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: auto;
	background: #134060;
	padding: 40px 0 0;   /* design: 40px from panel top to heading */
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.mega-inner {
	padding: 0 clamp(28px, 3.6vw, 61px);   /* design left inset 61px */
}
.main-menu-wrapper .main-menu > li.has-mega:hover .mega-panel,
.main-menu-wrapper .main-menu > li.has-mega:focus-within .mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.mega-grid {
	display: grid;
	/* Fixed fr ratios kept starving one column or another inside the fixed panel
	   width. Let the two single-product columns size to their content and give
	   Check Valves (two sub-columns of long names) whatever is left. */
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: clamp(26px, 2.6vw, 50px);
	align-items: start;
}
.mega-heading {
	font-size: clamp(22px, 1.76vw, 30px);
	font-weight: 600;
	line-height: 1.1;
	margin: 0 0 18px;
	padding-bottom: 12px;
	position: relative;
}
.mega-heading a {
	color: #fff;
	text-decoration: none;
}
.mega-heading a:hover {
	color: #fff;
	text-decoration: underline;
}
/* The design's rule is a tapered marker, not a plain border - same signature
   treatment used elsewhere on the site, so it is drawn as a clipped bar. */
.mega-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 4px;
	background: #e31827;
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.mega-lists {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(18px, 1.8vw, 34px);
}
.mega-list {
	/* display:block is explicit: the theme's nav styles set a flex/column
	   layout on ul inside .main-menu, which split each 6-item list into two
	   short columns and scrambled the reading order. */
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.mega-list li {
	display: block;
	width: 100%;
}
.mega-col-ball-valves .mega-lists,
.mega-col-hybrid-valves .mega-lists {
	grid-template-columns: 1fr;   /* single-product categories keep one column */
}
.mega-list li {
	margin: 0 0 12px;
}
.mega-list a {
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	text-decoration: none;
	display: inline-block;
}
.mega-list a:hover,
.mega-list a:focus-visible {
	color: #fff;
	text-decoration: underline;
}
/* Angled tab, matching the skewed vector in the design. */
.mega-cta-row {
	display: flex;
	justify-content: flex-end;
}
.mega-all {
	display: inline-block;
	margin-top: 26px;
	margin-left: auto;
	background: #2ca7ff;
	color: #fff;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: clamp(18px, 1.41vw, 24px);
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 38px 14px 54px;
	clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%);
}
.mega-all:hover,
.mega-all:focus-visible {
	background: #56bbff;
	color: #fff;
}

/* Headings share a baseline so the three red rules align even when one wraps. */
.mega-col {
	display: flex;
	flex-direction: column;
}
.main-menu-wrapper .main-menu > li.has-mega .mega-heading {
	/* No min-height. Reserving two lines here (to keep the red rules aligned)
	   pushed the heading TEXT ~46px down inside its own box, which read as a
	   large empty gap at the top of the panel. All three headings fit one line
	   at this width, so natural height keeps the rules aligned anyway. */
	display: flex;
	align-items: flex-end;
}

/* The theme's nav rules (.main-menu-wrapper .main-menu li a) out-specify plain
   .mega-* selectors, so items rendered at 17px/500 with an inherited 10px li
   padding instead of the design's 18px/400. These overrides match that
   specificity rather than reaching for !important. */
/* Exact values from Figma 17131:17961 - the face matters as much as the size:
   headings are Acumin Pro CONDENSED, items are regular Acumin Pro. The <a>
   inside inherits the theme's nav font otherwise, which is what made the
   headings render in the wrong face. */
.main-menu-wrapper .main-menu > li.has-mega .mega-heading,
.main-menu-wrapper .main-menu > li.has-mega .mega-heading a {
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}
.main-menu-wrapper .main-menu > li.has-mega .mega-heading {
	margin: 0 0 14px;
	padding: 0 0 10px;
}
.main-menu-wrapper .main-menu > li.has-mega .mega-heading a {
	padding: 0;
}
.main-menu-wrapper .main-menu > li.has-mega .mega-list li {
	margin: 0;
	padding: 0;
	line-height: 1;
}
.main-menu-wrapper .main-menu > li.has-mega .mega-list a {
	/* Design row rhythm is line-height 32.4 on 18px (1.8) with no padding,
	   rather than a tight line plus vertical padding. */
	font-family: "acumin-pro", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0;
	text-transform: none;
	padding: 0;
	margin: 0;
	color: #fff;
	display: inline-block;
}
/* CTA flush to the panel's right edge, outside the container gutter. */
.mega-cta-row {
	display: block;
	margin-top: 22px;
}
.mega-panel .mega-cta-row {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
}
.main-menu-wrapper .main-menu > li.has-mega .mega-all {
	/* Same specificity trap as the headings: the theme's nav link rule renders
	   this at 17px/500 unless the font is restated here. Design: Acumin Pro
	   Condensed 24/600, uppercase. */
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	padding: 13px 34px 13px 50px;
}
.mega-panel {
	padding-bottom: 66px;   /* room for the flush CTA */
}

/* All Products: red bold lead-ins inside the category bullets (design 18495)
   and the photographic hero treatment when ap_hero_image is set. */
.ap-cat-bullets li strong {
	color: #e31827;
	font-weight: 700;
}
.ap-hero.has-photo {
	background-size: cover;
	background-position: center;
	background-color: #09131a;
}
/* Diagonal line cluster, same offsets as the category/advantage heroes. */
.ap-hero .line-wrapper .line-one {
	bottom: 154px;
}
.ap-hero .line-wrapper .line-two {
	bottom: 86px;
}
.ap-hero .line-wrapper .line-three {
	bottom: 18px;
}
.ap-hero.has-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Softened per agency pre-launch review: the old stack (0.34 flat + 0.55
	   left + 0.46 bottom) crushed heroes to ~2/3 darker than the approved
	   contact hero. This lands them at contact's level while the left
	   gradient keeps the H1 side readable. */
	background:
		linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(102, 102, 102, 0) 55%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0%, rgba(102, 102, 102, 0) 55%),
		rgba(0, 0, 0, 0.12);
}

/* Section-bottom fade (frames 18495 + 18746): every product section closes
   with a ~140px linear fade #ffffff -> #dfdfdf, then a HARD edge into the next
   section - including straight into the navy contact band. Also supplies the
   missing breathing room above the form. Appended last to win the cascade over
   each section's own padding. */
.ap-cat,
.pc-products {
	padding-bottom: clamp(130px, 12vw, 205px);
}
.ap-cat::after,
.pc-products::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(100px, 8.3vw, 141px);
	background: linear-gradient(180deg, #ffffff 0%, #dfdfdf 100%);
	pointer-events: none;
	z-index: 0;
}

/* ==================================================================
   63. SEARCH - results page + predictive dropdown
   ================================================================== */
.srch-hero {
	background: #134060;
	padding: calc(var(--usv-header-h, 121px) + clamp(30px, 3vw, 50px)) 0 clamp(26px, 2.6vw, 44px);
}
.srch-title {
	color: #fff;
	font-size: clamp(32px, 2.94vw, 50px);
	margin: 0 0 6px;
}
.srch-meta {
	color: #cfd8e0;
	font-size: 17px;
	margin: 0;
}
.srch-list {
	padding: clamp(34px, 3.4vw, 58px) 0 clamp(60px, 6vw, 100px);
}
.srch-row {
	display: flex;
	gap: 22px;
	padding: 22px 0;
	border-bottom: 1px solid #e6e6e6;
	max-width: 1000px;
}
.srch-thumb {
	flex: 0 0 96px;
	height: 96px;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.srch-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8px;
}
.srch-badge {
	display: inline-block;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #636363;
	background: #f0f0f0;
	border-radius: 4px;
	padding: 3px 8px;
	margin-bottom: 6px;
}
.srch-badge-product {
	color: #fff;
	background: #134060;
}
.srch-row-title {
	font-size: clamp(22px, 1.65vw, 28px);
	line-height: 1.15;
	margin: 0 0 4px;
}
.srch-row-title a {
	color: #134060;
	text-decoration: none;
}
.srch-row-title a:hover {
	color: #e31827;
}
.srch-lede {
	color: #e31827;
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 6px;
}
.srch-excerpt {
	font-size: 16px;
	line-height: 1.45;
	color: #3c3c3c;
	max-width: 760px;
}
.srch-excerpt strong {
	color: #09131a;
	background: #fff3cd00;
	font-weight: 700;
}
.srch-cta {
	margin-top: 12px;
	font-size: 14px;
	padding: 10px 22px;
}
.srch-pagination {
	margin-top: 30px;
}
.srch-pagination .nav-links {
	display: flex;
	gap: 10px;
	align-items: center;
}
.srch-pagination .page-numbers {
	color: #134060;
	text-decoration: none;
	padding: 8px 14px;
	background: #f3f3f3;
}
.srch-pagination .page-numbers.current {
	background: #134060;
	color: #fff;
}
.srch-none {
	max-width: 640px;
	font-size: 18px;
}
.srch-none .us-btn-1 {
	margin-top: 14px;
}

/* ---- predictive dropdown (Relevanssi Live Ajax Search shell) ---- */
/* Doubled class: the plugin's own stylesheet loads after ours and caps the
   panel at 300px; (0,2,0) outranks it regardless of order. */
.relevanssi-live-search-results.relevanssi-live-search-results {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 14px 44px rgba(9, 19, 26, 0.22);
	border: 1px solid #e6e6e6;
	overflow-y: auto;
	/* Never taller than the viewport allows, and scrolling the list must not
	   chain to the page - without contain, a wheel at the list's bounds
	   scrolls the page and carries the anchored panel off-screen. */
	max-height: min(60vh, 480px);
	overscroll-behavior: contain;
	min-width: 340px;
}
.usv-live-heading {
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #636363;
	padding: 12px 16px 6px;
}
.usv-live-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 16px;
	text-decoration: none;
}
.usv-live-row:hover,
.usv-live-row:focus,
.usv-live-row.relevanssi-live-search-result-focused {
	background: #f4f6f8;
}
.usv-live-thumb {
	flex: 0 0 44px;
	height: 44px;
	border: 1px solid #ececec;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}
.usv-live-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.usv-live-title {
	display: block;
	color: #134060;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.15;
}
.usv-live-sub {
	display: block;
	color: #6b6b6b;
	font-size: 13px;
	line-height: 1.3;
}
.usv-live-all {
	display: block;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: #e31827;
	text-decoration: none;
	padding: 12px 16px;
	border-top: 1px solid #eee;
}
.usv-live-all:hover {
	background: #fef2f3;
	color: #e31827;
}
.usv-live-none {
	margin: 0;
	padding: 16px;
	font-size: 15px;
	color: #3c3c3c;
}

/* Search filter pills - same interlocking pill language as the news filter. */
.srch-pills {
	margin: 0 0 clamp(22px, 2.2vw, 34px);
}
.srch-pills .news-pill .cnt {
	opacity: 0.75;
	font-size: 0.85em;
	margin-left: 4px;
}

/* ==================================================================
   64. DOCUMENTS & DOCUMENTATION - Figma 17131:18030 (+ tab twins)
   Values from the node tree: title 66/400 condensed #e31827 UPPER,
   intro 18/400; Downloads 50/600 #134060; tabs = product folder tabs
   over a 1px #134060 rule; search 346x50 navy pill w/ 42px red circle;
   table: red 16/700 UPPER headers, zebra #fafafa, #c4c4c4 row lines,
   red 100x33 download buttons.
   ================================================================== */
.doc-hero {
	padding: calc(var(--usv-header-h, 121px) + clamp(40px, 4.6vw, 78px)) 0 clamp(26px, 2.6vw, 44px);
}
.doc-hero .faq-deco {
	position: absolute;
	top: calc(var(--usv-header-h, 121px) + 40px);
	right: 0;
	width: clamp(300px, 24vw, 410px);
}
.doc-title {
	font-size: clamp(38px, 3.88vw, 66px);
	font-weight: 400;
	color: #e31827;
	line-height: 1.05;
	margin: 0 0 12px;
}
.doc-intro {
	font-size: 18px;
	line-height: 1.4;
	color: #000;
	max-width: 880px;
	margin: 0;
}
.doc-library {
	padding: clamp(26px, 2.6vw, 44px) 0 clamp(60px, 6vw, 100px);
}
.doc-bar {
	gap: clamp(14px, 1.6vw, 26px);
}
.doc-downloads-title {
	font-size: clamp(32px, 2.94vw, 50px);
	line-height: 1;
	margin: 0 0 4px;   /* node: heading bottom rides 4px above the rule */
	padding-right: clamp(16px, 2.1vw, 36px);   /* node: first tab lands x=426 */
}
.doc-tablist.pd-tablist {
	flex: 1 1 auto;
}
/* The library panels are borderless tables over a navy rule, not the product
   page's outlined box. */
.doc-rule {
	height: 1px;
	background: #134060;
	margin-top: -1px;
	position: relative;
	z-index: 1;
}
.doc-panel.pd-panel.is-active {
	border: 0;
	background: transparent;
	padding: clamp(18px, 2vw, 30px) 0 0;
}
.doc-search {
	margin-left: auto;
	margin-bottom: 9px;   /* node: pill bottom sits 9px above the rule */
}
.doc-search input.doc-search-input {
	/* Element+class beats the theme's global input[type="text"] rule -
	   the same specificity trap as the locator ZIP field (gotcha #32). */
	width: clamp(240px, 20.4vw, 346px);
	height: 50px;
	border-radius: 100px;
	background: #134060;
	border: 1px solid #b8b8b8;
	color: #fff;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 20px;
	font-weight: 600;
	padding: 0 58px 0 26px;
}
.doc-search input.doc-search-input::placeholder {
	/* The theme's global ::placeholder rule sets acumin-pro 14/400 and
	   OVERRIDES inheritance - the pseudo-element needs the font stated
	   explicitly, not just color. (Caught in the client's live browser:
	   input computed condensed 20/600 while ::placeholder computed 14/400.) */
	color: #fff;
	opacity: 1;
	font-family: "acumin-pro-condensed", sans-serif;
	font-size: 20px;
	font-weight: 600;
}
.doc-search-go {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: #e31827;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.doc-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 640px;
}
.doc-table thead th {
	text-align: left;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #e31827;
	padding: 10px 22px 14px;
	border-bottom: 1px solid #134060;
}
.doc-table .doc-th-file,
.doc-table .doc-file {
	/* Design: the file column sits at the table's right but its header and
	   buttons share a LEFT edge (node: header x=1285, buttons x=1286). */
	text-align: left;
	width: 220px;
	white-space: nowrap;   /* "DOWNLOADABLE FILE" stays one line, per frame */
}
.doc-table tbody td {
	padding: 16px 22px;
	font-size: 16px;
	color: #000;
	text-transform: uppercase;
	border-bottom: 1px solid #c4c4c4;
	vertical-align: middle;
}
.doc-table tbody tr:nth-child(odd) {
	background: #fafafa;
}
.doc-type {
	font-weight: 600;
	width: 22%;
	white-space: nowrap;
}
.doc-name {
	font-weight: 400;
	word-break: break-word;
}
.doc-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 100px;
	height: 33px;
	justify-content: center;
	background: #e31827;
	border-radius: 3px;
	letter-spacing: 0.08em;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0 14px;
}
.doc-btn-ic {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #134060;   /* navy badge, white arrow - per the frame */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.doc-btn:hover,
.doc-btn:focus-visible {
	background: #c11220;
	color: #fff;
}
.doc-empty {
	font-size: 17px;
	color: #3c3c3c;
	padding: 26px 4px;
	margin: 0;
}
@media (max-width: 991.98px) {
	.doc-bar {
		align-items: stretch;
	}
	.doc-downloads-title {
		width: 100%;
		padding-right: 0;
	}
	.doc-search {
		margin-left: 0;
		width: 100%;
	}
	.doc-search-input {
		width: 100%;
	}
}

/* Live match counts on the document tabs while searching. */
.pd-tab .doc-count {
	font-size: 0.72em;
	font-weight: 600;
	opacity: 0.75;
	margin-left: 4px;
	text-decoration: none;
	display: inline-block;
}

/* ==================================================================
   BugHerd batch (2026-09-30): layout fixes #94, #96, #101, #103
   ================================================================== */

/* #94 - Data Centers "challenges" icon items were left-justified; center
   the icon + copy under the centered section heading. */
.dc-challenge-item {
	text-align: center;
}
.dc-challenge-icon {
	justify-content: center;
}

/* #96 - Data Centers performance table vs chart image read as two
   mismatched sizes. Cap the chart to the table's height and center it in
   its column so the two panels appear balanced (desktop only; they stack
   on mobile). */
@media (min-width: 992px) {
	.dc-table-section .col-lg-6 {
		display: flex;
		flex-direction: column;
	}
	.dc-chart-wrapper {
		margin-top: auto;
		margin-bottom: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.dc-chart-wrapper img {
		max-height: 410px;
		width: auto;
		max-width: 100%;
	}
}

/* #101 - Champion hero: darken the busy background photo so the hero copy
   is readable (left-weighted so the logo side stays bright), and center
   the Champion logo in its column (was left-justified). */
.champion-hero-area::before {
	background: linear-gradient(90deg, rgba(8, 20, 33, 0.78) 0%, rgba(8, 20, 33, 0.5) 45%, rgba(8, 20, 33, 0.2) 100%) !important;
}
.champion-hero-logo {
	text-align: center;
}
.champion-hero-logo img {
	margin-left: auto;
	margin-right: auto;
}

/* #103 - Pillar intro "callouts" (3 in a 4-up grid) sat left with a gap on
   the right; center the group across the page for every instance. */
.pillar-intro-features .row {
	justify-content: center;
}