/**
 * Motion V2 — Layer A/C styling for the from-scratch rebuild page.
 *
 * Self-contained: shares nothing with style.css or the Bricks home page, so
 * the two systems cannot affect each other. Direction per CLAUDE.md — Ruler
 * (65%) + Creator (35%): deep charcoal, gold accent, Swiss grid, large
 * negative space, restrained luxury.
 */

.motion-v2 {
	overflow-x: hidden;
	--ink: #0d0b09;
	--ink-plate: #17120d;
	--chapter-ground: #23110a;
	--bone: #f4efe7;
	--bone-dim: rgba(244, 239, 231, 0.62);
	--gold: #e3b778;
	/* The brand gold as it is set in Bricks (--bricks-color-cyxgxc). Used
	 * wherever this page reproduces approved design, so the two cannot drift. */
	--gold-brand: #f7c587;
	--rule: rgba(244, 239, 231, 0.22);
	/* The unselected stat label. Alpha is set by contrast, not by taste: these
	 * labels sit over the chapter photograph held as a blurred field, and at
	 * 0.42 they measured 2.86:1 against the brightest point of that field —
	 * under the 3:1 AA floor for 24px text. 0.55 measures 3.78:1 there and
	 * still reads clearly quieter than the gold selected state (6.03:1). */
	--chapter-stat-dim: rgba(244, 239, 231, 0.55);
	--chapter-stat-overlay: rgba(13, 11, 9, 0.56);

	/* SFU Futura is the brand text face and carries the Vietnamese diacritics;
	 * it is self-hosted from uploads (@font-face is printed from
	 * inc/motion-v2-enqueue-assets.php so the URL stays site-relative).
	 * Montserrat stays behind it as the fallback. */
	--font-sans: 'SFU Futura', 'Montserrat', system-ui, -apple-system, sans-serif;
	--font-script: "Bickham Script Pro 3", 'Great Vibes', cursive;

	--gutter: clamp(1.5rem, 5vw, 6rem);
	/* Shared page container, measured from the approved navbar. Any section
	 * that must align with the masthead uses this exact outer width and inset. */
	--layout-container-width: 1370px;
	--layout-container-inset: 16px;
	--header-height: 70px;
	--stage-h: var(--motion-vh, 100dvh);
	--chapter-stage-center: calc(
		var(--header-height) + (var(--stage-h) - var(--header-height)) / 2
	);
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

	margin: 0;
	background: var(--ink);
	color: var(--bone);
	font-family: var(--font-sans);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;

	/* The deck owns vertical input; never hand a bounce to the compositor. */
	overscroll-behavior-y: none;

	/* Load-bearing for the chapter portal, not a micro-optimisation. The portal
	 * takes a title slide out of flow mid-transition and relies on scrollY
	 * meaning exactly what it says afterwards; Chrome's scroll anchoring would
	 * compensate for the removed viewport and shift scrollY by a whole screen.
	 * See the header of motion-v2-chapter-portal.js. */
	overflow-anchor: none;
}

html.motion-v2-root.motion-v2-vh-locked,
html.motion-v2-root.motion-v2-vh-locked body.motion-v2 {
	background: #23110a;
	min-height: 100dvh;
}

/* URL-bar hide grows 100dvh; --motion-vh stays at first paint. The leftover
 * band is brown so adjacent slides do not peek into the extra visual space.
 * This is paint only — it does not re-run portal or deck height math. */
html.motion-v2-root.motion-v2-vh-locked body.motion-v2::after {
	content: '';
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	height: max(0px, calc(100dvh - var(--motion-vh, 100dvh)));
	background: #23110a;
	pointer-events: none;
}

html.motion-v2-root.motion-v2-vh-locked.is-chapter-reading body.motion-v2::after {
	content: none;
}

.motion-v2 *,
.motion-v2 *::before,
.motion-v2 *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Preloader + octagon portal
 * ---------------------------------------------------------------------------
 * Near-black plate with the shimmering mark, held until the page is ready,
 * then an octagon opens from the centre and the hero behind is revealed
 * through it. The shimmer is a SMIL gradient sweep baked into logo.svg, so it
 * runs from first paint with no JS involved; motion-v2-preloader.js owns only
 * the portal and the teardown.
 */

/* Reserve the scrollbar gutter permanently. The title deck moves between
 * discrete cards rather than representing continuous reading progress, so its
 * native thumb is misleading and exposes atomic document relocations. Once the
 * deck is confirmed live, title mode makes the native track and thumb
 * transparent; chapter reading restores their platform paint. The stable
 * gutter prevents either state from shifting layout. */
.motion-v2-root {
	scrollbar-gutter: stable;
}

.motion-v2-root.is-deck-ready:not(.is-chapter-reading) {
	scrollbar-color: transparent transparent;
}

.motion-v2-root.is-deck-ready:not(.is-chapter-reading)::-webkit-scrollbar-track,
.motion-v2-root.is-deck-ready:not(.is-chapter-reading)::-webkit-scrollbar-thumb {
	background: transparent;
}

.motion-v2.is-preloading {
	overflow: hidden;
}

/* The mask definitions carry no visual of their own and must not take layout. */
.motion-v2 .preloader-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.motion-v2 .preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #121212;
}

/* The mask is attached by JS, only once its field has been sized to the
 * viewport. Applied from markup it would leave most of the plate transparent
 * until the first frame of script ran. */
.motion-v2 .preloader.is-portal {
	-webkit-mask-image: url(#motionV2Portal);
	mask-image: url(#motionV2Portal);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

html.motion-v2-cheap-compositor .motion-v2 .preloader.is-portal {
	-webkit-mask-image: none;
	mask-image: none;
}

.motion-v2 .preloader__logo {
	width: 300px;
	max-width: 60vw;
	aspect-ratio: 1;
	object-fit: contain;
	/* Asymmetric padding is carried over from the approved design: it lifts the
	 * mark off dead centre so it sits on the optical centre of the plate. */
	padding: 78px 0 40px 21px;
}

/* Fallback exit only. On the portal path the plate is already fully masked
 * away by the time it is removed, so nothing cross-fades and nothing pops. */
.motion-v2 .preloader.is-done {
	opacity: 0;
	pointer-events: none;
	transition: opacity 400ms var(--ease-out-quint);
}

@media (prefers-reduced-motion: reduce) {
	.motion-v2 .preloader.is-done {
		transition-duration: 1ms;
	}
}

/* ---------------------------------------------------------------------------
 * Site header — structural port of the approved Bricks header
 * ---------------------------------------------------------------------------
 * Values measured off the rendered #brx-header at 1600px, not eyeballed:
 * 70px bar, 1370px measure, 16px inset, translucent white over a 5px blur.
 *
 * z-index sits above the deck but far below the preloader, so the plate still
 * covers the header until the portal has finished opening.
 */

.motion-v2 .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

.motion-v2 .site-header__bar {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-bottom: 1px solid rgba(248, 227, 201, 0.25);
	/* Walked to 0 and back by .is-motion-v2-rail-priming below, so the rail
	 * transition's unavoidable backdrop-filter dropout (see the view-transition
	 * rules further down) reads as a deliberate fade rather than a hard cut.
	 * 400ms rather than something snappier because 5px of blur resolving over
	 * a shorter window read as an instant cut, not an ease, in practice. */
	transition: backdrop-filter 400ms var(--ease-out-quart), -webkit-backdrop-filter 400ms var(--ease-out-quart);
}

html.motion-v2-cheap-compositor .motion-v2 .site-header__bar,
html.motion-v2-cheap-compositor .motion-v2.is-preloading .site-header__bar,
html.motion-v2-cheap-compositor .motion-v2.is-motion-v2-intro-blur .site-header__bar {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: rgba(13, 11, 9, 0.88);
}

/* Primed by goToFromRail() in motion-v2-deck.js *before* .is-motion-v2-rail-transition
 * is added, so the blur has already eased to 0 by the time view-transition-name
 * isolates the header's stacking context and cuts backdrop-filter off from the
 * live page. Removed one frame after the transition's isolation lifts, so the
 * blur eases back in against a backdrop that can actually be sampled again. */
html.is-motion-v2-rail-priming .motion-v2 .site-header__bar {
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
}

/* The preloader-exit reveal is a second, separate place backdrop-filter needs
 * to ease rather than snap: .site-header__bar has no [data-intro] of its own
 * (only the outer .site-header does, see markup), so without this the glass
 * sat at a constant blur(5px) underneath the header's opacity/transform fade
 * — the panel materialised already fully blurred instead of blurring in. */
.motion-v2.is-preloading .site-header__bar {
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
}

/* Added by unlock() in motion-v2-preloader.js the instant .is-preloading is
 * removed, and removed once the header's own reveal has finished. Its own
 * duration/delay (800ms, matching .site-header[data-intro]'s 800ms fade, and
 * var(--intro-delay), inherited from that same ancestor) intentionally
 * outranks the rail-transition's 400ms/no-delay rule above via specificity —
 * the two never overlap in time, so there is no conflict, only two different
 * paces for two different moments. */
.motion-v2.is-motion-v2-intro-blur .site-header__bar {
	transition:
		backdrop-filter 800ms var(--ease-out-quint) var(--intro-delay),
		-webkit-backdrop-filter 800ms var(--ease-out-quint) var(--intro-delay);
}

/* Three columns rather than the source's three flex blocks: `1fr auto 1fr`
 * pins the mark to the true centre of the viewport regardless of how wide
 * MENU and the CTA turn out to be. The Bricks original only lands centred
 * because its two outer blocks happen to balance. */
.motion-v2 .site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	width: var(--layout-container-width);
	max-width: 100%;
	height: 70px;
	margin-inline: auto;
	padding-inline: var(--layout-container-inset);
}

.motion-v2 .site-header__menu {
	justify-self: start;
}

.motion-v2 .site-header__menu,
.motion-v2 .site-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 400;
	color: var(--gold-brand);
	text-decoration: none;
}

.motion-v2 .site-header__menu::before,
.motion-v2 .site-header__cta::before {
	content: '';
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.motion-v2 .site-header__logo {
	display: block;
	justify-self: center;
	line-height: 0;
}

.motion-v2 .site-header__logo img {
	display: block;
	width: 140px;
	height: 70px;
}

.motion-v2 .site-header__actions {
	justify-self: end;
}

.motion-v2 .site-header__cta {
	letter-spacing: 0.5px;
}

/* The approved header drops the CTA below 991px — the mark and MENU carry the
 * bar on small screens. */
@media (max-width: 991px) {
	.motion-v2 .site-header__actions {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Slides
 * ---------------------------------------------------------------------------
 * Every slide is a real 100dvh block in normal document flow. No pinning, no
 * negative margins, no pin-spacers — see the header of motion-v2-deck.js for
 * why that is a hard constraint rather than a preference.
 */

.motion-v2 .deck {
	position: relative;
}

.motion-v2 .slide {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--stage-h);
	height: var(--stage-h);
	padding: var(--gutter);
	overflow: hidden;
	isolation: isolate;
}

/* Backdrop plate. Separate element so the image can be treated (darkened,
 * desaturated) without touching the content above it. */
.motion-v2 .slide__plate {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--slide-image);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.motion-v2 .slide__plate::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(13, 11, 9, 0.55) 0%,
		rgba(13, 11, 9, 0.72) 55%,
		rgba(13, 11, 9, 0.92) 100%
	);
}

/* ---------------------------------------------------------------------------
 * Hero — structural port of the approved Bricks home page hero
 * ---------------------------------------------------------------------------
 * Desktop values are the design contract and are reproduced exactly (see the
 * id-by-id mapping in journal entry 260728-1526-025). Below 991px the four
 * Bricks breakpoints are consolidated into two, because desktop is the
 * priority surface and the mobile interaction model is a separate scope.
 *
 * Entrance motion is intentionally not wired here — this pass is structure.
 */

/* The hero carries its own bottom scrim, so it must not also take the generic
 * chapter darkening or the photograph reads muddy. */
.motion-v2 .slide--hero {
	padding: 0;
	align-items: stretch;
}

.motion-v2 .slide--hero .slide__plate::after {
	content: none;
}

/* Optional ACF hero video: covers the plate; the CSS background image stays
 * underneath as poster/fallback until the first frame paints. */
.motion-v2 .hero__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.motion-v2 .hero__video {
		display: none;
	}
}

/* Bottom scrim: transparent at 40dvh up from the base, solid warm black at the
 * floor, so the content row always sits on a readable field. */
.motion-v2 .hero__scrim {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 40dvh;
	background-image: linear-gradient(transparent 0%, rgba(35, 17, 10, 0.85) 50%);
}

/* Gold frame: full-bleed crosshair + the orbiting octagon outline. */
.motion-v2 .hero__frame {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

/* The rules must terminate on the screen edges and track any resize, so the
 * SVG fills the hero box exactly and its viewBox is stretched to match
 * (preserveAspectRatio="none" in the markup). The old scaleX(1.14) is gone
 * deliberately: it pushed the lit ends of the horizontal rule past the
 * viewport, which is why only two stubs were visible near the edges. */
.motion-v2 .hero__crosshair {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Fade the octagon out across the lower third, where the headline and the lede
 * sit, so the outline never crosses type. The shape is untouched — this is a
 * mask on its opacity, not a change of geometry. Stops are fractions of the
 * hero's height: solid to 48%, gone by 80%. */
.motion-v2 .hero__orbit-wrap {
	position: absolute;
	inset: 0;
	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 48%,
		rgba(0, 0, 0, 0.35) 66%,
		rgba(0, 0, 0, 0) 80%
	);
	mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 48%,
		rgba(0, 0, 0, 0.35) 66%,
		rgba(0, 0, 0, 0) 80%
	);
}

.motion-v2 .hero__orbit {
	width: 100%;
	height: 100%;
	transform: scale(1.5);
}

/* Always-drawn outline. Faint enough to read as architecture under the
 * photograph rather than as decoration, and it is what remains when motion is
 * suppressed. */
.motion-v2 .hero__orbit-base {
	fill: none;
	stroke: rgba(249, 197, 135, 0.16);
	stroke-width: 1.5;
	stroke-linejoin: round;
}

/* The travelling highlight. Rounded joins matter here: the octagon's eight
 * hard vertices are exactly where a moving highlight betrays itself. */
.motion-v2 .hero__orbit-glint {
	fill: none;
	stroke: url(#heroOrbitGlint);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* Content row: two bottom-aligned columns, 70 / 30. */
.motion-v2 .hero__inner {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	width: 100%;
	max-width: 1920px;
	height: 100%;
	margin-inline: auto;
	padding-inline: 16px;
}

.motion-v2 .hero__headings {
	display: flex;
	flex-direction: column;
	width: 70%;
}

.motion-v2 .hero__title {
	width: 100%;
	max-width: 860px;
	margin: 0;
	padding-bottom: 88px;
	font-family: var(--font-script);
	font-size: 146px;
	font-weight: 400;
	line-height: 1;
	color: var(--gold-brand);
}

.motion-v2 .hero__title-line {
	display: block;
}

/* Second line is flushed right against the same 1000px measure, so the two
 * lines bracket the empty middle instead of stacking flush-left. */
.motion-v2 .hero__title-line--end {
	text-align: right;
}

.motion-v2 .hero__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 30%;
}

.motion-v2 .hero__aside-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 100%;
	max-width: 310px;
	padding-bottom: 120px;
	row-gap: 26px;
}

.motion-v2 .hero__location {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	column-gap: 16px;
	margin: 0;
	padding-right: 24px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
}

.motion-v2 .hero__location svg {
	flex: none;
	width: 20px;
	height: 20px;
}

.motion-v2 .hero__lede {
	margin: 0;
	padding-right: 16px;
	font-size: 18px;
	line-height: 1.5;
	text-align: right;
	color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 991px) {
	.motion-v2 .hero__scrim {
		height: 60dvh;
	}

	.motion-v2 .hero__crosshair,
	.motion-v2 .hero__orbit-wrap {
		display: none;
	}

	.motion-v2 .hero__inner {
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-end;
	}

	.motion-v2 .hero__headings,
	.motion-v2 .hero__aside {
		width: 100%;
	}

	.motion-v2 .hero__aside {
		align-items: flex-start;
	}

	.motion-v2 .hero__title {
		max-width: 480px;
		padding-bottom: 24px;
		font-size: 72px;
	}

	.motion-v2 .hero__aside-inner {
		align-items: flex-start;
		max-width: 320px;
		row-gap: 8px;
	}

	.motion-v2 .hero__location {
		justify-content: flex-start;
		padding-right: 0;
	}
}

@media (max-width: 1930px) {
	.motion-v2 .hero__title {
		font-size: 96px;
		max-width: 640px;
	}
}

@media (max-width: 767px) {
	.motion-v2 .hero__title {
		font-size: 56px;
	}
}

@media (max-width: 478px) {
	.motion-v2 .hero__inner {
		padding-bottom: 80px;
	}

	.motion-v2 .hero__title {
		padding-bottom: 14px;
		font-size: 44px;
	}

	.motion-v2 .hero__aside-inner {
		max-width: 100%;
		padding-bottom: 0;
	}

	.motion-v2 .hero__lede {
		padding-right: 0;
		text-align: left;
	}
}

/* ---------------------------------------------------------------------------
 * Hero intro — the foreground enters once the portal has fully opened
 * ---------------------------------------------------------------------------
 * Division of labour: the portal reveals the *scene* — photograph, scrim,
 * crosshair, octagon. Those never animate in, because the reveal itself was
 * their entrance; animating them again would be the same content arriving
 * twice. What enters afterwards is only the foreground the octagon uncovered:
 * navbar, the two headline lines, location, lede.
 *
 * Trigger: the pre-state is scoped to `.is-preloading`, the body class the
 * preloader removes in teardown — i.e. the frame after the octagon has grown
 * past the viewport corners. Removing it simply lets each element's own
 * transition run. No second script, no animation class to keep in sync with
 * the portal's duration; the handoff that already exists *is* the cue, so the
 * two can never drift apart.
 *
 * `--intro-delay` is the only per-element knob. Order reads top-left to
 * bottom-right — masthead, then the headline's two lines in reading order,
 * then the aside — so the eye is led rather than shown everything at once.
 */

.motion-v2 [data-intro] {
	--intro-delay: 0ms;

	transition:
		opacity 800ms var(--ease-out-quint) var(--intro-delay),
		transform 800ms var(--ease-out-quint) var(--intro-delay);
}

/* Pre-state. Only ever applied while the plate is still covering the page, so
 * a visitor never sees these values — and if the script never runs, the
 * failsafe in motion-v2-preloader.js still clears the class, so content can
 * never be stranded invisible. */
.motion-v2.is-preloading [data-intro] {
	opacity: 0;
	transform: translateY(28px);
}

/* The masthead is above the fold's content, so it descends into place while
 * everything below rises — the two meet around the headline. */
.motion-v2.is-preloading .site-header[data-intro] {
	transform: translateY(-16px);
}

.motion-v2 .site-header[data-intro] {
	--intro-delay: 100ms;
}

.motion-v2 .hero__title-line[data-intro] {
	--intro-delay: 240ms;
}

.motion-v2 .hero__title-line--end[data-intro] {
	--intro-delay: 400ms;
}

.motion-v2 .hero__location[data-intro] {
	--intro-delay: 540ms;
}

.motion-v2 .hero__lede[data-intro] {
	--intro-delay: 620ms;
}

/* The orbit is driven by SMIL, which CSS cannot pause. Reduced motion drops
 * the glint entirely and keeps the static outline, so the composition is
 * unchanged — only the movement goes. */
@media (prefers-reduced-motion: reduce) {
	.motion-v2 .hero__orbit-glint {
		display: none;
	}

	/* On this path the preloader plain-fades instead of opening the portal, so
	 * the foreground is simply already there. */
	.motion-v2 [data-intro] {
		transition: none;
	}

	.motion-v2.is-preloading [data-intro] {
		opacity: 1;
		transform: none;
	}

	/* Matches the [data-intro] pre-state above: the glass panel is simply
	 * already there, at full strength, rather than blurring in. */
	.motion-v2.is-preloading .site-header__bar,
	.motion-v2.is-motion-v2-intro-blur .site-header__bar {
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Chapter title slides — structural port of the approved `.eve-section-title`
 * ---------------------------------------------------------------------------
 * Desktop values are the design contract and are byte-exact against the Bricks
 * original (id-by-id map in journal entry 260728-1526-034). Below 991px the
 * four Bricks breakpoints are consolidated to two, for the same reason as the
 * hero: desktop is the priority surface, mobile is a separate scope.
 *
 * Nothing on this slide is a flow child. The plate spans it; the octagon,
 * crosshair rules, and content block share the same below-header stage center.
 * A single flex line still cannot place them because the SVG and text each own
 * independent horizontal geometry.
 */

.motion-v2 .slide--chapter {
	padding: 0;
}

/* Chapter title slides carry no photograph in the approved design: brown ground
 * with the grain plate blended over it. `lighten` is what makes the speckle
 * read — the noise PNG is near-black elsewhere, so only the grains survive the
 * blend. */
.motion-v2 .slide--chapter .slide__plate {
	background-color: #23110a;
	background-image: var(--chapter-noise);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-blend-mode: lighten;
}

/* The generic darkening gradient exists to make photographs readable. There is
 * no photograph here, and it would only mud the brown. */
.motion-v2 .slide--chapter .slide__plate::after {
	content: none;
}

/* --- Keep-indicator -------------------------------------------------------
 * Sized off the viewport *height* so the ring keeps its relationship to the
 * slide rather than to the text measure. 96dvh reproduces the Bricks original
 * exactly: a 100dvh stage holding an SVG drawn at 96% of it.
 */
.motion-v2 .chapter__octagon {
	position: absolute;
	top: var(--chapter-stage-center);
	left: 50%;
	translate: -50% -50%;
	width: calc(0.96 * var(--stage-h));
	max-width: 96vw;
	aspect-ratio: 1;
	pointer-events: none;
}

.motion-v2 .chapter__octagon svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* The full ring is always drawn, very faintly, so the indicator reads as
 * architecture that is being filled in rather than as a line appearing from
 * nowhere. */
.motion-v2 .chapter__octagon-track {
	fill: none;
	stroke: #fff;
	stroke-width: 1;
	stroke-linejoin: round;
	opacity: 0.2;
}

/* Second pass over the same edges: a fine dashed rung texture, masked to
 * whatever the gold stroke has already swept, so it fills in behind the dot.
 * The 0.98 scale sets it just inside the outline instead of on top of it. */
.motion-v2 .chapter__octagon-ladder {
	transform: scale(0.98);
	transform-origin: center;
}

/* --- Crosshair ------------------------------------------------------------
 * The two horizontal rules share the octagon's below-header stage center.
 * `translate` shifts by half the SVG's own height, so its internal horizontal
 * paths land on that center at every viewport size.
 */
.motion-v2 .chapter__crosshair {
	position: absolute;
	left: 0;
	width: 100%;
	height: auto;
	top: var(--chapter-stage-center);
	translate: 0 -50%;
	pointer-events: none;
}

/* --- Title --------------------------------------------------------------- */

.motion-v2 .chapter__inner {
	position: absolute;
	top: var(--chapter-stage-center);
	left: 50%;
	translate: -50% -50%;
	width: 100%;
	max-width: 640px;
	text-align: center;
}

.motion-v2 .chapter__entry {
	position: relative;
	min-width: 144px;
	min-height: 44px;
	margin-top: 24px;
	padding: 12px 24px;
	border: 1px solid var(--gold-brand);
	border-radius: 999px;
	background: transparent;
	color: var(--gold-brand);
	font: 400 0.75rem/1 var(--font-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 200ms var(--ease-out-quart),
		background 200ms var(--ease-out-quart),
		transform 100ms var(--ease-out-quart);
}

.motion-v2 .deck[data-entry-mode='button'] .chapter-body__close-wrap {
	display: grid;
	place-items: center;
	padding: 48px var(--layout-container-inset);
}

.motion-v2 .deck[data-entry-mode='button'] .chapter-body__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 144px;
	min-height: 44px;
	margin: 0;
	padding: 12px 24px;
	border: 1px solid var(--gold-brand);
	border-radius: 999px;
	background: transparent;
	color: var(--gold-brand);
	font: 400 0.75rem/1 var(--font-sans);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	touch-action: manipulation;
	transition: color 200ms var(--ease-out-quart),
		background 200ms var(--ease-out-quart),
		transform 100ms var(--ease-out-quart);
}

.motion-v2 .deck[data-entry-mode='button'] .chapter-body__close:hover {
	background: var(--gold-brand);
	color: var(--ink-plate);
	transform: translateY(-2px);
}

.motion-v2 .deck[data-entry-mode='button'] .chapter-body__close:active {
	transform: translateY(2px);
}

.motion-v2 .deck[data-entry-mode='button'] .chapter-body__close:focus-visible {
	outline: 2px solid var(--bone);
	outline-offset: 4px;
}

.motion-v2 .chapter__entry:hover {
	background: var(--gold-brand);
	color: var(--ink-plate);
	transform: translateY(-2px);
}

.motion-v2 .chapter__entry:active {
	transform: translateY(2px);
}

.motion-v2 .chapter__entry:focus-visible {
	outline: 2px solid var(--bone);
	outline-offset: 4px;
}

.motion-v2 .chapter__title {
	margin: 0;
	font-family: var(--font-script);
	font-weight: 400;
	font-size: 96px;
	line-height: 1.3;
	color: var(--gold-brand);
}

@media (max-width: 991px) {
	.motion-v2 .chapter__inner {
		max-width: 400px;
	}

	.motion-v2 .chapter__title {
		font-size: 72px;
	}
}

@media (max-width: 478px) {
	/* At this width the unlit gap is narrower than the title, so the rules would
	 * strike through it. The design drops them rather than rescaling. */
	.motion-v2 .chapter__crosshair {
		display: none;
	}

	.motion-v2 .chapter__inner {
		width: 86%;
	}

	.motion-v2 .chapter__title {
		font-size: 48px;
	}
}

/* ---------------------------------------------------------------------------
 * Chapter portal — the cover slide
 * ---------------------------------------------------------------------------
 * Applied by motion-v2-chapter-portal.js to whichever title slide is currently
 * acting as the cover, for the duration of a reveal only. The slide is already
 * 100dvh and already filling the viewport when this lands, so `fixed; inset:0`
 * renders it pixel-identically — that frame-exactness is the whole reason the
 * hand-off has nothing to cross-fade.
 *
 * z-index 5 is chosen, not arbitrary: above the deck's in-flow slides, but
 * below the progress rail (10) and the header (100), both of which must stay
 * visible and usable while a chapter opens.
 */

.motion-v2 .slide.is-portal-cover {
	position: fixed;
	inset: 0;
	z-index: 5;
	-webkit-mask-image: url(#motionV2ChapterPortal);
	mask-image: url(#motionV2ChapterPortal);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

html.motion-v2-cheap-compositor .motion-v2 .slide.is-portal-cover {
	-webkit-mask-image: none;
	mask-image: none;
	transform: none !important;
	translate: none !important;
	/* Do not use inset:0 — that reties height to the live URL bar. */
	inset: auto;
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	width: var(--portal-cover-w, 100%);
	height: var(--portal-cover-h, var(--stage-h));
}

html.motion-v2-cheap-compositor .motion-v2 .slide.is-portal-cover .chapter__octagon {
	width: calc(0.96 * var(--portal-cover-h, var(--stage-h)));
	top: calc(var(--header-height) + (var(--portal-cover-h, var(--stage-h)) - var(--header-height)) / 2);
}

html.motion-v2-cheap-compositor .motion-v2 .slide.is-portal-cover .chapter__crosshair,
html.motion-v2-cheap-compositor .motion-v2 .slide.is-portal-cover .chapter__inner {
	top: calc(var(--header-height) + (var(--portal-cover-h, var(--stage-h)) - var(--header-height)) / 2);
}

.motion-v2 .slide.is-deck-transition-cover {
	position: fixed;
	inset: 0;
	will-change: transform;
	pointer-events: none;
}

.motion-v2 .slide.is-deck-transition-source {
	z-index: 4;
}

.motion-v2 .slide.is-deck-transition-target {
	z-index: 3;
}

/* ---------------------------------------------------------------------------
 * Chapter bodies (Layer D)
 * ---------------------------------------------------------------------------
 * The approved Bricks body has a clear narrative: a centred photograph grows
 * into the viewport, softens into atmosphere, then the copy, facts and masked
 * artwork rise into view in ordinary document flow. The sticky visual stage is
 * tall only to provide scroll distance; it never becomes a nested scroller.
 */

.motion-v2 .chapter-body {
	position: relative;
	isolation: isolate;
	background: var(--chapter-ground);
}

.motion-v2 .chapter-body__visual-stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: clip;
	pointer-events: none;
}

/* Scroll distance for the photograph's scale-and-blur, nothing more. At 300dvh
   the reader spent three viewports on one image before any text could enter;
   240 keeps the movement unhurried without making it an errand. */
.motion-v2 .chapter-body__visual-spacer {
	position: relative;
	height: calc(2.4 * var(--stage-h));
}

.motion-v2 .chapter-body__visual-sticky {
	position: sticky;
	top: 0;
	height: var(--stage-h);
	overflow: hidden;
}

.motion-v2 .chapter-body__visual {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	transform-origin: center;
}

.motion-v2 .chapter-body__visual::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--ink);
	opacity: 0;
	pointer-events: none;
}

.motion-v2 .chapter-body__visual picture {
	display: block;
	width: 100%;
	height: 100%;
}

.motion-v2 .chapter-body__visual [data-chapter-visual-soft] {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.motion-v2 .chapter-body__visual [data-chapter-visual-soft-fill] {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(10px) brightness(0.58);
}

.motion-v2 .chapter-body__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.motion-v2 .chapter-body__content {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: auto auto;
	column-gap: 24px;
	/* Between the lede and the facts row. The two are separate thoughts and
	   were reading as one block; the gap is what tells them apart. */
	row-gap: 112px;
	width: var(--layout-container-width);
	max-width: 100%;
	min-height: var(--stage-h);
	margin: 0 auto;
	padding: 10dvh var(--layout-container-inset) 8dvh;
	background: transparent;
}

/* Height comes from the content, not from a guess. The fixed 200dvh was ~700px
   taller than anything inside it, and that surplus was the dead scroll at the
   end of the chapter: ground the reader had to cross before the close could
   arm. Sized to its contents, the last thing on screen is the last thing in
   the chapter. */
.motion-v2 .chapter-body__content-stage {
	position: relative;
	z-index: 2;
}

.motion-v2 .chapter-body__intro {
	display: contents;
}

.motion-v2 .chapter-body__heading-lockup {
	grid-column: 1 / span 3;
	grid-row: 1;
	align-self: start;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.motion-v2 .chapter-body__mark {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	fill: none;
	stroke: var(--gold-brand);
	stroke-width: 2;
}

.motion-v2 .chapter-body__heading {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--gold-brand);
}

.motion-v2 .chapter-body__lede {
	grid-column: 5 / -1;
	grid-row: 1;
	margin: 0;
	font-size: clamp(1.25rem, 1.65vw, 1.5rem);
	font-weight: 400;
	line-height: 1.34;
	color: var(--bone);
	text-wrap: pretty;
}

.motion-v2 #chapter-body-1 .chapter-body__lede,
.motion-v2 #chapter-body-2 .chapter-body__lede,
.motion-v2 #chapter-body-2 .chapter-body__captions p,
.motion-v2 #chapter-body-3 .chapter-body__lede,
.motion-v2 #chapter-body-4 .chapter-body__lede,
.motion-v2 #chapter-body-5 .chapter-body__lede,
.motion-v2 #chapter-body-6 .chapter-body__lede,
.motion-v2 #chapter-body-7 .chapter-body__lede {
	text-align: justify;
}

.motion-v2 .chapter-body__lede-char {
	opacity: 1;
}

.motion-v2 .chapter-body__facts {
	display: contents;
}

.motion-v2 .chapter-body__facts-copy {
	grid-column: 5 / span 4;
	grid-row: 2;
	align-self: start;
	padding-top: 32px;
}

.motion-v2 .chapter-body__stats {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.motion-v2 .chapter-body__stat {
	margin: 0;
}

.motion-v2 .chapter-body__stat-button {
	display: block;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--chapter-stat-dim);
	font: inherit;
	font-size: clamp(1.25rem, 1.7vw, 1.5rem);
	font-weight: 300;
	line-height: 1.7;
	text-align: left;
	cursor: pointer;
	transition:
		color 250ms var(--ease-out-quart),
		transform 150ms var(--ease-out-quart);
}

.motion-v2 .chapter-body__stat-button:hover,
.motion-v2 .chapter-body__stat-button[aria-pressed='true'] {
	color: var(--gold-brand);
}

.motion-v2 .chapter-body__stat-button:hover {
	transform: translateX(4px);
}

.motion-v2 .chapter-body__stat-button:active {
	transform: translateX(4px) translateY(2px);
}

.motion-v2 .chapter-body__stat-button:focus-visible {
	outline: 2px solid var(--gold-brand);
	outline-offset: 4px;
}

.motion-v2 .chapter-body__artwork {
	/* Air between the photograph and its frame — the mount, not a hairline. */
	--artwork-mount-gap: clamp(10px, 1.4vw, 18px);
	grid-column: 9 / -1;
	grid-row: 2;
	position: relative;
	width: calc(100% + 16px);
	aspect-ratio: 438 / 288;
	margin: 0;
	align-self: start;
	justify-self: end;
}

/* The photograph sits inside the frame, not against it. The inset is the gap
   the reference calls for — the frame reads as a mount holding the image, and
   the mount needs air to be a mount. */
.motion-v2 .chapter-body__artwork-image {
	position: absolute;
	inset: var(--artwork-mount-gap);
	display: block;
	/* Sized, not left to `auto`. An absolutely positioned replaced element
	   resolves `auto` from its intrinsic size rather than from its insets, and
	   a lazy image has no intrinsic size until it loads — it collapsed to zero
	   height and the frame stood empty. */
	width: calc(100% - var(--artwork-mount-gap) * 2);
	height: calc(100% - var(--artwork-mount-gap) * 2);
	object-fit: cover;
	transition: opacity 200ms var(--ease-out-quart);
}

.motion-v2 .chapter-body__artwork-frame {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	color: var(--gold-brand);
	/* A non-scaling stroke straddles the path, so half of it lies outside the
	   viewBox and SVG would otherwise clip that half away. */
	overflow: visible;
	pointer-events: none;
}

.motion-v2 .chapter-body__artwork-frame--mobile {
	display: none;
}

.motion-v2 .chapter-body__artwork-image--mobile {
	display: none;
}

/* The overlay is the photograph's twin: same box, same silhouette. Anything
   less and the notched corners show a square shadow sitting proud of the
   frame. Geometry and mask are declared once, below, for both. */
.motion-v2 .chapter-body__artwork::after {
	content: '';
	position: absolute;
	inset: var(--artwork-mount-gap);
	z-index: 2;
	background: var(--chapter-stat-overlay);
	opacity: 0;
	pointer-events: none;
	transition: opacity 420ms var(--ease-out-quart);
}

.motion-v2 .chapter-body__artwork-image,
.motion-v2 .chapter-body__artwork::after {
	-webkit-mask-image: var(--chapter-artwork-mask);
	mask-image: var(--chapter-artwork-mask);
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Chapter 1 is landscape at every breakpoint; stretch the mask to the box so
   the notched corners stay locked to the stroked frame. */
.motion-v2 #chapter-body-1 .chapter-body__artwork-image,
.motion-v2 #chapter-body-1 .chapter-body__artwork::after {
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.motion-v2 .chapter-body__artwork-value {
	position: absolute;
	top: 50%;
	right: 16px;
	left: 16px;
	z-index: 4;
	margin: 0;
	color: var(--gold-brand);
	font-size: clamp(2rem, 3vw, 2.75rem);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-align: center;
	opacity: 0;
	transform: translateY(calc(-50% + 8px));
	pointer-events: none;
	transition:
		opacity 420ms var(--ease-out-quart),
		transform 420ms var(--ease-out-quart);
}

.motion-v2 .chapter-body__artwork.is-stat-active::after,
.motion-v2 .chapter-body__artwork.is-stat-active .chapter-body__artwork-value {
	opacity: 1;
}

.motion-v2 .chapter-body__artwork.is-stat-active .chapter-body__artwork-value {
	transform: translateY(-50%);
}

/* The trough of a value-to-value crossfade. Moving between two facts used to
   replace the glyphs in a single frame — the overlay stayed lit, so nothing
   ever faded and the number simply became a different number. The script dips
   the value here, swaps the text while it is invisible, and lets the rule above
   carry it back. Faster out than in: leaving should not be dwelt on. */
.motion-v2 .chapter-body__artwork.is-stat-active.is-stat-swapping
	.chapter-body__artwork-value {
	opacity: 0;
	transform: translateY(calc(-50% + 6px));
	transition:
		opacity 200ms var(--ease-out-quart),
		transform 200ms var(--ease-out-quart);
}

.motion-v2 .chapter-body__artwork.is-stat-swapping .chapter-body__artwork-image {
	opacity: 0.35;
}

/* Chapter 2 (LEED) — badge + captions replace chapter 1's stat list, and the
   artwork is a landscape framed photo (own aspect ratio, own overlay image)
   rather than the portrait custom-drawn frame. Both reuse the chapter-body
   grid classes above; only these additions are chapter-2-specific. */
.motion-v2 .chapter-body__facts-copy--badge {
	grid-column: 1 / span 4;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.motion-v2 .chapter-body__badge {
	margin: 0;
	width: 76px;
}

.motion-v2 .chapter-body__badge-image {
	display: block;
	width: 100%;
	height: auto;
}

.motion-v2 .chapter-body__captions {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.motion-v2 .chapter-body__captions p {
	margin: 0;
	color: var(--bone-dim);
	font-size: 0.9375rem;
	font-weight: 300;
	line-height: 1.6;
}

.motion-v2 .chapter-body__artwork--framed {
	--artwork-mount-gap: clamp(8px, 1.1vw, 14px);
	grid-column: 6 / -1;
	width: 100%;
	aspect-ratio: 1185 / 790;
}

.motion-v2 .chapter-body__artwork--framed.chapter-body__artwork--slideshow {
	aspect-ratio: auto;
}

.motion-v2 .chapter-body__slideshow-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1185 / 790;
}

.motion-v2 .chapter-body__artwork-frame-overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.motion-v2 #chapter-body-2 .chapter-body__artwork-image {
	opacity: 0;
	z-index: 1;
	transition: opacity 700ms var(--ease-out-quart);
}

.motion-v2 #chapter-body-2 .chapter-body__artwork-image.is-active {
	opacity: 1;
	z-index: 2;
}

.motion-v2 .chapter-body__slideshow-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin-top: 12px;
}

.motion-v2 .chapter-body__slideshow-nav {
	display: grid;
	place-items: center;
	width: clamp(36px, 4.2vw, 44px);
	height: clamp(36px, 4.2vw, 44px);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gold-brand);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	touch-action: manipulation;
}

.motion-v2 .chapter-body__slideshow-nav svg {
	width: 72%;
	height: 72%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.65;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.motion-v2 .chapter-body__slideshow-nav:hover,
.motion-v2 .chapter-body__slideshow-nav:focus-visible {
	color: var(--bone);
}

.motion-v2 .chapter-body__slideshow-nav:focus-visible {
	outline: 2px solid var(--gold-brand);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.motion-v2 #chapter-body-2 .chapter-body__artwork-image {
		transition: none;
	}
}

/* Chapter 3 (location) — the screenshot has no supporting artwork. Anchor both
   editorial rows to their content so the grid's viewport minimum cannot turn
   spare track height into a false gap between the lede and destination list. */
.motion-v2 .chapter-body--location .chapter-body__content {
	align-content: start;
	row-gap: clamp(64px, 9vh, 96px);
}

.motion-v2 .chapter-body__location {
	grid-column: 5 / -1;
	grid-row: 2;
	align-self: start;
}

.motion-v2 .chapter-body__location-list {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.motion-v2 .chapter-body__location-list li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	margin: 0;
	color: var(--bone);
	font-size: clamp(1.25rem, 1.65vw, 1.5rem);
	font-weight: 300;
	line-height: 1.7;
}

.motion-v2 .chapter-body__location-list li > :last-child {
	color: var(--gold-brand);
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

/* Chapter 4 (residences) — two paired editorial rows. The right card sits one
   quiet step lower, as in the supplied composition; margin owns that offset so
   GSAP can use transform exclusively for the shared rise entrance. */
.motion-v2 .chapter-body--residences .chapter-body__content {
	row-gap: clamp(120px, 16vh, 168px);
	padding-bottom: clamp(112px, 16vh, 176px);
}

.motion-v2 .chapter-body__products {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: clamp(64px, 8vh, 88px);
}

.motion-v2 .chapter-body__product-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(40px, 4.2vw, 64px);
	align-items: start;
}

.motion-v2 .chapter-body__product-card {
	position: relative;
	min-width: 0;
}

.motion-v2 .chapter-body__product-card.is-linked {
	cursor: pointer;
}

.motion-v2 .chapter-body__product-card:nth-child(2) {
	margin-top: clamp(40px, 5vh, 52px);
}

.motion-v2 .chapter-body__product-figure {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: clamp(10px, 1.15vw, 16px);
}

.motion-v2 .chapter-body__product-media {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-clip-path: url('#motionV2FramedMediaClip');
	clip-path: url('#motionV2FramedMediaClip');
}

.motion-v2 .chapter-body__product-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(35, 17, 10, 0) 54%,
		rgba(35, 17, 10, 0.2) 72%,
		var(--chapter-ground) 100%
	);
	pointer-events: none;
}

.motion-v2 .chapter-body__product-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.72) saturate(0.9);
}

.motion-v2 .chapter-body__product-frame {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.motion-v2 .chapter-body__product-frame path {
	fill: none;
	stroke: var(--gold-brand);
	stroke-width: 1.25;
	vector-effect: non-scaling-stroke;
}

.motion-v2 .chapter-body__product-copy {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	gap: 16px 24px;
	margin-top: clamp(24px, 3vh, 32px);
}

.motion-v2 .chapter-body__product-card.is-linked .chapter-body__product-copy {
	grid-template-columns: minmax(0, 1fr) clamp(64px, 5.4vw, 82px);
}

.motion-v2 .chapter-body__product-copy-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.motion-v2 .chapter-body__product-title,
.motion-v2 .chapter-body__product-description,
.motion-v2 .chapter-body__product-details {
	margin: 0;
}

.motion-v2 .chapter-body__product-title {
	color: var(--gold-brand);
	font-size: clamp(1.5rem, 2vw, 2rem);
	font-weight: 300;
	line-height: 1.25;
}

.motion-v2 .chapter-body__product-description {
	color: var(--bone);
	font-size: clamp(1rem, 1.35vw, 1.25rem);
	font-weight: 300;
	line-height: 1.5;
}

.motion-v2 .chapter-body__product-details {
	color: var(--bone-dim);
	font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
	font-weight: 300;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
}

.motion-v2 .chapter-body__product-arrow {
	display: grid;
	place-items: center;
	width: 100%;
	max-width: clamp(64px, 5.4vw, 82px);
	aspect-ratio: 1;
	justify-self: end;
	border: 1px solid rgba(247, 197, 135, 0.44);
	border-radius: 50%;
	color: var(--gold-brand);
	pointer-events: none;
	transition: color 300ms var(--ease-out-quart), background-color 300ms var(--ease-out-quart),
		border-color 300ms var(--ease-out-quart), transform 500ms var(--ease-out-quint);
}

.motion-v2 .chapter-body__product-arrow svg {
	width: 54%;
	height: 54%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.motion-v2 .chapter-body__product-card.is-linked:hover .chapter-body__product-arrow,
.motion-v2 .chapter-body__product-card.is-linked:focus-within .chapter-body__product-arrow {
	border-color: var(--gold-brand);
	background: var(--gold-brand);
	color: var(--chapter-ground);
	transform: translate(3px, -3px);
}

.motion-v2 .chapter-body__product-link {
	position: absolute;
	inset: 0;
	z-index: 4;
}

.motion-v2 .chapter-body__product-link:focus-visible {
	outline: 2px solid var(--gold-brand);
	outline-offset: 6px;
}

@media (max-width: 991px) {
	.motion-v2 .chapter-body__artwork--framed {
		width: min(100%, 480px);
		margin: 48px auto 0;
	}
}

@media (max-width: 991px) {
	.motion-v2 .chapter-body__visual-spacer {
		height: calc(1.45 * var(--stage-h));
	}

	.motion-v2 .chapter-body__content {
		position: relative;
		display: block;
		width: var(--layout-container-width);
		max-width: 100%;
		min-height: 0;
		padding: 12dvh var(--layout-container-inset);
	}

	.motion-v2 .chapter-body__intro,
	.motion-v2 .chapter-body__facts {
		display: block;
	}

	.motion-v2 .chapter-body__lede {
		margin-top: 48px;
	}

	/* The stacked equivalent of the desktop row-gap. */
	.motion-v2 .chapter-body__facts-copy {
		margin-top: 96px;
		padding-top: 0;
	}

	.motion-v2 .chapter-body__artwork {
		width: min(100%, 420px);
		margin: 48px auto 0;
	}

	.motion-v2 .chapter-body__location {
		margin-top: 64px;
	}

	.motion-v2 .chapter-body__products {
		margin-top: 96px;
		gap: 64px;
	}

	.motion-v2 .chapter-body__product-row {
		grid-template-columns: 1fr;
		gap: 56px;
	}

	.motion-v2 .chapter-body__product-card:nth-child(2) {
		margin-top: 0;
	}
}

/* Chapter 1 mobile pilot: the supplied composition is an editorial landscape
   image followed by a compact 2 x 2 fact grid. Keep this below the shared 992px
   desktop boundary and under the chapter ID so the approved desktop artwork and
   every later chapter retain their existing geometry. The fixed tail replaces
   viewport-relative padding: the last fact now ends on the held blurred
   photograph instead of exposing a large plate of flat chapter ground. */
@media (max-width: 991px) {
	/* Each compact chapter is one viewport tall. An absolute `inset: 0` stage
	   would resolve to that scrollport and scroll away while its blur timeline
	   keeps advancing. Hold the atmospheric layer at the scrollport edge and
	   cancel its flow height so the spacer/content remains the only travel. */
	.motion-v2 .chapter-body .chapter-body__visual-stage {
		position: sticky;
		inset: auto;
		top: 0;
		height: var(--stage-h);
		margin-bottom: calc(-1 * var(--stage-h));
	}

	/* Every chapter is a one-viewport native scrollport on compact, not only
	   Chapter 1. Document scroll at the body edge preventDefaults the last
	   swipe; iOS then drops native scrolling until a tap. The scrollport owns
	   the edge with overscroll-contain, matching the Chapter 1 pilot. */
	.motion-v2 .chapter-body {
		height: var(--stage-h);
		max-height: var(--stage-h);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior-x: none;
		overscroll-behavior-y: contain;
		-webkit-overflow-scrolling: touch;
	}

	.motion-v2 #chapter-body-1 .chapter-body__content {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}

	.motion-v2 #chapter-body-1 .chapter-body__facts {
		display: flex;
		flex-direction: column;
		gap: 36px;
		margin-top: 96px;
	}

	.motion-v2 #chapter-body-1 .chapter-body__artwork {
		order: 1;
		width: 100%;
		aspect-ratio: 438 / 288;
		margin: 0;
	}

	.motion-v2 #chapter-body-1 .chapter-body__artwork-image--desktop {
		display: none;
	}

	.motion-v2 #chapter-body-1 .chapter-body__artwork-image--mobile,
	.motion-v2 #chapter-body-1 .chapter-body__artwork::after {
		-webkit-mask-image: var(--chapter-artwork-mobile-mask);
		mask-image: var(--chapter-artwork-mobile-mask);
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}

	.motion-v2 #chapter-body-1 .chapter-body__artwork-image--mobile {
		display: block;
	}

	.motion-v2 #chapter-body-1 .chapter-body__artwork-frame--desktop {
		display: none;
	}

	.motion-v2 #chapter-body-1 .chapter-body__artwork-frame--mobile {
		display: block;
	}

	/* Chapter 2 keeps the approved desktop outline image above the mobile
	 * breakpoint. On phones the same silhouette is stroked as live SVG so its
	 * 1.25px hairline is not reduced with the 1185px source asset. */
	.motion-v2 #chapter-body-2 .chapter-body__artwork-frame-overlay--desktop {
		display: none;
	}

	.motion-v2 #chapter-body-2 .chapter-body__artwork-frame--mobile {
		display: block;
	}

	.motion-v2 #chapter-body-1 .chapter-body__facts-copy {
		order: 2;
		margin-top: 0;
	}

	.motion-v2 #chapter-body-1 .chapter-body__stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 22px;
		row-gap: 34px;
	}

	.motion-v2 #chapter-body-1 .chapter-body__stat-button {
		cursor: default;
		min-height: 0;
		color: var(--chapter-stat-dim);
		font-size: clamp(1rem, 4.5vw, 1.25rem);
		line-height: 1.3;
	}

	.motion-v2 #chapter-body-1 .chapter-body__stat-button::after {
		content: attr(data-chapter-stat-mobile-value);
		display: block;
		margin-top: 8px;
		color: var(--gold-brand);
		font-size: clamp(1.75rem, 7.4vw, 2.125rem);
		font-variant-numeric: tabular-nums;
		font-weight: 300;
		line-height: 1.1;
	}

	.motion-v2 #chapter-body-1 .chapter-body__stat-button:hover,
	.motion-v2 #chapter-body-1 .chapter-body__stat-button[aria-pressed='true'] {
		color: var(--chapter-stat-dim);
		transform: none;
	}

	/* Chapter 3 mobile: the same shortfall fixed for desktop in `260728-1526-085`.
	   The location list is short, so the chapter body's bottom edge — the clamp
	   the mobile portal enforces — is reached before the lede's illumination
	   ScrollTrigger (`bottom 45%`) can finish. This rule REPLACES the 12dvh
	   padding-bottom every chapter gets from the shared shorthand above, not
	   adds to it, so its value must cover the base plus the shortfall, not the
	   shortfall alone. Measured live against a fixed 12dvh baseline the true
	   shortfall ranges from ~87px (667px-tall phones) to ~201px (932px-tall);
	   38dvh covers base + shortfall + a small stable hold at every measured
	   height. Applied after the location list, never before it or between
	   rows, so nothing but trailing chapter ground is added. */
	.motion-v2 #chapter-body-3 .chapter-body__content {
		padding-bottom: calc(clamp(200px, 38dvh, 360px) + env(safe-area-inset-bottom));
	}
}

@media (max-width: 478px) {
	.motion-v2 .chapter-body__heading-lockup {
		gap: 8px;
	}

	.motion-v2 .chapter-body__lede {
		font-size: 1.0625rem;
	}

	.motion-v2 .chapter-body__location-list li {
		gap: 16px;
		font-size: 1rem;
	}

	.motion-v2 .chapter-body__product-figure {
		padding: 8px;
	}

	.motion-v2 .chapter-body__product-copy {
		gap: 12px 16px;
		margin-top: 20px;
	}

	.motion-v2 .chapter-body__product-copy-text {
		gap: 12px;
	}
}

/* Chapter 5 (experiences) — one framed gallery held over the opening image's
   final atmospheric blur. All surfaces stay transparent so the photograph
   remains the chapter ground through the last thumbnail and counter. */
.motion-v2 .chapter-body--experiences .chapter-body__content {
	display: block;
	min-height: 0;
	padding-top: clamp(72px, 11dvh, 112px);
	padding-bottom: clamp(120px, 18dvh, 184px);
}

.motion-v2 .chapter-body--experiences .chapter-body__intro {
	display: block;
}

.motion-v2 .chapter-body--experiences .chapter-body__heading-lockup {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
}

.motion-v2 .chapter-body--experiences .chapter-body__mark {
	margin-top: 0;
}

.motion-v2 .chapter-body--experiences .chapter-body__heading {
	line-height: 1.3;
}

.motion-v2 .chapter-body--experiences .chapter-body__lede {
	width: min(100%, 1240px);
	margin: clamp(36px, 5dvh, 52px) auto 0;
	font-size: clamp(1.25rem, 1.65vw, 1.5rem);
	line-height: 1.38;
	text-align: left;
}

.motion-v2 .chapter-body__experience-gallery {
	--experience-scrollbar: color-mix(in srgb, var(--gold-brand) 42%, transparent);
	--experience-slide-crossfade-duration: 560ms;
	--experience-slide-crossfade-ease: cubic-bezier(0.45, 0, 0.55, 1);
	position: relative;
	isolation: isolate;
	margin-top: clamp(128px, 18dvh, 184px);
	background: transparent;
}

.motion-v2 .chapter-body__experience-gallery::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url('/wp-content/uploads/2026/05/hexagon-pattern-3.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--ink-plate) 8%, var(--ink-plate) 92%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, var(--ink-plate) 8%, var(--ink-plate) 92%, transparent 100%);
	pointer-events: none;
}

.motion-v2 .chapter-body__experience-layout {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(160px, 2.2fr) minmax(0, 6.4fr) minmax(160px, 2.2fr);
	grid-template-areas:
		'title figure cta'
		'. thumbnails counter';
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
}

.motion-v2 .chapter-body__experience-title {
	grid-area: title;
	align-self: center;
	display: grid;
	margin: 0;
	color: var(--gold-brand);
	font-family: var(--font-script);
	font-size: clamp(2.625rem, calc(5vw - 1.875rem), 4.5rem);
	font-weight: 400;
	line-height: 1;
	text-align: left;
}

.motion-v2 .chapter-body__experience-title-copy {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: 0.08em;
}

.motion-v2 .chapter-body__experience-title-copy--incoming {
	opacity: 0;
	pointer-events: none;
}

.motion-v2 .chapter-body__experience-title-copy > span {
	display: block;
}

.motion-v2 .chapter-body__experience-title [data-gallery-title-primary],
.motion-v2 .chapter-body__experience-title [data-gallery-title-primary-incoming] {
	white-space: nowrap;
}

.motion-v2 .chapter-body__experience-center {
	display: contents;
}

.motion-v2 .chapter-body__experience-figure {
	grid-area: figure;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: clamp(10px, 1vw, 16px);
	touch-action: pan-y;
	user-select: none;
}

.motion-v2 .is-gallery-ready .chapter-body__experience-figure {
	cursor: grab;
}

.motion-v2 .chapter-body__experience-media {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-clip-path: url('#motionV2FramedMediaClip');
	clip-path: url('#motionV2FramedMediaClip');
}

.motion-v2 .chapter-body__experience-media::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(to bottom, rgba(13, 11, 9, 0) 70%, rgba(13, 11, 9, 0.24));
	pointer-events: none;
}

.motion-v2 .chapter-body__experience-media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.motion-v2 .chapter-body__experience-media-incoming {
	z-index: 1;
	opacity: 0;
	pointer-events: none;
}

.motion-v2 .chapter-body__experience-frame {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.motion-v2 .chapter-body__experience-frame path {
	fill: none;
	stroke: var(--gold-brand);
	stroke-width: 1.25;
	vector-effect: non-scaling-stroke;
}

.motion-v2 .chapter-body__experience-thumbnails {
	grid-area: thumbnails;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 48px) / 5);
	gap: 12px;
	width: min(78%, 720px);
	margin: clamp(24px, 3dvh, 32px) auto 0;
	padding: 4px 4px 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-color: var(--experience-scrollbar) transparent;
	scrollbar-width: thin;
}

.motion-v2 .chapter-body__experience-thumbnails::-webkit-scrollbar {
	height: 6px;
}

.motion-v2 .chapter-body__experience-thumbnails::-webkit-scrollbar-track {
	background: transparent;
}

.motion-v2 .chapter-body__experience-thumbnails::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: var(--experience-scrollbar);
}

.motion-v2 .chapter-body__experience-thumbnail {
	position: relative;
	display: block;
	min-width: 0;
	min-height: 44px;
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: 3px;
	border: 1px solid transparent;
	background: transparent;
	color: inherit;
	opacity: 0.62;
	cursor: default;
	scroll-snap-align: center;
	transition: border-color 220ms var(--ease-out-quart),
		opacity 220ms var(--ease-out-quart), transform 220ms var(--ease-out-quart);
}

.motion-v2 .is-gallery-ready .chapter-body__experience-thumbnail {
	cursor: pointer;
}

.motion-v2 .chapter-body__experience-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.motion-v2 .chapter-body__experience-thumbnail:hover,
.motion-v2 .chapter-body__experience-thumbnail.is-active {
	border-color: var(--gold-brand);
	opacity: 1;
}

.motion-v2 .chapter-body__experience-thumbnail:active {
	transform: scale(0.97);
}

.motion-v2 .chapter-body__experience-thumbnail:focus-visible {
	outline: 2px solid var(--gold-brand);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--ink-plate);
}

.motion-v2 .chapter-body__experience-aside {
	display: contents;
}

.motion-v2 .chapter-body__experience-cta {
	grid-area: cta;
	align-self: center;
	justify-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem clamp(1rem, 1.8vw, 1.75rem);
	border-radius: 999px;
	background: var(--gold-brand);
	color: var(--chapter-ground);
	font-size: clamp(0.875rem, 1.1vw, 1rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.motion-v2 a.chapter-body__experience-cta {
	cursor: pointer;
	touch-action: manipulation;
	transition: filter 200ms var(--ease-out-quart),
		transform 100ms var(--ease-out-quart);
}

.motion-v2 a.chapter-body__experience-cta:hover {
	filter: brightness(1.06);
}

.motion-v2 a.chapter-body__experience-cta:active {
	transform: translateY(1px);
}

.motion-v2 a.chapter-body__experience-cta:focus-visible {
	outline: 2px solid var(--gold-brand);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--ink-plate);
}

.motion-v2 .chapter-body__experience-counter {
	grid-area: counter;
	align-self: center;
	justify-self: center;
	margin: 0;
	margin-top: clamp(24px, 3dvh, 32px);
	color: var(--bone-dim);
	font-size: clamp(0.875rem, 1.1vw, 1rem);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.18em;
	white-space: nowrap;
}

@media (max-width: 991px) {
	.motion-v2 .chapter-body--experiences .chapter-body__content {
		padding-top: 12dvh;
		padding-bottom: 12dvh;
	}

	.motion-v2 .chapter-body--experiences .chapter-body__lede {
		width: min(100%, 760px);
		margin-top: 40px;
	}

	.motion-v2 .chapter-body__experience-gallery {
		margin-top: 104px;
	}

	.motion-v2 .chapter-body__experience-layout {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.motion-v2 .chapter-body__experience-title {
		order: 1;
		font-size: clamp(2.75rem, 8vw, 4rem);
		text-align: center;
	}

	.motion-v2 .chapter-body__experience-center {
		display: block;
		order: 2;
	}

	.motion-v2 .chapter-body__experience-aside {
		display: flex;
		order: 3;
		min-height: 0;
		flex-direction: row;
		justify-content: space-between;
		gap: 24px;
	}

	.motion-v2 .chapter-body__experience-thumbnails {
		width: 100%;
		grid-auto-columns: calc((100% - 36px) / 4);
	}

	.motion-v2 .chapter-body__experience-counter {
		margin-top: 0;
	}
}

@media (max-width: 478px) {
	.motion-v2 .chapter-body--experiences .chapter-body__heading-lockup {
		gap: 8px;
	}

	.motion-v2 .chapter-body--experiences .chapter-body__lede {
		font-size: 1.0625rem;
		line-height: 1.5;
	}

	.motion-v2 .chapter-body__experience-gallery {
		margin-top: 80px;
	}

	.motion-v2 .chapter-body__experience-title {
		font-size: 2.75rem;
	}

	.motion-v2 .chapter-body__experience-figure {
		padding: 8px;
	}

	.motion-v2 .chapter-body__experience-thumbnails {
		grid-auto-columns: calc((100% - 24px) / 3);
		gap: 12px;
	}

	.motion-v2 .chapter-body__experience-aside {
		align-items: center;
	}

	.motion-v2 .chapter-body__experience-cta {
		min-height: 44px;
		padding-inline: 1rem;
		font-size: 0.75rem;
	}

	.motion-v2 .chapter-body__experience-counter {
		font-size: 0.75rem;
	}
}

/* Chapter 6 (architectural language) — the exact editorial introduction leads
   into a measured four-card horizontal track. The section remains transparent:
   the opening photograph's final blur is the ground until the fourth card has
   fully crossed and the chapter releases to Chapter 7. */
.motion-v2 .chapter-body--architecture .chapter-body__content {
	display: block;
	min-height: 0;
	padding-top: clamp(72px, 11dvh, 112px);
	padding-bottom: 0;
}

.motion-v2 .chapter-body--architecture .chapter-body__intro {
	display: block;
}

.motion-v2 .chapter-body--architecture .chapter-body__heading-lockup {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
}

.motion-v2 .chapter-body--architecture .chapter-body__mark {
	margin-top: 0;
}

.motion-v2 .chapter-body--architecture .chapter-body__heading {
	line-height: 1.3;
}

.motion-v2 .chapter-body--architecture .chapter-body__lede {
	width: min(100%, 1240px);
	margin: clamp(36px, 5dvh, 52px) auto 0;
	font-size: clamp(1.25rem, 1.65vw, 1.5rem);
	line-height: 1.38;
	text-align: left;
}

.motion-v2 .chapter-body__architecture-scroll {
	position: relative;
	margin-top: clamp(32px, 4.5dvh, 46px);
	background: transparent;
}

.motion-v2 .chapter-body__architecture-viewport {
	position: relative;
	display: flex;
	align-items: flex-start;
	width: 100vw;
	min-height: var(--stage-h);
	margin-left: calc(50% - 50vw);
	padding-block: calc(var(--header-height) + 40px) 56px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: none;
	scrollbar-color: color-mix(in srgb, var(--gold-brand) 42%, transparent) transparent;
	scrollbar-width: thin;
	background: transparent;
	cursor: grab;
	user-select: none;
}

.motion-v2 .chapter-body__architecture-viewport.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.motion-v2 .chapter-body__architecture-viewport.is-horizontal-ready {
	overflow-x: hidden;
}

.motion-v2 .chapter-body__architecture-viewport:focus-visible {
	outline: 2px solid var(--gold-brand);
	outline-offset: -6px;
}

.motion-v2 .chapter-body__architecture-viewport::-webkit-scrollbar {
	height: 6px;
}

.motion-v2 .chapter-body__architecture-viewport::-webkit-scrollbar-track {
	background: transparent;
}

.motion-v2 .chapter-body__architecture-viewport::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: color-mix(in srgb, var(--gold-brand) 42%, transparent);
}

.motion-v2 .chapter-body__architecture-track {
	display: flex;
	flex: 0 0 auto;
	align-items: flex-start;
	gap: clamp(36px, 6vw, 96px);
	width: max-content;
	padding-left: max(var(--layout-container-inset), 5vw);
	padding-right: max(var(--layout-container-inset), 8vw);
	will-change: transform;
}

.motion-v2 .chapter-body__architecture-card {
	flex: 0 0 clamp(320px, 42vw, 600px);
	width: clamp(320px, 42vw, 600px);
	scroll-snap-align: start;
}

.motion-v2 .chapter-body__architecture-figure {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: clamp(10px, 1vw, 16px);
}

.motion-v2 .chapter-body__architecture-media {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-clip-path: url('#motionV2FramedMediaClip');
	clip-path: url('#motionV2FramedMediaClip');
}

.motion-v2 .chapter-body__architecture-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(13, 11, 9, 0) 72%, rgba(13, 11, 9, 0.22));
	pointer-events: none;
}

.motion-v2 .chapter-body__architecture-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.motion-v2 .chapter-body__architecture-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.motion-v2 .chapter-body__architecture-frame path {
	fill: none;
	stroke: var(--gold-brand);
	stroke-width: 1.25;
	vector-effect: non-scaling-stroke;
}

.motion-v2 .chapter-body__architecture-copy {
	position: relative;
	margin-top: clamp(20px, 2.8dvh, 30px);
	padding-inline: 4px;
}

.motion-v2 .chapter-body__architecture-copy h3 {
	margin: 0;
	color: var(--gold-brand);
	font-size: clamp(1.25rem, 1.65vw, 1.75rem);
	font-weight: 400;
	line-height: 1.2;
	white-space: normal;
}

.motion-v2 .chapter-body__architecture-copy p {
	margin: 14px 0 0;
	color: var(--bone-dim);
	font-size: clamp(0.875rem, 1.05vw, 1rem);
	font-weight: 300;
	line-height: 1.45;
	white-space: normal;
}

@media (max-width: 991px) {
	.motion-v2 .chapter-body--architecture .chapter-body__content {
		padding-top: 12dvh;
		padding-bottom: 12dvh;
	}

	.motion-v2 .chapter-body--architecture .chapter-body__lede {
		width: min(100%, 760px);
		margin-top: 40px;
	}

	.motion-v2 .chapter-body__architecture-scroll {
		margin-top: 52px;
	}

	.motion-v2 .chapter-body__architecture-viewport {
		min-height: 0;
		padding-block: 16px 24px;
	}

	.motion-v2 .chapter-body__architecture-track {
		gap: 24px;
		padding-inline: var(--layout-container-inset);
		will-change: auto;
	}

	.motion-v2 .chapter-body__architecture-card {
		flex-basis: min(82vw, 560px);
		width: min(82vw, 560px);
	}
}

@media (max-width: 478px) {
	.motion-v2 .chapter-body--architecture .chapter-body__heading-lockup {
		gap: 8px;
	}

	.motion-v2 .chapter-body--architecture .chapter-body__lede {
		font-size: 1.0625rem;
		line-height: 1.5;
	}

	.motion-v2 .chapter-body__architecture-scroll {
		margin-top: 40px;
	}

	.motion-v2 .chapter-body__architecture-card {
		flex-basis: 86vw;
		width: 86vw;
	}

	.motion-v2 .chapter-body__architecture-figure {
		padding: 8px;
	}

}

/* Mobile frame variants are inline SVGs with a mobile-native viewBox. Desktop
   keeps the existing rendered overlay/artwork contract; the mobile variants are
   only visible under the shared 992px boundary. */
.motion-v2 .chapter-body__product-frame--mobile,
.motion-v2 .chapter-body__experience-frame--mobile,
.motion-v2 .chapter-body__architecture-frame--mobile,
.motion-v2 .chapter-body__credibility-frame--mobile {
	display: none;
}

@media (max-width: 991px) {
	.motion-v2 .chapter-body__product-frame--desktop,
	.motion-v2 .chapter-body__experience-frame--desktop,
	.motion-v2 .chapter-body__architecture-frame--desktop,
	.motion-v2 .chapter-body__credibility-frame--desktop {
		display: none;
	}

	.motion-v2 .chapter-body__product-frame--mobile,
	.motion-v2 .chapter-body__experience-frame--mobile,
	.motion-v2 .chapter-body__architecture-frame--mobile,
	.motion-v2 .chapter-body__credibility-frame--mobile {
		display: block;
	}

	.motion-v2 #chapter-body-1 .chapter-body__artwork-image--mobile {
		object-position: 50% 44%;
	}
}

/* Chapter 7 (brand credibility) — the familiar blurred opening photograph
   remains the ground behind an asymmetric investor statement and one bounded,
   in-flow proof collage. No content surface recreates the reference's flat
   brown plate; the softened landscape remains perceptible through the end. */
.motion-v2 .chapter-body--credibility .chapter-body__content {
	display: block;
	min-height: 0;
	padding-top: clamp(144px, 20dvh, 208px);
	padding-bottom: clamp(120px, 16dvh, 176px);
	background: transparent;
}

.motion-v2 .chapter-body--credibility .chapter-body__intro {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	align-items: start;
	background: transparent;
}

.motion-v2 .chapter-body--credibility .chapter-body__heading-lockup {
	grid-column: 1 / span 3;
	align-items: flex-start;
	padding-top: 0.45em;
}

.motion-v2 .chapter-body--credibility .chapter-body__heading {
	font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
	line-height: 1.35;
}

.motion-v2 .chapter-body--credibility .chapter-body__heading span {
	display: block;
}

.motion-v2 .chapter-body--credibility .chapter-body__lede {
	grid-column: 5 / -1;
	margin: 0;
	font-size: clamp(1.25rem, 1.65vw, 1.5rem);
	line-height: 1.34;
}

.motion-v2 .chapter-body__credibility-collage {
	--credibility-pulse-duration: 4.8s;
	--credibility-pulse-delay-two: -1.2s;
	--credibility-pulse-delay-three: -2.4s;
	--credibility-pulse-delay-four: -3.6s;
	--credibility-pulse-start-scale: 1;
	--credibility-pulse-scale: 1.34;
	position: relative;
	display: block;
	width: 100%;
	height: 800px;
	min-height: 0;
	margin-top: clamp(144px, 20dvh, 220px);
	background: transparent;
}

.motion-v2 .chapter-body__credibility-brand,
.motion-v2 .chapter-body__credibility-proof,
.motion-v2 .chapter-body__credibility-project {
	position: absolute;
	perspective: 720px;
	min-width: 0;
	margin: 0;
	background: transparent;
}

.motion-v2 [data-credibility-float].is-linked {
	cursor: pointer;
}

.motion-v2 .chapter-body__credibility-link {
	position: absolute;
	inset: 0;
	z-index: 4;
}

.motion-v2 .chapter-body__credibility-link:focus-visible {
	outline: 2px solid var(--gold-brand);
	outline-offset: 6px;
}

.motion-v2 .chapter-body__credibility-float-surface {
	position: relative;
	width: 100%;
	height: 100%;
	transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
	transform-origin: 50% 50%;
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

.motion-v2 [data-credibility-float].is-credibility-active .chapter-body__credibility-float-surface {
	will-change: transform;
}

.motion-v2 .chapter-body__credibility-brand {
	--credibility-pulse-start-scale: 1.16;
	--credibility-pulse-scale: 1.38;
	top: 0;
	left: 68%;
	width: 235px;
	height: 235px;
	aspect-ratio: 1;
	z-index: 2;
}

.motion-v2 .chapter-body__credibility-brand-mark {
	position: absolute;
	inset: 8%;
	z-index: 2;
	display: block;
	width: 84%;
	height: 84%;
	object-fit: contain;
}

.motion-v2 .chapter-body__credibility-proof {
	isolation: isolate;
	color: var(--bone);
	z-index: 3;
}

.motion-v2 .chapter-body__credibility-proof .chapter-body__credibility-float-surface {
	display: grid;
	place-items: center;
}

.motion-v2 .chapter-body__credibility-proof--award {
	top: 7.3%;
	left: 26.6%;
	width: 320px;
	height: 320px;
}

.motion-v2 .chapter-body__credibility-proof--portfolio {
	top: 30%;
	left: 54%;
	width: 320px;
	height: 320px;
}

.motion-v2 .chapter-body__credibility-frame {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

.motion-v2 .chapter-body__credibility-frame--mobile path {
	fill: none;
	stroke: var(--gold-brand);
	stroke-width: 1.25;
	vector-effect: non-scaling-stroke;
}

.motion-v2 .chapter-body__credibility-pulse {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	opacity: 0;
	pointer-events: none;
	animation: chapter-credibility-pulse var(--credibility-pulse-duration)
		cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.motion-v2 .chapter-body__credibility-pulse--two {
	animation-delay: var(--credibility-pulse-delay-two);
}

.motion-v2 .chapter-body__credibility-pulse--three {
	animation-delay: var(--credibility-pulse-delay-three);
}

.motion-v2 .chapter-body__credibility-pulse--four {
	animation-delay: var(--credibility-pulse-delay-four);
}

.motion-v2 .chapter-body__credibility-pulse img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@keyframes chapter-credibility-pulse {
	0% {
		opacity: 0;
		transform: scale(var(--credibility-pulse-start-scale));
	}

	10% {
		opacity: 0.3;
	}

	82%,
	100% {
		opacity: 0;
		transform: scale(var(--credibility-pulse-scale));
	}
}

.motion-v2 .chapter-body__credibility-proof-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(calc(100% - 80px), 240px);
	height: auto;
	text-align: center;
}

.motion-v2 .chapter-body__credibility-award-mark {
	display: block;
	width: 72px;
	height: auto;
	margin-bottom: 12px;
}

.motion-v2 .chapter-body__credibility-portfolio-mark {
	display: block;
	width: 144px;
	height: auto;
	margin-bottom: 16px;
}

.motion-v2 .chapter-body__credibility-proof h3 {
	margin: 0;
	color: var(--gold-brand);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.2;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.motion-v2 .chapter-body__credibility-proof--award h3 {
	text-transform: uppercase;
}

.motion-v2 .chapter-body__credibility-proof p {
	margin: 12px 0 0;
	color: var(--bone-dim);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.45;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

.motion-v2 .chapter-body__credibility-project {
	isolation: isolate;
	z-index: 1;
}

.motion-v2 .chapter-body__credibility-project--trang-an {
	top: 32.1%;
	left: 0;
	width: 200px;
	height: 200px;
}

.motion-v2 .chapter-body__credibility-project--the-nine {
	top: 60%;
	left: 17.1%;
	width: 150px;
	height: 150px;
}

.motion-v2 .chapter-body__credibility-project--the-nine-detail {
	right: 0;
	bottom: 0;
	width: 200px;
	height: 200px;
}

.motion-v2 .chapter-body__credibility-project--palm-manor {
	bottom: 0;
	left: 37%;
	width: 250px;
	height: 250px;
}

.motion-v2 .chapter-body__credibility-project-media {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
	background: transparent;
}

.motion-v2 .chapter-body__credibility-project-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(13, 11, 9, 0) 62%, rgba(13, 11, 9, 0.2));
	pointer-events: none;
}

.motion-v2 .chapter-body__credibility-project img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.82) saturate(0.9);
}

@media (max-width: 991px) {
	.motion-v2 .chapter-body--credibility .chapter-body__content {
		padding-top: 12dvh;
		padding-bottom: 12dvh;
	}

	.motion-v2 .chapter-body--credibility .chapter-body__intro {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		column-gap: clamp(32px, 6vw, 72px);
	}

	.motion-v2 .chapter-body--credibility .chapter-body__heading-lockup,
	.motion-v2 .chapter-body--credibility .chapter-body__lede {
		grid-column: auto;
	}

	.motion-v2 .chapter-body__credibility-collage {
		--credibility-pulse-scale: 1.3;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		gap: clamp(24px, 5vw, 48px);
		overflow-x: clip;
		overflow-y: visible;
		height: auto;
		min-height: 0;
		margin-top: 112px;
	}

	.motion-v2 .chapter-body__credibility-brand,
	.motion-v2 .chapter-body__credibility-proof,
	.motion-v2 .chapter-body__credibility-project {
		position: relative;
		inset: auto;
		grid-column: auto;
		grid-row: auto;
		width: auto;
		height: auto;
		transform: none;
	}

	.motion-v2 .chapter-body__credibility-brand {
		grid-column: 1 / -1;
		justify-self: center;
		width: min(34vw, 230px);
		height: auto;
		aspect-ratio: 1;
	}

	.motion-v2 .chapter-body__credibility-proof {
		aspect-ratio: 1;
		padding: 0;
	}

	.motion-v2 .chapter-body__credibility-project {
		aspect-ratio: 1;
	}
}

@media (max-width: 767px) {
	.motion-v2 .chapter-body--credibility .chapter-body__intro {
		display: block;
	}

	.motion-v2 .chapter-body--credibility .chapter-body__heading-lockup {
		padding-top: 0;
	}

	.motion-v2 .chapter-body--credibility .chapter-body__lede {
		margin-top: 48px;
	}

	.motion-v2 .chapter-body__credibility-collage {
		--credibility-pulse-scale: 1.12;
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		margin-top: 48px;
		justify-items: center;
	}

	.motion-v2 .chapter-body__credibility-brand {
		--credibility-pulse-start-scale: 1.08;
		--credibility-pulse-scale: 1.12;
		grid-column: auto;
		width: min(36vw, 140px);
	}

	.motion-v2 .chapter-body__credibility-proof {
		grid-column: auto;
		width: min(68vw, 232px);
		aspect-ratio: 1;
		margin-top: 0;
	}

	.motion-v2 .chapter-body__credibility-proof-content {
		width: min(calc(100% - 56px), 176px);
	}

	.motion-v2 .chapter-body__credibility-award-mark {
		width: 56px;
		margin-bottom: 8px;
	}

	.motion-v2 .chapter-body__credibility-portfolio-mark {
		width: 112px;
		margin-bottom: 10px;
	}

	.motion-v2 .chapter-body__credibility-proof p {
		margin-top: 8px;
	}

	.motion-v2 .chapter-body__credibility-project {
		display: none;
	}
}

@media (max-width: 478px) {
	.motion-v2 .chapter-body--credibility .chapter-body__lede {
		font-size: 1.0625rem;
		line-height: 1.5;
	}

	.motion-v2 .chapter-body__credibility-collage {
		gap: 16px;
		margin-top: 40px;
	}

	.motion-v2 .chapter-body__credibility-brand {
		width: min(34vw, 128px);
	}

	.motion-v2 .chapter-body__credibility-proof {
		width: min(64vw, 220px);
		min-height: 0;
		padding: 0;
	}

	.motion-v2 .chapter-body__credibility-proof h3 {
		font-size: 1.0625rem;
	}

	.motion-v2 .chapter-body__credibility-proof p {
		font-size: 0.8125rem;
	}
}

/* Chapter 8 (newsroom) — the final chapter keeps the shared title and octagon
   portal, then lands directly on the title deck's textured brown plate. It has
   no visual stage or opening photograph: the editorial sections themselves are
   the complete body, in truthful document flow from news through the footer. */
.motion-v2 .chapter-body--newsroom {
	overflow: clip;
	background-color: var(--chapter-ground);
	background-image: var(--chapter-noise);
	background-repeat: repeat;
	background-size: 1024px auto;
	background-blend-mode: lighten;
}

@media (max-width: 991px) {
	/* Compact chapters are scrollports. `overflow: clip` above would freeze
	   news → footer at one viewport with no way to reach the rest. */
	.motion-v2 .chapter-body--newsroom {
		overflow-x: hidden;
		overflow-y: auto;
	}
}

.motion-v2 .chapter-body__newsroom-shell {
	position: relative;
	min-height: var(--stage-h);
	padding-top: clamp(120px, 16dvh, 168px);
}

.motion-v2 .chapter-body__newsroom-shell::before,
.motion-v2 .chapter-body__newsroom-shell::after {
	content: '';
	position: absolute;
	z-index: 0;
	left: 50%;
	width: min(92vw, 1240px);
	aspect-ratio: 1;
	border: 1px solid rgba(247, 197, 135, 0.08);
	border-radius: 50%;
	translate: -50% 0;
	pointer-events: none;
}

.motion-v2 .chapter-body__newsroom-shell::before {
	top: 42px;
}

.motion-v2 .chapter-body__newsroom-shell::after {
	top: 1080px;
}

.motion-v2 .chapter-body__news,
.motion-v2 .chapter-body__press,
.motion-v2 .chapter-body__contact,
.motion-v2 .chapter-body__footer {
	position: relative;
	z-index: 1;
	width: var(--layout-container-width);
	max-width: 100%;
	margin-inline: auto;
	padding-inline: max(var(--layout-container-inset), 32px)
		max(var(--layout-container-inset), 88px);
}

.motion-v2 .chapter-body__news-heading,
.motion-v2 .chapter-body__press-heading,
.motion-v2 .chapter-body__contact-intro h2 {
	margin: 0;
	color: var(--gold-brand);
	font-family: var(--font-script);
	font-size: clamp(3rem, 5.4vw, 5.35rem);
	font-weight: 400;
	line-height: 0.94;
	text-wrap: balance;
}

.motion-v2 .chapter-body__news-heading span,
.motion-v2 .chapter-body__press-heading span,
.motion-v2 .chapter-body__contact-intro h2 span {
	display: block;
}

.motion-v2 .chapter-body__news-header {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	margin-bottom: clamp(56px, 8dvh, 88px);
}

.motion-v2 .chapter-body__news-heading {
	grid-column: 2 / span 4;
}

.motion-v2 .chapter-body__news-viewport {
	--news-rail-left-edge: 24px;
	--news-rail-right-edge: 88px;
	width: calc(100vw - var(--news-rail-left-edge) - var(--news-rail-right-edge));
	margin-left: calc(50% - 50vw + var(--news-rail-left-edge) + 28px);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	overscroll-behavior-x: contain;
	touch-action: pan-x pan-y;
	user-select: none;
}

.motion-v2 .chapter-body__news-viewport::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.motion-v2 .chapter-body__news-viewport.is-dragging {
	cursor: grabbing;
}

.motion-v2 .chapter-body__news-viewport.is-dragging,
.motion-v2 .chapter-body__news-viewport.is-settling {
	scroll-snap-type: none;
}

.motion-v2 .chapter-body__news-viewport:focus-visible {
	outline: 2px solid var(--gold-brand);
	outline-offset: 6px;
}

.motion-v2 .chapter-body__news-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 48px) / 3);
	gap: 24px;
	padding-bottom: 4px;
}

.motion-v2 .chapter-body__news-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	scroll-snap-align: start;
}

.motion-v2 .chapter-body__news-media {
	--news-frame-gap: clamp(8px, 0.8vw, 12px);
	position: relative;
	display: block;
	aspect-ratio: 557 / 329;
	overflow: hidden;
	color: inherit;
}

.motion-v2 .chapter-body__news-image-shell {
	position: absolute;
	inset: var(--news-frame-gap);
	display: block;
	overflow: hidden;
	clip-path: url('#motionV2NewsMediaClip');
	-webkit-clip-path: url('#motionV2NewsMediaClip');
}

.motion-v2 .chapter-body__news-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	filter: brightness(0.88) saturate(0.92);
	transition: transform 700ms var(--ease-out-quint), filter 400ms var(--ease-out-quart);
}

.motion-v2 .chapter-body__news-frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.motion-v2 .chapter-body__news-media:hover .chapter-body__news-image,
.motion-v2 .chapter-body__news-media:focus-visible .chapter-body__news-image {
	transform: scale(1.035);
	filter: brightness(0.98) saturate(1);
}

.motion-v2 .chapter-body__news-media:focus-visible,
.motion-v2 .chapter-body__news-title a:focus-visible,
.motion-v2 .chapter-body__octagon-link:focus-visible,
.motion-v2 .chapter-body__footer a:focus-visible {
	outline: 2px solid var(--gold-brand);
	outline-offset: 4px;
}

.motion-v2 .chapter-body__news-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(64px, 5.4vw, 82px);
	align-items: start;
	gap: 24px;
	margin-top: 16px;
	padding-inline: 20px;
}

.motion-v2 .chapter-body__news-copy {
	min-width: 0;
}

.motion-v2 .chapter-body__news-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 0;
	color: var(--bone-dim);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.motion-v2 .chapter-body__news-category {
	padding: 9px 14px;
	border-radius: 999px;
	background: rgba(247, 197, 135, 0.1);
	color: var(--gold-brand);
}

.motion-v2 .chapter-body__news-title {
	margin: 14px 0 0;
	font-size: clamp(1.15rem, 1.55vw, 1.45rem);
	font-weight: 400;
	line-height: 1.32;
	text-transform: uppercase;
}

.motion-v2 .chapter-body__news-title a {
	display: -webkit-box;
	overflow: hidden;
	color: var(--bone);
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.motion-v2 .chapter-body__news-summary {
	display: -webkit-box;
	overflow: hidden;
	margin: 10px 0 0;
	color: var(--bone-dim);
	font-size: 0.9375rem;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.motion-v2 .chapter-body__news-arrow {
	display: grid;
	place-items: center;
	width: clamp(64px, 5.4vw, 82px);
	aspect-ratio: 1;
	margin: 0;
	border: 1px solid rgba(247, 197, 135, 0.44);
	border-radius: 50%;
	color: var(--gold-brand);
	text-decoration: none;
	transition: color 300ms var(--ease-out-quart), background-color 300ms var(--ease-out-quart),
		border-color 300ms var(--ease-out-quart), transform 500ms var(--ease-out-quint);
}

.motion-v2 .chapter-body__news-arrow svg {
	width: 54%;
	height: 54%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.motion-v2 .chapter-body__news-arrow:hover,
.motion-v2 .chapter-body__news-arrow:focus-visible {
	border-color: var(--gold-brand);
	background: var(--gold-brand);
	color: var(--chapter-ground);
	transform: translate(3px, -3px);
}

.motion-v2 .chapter-body__news-arrow:focus-visible {
	outline: 2px solid var(--gold-brand);
	outline-offset: 4px;
}

.motion-v2 .chapter-body__news-controls {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 32px;
}

.motion-v2 .chapter-body__news-dot {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(247, 197, 135, 0.38);
	cursor: pointer;
	transition: background 180ms var(--ease-out-quart), transform 180ms var(--ease-out-quart);
}

.motion-v2 .chapter-body__news-dot:hover,
.motion-v2 .chapter-body__news-dot.is-active {
	background: var(--gold-brand);
	transform: scale(1.12);
}

.motion-v2 .chapter-body__news-dot:focus-visible {
	outline: 2px solid var(--bone);
	outline-offset: 4px;
}

.motion-v2 .chapter-body__octagon-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 142px;
	aspect-ratio: 1;
	margin: 28px auto 0;
	clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
	background: var(--gold-brand);
	color: #34271e;
	font-size: 0.875rem;
	line-height: 1.45;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 250ms var(--ease-out-quart), background 250ms var(--ease-out-quart);
}

.motion-v2 .chapter-body__octagon-link:hover {
	background: #ffd49f;
	transform: translateY(-4px);
}

.motion-v2 .chapter-body__news {
	padding-bottom: clamp(152px, 20dvh, 220px);
}

.motion-v2 .chapter-body__press {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	align-items: start;
	padding-bottom: clamp(152px, 20dvh, 220px);
}

.motion-v2 .chapter-body__press-heading {
	grid-column: 1 / span 4;
	position: sticky;
	top: calc(var(--header-height) + 48px);
	font-size: clamp(2.8rem, 4.5vw, 4.75rem);
}

.motion-v2 .chapter-body__press-list {
	grid-column: 5 / -1;
}

.motion-v2 .chapter-body__press-item {
	display: grid;
	grid-template-columns: minmax(168px, 210px) minmax(0, 1fr) auto;
	gap: 26px;
	align-items: center;
	min-height: 176px;
	padding-block: 20px;
	border-bottom: 1px solid rgba(247, 197, 135, 0.6);
}

.motion-v2 .chapter-body__press-item:first-child {
	border-top: 1px solid rgba(247, 197, 135, 0.6);
}

.motion-v2 .chapter-body__press-media {
	width: 100%;
	aspect-ratio: 4 / 3;
	margin: 0;
	overflow: hidden;
}

.motion-v2 .chapter-body__press-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.86) saturate(0.9);
}

.motion-v2 .chapter-body__press-meta {
	display: grid;
	grid-template-columns: minmax(80px, 1fr) auto;
	gap: 24px;
	align-items: center;
	margin-bottom: 22px;
	color: var(--bone-dim);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.motion-v2 .chapter-body__press-meta img {
	display: block;
	width: auto;
	max-width: 96px;
	height: 32px;
	object-fit: contain;
	object-position: left center;
}

.motion-v2 .chapter-body__press-copy h3 {
	margin: 0;
	color: var(--bone);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.42;
}

.motion-v2 .chapter-body__press-read {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: center;
	padding-bottom: 5px;
	border-bottom: 1px solid currentColor;
	color: var(--bone);
	font-size: 0.875rem;
	white-space: nowrap;
	opacity: 0.72;
}

.motion-v2 .chapter-body__press-read svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.motion-v2 .chapter-body__contact {
	padding-bottom: clamp(120px, 16dvh, 176px);
}

.motion-v2 .chapter-body__contact-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	align-items: start;
}

.motion-v2 .chapter-body__contact-intro {
	grid-column: 1 / span 5;
	grid-row: 1;
	padding-top: 24px;
}

.motion-v2 .chapter-body__contact-intro h2 {
	font-size: clamp(2.8rem, 4.5vw, 4.6rem);
}

.motion-v2 .chapter-body__contact-intro > p {
	max-width: 460px;
	margin: 32px 0 0;
	color: var(--bone-dim);
	font-size: 1rem;
	line-height: 1.7;
}

.motion-v2 .chapter-body__contact-actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	max-width: 500px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.motion-v2 .chapter-body__contact-actions li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--bone-dim);
	font-size: 0.8125rem;
	line-height: 1.45;
	text-align: center;
}

.motion-v2 .chapter-body__contact-icon {
	display: block;
	flex: 0 0 63px;
	width: 63px;
	height: 63px;
	font-size: 0;
}

.motion-v2 .chapter-body__contact-icon img {
	display: block;
	width: 100%;
	height: 100%;
}

.motion-v2 .chapter-body__contact-media {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	margin: 0;
}

.motion-v2 .chapter-body__contact-media img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 310px;
	object-fit: cover;
	filter: brightness(0.82) saturate(0.92);
}

.motion-v2 .chapter-body__contact-form {
	--contact-form-surface: #f9c587;
	--contact-form-ink: #171717;
	--contact-form-line: #a6835a;
	--contact-form-note: #53422d;
	--contact-form-button: #34271e;
	grid-column: 7 / -1;
	grid-row: 1 / span 2;
	z-index: 2;
	width: 100%;
	max-width: 590px;
	justify-self: end;
	margin-right: clamp(24px, 2.5vw, 40px);
	padding: 40px;
	background: var(--contact-form-surface);
	color: var(--contact-form-ink);
}

.motion-v2 .chapter-body__contact-form h2 {
	margin: 0;
	color: var(--contact-form-ink);
	font-size: clamp(1.5rem, 2.5vw, 2.5rem);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: center;
	text-transform: uppercase;
}

.motion-v2 .chapter-body__contact-field {
	margin-top: 20px;
}

.motion-v2 .chapter-body__contact-field label {
	display: block;
	color: var(--contact-form-ink);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.motion-v2 .chapter-body__contact-field input {
	display: block;
	width: 100%;
	height: 42px;
	padding: 8px 0 10px;
	border: 0;
	border-bottom: 1px solid var(--contact-form-line);
	border-radius: 0;
	background: transparent;
	color: var(--contact-form-ink);
	font: inherit;
	font-size: 1rem;
}

.motion-v2 .chapter-body__contact-field input::placeholder {
	color: var(--contact-form-line);
}

.motion-v2 .chapter-body__contact-field input:focus-visible {
	outline: 2px solid var(--contact-form-ink);
	outline-offset: 3px;
}

.motion-v2 .chapter-body__contact-privacy {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 16px 0;
	color: var(--contact-form-note);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.45;
}

.motion-v2 .chapter-body__contact-privacy img {
	display: block;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

.motion-v2 .chapter-body__contact-form button {
	display: block;
	min-width: 180px;
	min-height: 48px;
	margin: 0 auto;
	padding: 10px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--contact-form-button);
	color: var(--bone);
	font: inherit;
	font-size: 1rem;
	text-transform: uppercase;
	opacity: 1;
	cursor: not-allowed;
}

.motion-v2 .chapter-body__footer {
	padding-top: clamp(88px, 12dvh, 128px);
	padding-bottom: 24px;
}

.motion-v2 .chapter-body__footer-grid {
	display: grid;
	grid-template-columns: minmax(290px, 1.65fr) repeat(3, minmax(150px, 1fr));
	gap: clamp(40px, 5vw, 76px);
	align-items: start;
}

.motion-v2 .chapter-body__footer-logo {
	display: block;
	width: min(100%, 320px);
	height: auto;
}

.motion-v2 .chapter-body__footer-leed {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 8px 10px;
	border: 1px solid rgba(244, 239, 231, 0.22);
	border-radius: 3px;
	color: var(--bone-dim);
	font-size: 0.6875rem;
}

.motion-v2 .chapter-body__footer-leed img {
	display: block;
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.motion-v2 .chapter-body__footer-brand > p {
	max-width: 330px;
	margin: 26px 0 0;
	color: var(--bone-dim);
	font-size: 0.875rem;
	line-height: 1.65;
	text-align: center;
}

/**
 * The desktop brand stack is a centred group, so all three of its blocks must
 * share one axis — the column's content centre. Each is narrower than the
 * column (the logo caps at 320px, the paragraph at 330px), so without auto
 * margins they sit flush left and only *look* centred because their own
 * contents are centred inside them. Centring the badge alone, as this block
 * once did, is what made it read as the misaligned one.
 *
 * Must stay after the rules it centres: the paragraph's `margin` shorthand
 * resets the inline margins, and a media query adds no specificity, so source
 * order is what decides here.
 *
 * Below 992px the brand stack is deliberately left-aligned (the paragraph
 * flips to `text-align: left`), so none of this applies there.
 */
@media (min-width: 992px) {
	.motion-v2 .chapter-body__footer-logo,
	.motion-v2 .chapter-body__footer-brand > p {
		margin-inline: auto;
	}

	.motion-v2 .chapter-body__footer-leed {
		display: flex;
		width: max-content;
		margin-inline: auto;
	}
}

.motion-v2 .chapter-body__footer-group h2 {
	margin: 0 0 24px;
	color: var(--gold-brand);
	font-size: 0.9375rem;
	font-weight: 400;
	text-transform: uppercase;
}

.motion-v2 .chapter-body__footer-group ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--bone-dim);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.motion-v2 .chapter-body__footer-group li + li {
	margin-top: 14px;
}

.motion-v2 .chapter-body__footer-group a {
	color: inherit;
	text-decoration: none;
}

.motion-v2 .chapter-body__footer-social {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.motion-v2 .chapter-body__footer-social span {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
}

.motion-v2 .chapter-body__footer-social img {
	display: block;
	width: 42px;
	height: 42px;
	object-fit: contain;
}

.motion-v2 .chapter-body__footer-legal {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	margin-top: clamp(88px, 12dvh, 132px);
	padding-top: 20px;
	border-top: 1px solid rgba(247, 197, 135, 0.7);
	color: var(--bone-dim);
	font-size: 1rem;
	line-height: 1.33;
}

.motion-v2 .chapter-body__footer-copyright {
	margin: 0;
}

.motion-v2 .chapter-body__footer-legal nav {
	display: flex;
	gap: 40px;
	font-size: 0.875rem;
}

.motion-v2 .chapter-body__footer-legal a {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 1279px) {
	.motion-v2 .chapter-body__news,
	.motion-v2 .chapter-body__press,
	.motion-v2 .chapter-body__contact,
	.motion-v2 .chapter-body__footer {
		padding-inline: 32px 76px;
	}

	.motion-v2 .chapter-body__press-heading {
		grid-column: 1 / span 3;
	}

	.motion-v2 .chapter-body__press-list {
		grid-column: 4 / -1;
	}

	.motion-v2 .chapter-body__press-item {
		grid-template-columns: 180px minmax(0, 1fr);
	}

	.motion-v2 .chapter-body__press-read {
		grid-column: 2;
		justify-self: start;
	}

	.motion-v2 .chapter-body__footer-grid {
		grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(130px, 1fr));
		gap: 40px;
	}
}

@media (max-width: 991px) {
	.motion-v2 .chapter-body__news,
	.motion-v2 .chapter-body__press {
		padding-inline: 28px 64px;
	}

	.motion-v2 .chapter-body__contact,
	.motion-v2 .chapter-body__footer {
		padding-inline: 28px;
	}

	.motion-v2 .chapter-body__news-heading {
		grid-column: 1 / span 7;
	}

	.motion-v2 .chapter-body__news-viewport {
		--news-rail-left-edge: 16px;
		--news-rail-right-edge: 64px;
	}

	.motion-v2 .chapter-body__news-track {
		grid-auto-columns: calc((100% - 24px) / 2);
	}

	.motion-v2 .chapter-body__press {
		display: block;
	}

	.motion-v2 .chapter-body__press-heading {
		position: static;
		margin-bottom: 72px;
	}

	.motion-v2 .chapter-body__press-item {
		grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) auto;
	}

	.motion-v2 .chapter-body__press-read {
		grid-column: auto;
	}

	.motion-v2 .chapter-body__contact-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.motion-v2 .chapter-body__contact-intro,
	.motion-v2 .chapter-body__contact-media,
	.motion-v2 .chapter-body__contact-form {
		grid-column: 1;
	}

	.motion-v2 .chapter-body__contact-intro {
		grid-row: 1;
	}

	.motion-v2 .chapter-body__contact-media {
		display: none;
	}

	.motion-v2 .chapter-body__contact-form {
		grid-row: auto;
		max-width: none;
		margin-right: 0;
		margin-top: 0;
	}

	.motion-v2 .chapter-body__footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.motion-v2 .chapter-body__footer-brand {
		grid-column: 1 / -1;
	}

	.motion-v2 .chapter-body__footer-brand > p {
		margin-inline: auto;
		text-align: center;
	}

	.motion-v2 .chapter-body__footer-logo {
		margin-inline: auto;
	}

	.motion-v2 .chapter-body__footer-leed {
		display: flex;
		width: max-content;
		margin-inline: auto;
	}
}

@media (max-width: 767px) {
	.motion-v2 .chapter-body__newsroom-shell {
		padding-top: 96px;
	}

	.motion-v2 .chapter-body__news,
	.motion-v2 .chapter-body__press {
		padding-inline: 20px 52px;
	}

	.motion-v2 .chapter-body__contact,
	.motion-v2 .chapter-body__footer {
		padding-inline: 20px;
	}

	.motion-v2 .chapter-body__news-heading,
	.motion-v2 .chapter-body__press-heading,
	.motion-v2 .chapter-body__contact-intro h2 {
		font-size: clamp(2.5rem, 12vw, 4rem);
	}

	.motion-v2 .chapter-body__news-header {
		display: block;
		margin-bottom: 48px;
	}

	.motion-v2 .chapter-body__news-track {
		grid-auto-columns: min(84vw, 380px);
		gap: 18px;
	}

	.motion-v2 .chapter-body__news-viewport {
		--news-rail-left-edge: 12px;
		--news-rail-right-edge: 52px;
	}

	.motion-v2 .chapter-body__news-title {
		font-size: 1rem;
	}

	.motion-v2 .chapter-body__news-content {
		gap: 16px;
		padding-inline: 12px;
	}

	.motion-v2 .chapter-body__octagon-link {
		width: 124px;
	}

	.motion-v2 .chapter-body__press-heading {
		margin-bottom: 48px;
	}

	.motion-v2 .chapter-body__press-item {
		grid-template-columns: 128px minmax(0, 1fr);
		gap: 18px;
		min-height: 0;
		padding-block: 18px;
	}

	.motion-v2 .chapter-body__press-copy h3 {
		font-size: 0.875rem;
	}

	.motion-v2 .chapter-body__press-meta {
		grid-template-columns: minmax(64px, 1fr) auto;
		gap: 12px;
		margin-bottom: 12px;
		font-size: 0.6875rem;
	}

	.motion-v2 .chapter-body__press-meta img {
		max-width: 76px;
		height: 26px;
	}

	.motion-v2 .chapter-body__press-read {
		grid-column: 2;
		font-size: 0.75rem;
	}

	.motion-v2 .chapter-body__contact-actions {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.motion-v2 .chapter-body__contact-actions li {
		flex-direction: row;
		justify-content: flex-start;
		text-align: left;
	}

	.motion-v2 .chapter-body__contact-media img {
		min-height: 220px;
	}

	.motion-v2 .chapter-body__contact-form {
		padding: 32px 24px;
	}

	.motion-v2 .chapter-body__footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.motion-v2 .chapter-body__footer-brand {
		grid-column: 1 / -1;
	}

	.motion-v2 .chapter-body__footer-contact {
		grid-column: 1 / -1;
	}

	.motion-v2 .chapter-body__footer-legal,
	.motion-v2 .chapter-body__footer-legal nav {
		flex-direction: column;
	}

	.motion-v2 .chapter-body__footer-legal nav {
		gap: 14px;
	}
}

@media (max-width: 478px) {
	.motion-v2 .chapter-body__news,
	.motion-v2 .chapter-body__press {
		padding: 16px;
	}

	.motion-v2 .chapter-body__contact,
	.motion-v2 .chapter-body__footer {
		padding-inline: 16px;
	}

	.motion-v2 .chapter-body__press-item {
		grid-template-columns: minmax(0, 1fr);
	}

	.motion-v2 .chapter-body__press-media,
	.motion-v2 .chapter-body__press-read {
		grid-column: 1;
	}

	.motion-v2 .chapter-body__press-media {
		aspect-ratio: 16 / 9;
	}
}

@media (prefers-reduced-motion: reduce) {
	.motion-v2 .chapter-body__news-image,
	.motion-v2 .chapter-body__news-dot,
	.motion-v2 .chapter-body__news-arrow,
	.motion-v2 .chapter-body__product-arrow,
	.motion-v2 .chapter-body__octagon-link {
		transition: none;
	}

	.motion-v2 .chapter-body__news-viewport {
		scroll-behavior: auto;
	}

	.motion-v2 .chapter-body__credibility-pulse {
		display: none;
	}

	.motion-v2 .chapter-body__credibility-float-surface {
		transform: none !important;
	}

	.motion-v2 .chapter-body__visual-spacer {
		height: var(--stage-h);
	}

	.motion-v2 .chapter-body__content {
		position: relative;
	}

	.motion-v2 .chapter-body__stat-button,
	.motion-v2 .chapter-body__artwork::after,
	.motion-v2 .chapter-body__artwork-value {
		transition: none;
	}

	.motion-v2 .chapter-body__experience-thumbnails {
		scroll-behavior: auto;
	}

	.motion-v2 .chapter-body__experience-thumbnail {
		transition: none;
	}

	.motion-v2 .chapter-body__architecture-track {
		transform: none !important;
		will-change: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Progress rail
 * ------------------------------------------------------------------------ */

.motion-v2 .deck-progress {
	position: fixed;
	right: clamp(1rem, 2.5vw, 2.5rem);
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.motion-v2 .deck-progress__dot {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-block: -2px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bone);
	font: inherit;
	cursor: pointer;
}

@media (pointer: coarse) {
	.motion-v2 .deck-progress__dot {
		margin-block: 0;
	}
}

.motion-v2 .deck-progress__dot::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rule);
	transition: background 300ms var(--ease-out-quint),
		transform 300ms var(--ease-out-quint);
}

.motion-v2 .deck-progress__dot::after {
	content: attr(data-label);
	position: absolute;
	top: 50%;
	right: 38px;
	width: max-content;
	max-width: 240px;
	padding: 0.5rem 0.75rem;
	background: var(--ink-plate);
	color: var(--bone);
	font-size: 0.6875rem;
	line-height: 1.35;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0;
	transform: translate(8px, -50%);
	pointer-events: none;
	transition: opacity 200ms var(--ease-out-quart),
		transform 200ms var(--ease-out-quart);
}

.motion-v2 .deck-progress__dot.is-active::before {
	background: var(--gold);
	transform: scale(1.6);
}

.motion-v2 .deck-progress__dot:hover::before {
	transform: scale(1.35);
}

.motion-v2 .deck-progress__dot:hover::after,
.motion-v2 .deck-progress__dot:focus-visible::after {
	opacity: 1;
	transform: translate(0, -50%);
}

.motion-v2 .deck-progress__dot:active::before {
	transform: scale(0.9);
	transition-duration: 100ms;
}

.motion-v2 .deck-progress__dot:focus-visible {
	outline: 2px solid var(--gold-brand);
	outline-offset: -8px;
}

/* Mobile keeps the full nine-destination rail but moves it out of the reading
   column. The visual dots stay 6px; their evenly distributed 44px-high buttons
   span the available width and sit above the device gesture area. Labels remain
   available through aria-label, while the desktop hover card is suppressed so
   a tapped edge destination cannot create a clipped floating label. */
@media (max-width: 991px) {
	.motion-v2 .deck-progress {
		top: auto;
		right: auto;
		bottom: max(8px, env(safe-area-inset-bottom));
		left: 50%;
		width: min(calc(100vw - 16px), 396px);
		transform: translateX(-50%);
		flex-direction: row;
	}

	.motion-v2 .deck-progress__dot {
		flex: 1 1 0;
		width: auto;
		margin: 0;
		touch-action: manipulation;
	}

	.motion-v2 .deck-progress__dot::after {
		display: none;
	}
}

/* A progress-rail click is non-linear navigation, so spatial slide travel has
   no useful direction to communicate. The View Transition API captures the
   currently rendered page and the destination title as two real states; these
   animations soften only that rail-owned handoff into a restrained cross-fade.
   Wheel, touch and keyboard commits never start a view transition. The fixed
   navigation surfaces get their own named groups so the cross-fade cannot
   flash them while the slide content changes underneath.

   The header's group is scoped to the transition's own lifecycle class
   (added right before startViewTransition() fires, removed once it settles;
   see goToFromRail() in motion-v2-deck.js) rather than applied at all times.
   A named group forces its own stacking context, and backdrop-filter cannot
   see past that context's boundary — so an always-on rule left the header's
   glass blur permanently broken, not just mid-transition. Scoping it to the
   brief transition window trades a short, primed fade (see
   .is-motion-v2-rail-priming above) for a working blur the rest of the time.
   .deck-progress carries no backdrop-filter, so it has no such conflict and
   keeps its group at all times. */
html.is-motion-v2-rail-transition .motion-v2 .site-header {
	view-transition-name: motion-v2-navbar;
}

.motion-v2 .deck-progress {
	view-transition-name: motion-v2-progress;
}

@keyframes motion-v2-rail-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes motion-v2-rail-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

::view-transition-old(root) {
	animation: motion-v2-rail-fade-out 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
	mix-blend-mode: normal;
}

::view-transition-new(root) {
	animation: motion-v2-rail-fade-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
	mix-blend-mode: normal;
}

/* The old named captures remain at full opacity when their animations are
   disabled. Hiding them is the clean cut: only the new navigation snapshot is
   visible, so its pixels cannot brighten by compositing over the old one. */
::view-transition-old(motion-v2-navbar),
::view-transition-old(motion-v2-progress) {
	display: none !important;
}

::view-transition-new(motion-v2-navbar),
::view-transition-new(motion-v2-progress) {
	animation: none;
	mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
	.motion-v2 .chapter__entry,
	.motion-v2 .chapter-body__close,
	.motion-v2 .deck-progress__dot::before,
	.motion-v2 .deck-progress__dot::after {
		transition: none;
	}
}

/* Custom styles */
@media (max-width: 991px) and (min-width: 768px) {
	.motion-v2 .chapter-body__credibility-float-surface {
		width: 75%;
		height: 75%;
		margin: 0 auto;
		max-width: 275px;
		max-height: 275px;
	}
}

@media (max-width: 560px) {
	.motion-v2 .chapter-body__news-viewport {
		margin-left: 0;
		width: 100%;
	}

	.motion-v2 .chapter-body__news-track {
        grid-auto-columns: calc(100vw - 32px);
    }
}