.rds-visid {
	position: relative;
	width: 100%;
	--rds-visid-intro-height: clamp(18rem, 38.9svh, 22.125rem);
	--rds-visid-gradient-opacity: 1;
	--rds-visid-gradient-y: 0%;
	--rds-visid-current-y: 0px;
    --rds-visid-slide-gap: clamp(3.5rem, 8.5vw, 6.5rem);
	background: #111419;
	/* padding-bottom: var(--rds-visid-intro-height); */
	overflow: hidden;
}

.rds-visid__intro {
	width: 100%;
	height: var(--rds-visid-intro-height);
	overflow: hidden;
}

/* Intro video's own row (2026-08-11, "make the video in its own row. no
   horizontal scroll") — pulled out of the horizontal-scrub track entirely,
   so it's a plain full-bleed section in normal vertical scroll flow, not
   pinned/scrubbed. `.rds-visid__intro-video`'s own width/height/object-fit
   rule below still applies unchanged since this wrapper gives it the same
   definite full-height box the scrub used to provide. */
.rds-visid__video-row {
	position: relative;
	z-index: 12;
	width: 100%;
	height: 100svh;
	min-height: 36rem;
	/* 50px padding + 55px radius on the video itself (2026-08-15, "for visid
	   main first video add 50px padding around the video. border radius
	   55px") — `box-sizing: border-box` keeps the row's own `height: 100svh`
	   from growing past the viewport once padding is added. */
	padding: 40px;
	box-sizing: border-box;
	overflow: hidden;
	    display: flex;
    justify-content: center;
}

/* Scoped to this row specifically, not `.rds-visid__intro-video` alone —
   that class is shared with the unrelated outro video further down this
   same block's horizontal-scrub track, which this request doesn't apply to. */
.rds-visid__video-row .rds-visid__intro-video {
	width: 95%;
	border-radius: 55px;
	    box-shadow: 0px 0px 10px #0578FF;
}

.rds-visid__scrub {
	/* Explicit, page-order z-index — see the matching comment on
	   `.rds-comm-model__scrub` (2026-08-10). Higher than Communication
	   Model's (the section above), so this section — the later one —
	   deterministically wins if their pinned states ever briefly overlap. */
	position: relative;
	z-index: 11;
	width: 100%;
	height: 100svh;
	min-height: 36rem;
	overflow: visible;
}

.rds-visid__viewport {
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.rds-visid__viewport::-webkit-scrollbar {
	display: none;
}

.rds-visid__track {
	display: flex;
	gap: var(--rds-visid-slide-gap);
	width: max-content;
	height: 100%;
	/* Centered-frame carousel (2026-08-15, "for slides ensure all frames fit
	   centered in viewport") — extra scrollable space on both ends equal to
	   one full viewport width, so `scroll-snap-align: center` below can
	   actually center the first and last panels too, not just the middle
	   ones (without this, there'd be no room to scroll a start/end panel
	   past its own edge into a centered position). */
	/* padding-inline: 50vw; */
}

.rds-visid__panel {
	/* flex: 0 0 100vw; */
	/* width: 100vw; */
	height: 100%;
	/* min-width: 0; */
	box-sizing: border-box;
	scroll-snap-align: center;
	overflow: visible;
}

/* Full-bleed video intro slide (2026-08-11) — unlike its siblings above,
   which size to their own content, this one needs a definite box for the
   video to fill, so it gets an explicit viewport-width/height sizing the
   others deliberately don't have. */
.rds-visid__panel--video {
	position: relative;
	flex: 0 0 100vw;
	width: 100vw;
	overflow: hidden;
	display:flex;
	flex-direction: column;
	gap: 30px;
	justify-content: center;
    /* max-width: 850px; */
}

.rds-visid__intro-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Blue badge layered over the outro video's top-left corner (2026-08-15,
   "update last slide in section to look like this. blue block on top of
   video"), matching the rounded blue header-block treatment from the
   supplied reference. */
.rds-visid__outro-badge {
	/* position: absolute; */
	top: clamp(1.5rem, 4vh, 3rem);
	left: clamp(1.5rem, 4vw, 3rem);
	z-index: 2;
	max-width: 850px;
	border-radius: clamp(1rem, 2vw, 1.5rem);
	background: #0578ff;
	padding: clamp(1.1rem, 2.6vh, 1.75rem) clamp(1.75rem, 3.6vw, 2.75rem);
	box-sizing: border-box;
}

.rds-visid__outro-badge-text {
	margin: 0;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 400;
	font-size: 60px;
	line-height: 1.1;
	text-align: center;
}

/* Body copy between the outro badge and the video (2026-08-15, "add text
   between head line and video"), matching the smaller-body-copy-near-a-
   blue-note pattern already established in this file by
   `.rds-visid__curvature-copy`, rather than the sitewide `.body-copy`
   marker class, whose 50px base size is tuned for full-bleed statement
   sections and doesn't fit this compact card context. */
.rds-visid__outro-body {
	    /* max-width: 850px; */
    /* margin: clamp(0.85rem, 1.8vh, 1.25rem) 0 0 clamp(1.5rem, 4vw, 3rem); */
    color: #ffffff;
    font-family: "Ember Modern Text", sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.35;
}

/* Manual scroll/carousel arrows (2026-08-15) — same shared
   `.rds-horizontal-scroll-arrow-icon` + `click-button.svg` convention as
   Communication Model/Brand Build Consistency/Tier Bottom Line/The Detour. */
.rds-visid__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-visid__nav-arrow--next {
	right: clamp(1.5rem, 4vw, 3rem);
}

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

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

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

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

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

.rds-visid__intro {
	position: relative;
	display: grid;
	place-items: center;
	background: #111419;
	isolation: isolate;
}

/* Moved outside `.rds-visid__intro` (2026-08-12, "move text outside the
   visid container") — a plain sibling in the section's own normal flow
   instead of nested inside the intro's gradient-glow box, sitting on the
   section's own flat `#111419` background rather than the intro's own
   `::before` gradient. Compound selector (not just `.rds-visid__intro-lead`)
   so `font-weight: 700` here beats `.sub-header`'s own base.css
   `font-weight: 400` — same load-order specificity fix needed repeatedly
   elsewhere this session (WordPress prints this block's own <style> in
   <head> before base.css's <link>), applied proactively here instead of
   discovering it after the fact. */
.rds-visid .rds-visid__intro-lead.sub-header {
	position: relative;
	width: 100%;
	max-width: 13ch;
	margin: 0 auto;
	padding: clamp(2rem, 6svh, 4rem) clamp(1.5rem, 5vw, 4rem);
	box-sizing: border-box;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	/* font-weight: 700; */
	/* font-size: clamp(1.5rem, 4vw, 2.75rem); */
	/* letter-spacing: 0; */
	text-align: center;
	font-size: clamp(2.75rem, 7.8vw, 8rem);
	font-weight: 700;
	line-height: 0.9em;
}

.rds-visid__intro::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, #0f141a 2.4%, #0578ff 61.06%, #62cac5 100%);
	opacity: var(--rds-visid-gradient-opacity);
	transform: translateY(var(--rds-visid-gradient-y));
	will-change: opacity, transform;
}

.rds-visid__title,
.rds-visid__section-heading,
.rds-visid__curvature-heading,
.rds-visid__story-title,
.rds-visid__future-title {
	margin: 0;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	letter-spacing: 0;
}

.rds-visid__title {
	position: relative;
	text-align: center;
}

.rds-visid__panel--current,
.rds-visid__panel--curvature,
.rds-visid__panel--story,
.rds-visid__panel--evolution {
	background: #111419;
}

.rds-visid__panel--evolution {
	padding-right: clamp(3rem, 6vw, 4.5rem);
}

.rds-visid__current-layout {
	display: grid;
	grid-template-columns: minmax(13rem, 0.72fr) minmax(32rem, 2fr);
	align-items: center;
	align-content: center;
	gap: 5rem;
	width: 100%;
	height: 100%;
	padding: clamp(2.25rem, 5vh, 3.5rem) 5rem;
	box-sizing: border-box;
	transform: translateY(var(--rds-visid-current-y));
	will-change: transform;
}

.rds-visid__section-heading {
	max-width: 10ch;
	font-size: 3.5rem;
	line-height: 0.98;
}

.rds-visid__lockups {
	display: grid;
	align-content: center;
	gap: clamp(1.35rem, 3vh, 2.4rem);
	min-width: 0;
}

.rds-visid__lockup {
	display: block;
	width: min(100%, 52rem);
	height: auto;
	object-fit: contain;
	object-position: left center;
}

.rds-visid__lockup-row {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 2.4vw, 2.6rem);
	min-width: 0;
}

.rds-visid__lockup-icon {
	display: block;
	flex: 0 0 auto;
	width: clamp(4rem, 6vw, 6.75rem);
	height: auto;
}

.rds-visid__lockup--live {
	width: min(65%, 30rem);
}

.rds-visid__curvature-layout {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	align-items: center;
	justify-items: center;
	gap: clamp(2rem, 6vh, 4rem);
	width: 100%;
	height: 100%;
	padding: clamp(4rem, 8vh, 6rem) clamp(2rem, 8vw, 8rem);
	box-sizing: border-box;
}

.rds-visid__curvature-visual {
	position: relative;
	display: grid;
	grid-template-columns: minmax(16rem, 0.88fr) minmax(10rem, 0.52fr);
	align-items: center;
	justify-content: center;
	gap: clamp(4rem, 10vw, 9rem);
	width: min(66rem, 82vw);
}

/* Replaced with an autoplay-on-view video (2026-08-11, "replace these 2
   elements with 2 videos respectively that autoplays on view") — was a
   plain `<p>ignite</p>` styled to look like a wordmark. `object-fit:
   contain` keeps the video's own intrinsic ratio fully visible inside the
   grid column rather than cropping it. */
.rds-visid__curvature-word {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.rds-visid__curvature-mark {
	display: block;
	width: clamp(11rem, 20vw, 18rem);
	height: auto;
	object-fit: contain;
}

.rds-visid__curvature-note {
	width: min(58rem, 72vw);
	border-radius: clamp(0.75rem, 1.3vw, 1.05rem);
	background: #0578ff;
	color: #ffffff;
	padding: clamp(1.25rem, 2.8vh, 1.8rem) clamp(1.5rem, 3vw, 2.25rem);
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.rds-visid__curvature-heading {
	font-size: clamp(2.8rem, 4.6vw, 5rem);
	line-height: 0.95;
}

.rds-visid__curvature-copy {
	margin: clamp(0.7rem, 1.5vh, 1rem) 0 0;
	color: #ffffff;
	font-family: "Ember Modern Text", sans-serif;
	font-weight: 400;
	font-size: clamp(1rem, 1.45vw, 1.25rem);
	line-height: 1.18;
}

.rds-visid__story-layout {
	display: grid;
	align-content: center;
	gap: clamp(2.75rem, 7vh, 4.5rem);
	width: min(72rem, 82vw);
	height: 100%;
	margin: 0 auto;
	padding: clamp(2.75rem, 6vh, 4.5rem) 0;
	box-sizing: border-box;
}

.rds-visid__story-title {
	font-size: clamp(2.8rem, 4.6vw, 5rem);
	line-height: 0.95;
}

.rds-visid__story-tiers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(4rem, 8vw, 8rem);
	align-items: start;
	min-height: clamp(21.25rem, 44.5vh, 25.3125rem);
}

.rds-visid__story-tier {
	display: grid;
	justify-items: start;
	align-content: start;
	gap: clamp(1rem, 2.4vh, 1.8rem);
}

.rds-visid__story-icon {
       display: block;
    width: clamp(6.25rem, 5vw, 8rem);
    height: auto;
    justify-self: center;
    margin-bottom: clamp(1rem, 2.8vh, 3rem);
}

/* Latest logomark assets (2026-08-17, "replace icon to ensure we using
   latest" — new Figma exports for all 3 tiers, viewBox `0 0 115 125` instead
   of the old `0 0 108 112`). The old tier-1/tier-2 paths were simple thin
   outlines rendered via `fill: none; stroke: #fff` — the "hollow" look came
   from a CSS stroke, not the path geometry itself. The new paths achieve the
   same hollow look differently: each is already a closed, filled ring/arrow
   shape (Figma's own "outline as compound fill" export), so stroking them
   again on top would double the outline and distort the new geometry.
   `.rds-visid__story-icon-fill` (`fill: #ffffff`, no stroke) now applies
   uniformly to every path in all 3 tiers — which tier reads as hollow
   (Tier 1, most of Tier 2) vs. fully solid (Tier 2's small connector shape,
   both of Tier 3's) comes entirely from each path's own shape now, not from
   a tier-specific CSS rule. */
.rds-visid__story-icon-fill {
	fill: #ffffff;
}

.rds-visid__story-tier-heading {
	margin: 0;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	font-size: clamp(1.7rem, 2.4vw, 2.5rem);
	line-height: 0.95;
}

.rds-visid__story-copy {
	margin: 0;
	max-width: 14.5rem;
	color: #ffffff;
	font-family: "Ember Modern Text", sans-serif;
	font-weight: 400;
	font-size: clamp(1rem, 1.35vw, 1.2rem);
	line-height: 1.2;
}

.rds-visid__evolution-layout {
	display: grid;
	align-content: center;
	gap: clamp(2.75rem, 7vh, 4.5rem);
	width: min(72rem, 88vw);
	height: 100%;
	margin: 0 auto;
	padding: clamp(2.75rem, 6vh, 4.5rem) 0;
	box-sizing: border-box;
}

.rds-visid__future-title {
	font-size: clamp(2.8rem, 4.6vw, 5rem);
	line-height: 0.95;
}

.rds-visid__future-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: clamp(3rem, 8vw, 7rem);
}

.rds-visid__future-column {
    display: flex;
    justify-items: center;
    align-content: start;
    gap: clamp(4rem, 9vh, 6rem);
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.rds-visid__future-icon {
	display: block;
	width: clamp(6rem, 10vw, 7.25rem);
	height: auto;
}

/* Latest logomark assets, same swap as `.rds-visid__story-icon-fill` above
   (2026-08-17, "update icons for this section too. sme svgs i provided
   earlier") — see that rule's own comment for the full reasoning (new
   Figma export achieves the hollow look as a filled ring shape, not a CSS
   stroke, so this uniform fill rule replaces the old tier-specific
   stroke/fill split). */
.rds-visid__future-icon-fill {
	fill: #ffffff;
}

.rds-visid__future-lockup {
	display: block;
	width: 100%;
	height: auto;
	max-height: 11.625rem;
	object-fit: contain;
	object-position: center;
}

.rds-visid__future-lockup--road,
.rds-visid__future-lockup--connect {
	width: min(100%, 25.75rem);
}

.rds-visid__future-lockup--live {
	width: min(86%, 19.5rem);
}

@media (max-width: 900px) {
	.rds-visid__current-layout,
	.rds-visid__curvature-layout,
	.rds-visid__story-layout,
	.rds-visid__evolution-layout {
		grid-template-columns: 1fr;
		align-content: center;
		gap: 2.5rem;
		padding: 3rem 2rem;
	}

	.rds-visid__section-heading {
		max-width: 14ch;
		font-size: 2.5rem;
	}

	.rds-visid__lockups {
		gap: 2rem;
	}

	.rds-visid__lockup {
		width: min(100%, 42rem);
	}

	.rds-visid__lockup-icon {
		width: 4.5rem;
	}

	.rds-visid__mark-story {
		grid-template-columns: 1fr auto;
		align-items: center;
		justify-items: start;
		gap: 2rem;
	}

	.rds-visid__mark {
		width: 5rem;
	}

	.rds-visid__curvature-visual {
		grid-template-columns: 1fr auto;
		gap: 2.5rem;
		width: min(42rem, 88vw);
	}

	.rds-visid__curvature-note {
		width: min(42rem, 88vw);
	}

	.rds-visid__story-layout {
		width: min(44rem, 88vw);
	}

	.rds-visid__story-tiers {
		gap: 2rem;
		min-height: auto;
	}

	.rds-visid__evolution-layout {
		width: min(44rem, 88vw);
	}

	.rds-visid__future-columns {
		gap: 2rem;
	}
}

@media (max-width: 600px) {
	.rds-visid {
	--rds-visid-intro-height: clamp(14rem, 34svh, 18rem);
	}

	.rds-visid__scrub {
		min-height: 34rem;
	}

	.rds-visid__current-layout,
	.rds-visid__curvature-layout,
	.rds-visid__story-layout,
	.rds-visid__evolution-layout {
		padding: 2.5rem 4.25rem 2.5rem 1.5rem;
	}

	.rds-visid__section-heading {
		font-size: 2rem;
	}

	.rds-visid__story-heading,
	.rds-visid__future-heading {
		font-size: 1.5rem;
	}

	.rds-visid__lockups {
		gap: 1.5rem;
	}

	.rds-visid__lockup-row {
		gap: 1rem;
	}

	.rds-visid__curvature-visual {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 1.5rem;
	}

	.rds-visid__curvature-word {
		width: 12rem;
	}

	.rds-visid__curvature-mark {
		width: 8rem;
	}

	.rds-visid__curvature-note {
		width: 100%;
	}

	.rds-visid__story-layout {
		width: 100%;
	}

	.rds-visid__story-title {
		font-size: 2.3rem;
	}

	.rds-visid__story-tiers {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.rds-visid__story-tier {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 1rem;
		align-items: start;
	}

	.rds-visid__story-icon {
		grid-row: span 2;
		width: 3.75rem;
		margin: 0;
	}

	.rds-visid__story-copy {
		max-width: none;
	}

	.rds-visid__future-title {
		font-size: 2.3rem;
	}

	.rds-visid__future-columns {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}

	.rds-visid__future-column {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		justify-items: start;
		gap: 1rem;
	}

	.rds-visid__future-icon {
		width: 4rem;
	}

	.rds-visid__future-lockup {
		max-height: none;
	}

	.rds-visid__future-lockup--road {
		width: min(100%, 13rem);
	}

	.rds-visid__future-lockup--connect {
		width: min(100%, 10.5rem);
	}

	.rds-visid__future-lockup--live {
		width: min(86%, 11rem);
	}
}


.design-system-video video {
    /* width: 100%; */
    height: 100%;
	    max-width: 850px;
}

/* Renamed from `.rds-visid__panel--video--inner` (2026-08-15, "next arrow
   not appearing") — reusing `.rds-visid__panel` as part of this nested
   wrapper's own class made it match the carousel's `.rds-visid__panel`
   slide selector too, silently turning 5 real slides into 6 and corrupting
   the first/last-slide boundary math `align: "center"` depends on, which
   disabled both arrows outright. The JS selector is now scoped to direct
   children of the track either way, but this element was never meant to be
   a slide in the first place — renaming it removes the collision at the
   source instead of only working around it downstream. */
.rds-visid__outro-content {
    max-width: min(850px, 100%);
    margin: auto;
    gap: 25px;
    display: flex;
    flex-direction: column;
}