/* POLWAX Site 1.5.5 – Hero Pro image-led slider.
   1.5.5: plain navy (no grid texture) behind the copy in slider mode, ~43/57 split, ~650 px hero,
   longer photo blend, subtle blue grading, quieter arrow buttons.
   A large application photograph per slide that fills the right-hand hero area from the top of the
   hero to the measured-quantities strip and blends into the navy on the left; the POLWAX product as
   a transparent cut-out directly on the photo (no surface behind it), its name and a yellow
   "Explore product" link; pagination and circular arrows at the bottom right.
   Every rule is scoped to .pwx-hx.hx-hero--slider / .pwx-hx .hxs. The hero copy keeps its column,
   width and position; the strip and the rest of the page are not changed. */

/* ---------------------------------------------------------------- desktop */
/* plain dark navy behind the copy: replaces the 44 px grid texture and the yellow glow of hx.css
   (slider mode only; the previous-design collage keeps them) */
.pwx-hx.hx-hero--slider { background-color: var(--hx-navy); background-size: auto;
	background-image: radial-gradient(70% 90% at 0% 0%, rgba(16, 89, 160, .55) 0%, rgba(11, 61, 107, 0) 70%), linear-gradient(180deg, #0C4579 0%, var(--hx-navy) 100%); }
/* ~43 / 57: narrower copy column, photo takes the rest; ~650 px high */
.pwx-hx.hx-hero--slider .hx-hero__grid { position: relative; align-items: stretch; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 40px; padding-top: 64px; padding-bottom: 60px; }
.pwx-hx.hx-hero--slider .hx-hero__copy { position: relative; z-index: 2; align-self: center; }
/* desktop: headline on two lines as in the reference ("Precision Measurement." / "Smarter Industries."),
   same font, weight and colours, slightly smaller so it fits the narrower copy column */
@media (min-width: 1025px) { .pwx-hx.hx-hero--slider .hx-hero__title { font-size: clamp(2.5rem, 1.1rem + 2.4vw, 2.85rem); } }
.pwx-hx .hx-hero__media--slider {
	position: relative; z-index: 1; padding: 0; min-height: 600px;
	/* full hero height (over the grid's 64/60 px padding), 40 px under the copy's edge on the left
	   (that part is fully faded) and out to the right edge of the window */
	margin: -64px calc((min(100vw, calc(var(--hx-max) + 2 * var(--hx-gut))) - 100vw) / 2 - var(--hx-gut)) -60px -80px;
}
.pwx-hx .hx-hero__media--slider::before { display: none; }

.pwx-hx .hxs { position: relative; height: 100%; color: #fff; }
.pwx-hx .hxs__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pwx-hx .hxs__stage { position: relative; height: 100%; min-height: inherit; overflow: hidden; background: transparent; isolation: isolate; }
.pwx-hx .hxs__track { position: absolute; inset: 0; }

/* slides: cross-fade, the photo drifts in very slightly */
.pwx-hx .hxs__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.pwx-hx .hxs__slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity .9s ease; }
.pwx-hx .hxs__bg { position: absolute; inset: 0; overflow: hidden;
	/* the photo itself fades out on the left, so the hero's navy grid shows through (no seam) */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 10%, rgba(0, 0, 0, .62) 22%, rgba(0, 0, 0, .92) 32%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 10%, rgba(0, 0, 0, .62) 22%, rgba(0, 0, 0, .92) 32%, #000 40%); }
.pwx-hx .hxs__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.05); transition: transform 7s cubic-bezier(.2, .6, .3, 1); }
.pwx-hx .hxs__slide.is-active .hxs__photo { transform: scale(1); }
/* darker toward the bottom (product name, link, controls) and slightly at the top edge */
.pwx-hx .hxs__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
	linear-gradient(0deg, rgba(11, 61, 107, .86) 0%, rgba(11, 61, 107, .45) 22%, rgba(11, 61, 107, 0) 45%),
	linear-gradient(90deg, rgba(11, 61, 107, .35) 0%, rgba(11, 61, 107, 0) 40%),
	linear-gradient(180deg, rgba(11, 61, 107, .35) 0%, rgba(11, 61, 107, 0) 14%),
	linear-gradient(rgba(16, 44, 76, .16), rgba(16, 44, 76, .16)); /* subtle blue grading */ }

/* product: transparent cut-out directly on the photo, with a soft shadow that follows its shape */
.pwx-hx .hxs__product { position: absolute; z-index: 2; left: 20%; right: 36px; bottom: 104px; display: flex; align-items: center; gap: 4px; opacity: 0; transform: translateY(16px); transition: opacity .7s ease .2s, transform .7s ease .2s; }
.pwx-hx .hxs__slide.is-active .hxs__product { opacity: 1; transform: none; }
.pwx-hx .hxs__cutout { flex: 0 0 auto; display: block; width: 380px; height: 330px; margin: 0 20px 0 0; } /* 1.5.9.4: larger (was 290 × 250); no negative margins, so an image that could not be trimmed (no transparency) never covers its caption or the controls */
.pwx-hx .hxs__pimg { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .5)) drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
/* tightly framed cut-out (outline measured on the server): every product at the same visible height,
   proportions kept; --hxs-ph = product height, --hxs-pw = maximum width */
.pwx-hx .hxs { --hxs-ph: clamp(230px, 17vw, 270px); --hxs-pw: clamp(300px, 24vw, 360px); } /* 1.5.9.4: larger products (was 190 / 250 px), growing with the screen */
.pwx-hx .hxs__cutout.is-trimmed { position: relative; margin: 0 20px 0 0; height: auto; width: min(var(--hxs-pw), calc(var(--hxs-ph) * var(--ar))); aspect-ratio: var(--ar); }
.pwx-hx .hxs__cutout.is-trimmed .hxs__pimg { position: absolute; width: calc(100% / var(--bw)); height: calc(100% / var(--bh)); left: calc(-100% * var(--bl) / var(--bw)); top: calc(-100% * var(--bt) / var(--bh)); object-fit: fill; }
.pwx-hx .hxs__caption { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; max-width: 340px; margin: 0; }
.pwx-hx .hxs__name { max-width: 340px; color: #fff; font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.pwx-hx .hxs a.hxs__link { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; color: var(--hx-yellow); font-size: 1.12rem; font-weight: 700; text-decoration: none; border-bottom: 2px solid rgba(253, 212, 0, .55); text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.pwx-hx .hxs a.hxs__link .hx-ic { width: 18px; height: 18px; transition: transform .15s; }
.pwx-hx .hxs a.hxs__link:hover, .pwx-hx .hxs a.hxs__link:focus-visible { color: #fff; border-bottom-color: var(--hx-green); }
.pwx-hx .hxs a.hxs__link:hover .hx-ic { transform: translateX(3px); }

/* controls: pagination + circular arrows, bottom right, no panel */
.pwx-hx .hxs__bar { position: absolute; z-index: 3; right: 36px; bottom: 44px; display: flex; align-items: center; gap: 12px; }
.pwx-hx .hxs__dots { display: flex; align-items: center; gap: 4px; margin-right: 28px; }
.pwx-hx .hxs button.hxs__dot { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pwx-hx .hxs__dot span { display: block; width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .55); box-shadow: 0 1px 6px rgba(0, 0, 0, .35); transition: background .3s; }
.pwx-hx .hxs__dot:hover span { background: #fff; }
.pwx-hx .hxs__dot[aria-current="true"] span { background: var(--hx-yellow); }
.pwx-hx .hxs button.hxs__ctl { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .38); background: rgba(11, 61, 107, .42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.pwx-hx .hxs button.hxs__ctl svg { width: 20px; height: 20px; }
.pwx-hx .hxs button.hxs__ctl:hover, .pwx-hx .hxs button.hxs__ctl:focus-visible { background: var(--hx-yellow); border-color: var(--hx-yellow); color: var(--hx-navy); }
/* pause/play: not shown in the row; appears when reached with the keyboard */
.pwx-hx .hxs button.hxs__pause:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pwx-hx .hxs button.hxs__pause svg { width: 16px; height: 16px; }
.pwx-hx .hxs__pause .i-play { display: none; }
.pwx-hx .hxs__pause[aria-pressed="true"] .i-play { display: block; }
.pwx-hx .hxs__pause[aria-pressed="true"] .i-pause { display: none; }
.pwx-hx .hxs :focus-visible { outline: 3px solid var(--hx-yellow); outline-offset: 3px; }

@media (min-width: 1600px) {
	.pwx-hx .hxs { --hxs-ph: 320px; --hxs-pw: 420px; } /* 1.5.9.4: was 215 / 290 px */
	.pwx-hx .hxs__cutout { width: 440px; height: 380px; }
	.pwx-hx .hxs__name { font-size: 1.6rem; }
}

/* ---------------------------------------------------------------- tablet: one column (POLWAX Site 1024 px) */
@media (max-width: 1024px) {
	/* back to the one-column values of hx.css (the desktop override above is more specific) */
	/* 1.5.9: tighter vertical rhythm, no empty band under the photo controls */
	.pwx-hx.hx-hero--slider .hx-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 56px; padding-bottom: 28px; }
	.pwx-hx.hx-hero--slider .hx-hero__copy { max-width: 720px; }
	.pwx-hx .hx-hero__media--slider { max-width: none; min-height: 0; margin: 0 calc(-1 * var(--hx-gut)); }
	.pwx-hx .hxs { height: auto; }
	/* 1.5.9: wide photo, capped height, so the hero never becomes excessively tall */
	.pwx-hx .hxs__stage { height: auto; aspect-ratio: 16 / 9; max-height: 460px; }
	.pwx-hx .hxs__bg { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%); }
	.pwx-hx .hxs__bg::after { background: linear-gradient(0deg, rgba(11, 61, 107, .88) 0%, rgba(11, 61, 107, .4) 30%, rgba(11, 61, 107, 0) 55%); }
	.pwx-hx .hxs__product { left: 32px; right: 32px; bottom: 28px; }
	.pwx-hx .hxs { --hxs-ph: 230px; --hxs-pw: 320px; } /* 1.5.9.4: was 150 / 210 px */
	.pwx-hx .hxs__cutout { width: 320px; height: 280px; margin: 0 16px 0 0; }
	.pwx-hx .hxs__name { font-size: 1.3rem; }
	/* controls under the photo, so they never cover the product or its link */
	.pwx-hx .hxs__bar { position: static; justify-content: flex-end; padding: 12px var(--hx-gut) 0; }
	.pwx-hx .hxs__dots { margin-right: auto; margin-left: -6px; }
	.pwx-hx .hxs button.hxs__ctl { width: 48px; height: 48px; }
}

/* ---------------------------------------------------------------- phone (POLWAX Site 767 px) */
@media (max-width: 767px) {
	.pwx-hx.hx-hero--slider .hx-hero__grid { padding-top: 36px; padding-bottom: 20px; gap: 28px; }
	.pwx-hx .hxs__stage { aspect-ratio: 4 / 3; max-height: 420px; }
	.pwx-hx .hxs__product { left: 14px; bottom: 14px; right: 14px; gap: 0; }
	.pwx-hx .hxs__caption { width: auto; max-width: none; }
	.pwx-hx .hxs { --hxs-ph: 150px; --hxs-pw: 200px; } /* 1.5.9.4: was 96 / 132 px */
	.pwx-hx .hxs__cutout { width: 220px; height: 190px; margin: 0 14px 0 0; }
	.pwx-hx .hxs__cutout.is-trimmed { margin-right: 14px; }
	.pwx-hx .hxs__caption { gap: 4px; }
	.pwx-hx .hxs__name { font-size: 1rem; }
	.pwx-hx .hxs a.hxs__link { font-size: .92rem; min-height: 44px; border-bottom: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
	.pwx-hx .hxs button.hxs__dot { width: 30px; height: 44px; }
	.pwx-hx .hxs__dot span { width: 22px; }
	.pwx-hx .hxs__dots { gap: 2px; }
	.pwx-hx .hxs button.hxs__ctl { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.pwx-hx .hxs__slide, .pwx-hx .hxs__slide.is-active, .pwx-hx .hxs__product, .pwx-hx .hxs__photo { transition: opacity .2s linear; transform: none !important; }
}
@media print {
	.pwx-hx .hxs__bar { display: none; }
}