.rds-principles {
	position: relative;
	width: 100%;
	min-height: 100svh;
	background: #111419;
	overflow: hidden;
	isolation: isolate;
}

/* Clip-art wedge added (2026-08-14, "add clip art aabove. same weve done for
   other sections. needs to work responsively" — user-supplied SVG, fill
   #0F141A). Two things make this different from every other clip-art wedge
   this session:

   1. This section's very first content is an opaque, full-bleed carousel
      `<img>` (the "What do we mean by that?" slide) sitting inside
      `.rds-principles__intro` at z-index 10 — a wedge placed *behind* that
      (the usual approach) is fully covered and never shows at all (confirmed
      live: at z-index 0, the seam rendered as a flat line, no diagonal). So
      the SVG sits *above* the image instead (`z-index: 12`) and masks it
      directly: the path's fill covers the whole box below the diagonal
      line, painting solid dark over whatever the image shows there.

   2. Every other wedge relied on revealing its OWN section's background
      color in the unfilled area (e.g. Shared Wins Trophy Grid's section is
      itself blue, so the gap around the dark fill just IS blue already).
      This section's own background is dark (`#111419`), same as the wedge's
      fill — so the unfilled area has nothing blue to reveal on its own, and
      the carousel image itself turned out to render solid dark right up to
      its own top edge too (confirmed live: no letterboxing gap). Added a
      plain `.rds-principles__clip-backdrop` div, painted `#0578ff` (the
      sitewide accent blue, matching the preceding Closing Statement
      section), sized to the same aspect ratio as the SVG's own crop and
      sitting *between* the image (z-index 10) and the mask (z-index 12) —
      same "extra solid-color backdrop" technique already used for Ignite
      2028 & Beyond / Building for the Future, just serving a mask here
      instead of a background reveal.

   The supplied SVG's own viewBox (1440x2191) is the full artwork; only the
   top ~90-100 units contain the actual diagonal/corner detail before it
   resolves to uniform solid fill (confirmed by rendering the raw path in
   isolation and screenshotting several crop heights) — cropped any taller
   and the mask reached down into the carousel image's own baked-in "What
   do we mean by that?" heading text, covering part of it (confirmed live
   at a 320-unit crop). The viewBox in `render.php` is cropped to
   `0 0 1440 100`, comfortably short of where that text starts — the
   backdrop below matches that same 100/1440 ratio (6.944vw) so it never
   peeks out past the SVG's own edge. `width: 100%; height: auto` on the SVG
   keeps that crop's own aspect ratio, so the diagonal holds its angle at
   any viewport width — responsive by construction, not a fixed-pixel crop. */
.rds-principles__clip-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 6.944vw;
	background: #0578ff;
	z-index: 11;
	pointer-events: none;
}

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

/* Manual scroll/carousel (2026-08-14, "replace this section with manual
   scroll/carousel just le we used in other section") — replaces the single
   baked-image GSAP scrub with the same native-scroll-plus-arrows pattern as
   Communication Model's tier row: `data-horizontal-scrub="false"` by default
   (native `overflow-x: auto`, arrows call `initManualCarousel`), with the
   GSAP scrub transition left wired up but dormant so a future instance can
   re-enable it the same way Communication Model's own toggle works. */
.rds-principles__intro {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 100svh;
	min-height: 36rem;
	/* No own `background` (2026-08-14, adding the clip-art wedge above) —
	   it was an exact redundant copy of `.rds-principles`'s own background,
	   but at z-index 10 it fully opaqued over the new clip-art (z-index 0)
	   for this element's whole height. Removing it is a no-op visually
	   everywhere else (the parent section's identical background shows
	   through), and lets the diagonal cut render at the top. */
	overflow: hidden;
}

.rds-principles__intro-scroll {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.rds-principles__intro-track {
	display: flex;
	align-items: stretch;
	gap: 0;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.rds-principles__intro-track::-webkit-scrollbar {
	display: none;
}

/* Dormant GSAP-scrub handoff (mirrors Communication Model's own
   `.rds-comm-model__scrub.is-horizontal-scrub-active .rds-comm-model__tiers`)
   — only applies if a future instance sets `data-horizontal-scrub="true"`. */
.rds-principles__intro.is-horizontal-scrub-active .rds-principles__intro-track {
	overflow: visible;
}

.rds-principles__intro-slide {
	flex: 0 0 100%;
}

.rds-principles__intro-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
}

.rds-principles__intro-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Arrow buttons removed (2026-08-14, "remove the arrow for that section")
   — the GSAP scrub re-enabled just above is the sole interaction model now,
   same as this plugin's other pin/scrub-only sections; touch devices still
   advance via native swipe on the `overflow-x: auto` fallback. */

.rds-principles__tiles-panel {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: clamp(2rem, 5vh, 3rem);
	padding: clamp(4rem, 8vh, 6rem) clamp(1.5rem, 4vw, 3rem) clamp(4rem, 8vh, 6rem);
	background: #111419;
	color: #ffffff;
}

.rds-principles .rds-principles__tiles-heading.sub-header {
	margin: 0 auto;
	max-width: 80rem;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	letter-spacing: 0;
	text-align: center;
}

.rds-principles__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2.4vw, 1.5rem);
	width: min(100%, 95rem);
}

.rds-principles .rds-principles__closing-body.body-copy {
    justify-self: start;
    width: 100%;
    margin: auto;
    color: #ffffff;
    font-family: "Ember Modern Text", sans-serif;
    /* font-size: clamp(1.05rem, 1.45vw, 1.3rem); */
    /* font-weight: 700; */
    line-height: 1.22;
    letter-spacing: 0;
    text-align: left;
    max-width: 60%;
    margin-top: 80px;
}

.rds-principles .rds-principles__closing-headline.section-header {
	    width: 100%;
    margin: clamp(4rem, 12vh, 7.5rem) auto 0;
    color: #ffffff;
    font-family: "Ember Modern Display", sans-serif;
    font-size: 120px;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: 0;
    text-align: center;
}

.rds-principles__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: clamp(6rem, 17vw, 8.625rem);
	background: #0578ff;
	color: #ffffff;
	border: 0;
	border-radius: clamp(1.5rem, 4vw, 3.5rem);
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(4rem, 7vw, 6rem);
	font-family: "Ember Modern Text", sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 2.6vw, 2.5rem);
	line-height: 1.1875;
	letter-spacing: -0.02em;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	appearance: none;
	transition: transform 160ms ease;
}

.rds-principles__tile:hover,
.rds-principles__tile:focus-visible {
	transform: translateY(-0.2rem);
}

.rds-principles__tile:focus-visible {
	outline: 0.1875rem solid #ffffff;
	outline-offset: -0.5rem;
}

.rds-principles__tile .rds-principles__tile-label {
	font-weight: 400;
	font-size: 50px;
}

.rds-principles__tile-icon {
	position: absolute;
	right: clamp(1.5rem, 4vw, 3rem);
	top: 50%;
	width: clamp(1.75rem, 4vw, 2.75rem);
	aspect-ratio: 1;
	transform: translateY(-50%);
}

.rds-principles__tile-icon::before,
.rds-principles__tile-icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: #ffffff;
	border-radius: 999px;
	transform: translate(-50%, -50%);
}

.rds-principles__tile-icon::before {
	width: 100%;
	height: clamp(0.1875rem, 0.4vw, 0.25rem);
}

.rds-principles__tile-icon::after {
	width: clamp(0.1875rem, 0.4vw, 0.25rem);
	height: 100%;
}

.rds-principles__overlay[hidden] {
	display: none;
}

.rds-principles__overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100svh;
	background: #111419;
	color: #ffffff;
}

.rds-principles__overlay-close {
	/* Pinned flush to the card's own top-right corner edge (2026-08-15,
	   "not quite right. can we have the x pin to top right corner edge")
	   — was inset by a generous `clamp(1.5rem,5vw,7rem)`/`clamp(1.5rem,4vw,
	   3rem)`, reading as floating well inside the card instead of pinned to
	   its corner. */
	position: absolute;
	    top: 16px;
    right: 7px;
	z-index: 1;
	width: clamp(3.5rem, 7vw, 2.4375rem);
	height: clamp(3.375rem, 6.8vw, 5.2rem);
	padding: 0;
	border: 0;
	color: #ffffff;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
}

/* X icon (2026-08-15, "for this section overlay only. turn dash into x like
   the case studies overlay" — the only other overlay close icon in this
   plugin is Shared Wins Trophy Grid's, `.rds-trophies__overlay-close-icon`;
   reused its exact CSS-drawn-X technique here rather than a new one so both
   overlays' close buttons are visually consistent, replacing the flat single-
   bar "dash" SVG this button used before. */
.rds-principles__overlay-close-icon {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

.rds-principles__overlay-close-icon::before,
.rds-principles__overlay-close-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 0.35rem;
	border-radius: 999px;
	background: currentColor;
	transform-origin: center;
}

.rds-principles__overlay-close-icon::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.rds-principles__overlay-close-icon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.rds-principles__overlay-close:focus-visible {
	outline: 0.1875rem solid #ffffff;
	outline-offset: 0.25rem;
	border-radius: 50%;
}

.rds-principles__overlay-scroll {
    /* `position: relative` (2026-08-15, "move the close button inside this
       container... i want to move in sync with content") — the close button
       is now this element's own child, absolutely positioned against IT
       instead of the old sibling `.rds-principles__overlay-chrome` (which
       spanned the whole fixed overlay, so the button stayed pinned on
       screen regardless of scroll). Positioned against this scrollable
       container instead, the button is part of its scrolling content and
       moves out of view with everything else as the user scrolls. */
    position: relative;
    width: 80%;
    max-width: 1440px;
    /* height: 90svh; */
    max-height: 100svh;
    overflow-y: auto;
    margin: 0 auto;
    border-radius: 55px;
    background: #0578ff;
    box-sizing: border-box;
	padding-left: 30px;
}

.rds-principles__overlay-panel[hidden] {
	display: none;
}

.rds-principles__overlay-panel {
	width: 100%;
	min-height: 100%;
}

.rds-principles__overlay-card-image {
	display: block;
	width: 97%;
	max-width: 100%;
	height: auto;
	border-radius: clamp(1rem, 3vw, 2rem);
}

.rds-principles .rds-principles__overlay-title.section-header {
	margin: 0;
	color: #ffffff;
}

.rds-principles__photo {
	overflow: hidden;
	border-radius: clamp(1rem, 3vw, 2rem);
	background: #b5b5b5;
}

.rds-principles__photo--placeholder {
	min-height: clamp(9rem, 20vw, 17rem);
	aspect-ratio: 1.1;
	background: #b5b5b5;
}

.box-photo {
	max-height: 473px;
}

.rds-principles__photo img {
	display: block;
	width: 100%;
	height: auto;
}

.box-photo img {
	height: 100%;
	object-fit: cover;
}

.rds-principles__body {
	margin: 0;
	padding: 24px;
	margin-top: 14px;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 400;
	letter-spacing: 0;
	overflow-wrap: break-word;
}

.rds-principles__mosaic-top {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: var(--rds-principles-mosaic-gap, clamp(1rem, 2.4vw, 1.5rem));
	margin-top: clamp(0.75rem, 2vw, 1rem);
}

.rds-principles__mosaic-col {
	display: flex;
	flex-direction: column;
	gap: var(--rds-principles-mosaic-gap, clamp(1rem, 2.4vw, 1.5rem));
	min-width: 0;
}

.rds-principles__mosaic-row,
.rds-principles__mosaic-nested-row {
	display: grid;
	grid-template-columns: repeat(var(--rds-principles-columns, 1), minmax(0, 1fr));
	align-items: start;
	gap: var(--rds-principles-mosaic-gap, clamp(1rem, 2.4vw, 1.5rem));
}

.rds-principles__mosaic-row {
	margin-top: var(--rds-principles-mosaic-gap, clamp(1rem, 2.4vw, 1.5rem));
}

.rds-principles__stats {
	display: grid;
	align-content: start;
	gap: clamp(0.5rem, 1.5vw, 0.85rem);
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 400;
	letter-spacing: 0;
	list-style: none;
}

.rds-principles__stats li {
	position: relative;
	padding-left: 1.25em;
}

.rds-principles__stats li::before {
	content: "•";
	position: absolute;
	left: 0;
}

@media (max-width: 600px) {
	.rds-principles__intro {
		min-height: 100svh;
	}

	.rds-principles__tiles-panel {
		padding: 2rem 1.5rem;
	}

	.rds-principles .rds-principles__tiles-heading.sub-header {
		max-width: 27ch;
		font-size: 1.8rem;
		line-height: 1.28em;
	}

	.rds-principles__grid {
		width: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.875rem;
	}

	.rds-principles__tile {
		height: 5.25rem;
		padding: 1rem 2.75rem 1rem 1rem;
		border-radius: 1rem;
		font-size: 1.125rem;
	}

	.rds-principles__tile .rds-principles__tile-label {
		font-size: 1.125rem;
	}

	.rds-principles__tile-icon {
		right: 1rem;
		width: 2rem;
	}

	.rds-principles__overlay-scroll {
		padding: 4rem 1.25rem 2.5rem;
	}

	.rds-principles__overlay-panel {
		--rds-principles-mosaic-gap: 0.75rem;
	}

	.rds-principles__photo {
		border-radius: 1rem;
	}

	.rds-principles__photo--placeholder {
		min-height: 6rem;
	}

	.rds-principles__mosaic-nested-row {
		grid-template-columns: 1fr;
	}

	.rds-principles__body,
	.rds-principles__stats {
		font-size: 1.1rem !important;
		line-height: 1.35 !important;
	}
}