/* ==========================================================================
   Prestige Detailing — home hero (pd-hero)
   Figma "Hero_area": desktop 178:4158 (1728 × 1117), mobile 204:6080 (375 × 812).
   Rendered inside #wrap_all, so every rule is paired: ".pd-hero .x" + "#top #wrap_all .pd-hero .x".
   Self-contained: carries its own copy of the shared tokens, the pd-button bracket button
   and the .pd-nav-t cap trim — depends on no other package's stylesheet.
   No !important, no margin/padding shorthands.
   ========================================================================== */

@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, the two Figma widths) ---------- */
.pd-hero {
	/* Shared site tokens — same values as pd-main-nav */
	--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-hero-dark: 22, 20, 20;                                          /* #161414 */
	--pd-hero-red: #d60c0c;
	--pd-hero-white: #fff;
	--pd-hero-h: 100vh;                                                  /* the Figma frames are one screen */
	--pd-hero-w: 580px;                                                  /* text column */
	--pd-hero-px: clamp(16px, 9.259vw, 160px);                           /* = the nav's side padding */
	--pd-hero-pt: 160px;                                                 /* clears the nav */
	--pd-hero-pb: 133px;                                                 /* pt − 27: column centred 13.5 below the middle (Figma 572 of 1117) */
	--pd-hero-l1-fs: clamp(24px, calc(16.24px + 2.0695vw), 52px);
	--pd-hero-l1-ls: -0.03em;                                            /* −1.56 @ 52 */
	--pd-hero-l2-fs: clamp(36px, calc(27.13px + 2.3651vw), 68px);
	--pd-hero-l2-lh: clamp(36px, calc(28.79px + 1.9217vw), 62px);
	--pd-hero-title-gap: clamp(10px, calc(8.89px + 0.2956vw), 14px);
	--pd-hero-rule-gap: clamp(32px, calc(27.57px + 1.1826vw), 48px);
	--pd-hero-text-fs: clamp(18px, calc(16.89px + 0.2956vw), 22px);
	--pd-hero-text-lh: clamp(28px, calc(26.89px + 0.2956vw), 32px);
	--pd-hero-body-gap: clamp(28px, calc(24.67px + 0.8869vw), 40px);
	--pd-hero-top-h: clamp(133px, 17.361vw, 300px);                      /* "Overlay_top", 300 @ 1728 (none on phones) */
	--pd-hero-tw: min(var(--pd-hero-w), calc(100vw - 2 * var(--pd-hero-px))); /* gradient span */
	--pd-hero-fade: 0.9s;

	/* Button — the same geometry as pd-button (Dark style) */
	--pd-hero-btn-ink: 255, 255, 255;
	--pd-hero-btn-fs: 16px;
	--pd-hero-btn-lh: 24px;
	--pd-hero-btn-ls: 0.03em;                                            /* 0.48px @ 16 */
	--pd-hero-btn-py: 24px;
	--pd-hero-btn-px: 32px;
	--pd-hero-btn-arm: 8px;
	--pd-hero-btn-bar: 2px;

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

@supports (height: 100svh) {
	.pd-hero { --pd-hero-h: 100svh; }
}

/* Same switch as the nav's mobile bar (16px sides) */
@media (max-width: 989px) {
	.pd-hero { --pd-hero-px: 16px; }
}

/* Phones (Figma 204:6080): the column sits at the bottom, 88 above the edge */
@media (max-width: 767px) {
	.pd-hero {
		--pd-hero-pt: 140px;
		--pd-hero-pb: 88px;
		--pd-hero-l1-ls: -0.02em;                                        /* −0.48 @ 24 */
	}
}

@media (max-width: 1199px) {
	.pd-hero.pd-hero--scale { --pd-hero-mt-now: calc(var(--pd-hero-mt, 0px) * 0.75); }
}
@media (max-width: 899px) {
	.pd-hero.pd-hero--scale { --pd-hero-mt-now: calc(var(--pd-hero-mt, 0px) * 0.6); }
}

/* ---------- Cap trim (text-box) with a metric fallback — same as pd-main-nav ---------- */
.pd-hero .pd-nav-t,
#top #wrap_all .pd-hero .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-hero { --pd-fb: 1; }
}

/* ---------- Enfold's section wrapper (full-width element) ---------- */
.pd-hero-wrap.container_wrap,
#top #wrap_all .pd-hero-wrap.container_wrap {
	border-top-width: 0;
	background-color: transparent;
}

/* Placed in a Color Section instead: drop that section's 1px top border too */
.avia-section.container_wrap:has(.pd-hero),
#top #wrap_all .avia-section.container_wrap:has(.pd-hero) {
	border-top-width: 0;
}

/* ---------- Root ---------- */
.pd-hero,
#top #wrap_all .pd-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: block;
	width: 100%;
	margin-top: var(--pd-hero-mt-f, var(--pd-hero-mt-now));
	margin-bottom: var(--pd-hero-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	background-color: rgb(var(--pd-hero-dark));
	color: var(--pd-hero-white);
	font-family: var(--pd-nav-font);
	font-weight: 400;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

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

/* All slides share one grid cell: the hero is as tall as the tallest slide (at least one screen) */
.pd-hero .pd-hero__track,
#top #wrap_all .pd-hero .pd-hero__track {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
	min-height: var(--pd-hero-h);
}

.pd-hero.pd-hero--empty .pd-hero__track,
#top #wrap_all .pd-hero.pd-hero--empty .pd-hero__track {
	min-height: 0;
}

/* ---------- Slide ---------- */
.pd-hero .pd-hero__slide,
#top #wrap_all .pd-hero .pd-hero__slide {
	position: relative;
	isolation: isolate;
	z-index: 0;
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--pd-hero-h);
	padding-top: var(--pd-hero-pt);
	padding-bottom: var(--pd-hero-pb);
	padding-left: 0;
	padding-right: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pd-hero-fade) ease, visibility 0s linear var(--pd-hero-fade);
}

.pd-hero .pd-hero__slide.is-active,
#top #wrap_all .pd-hero .pd-hero__slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity var(--pd-hero-fade) ease, visibility 0s linear 0s;
}

@media (max-width: 767px) {
	.pd-hero .pd-hero__slide,
	#top #wrap_all .pd-hero .pd-hero__slide {
		justify-content: flex-end;
	}
}

/* ---------- Media + overlays ---------- */
.pd-hero .pd-hero__media,
#top #wrap_all .pd-hero .pd-hero__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	isolation: isolate;
	overflow: hidden;
	pointer-events: none;
}

.pd-hero .pd-hero__img,
.pd-hero .pd-hero__video,
#top #wrap_all .pd-hero .pd-hero__img,
#top #wrap_all .pd-hero .pd-hero__video {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: 50% 50%;
}

/* The video fades in once it is actually playing — the image shows until then */
.pd-hero .pd-hero__video,
#top #wrap_all .pd-hero .pd-hero__video {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.pd-hero .pd-hero__video.is-playing,
#top #wrap_all .pd-hero .pd-hero__video.is-playing {
	opacity: 1;
}

.pd-hero .pd-hero__slide--left .pd-hero__img,
.pd-hero .pd-hero__slide--left .pd-hero__video,
#top #wrap_all .pd-hero .pd-hero__slide--left .pd-hero__img,
#top #wrap_all .pd-hero .pd-hero__slide--left .pd-hero__video {
	object-position: 0% 50%;
}

.pd-hero .pd-hero__slide--right .pd-hero__img,
.pd-hero .pd-hero__slide--right .pd-hero__video,
#top #wrap_all .pd-hero .pd-hero__slide--right .pd-hero__img,
#top #wrap_all .pd-hero .pd-hero__slide--right .pd-hero__video {
	object-position: 100% 50%;
}

/* "Overlay": left → right, 90% until 15%, gone at half width */
.pd-hero .pd-hero__media::before,
#top #wrap_all .pd-hero .pd-hero__media::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background-image: linear-gradient(90deg, rgba(var(--pd-hero-dark), 0.9) 15%, rgba(var(--pd-hero-dark), 0) 50%);
}

/* "Overlay_top": keeps the transparent nav legible */
.pd-hero .pd-hero__media::after,
#top #wrap_all .pd-hero .pd-hero__media::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	height: var(--pd-hero-top-h);
	background-image: linear-gradient(180deg, rgb(var(--pd-hero-dark)) 0%, rgba(var(--pd-hero-dark), 0) 100%);
}

/* Tablets / small laptops (no frame): the 580 column runs past half width, so keep it on a dark ground */
@media (min-width: 768px) and (max-width: 1199px) {
	.pd-hero .pd-hero__media::before,
	#top #wrap_all .pd-hero .pd-hero__media::before {
		background-image: linear-gradient(90deg, rgba(var(--pd-hero-dark), 0.9) 0%, rgba(var(--pd-hero-dark), 0.72) calc(var(--pd-hero-px) + var(--pd-hero-w)), rgba(var(--pd-hero-dark), 0) 100%);
	}
}

/* Phones (204:5993): the text runs full width, so darken bottom-up instead — and no "Overlay_top" */
@media (max-width: 767px) {
	.pd-hero .pd-hero__media::before,
	#top #wrap_all .pd-hero .pd-hero__media::before {
		background-image: linear-gradient(180deg, rgba(var(--pd-hero-dark), 0) 0%, rgba(var(--pd-hero-dark), 0.88) 100%);
	}

	.pd-hero .pd-hero__media::after,
	#top #wrap_all .pd-hero .pd-hero__media::after {
		display: none;
	}
}

/* ---------- Content: a flex column of cap-trimmed boxes, so the gaps are the design's numbers ---------- */
.pd-hero .pd-hero__content,
#top #wrap_all .pd-hero .pd-hero__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--pd-hero-rule-gap);
}

.pd-hero .pd-hero__title,
.pd-hero .pd-hero__body,
#top #wrap_all .pd-hero .pd-hero__title,
#top #wrap_all .pd-hero .pd-hero__body {
	width: min(var(--pd-hero-w), calc(100% - 2 * var(--pd-hero-px)));
	margin-left: var(--pd-hero-px);
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

.pd-hero .pd-hero__title,
#top #wrap_all .pd-hero .pd-hero__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--pd-hero-title-gap);
	border-width: 0;
	font-family: var(--pd-nav-font);
	font-size: var(--pd-hero-l1-fs);
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--pd-hero-white);
	overflow-wrap: break-word;
}

.pd-hero .pd-hero__l1,
#top #wrap_all .pd-hero .pd-hero__l1 {
	--fs: var(--pd-hero-l1-fs);
	--lh: var(--pd-hero-l1-fs);
	max-width: 100%;
	font-weight: 400;
	letter-spacing: var(--pd-hero-l1-ls);
}

/* Gradient fill on an INLINE box: its paint area is the font's, not the trimmed block's */
.pd-hero .pd-hero__grad,
#top #wrap_all .pd-hero .pd-hero__grad {
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0, var(--pd-hero-white) calc(var(--pd-hero-tw) * 0.25));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.pd-hero .pd-hero__l2,
#top #wrap_all .pd-hero .pd-hero__l2 {
	--fs: var(--pd-hero-l2-fs);
	--lh: var(--pd-hero-l2-lh);
	max-width: 100%;
	font-weight: 700;
	letter-spacing: -0.04em;                     /* −2.72 @ 68, −1.44 @ 36 */
	color: var(--pd-hero-white);
}

/* Rule: from the viewport edge to the end of the text column (0 → 740 @ 1728, 0 → 359 @ 375) */
.pd-hero .pd-hero__rule,
#top #wrap_all .pd-hero .pd-hero__rule {
	display: block;
	flex: none;
	width: min(calc(var(--pd-hero-px) + var(--pd-hero-w)), calc(100% - var(--pd-hero-px)));
	height: 1px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	background-color: rgba(255, 255, 255, 0.4);
}

.pd-hero .pd-hero__body,
#top #wrap_all .pd-hero .pd-hero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--pd-hero-body-gap);
}

.pd-hero .pd-hero__text,
#top #wrap_all .pd-hero .pd-hero__text {
	--fs: var(--pd-hero-text-fs);
	--lh: var(--pd-hero-text-lh);
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pd-hero-white);
	opacity: 0.72;
}

/* ---------- Button: pd-button's Dark style, scoped to the hero ---------- */
.pd-hero .pd-hero__btn,
#top #wrap_all .pd-hero .pd-hero__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: var(--pd-hero-btn-py);
	padding-bottom: var(--pd-hero-btn-py);
	padding-left: var(--pd-hero-btn-px);
	padding-right: var(--pd-hero-btn-px);
	border-width: 0;
	border-style: none;
	border-radius: 0;
	box-shadow: none;
	color: rgb(var(--pd-hero-btn-ink));
	background-color: rgba(var(--pd-hero-btn-ink), 0.08);
	/* Corner brackets: 8 bars, arm × stroke, one per corner edge */
	background-image:
		linear-gradient(rgb(var(--pd-hero-btn-ink)), rgb(var(--pd-hero-btn-ink))),
		linear-gradient(rgb(var(--pd-hero-btn-ink)), rgb(var(--pd-hero-btn-ink))),
		linear-gradient(rgb(var(--pd-hero-btn-ink)), rgb(var(--pd-hero-btn-ink))),
		linear-gradient(rgb(var(--pd-hero-btn-ink)), rgb(var(--pd-hero-btn-ink))),
		linear-gradient(rgb(var(--pd-hero-btn-ink)), rgb(var(--pd-hero-btn-ink))),
		linear-gradient(rgb(var(--pd-hero-btn-ink)), rgb(var(--pd-hero-btn-ink))),
		linear-gradient(rgb(var(--pd-hero-btn-ink)), rgb(var(--pd-hero-btn-ink))),
		linear-gradient(rgb(var(--pd-hero-btn-ink)), rgb(var(--pd-hero-btn-ink)));
	background-size:
		var(--pd-hero-btn-arm) var(--pd-hero-btn-bar), var(--pd-hero-btn-bar) var(--pd-hero-btn-arm),
		var(--pd-hero-btn-arm) var(--pd-hero-btn-bar), var(--pd-hero-btn-bar) var(--pd-hero-btn-arm),
		var(--pd-hero-btn-arm) var(--pd-hero-btn-bar), var(--pd-hero-btn-bar) var(--pd-hero-btn-arm),
		var(--pd-hero-btn-arm) var(--pd-hero-btn-bar), var(--pd-hero-btn-bar) var(--pd-hero-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-hero-btn-fs);  /* em letter-spacing reads THIS, not Enfold's 13px body */
	font-weight: 400;
	font-style: normal;
	letter-spacing: var(--pd-hero-btn-ls);
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.25s ease;
}

.pd-hero .pd-hero__btn:hover,
.pd-hero .pd-hero__btn:focus-visible,
#top #wrap_all .pd-hero .pd-hero__btn:hover,
#top #wrap_all .pd-hero .pd-hero__btn:focus-visible {
	color: rgb(var(--pd-hero-btn-ink));
	background-color: rgba(var(--pd-hero-btn-ink), 0.16);
	text-decoration: none;
}

.pd-hero .pd-hero__btn:focus,
#top #wrap_all .pd-hero .pd-hero__btn:focus {
	outline-style: none;
}

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

.pd-hero .pd-hero__btn--nolink,
#top #wrap_all .pd-hero .pd-hero__btn--nolink {
	cursor: default;
}

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

/* Phones: the button fills the column (343 @ 375) */
@media (max-width: 767px) {
	.pd-hero .pd-hero__btn,
	#top #wrap_all .pd-hero .pd-hero__btn {
		width: 100%;
		white-space: normal;
	}
}

/* ---------- Social icons: bottom-left white box, links from Header & Footer ---------- */
.pd-hero .pd-hero__socials,
#top #wrap_all .pd-hero .pd-hero__socials {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 16px;
	width: 60px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	list-style: none;
	background-color: var(--pd-hero-white);
}

.pd-hero .pd-hero__social-item,
#top #wrap_all .pd-hero .pd-hero__social-item {
	display: block;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	list-style: none;
	background-image: none;
}

.pd-hero .pd-hero__social,
#top #wrap_all .pd-hero .pd-hero__social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-width: 0;
	color: rgb(var(--pd-hero-dark));
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.pd-hero .pd-hero__social:hover,
#top #wrap_all .pd-hero .pd-hero__social:hover {
	opacity: 0.6;
}

.pd-hero .pd-hero__social:focus-visible,
#top #wrap_all .pd-hero .pd-hero__social:focus-visible {
	outline: 2px solid var(--pd-hero-red);
	outline-offset: 2px;
}

.pd-hero .pd-hero__svg,
#top #wrap_all .pd-hero .pd-hero__svg {
	display: block;
	flex: none;
}

/* The design's Instagram is a 16px icon-font glyph, not a 20px vector */
.pd-hero .pd-hero__svg--instagram,
#top #wrap_all .pd-hero .pd-hero__svg--instagram {
	width: 16px;
	height: 16px;
}

/* ---------- Scroll cue (178:4164) ---------- */
.pd-hero .pd-hero__scroll,
#top #wrap_all .pd-hero .pd-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 20px;
	z-index: 3;
	display: flex;
	align-items: center;
	column-gap: 4px;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 8px;
	padding-right: 6px;
	border-width: 0;
	background-color: rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--pd-hero-white);
	text-decoration: none;
	transform: translateX(-50%);
	transition: background-color 0.25s ease;
}

.pd-hero .pd-hero__scroll:hover,
.pd-hero .pd-hero__scroll:focus-visible,
#top #wrap_all .pd-hero .pd-hero__scroll:hover,
#top #wrap_all .pd-hero .pd-hero__scroll:focus-visible {
	color: var(--pd-hero-white);
	background-color: rgba(255, 255, 255, 0.3);
	text-decoration: none;
}

.pd-hero .pd-hero__scroll:focus-visible,
#top #wrap_all .pd-hero .pd-hero__scroll:focus-visible {
	outline: 2px solid var(--pd-hero-white);
	outline-offset: 3px;
}

.pd-hero .pd-hero__scroll-label,
#top #wrap_all .pd-hero .pd-hero__scroll-label {
	--fs: 14px;
	--lh: 18px;
	font-weight: 400;
	letter-spacing: 0.12em;                      /* 1.68 @ 14 */
	text-transform: uppercase;
	white-space: nowrap;
	color: inherit;
}

/* ---------- Slide dots (178:4198): 8px, 10 apart, 24 from the right edge ---------- */
.pd-hero .pd-hero__dots,
#top #wrap_all .pd-hero .pd-hero__dots {
	position: absolute;
	top: calc(50% + 13.5px);
	right: 24px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	transform: translateY(-50%);
}

.pd-hero .pd-hero__dot,
#top #wrap_all .pd-hero .pd-hero__dot {
	position: relative;
	display: block;
	width: 8px;
	height: 8px;
	min-width: 0;
	min-height: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	border-width: 0;
	border-style: none;
	border-radius: 50%;
	box-shadow: none;
	background-color: rgba(255, 255, 255, 0.2);
	background-image: none;
	color: transparent;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.25s ease;
}

/* Bigger hit area, no extra space */
.pd-hero .pd-hero__dot::before,
#top #wrap_all .pd-hero .pd-hero__dot::before {
	content: "";
	position: absolute;
	top: -5px;
	right: -8px;
	bottom: -5px;
	left: -8px;
}

.pd-hero .pd-hero__dot:hover,
#top #wrap_all .pd-hero .pd-hero__dot:hover {
	background-color: rgba(255, 255, 255, 0.6);
}

.pd-hero .pd-hero__dot.is-active,
.pd-hero .pd-hero__dot.is-active:hover,
#top #wrap_all .pd-hero .pd-hero__dot.is-active,
#top #wrap_all .pd-hero .pd-hero__dot.is-active:hover {
	background-color: var(--pd-hero-red);
}

.pd-hero .pd-hero__dot:focus,
#top #wrap_all .pd-hero .pd-hero__dot:focus {
	outline-style: none;
}

.pd-hero .pd-hero__dot:focus-visible,
#top #wrap_all .pd-hero .pd-hero__dot:focus-visible {
	outline: 2px solid var(--pd-hero-white);
	outline-offset: 3px;
}

/* Phones: the mobile frame (204:6080) draws no socials, no scroll cue and no dots — slides change by swipe + autoplay */
@media (max-width: 767px) {
	.pd-hero .pd-hero__socials,
	.pd-hero .pd-hero__scroll,
	.pd-hero .pd-hero__dots,
	#top #wrap_all .pd-hero .pd-hero__socials,
	#top #wrap_all .pd-hero .pd-hero__scroll,
	#top #wrap_all .pd-hero .pd-hero__dots {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pd-hero .pd-hero__slide,
	.pd-hero .pd-hero__slide.is-active,
	.pd-hero .pd-hero__video,
	.pd-hero .pd-hero__btn,
	#top #wrap_all .pd-hero .pd-hero__slide,
	#top #wrap_all .pd-hero .pd-hero__slide.is-active,
	#top #wrap_all .pd-hero .pd-hero__video,
	#top #wrap_all .pd-hero .pd-hero__btn {
		transition: none;
	}
}