/*
 * PJ Global — header, navigation, search overlay and footer.
 * Breakpoints follow the old Elementor setup: mobile < 768px, tablet 768–1024px,
 * desktop ≥ 1025px. Colors come from the old Elementor kit.
 */

:root {
	--pjg-dark: #243546;
	--pjg-white: #fff;
	--pjg-blue: #051c8c;
	--pjg-text: #54595f;
	--pjg-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--pjg-header-height: 72px;
	--pjg-focus: 2px solid #ffbf47;

	/* Below this width the primary navigation becomes the hamburger. The full menu
	   measures 1212px (logo column 15% + 883px of items + search + EN + gaps, Roboto
	   16px); 1366px keeps a 12.7% margin. A media query cannot read a custom property,
	   so the number is repeated literally in the two rules marked "nav breakpoint";
	   navigation.js reads it from here. */
	--pjg-nav-breakpoint: 1366px;

	/* Production's 4px margin either side of a menu item, interpolated down to 2px
	   between the hamburger threshold and 1440px so the menu tightens gradually
	   instead of hitting a cliff. The font size never changes. */
	--pjg-nav-gap: clamp(2px, calc(2px + (100vw - 1366px) * 0.027), 4px);

	/* The one horizontal breathing space for page content. Never below 16px. */
	--pjg-gutter: clamp(16px, 4vw, 32px);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 12px 16px;
	z-index: 100000;
	top: 8px;
	left: 8px;
	background: var(--pjg-white);
	color: var(--pjg-dark);
}

.pjg-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	flex: none;
}

/* ---- Header ------------------------------------------------------------- */

.pjg-header {
	position: relative;
	z-index: 10;
	background: var(--pjg-dark);
	color: var(--pjg-white);
	font-family: var(--pjg-font);
}

@media (min-width: 1025px) {
	.pjg-header {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}

.pjg-header__inner {
	display: flex;
	align-items: center;
	min-height: var(--pjg-header-height);
	padding: 0 16px;
}

.pjg-header__brand {
	flex: 0 0 15%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pjg-header__logo {
	display: inline-flex;
	align-items: center;
	color: var(--pjg-white);
	text-decoration: none;
}

.pjg-header__logo img {
	display: block;
	max-height: 56px;
	width: auto;
	height: auto;
}

.pjg-header__site-name {
	font-size: 1.25rem;
	font-weight: 600;
}

.pjg-header__tools {
	flex: 1 1 85%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.pjg-header__icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--pjg-white);
	font-size: 16px;
	cursor: pointer;
}

.pjg-header__icon-button:hover {
	background: rgba(255, 255, 255, 0.1);
}

.pjg-header__lang {
	display: inline-flex;
	align-items: center;
	/* Never shrink: squeezing this box pushed its text past the viewport at 768px. The menu absorbs instead. */
	flex: 0 0 auto;
	gap: 6px;
	color: var(--pjg-white);
	font-size: 14px;
}

.pjg-header__lang img {
	width: 24px;
	height: auto;
}

.pjg-header a:focus-visible,
.pjg-header button:focus-visible,
.pjg-search a:focus-visible,
.pjg-search button:focus-visible,
.pjg-search input:focus-visible {
	outline: var(--pjg-focus);
	outline-offset: 2px;
}

/* ---- Navigation (shared) ------------------------------------------------ */

.pjg-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pjg-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 14px;
	cursor: pointer;
}

.pjg-nav__toggle .pjg-icon {
	transition: transform 0.2s;
}

.pjg-nav__toggle[aria-expanded="true"] .pjg-icon {
	transform: rotate(180deg);
}

/* ---- Desktop navigation ------------------------------------------------- */

.pjg-nav--desktop {
	flex: 1 1 auto;
	min-width: 0;
}

.pjg-nav__menu--desktop {
	display: flex;
	align-items: stretch;
	justify-content: center;
	/* Wrapping is what produced the silent two-line header. If a future menu item no
	   longer fits, it must overflow visibly instead. */
	flex-wrap: nowrap;
}

.pjg-nav__menu--desktop > .pjg-nav__item {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	min-height: var(--pjg-header-height);
}

.pjg-nav__menu--desktop > .pjg-nav__item.has-mega {
	position: static;
}

/* Top-level box: production's jet-mega-menu .top-level-link — 16px, padding 5px 10px, margin 0 4px,
   1px border in the header colour (invisible), white rounded border on hover and on the current page. */
.pjg-nav__top {
	display: inline-flex;
	align-items: center;
	margin: 0 var(--pjg-nav-gap);
	padding: 5px 10px;
	border: 1px solid var(--pjg-dark);
	border-radius: 0;
}

.pjg-nav__menu--desktop > .pjg-nav__item:hover > .pjg-nav__top,
.pjg-nav__menu--desktop > .pjg-nav__item.is-open > .pjg-nav__top,
.pjg-nav__menu--desktop > .current-menu-item > .pjg-nav__top {
	border-color: var(--pjg-white);
	border-radius: 5px;
}

.pjg-nav__top > .pjg-nav__link {
	color: var(--pjg-white);
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
}

.pjg-nav__menu--desktop > .pjg-nav__item:hover > .pjg-nav__top > .pjg-nav__link {
	color: #9f9f9f;
}

.pjg-nav__top > .pjg-nav__toggle {
	margin: 4px 0 0 6px; /* production: .main-menu .jet-dropdown-arrow { margin-left: 6px; margin-top: 4px; font-size: 14px } */
	padding: 0;
	color: var(--pjg-white);
	font-size: 14px;
}

/* Dropdown (About Us) */
.pjg-nav__menu--desktop .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	padding: 8px 0;
	background: var(--pjg-white);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.pjg-nav__menu--desktop .sub-menu .pjg-nav__link {
	display: block;
	padding: 10px 16px;
	color: var(--pjg-dark);
	text-decoration: none;
}

.pjg-nav__menu--desktop .sub-menu .pjg-nav__link:hover,
.pjg-nav__menu--desktop .sub-menu .pjg-nav__link:focus-visible {
	background: var(--pjg-dark);
	color: var(--pjg-white);
}

/* Mega panels */
.pjg-mega {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--pjg-white);
	color: var(--pjg-dark);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.pjg-mega__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 16px;
}

.pjg-nav__menu--desktop > .is-open > .sub-menu,
.pjg-nav__menu--desktop > .is-open > .pjg-mega {
	display: block;
}

@media (hover: hover) and (pointer: fine) {
	.pjg-nav__menu--desktop > .pjg-nav__item:hover > .sub-menu,
	.pjg-nav__menu--desktop > .pjg-nav__item:hover > .pjg-mega {
		display: block;
	}
}

.pjg-mega__industries {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.pjg-mega__industry a {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 120px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--pjg-dark);
	color: var(--pjg-white);
	text-decoration: none;
}

.pjg-mega__industry img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
	transition: opacity 0.2s;
}

.pjg-mega__industry a:hover img,
.pjg-mega__industry a:focus-visible img {
	opacity: 0.35;
}

.pjg-mega__industry-title {
	position: relative;
	padding: 12px;
	font-weight: 600;
}

.pjg-mega__columns {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

.pjg-mega__term {
	display: block;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(36, 53, 70, 0.2);
	color: var(--pjg-dark);
	font-weight: 600;
	text-decoration: none;
}

.pjg-mega__products a {
	position: relative;
	display: block;
	padding: 5px 0 5px 18px;
	color: var(--pjg-dark);
	font-size: 12px;
	font-weight: 300;
	text-decoration: none;
}

.pjg-mega__products a:hover,
.pjg-mega__products a:focus-visible,
.pjg-mega__term:hover {
	font-weight: 600;
}

.pjg-mega__star {
	position: absolute;
	left: 0;
	top: 7px;
	font-size: 12px;
	color: var(--pjg-blue);
}

.pjg-mega__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 20px auto 0;
	padding: 8px 16px;
	border-radius: 3px;
	background: var(--pjg-dark);
	color: var(--pjg-white);
	font-size: 13px;
	text-decoration: none;
}

.pjg-mega__inner {
	text-align: center;
}

.pjg-mega__industries,
.pjg-mega__columns {
	text-align: left;
}

/* ---- Mobile navigation -------------------------------------------------- */

.pjg-menu-toggle,
.pjg-nav--mobile {
	display: none;
}

.pjg-menu-toggle__close {
	display: none;
}

.pjg-menu-toggle[aria-expanded="true"] .pjg-menu-toggle__open {
	display: none;
}

.pjg-menu-toggle[aria-expanded="true"] .pjg-menu-toggle__close {
	display: inline-block;
}

/* Compact header — nav breakpoint (--pjg-nav-breakpoint). Below it the horizontal
   menu cannot fit, so the hamburger takes over. */
@media (max-width: 1365.98px) {
	.pjg-header__brand {
		flex-basis: 30%;
		justify-content: flex-start;
	}

	.pjg-header__tools {
		flex-basis: 70%;
		justify-content: flex-end;
	}

	.pjg-nav--desktop {
		display: none;
	}

	.pjg-menu-toggle {
		display: inline-flex;
		font-size: 20px;
	}

	.pjg-nav--mobile:not([hidden]) {
		display: block;
		max-height: calc(100vh - var(--pjg-header-height));
		overflow-y: auto;
		background: var(--pjg-white);
		color: var(--pjg-dark);
	}

	.pjg-nav--mobile .pjg-nav__item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-top: 1px solid rgba(36, 53, 70, 0.12);
	}

	.pjg-nav--mobile .pjg-nav__link {
		flex: 1 1 auto;
		padding: 12px 16px;
		color: var(--pjg-dark);
		text-decoration: none;
	}

	.pjg-nav--mobile .pjg-nav__toggle {
		width: 48px;
		height: 44px;
		color: var(--pjg-dark);
		font-size: 12px;
	}

	.pjg-nav--mobile .sub-menu {
		display: none;
		flex: 0 0 100%;
		padding-left: 16px;
		background: rgba(36, 53, 70, 0.04);
	}

	.pjg-nav--mobile .is-open > .sub-menu {
		display: block;
	}

	body.pjg-menu-open {
		overflow: hidden;
	}
}

/* Phone only, as on production: the EN label goes, the icons move closer together. */
@media (max-width: 767px) {
	.pjg-header__tools {
		gap: 4px;
	}

	.pjg-header__lang {
		display: none;
	}
}

/* ---- Search overlay ----------------------------------------------------- */

.pjg-search {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 15vh 16px 16px;
	background: rgba(0, 0, 0, 0.6);
	font-family: var(--pjg-font);
}

.pjg-search[hidden] {
	display: none;
}

.pjg-search__panel {
	position: relative;
	width: min(70vw, 900px);
	max-width: 100%;
	padding: 32px 56px 32px 24px;
	background: var(--pjg-white);
	border-radius: 4px;
}

.pjg-search__form {
	display: flex;
	gap: 8px;
}

.pjg-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid rgba(36, 53, 70, 0.3);
	border-radius: 3px;
	font-size: 16px;
}

.pjg-search__submit,
.pjg-search__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
}

.pjg-search__submit {
	padding: 0 16px;
	border-radius: 3px;
	background: var(--pjg-dark);
	color: var(--pjg-white);
}

.pjg-search__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	background: transparent;
	color: var(--pjg-dark);
	font-size: 18px;
}

body.pjg-search-open {
	overflow: hidden;
}

@media (max-width: 767px) {
	.pjg-search__panel {
		width: 100%;
	}
}

/* ---- Footer ------------------------------------------------------------- */

.pjg-footer {
	background: var(--pjg-dark);
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--pjg-font);
	font-size: 14px;
}

.pjg-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 16px;
}

.pjg-footer__col--contact {
	flex: 0 1 37%;
}

.pjg-footer__col--links {
	flex: 0 1 35%;
}

.pjg-footer__title {
	margin: 0 0 16px;
	color: var(--pjg-white);
	font-size: 18px;
	font-weight: 600;
}

.pjg-footer__address {
	margin: 0 0 16px;
	font-style: normal;
	line-height: 1.6;
}

.pjg-footer__contacts,
.pjg-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pjg-footer__contacts li,
.pjg-footer__links li {
	margin-bottom: 8px;
}

.pjg-footer__contacts a,
.pjg-footer__contact-text {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}

.pjg-footer__links a {
	color: inherit;
	text-decoration: none;
}

.pjg-footer a:hover,
.pjg-footer a:focus-visible {
	color: var(--pjg-white);
}

.pjg-footer a:focus-visible {
	outline: var(--pjg-focus);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.pjg-footer__col--contact,
	.pjg-footer__col--links {
		flex-basis: 100%;
	}
}

/* ---- Newsletter (footer) ------------------------------------------------ */

.pjg-newsletter {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.pjg-newsletter__intro {
	max-width: 52ch;
	margin: 0 0 16px;
	line-height: 1.6;
}

.pjg-newsletter__form {
	position: relative;
	max-width: 560px;
}

.pjg-newsletter__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.pjg-newsletter__label {
	flex: 0 0 100%;
	margin-bottom: 4px;
	font-size: 14px;
}

.pjg-newsletter__input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--pjg-white);
	font: inherit;
	font-size: 14px;
}

.pjg-newsletter__input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.pjg-newsletter__input:focus-visible {
	outline: var(--pjg-focus);
	outline-offset: 2px;
}

.pjg-newsletter__button {
	flex: 0 0 auto;
	padding: 10px 20px;
	border: 0;
	background: var(--pjg-white);
	color: var(--pjg-dark);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.pjg-newsletter__button:hover,
.pjg-newsletter__button:focus-visible {
	background: var(--pjg-blue);
	color: var(--pjg-white);
}

.pjg-newsletter__button:focus-visible {
	outline: var(--pjg-focus);
	outline-offset: 2px;
}

.pjg-newsletter__form.is-busy .pjg-newsletter__button {
	opacity: 0.7;
	cursor: progress;
}

/* Always in the flow and tall enough for the longest message at this width, so an
   answer appearing never moves the rest of the footer. */
.pjg-newsletter__message {
	min-height: 42px;
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.5;
}

.pjg-newsletter__message.is-success {
	color: #8fe3a8;
}

.pjg-newsletter__message.is-error {
	color: #ffbf47;
}

/* Honeypot. Hidden by clipping, not display:none or visibility:hidden, which the
   bots that bother to check computed style skip over. */
.pjg-newsletter__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.pjg-newsletter__message {
		min-height: 63px;
	}
}

/* ---- Single templates (product, industry, brands) ------------------------ */

/* ---- Content gutter ------------------------------------------------------
   One token, applied at the content-container level, never twice on the same text:
   - our templates put it on .pjg-container, so the full-width bands around it
     (hero, related products) keep reaching the viewport edge as they do on
     production;
   - templates without a .pjg-container (brand pages, 404) get it on .site-main,
     replacing Hello's 10px;
   - Elementor documents get it on the container that actually holds the widgets,
     because Hello leaves .site-main unpadded there.
   Backgrounds are unaffected: padding insets a box's children, not its own
   background. */

body:not([class*="elementor-page-"]) .site-main {
	padding-inline: var(--pjg-gutter);
	/* Hello caps .site-main at 1140px and centres it, which stopped the hero and
	   related-products bands short of the viewport edge; on production those bands
	   are full width. The 1140px content column comes from .pjg-container instead. */
	max-width: none;
}

body:not([class*="elementor-page-"]) .site-main.pjg-single,
body:not([class*="elementor-page-"]) .site-main.pjg-archive,
body:not([class*="elementor-page-"]) .site-main.pjg-search-results {
	padding-inline: 0;
}

/* Only the container that directly holds widgets, i.e. the one that holds the text.
   A container that merely wraps other containers — the home hero — is skipped, so
   their backgrounds keep reaching the edge. max() keeps a padding the section
   already has, so nothing is padded twice. */
.site-main .e-con:has(> .elementor-widget),
.site-main .e-con:has(> .e-con-inner > .elementor-widget) {
	padding-inline-start: max(var(--padding-left, 0px), var(--pjg-gutter));
	padding-inline-end: max(var(--padding-right, 0px), var(--pjg-gutter));
}

/* A token with no break opportunity — an email address, a bare URL, a title written
   with slashes — has to wrap instead of pushing the page sideways. The gutter makes
   columns a little narrower than production's, so this bites earlier than it did
   there: at 768px the address on Contact us ran 17px past the viewport. */
.site-main :is(p, li, h1, h2, h3, h4, h5, h6, td, th, dd, dt, figcaption, blockquote, span, a) {
	overflow-wrap: break-word;
}

.pjg-container {
	/* 1140px of content — production's container width — plus the gutter either side,
	   so the text column lands where production's does at every width. */
	max-width: calc(1140px + 2 * var(--pjg-gutter));
	margin: 0 auto;
	padding-inline: var(--pjg-gutter);
}

.pjg-single {
	color: var(--pjg-dark);
	font-family: var(--pjg-font);
}

.pjg-breadcrumbs {
	padding: 20px 0;
	font-size: 14px;
}

.pjg-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pjg-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pjg-breadcrumbs a {
	color: var(--pjg-blue);
	text-decoration: none;
}

.pjg-breadcrumbs a:hover,
.pjg-breadcrumbs a:focus-visible {
	text-decoration: underline;
}

.pjg-breadcrumbs__sep {
	font-size: 12px;
	color: var(--pjg-text);
}

/* Product */
.pjg-product {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding-bottom: 48px;
}

.pjg-product__media {
	position: relative;
	flex: 0 0 calc(50% - 16px);
	align-self: flex-start;
}

@media (min-width: 1025px) {
	.pjg-product__media {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--pjg-header-height) + 16px);
	}
}

.pjg-product__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.pjg-product__info {
	flex: 1 1 0;
	min-width: 0;
}

.pjg-product__title {
	margin: 0 0 8px;
	font-size: 2rem;
	line-height: 1.2;
}

.pjg-terms {
	margin: 0 0 16px;
	font-size: 14px;
}

.pjg-terms a {
	position: relative;
	z-index: 2; /* above the stretched card link */
	color: var(--pjg-blue);
	text-decoration: none;
}

.pjg-terms a:hover,
.pjg-terms a:focus-visible {
	text-decoration: underline;
}

.pjg-product__description {
	margin-bottom: 24px;
	line-height: 1.7;
}

.pjg-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 3px;
	background: var(--pjg-dark);
	color: var(--pjg-white);
	font-size: 13px;
	text-decoration: none;
}

.pjg-button:hover,
.pjg-button:focus-visible {
	background: var(--pjg-blue);
	color: var(--pjg-white);
}

.pjg-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 3px;
	background: var(--pjg-white);
	color: var(--pjg-dark);
	font-size: 12px;
	font-weight: 500;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Industry hero */
.pjg-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--pjg-dark);
	color: var(--pjg-white);
}

.pjg-hero__bg,
.pjg-card__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pjg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(36, 53, 70, 0.7);
}

.pjg-hero__inner {
	z-index: 2;
}

.pjg-hero__inner {
	position: relative;
	padding-top: 64px;
	padding-bottom: 64px;
}

.pjg-hero__title {
	margin: 0 0 16px;
	font-size: 2.25rem;
	color: var(--pjg-white);
	/* Titles like "Iron/Steel/Aluminum/Copper/Others" have no break opportunity and
	   were cut off at the right edge of a phone screen. */
	overflow-wrap: anywhere;
}

.pjg-hero__text {
	max-width: 800px;
	line-height: 1.7;
	white-space: pre-line; /* plain-text description: keep its line breaks */
}

/* Related sections */
.pjg-related {
	padding: 32px 0 56px;
	background: #f5f7f9;
}

/* Product page, "Related Industries": production renders it at 32px/600 in the body
   text colour, full width, with no rule under it (post-32.css, element e575391). */
.pjg-related__title {
	margin: 0 0 16px;
	font-size: 32px;
	font-weight: 600;
	color: var(--pjg-text);
}

/* Industry page: two headings in one row instead. Production's container
   (post-25.css, b85cf11) is a flex row with a 10px gap, both headings left-aligned
   and inset 10px, a 1px rule under the row, and the headings at 32px/300. */
.pjg-related__head .pjg-related__title {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px;
	padding-inline: 10px;
	border-bottom: 1px solid rgba(2, 1, 1, 0.15);
	font-weight: 300;
}

/* A flex item will not shrink below its longest unbreakable run, and titles like
   "Iron/Steel/Aluminum/Copper/Others" have no break opportunity — that pushed the
   heading past the right edge of a phone screen. */
.pjg-related__title > span {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Carousel: CSS scroll-snap, 3 columns; no autoplay, no loop (deliberate, WCAG 2.2.2). */
.pjg-carousel {
	position: relative;
}

/* ---- Carousel control bar ------------------------------------------------
   One bar for every carousel: pause on the left, the position indicator in the
   middle, the arrows as a pair on the right. It sits below the slide area, never
   over it, so no control can cover a slide's content. Colour comes from
   currentColor, set once per context by .pjg-carousel--on-dark; the accent is
   production's own brand blue (#051C8C, Elementor kit slot fcba64c), swapped for
   white on dark backdrops where the blue would not reach 3:1 against the track. */

.pjg-carousel__bar {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 56px;
	padding-inline: var(--pjg-gutter);
	color: var(--pjg-dark);
	--pjg-accent: var(--pjg-blue);
}

.pjg-carousel--on-dark .pjg-carousel__bar {
	color: #fff;
	--pjg-accent: #fff;
}

.pjg-carousel.is-static .pjg-carousel__bar {
	display: none;
}

/* Pause/play: a bare icon, no box and no border. The hit area is larger than the
   glyph so it is still comfortable to press. */
.pjg-carousel__toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.pjg-carousel__toggle-icon {
	width: 18px;
	height: 18px;
	opacity: 0.7;
}

.pjg-carousel__toggle:hover .pjg-carousel__toggle-icon,
.pjg-carousel__toggle:focus-visible .pjg-carousel__toggle-icon {
	opacity: 1;
}

/* One icon shown at a time; both stay in the DOM so the node under the pointer is
   never replaced mid-click. */
.pjg-carousel__toggle-icon--play,
.pjg-carousel__toggle.is-paused .pjg-carousel__toggle-icon--pause {
	display: none;
}

.pjg-carousel__toggle.is-paused .pjg-carousel__toggle-icon--play {
	display: inline-block;
}

.pjg-carousel__indicator {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

/* Dots: solid, no border, 8px across. The button is 24px wide, which puts 16px of
   visual gap between dots and makes the target 24x44 — WCAG 2.5.8 Target Size
   (Minimum, AA) asks for 24x24. 44x44 is 2.5.5, AAA, and is what the pause button
   and the arrows use. */
.pjg-carousel__dots {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.pjg-carousel__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.pjg-carousel__dot > span {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.3;
}

.pjg-carousel__dot.is-current > span {
	background: var(--pjg-accent);
	opacity: 1;
}

/* Beyond five slides the dots would wrap, so the indicator becomes a track. */
.pjg-carousel__progress {
	position: relative;
	width: 100%;
	height: 3px;
	overflow: hidden;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 20%, transparent);
}

.pjg-carousel__progress-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--pjg-accent);
	transition: transform 250ms ease;
}

.pjg-carousel__nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Arrows: a 40px circle inside a 44px hit area. */
.pjg-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.pjg-carousel__arrow-shape {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 50%;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.pjg-carousel__arrow .pjg-icon {
	width: 16px;
	height: 16px;
	opacity: 0.7;
}

.pjg-carousel__arrow:hover .pjg-carousel__arrow-shape,
.pjg-carousel__arrow:focus-visible .pjg-carousel__arrow-shape {
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.pjg-carousel__arrow:hover .pjg-icon,
.pjg-carousel__arrow:focus-visible .pjg-icon {
	opacity: 1;
}

.pjg-carousel__track {
	--pjg-cols: 3;
	--pjg-gap: 16px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--pjg-cols) - 1) * var(--pjg-gap)) / var(--pjg-cols));
	gap: var(--pjg-gap);
	margin: 0;
	padding: 4px 2px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Production's slider has no scrollbar (overflow: hidden). The track stays a real
	   scroll container — arrows, Tab focus, arrow keys, touch — but without the bar
	   that ran under the cards. */
	scrollbar-width: none;
}

.pjg-carousel__track::-webkit-scrollbar {
	display: none;
}

.pjg-carousel__item {
	scroll-snap-align: start;
	display: flex;
}

@media (max-width: 1024px) {
	.pjg-carousel__track {
		--pjg-cols: 2;
	}
}

@media (max-width: 767px) {
	.pjg-carousel__track {
		--pjg-cols: 1;
	}

	.pjg-product__media {
		flex-basis: 100%;
	}

}

.pjg-carousel__track:focus-visible,
.pjg-carousel__arrow:focus-visible,
.pjg-card__link:focus-visible,
.pjg-button:focus-visible,
.pjg-breadcrumbs a:focus-visible,
.pjg-terms a:focus-visible {
	outline: 2px solid var(--pjg-blue);
	outline-offset: 2px;
}

/* Cards */
.pjg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border-radius: 4px;
	background: var(--pjg-white);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.pjg-card__link {
	color: inherit;
	text-decoration: none;
}

/* Stretched link: the whole card is clickable without nesting links. */
.pjg-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.pjg-card__title {
	margin: 0 0 6px;
	font-size: 1.05rem;
	line-height: 1.3;
}

.pjg-card--industry {
	min-height: 260px;
	padding: 20px;
	background: var(--pjg-dark);
	color: var(--pjg-white);
}

.pjg-card--industry .pjg-card__bg {
	opacity: 0.35;
}

.pjg-card--industry .pjg-card__title,
.pjg-card--industry .pjg-card__text {
	position: relative;
}

.pjg-card--industry .pjg-card__text {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.6;
}

.pjg-card__media {
	position: relative;
}

/* Two classes on purpose: inside an Elementor document `.elementor img{height:auto}`
   (0,1,1) outranks a single class, and the media box then took each image's own
   ratio — which is what made the cards in the shortcode carousels start at
   different heights. */
.pjg-card .pjg-card__img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.pjg-card__body {
	padding: 14px 16px 16px;
}

/* Brands */
.pjg-brand__logo {
	display: block;
	max-width: 300px;
	height: auto;
	margin: 16px 0 32px;
}

.pjg-brands__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pjg-brand-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: 16px;
	border: 1px solid rgba(36, 53, 70, 0.12);
	border-radius: 4px;
	color: var(--pjg-dark);
	text-align: center;
	text-decoration: none;
}

.pjg-brand-card__link:hover,
.pjg-brand-card__link:focus-visible {
	border-color: var(--pjg-dark);
}

.pjg-brand-card__logo img {
	display: block;
	max-width: 100%;
	max-height: 80px;
	width: auto;
	height: auto;
}

.pjg-brand-card__title {
	margin: 0;
	font-size: 1rem;
}

/* ---- Archive / search grids ----------------------------------------------- */

.pjg-archive__title {
	margin: 32px 0 20px;
	font-size: 2rem;
}

.pjg-archive__empty {
	margin: 0 0 48px;
}

.pjg-grid {
	--pjg-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--pjg-cols), minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 48px;
	padding: 0;
	list-style: none;
}

.pjg-grid__item {
	display: flex;
}

@media (max-width: 1024px) {
	.pjg-grid:not(.pjg-grid--fixed-3) {
		--pjg-cols: 2;
	}
}

@media (max-width: 767px) {
	.pjg-grid:not(.pjg-grid--fixed-3) {
		--pjg-cols: 1;
	}
}

/* ---- Archives ------------------------------------------------------------ */

.pjg-archive {
	color: var(--pjg-dark);
	font-family: var(--pjg-font);
}

.pjg-archive__intro {
	max-width: 900px;
	margin-bottom: 24px;
	line-height: 1.7;
}

.pjg-card--category {
	min-height: 200px;
	justify-content: flex-end;
	padding: 20px;
	background: var(--pjg-dark);
	color: var(--pjg-white);
}

.pjg-card--category .pjg-card__bg {
	opacity: 0.45;
	transition: opacity 0.2s;
}

.pjg-card--category:hover .pjg-card__bg,
.pjg-card--category:focus-within .pjg-card__bg {
	opacity: 0.3;
}

.pjg-card--category .pjg-card__title {
	position: relative;
	margin: 0;
	font-size: 1.25rem;
}

.pjg-archive__layout {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding-bottom: 48px;
}

.pjg-archive__sidebar {
	flex: 0 0 calc(25% - 24px);
}

.pjg-archive__content {
	flex: 1 1 0;
	min-width: 0;
}

.pjg-archive__content .pjg-grid {
	margin-bottom: 0;
}

.pjg-category-nav {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(36, 53, 70, 0.12);
}

.pjg-category-nav__item a {
	display: block;
	padding: 10px 12px;
	border-bottom: 1px solid rgba(36, 53, 70, 0.12);
	color: var(--pjg-dark);
	text-decoration: none;
}

.pjg-category-nav__item a:hover,
.pjg-category-nav__item a:focus-visible,
.pjg-category-nav__item.is-current a {
	background: var(--pjg-dark);
	color: var(--pjg-white);
}

.pjg-category-nav__item a:focus-visible {
	outline: 2px solid var(--pjg-blue);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.pjg-archive__sidebar {
		flex-basis: 100%;
	}
}

/* ---- Page shortcodes: brand carousel, dedicated products, history timeline --- */

/* Column counts as on production: brands 8 / 5 / 3, dedicated products 3 everywhere. */
.pjg-carousel--brands .pjg-carousel__track {
	--pjg-cols: 8;
	--pjg-gap: 12px;
}

@media (max-width: 1024px) {
	.pjg-carousel--brands .pjg-carousel__track {
		--pjg-cols: 5;
	}
}

@media (max-width: 767px) {
	.pjg-carousel--brands .pjg-carousel__track {
		--pjg-cols: 3;
	}
}

/* Higher specificity than the base 3 / 2 / 1 rules, so it stays 3 at every width. */
.pjg-carousel--fixed-3 .pjg-carousel__track {
	--pjg-cols: 3;
}

.pjg-card--brand {
	align-items: center;
	padding: 10px;
	box-shadow: none;
	text-align: center;
}

.pjg-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
}

.pjg-card__logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.pjg-card--brand .pjg-card__title {
	margin: 8px 0 0;
	font-size: 0.85rem;
	font-weight: 500;
}

/* Timeline: centre line, cards alternate left/right; one column on narrow screens. */
.pjg-timeline {
	position: relative;
	margin: 0;
	padding: 16px 0;
	list-style: none;
	font-family: var(--pjg-font);
	color: var(--pjg-dark);
}

.pjg-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: var(--pjg-dark);
}

.pjg-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 56px 1fr;
	align-items: center;
	margin-bottom: 32px;
}

.pjg-timeline__point {
	grid-column: 2;
	grid-row: 1;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--pjg-dark);
	color: var(--pjg-white);
	font-size: 16px;
}

.pjg-timeline__year {
	grid-row: 1;
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--pjg-dark);
}

.pjg-timeline__card {
	grid-row: 1;
	padding: 16px 20px;
	border-radius: 4px;
	background: var(--pjg-white);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Odd items: card left, year right. Even items: year left, card right. */
.pjg-timeline__item:nth-child(odd) .pjg-timeline__card {
	grid-column: 1;
}

.pjg-timeline__item:nth-child(odd) .pjg-timeline__year {
	grid-column: 3;
	padding-left: 12px;
}

.pjg-timeline__item:nth-child(even) .pjg-timeline__card {
	grid-column: 3;
}

.pjg-timeline__item:nth-child(even) .pjg-timeline__year {
	grid-column: 1;
	padding-right: 12px;
	text-align: right;
}

.pjg-timeline__title {
	margin: 0 0 6px;
	font-size: 1.05rem;
}

.pjg-timeline__text {
	margin: 0;
	line-height: 1.6;
}

@media (max-width: 767px) {
	.pjg-timeline::before {
		left: 20px;
	}

	.pjg-timeline__item {
		grid-template-columns: 40px 1fr;
		column-gap: 12px;
		row-gap: 6px;
	}

	.pjg-timeline__point {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
	}

	.pjg-timeline__item:nth-child(n) .pjg-timeline__year {
		grid-column: 2;
		grid-row: 1;
		padding: 0;
		text-align: left;
	}

	.pjg-timeline__item:nth-child(n) .pjg-timeline__card {
		grid-column: 2;
		grid-row: 2;
	}
}

/* ---- Justified body copy ---------------------------------------------------
   `text-align: justify` comes from Elementor's generated CSS — five blocks across
   three pages (post-74 `6e5143b`; post-182 `f07c7e4`, `98774cd`; post-196
   `44e3311`, `ead6073`). It is not in this theme's CSS and not inline in the page
   content, and production renders exactly the same five blocks justified, so this
   is production's styling rather than a rebuild artefact.

   At 390px a line holds six or seven words, so all the slack goes into the word
   spaces and the text develops rivers. Below 768px these blocks align to `start`
   — deliberately `start` and not `left`, so a right-to-left translation still
   reads correctly. At 768px and above production's justify is kept.

   Only these five are overridden: three other text widgets on the site are
   centred on purpose, and a blanket rule would flatten them. The ids come from the
   page data, so if one of these sections is rebuilt in the editor its id changes —
   `layout-audit.js` check 1 is what catches that, and it runs as a cutover gate. */
@media (max-width: 767px) {
	body .elementor-74 .elementor-element.elementor-element-6e5143b,
	body .elementor-182 .elementor-element.elementor-element-f07c7e4,
	body .elementor-182 .elementor-element.elementor-element-98774cd,
	body .elementor-196 .elementor-element.elementor-element-44e3311,
	body .elementor-196 .elementor-element.elementor-element-ead6073 {
		text-align: start;
	}
}

/* Hyphenation belongs only where the text is justified: there it suppresses the
   large inter-word gaps. In ragged-right text there are no gaps to suppress, so
   the browser hyphenates purely to even out the right edge and produces a hyphen
   on nearly every line — a hyphen ladder that reads worse than the ragged edge.
   So: only these five blocks, and only at the widths where the justify is on.
   Automatic hyphenation needs a correct language on <html>, which
   language_attributes() provides. */
@media (min-width: 768px) {
	.elementor-74 .elementor-element.elementor-element-6e5143b,
	.elementor-182 .elementor-element.elementor-element-f07c7e4,
	.elementor-182 .elementor-element.elementor-element-98774cd,
	.elementor-196 .elementor-element.elementor-element-44e3311,
	.elementor-196 .elementor-element.elementor-element-ead6073 {
		hyphens: auto;
		/* never break a word shorter than 8 characters, and never leave fewer than
		   4 characters on either side of the break */
		hyphenate-limit-chars: 8 4 4;
		/* At most two hyphenated lines in a row — but measured on this Chromium both
		   of these are inert: CSS.supports() is false for each, the property is
		   unknown to the CSSOM, and the rendered output is identical with and
		   without them (14 lines / 12 hyphen breaks / longest run 10 either way).
		   Kept because WebKit does honour the -webkit- form, so Safari benefits;
		   in Chromium the only working lever is hyphenate-limit-chars above, which
		   does change rendering (12 breaks -> 6 at "8 4 4", 0 at "20 4 4"). */
		-webkit-hyphenate-limit-lines: 2;
		hyphenate-limit-lines: 2;
	}
}

/* ---- Home stat counters ---------------------------------------------------
   The dividers are `border-left` on an inner container of cells 2-4, written by
   Elementor into uploads/elementor/css/post-74.css — not by this theme and not by
   the kit. A left border means nothing once the row wraps, so at phone widths each
   stacked cell drew a stray vertical line down the left of the screen; production
   does exactly the same.

   The border moves onto the cell itself and follows the axis: inline-start while
   the cells are a row, block-start for the second row of the 2x2 grid. A cell only
   gets a start border on a side where it actually has a neighbour.

   The selectors carry Elementor element ids, which come from the page's own data:
   if this section is rebuilt in the editor the ids change and these rules need
   revisiting. They are one class more specific than Elementor's, which is what it
   takes — post-74.css is enqueued after this file. */

.elementor-74 .elementor-element-cdaf874 > .e-con .elementor-element-7c8f2f0,
.elementor-74 .elementor-element-cdaf874 > .e-con .elementor-element-0d46674,
.elementor-74 .elementor-element-cdaf874 > .e-con .elementor-element-e6b63ba {
	border-left-width: 0;
	border-inline-start-width: 0;
}

/* Four across: a divider before every cell except the first. */
@media (min-width: 768px) {
	.elementor-74 .elementor-element-cdaf874 > .e-con + .e-con {
		border-inline-start: 1px solid var(--e-global-color-text, #7a7a7a);
	}
}

/* Phones: 2x2 rather than a column that eats the screen.

   The cross is drawn once on the container, as two absolutely positioned
   pseudo-elements, not as four per-cell borders. Four independent borders each
   start from their own cell's box, so padding, rounding and sub-pixel offsets show
   up as an uneven junction where they meet. Two rules positioned against the
   container meet by construction.

   `grid-auto-rows: 1fr` equalises the two rows — they are otherwise 172.5px and
   187.9px, which would put the 50% line inside a cell instead of in the gap.
   Elementor leaves both pseudo-elements at `content: none` on this container, so
   nothing is being overwritten. */
@media (max-width: 767px) {
	.elementor-74 .elementor-element-cdaf874 {
		position: relative;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 1fr;
		column-gap: 15px;
		row-gap: 16px;
	}

	.elementor-74 .elementor-element-cdaf874::before,
	.elementor-74 .elementor-element-cdaf874::after {
		content: "";
		position: absolute;
		z-index: 1;
		background: var(--e-global-color-text, #7a7a7a);
		pointer-events: none;
	}

	/* one continuous vertical rule on the centre line, inset 12px at each end */
	.elementor-74 .elementor-element-cdaf874::before {
		top: 12px;
		bottom: 12px;
		left: 50%;
		width: 1px;
		transform: translateX(-0.5px);
	}

	/* one continuous horizontal rule on the centre line, inset 12px at each end */
	.elementor-74 .elementor-element-cdaf874::after {
		left: 12px;
		right: 12px;
		top: 50%;
		height: 1px;
		transform: translateY(-0.5px);
	}
}

/* Home hero (was the Pro `slides` widget): headings and text inherit the body font like the slides did, instead of
   the kit's global Roboto. Specificity (0,3,0) beats Elementor's generic kit rule (0,2,0) but not an element's own
   typography (0,4,0), so a font chosen in the Elementor editor still wins. */
.pjg-hero.e-con .elementor-widget-heading .elementor-heading-title,
.pjg-hero.e-con .elementor-widget-text-editor {
	font-family: inherit;
}

/* ---- Home hero carousel --------------------------------------------------
   The Elementor wrapper (.pjg-hero) is the scroll-snap track; each child
   container is one slide. Every selector here is qualified with .e-con, because
   the single-industry / single-product templates use the same .pjg-hero class for
   their (static) hero band, and the carousel geometry — row direction, a fixed
   520px height, horizontal scrolling — clipped that band's text on phones.
   Touch swipe and the no-JavaScript fallback come from CSS alone (first slide
   visible, no controls); carousel.js wraps the track in .pjg-carousel--hero and
   builds the same controls every other carousel gets. */

.pjg-hero.e-con {
	--pjg-hero-h: 520px;
	/* Elementor's per-element rules (.elementor-74 .elementor-element-<id>) are more specific than any class
	   selector here and load later, so the track's own geometry is asserted. Only layout properties that make
	   it a carousel are forced; colours, spacing and content stay editable in Elementor. */
	position: relative;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	height: var(--pjg-hero-h);
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	min-width: 0;
}

.pjg-hero.e-con::-webkit-scrollbar {
	display: none;
}

.pjg-hero.e-con > .e-con {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	height: var(--pjg-hero-h) !important;
	min-height: var(--pjg-hero-h) !important;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* The hero carousel is the shared component; only the dark strip under the slides
   is specific to it, so the dots read against the page. */
.pjg-carousel--hero {
	width: 100%;
	/* As a flex item its min-width would otherwise be the slides' min-content width, which widens the page. */
	min-width: 0;
}

/* The hero's bar is laid over the bottom of the media on a gradient scrim, rather
   than on a strip of its own: the hero keeps exactly the height of its slides. */
.pjg-carousel--hero .pjg-carousel__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45));
}

.pjg-carousel__arrow:focus-visible,
.pjg-carousel__toggle:focus-visible,
.pjg-carousel__dot:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* No motion means no motion: autoplay is off in the script, and the scroll itself
   is instant rather than animated. */
@media (prefers-reduced-motion: reduce) {
	.pjg-carousel__track,
	.pjg-hero.e-con {
		scroll-behavior: auto;
	}

	.pjg-carousel__progress-fill {
		transition: none;
	}
}