/*!
 * Bollard Boys Site — homepage hero product carousel ("conveyor loop").
 * Ported from the approved prototype (conveyor v2). Loaded after hero-video.css, and only on a
 * homepage whose hero shows the carousel (see bbs_home_shows_carousel() in includes/render.php).
 *
 * Every selector starts `body.bbs-active .bbs-home` (see bbs-tokens.css). Rules on a <button>
 * carry one extra class (.bbs-carousel) so they clear the tokens' button reset and the
 * Elementor kit's `.elementor-kit-N button:hover` without !important.
 *
 * The hero itself (grid, left column, the panel's base box) stays in hero-video.css. The only
 * hero rule changed here is the panel's, and it is keyed to .bbs-hero__media--carousel, which
 * only the carousel markup carries: with the video, nothing in this file matches.
 *
 * Rgba and hex values without a token are the design's own (stage lighting, floor, metal).
 */

/* =======================================================================================
   HERO CAROUSEL: "Conveyor loop"

   The products stand on a flush showroom turntable seen from slightly above. Ten
   stands (the five types, twice) drift right-to-left along its front arc: one CSS
   animation per stand (transform + opacity only), offset by animation-delay, so the whole
   loop runs on the compositor. The keyframes are sampled from one warped path, so every
   stand slows as it reaches a slot and each product rests at the centre without the
   band ever stopping.

   The two retractable products (Manual R-8472, Automatic R-9002) lower into the ground
   and rise again once per rest, only while they are the centred product and the loop is
   allowed to move. See "Retracting products" below.

   Modes (classes on .bbs-carousel, set by assets/js/bbs-carousel.js):
     (none)        no script: static lineup from data-pos, Manual caption, plain links.
     .is-enhanced  script attached: tabs, arrows and Pause/Play revealed.
     .is-drift     continuous loop engaged (never under reduced motion unless the viewer
                   pressed Play). Without it, data-pos places the stands (instant steps).
     .is-running   loop actually moving (not hovered, focused, held, off-screen, paused).
     .is-dwell     running, but the band waits a moment at the centre first (the loop
                   started from a standstill in front of a retractable product).
     .is-stopped   no auto-rotation (static mode or a user pause): full tab indicator.
   On a stand:
     .is-lowered   that retractable product is sinking / down (a CSS transition).

   Geometry tokens (all inside the stage, which is a size container):
     --bbs-cz-rx     horizontal radius of the path the stands' feet follow
     --bbs-cz-ry     vertical radius (= rx * tilt), how far back items rise
     --bbs-cz-ph     displayed height of a full-height product at the centre
     --bbs-cz-floor  stage bottom to the front of the path
   Loop length lives in --bbs-cz-loop (60s for the ten stands: one product reaches the
   centre every 6s and the five products take 30s to pass); the per-stand delays below are
   loop / 10 steps. The script reads the real duration from the computed style, so changing
   the loop only means changing --bbs-cz-loop and the ten delays together.

   Keyframes, delays and static slots were generated, not hand-written. A stand at angle theta
   on the drum (0 = front centre, growing as it moves left) sits at x = -sin(theta),
   y = -(1 - cos(theta)), z = y * 120px; scale and opacity follow monotone curves through fixed
   values per step (the static slots below are the same curves at whole steps). The loop
   samples theta = 36deg * warp(10 * progress) six times per step, with
   warp(u) = u - 0.6 * sin(2 pi u) / (2 pi) (WARP in the script must match). Regenerate all
   three together rather than editing single frames.
   Two stands 180deg apart carry the same product, so the opacity curve is asymmetric: a
   leaving stand is gone before it reaches the side, an arriving one only shows once past
   the side. The two copies of a product are never visible at the same time.
   ======================================================================================= */

/* The carousel's panel only (the modifier is on the carousel markup, never on the video's). The
   extra class also keeps these ahead of hero-video.css's media-query rules for the panel. */
body.bbs-active .bbs-home .bbs-hero__media.bbs-hero__media--carousel {
	display: flex;
	flex-direction: column;
	/* About one viewport under the ~120px header, within sane bounds. */
	min-height: clamp(640px, calc(100vh - 120px), 860px);
}

body.bbs-active .bbs-home .bbs-carousel {
	--bbs-cz-loop: 60s;
	--bbs-cz-tilt: 0.15;
	--bbs-cz-rx: 230px;
	--bbs-cz-ry: calc(var(--bbs-cz-rx) * var(--bbs-cz-tilt));
	/* 360px on a 900px-tall window, a little more on tall screens. */
	--bbs-cz-ph: min(400px, 40vh);
	--bbs-cz-floor: 88px;
	--bbs-cz-pad: 40px;
	--bbs-cz-horizon: calc(var(--bbs-cz-floor) + var(--bbs-cz-ry) * 3.2);
	flex: 1 1 auto;
	display: grid;
	grid-template-rows: minmax(430px, 1fr) auto auto;
	min-width: 0;
	background: var(--bbs-dark);
	color: var(--bbs-surface);
}

@supports (container-type: inline-size) {
	body.bbs-active .bbs-home .bbs-carousel {
		/* 34cqw keeps the faint preview at the side clear of the arrow buttons. */
		--bbs-cz-rx: min(34cqw, 300px);
	}
}

/* ---- Stage ---------------------------------------------------------------------------- */

body.bbs-active .bbs-home .bbs-carousel__stage {
	position: relative;
	min-width: 0;
	overflow: hidden;
	container-type: inline-size;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	background:
		radial-gradient(ellipse 58% 62% at 50% 0%, rgba(110, 154, 214, 0.17), rgba(110, 154, 214, 0) 72%),
		linear-gradient(180deg, var(--bbs-dark-navy) 0%, #0a1322 58%, var(--bbs-dark) 100%);
}

body.bbs-active .bbs-home .bbs-carousel.is-enhanced .bbs-carousel__stage {
	cursor: grab;
}

/* Side and bottom falloff so the band dissolves into the page instead of being cut. */
body.bbs-active .bbs-home .bbs-carousel__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(90deg, var(--bbs-dark) 0%, rgba(10, 14, 19, 0) 17%, rgba(10, 14, 19, 0) 83%, var(--bbs-dark) 100%),
		linear-gradient(0deg, var(--bbs-dark) 0%, rgba(10, 14, 19, 0) 56px);
}

body.bbs-active .bbs-home .bbs-carousel__scene {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Back wall: faint panel seams, lit from the top centre. */
body.bbs-active .bbs-home .bbs-carousel__wall {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: var(--bbs-cz-horizon);
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0) 1px 88px);
	background-position: 50% 0;
	-webkit-mask-image: radial-gradient(ellipse 70% 95% at 50% 100%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 85%);
	mask-image: radial-gradient(ellipse 70% 95% at 50% 100%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 85%);
}

/* Polished floor. */
body.bbs-active .bbs-home .bbs-carousel__floor {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--bbs-cz-horizon);
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	background:
		radial-gradient(ellipse 42% 80% at 50% 0%, rgba(143, 180, 232, 0.10), rgba(143, 180, 232, 0) 70%),
		linear-gradient(180deg, #0f1a2a 0%, #0a121d 40%, #07090d 100%);
}

/* Overhead track light and its beam. */
body.bbs-active .bbs-home .bbs-carousel__lamp {
	position: absolute;
	top: 0;
	left: 50%;
	width: 112px;
	height: 3px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 22%, rgba(255, 255, 255, 0.8) 78%, rgba(255, 255, 255, 0));
}

body.bbs-active .bbs-home .bbs-carousel__beam {
	position: absolute;
	top: 0;
	left: 50%;
	bottom: calc(var(--bbs-cz-floor) - var(--bbs-cz-ry) * 0.6);
	width: calc(var(--bbs-cz-rx) * 1.7);
	transform: translateX(-50%);
	background: linear-gradient(180deg, rgba(196, 216, 244, 0.12) 0%, rgba(196, 216, 244, 0.05) 60%, rgba(196, 216, 244, 0.015) 100%);
	-webkit-clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%);
	clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
}

/* Flush turntable: a disc squashed into the floor plane. It turns with the band. */
body.bbs-active .bbs-home .bbs-carousel__turntable {
	position: absolute;
	left: 50%;
	bottom: calc(var(--bbs-cz-floor) + var(--bbs-cz-ry) - var(--bbs-cz-rx) * 1.3);
	width: calc(var(--bbs-cz-rx) * 2.6);
	height: calc(var(--bbs-cz-rx) * 2.6);
	border-radius: 50%;
	transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(var(--bbs-cz-turn, 0deg));
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	background:
		radial-gradient(circle closest-side, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.06) 70.6%, rgba(255, 255, 255, 0.035) 83%, rgba(255, 255, 255, 0) 83.6%),
		radial-gradient(circle closest-side, #18263b 0%, #111c2c 55%, #0c1522 96.6%, rgba(200, 220, 245, 0.45) 97.6%, #0b121c 98.8%);
}

body.bbs-active .bbs-home .bbs-carousel__turntable::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: repeating-conic-gradient(rgba(255, 255, 255, 0.2) 0deg 0.9deg, rgba(255, 255, 255, 0) 0.9deg 11.25deg);
	-webkit-mask-image: radial-gradient(circle closest-side, transparent 87%, #000 87.6%, #000 94.4%, transparent 95%);
	mask-image: radial-gradient(circle closest-side, transparent 87%, #000 87.6%, #000 94.4%, transparent 95%);
}

/* Light pool where the featured product stands. */
body.bbs-active .bbs-home .bbs-carousel__pool {
	position: absolute;
	left: 50%;
	bottom: calc(var(--bbs-cz-floor) - var(--bbs-cz-ry) * 1.1);
	width: calc(var(--bbs-cz-rx) * 1.25);
	height: calc(var(--bbs-cz-ry) * 2.8);
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(180, 206, 242, 0.26), rgba(180, 206, 242, 0.08) 55%, rgba(180, 206, 242, 0) 100%);
}

/* ---- Band ------------------------------------------------------------------------------ */

body.bbs-active .bbs-home .bbs-carousel__band {
	position: absolute;
	left: 50%;
	bottom: var(--bbs-cz-floor);
	z-index: 1;
	width: 0;
	height: 0;
	transform-style: preserve-3d;
}

/* Each stand is a zero-size anchor at the product's foot; scale pivots there. */
body.bbs-active .bbs-home .bbs-carousel__item {
	--bbs-cz-k: 1;
	--bbs-cz-foot: 0;
	--bbs-cz-cx: 0;
	--bbs-cz-shadow: 0.34;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;
	transform-origin: 0 0;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.7s ease;
	will-change: transform, opacity;
}

/* Per-product normalisation for the renders (transparent WebP in assets/img/carousel/, 1200px
   tall, trimmed to the product; the image bottom is the product base).
     k      displayed height as a share of --bbs-cz-ph (art direction, not to scale). Only the
            HEIGHT is set; the width always follows the file's own ratio. The two stainless
            posts share one height (same 35.5in unit); the R-9002 cylinder is 31.5in, so its
            image (cylinder + base) comes out a touch shorter; the crash post image includes
            its below-ground length; the Hydria planter (41in) is deliberately kept well below
            the posts so its bulk does not dominate.
     foot   transparent band under the base as a share of the image height.
     cx     offset of the product's axis from the image centre as a share of the image width
            (R-9002: the cylinder axis sits at x=745 of 1392, right of the base's centre line).
     shadow contact-shadow width as a share of --bbs-cz-ph, sized to each base.
     travel how far a retractable product sinks, as a share of its own image height (see
            "Retracting products").
   A replacement render only needs its own row here. */
body.bbs-active .bbs-home .bbs-carousel__item--manual { --bbs-cz-k: 0.9; --bbs-cz-foot: 0.003; --bbs-cz-cx: 0; --bbs-cz-shadow: 0.2; --bbs-cz-travel: 100%; }
body.bbs-active .bbs-home .bbs-carousel__item--fixed { --bbs-cz-k: 0.9; --bbs-cz-foot: 0.003; --bbs-cz-cx: 0; --bbs-cz-shadow: 0.2; }
body.bbs-active .bbs-home .bbs-carousel__item--automatic { --bbs-cz-k: 0.88; --bbs-cz-foot: 0.007; --bbs-cz-cx: 0.035; --bbs-cz-shadow: 0.46; --bbs-cz-travel: 84.22%; }
body.bbs-active .bbs-home .bbs-carousel__item--crash { --bbs-cz-k: 0.94; --bbs-cz-foot: 0.002; --bbs-cz-cx: -0.016; --bbs-cz-shadow: 0.16; }
body.bbs-active .bbs-home .bbs-carousel__item--decorative { --bbs-cz-k: 0.58; --bbs-cz-foot: 0.003; --bbs-cz-cx: 0; --bbs-cz-shadow: 0.3; }

/* Contact shadow. */
body.bbs-active .bbs-home .bbs-carousel__item::before {
	content: "";
	position: absolute;
	left: calc(var(--bbs-cz-ph) * var(--bbs-cz-shadow) * -0.5);
	bottom: -12px;
	width: calc(var(--bbs-cz-ph) * var(--bbs-cz-shadow));
	height: 24px;
	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0));
	transition: opacity 1.2s ease-in-out;
}

/* The product box: as wide as its image, standing the visible product (not the image box)
   on the floor line, on its own axis. */
body.bbs-active .bbs-home .bbs-carousel__figure {
	position: absolute;
	left: 0;
	bottom: -2px;
	display: block;
	margin: 0;
	transform: translate(calc(-50% - var(--bbs-cz-cx) * 100%), calc(var(--bbs-cz-foot) * 100%));
	/* Floor reflection (Chromium/WebKit; Firefox simply shows none). The negative offset
	   pulls the mirror image up past the empty band so it meets the product's foot. It
	   mirrors whatever the figure shows, so a sinking product's reflection shrinks with it. */
	-webkit-box-reflect: below calc(var(--bbs-cz-ph) * var(--bbs-cz-k) * var(--bbs-cz-foot) * -2) linear-gradient(to bottom, rgba(255, 255, 255, 0) 76%, rgba(255, 255, 255, 0.17) 100%);
}

body.bbs-active .bbs-home .bbs-carousel__img {
	display: block;
	width: auto;
	height: calc(var(--bbs-cz-ph) * var(--bbs-cz-k));
	max-width: none;
	margin: 0;
	-webkit-user-drag: none;
}

/* ---- Retracting products ----------------------------------------------------------------
   Layers inside the figure, back to front:
     __layer          static base, far side (R-9002 only: the base surface the raised
                      cylinder hides, and the opening as a dark recess)
     __clip           STATIC wrapper, clip-path = everything above the ground line. It is
                      never transformed, so the cut stays on the ground while the post moves.
       __lift         the only moving part: translateY inside the clip (compositor transition)
     __layer--front   static base, near side, drawn IN FRONT of the post (R-9002)
   R-8472 has no base in its photo; a flush collar (__collar) is drawn on the floor behind it
   and its top disc fades in as the post's top reaches ground level (the photo shows the post
   edge-on, so its top face only becomes visible once it is flush).
   The ground lines follow the photos' own foot ellipses (measured on the full-size renders):
   R-9002 x 745 +/- 301, y 2525 + 126.5 of 1392x2909; R-8472 x 78 +/- 74, y 1189 + 9.6 of
   160x1200. Travel seats the R-9002 lid face in the opening; the R-8472 goes fully under
   (its photographed rim would otherwise stick out of the collar as a dark bar), so at the
   bottom only the collar and its flush top disc show.
   Timing (1.2s down, 0.6s held, 1.2s up) is owned by the script, which reads the duration
   below. Without the script, under reduced motion and in every other state the products
   stand raised: nothing here moves unless .is-lowered is set. */
body.bbs-active .bbs-home .bbs-carousel__layer {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	-webkit-user-drag: none;
}

body.bbs-active .bbs-home .bbs-carousel__clip {
	position: relative;
}

body.bbs-active .bbs-home .bbs-carousel__item--automatic .bbs-carousel__clip {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 86.8%, 75.14% 86.8%, 74.73% 87.65%, 73.5% 88.46%, 71.5% 89.22%, 68.81% 89.87%, 65.53% 90.42%, 61.8% 90.82%, 57.74% 91.06%, 53.52% 91.15%, 49.3% 91.06%, 45.25% 90.82%, 41.51% 90.42%, 38.23% 89.87%, 35.54% 89.22%, 33.54% 88.46%, 32.31% 87.65%, 31.9% 86.8%, 0 86.8%);
	clip-path: polygon(0 0, 100% 0, 100% 86.8%, 75.14% 86.8%, 74.73% 87.65%, 73.5% 88.46%, 71.5% 89.22%, 68.81% 89.87%, 65.53% 90.42%, 61.8% 90.82%, 57.74% 91.06%, 53.52% 91.15%, 49.3% 91.06%, 45.25% 90.82%, 41.51% 90.42%, 38.23% 89.87%, 35.54% 89.22%, 33.54% 88.46%, 32.31% 87.65%, 31.9% 86.8%, 0 86.8%);
}

body.bbs-active .bbs-home .bbs-carousel__item--manual .bbs-carousel__clip {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 99.1%, 95% 99.1%, 93.42% 99.31%, 88.8% 99.5%, 81.45% 99.67%, 71.88% 99.79%, 60.72% 99.87%, 48.75% 99.9%, 36.78% 99.87%, 25.63% 99.79%, 16.05% 99.67%, 8.7% 99.5%, 4.08% 99.31%, 2.5% 99.1%, 0 99.1%);
	clip-path: polygon(0 0, 100% 0, 100% 99.1%, 95% 99.1%, 93.42% 99.31%, 88.8% 99.5%, 81.45% 99.67%, 71.88% 99.79%, 60.72% 99.87%, 48.75% 99.9%, 36.78% 99.87%, 25.63% 99.79%, 16.05% 99.67%, 8.7% 99.5%, 4.08% 99.31%, 2.5% 99.1%, 0 99.1%);
}

body.bbs-active .bbs-home .bbs-carousel__lift {
	transform: translateY(0);
	transition: transform 1.2s ease-in-out;
	will-change: transform;
}

body.bbs-active .bbs-home .bbs-carousel__item.is-lowered .bbs-carousel__lift {
	transform: translateY(var(--bbs-cz-travel));
}

/* R-8472: a sunk post leaves no contact shadow, only the flush collar. */
body.bbs-active .bbs-home .bbs-carousel__item--manual.is-lowered::before {
	opacity: 0.3;
}

/* Flush ground collar (stainless ring, dark sleeve), 1.5x the post, centred on the post's
   foot ellipse, squashed like the floor. */
body.bbs-active .bbs-home .bbs-carousel__collar {
	position: absolute;
	left: 0;
	/* Foot ellipse centre (0.9% above the image bottom) less the figure's foot shift (0.3%). */
	bottom: calc(var(--bbs-cz-ph) * var(--bbs-cz-k) * 0.006 - 2px);
	display: block;
	/* 6.25 : 1, like the floor's perspective (explicit height: no aspect-ratio needed). */
	width: calc(var(--bbs-cz-ph) * var(--bbs-cz-k) * 0.2);
	height: calc(var(--bbs-cz-ph) * var(--bbs-cz-k) * 0.032);
	border-radius: 50%;
	transform: translate(-50%, 50%);
	background:
		radial-gradient(ellipse closest-side, #05070a 0 58%, #1c222a 63%, rgba(28, 34, 42, 0) 67%),
		linear-gradient(90deg, #20252b 0%, #737a82 24%, #454b53 48%, #858b93 72%, #23272d 100%);
	-webkit-mask-image: radial-gradient(ellipse closest-side, #000 86%, transparent 100%);
	mask-image: radial-gradient(ellipse closest-side, #000 86%, transparent 100%);
	opacity: 0.85;
}

body.bbs-active .bbs-home .bbs-carousel__collar::after {
	content: "";
	position: absolute;
	top: 17%;
	right: 17%;
	bottom: 17%;
	left: 17%;
	border-radius: 50%;
	background: linear-gradient(90deg, #3a3f46 0%, #e4e8eb 22%, #b9bec4 36%, #6a7078 54%, #9ba1a8 72%, #474c53 90%, #2d3137 100%);
	opacity: 0;
	transition: opacity 0.2s ease;
}

body.bbs-active .bbs-home .bbs-carousel__item.is-lowered .bbs-carousel__collar::after {
	opacity: 1;
	transition: opacity 0.25s ease 0.95s;
}

/* Static slots: the no-script lineup and the reduced-motion steps. */
body.bbs-active .bbs-home .bbs-carousel__item[data-pos="-5"] { transform: translate3d(calc(var(--bbs-cz-rx) * 0), calc(var(--bbs-cz-ry) * -2), -240px) scale(0.32); opacity: 0; }
body.bbs-active .bbs-home .bbs-carousel__item[data-pos="-4"] { transform: translate3d(calc(var(--bbs-cz-rx) * -0.5878), calc(var(--bbs-cz-ry) * -1.809), -217.1px) scale(0.335); opacity: 0; }
body.bbs-active .bbs-home .bbs-carousel__item[data-pos="-3"] { transform: translate3d(calc(var(--bbs-cz-rx) * -0.9511), calc(var(--bbs-cz-ry) * -1.309), -157.1px) scale(0.37); opacity: 0; }
body.bbs-active .bbs-home .bbs-carousel__item[data-pos="-2"] { transform: translate3d(calc(var(--bbs-cz-rx) * -0.9511), calc(var(--bbs-cz-ry) * -0.691), -82.9px) scale(0.45); opacity: 0; }
body.bbs-active .bbs-home .bbs-carousel__item[data-pos="-1"] { transform: translate3d(calc(var(--bbs-cz-rx) * -0.5878), calc(var(--bbs-cz-ry) * -0.191), -22.9px) scale(0.64); opacity: 0.88; }
body.bbs-active .bbs-home .bbs-carousel__item[data-pos="0"] { transform: translate3d(calc(var(--bbs-cz-rx) * 0), calc(var(--bbs-cz-ry) * 0), 0px) scale(1); opacity: 1; }
body.bbs-active .bbs-home .bbs-carousel__item[data-pos="1"] { transform: translate3d(calc(var(--bbs-cz-rx) * 0.5878), calc(var(--bbs-cz-ry) * -0.191), -22.9px) scale(0.64); opacity: 0.9; }
body.bbs-active .bbs-home .bbs-carousel__item[data-pos="2"] { transform: translate3d(calc(var(--bbs-cz-rx) * 0.9511), calc(var(--bbs-cz-ry) * -0.691), -82.9px) scale(0.45); opacity: 0.2; }
body.bbs-active .bbs-home .bbs-carousel__item[data-pos="3"] { transform: translate3d(calc(var(--bbs-cz-rx) * 0.9511), calc(var(--bbs-cz-ry) * -1.309), -157.1px) scale(0.37); opacity: 0; }
body.bbs-active .bbs-home .bbs-carousel__item[data-pos="4"] { transform: translate3d(calc(var(--bbs-cz-rx) * 0.5878), calc(var(--bbs-cz-ry) * -1.809), -217.1px) scale(0.335); opacity: 0; }

/* Continuous loop. */
body.bbs-active .bbs-home .bbs-carousel.is-drift .bbs-carousel__item {
	transition: none;
	animation: bbs-carousel-loop var(--bbs-cz-loop) linear infinite both;
	animation-play-state: paused;
}
body.bbs-active .bbs-home .bbs-carousel.is-drift .bbs-carousel__item:nth-child(2) { animation-delay: -54s; }
body.bbs-active .bbs-home .bbs-carousel.is-drift .bbs-carousel__item:nth-child(3) { animation-delay: -48s; }
body.bbs-active .bbs-home .bbs-carousel.is-drift .bbs-carousel__item:nth-child(4) { animation-delay: -42s; }
body.bbs-active .bbs-home .bbs-carousel.is-drift .bbs-carousel__item:nth-child(5) { animation-delay: -36s; }
body.bbs-active .bbs-home .bbs-carousel.is-drift .bbs-carousel__item:nth-child(6) { animation-delay: -30s; }
body.bbs-active .bbs-home .bbs-carousel.is-drift .bbs-carousel__item:nth-child(7) { animation-delay: -24s; }
body.bbs-active .bbs-home .bbs-carousel.is-drift .bbs-carousel__item:nth-child(8) { animation-delay: -18s; }
body.bbs-active .bbs-home .bbs-carousel.is-drift .bbs-carousel__item:nth-child(9) { animation-delay: -12s; }
body.bbs-active .bbs-home .bbs-carousel.is-drift .bbs-carousel__item:nth-child(10) { animation-delay: -6s; }

body.bbs-active .bbs-home .bbs-carousel.is-drift .bbs-carousel__turntable {
	transition: none;
	animation: bbs-carousel-spin var(--bbs-cz-loop) linear infinite both;
	animation-play-state: paused;
}

body.bbs-active .bbs-home .bbs-carousel.is-drift.is-running .bbs-carousel__item,
body.bbs-active .bbs-home .bbs-carousel.is-drift.is-running .bbs-carousel__turntable {
	animation-play-state: running;
}

/* Running, but the band waits at the centre a moment longer (the progress bar keeps going). */
body.bbs-active .bbs-home .bbs-carousel.is-drift.is-running.is-dwell .bbs-carousel__item,
body.bbs-active .bbs-home .bbs-carousel.is-drift.is-running.is-dwell .bbs-carousel__turntable {
	animation-play-state: paused;
}

@keyframes bbs-carousel-loop {
	0% { transform: translate3d(calc(var(--bbs-cz-rx) * 0), calc(var(--bbs-cz-ry) * 0), 0px) scale(1); opacity: 1; }
	1.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.0527), calc(var(--bbs-cz-ry) * -0.0014), -0.2px) scale(0.969); opacity: 0.998; }
	3.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.1568), calc(var(--bbs-cz-ry) * -0.0124), -1.5px) scale(0.905); opacity: 0.994; }
	5% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.309), calc(var(--bbs-cz-ry) * -0.0489), -5.9px) scale(0.806); opacity: 0.985; }
	6.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.4536), calc(var(--bbs-cz-ry) * -0.1088), -13.1px) scale(0.715); opacity: 0.953; }
	8.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.5443), calc(var(--bbs-cz-ry) * -0.1611), -19.3px) scale(0.662); opacity: 0.91; }
	10% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.5878), calc(var(--bbs-cz-ry) * -0.191), -22.9px) scale(0.64); opacity: 0.88; }
	11.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.6296), calc(var(--bbs-cz-ry) * -0.2231), -26.8px) scale(0.619); opacity: 0.815; }
	13.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.7074), calc(var(--bbs-cz-ry) * -0.2932), -35.2px) scale(0.58); opacity: 0.599; }
	15% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.809), calc(var(--bbs-cz-ry) * -0.4122), -49.5px) scale(0.528); opacity: 0.26; }
	16.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.8908), calc(var(--bbs-cz-ry) * -0.5457), -65.5px) scale(0.484); opacity: 0; }
	18.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.9334), calc(var(--bbs-cz-ry) * -0.6413), -77px) scale(0.46); opacity: 0; }
	20% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.9511), calc(var(--bbs-cz-ry) * -0.691), -82.9px) scale(0.45); opacity: 0; }
	21.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.966), calc(var(--bbs-cz-ry) * -0.7416), -89px) scale(0.441); opacity: 0; }
	23.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.9878), calc(var(--bbs-cz-ry) * -0.844), -101.3px) scale(0.424); opacity: 0; }
	25% { transform: translate3d(calc(var(--bbs-cz-rx) * -1), calc(var(--bbs-cz-ry) * -1), -120px) scale(0.402); opacity: 0; }
	26.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.9878), calc(var(--bbs-cz-ry) * -1.156), -138.7px) scale(0.384); opacity: 0; }
	28.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.966), calc(var(--bbs-cz-ry) * -1.2584), -151px) scale(0.374); opacity: 0; }
	30% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.9511), calc(var(--bbs-cz-ry) * -1.309), -157.1px) scale(0.37); opacity: 0; }
	31.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.9334), calc(var(--bbs-cz-ry) * -1.3587), -163px) scale(0.366); opacity: 0; }
	33.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.8908), calc(var(--bbs-cz-ry) * -1.4543), -174.5px) scale(0.359); opacity: 0; }
	35% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.809), calc(var(--bbs-cz-ry) * -1.5878), -190.5px) scale(0.349); opacity: 0; }
	36.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.7074), calc(var(--bbs-cz-ry) * -1.7068), -204.8px) scale(0.341); opacity: 0; }
	38.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.6296), calc(var(--bbs-cz-ry) * -1.7769), -213.2px) scale(0.337); opacity: 0; }
	40% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.5878), calc(var(--bbs-cz-ry) * -1.809), -217.1px) scale(0.335); opacity: 0; }
	41.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.5443), calc(var(--bbs-cz-ry) * -1.8389), -220.7px) scale(0.333); opacity: 0; }
	43.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.4536), calc(var(--bbs-cz-ry) * -1.8912), -226.9px) scale(0.33); opacity: 0; }
	45% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.309), calc(var(--bbs-cz-ry) * -1.9511), -234.1px) scale(0.327); opacity: 0; }
	46.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.1568), calc(var(--bbs-cz-ry) * -1.9876), -238.5px) scale(0.323); opacity: 0; }
	48.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * -0.0527), calc(var(--bbs-cz-ry) * -1.9986), -239.8px) scale(0.321); opacity: 0; }
	50% { transform: translate3d(calc(var(--bbs-cz-rx) * 0), calc(var(--bbs-cz-ry) * -2), -240px) scale(0.32); opacity: 0; }
	51.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.0527), calc(var(--bbs-cz-ry) * -1.9986), -239.8px) scale(0.321); opacity: 0; }
	53.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.1568), calc(var(--bbs-cz-ry) * -1.9876), -238.5px) scale(0.323); opacity: 0; }
	55% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.309), calc(var(--bbs-cz-ry) * -1.9511), -234.1px) scale(0.327); opacity: 0; }
	56.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.4536), calc(var(--bbs-cz-ry) * -1.8912), -226.9px) scale(0.33); opacity: 0; }
	58.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.5443), calc(var(--bbs-cz-ry) * -1.8389), -220.7px) scale(0.333); opacity: 0; }
	60% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.5878), calc(var(--bbs-cz-ry) * -1.809), -217.1px) scale(0.335); opacity: 0; }
	61.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.6296), calc(var(--bbs-cz-ry) * -1.7769), -213.2px) scale(0.337); opacity: 0; }
	63.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.7074), calc(var(--bbs-cz-ry) * -1.7068), -204.8px) scale(0.341); opacity: 0; }
	65% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.809), calc(var(--bbs-cz-ry) * -1.5878), -190.5px) scale(0.349); opacity: 0; }
	66.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.8908), calc(var(--bbs-cz-ry) * -1.4543), -174.5px) scale(0.359); opacity: 0; }
	68.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.9334), calc(var(--bbs-cz-ry) * -1.3587), -163px) scale(0.366); opacity: 0; }
	70% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.9511), calc(var(--bbs-cz-ry) * -1.309), -157.1px) scale(0.37); opacity: 0; }
	71.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.966), calc(var(--bbs-cz-ry) * -1.2584), -151px) scale(0.374); opacity: 0; }
	73.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.9878), calc(var(--bbs-cz-ry) * -1.156), -138.7px) scale(0.384); opacity: 0; }
	75% { transform: translate3d(calc(var(--bbs-cz-rx) * 1), calc(var(--bbs-cz-ry) * -1), -120px) scale(0.402); opacity: 0; }
	76.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.9878), calc(var(--bbs-cz-ry) * -0.844), -101.3px) scale(0.424); opacity: 0; }
	78.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.966), calc(var(--bbs-cz-ry) * -0.7416), -89px) scale(0.441); opacity: 0.126; }
	80% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.9511), calc(var(--bbs-cz-ry) * -0.691), -82.9px) scale(0.45); opacity: 0.2; }
	81.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.9334), calc(var(--bbs-cz-ry) * -0.6413), -77px) scale(0.46); opacity: 0.257; }
	83.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.8908), calc(var(--bbs-cz-ry) * -0.5457), -65.5px) scale(0.484); opacity: 0.36; }
	85% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.809), calc(var(--bbs-cz-ry) * -0.4122), -49.5px) scale(0.528); opacity: 0.56; }
	86.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.7074), calc(var(--bbs-cz-ry) * -0.2932), -35.2px) scale(0.58); opacity: 0.76; }
	88.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.6296), calc(var(--bbs-cz-ry) * -0.2231), -26.8px) scale(0.619); opacity: 0.865; }
	90% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.5878), calc(var(--bbs-cz-ry) * -0.191), -22.9px) scale(0.64); opacity: 0.9; }
	91.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.5443), calc(var(--bbs-cz-ry) * -0.1611), -19.3px) scale(0.662); opacity: 0.922; }
	93.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.4536), calc(var(--bbs-cz-ry) * -0.1088), -13.1px) scale(0.715); opacity: 0.957; }
	95% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.309), calc(var(--bbs-cz-ry) * -0.0489), -5.9px) scale(0.806); opacity: 0.985; }
	96.6667% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.1568), calc(var(--bbs-cz-ry) * -0.0124), -1.5px) scale(0.905); opacity: 0.994; }
	98.3333% { transform: translate3d(calc(var(--bbs-cz-rx) * 0.0527), calc(var(--bbs-cz-ry) * -0.0014), -0.2px) scale(0.969); opacity: 0.998; }
	100% { transform: translate3d(calc(var(--bbs-cz-rx) * 0), calc(var(--bbs-cz-ry) * 0), 0px) scale(1); opacity: 1; }
}
@keyframes bbs-carousel-spin {
	0% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(0deg); }
	1.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(3.023deg); }
	3.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(9.023deg); }
	5% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(18deg); }
	6.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(26.977deg); }
	8.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(32.977deg); }
	10% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(36deg); }
	11.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(39.023deg); }
	13.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(45.023deg); }
	15% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(54deg); }
	16.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(62.977deg); }
	18.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(68.977deg); }
	20% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(72deg); }
	21.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(75.023deg); }
	23.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(81.023deg); }
	25% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(90deg); }
	26.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(98.977deg); }
	28.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(104.977deg); }
	30% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(108deg); }
	31.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(111.023deg); }
	33.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(117.023deg); }
	35% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(126deg); }
	36.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(134.977deg); }
	38.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(140.977deg); }
	40% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(144deg); }
	41.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(147.023deg); }
	43.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(153.023deg); }
	45% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(162deg); }
	46.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(170.977deg); }
	48.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(176.977deg); }
	50% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(180deg); }
	51.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(183.023deg); }
	53.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(189.023deg); }
	55% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(198deg); }
	56.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(206.977deg); }
	58.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(212.977deg); }
	60% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(216deg); }
	61.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(219.023deg); }
	63.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(225.023deg); }
	65% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(234deg); }
	66.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(242.977deg); }
	68.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(248.977deg); }
	70% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(252deg); }
	71.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(255.023deg); }
	73.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(261.023deg); }
	75% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(270deg); }
	76.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(278.977deg); }
	78.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(284.977deg); }
	80% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(288deg); }
	81.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(291.023deg); }
	83.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(297.023deg); }
	85% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(306deg); }
	86.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(314.977deg); }
	88.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(320.977deg); }
	90% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(324deg); }
	91.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(327.023deg); }
	93.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(333.023deg); }
	95% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(342deg); }
	96.6667% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(350.977deg); }
	98.3333% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(356.977deg); }
	100% { transform: translateX(-50%) scaleY(var(--bbs-cz-tilt)) rotate(360deg); }
}

/* ---- Stage overlay controls ------------------------------------------------------------ */

body.bbs-active .bbs-home .bbs-carousel__bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 26px var(--bbs-cz-pad) 0;
	pointer-events: none;
}

/* 20px line = the Pause/Play control's outer height, so the label does not move by a
   fraction of a pixel when the script reveals the control. */
body.bbs-active .bbs-home .bbs-carousel__label {
	font-family: var(--bbs-font-mono);
	font-size: 12.5px;
	line-height: 20px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bbs-blue-200);
}

/* WCAG 2.2.2 control: same treatment as the old video caption toggle. */
body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__toggle {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: -12px -10px;
	padding: 0 10px;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--bbs-font-mono);
	font-size: var(--bbs-fs-label, 13px);
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bbs-surface);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	pointer-events: auto;
	appearance: none;
}

body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__toggle:hover,
body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__toggle:focus,
body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__toggle:active {
	border: 0;
	background: none;
	color: var(--bbs-blue-100);
	text-decoration: underline;
}

body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__arrow {
	position: absolute;
	bottom: calc(var(--bbs-cz-floor) + var(--bbs-cz-ph) * 0.36);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 0;
	background: rgba(10, 14, 19, 0.62);
	color: var(--bbs-surface);
	cursor: pointer;
	appearance: none;
}

body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__prev { left: calc(var(--bbs-cz-pad) - 16px); }
body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__next { right: calc(var(--bbs-cz-pad) - 16px); }

body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__arrow:hover,
body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__arrow:focus {
	border-color: var(--bbs-accent);
	background: var(--bbs-navy);
	color: var(--bbs-surface);
}

body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__arrow svg {
	display: block;
	width: 20px;
	height: 20px;
	pointer-events: none;
}

/* ---- Caption --------------------------------------------------------------------------- */

body.bbs-active .bbs-home .bbs-carousel__info {
	position: relative;
	padding: 6px var(--bbs-cz-pad) 0;
}

/* All slides share one cell, so the block is as tall as the longest caption (no shift). */
body.bbs-active .bbs-home .bbs-carousel__slides {
	display: grid;
}

body.bbs-active .bbs-home .bbs-carousel__slide {
	grid-area: 1 / 1;
	min-width: 0;
	visibility: hidden;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

body.bbs-active .bbs-home .bbs-carousel__slide.is-active {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 0.45s ease 0.12s, transform 0.45s ease 0.12s, visibility 0s linear 0s;
}

body.bbs-active .bbs-home .bbs-carousel__title {
	margin: 0;
	font-family: var(--bbs-font-display);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--bbs-surface);
}

body.bbs-active .bbs-home .bbs-carousel__line {
	max-width: 44ch;
	margin: 10px 0 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--bbs-on-dark-body);
}

body.bbs-active .bbs-home .bbs-carousel__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 30px;
	margin: 4px 0 0;
}

/* Same look as the "In motion" CTA; padding grows the target to 44px, the negative
   margin keeps the drawn position. */
body.bbs-active .bbs-home .bbs-carousel__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 0;
	padding: 18px 0 5px;
	border-bottom: 2px solid var(--bbs-accent);
	font-family: var(--bbs-font-display);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bbs-surface);
}

body.bbs-active .bbs-home .bbs-carousel__link:hover,
body.bbs-active .bbs-home .bbs-carousel__link:focus {
	color: var(--bbs-blue-200);
}

body.bbs-active .bbs-home .bbs-carousel__link-arrow {
	font-family: var(--bbs-font-mono);
	font-weight: 400;
}

/* ---- Category tabs (and their no-script link twin) ------------------------------------- */

/* Five labels of different lengths ("Fixed" .. "Crash-rated") in one row: each tab is as wide
   as its label plus an equal share of the spare room, so the long ones never wrap while the
   hairlines still run edge to edge. Labels never wrap (nowrap); the type steps below keep the
   row inside the column at every width from 360 to 1920px (the 12px type floor holds), and
   phones switch to a deliberate 3 + 2 grid. */
body.bbs-active .bbs-home .bbs-carousel__tabs,
body.bbs-active .bbs-home .bbs-carousel__cats {
	display: flex;
	gap: 0 14px;
	margin: 0;
	padding: 26px var(--bbs-cz-pad) 30px;
	list-style: none;
}

/* No min-width: 0 on purpose: a tab never shrinks below its label. */
body.bbs-active .bbs-home .bbs-carousel__tabs > .bbs-carousel__tab,
body.bbs-active .bbs-home .bbs-carousel__cats > li {
	flex: 1 1 auto;
}

body.bbs-active .bbs-home .bbs-carousel__cats > li {
	display: flex;
	margin: 0 -4px;
}

body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__tab,
body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__cat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	/* 4px of air inside the focus ring; the negative margin keeps the text on the grid, and
	   the ring (4px + 2px offset + 2px) stays clear of the next label in the 10px+ gap. */
	width: auto;
	min-height: 48px;
	margin: 0 -4px;
	padding: 15px 4px 4px;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--bbs-font-mono);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--bbs-on-dark-low);
	cursor: pointer;
	appearance: none;
}

body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__cat {
	flex: 1 1 auto;
	margin: 0;
}

body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__tab:hover,
body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__cat:hover,
body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__tab.is-active,
body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__cat.is-active {
	border: 0;
	background: none;
	color: var(--bbs-surface);
}

body.bbs-active .bbs-home .bbs-carousel__tab-num {
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--bbs-on-dark-faint);
}

body.bbs-active .bbs-home .bbs-carousel__tab.is-active .bbs-carousel__tab-num,
body.bbs-active .bbs-home .bbs-carousel__cat.is-active .bbs-carousel__tab-num {
	color: var(--bbs-blue-200);
}

/* Hairline, active marker and progress. The marker shows which tab is current; the fill
   runs only while the loop runs and is transform-only. */
body.bbs-active .bbs-home .bbs-carousel__tab-bar {
	position: absolute;
	top: 0;
	left: 4px;
	right: 4px;
	height: 1px;
	background: var(--bbs-hairline);
	pointer-events: none;
}

body.bbs-active .bbs-home .bbs-carousel__tab-bar::before,
body.bbs-active .bbs-home .bbs-carousel__tab-bar::after {
	content: "";
	position: absolute;
	inset: -1px 0;
	transform-origin: 0 50%;
	transform: scaleX(0);
}

body.bbs-active .bbs-home .bbs-carousel__tab-bar::before {
	background: rgba(255, 255, 255, 0.28);
}

body.bbs-active .bbs-home .bbs-carousel__tab-bar::after {
	background: var(--bbs-surface);
}

body.bbs-active .bbs-home .is-active > .bbs-carousel__tab-bar::before {
	transform: none;
}

/* No auto-rotation (no script, reduced motion, user pause): the marker is solid. */
body.bbs-active .bbs-home .bbs-carousel:not(.is-drift) .is-active > .bbs-carousel__tab-bar::after,
body.bbs-active .bbs-home .bbs-carousel.is-stopped .is-active > .bbs-carousel__tab-bar::after {
	transform: none;
}

body.bbs-active .bbs-home .bbs-carousel.is-drift:not(.is-stopped) .bbs-carousel__tab-bar.is-filling::after {
	animation: bbs-carousel-fill 5s linear both;
	animation-duration: inherit;
	animation-play-state: paused;
}

body.bbs-active .bbs-home .bbs-carousel.is-drift.is-running .bbs-carousel__tab-bar.is-filling::after {
	animation-play-state: running;
}

@keyframes bbs-carousel-fill {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* Revealed by the script; a failed script never leaves dead controls behind. */
body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__toggle[hidden],
body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__arrow[hidden],
body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__tabs[hidden],
body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__cats[hidden] {
	display: none;
}

/* The tokens' reduced-motion rule clamps every animation to 0.01ms. A viewer who pressed
   Play has asked for motion, and .is-drift is only ever set in that case (or without the
   preference), so give the loop its real timing back. */
@media (prefers-reduced-motion: reduce) {
	body.bbs-active .bbs-home .bbs-carousel.is-drift .bbs-carousel__item,
	body.bbs-active .bbs-home .bbs-carousel.is-drift .bbs-carousel__turntable {
		animation-duration: var(--bbs-cz-loop) !important;
		animation-iteration-count: infinite !important;
	}
}

/* ---- Responsive ------------------------------------------------------------------------ */

@media (max-width: 1180px) {
	body.bbs-active .bbs-home .bbs-carousel {
		--bbs-cz-pad: 32px;
		--bbs-cz-ph: min(310px, 42vh);
	}
	body.bbs-active .bbs-home .bbs-carousel__title { font-size: 28px; }
	body.bbs-active .bbs-home .bbs-carousel__line { font-size: 16px; }
	body.bbs-active .bbs-home .bbs-carousel__tabs,
	body.bbs-active .bbs-home .bbs-carousel__cats { gap: 0 10px; }
	/* Five labels need 41 characters plus four gaps: 355px here, the column has 380+. */
	body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__tab,
	body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__cat { font-size: var(--bbs-fs-meta, 12px); letter-spacing: 0.04em; }
}

/* Narrowest two-column hero (the column is 399-450px, less a classic scrollbar): drop the
   tracking and 8px of side padding, so the row needs 335px and always has 350+. */
@media (min-width: 901px) and (max-width: 1000px) {
	body.bbs-active .bbs-home .bbs-carousel { --bbs-cz-pad: 24px; }
	body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__tab,
	body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__cat { letter-spacing: 0; }
}

/* Short desktop windows (1366 x 768 and 1536 x 864 laptops, and a landscape tablet): the hero
   is as tall as its copy column, so the tab row fell below the fold. Trim the copy's vertical
   padding, the stage's floor row and the tab row's padding — together 92px — which brings the
   tab row back into the first screen with ~20px to spare, without touching taller windows
   (1440 x 900 keeps the original spacing). The product height drops with it so nothing in the
   stage is clipped. */
@media (min-width: 901px) and (max-height: 880px) {
	body.bbs-active .bbs-home .bbs-hero__copy {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	body.bbs-active .bbs-home .bbs-hero__media.bbs-hero__media--carousel {
		min-height: clamp(560px, calc(100vh - 140px), 860px);
	}
	body.bbs-active .bbs-home .bbs-carousel {
		grid-template-rows: minmax(390px, 1fr) auto auto;
		--bbs-cz-ph: min(340px, 38vh);
	}
	body.bbs-active .bbs-home .bbs-carousel__tabs,
	body.bbs-active .bbs-home .bbs-carousel__cats {
		padding-top: 18px;
		padding-bottom: 20px;
	}
}

@media (max-width: 900px) {
	body.bbs-active .bbs-home .bbs-hero__media.bbs-hero__media--carousel { min-height: 0; }
	body.bbs-active .bbs-home .bbs-carousel {
		--bbs-cz-pad: var(--bbs-gutter);
		--bbs-cz-ph: 320px;
		--bbs-cz-floor: 88px;
		grid-template-rows: 480px auto auto;
	}
	@supports (container-type: inline-size) {
		body.bbs-active .bbs-home .bbs-carousel { --bbs-cz-rx: min(34cqw, 280px); }
	}
	body.bbs-active .bbs-home .bbs-carousel__stage { border-top: 1px solid var(--bbs-hairline); }
}

@media (max-width: 640px) {
	body.bbs-active .bbs-home .bbs-carousel {
		--bbs-cz-ph: 280px;
		--bbs-cz-floor: 76px;
		grid-template-rows: 420px auto auto;
	}
	@supports (container-type: inline-size) {
		body.bbs-active .bbs-home .bbs-carousel { --bbs-cz-rx: 35cqw; }
	}
	body.bbs-active .bbs-home .bbs-carousel__bar { padding-top: 20px; }
	body.bbs-active .bbs-home .bbs-carousel__label { letter-spacing: 0.14em; }
	body.bbs-active .bbs-home .bbs-carousel__lamp { top: 46px; width: 80px; }
	body.bbs-active .bbs-home .bbs-carousel__beam { top: 46px; }
	/* On phones the side stands sit under mid-height arrows; park the arrows on the floor. */
	body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__arrow { bottom: 14px; width: 44px; height: 44px; }
	body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__prev { left: var(--bbs-cz-pad); }
	body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__next { right: var(--bbs-cz-pad); }
	body.bbs-active .bbs-home .bbs-carousel__title { font-size: 26px; }
	body.bbs-active .bbs-home .bbs-carousel__tabs,
	body.bbs-active .bbs-home .bbs-carousel__cats { gap: 0 12px; padding: 22px var(--bbs-cz-pad) 26px; }
	body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__tab,
	body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__cat {
		font-size: var(--bbs-fs-meta, 12px);
		letter-spacing: 0.04em;
	}
}

/* Phones: one row would need 363px at the type floor, so the tabs sit in a deliberate
   3 + 2 grid (both rows full width, hairlines aligned). */
@media (max-width: 480px) {
	body.bbs-active .bbs-home .bbs-carousel__tabs,
	body.bbs-active .bbs-home .bbs-carousel__cats {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 6px 12px;
	}
	body.bbs-active .bbs-home .bbs-carousel__tabs > .bbs-carousel__tab,
	body.bbs-active .bbs-home .bbs-carousel__cats > li { grid-column: span 2; }
	body.bbs-active .bbs-home .bbs-carousel__tabs > .bbs-carousel__tab:nth-child(n + 4),
	body.bbs-active .bbs-home .bbs-carousel__cats > li:nth-child(n + 4) { grid-column: span 3; }
	body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__tab { width: calc(100% + 8px); }
}

@media (max-width: 380px) {
	body.bbs-active .bbs-home .bbs-carousel {
		--bbs-cz-ph: 268px;
		grid-template-rows: 420px auto auto;
	}
	body.bbs-active .bbs-home .bbs-carousel__label { letter-spacing: 0.08em; }
	body.bbs-active .bbs-home .bbs-carousel__title { font-size: 24px; }
	body.bbs-active .bbs-home .bbs-carousel__links { gap: 0 22px; }
	body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__tab,
	body.bbs-active .bbs-home .bbs-carousel .bbs-carousel__cat { letter-spacing: 0.02em; }
}