.rds-brand-build {
	position: relative;
	isolation: isolate;
	width: 100%;
	background: #0578ff;
	overflow: hidden;
}

.rds-brand-build__intro,
.rds-brand-build__scrub {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
}

.rds-brand-build__intro {
	position: relative;
	display: grid;
	place-items: center;
	padding: clamp(8rem, 42vh, 24rem) clamp(1.5rem, 5vw, 4.5rem) clamp(6rem, 13vh, 9rem);
	overflow: hidden;
}

/* Same clip-art technique as Principles Accordion's own decorative wedge:
   positioned with `transform: translateY()` rather than `top`, since a
   `top` percentage resolves against the intro card's height (which varies
   with copy length/viewport) while a `transform` percentage resolves
   against the SVG's own (width-driven) rendered size — the only way the
   same slice of the artwork stays visible at every breakpoint instead of
   drifting into a blank part of the shape as the card's aspect ratio
   changes. */
.rds-brand-build__clip-art {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: auto;
	transform: translateY(-24.3%);
	pointer-events: none;
}

.rds-brand-build__intro-copy {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(1.9rem, 4vh, 2.75rem);
	width: min(65rem, 90vw);
	text-align: center;
	color: #ffffff;
}

/* Font-size/line-height match the sitewide `.rds-sub-header` scale in
   base.css (same family/weight already used here) so this heading reads at
   the same size as every other section's intro heading instead of a
   bespoke, much smaller one-off. */
.rds-brand-build__heading {
	margin: 0;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	letter-spacing: 0;
}

.rds-brand-build__body {
	margin: 0;
	color: #ffffff;
	font-family: "Ember Modern Text", sans-serif;
	font-weight: 400;
	/* font-size: clamp(1rem, 1.25vw, 1.2rem); */
	/* line-height: 1.16; */
}

.rds-brand-build__scrub {
	width: 100%;
	height: 117svh;
	min-height: 36rem;
	overflow: visible;
}

.rds-brand-build__viewport {
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	background: #0578ff;
}

.rds-brand-build__viewport::-webkit-scrollbar {
	display: none;
}

.rds-brand-build__track {
	display: flex;
	height: 100%;
	box-sizing: border-box;
}

.rds-brand-build__track::after {
	content: "";
	flex: 0 0 var(--rds-manual-carousel-end-padding, 0);
	width: var(--rds-manual-carousel-end-padding, 0);
	height: 1px;
}

.rds-brand-build__nav-arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(3.5rem, 6vw, 4.75rem);
	height: clamp(3.5rem, 6vw, 4.75rem);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.rds-brand-build__nav-arrow--prev {
	left: clamp(1.5rem, 4vw, 3rem);
}

.rds-brand-build__nav-arrow--next {
	right: clamp(1.5rem, 4vw, 3rem);
}

.rds-brand-build__nav-arrow--prev .rds-horizontal-scroll-arrow-icon {
	transform: rotate(180deg);
}

.rds-brand-build__nav-arrow:hover,
.rds-brand-build__nav-arrow:focus-visible {
	transform: translateY(-50%) scale(1.08);
}

.rds-brand-build__nav-arrow:focus-visible {
	outline: 0.1875rem solid #ffffff;
	outline-offset: 0.25rem;
}

.rds-brand-build__nav-arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* One tier fully fills the frame at a time — same "flex: 0 0 100%, no
   gap, no partial next-slide peek" convention as Communication Model's
   `.rds-comm-model__tier` — the card's own inset from the screen edge comes
   from padding here instead of from a narrower panel width, so the slide
   itself is genuinely 100% of the viewport. */
.rds-brand-build__panel {
	display: grid;
	align-items: center;
	flex: 0 0 100%;
	height: 100%;
	padding: 0 clamp(2.5rem, 3.5vw, 3.5rem);
	scroll-snap-align: center;
	box-sizing: border-box;
	overflow: visible;
}

/* Separate static frame underneath the whole tier scrub gallery (2026-08-10,
   "no not slide. a new frame underneath") — normal document flow, not part
   of the horizontal-scrub track above, so it isn't pinned/scrubbed and has
   no viewport-height ceiling to fit inside. */
/* Dark frame with a clip-art wedge bleeding from the blue tier cards above
   (2026-08-14, "make section dark. according to second image design ref.
   andd resposive clip art") — same technique/path as `.rds-ignite-2028-
   beyond__clip-art` (blue-to-dark seam is the same kind of transition, just
   a different pair of colors), reused rather than re-derived since no new
   Figma export was supplied for this one. `width: 100%` on the section's
   own full-bleed box (not the `min(70rem,100%)` constrained column) so the
   dark background and wedge span edge-to-edge; the text column keeps its
   own max-width via `__followup-copy`. */
.rds-brand-build__followup {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: clamp(1.25rem, 3vh, 2rem);
	width: 100%;
	margin: 0 auto;
	padding: calc(48.6111vw + 1.5rem) clamp(1.5rem, 5vw, 3rem) clamp(4rem, 10vh, 6.5rem);
	box-sizing: border-box;
	background: #111419;
	overflow: hidden;
	text-align: left;
	    padding-top: 30vw;
}

/* Backdrop for the wedge's UNCOVERED area (2026-08-14 fix, verified live):
   the clip-art path is dark (`#0F141A`), same as this section's own default
   background (`#111419`) — near-identical, so without this the wedge was
   invisible (dark shape on a dark section). This blue block, sized to the
   same `750/1440` aspect as the SVG so the two align exactly, sits BEHIND
   the SVG and provides the "before" color (matching the blue tier cards
   above) for whatever the diagonal doesn't cover; the section's own dark
   background takes over completely below this bounded region. */
.rds-brand-build__followup-clip-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 48.6111vw;
	background: #0578ff;
	z-index: 0;
	pointer-events: none;
}

.rds-brand-build__followup-clip-art {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 0;
	pointer-events: none;
}

.rds-brand-build__followup p {
	text-align: left;
}

.rds-brand-build__followup-copy {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 70rem;
	color: #ffffff;
	font-family: "Ember Modern Text", sans-serif;
	text-align: center;
}

/* Single flat carousel (2026-08-14, "there is a carousel within a carousel.
   should be just one carousel. using 3 images. no text") — replaces the
   earlier 3-tier switcher (`.rds-brand-build__tier`/`__tier-badge*`) and the
   nested Tier-1-only gallery (`.rds-brand-build__tier-gallery*`) entirely.
   Every slide is now just this one box. */
.rds-brand-build__gallery-image {
    position: relative;
    width: min(90rem, 88%);
    aspect-ratio: 2963 / 1534;
    /* max-height: 80%; */
    margin: auto;
    /* border-radius: clamp(0.8rem, 1.4vw, 1.05rem); */
    /* background: #d9d9d9; */
    /* overflow: hidden; */
}

/* The three source images (`CONSISTENCY_IN_BUILD_1/2/3.png`) each have a
   "Tier N: ..." badge band baked into their own top ~12% and a caption band
   baked into their own bottom ~9% (same reveal as the clipping bug above —
   there's ALSO a solid black margin down the left ~2.6% and right ~6.6% of
   every one of the three images, identical pixel boundaries on all three,
   confirmed the same way: sampling pixel colors across a horizontal line
   at each image's vertical center). None of this can be removed from the
   PNG's own pixels via CSS, so both axes are cropped out of view the same
   way: the image is scaled up on each axis (100 / visible-fraction) and
   shifted by the matching negative offset inside this `overflow: hidden`
   box, leaving only the clean, purely-photo middle region visible. Crop
   fractions use the most conservative (largest) badge/caption band found
   across all three images vertically; the black margin was pixel-identical
   on all three horizontally, so no extra safety margin was needed there. */
.rds-brand-build__gallery-image img {
	display: block;
	position: absolute;
	top: -15.52%;
	left: -2.9%;
	width: 110.16%;
	/* `max-width: none` overrides base.css's global `img { max-width: 100% }`
	   reset — without it, that reset silently capped this element's width at
	   exactly 100% of its container regardless of the `width: 110.16%`
	   above, while `height` (no matching global `max-height` reset exists)
	   scaled correctly — the actual cause of the clipping bug this crop was
	   supposed to fix, confirmed via `getComputedStyle` showing width capped
	   at the container's own width while height matched the intended 127.4%. */
	max-width: none;
	height: 127.4%;
	object-fit: cover;
}

/* Slide 3 (`CONSISTENCY_IN_BUILD_3.png`) is a different source export than
   slides 1/2 — narrower native width (2974px vs 3264px, same 1954px height)
   and, confirmed by re-sampling pixel colors down this specific file (not
   assumed from the other two), NO black side margins at all. Reusing the
   shared crop above (tuned for 1/2's own margins) forced this image through
   `object-fit: cover`'s aspect mismatch, which cropped extra real photo off
   the top/bottom to compensate — and cropped into the photo's own left/right
   edges for a margin that isn't there on this file. Re-derived from this
   image's own badge/caption bands (top badge ends ~9.0%, bottom caption
   starts ~90.9%, sampled the same way as the shared crop above) with a
   symmetric safety margin: 100% width (no horizontal crop needed) and a
   126.9% / -13.32% vertical box that hides 10.5% top / 10.7% bottom — box
   aspect ratio still matches this image's own native aspect exactly, so
   `object-fit: cover` stays a no-op here too, same technique as the shared
   rule. */
#rds-brand-build-slide-3 .rds-brand-build__gallery-image img {
	top: -13.32%;
	left: 0;
	width: 100%;
	height: 126.9%;
}

@media (max-width: 900px) {
	.rds-brand-build__intro-copy {
		width: min(22rem, 82vw);
	}

	.rds-brand-build__panel {
		padding: 0 0.5rem;
	}

	.rds-brand-build__gallery-image {
		/* `max-height`, not `height` — same fix as the desktop rule above,
		   this must stay `aspect-ratio`-driven or object-fit crops the
		   photo's own edges again. */
		width: 95%;
		max-height: 70%;
	}
}