/* Case Studies accordion: compact title band, stacked accordion triggers, and
   horizontal media galleries inside the active client panel. */

.rds-case-studies {
	position: relative;
	width: 100%;
	background: #ffffff;
	color: #111419;
	overflow: hidden;
}

/* Small "Case Studies" label (2026-08-06, added back) — distinct from the
   bigger `.rds-big-statement` intro that moved out to its own
   `whats-next-intro` block instance. Uses the plain shared global `h2`
   scale/weight, just centered with its own spacing above the accordion. */
.rds-case-studies__heading {
	margin: 0;
	padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem) 0;
	box-sizing: border-box;
	color: #111419;
	text-align: center;
	margin-top: 50px !important;
}

.rds-case-studies .rds-case-studies__hint.body-copy {
	margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
	color: #111419;
	font-family: "Ember Modern Text", sans-serif;
	font-weight: 400;
	font-size: clamp(0.875rem, 2.2vw, 6rem);
	line-height: 1.3;
	letter-spacing: 0;
	text-align: center;
}

.rds-case-studies__accordion {
	/* Stride grown (2026-08-09, "title looking a bit squished") — the tab
	   label now carries `.section-header` at up to 5rem/80px, and the old
	   stride ceiling (5.75rem/92px) left it almost no breathing room once
	   line-height was included. Height is derived from stride instead of
	   its own separate clamp so the bottom "peek" (the sliver of the next
	   stacked tab visible above a closed one) stays exactly 3.75rem at
	   every viewport, same as before, instead of two independently-tuned
	   curves that only approximately tracked each other. Scaled back down
	   ~20% (2026-08-09, "scale down font by 20%... cut some space") to
	   track the label's own 20% reduction above, keeping the same
	   breathing-room ratio instead of leaving the row oversized now that
	   the label shrank. */
	--rds-case-tab-stride: clamp(3.6rem, 7.2vw, 6.8rem);
	--rds-case-tab-height: calc(var(--rds-case-tab-stride) + 3.75rem);
	position: relative;
	width: 100%;
	height: 100vh;
	background: #ffffff;
	overflow: hidden;
	isolation: isolate;
}

.rds-case-studies__item {
	--rds-case-bg: #0578ff;
	--rds-case-underlay: #ffffff;
	--rds-case-color: #ffffff;
	position: absolute;
	inset-inline: 0;
	top: calc(var(--rds-case-position) * var(--rds-case-tab-stride));
	z-index: var(--rds-case-layer);
	background: transparent;
	color: var(--rds-case-color);
	border-radius: clamp(2rem, 6vw, 6.25rem) 0 0 0;
	box-shadow: 0 -0.1875rem 1.325rem rgba( 0, 0, 0, 0.2 );
}

/* Each folder owns a square layer painted with the card directly behind it.
   The rounded trigger then reveals that color through its top-left corner,
   keeping the stack continuous instead of exposing the white stage. */
.rds-case-studies__item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--rds-case-underlay);
	pointer-events: none;
}

.rds-case-studies__item.is-open {
	bottom: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.rds-case-studies__trigger,
.rds-case-studies__panel {
	position: relative;
	background: var(--rds-case-bg);
}

.rds-case-studies__trigger {
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	height: var(--rds-case-tab-height);
	min-height: var(--rds-case-tab-height);
	padding-block: 0 calc(var(--rds-case-tab-height) - var(--rds-case-tab-stride));
	padding-inline: clamp(2.4rem, 6vw, 6.25rem);
	border: 0;
	border-radius: inherit;
	color: inherit;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	font-size: clamp(2rem, 4vw, 3.75rem);
	line-height: 1.1875;
	/* letter-spacing: -0.02em; */
	text-align: left;
	cursor: pointer;
	padding-top: 15px;
}

/* Scoped 20% reduction off the global `.section-header` size (2026-08-09,
   "for case studies only... scale down font by 20%") — `!important` since
   `.section-header` (base.css) loads after this file and would otherwise
   win the same-specificity tie. clamp(1.75rem,6.6vw,5rem) × 0.8. */
.rds-case-studies__label {
	font-size: clamp(1.4rem, 5.28vw, 4rem) !important;
}

/* Same-color folders need a visible silhouette where their rounded tabs
   overlap. Scope the shadow to that relationship so contrasting cards keep
   their clean color boundary. */
.rds-case-studies__item[data-case-same-color-underlay="true"] > .rds-case-studies__trigger::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: -0.2rem -0.2rem 0.9rem rgba( 15, 20, 26, 0.34 );
	clip-path: inset(-1.25rem -1.25rem 1.25rem -1.25rem);
	pointer-events: none;
}

.rds-case-studies__trigger:focus-visible {
	outline: 0.1875rem solid currentColor;
	outline-offset: -0.75rem;
}

.rds-case-studies__plus {
	flex: 0 0 auto;
	width: clamp(2.75rem, 8vw, 4.4375rem);
	height: auto;
	color: currentColor;
	transition: transform 180ms ease;
	scale: 0.7;
}

.rds-case-studies__item.is-open .rds-case-studies__plus {
	display: none;
}

.rds-case-studies__item.is-open .rds-case-studies__trigger {
	flex: 0 0 auto;
	/* The base rule's padding-bottom (height - stride) reserves room for
	   the next closed tab's peek sliver — that purpose doesn't apply once
	   this tab is open and showing real content, so it was just adding
	   dead space between the label and the media grid below it. */
	padding-bottom: 0;
	/* Real root cause of the "align to title"/"video hidden" back-and-forth
	   (2026-08-09) — the base rule's `min-height: var(--rds-case-tab-height)`
	   was never overridden here, so even with padding-bottom removed the
	   open trigger stayed forced to the full closed-tab height (163.7px vs.
	   the label's own 76px) via `align-items: center`, just as symmetric
	   dead space above+below the label instead of asymmetric padding. The
	   negative-margin hack on the stack/caption columns was compensating
	   for that leftover space by reaching backward into it — which then
	   clipped against `.rds-case-studies__scrub-viewport`'s own
	   `overflow-y: hidden`, since that viewport's top edge never moved.
	   Actually shrinking the trigger here removes the dead space at the
	   source, so nothing needs to reach outside its own box. */
	height: auto;
	min-height: 0;
}

/* The "align to title" negative margin (2026-08-09) pulls the stack/
   caption columns up far enough to reach into the vertical space the
   *previous* item's own trigger (z-index: 2) still occupies — without
   this, that trigger's opaque background rendered on top of and covered
   the first ~16px of the now-higher video ("look video being covered by
   tab at the top"). Bumping the open panel above every trigger's z-index
   fixes that without touching the tabs' own stacking (still needed for
   their closed-state peek effect) or shrinking the alignment fix. */
.rds-case-studies__item.is-open .rds-case-studies__panel {
	z-index: 4;
}

.rds-case-studies__panel {
	z-index: 1;
	padding: calc((var(--rds-case-after-count) * var(--rds-case-tab-stride)) + clamp(0.75rem, 1.5vw, 1.25rem)) 0 clamp(1.5rem, 3vw, 2.5rem);
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
	padding-top: 0;
}

/* Author CSS always wins over the browser's own UA-stylesheet
   `[hidden] { display: none }`, regardless of specificity — the
   `display: flex` above would otherwise make a collapsed (hidden) panel
   visible. Explicit guard, higher-specificity than the plain class rule. */
.rds-case-studies__panel[hidden] {
	display: none;
}

.rds-case-studies__scrub-viewport {
	--rds-case-gallery-gutter: clamp(2.5rem, 7vw, 6.25rem);
	width: calc(100% - (2 * var(--rds-case-gallery-gutter)));
	margin-inline: var(--rds-case-gallery-gutter);
	flex: 1;
	min-height: 0;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.rds-case-studies__scrub-viewport::-webkit-scrollbar {
	display: none;
}

.rds-case-studies__scrub-viewport.is-scrub-draggable {
	cursor: grab;
}

.rds-case-studies__scrub-viewport.is-scrub-dragging {
	cursor: grabbing;
	user-select: none;
}

.rds-case-studies__track {
	display: flex;
	gap: clamp(3.25rem, 8vw, 7.5rem);
	width: max-content;
	min-width: 100%;
	padding: clamp(1.75rem, 4vw, 3.75rem) 0 clamp(1rem, 2vw, 1.5rem);
	box-sizing: border-box;
}

.rds-case-studies__media-card {
	position: relative;
	flex: 0 0 clamp(18rem, 43vw, 55rem);
	/* 2026-08-06, "make all the videos in the case studies atleast min width
	   800px" — the clamp above can go narrower than 800px on smaller
	   viewports; min-width overrides that floor specifically, letting the
	   row overflow/scroll further on those screens rather than shrinking
	   the video below 800px. */
	min-width: 800px;
	/* Fixed (not staggered) height (2026-08-06 refactor, "it looks buggy when
	   expanded and scroll thru in the background") — the old nth-child(even)
	   rule made alternating cards up to 42rem tall AND pushed them down by up
	   to 9rem, so an open panel's real height varied wildly by which card
	   happened to be even-indexed and could run far taller than the
	   viewport. That's what made the pin-and-scrub release read as broken:
	   a huge, unpredictably-tall panel dropping back into normal scroll flow
	   right as the next (short, collapsed) accordion row was scrolling up
	   from below, so the two visibly collided. A single fixed height per row
	   — matching the reference's own contained, peek-of-next-card gallery —
	   keeps every accordion item's open height in the same small range
	   regardless of its card count, so the pin release is a small, smooth
	   step instead of a lurch. */
	height: clamp(13.5rem, 26vw, 24rem);
	border-radius: clamp(2rem, 6vw, 6.25rem);
	background: rgba( 164, 184, 220, 0.72 );
	overflow: hidden;
}

.rds-case-studies__media-card img,
.rds-case-studies__media-card video {
	display: block;
	width: 100%;
	height: 100%;
	/* Mirrors the parent's own border-radius (2026-08-09, browser-zoom
	   bleed-through report) — at fractional device-pixel scale factors
	   (e.g. a non-100% browser zoom combined with a Retina/2x display),
	   the parent's `overflow: hidden` clip boundary and this element's
	   painted edge can land a hairline sub-pixel apart, letting whatever
	   sits behind the card show through at the rounded corners. Giving
	   the video/img the same radius closes that seam regardless of the
	   zoom level or DPR it happens at. */
	border-radius: inherit;
	object-fit: cover;
}

/* Editorial mosaic (2026-08-06, "follow this layout for when card open") —
   three columns: text + one image, a stacked pair, and a caption + tall
   image, matching the CARD-OPEN-XERO reference. All three columns target
   the same overall height so the row reads as one aligned block, not three
   independently-sized pieces. */
.rds-case-studies__open-layout {
	display: flex;
	align-items: stretch;
	gap: clamp(1.5rem, 3vw, 3rem);
	width: max-content;
	min-width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0 0 clamp(1rem, 2vw, 1.5rem);
	box-sizing: border-box;
	/* The parent viewport owns native fallback scrolling. Keeping this inner
	   track intrinsically wide gives GSAP a real element to translate instead
	   of moving the clipping window itself. */
	position: relative;
	padding-top: 25px;
}

.rds-case-studies__open-text {
	flex: 0 0 auto;
	max-width: 600px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.5rem);
	min-width: 0;
}

.rds-case-studies__open-body {
	margin: 0;
	color: #ffffff;
	/* Scoped to this section only, not the shared `.body-copy`/`p{}` scale
	   (2026-08-09, "scale down... follow ratio") — measured against the
	   Figma reference: the description read at roughly a 1.7:1 ratio to
	   the "Xero"-style title there, vs. this section inheriting the
	   sitewide 50px `p{}` size (only ~1.4:1 against the 80px title),
	   disproportionately large next to its own heading. */
	font-size: clamp(1rem, 2vw, 1.8rem);
	line-height: 1.3;
}

.rds-case-studies__open-stack {
	/* 2026-08-06, "make all the videos in the case studies atleast min width
	   800px" — the stack's own two videos are each 100% of this column's
	   width, so the column itself needs to be at least 800px wide too, not
	   just the video boxes, or the video would overflow past this narrower
	   column into the next one. */
	flex: 0 0 auto;
	width: max(495px, clamp(14rem, 22vw, 20rem));
	display: flex;
	flex-direction: column;
	gap: clamp(0.5rem, 0.9vw, 0.75rem);
	/* min-width: 0; */
}

.rds-case-studies__open-callout {
    margin: 0;
    color: #ffffff;
    font-size: 28px !important;
    font-family: "Ember Modern Text", sans-serif;
    font-size: clamp(0.9rem, 1.25vw, 1.15rem);
    /* font-weight: 700; */
    line-height: 1.18;
    letter-spacing: 0;
    text-align: left;
}

.rds-case-studies__open-callout--top {
	max-width: 25rem;
}

.rds-case-studies__open-callout--bottom {
	max-width: 26rem;
}

.rds-case-studies__open-caption-col {
	/* Fixed, generous width (not flex:1 auto-filling remaining space) — that
	   auto-fill is exactly what made this row shrink to fit the container
	   instead of overflowing it. max(800px, ...) is the same video-width
	   floor as the other two columns. */
	flex: 0 0 auto;
	width: max(800px, clamp(28rem, 44vw, 46rem));
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.5rem);
	min-width: 0;
}

.rds-case-studies__open-caption {
	margin: 0;
	color: #ffffff;
	text-align: center;
	font-size: clamp(0.95rem, 1.35vw, 1.125rem);
	/* line-height: 1.4; */
	font-size: clamp(1rem, 2vw, 1.8rem);
}

.rds-case-studies__open-media {
	position: relative;
	/* 2026-08-06, "make all the videos in the case studies atleast min width
	   800px" — direct floor on the box itself; the containing columns above
	   are also widened to at least 800px so this never overflows past them. */
	min-width: 800px;
	border-radius: clamp(1rem, 2vw, 1.75rem);
	overflow: hidden;
	background: rgba( 255, 255, 255, 0.16 );
}

/* Fixed aspect-ratio (2026-08-09, "video to follow same ratio for all
   viewport height") instead of stretching to fill whatever vertical space
   was left — that made the same video render at a different width:height
   ratio on every differently-tall viewport. 16/9 matches the stack's own
   source videos' real `videoWidth`/`videoHeight` (1920x1080); a double-wide
   32/9 guess cropped away half of every frame ("its cropped").

   Height-driven, not width-driven (2026-08-09, "scale down... until we're
   able to fully see all content") — `flex: 0 0 auto` sized this from the
   800px `min-width` floor above, and a 16:9 box at that width (450-576px
   tall) didn't fit the column's actual available height once the title
   and description above it took their share, so `.rds-case-studies__panel`
   (`overflow: hidden`) was silently clipping the bottom off every video.
   `flex: 1 1 auto` + `min-width: 0` instead sizes the video FROM the
   remaining column height, with `aspect-ratio` computing width from that —
   guarantees it fits and keeps the fixed ratio, at the cost of it no
   longer always reaching the 800px floor on shorter viewports. */
.rds-case-studies__open-text .rds-case-studies__open-media {
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	width: 100%;
	align-self: stretch;
}

.rds-case-studies__open-stack .rds-case-studies__open-media {
	min-height: 0;
	min-width: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	align-self: flex-start;
}

/* Same fix as the text/stack columns above (2026-08-09, "its cropped") —
   `flex: 1 1 0` with no `aspect-ratio` resolved to whatever ratio the
   flex distribution happened to produce (measured 2.059:1 here) against
   this video's real 1.778:1 (1920x1080) source, so `object-fit: cover`
   was cropping its top/bottom to force-fit the mismatched box. */
.rds-case-studies__open-caption-col .rds-case-studies__open-media {
	flex: 1 1 auto;
	min-height: 0;
	min-width: 0;
	width: auto;
	aspect-ratio: 16 / 9;
	align-self: flex-start;
}

.rds-case-studies__open-media img,
.rds-case-studies__open-media video {
	display: block;
	width: 100%;
	height: 100%;
	/* Same seam-closing fix as `.media-card`'s img/video above. */
	border-radius: inherit;
	object-fit: cover;
}

.rds-case-studies__item--stacked-videos .rds-case-studies__open-text {
	width: max(32rem, clamp(28rem, 31vw, 40rem));
	max-width: none;
}

.rds-case-studies__item--stacked-videos .rds-case-studies__open-stack--paired {
	width: max(27rem, clamp(24rem, 24vw, 34rem));
	justify-content: center;
}

.rds-case-studies__item--stacked-videos .rds-case-studies__open-caption-col {
	width: max(42rem, clamp(36rem, 43vw, 52rem));
}

.rds-case-studies__item--stacked-videos .rds-case-studies__open-media {
	min-width: 0;
}

.rds-case-studies__item--shrm .rds-case-studies__open-stack {
	height: 100%;
}

.rds-case-studies__item--shrm .rds-case-studies__open-stack .rds-case-studies__open-media {
	flex: 1 1 auto;
	aspect-ratio: auto;
}

@media ( max-width: 900px ) {
	.rds-case-studies__open-layout {
		align-items: stretch;
		gap: 1rem;
	}

	.rds-case-studies__open-text,
	.rds-case-studies__open-stack,
	.rds-case-studies__open-caption-col {
		flex: 0 0 calc(100vw - 5rem);
		width: calc(100vw - 5rem);
		min-width: 0;
	}

	.rds-case-studies__open-media,
	.rds-case-studies__open-text .rds-case-studies__open-media,
	.rds-case-studies__open-stack .rds-case-studies__open-media,
	.rds-case-studies__open-caption-col .rds-case-studies__open-media {
		min-width: 0;
	}
}

.rds-case-studies__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(2.375rem, 5vw, 4.5rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba( 89, 117, 171, 0.34 );
	transform: translate(-50%, -50%);
}

.rds-case-studies__play::after {
	content: "";
	position: absolute;
	left: 54%;
	top: 50%;
	width: 38%;
	aspect-ratio: 0.86;
	background: rgba( 89, 117, 171, 0.45 );
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transform: translate(-50%, -50%);
}

@media ( max-width: 700px ) {
	.rds-case-studies__accordion {
		--rds-case-tab-height: 6.75rem;
	}

	/* No override here anymore (2026-08-06, "white holes on left") — this
	   used to hardcode -1rem, well short of the corner radius at this
	   width (~2.625rem), reproducing the same white-gap bug this breakpoint
	   was never actually free of. The base rule's own clamp now already
	   matches the radius at every width, this one included, so it applies
	   unchanged. */

	.rds-case-studies__trigger {
		padding-inline: 3rem;
		font-size: 2rem;
	}

	.rds-case-studies__plus {
		width: 3rem;
	}

	.rds-case-studies__panel {
		padding-bottom: 1.5rem;
	}

	.rds-case-studies__track {
		gap: 3.25rem;
		padding: 1.75rem 0 1rem;
	}

	.rds-case-studies__media-card {
		flex-basis: 11.75rem;
		height: 7.25rem;
		border-radius: 1.75rem;
	}

	.rds-case-studies__media-card:nth-child(even) {
		flex-basis: 20rem;
		height: 15.875rem;
		margin-top: 0;
	}
}