/* ==========================================================================
   Prestige Detailing — brands carousel (pd-brands)
   Figma 179:6321 (@1728): pd-text-block's head + rule + text in a 580 column (the rule runs on
   to the LEFT screen edge), 48px prev/next bottom-right of it (rest 179:6330: #161414 at 8%,
   dark chevron; hover 179:6334: red, white chevron). 72 below, 272px square tiles 12 apart
   (5 across 1408) with the brand name 20 below; hover turns the tile #161414 and the name red.
   8px dots 40 below, pd-button's White button 72 below that.
   Mobile (204:6403 @375): the tiles keep 272 and the name 22/32; the row starts on the column's
   left edge and runs on to the right screen edge, so the next tile peeks in. The script measures
   the distance to the right screen edge (--pd-br-bleed-r); the CSS decides where it is used.
   Nothing bleeds left: a looping row would show a sliver of the previous tile there.
   The head is pd-text-block's markup and the button pd-button's; their rules are CARRIED below,
   scoped to .pd-br, so no sibling stylesheet has to be current on the server.
   Rendered inside #wrap_all, so every rule is paired: ".pd-br .x" + "#top #wrap_all .pd-br .x".
   Vendor sheet (css/vendor/splide-core.min.css) loads first; pre-mount rules sit behind
   .pd-br:not(.pd-br--ready) so the two cannot fight.
   ========================================================================== */

@property --pd-fb       { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --pd-nav-tt   { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pd-nav-tb   { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- Tokens (ramps: 375 → 1728) ---------- */
.pd-br {
	/* Shared site tokens — same values as pd-main-nav / pd-text-block */
	--pd-nav-font: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--pd-cap: 0.71875;
	--pd-asc: 0.966;
	--pd-desc: 0.286;

	--pd-br-ink: 22, 20, 20;                                              /* #161414 */
	--pd-br-red: #d60c0c;
	--pd-br-white: #fff;

	--pd-br-text-w: 580px;
	--pd-br-head-gap: clamp(48px, calc(41.35px + 1.7738vw), 72px);        /* head → tiles, dots → button */
	--pd-br-arrows-gap: clamp(28px, calc(25.78px + 0.5913vw), 36px);      /* stacked: text → arrows */
	--pd-br-btn: clamp(40px, calc(37.783px + 0.5913vw), 48px);
	--pd-br-btn-gap: 8px;
	--pd-br-icon: 24px;

	--pd-br-per: 5;                                                       /* tiles in view */
	--pd-br-gap: 12px;                                                    /* read by the script too */
	--pd-br-name-gap: 20px;                                               /* tile → name (both frames) */
	--pd-br-name-fs: 22px;                                                /* 22/32 medium (both frames) */
	--pd-br-name-lh: 32px;
	/* Tile width: N across the track; a fixed 272 on phones */
	--pd-br-slide-w: calc((100% - (var(--pd-br-per) - 1) * var(--pd-br-gap)) / var(--pd-br-per));
	/* Distance to the right screen edge, used only on phones (0 without the script) */
	--pd-br-brr: 0px;
	--pd-br-logo-w: 61.029%;                                              /* 166 / 272 */
	--pd-br-logo-h: 41.176%;                                              /* 112 / 272 */
	--pd-br-dots-gap: 40px;                                               /* names → dots (both frames) */
	--pd-br-dot: 8px;
	--pd-br-dot-gap: 10px;
	--pd-br-clip-pad: 16px;                                               /* room for descenders under the clip */

	/* Margins: inline --pd-br-mt / --pd-br-mb from the panel; the ramp only writes -now */
	--pd-br-mt-now: var(--pd-br-mt, 0px);
}

@media (max-width: 1199px) {
	.pd-br { --pd-br-per: 4; }
	.pd-br.pd-br--scale { --pd-br-mt-now: calc(var(--pd-br-mt, 0px) * 0.75); }
}
@media (max-width: 899px) {
	.pd-br { --pd-br-per: 3; }
	.pd-br.pd-br--scale { --pd-br-mt-now: calc(var(--pd-br-mt, 0px) * 0.6); }
}
/* Phones (Figma 204:6403): fixed 272 tiles; the row starts on the column edge and runs to the right screen edge */
@media (max-width: 767px) {
	.pd-br {
		--pd-br-slide-w: 272px;
		--pd-br-brr: var(--pd-br-bleed-r, 0px);
	}
}

/* ---------- Cap trim (text-box) with a metric fallback — same as pd-main-nav / pd-text-block ---------- */
.pd-br .pd-nav-t,
#top #wrap_all .pd-br .pd-nav-t {
	display: block;
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	font-size: var(--fs);
	line-height: var(--lh);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-box: trim-both cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

@supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) {
	.pd-br { --pd-fb: 1; }
}

/* ---------- CARRIED: pd-text-block + pd-button rules, scoped to .pd-br ----------
   Generated by preview/carry.php from ../pd-text-block/css/pd-text-block.css and
   ../pd-button/css/pd-button.css. Do not edit by hand: re-run it. validate.php fails on any drift. */

.pd-br .pd-tb {
	--pd-nav-white: #fff;
	--pd-nav-font: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--pd-cap: 0.71875;
	--pd-asc: 0.966;
	--pd-desc: 0.286;
	--pd-tb-ink: 255, 255, 255;
	--pd-tb-w: 580px;
	--pd-tb-l1-fs: clamp(24px, calc(21.78px + 0.5913vw), 32px);
	--pd-tb-l2-fs: clamp(32px, calc(27.57px + 1.1826vw), 48px);
	--pd-tb-l2-lh: clamp(32px, calc(28.67px + 0.8869vw), 44px);
	--pd-tb-title-gap: clamp(8px, calc(6.89px + 0.2956vw), 12px);
	--pd-tb-rule-gap: clamp(32px, calc(29.78px + 0.5913vw), 40px);
	--pd-tb-text-fs: clamp(16px, calc(15.45px + 0.1478vw), 18px);
	--pd-tb-text-lh: clamp(24px, calc(22.89px + 0.2956vw), 28px);
	--pd-tb-lg-fs: clamp(18px, calc(16.89px + 0.2956vw), 22px);
	--pd-tb-lg-lh: clamp(28px, calc(26.89px + 0.2956vw), 32px);
	--pd-tb-block-gap: clamp(40px, calc(33.35px + 1.7738vw), 64px);
	--pd-tb-checks-gap: clamp(24px, calc(21.78px + 0.5913vw), 32px);
	--pd-tb-item-gap: clamp(28px, calc(25.78px + 0.5913vw), 36px);
	--pd-tb-li-gap: 4px;
	--pd-tb-indent: 27px;
	--pd-tb-tick: 40px;
	--pd-tb-tick-icon: 24px;
	--pd-tb-tick-gap: 16px;
	--pd-tb-para-gap: calc(2 * var(--pd-tb-text-lh) - var(--pd-cap) * var(--pd-tb-text-fs));
	--pd-tb-gw: calc(min(var(--pd-tb-w), 100vw - 32px) * 0.25);
	--pd-tb-mt-now: var(--pd-tb-mt, 0px);
}

.pd-br .pd-tb.pd-tb--light {
	--pd-tb-ink: 22, 20, 20;
}

.pd-br .pd-tb .pd-nav-t,
.pd-br .pd-tb .pd-tb__text > p,
.pd-br .pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6),
#top #wrap_all .pd-br .pd-tb .pd-nav-t,
#top #wrap_all .pd-br .pd-tb .pd-tb__text > p,
#top #wrap_all .pd-br .pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6) {
	display: block;
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	font-size: var(--fs);
	line-height: var(--lh);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-box: trim-both cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

.pd-br .pd-tb .pd-tb__text > :is(ul, ol) > li:first-child,
#top #wrap_all .pd-br .pd-tb .pd-tb__text > :is(ul, ol) > li:first-child {
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	text-box-trim: trim-start;
	text-box-edge: cap alphabetic;
	text-box: trim-start cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
}

.pd-br .pd-tb .pd-tb__text > :is(ul, ol) > li:last-child,
#top #wrap_all .pd-br .pd-tb .pd-tb__text > :is(ul, ol) > li:last-child {
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	text-box-trim: trim-end;
	text-box-edge: cap alphabetic;
	text-box: trim-end cap alphabetic;
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

.pd-br .pd-tb .pd-tb__text > :is(ul, ol) > li:only-child,
#top #wrap_all .pd-br .pd-tb .pd-tb__text > :is(ul, ol) > li:only-child {
	text-box-trim: trim-both;
	text-box: trim-both cap alphabetic;
}

.pd-br .pd-tb,
#top #wrap_all .pd-br .pd-tb {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tb-rule-gap);
	box-sizing: border-box;
	width: 100%;
	margin-top: var(--pd-tb-mt-f, var(--pd-tb-mt-now));
	margin-bottom: var(--pd-tb-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	color: rgb(var(--pd-tb-ink));
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-text-fs);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

.pd-br .pd-tb *,
#top #wrap_all .pd-br .pd-tb * {
	box-sizing: border-box;
}

.pd-br .pd-tb .pd-tb__col,
#top #wrap_all .pd-br .pd-tb .pd-tb__col {
	width: min(var(--pd-tb-w), 100%);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: 0;
}

.pd-br .pd-tb.pd-tb--left .pd-tb__col,
#top #wrap_all .pd-br .pd-tb.pd-tb--left .pd-tb__col {
	margin-left: 0;
	margin-right: auto;
}

.pd-br .pd-tb .pd-tb__head,
.pd-br .pd-tb .pd-tb__title,
#top #wrap_all .pd-br .pd-tb .pd-tb__head,
#top #wrap_all .pd-br .pd-tb .pd-tb__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--pd-tb-title-gap);
}

.pd-br .pd-tb .pd-tb__title,
#top #wrap_all .pd-br .pd-tb .pd-tb__title {
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-l2-fs);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: rgb(var(--pd-tb-ink));
	overflow-wrap: break-word;
}

.pd-br .pd-tb .pd-tb__main,
#top #wrap_all .pd-br .pd-tb .pd-tb__main {
	--fs: var(--pd-tb-l2-fs);
	--lh: var(--pd-tb-l2-lh);
	max-width: 100%;
	font-weight: 700;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: rgb(var(--pd-tb-ink));
}

.pd-br .pd-tb .pd-tb__sub,
#top #wrap_all .pd-br .pd-tb .pd-tb__sub {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	column-gap: 4px;
	row-gap: var(--pd-tb-title-gap);
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-l1-fs);
	font-weight: 400;
	line-height: 1;
	white-space: normal;
	color: rgb(var(--pd-tb-ink));
}

.pd-br .pd-tb .pd-tb__accent,
#top #wrap_all .pd-br .pd-tb .pd-tb__accent {
	--fs: var(--pd-tb-l1-fs);
	--lh: var(--pd-tb-l1-fs);
	max-width: 100%;
	font-weight: 400;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.pd-br .pd-tb .pd-tb__grad,
#top #wrap_all .pd-br .pd-tb .pd-tb__grad {
	background-image: linear-gradient(90deg, rgba(var(--pd-tb-ink), 0.4) 0, rgb(var(--pd-tb-ink)) var(--pd-tb-gw));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.pd-br .pd-tb .pd-tb__note,
#top #wrap_all .pd-br .pd-tb .pd-tb__note {
	--fs: var(--pd-tb-text-fs);
	--lh: var(--pd-tb-text-lh);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(var(--pd-tb-ink), 0.64);
}

.pd-br .pd-tb .pd-tb__rule,
#top #wrap_all .pd-br .pd-tb .pd-tb__rule {
	position: relative;
	display: block;
	flex: none;
	width: 100%;
	height: 1px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	background-color: rgba(var(--pd-tb-ink), 0.4);
}

.pd-br .pd-tb.pd-tb--bleed .pd-tb__rule,
#top #wrap_all .pd-br .pd-tb.pd-tb--bleed .pd-tb__rule {
	width: min(var(--pd-tb-w), 100%);
	margin-left: auto;
	margin-right: 0;
}

.pd-br .pd-tb.pd-tb--bleed.pd-tb--left .pd-tb__rule,
#top #wrap_all .pd-br .pd-tb.pd-tb--bleed.pd-tb--left .pd-tb__rule {
	margin-left: 0;
	margin-right: auto;
}

.pd-br .pd-tb.pd-tb--bleed .pd-tb__rule::before,
#top #wrap_all .pd-br .pd-tb.pd-tb--bleed .pd-tb__rule::before {
	content: "";
	position: absolute;
	top: 0;
	left: 100%;
	right: auto;
	width: var(--pd-tb-bleed, 100vw);
	height: 1px;
	background-color: rgba(var(--pd-tb-ink), 0.4);
}

.pd-br .pd-tb.pd-tb--bleed.pd-tb--left .pd-tb__rule::before,
#top #wrap_all .pd-br .pd-tb.pd-tb--bleed.pd-tb--left .pd-tb__rule::before {
	left: auto;
	right: 100%;
}

.pd-br .pd-tb .pd-tb__body,
#top #wrap_all .pd-br .pd-tb .pd-tb__body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tb-block-gap);
}

.pd-br .pd-tb .pd-tb__text,
#top #wrap_all .pd-br .pd-tb .pd-tb__text {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tb-para-gap);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	--fs: var(--pd-tb-text-fs);
	--lh: var(--pd-tb-text-lh);
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-text-fs);
	line-height: var(--pd-tb-text-lh);
	font-weight: 400;
	letter-spacing: 0;
	color: rgba(var(--pd-tb-ink), 0.72);
	overflow-wrap: break-word;
}

.pd-br .pd-tb .pd-tb__text > p,
#top #wrap_all .pd-br .pd-tb .pd-tb__text > p {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	color: rgba(var(--pd-tb-ink), 0.72);
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.pd-br .pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6),
#top #wrap_all .pd-br .pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6) {
	--fs: var(--pd-tb-lg-fs);
	--lh: var(--pd-tb-lg-lh);
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	color: rgb(var(--pd-tb-ink));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.pd-br .pd-tb .pd-tb__text > :is(ul, ol),
#top #wrap_all .pd-br .pd-tb .pd-tb__text > :is(ul, ol) {
	display: block;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: var(--pd-tb-indent);
	padding-right: 0;
	list-style-type: disc;
	list-style-position: outside;
	color: rgba(var(--pd-tb-ink), 0.72);
}

.pd-br .pd-tb .pd-tb__text > ol,
#top #wrap_all .pd-br .pd-tb .pd-tb__text > ol {
	list-style-type: decimal;
}

.pd-br .pd-tb .pd-tb__text > :is(ul, ol) > li,
#top #wrap_all .pd-br .pd-tb .pd-tb__text > :is(ul, ol) > li {
	--fs: var(--pd-tb-text-fs);
	--lh: var(--pd-tb-text-lh);
	display: list-item;
	margin-top: 0;
	margin-bottom: var(--pd-tb-li-gap);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	font-size: var(--fs);
	line-height: var(--lh);
	color: inherit;
	list-style-type: inherit;
}

.pd-br .pd-tb .pd-tb__text :is(strong, b),
#top #wrap_all .pd-br .pd-tb .pd-tb__text :is(strong, b) {
	font-weight: 700;
	color: rgb(var(--pd-tb-ink));
}

.pd-br .pd-tb .pd-tb__text a,
#top #wrap_all .pd-br .pd-tb .pd-tb__text a {
	color: rgb(var(--pd-tb-ink));
	text-decoration-line: underline;
	text-underline-offset: 0.15em;
	border-bottom-width: 0;
}

.pd-br .pd-tb .pd-tb__text a:hover,
.pd-br .pd-tb .pd-tb__text a:focus-visible,
#top #wrap_all .pd-br .pd-tb .pd-tb__text a:hover,
#top #wrap_all .pd-br .pd-tb .pd-tb__text a:focus-visible {
	color: rgb(var(--pd-tb-ink));
	text-decoration-line: none;
}

.pd-br .pd-btn {
	--pd-btn-ink: 255, 255, 255;
	--pd-btn-fs: 16px;
	--pd-btn-lh: 24px;
	--pd-btn-ls: 0.03em;
	--pd-btn-py: 24px;
	--pd-btn-px: 32px;
	--pd-btn-arm: 8px;
	--pd-btn-bar: 2px;
	--pd-btn-fill: 0.08;
	--pd-btn-fill-on: 0.16;
	--pd-btn-mt-now: var(--pd-btn-mt, 0px);
}

.pd-br .pd-btn .pd-btn__link--white,
#top #wrap_all .pd-br .pd-btn .pd-btn__link--white {
	--pd-btn-ink: 22, 20, 20;
}

.pd-br .pd-btn,
#top #wrap_all .pd-br .pd-btn {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin-top: var(--pd-btn-mt-f, var(--pd-btn-mt-now));
	margin-bottom: var(--pd-btn-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

.pd-br .pd-btn.pd-btn--center,
#top #wrap_all .pd-br .pd-btn.pd-btn--center {
	justify-content: center;
}

.pd-br .pd-btn.pd-btn--right,
#top #wrap_all .pd-br .pd-btn.pd-btn--right {
	justify-content: flex-end;
}

.pd-br .pd-btn .pd-btn__link,
#top #wrap_all .pd-br .pd-btn .pd-btn__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: var(--pd-btn-py);
	padding-bottom: var(--pd-btn-py);
	padding-left: var(--pd-btn-px);
	padding-right: var(--pd-btn-px);
	border-width: 0;
	border-style: none;
	border-radius: 0;
	box-shadow: none;
	color: rgb(var(--pd-btn-ink));
	background-color: rgba(var(--pd-btn-ink), var(--pd-btn-fill));
	background-image:
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink))),
		linear-gradient(rgb(var(--pd-btn-ink)), rgb(var(--pd-btn-ink)));
	background-size:
		var(--pd-btn-arm) var(--pd-btn-bar), var(--pd-btn-bar) var(--pd-btn-arm),
		var(--pd-btn-arm) var(--pd-btn-bar), var(--pd-btn-bar) var(--pd-btn-arm),
		var(--pd-btn-arm) var(--pd-btn-bar), var(--pd-btn-bar) var(--pd-btn-arm),
		var(--pd-btn-arm) var(--pd-btn-bar), var(--pd-btn-bar) var(--pd-btn-arm);
	background-position:
		left top, left top,
		right top, right top,
		left bottom, left bottom,
		right bottom, right bottom;
	background-repeat: no-repeat;
	font-family: var(--pd-nav-font);
	font-size: var(--pd-btn-fs);
	font-weight: 400;
	font-style: normal;
	letter-spacing: var(--pd-btn-ls);
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.25s ease;
}

.pd-br .pd-btn .pd-btn__link:hover,
.pd-br .pd-btn .pd-btn__link:focus-visible,
#top #wrap_all .pd-br .pd-btn .pd-btn__link:hover,
#top #wrap_all .pd-br .pd-btn .pd-btn__link:focus-visible {
	color: rgb(var(--pd-btn-ink));
	background-color: rgba(var(--pd-btn-ink), var(--pd-btn-fill-on));
	text-decoration: none;
}

.pd-br .pd-btn .pd-btn__link:focus,
#top #wrap_all .pd-br .pd-btn .pd-btn__link:focus {
	outline-style: none;
}

.pd-br .pd-btn .pd-btn__link:focus-visible,
#top #wrap_all .pd-br .pd-btn .pd-btn__link:focus-visible {
	outline: 2px solid rgb(var(--pd-btn-ink));
	outline-offset: 4px;
}

.pd-br .pd-btn .pd-btn__link--nolink,
#top #wrap_all .pd-br .pd-btn .pd-btn__link--nolink {
	cursor: default;
}

.pd-br .pd-btn .pd-btn__label,
#top #wrap_all .pd-br .pd-btn .pd-btn__label {
	--fs: var(--pd-btn-fs);
	--lh: var(--pd-btn-lh);
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

@media (max-width: 767px) {
	.pd-br .pd-btn.pd-btn--mfull .pd-btn__link,
	#top #wrap_all .pd-br .pd-btn.pd-btn--mfull .pd-btn__link {
		width: 100%;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pd-br .pd-btn .pd-btn__link,
	#top #wrap_all .pd-br .pd-btn .pd-btn__link {
		transition: none;
	}
}

/* ---------- end CARRIED ---------- */

/* The head's rule (and on phones the tile row) runs to the screen edge; the section clips the surplus.
   `clip`, not `hidden`: no scroll container, so sticky and fixed keep working. */
.container_wrap:has(.pd-br),
.avia-section:has(.pd-br),
#top #wrap_all .container_wrap:has(.pd-br),
#top #wrap_all .avia-section:has(.pd-br) {
	overflow-x: clip;
	overflow-y: visible;
}

/* ---------- Root: head, tiles, button ---------- */
.pd-br,
#top #wrap_all .pd-br {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-br-head-gap);
	box-sizing: border-box;
	width: 100%;
	margin-top: var(--pd-br-mt-f, var(--pd-br-mt-now));
	margin-bottom: var(--pd-br-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	color: rgb(var(--pd-br-ink));
	font-family: var(--pd-nav-font);
	-webkit-font-smoothing: antialiased;
}

.pd-br *,
#top #wrap_all .pd-br * {
	box-sizing: border-box;
}

/* ---------- Head: text column | arrows, bottoms aligned (cap box = margin box) ---------- */
.pd-br .pd-br__head,
#top #wrap_all .pd-br .pd-br__head {
	display: grid;
	grid-template-columns: minmax(0, var(--pd-br-text-w)) auto;
	justify-content: space-between;
	align-items: end;
	column-gap: var(--pd-br-btn-gap);
	row-gap: var(--pd-br-arrows-gap);
	min-width: 0;
}

.pd-br.pd-br--noarrows .pd-br__head,
#top #wrap_all .pd-br.pd-br--noarrows .pd-br__head {
	grid-template-columns: minmax(0, var(--pd-br-text-w));
}

/* Phones: arrows under the text */
@media (max-width: 767px) {
	.pd-br .pd-br__head,
	#top #wrap_all .pd-br .pd-br__head {
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
	}
}

/* The nested text block fills the column; its own margins are panel-less here */
.pd-br .pd-br__head .pd-tb,
#top #wrap_all .pd-br .pd-br__head .pd-tb {
	margin-top: 0;
	margin-bottom: 0;
}

.pd-br .pd-br__arrows,
#top #wrap_all .pd-br .pd-br__arrows {
	display: flex;
	align-items: center;
	column-gap: var(--pd-br-btn-gap);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

.pd-br .pd-br__arrow,
#top #wrap_all .pd-br .pd-br__arrow {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--pd-br-btn);
	height: var(--pd-br-btn);
	min-width: 0;
	min-height: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	border-width: 0;
	border-style: none;
	border-radius: 0;
	box-shadow: none;
	background-image: none;
	background-color: rgba(var(--pd-br-ink), 0.08);   /* both at rest (Figma 179:6330) */
	color: rgb(var(--pd-br-ink));
	line-height: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* Hover / keyboard focus: red, white chevron (Figma 179:6334). Not gated on (hover: hover). */
.pd-br .pd-br__arrow:hover:not(:disabled),
.pd-br .pd-br__arrow:focus-visible,
#top #wrap_all .pd-br .pd-br__arrow:hover:not(:disabled),
#top #wrap_all .pd-br .pd-br__arrow:focus-visible {
	background-color: var(--pd-br-red);
}

.pd-br .pd-br__arrow:focus-visible,
#top #wrap_all .pd-br .pd-br__arrow:focus-visible {
	outline: 2px solid rgb(var(--pd-br-ink));
	outline-offset: 2px;
}

.pd-br .pd-br__arrow:disabled,
#top #wrap_all .pd-br .pd-br__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

/* The exported lucide chevron (#161414), as an <img>; white on hover */
.pd-br .pd-br__chev,
#top #wrap_all .pd-br .pd-br__chev {
	display: block;
	flex: 0 0 auto;
	width: var(--pd-br-icon);
	height: var(--pd-br-icon);
	max-width: none;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	border-width: 0;
	border-radius: 0;
	box-shadow: none;
	pointer-events: none;
	transition: filter 0.2s ease;
}

.pd-br .pd-br__arrow--prev .pd-br__chev,
#top #wrap_all .pd-br .pd-br__arrow--prev .pd-br__chev {
	transform: rotate(180deg);
}

.pd-br .pd-br__arrow:hover:not(:disabled) .pd-br__chev,
.pd-br .pd-br__arrow:focus-visible .pd-br__chev,
#top #wrap_all .pd-br .pd-br__arrow:hover:not(:disabled) .pd-br__chev,
#top #wrap_all .pd-br .pd-br__arrow:focus-visible .pd-br__chev {
	filter: brightness(0) invert(1);
}

/* ---------- Carousel ---------- */
.pd-br .pd-br__splide,
#top #wrap_all .pd-br .pd-br__splide {
	min-width: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: calc(-1 * var(--pd-br-brr));
}

.pd-br .pd-br__list,
#top #wrap_all .pd-br .pd-br__list {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	list-style-type: none;
}

/* The track clips (overflow: hidden), and a cap-trimmed name's descenders sit below its box:
   pad the clip box and cancel it with a matching negative margin, so nothing moves. */
.pd-br .pd-br__track,
#top #wrap_all .pd-br .pd-br__track {
	padding-bottom: var(--pd-br-clip-pad);
	margin-bottom: calc(-1 * var(--pd-br-clip-pad));
}

/* N tiles across the track, gap between (Splide writes the gap as the slide's margin-right) */
.pd-br .pd-br__slide,
#top #wrap_all .pd-br .pd-br__slide {
	width: var(--pd-br-slide-w);
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	list-style-type: none;
}

.pd-br .pd-br__card,
#top #wrap_all .pd-br .pd-br__card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-br-name-gap);
	width: 100%;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	border-width: 0;
	border-style: none;
	color: rgb(var(--pd-br-ink));
	text-decoration: none;
	outline-style: none;
	-webkit-tap-highlight-color: transparent;
}

.pd-br .pd-br__card:focus-visible .pd-br__tile,
#top #wrap_all .pd-br .pd-br__card:focus-visible .pd-br__tile {
	outline: 2px solid var(--pd-br-red);   /* inset: the track clips anything outside the tile */
	outline-offset: -2px;
}

/* Square tile, #161414 at 8%; the logo sits in the design's 166 × 112 box, centred */
.pd-br .pd-br__tile,
#top #wrap_all .pd-br .pd-br__tile {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: rgba(var(--pd-br-ink), 0.08);
	transition: background-color 0.25s ease;
}

.pd-br .pd-br__logo,
#top #wrap_all .pd-br .pd-br__logo {
	position: absolute;
	top: calc((100% - var(--pd-br-logo-h)) / 2);
	left: calc((100% - var(--pd-br-logo-w)) / 2);
	display: block;
	width: var(--pd-br-logo-w);
	height: var(--pd-br-logo-h);
	max-width: none;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	border-width: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
	object-position: center;
	transition: filter 0.25s ease;
}

.pd-br .pd-br__name,
#top #wrap_all .pd-br .pd-br__name {
	--fs: var(--pd-br-name-fs);
	--lh: var(--pd-br-name-lh);
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	margin-left: 0;
	margin-right: 0;
	font-family: var(--pd-nav-font);
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	color: rgb(var(--pd-br-ink));
	overflow-wrap: break-word;
	transition: color 0.25s ease;
}

/* Hover / keyboard focus (Figma: the BigBoi tile): tile #161414, name red */
.pd-br .pd-br__card:hover .pd-br__tile,
.pd-br .pd-br__card:focus-visible .pd-br__tile,
#top #wrap_all .pd-br .pd-br__card:hover .pd-br__tile,
#top #wrap_all .pd-br .pd-br__card:focus-visible .pd-br__tile {
	background-color: rgb(var(--pd-br-ink));
}

.pd-br .pd-br__card:hover .pd-br__name,
.pd-br .pd-br__card:focus-visible .pd-br__name,
#top #wrap_all .pd-br .pd-br__card:hover .pd-br__name,
#top #wrap_all .pd-br .pd-br__card:focus-visible .pd-br__name {
	color: var(--pd-br-red);
}

/* …and the logo turns white, so a dark logo stays readable on the black tile (client, 24 Sep) */
.pd-br .pd-br__card:hover .pd-br__logo,
.pd-br .pd-br__card:focus-visible .pd-br__logo,
#top #wrap_all .pd-br .pd-br__card:hover .pd-br__logo,
#top #wrap_all .pd-br .pd-br__card:focus-visible .pd-br__logo {
	filter: brightness(0) invert(1);
}

/* ---------- Dots: Splide's pagination, 8px, 18 apart, red when active ---------- */
.pd-br .pd-br__dots,
#top #wrap_all .pd-br .pd-br__dots {
	column-gap: var(--pd-br-dot-gap);
	row-gap: var(--pd-br-dot-gap);
	margin-top: var(--pd-br-dots-gap);
	margin-right: var(--pd-br-brr);   /* centred on the column, not on the bleeding row */
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	list-style-type: none;
}

.pd-br .pd-br__dots > li,
#top #wrap_all .pd-br .pd-br__dots > li {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	line-height: 0;
}

.pd-br .pd-br__dot,
#top #wrap_all .pd-br .pd-br__dot {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: var(--pd-br-dot);
	height: var(--pd-br-dot);
	min-width: 0;
	min-height: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	border-width: 0;
	border-style: none;
	border-radius: 50%;
	box-shadow: none;
	background-image: none;
	background-color: rgba(var(--pd-br-ink), 0.2);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.pd-br .pd-br__dot:hover,
#top #wrap_all .pd-br .pd-br__dot:hover {
	background-color: rgba(var(--pd-br-ink), 0.4);
}

.pd-br .pd-br__dot.is-active,
#top #wrap_all .pd-br .pd-br__dot.is-active {
	background-color: var(--pd-br-red);
}

.pd-br .pd-br__dot:focus-visible,
#top #wrap_all .pd-br .pd-br__dot:focus-visible {
	outline: 2px solid rgb(var(--pd-br-ink));
	outline-offset: 2px;
}

/* ---------- Everything fits: no arrows needed (Splide 4.1's is-overflow) ---------- */
.pd-br.pd-br--fits .pd-br__arrows,
#top #wrap_all .pd-br.pd-br--fits .pd-br__arrows {
	visibility: hidden;
}

/* ---------- Before Splide mounts (and without JavaScript): a plain scrolling row ---------- */
.pd-br:not(.pd-br--ready) .pd-br__track,
#top #wrap_all .pd-br:not(.pd-br--ready) .pd-br__track {
	overflow-x: auto;
	scrollbar-width: none;
}

.pd-br:not(.pd-br--ready) .pd-br__track::-webkit-scrollbar,
#top #wrap_all .pd-br:not(.pd-br--ready) .pd-br__track::-webkit-scrollbar {
	display: none;
}

.pd-br:not(.pd-br--ready) .pd-br__list,
#top #wrap_all .pd-br:not(.pd-br--ready) .pd-br__list {
	display: flex;
	column-gap: var(--pd-br-gap);
}

.pd-br:not(.pd-br--ready) .pd-br__arrows,
#top #wrap_all .pd-br:not(.pd-br--ready) .pd-br__arrows {
	visibility: hidden;   /* keeps its space: no jump when the script mounts */
}

@media (prefers-reduced-motion: reduce) {
	.pd-br .pd-br__arrow,
	.pd-br .pd-br__chev,
	.pd-br .pd-br__tile,
	.pd-br .pd-br__logo,
	.pd-br .pd-br__name,
	.pd-br .pd-br__dot,
	#top #wrap_all .pd-br .pd-br__arrow,
	#top #wrap_all .pd-br .pd-br__chev,
	#top #wrap_all .pd-br .pd-br__tile,
	#top #wrap_all .pd-br .pd-br__logo,
	#top #wrap_all .pd-br .pd-br__name,
	#top #wrap_all .pd-br .pd-br__dot {
		transition: none;
	}
}