/* Oct 2026 "Buck Breast Cancer" hero. Positions are px from the Figma hero frames:
   desktop 1920×745 (node 1:32), mobile 390×597 (node 66:128). The stage stays at design size and is
   scaled down at the breakpoints where it would no longer fit. */

#oct-promo {
	height: 745px;
	background-color: #f6a5cf;
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(../images/hero/back.jpg);
	background-image: -webkit-image-set(url("../images/hero/back.webp") 1x, url("../images/hero/back@2x.webp") 2x);
	background-image: image-set(url("../images/hero/back.webp") 1x, url("../images/hero/back@2x.webp") 2x);
}

#oct-hero {
	width: 100%;
	height: 100%;
}

#oct-promo .oct-stage {
	top: 0;
	left: 50%;
	width: 1920px;
	height: 745px;
	transform: translateX(-50%);
	transform-origin: top center;
}

#oct-promo .oct-stage-m {
	top: 0;
	left: 50%;
	width: 390px;
	height: 597px;
	transform: translateX(-50%);
	transform-origin: top center;
}

#oct-promo .oct-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Desktop layers (Figma 1:32) */
#oct-promo .oct-stage .oct-deco { left: 0; top: 24px; }
#oct-promo .oct-stage .oct-logo { left: 767px; top: 42px; }
#oct-promo .oct-stage .oct-headline { left: 534px; top: 179px; width: 801px; height: 351px; }
#oct-promo .oct-stage .oct-copy1 { left: 625px; top: 473px; }
#oct-promo .oct-stage .oct-copy2 { left: 594px; top: 516px; }
#oct-promo .oct-stage .oct-confetti { left: 615px; top: 234px; width: 242px; height: 242px; }   /* centred on the "10" (736, 355), behind it */
#oct-promo .oct-stage .oct-cta { left: 843px; top: 627px; }

/* Mobile layers (Figma 66:128) */
#oct-promo .oct-stage-m .oct-deco { left: 0; top: 195px; }
#oct-promo .oct-stage-m .oct-logo { left: 87px; top: 10px; }
#oct-promo .oct-stage-m .oct-headline { left: -85px; top: 80px; width: 561px; height: 315px; }
#oct-promo .oct-stage-m .oct-copy1 { left: 63px; top: 394px; }
#oct-promo .oct-stage-m .oct-copy2 { left: 22px; top: 456px; }
#oct-promo .oct-stage-m .oct-confetti { left: 109px; top: 107px; width: 172px; height: 172px; }   /* centred on the "10" (195, 193), behind it */
#oct-promo .oct-stage-m .oct-cta { left: 77px; top: 509px; }

#oct-promo .oct-headline .dotlottie-animation,
#oct-promo .oct-headline img {
	width: 100%;
	height: 100%;
}

/* promo-type lottie boxes: size fitted to the designer's MP4 (canvas 1600×700 / 1600×900) */
#oct-promo .headline-lottie {
	width: 801px;
	aspect-ratio: 801 / 351;
	max-height: fit-content;
}

#oct-promo .headline-lottie-m {
	width: 561px;
	aspect-ratio: 561 / 315;
	max-height: fit-content;
}

#oct-promo .oct-confetti {
	pointer-events: none;                /* no z-index: it comes before the headline in the markup, so it draws behind the type */
}

#oct-promo .oct-confetti dotlottie-wc {
	width: 100%;
	height: 100%;
}

/* CTA: Figma "CTA" instance 1:94 */
#oct-promo .oct-cta {
	z-index: 3;
	width: 235px;
	height: 45px;
	padding: 0;
	border-radius: 54px;
	background-color: #f60470;
	color: #ffffff;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0;
}

#oct-promo .oct-cta:hover,
#oct-promo .oct-cta:focus-visible {
	background-color: #d80362;
}

@media (max-width: 991px) {
	#oct-promo { height: 596px; }
	#oct-promo .oct-stage { transform: translateX(-50%) scale(0.8); }
}

@media (max-width: 767px) {
	#oct-promo { height: 462px; }
	#oct-promo .oct-stage { transform: translateX(-50%) scale(0.62); }
}

@media (max-width: 567px) {
	#oct-promo {
		height: 597px;
		background-image: url(../images/hero/back-m.jpg);
		background-image: -webkit-image-set(url("../images/hero/back-m.webp") 1x, url("../images/hero/back-m@2x.webp") 2x);
		background-image: image-set(url("../images/hero/back-m.webp") 1x, url("../images/hero/back-m@2x.webp") 2x);
	}
}

@media (max-width: 379px) {
	#oct-promo { height: 550px; }
	#oct-promo .oct-stage-m { transform: translateX(-50%) scale(0.92); }
}

@media (max-width: 349px) {
	#oct-promo { height: 490px; }
	#oct-promo .oct-stage-m { transform: translateX(-50%) scale(0.82); }
}