/* HD Slider – replica of the Revolution Slider "homeslider" (fullwidth, 1170×450 grid). */
.hds { position: relative; width: 100%; overflow: hidden; background: transparent; }
.hds-slide { position: absolute; inset: 0; opacity: 0; z-index: 0; visibility: hidden; }
.hds-slide.is-active { opacity: 1; z-index: 1; visibility: visible; }
.hds-slide.is-next { z-index: 2; visibility: visible; }
.hds-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; }
.hds-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hds-link { position: absolute; inset: 0; z-index: 4; }

/* Layers sit on a centred grid, positions/sizes scale with the viewport (see hds_px()). */
.hds-layer {
	position: absolute; z-index: 5; margin: 0; padding: 0;
	white-space: nowrap; font-family: 'Open Sans', sans-serif; color: #fff;
	will-change: transform, opacity;
}
.hds-head { font-weight: 300; line-height: 1.25; text-transform: uppercase; }
.hds-text { font-weight: 400; line-height: 1.5; }
.hds-line { display: block; z-index: 7; max-width: none; }

/* Grid: layers are offset inside a centred box of the layout width. */
.hds-slide { --hds-pad: max(0px, calc((100% - var(--hds-gw, 1170px)) / 2)); }
.hds-r .hds-layer { margin-right: var(--hds-pad); }
.hds-l .hds-layer { margin-left: var(--hds-pad); }

/* Arrows – Revolution Slider "custom" navigation style, shown on hover. */
.hds-arrow {
	position: absolute; top: 50%; z-index: 10; width: 40px; height: 40px; margin-top: -20px;
	padding: 0; border: 0; border-radius: 0; cursor: pointer;
	background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden;
	transition: opacity .3s, visibility .3s, background-color .2s;
}
.hds-prev { left: 20px; }
.hds-next { right: 20px; }
.hds-arrow:hover { background: #000; }
.hds-arrow::before {
	content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px;
	border: solid #fff; border-width: 0 0 2px 2px;
}
.hds-prev::before { transform: translate(-30%, -50%) rotate(45deg); }
.hds-next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.hds:hover .hds-arrow, .hds.hds-touch .hds-arrow, .hds-arrow:focus-visible { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
	.hds-layer { will-change: auto; }
}