/* Self-hosted, licensed brand font — replaces the Google-Fonts-loaded Inter
   as the default body typeface. Paths are relative to this file
   (assets/css/base.css -> assets/fonts/...). */
@font-face {
	font-family: "Ember Modern Display";
	src: url("../fonts/EmberModernDisplay-V1.1/EmberModernDisplayV1.1-Regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Ember Modern Display";
	src: url("../fonts/EmberModernDisplay-V1.1/EmberModernDisplayV1.1-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Ember Modern Display";
	src: url("../fonts/EmberModernDisplay-V1.1/EmberModernDisplayV1.1-Italic.otf") format("opentype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Ember Modern Display";
	src: url("../fonts/EmberModernDisplay-V1.1/EmberModernDisplayV1.1-BoldItalic.otf") format("opentype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Ember Modern Text";
	src: url("../fonts/EmberModernText-V1.1/EmberModernTextV1.1-Regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Ember Modern Text";
	src: url("../fonts/EmberModernText-V1.1/EmberModernTextV1.1-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Ember Modern Text";
	src: url("../fonts/EmberModernText-V1.1/EmberModernTextV1.1-Italic.otf") format("opentype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Ember Modern Text";
	src: url("../fonts/EmberModernText-V1.1/EmberModernTextV1.1-BoldItalic.otf") format("opentype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

body {
	margin: 0;
	font-family: "Ember Modern Display", sans-serif;
	    overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
	max-width: 100%;
}

/* Lenis's own official recommended CSS (2026-08-07, "ensure scoll
   experience is smooth for safari") — this page was only protected from
   native `scroll-behavior: smooth` fighting Lenis's JS-driven scroll by an
   unrelated `html.lenis { scroll-behavior: unset !important; }` rule
   leaking in from this SITE's own Customizer "Additional CSS" (a
   completely different Lenis instance's own defensive rule, confirmed via
   direct inspection — WordPress prints Customizer CSS as a raw inline
   `<style>` tag outside the enqueue system, so this plugin's own
   `wp_dequeue_style` calls on the blank-canvas template can't remove it).
   That's not something this plugin controls or can rely on staying in
   place, so its own copy of Lenis's real recommended snippet lives here
   instead — verified this plugin's own Lenis instance does add the
   `lenis`/`lenis-smooth`/`lenis-scrolling` classes these target (default
   Lenis behavior, confirmed via `document.documentElement.className`
   during a live scroll). Safari has decent native smooth-scroll support,
   which is exactly what fights Lenis's own easing if left unchecked. */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}


/* Shared statement-heading style for every block's <h2> (2026-08-06,
   "style to h2. or use same class styling" — consolidating what was
   previously the same font-size/line-height/letter-spacing/weight/color
   repeated in each block's own style.css). Block-specific layout —
   width/max-width, margin, text-align — stays in each block's own rule,
   which wins the cascade on its own higher-specificity class selector. */
h2 {
	margin: 0;
	color: #ffffff;
	font-weight: 700;
	/* Exact spec: 64px/700/76px line-height (118.75%)/-1.28px letter-spacing.
	   line-height/letter-spacing are relative (unitless/em) so they scale
	   proportionally with font-size — ratios match spec exactly: 76/64
	   line-height, -1.28/64 = -0.02em letter-spacing. vw factor set so the
	   full 64px cap is already reached by 1440px (holds flat through both
	   primary desktop targets), not just at very wide viewports. */
	font-size: clamp(1.75rem, 4.5vw, 4rem);
	line-height: 1.1875;
	/* letter-spacing: -0.02em; */
}

/* Shared body-copy style for every block's <p> (2026-08-06, Figma dev-mode
   spec: color #FFF / Ember Modern Text / 50px / 400 / 57.5px line-height
   (115%)). Block-specific layout — width, margin, text-align — stays in
   each block's own rule, which wins the cascade on its own higher-
   specificity class selector. */
p {
	margin: 0;
	color: #ffffff;
	font-family: "Ember Modern Text", sans-serif;
	font-weight: 400;
	font-size: 3.125rem;
	line-height: 1.15;
}

/* Shared sizing for every element tagged `.body-copy` across every block
   (2026-08-09) — font-size/font-weight/line-height only, matching Journey
   Cards' own keynote text ("You'll attend an immersive Keynote...") which
   has no bespoke override of its own and so renders at this sitewide
   `p {}` scale. Color, font-family, letter-spacing, and margin stay
   whatever each block already sets; only these three properties unify. */
.body-copy {
	font-size: 3.125rem;
	font-weight: 400;
	line-height: 1.15;
}

/* Shared utility classes for two more Figma typography roles (2026-08-06,
   "use global styling") that don't map to a single HTML tag the way h2/p
   do — both "Section Headers" and "Sub headers" can land on a <p>, so they
   need their own class rather than an element selector. Block-specific
   layout stays in each block's own rule, same convention as h2/p above. */
.rds-section-header {
	margin: 0;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	/* Figma spec is 120px, but at that size in a ~615px-wide card (the
	   overlay's own overlay-copy max-width) the title wraps to 4-5 lines and
	   overflows the card (2026-08-06, "scale it down reasonably for easy
	   readability" — direct feedback after seeing it rendered). Capped at
	   3.5rem/56px instead — still reads as a bold statement title, fits
	   within 2-3 lines. */
	font-size: clamp(1.75rem, 3.5vw, 3.5rem);
	line-height: 1;
}

.rds-sub-header {
	margin: 0;
	color: #ffffff;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 400;
	/* Exact spec: 80px/400/100px line-height (125%). */
	font-size: clamp(2rem, 5.5vw, 5rem);
	line-height: 1.25;
}

/* Shared sizing for every element tagged `.sub-header` across every block
   (2026-08-09) — font-size/font-weight/line-height only, matching
   Connective Tissue Zones' own heading ("You'll pass through connective
   tissue zones...") which already carries `.rds-sub-header` above and has
   no bespoke override of its own. Color, font-family, letter-spacing, and
   margin stay whatever each block already sets; only these three
   properties unify. */
.sub-header {
	font-size: clamp(2rem, 5.5vw, 4rem);
	font-weight: 400;
	line-height: 1.25;
}

/* Shared artwork for every interactive horizontal-scroll control. */
.rds-horizontal-scroll-arrow-icon {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	pointer-events: none;
}

/* Shared white-panel "big statement" heading (2026-08-06, "folow same
   styling. we need to be consistent going forward") — Past/Future
   Transition's own clamp(2.75rem,7.8vw,8rem)/1.0703125/-0.04em scale,
   originally a one-off reused informally by Case Studies Cards ("match
   font of the above"). Pulled into a real shared class here so every future
   white-panel statement heading (What's Next Intro included) references
   this instead of re-copying the same three declarations again. Default
   color is dark (#111419) since every current usage sits on a white
   background — a future usage on a dark background overrides `color` on
   its own higher-specificity block class same as h2/p above.

   `margin-top: 200px` used to live here too (2026-08-09, "CUT SOME IN
   BETWEEN SPACE") — it only ever made sense for Case Studies' own
   top-anchored layout (pushing the heading down from the section's top
   edge); Past/Future Transition, What's Next Intro, and Big Insight's
   closing text all vertically center this heading with flexbox, so the
   same 200px just ate into their own centering and stretched the gap
   between sections. Moved into Case Studies' own rule instead. */
.rds-big-statement {
	margin: 0;
	color: #111419;
	font-family: "Ember Modern Display", sans-serif;
	font-weight: 700;
	font-size: clamp(2.75rem, 7.8vw, 8rem);
	line-height: 1.0703125;
	/* letter-spacing: -0.04em; */
}

/* Shared sizing for every element tagged `.big-statement` across every
   block (2026-08-09) — font-size/font-weight/line-height only, matching
   Closing Statement's own heading ("All big events are consumer events").
   Distinct from `.rds-big-statement` above (different scale/color, an
   older white-panel-only class) — this one is for the new cross-block
   marker-class set (`.section-header`/`.sub-header`/`.body-copy`). Color,
   font-family, letter-spacing, and margin stay whatever each block sets. */
.big-statement {
	font-size: clamp(3rem, 10vw, 10rem);
	font-weight: 700;
	line-height: 0.9em;
}

/* Shared sizing for every element tagged `.standard-statement` across
   every block (2026-08-09) — font-size/font-weight/line-height only,
   matching Big Insight Narrative's own closing text ("Before we talk about
   specifics … let's talk about a big insight"), which already carries
   `.rds-big-statement` above and has no bespoke override of its own. */
.standard-statement {
	font-size: clamp(2.75rem, 7.8vw, 8rem);
	font-weight: 700;
	line-height: 1.0703125;
}

/* Shared sizing for every element tagged `.section-header` across every
   block (2026-08-09) — font-size/line-height only, matching Journey Cards'
   own heading ("You are about to embark...") which has no bespoke override
   of its own and so renders at this sitewide `h2 {}` scale. Placed after
   `.rds-big-statement` above so it wins the same-specificity tie on any
   element carrying both classes (Case Studies/What's Next/Past-Future
   headings) — color, font-family, font-weight, letter-spacing, and margin
   stay whatever each block already sets; only size and line-height unify. */
.section-header {
	font-size: clamp(1.75rem, 6.6vw, 5rem);
	line-height: 1.1875;
}

section.frames.rds-international,
section.frames.rds-sustainability,
section.frames.rds-sustainability-detail,
section.frames.rds-testimonials,
section.frames.rds-big-ideas {
	display: none;
}

/* Shared baseline for every frame section (Nav excluded — it's a <nav>, not
   a scene). Per-block styles that need to cover Nav (z-index:1000) still set
   their own higher z-index (e.g. Journey Cards/Immersive Keynote/Last Mile
   Land at 1200) and win the cascade since this rule loads first. */
.frames {
	position: relative;
	z-index: 2;
}

/* Shared card-grid convention (design.md Decision 12) for any block
   presenting a row/grid of N image-or-text cards — column count, gap, and
   item aspect ratio are all CSS custom properties set per block instance
   (inline `style` from a block attribute, or the block's own `style.css`),
   never hardcoded here. A per-item `--rds-card-grid-item-ratio` override is
   available for a grid whose items aren't all the same ratio.
   Intended for new blocks (Shared-Wins Trophy Grid, Case Studies Stacked
   Cards — tasks.md 4.3.8/4.3.10) to build on; Journey Cards' existing grid
   is its own pixel-verified, asymmetric masonry pattern and is intentionally
   left as-is rather than retrofitted onto this generic convention. */
.rds-card-grid {
	display: grid;
	grid-template-columns: repeat(var(--rds-card-grid-columns, 3), 1fr);
	gap: var(--rds-card-grid-gap, clamp(0.75rem, 1.5vw, 1.25rem));
}

.rds-card-grid__item {
	display: block;
	width: 100%;
	aspect-ratio: var(--rds-card-grid-item-ratio, var(--rds-card-grid-ratio, 1 / 1));
	border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
	overflow: hidden;
	position: relative;
}

.rds-card-grid__item--placeholder {
	background: #acacac;
}

.rds-card-grid__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* "Skip"/"Unmute" buttons for `scroll-hold-until-played.js`-tagged videos
   (2026-08-15, "when you hover over the video, can we add a button at
   bottom right that says 'skip'... blue background button... apear as
   users move arroung on video. then fades out when stop for half a
   second" → same day, "can we add an umute feature?"). Lives here (not a
   per-block stylesheet) since the JS creates these buttons generically for
   any current or future `data-scroll-hold-until-played` video — shared
   component, shared CSS, same reasoning as `.rds-card-grid`/`.rds-big-
   statement` above. Positioned absolute against the video's own parent
   element, which the JS assumes is already `position: relative` (true for
   the one current caller, VisID's `.rds-visid__video-row`). Same base pill
   shape/hover-reveal for both; Unmute sits to Skip's left so neither
   overlaps. */
.rds-scroll-hold-skip,
.rds-scroll-hold-unmute {
	position: absolute;
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 20;
	border: 0;
	border-radius: 999px;
	padding: 0.75rem 1.75rem;
	background: #0578ff;
	color: #ffffff;
	font-family: "Ember Modern Text", sans-serif;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.rds-scroll-hold-skip {
	right: clamp(1rem, 3vw, 2rem);
}

.rds-scroll-hold-unmute {
	right: calc(clamp(1rem, 3vw, 2rem) + 6rem);
}

.rds-scroll-hold-skip.is-visible,
.rds-scroll-hold-unmute.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.rds-scroll-hold-skip:hover,
.rds-scroll-hold-skip:focus-visible,
.rds-scroll-hold-unmute:hover,
.rds-scroll-hold-unmute:focus-visible {
	background: #2a8dff;
}

.rds-scroll-hold-skip:focus-visible,
.rds-scroll-hold-unmute:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* Blinking typewriter cursor, shared by every `[data-typewriter]` caller
   of `assets/js/reveals/typewriter-reveal.js` (2026-08-16, "can we text
   typing animation"; "while is waiting to write, show a blinking cursor in
   starting position"; "add same typing animation here" — moved here from
   Presenter Interruption's own style.css once DSP + ADX Summary became a
   second caller, so it's defined once instead of duplicated per block).
   A plain CSS `::after` blink, no JS cost beyond the two classes
   `typewriter-reveal.js` already toggles. Shown both during the pre-type
   wait (`is-typewriter-pending` — the element is still empty at this
   point, so the cursor naturally sits at the very start with nothing
   before it) and while actively typing (`is-typewriter-active`, tracking
   the end of the text as it's revealed); removed once finished (both
   classes gone), so it doesn't keep blinking forever after the text is
   complete. */
[data-typewriter].is-typewriter-pending::after,
[data-typewriter].is-typewriter-active::after {
	content: "";
	display: inline-block;
	width: 0.09em;
	height: 0.85em;
	margin-left: 0.05em;
	background: currentColor;
	vertical-align: -0.1em;
	animation: rds-typewriter-blink 0.8s step-end infinite;
}

@keyframes rds-typewriter-blink {
	50% {
		opacity: 0;
	}
}