/**
 * Background-slideshow dots — design .hero-dots: thin 34×2 bars, bottom-right at the section gutter.
 * Offsets mirror the hero section padding (64/96 → 40/64 → 20/48) so the dots sit on the same grid
 * as the content. z-index 3 = above the scrim overlay (z1) and slideshow (z0).
 */
.wdr-bg-dots {
	position: absolute;
	right: 64px;
	bottom: 96px;
	z-index: 3;
	display: flex;
	gap: 12px;
}

.wdr-bg-dots button {
	width: 34px;
	height: 2px;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: rgba(243, 241, 236, 0.32);
	transition: background 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wdr-bg-dots button.is-active {
	background: #f3f1ec;
}

/* 🚨 Hello Elementor's reset styles EVERY <button>:
   `[type="button"]:hover, button:hover, button:focus { background-color:#c36; color:#fff }`
   — a crimson that has nothing to do with this brand. Its specificity is (0,1,1); these rules are
   (0,2,1), so they win. Without them a dot flashes pink on hover/focus (client caught it 2026-08-05).
   Brand behaviour is monochrome: hover brightens the bar toward the active on-dark tone. */
.wdr-bg-dots button:hover,
.wdr-bg-dots button:focus {
	background: rgba(243, 241, 236, 0.68);
}

.wdr-bg-dots button.is-active:hover,
.wdr-bg-dots button.is-active:focus {
	background: #f3f1ec;
}

/* keyboard users still need a visible focus ring (the reset's is suppressed above) */
.wdr-bg-dots button:focus-visible {
	outline: 1px solid #f3f1ec;
	outline-offset: 4px;
}

@media (max-width: 1024px) {
	.wdr-bg-dots { right: 40px; bottom: 64px; }
}

@media (max-width: 767px) {
	.wdr-bg-dots { right: 20px; bottom: 48px; }
}