/* Color stops tuned to real content position, not an even top-to-bottom
   fade (2026-08-14, "set gradient color consistent to where content
   appears... 2028 headline transitioning into pink section. the gallery
   reach blue"). Measured via Playwright against this wrapper's own actual
   rendered height (13369px at 1440px width, 5 sections): the "2028 &
   Beyond" headline itself sits at 5.79%-8.48% of total height, so the
   blue-to-pink transition is scoped tightly around it (6% to 9%) rather
   than happening somewhere unrelated; President's Club transitions back to
   blue (75% to 85%) so it resolves to solid blue before the Mojave photo
   gallery starts (measured at 86.54%), which needed to land on blue rather
   than wherever a flat 2-stop fade happened to put it. */
.rds-ignite-2028-sequence {
	position: relative;
	background: linear-gradient(
		180deg,
		#0578ff 0%,
		#0578ff 6%,
		#d96ad4 9%,
		#d96ad4 75%,
		#0578ff 85%,
		#0578ff 100%
	);
	overflow: hidden;
}

.rds-ignite-2028-beyond {
	position: relative;
	width: 100%;
	background: transparent;
	overflow: hidden;
}

/* Clip-art wedge bleeding from the dark section above into this one's own
   gradient background (2026-08-14, "add responsive clip art... clip art
   needs to come from the black portion with overflow" — same technique as
   `.rds-trophies__clip-art`: the section's own solid/gradient background
   handles color, this SVG is JUST the dark `#0F141A` decorative shape from
   the supplied Figma export, not its accompanying gradient-filled path
   (that would duplicate/fight this section's own CSS gradient). The
   viewBox's negative min-y crops the export's own multi-section-tall
   coordinate space down to the sliver that lands inside this section — no
   CSS transform needed, unlike the trophies wedge, since the crop is baked
   into the viewBox itself. `overflow: hidden` above still clips anything
   the crop doesn't quite catch. */
.rds-ignite-2028-beyond__clip-art {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 0;
	pointer-events: none;
}

/* Intro text (2026-08-14, "lets readd this text back. above ignitefest
   scroll section") — restores the heading/body copy that predated the
   image-only Ignitefest scrub (see MODULES.md, "replaced by single
   image-only GSAP horizontal scrub"), as its own full-height frame directly
   above it rather than folded back into the scrub track. */
.rds-ignite-2028-beyond__intro {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* flex-start + a padding-top tied to the clip-art's own rendered height
	   (2026-08-14, "pull it up where there is less gap. make it work
	   responsively") — `justify-content: center` on a `min-height: 100svh`
	   container ignored the clip-art entirely and centered on total content
	   height instead, leaving a gap that grew or shrank independently of the
	   clip-art's own size. The clip-art SVG scales as `width: 100%` with its
	   `750/1440` viewBox aspect ratio, so its rendered height is always
	   `52.0833vw` — using that same vw-based figure here keeps the heading a
	   fixed, small distance below the clip-art's bottom edge at every
	   viewport width instead of a fixed rem gap that reads as huge on some
	   sizes and tight on others. */
	justify-content: flex-start;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	width: 100%;
	min-height: 100svh;
	padding: calc(52.0833vw + 1.5rem) clamp(1.5rem, 6vw, 6rem) clamp(3rem, 8vh, 6rem);
	box-sizing: border-box;
	text-align: center;
}

/* font-size was a fixed 200px with a 40rem (640px) max-width — wider than
   most phone viewports, causing the heading to overflow/cut off instead of
   scaling down (2026-08-14, "make it work responsively"). clamp() keeps the
   same ~200px at the 1440px width this was tuned at (13.9vw * 1440px =
   200px) while shrinking proportionally below that; max-width now yields to
   the viewport instead of forcing a fixed box wider than it. */
.rds-ignite-2028-beyond__heading {
	max-width: min(40rem, 100%);
	font-size: clamp(2.5rem, 13.9vw, 12.5rem);
	line-height: 0.9;
	margin-bottom: 50px;
}

.rds-ignite-2028-beyond__body-group {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.5rem);
	width: 100%;
	max-width: 53rem;
	text-align: left;
}

.rds-ignite-2028-beyond .rds-ignite-2028-beyond__body.body-copy {
    margin: 0;
    color: #ffffff;
    font-family: "Ember Modern Text", sans-serif;
    /* font-weight: 400; */
    /* font-size: clamp(1.75rem, 2.2vw, 2rem); */
    line-height: 1.35;
}

.rds-ignite-2028-beyond__callout-scrub {
	position: relative;
	width: 100%;
	height: 100svh;
	min-height: 36rem;
	background: transparent;
	overflow: hidden;
}

.rds-ignite-2028-beyond__callout-viewport {
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.rds-ignite-2028-beyond__callout-viewport::-webkit-scrollbar {
	display: none;
}

.rds-ignite-2028-beyond__callout-track {
	display: flex;
	align-items: stretch;
	width: max-content;
	height: 100%;
}

.rds-ignite-2028-beyond__image {
	display: block;
	width: auto;
	max-width: none;
	height: 100svh;
	max-height: none;
}

@media (max-width: 767px) {
	.rds-ignite-2028-beyond__callout-scrub {
		min-height: 100svh;
	}

	.rds-ignite-2028-beyond__body-group {
		text-align: center;
	}
}