/* =========================================================================
   The Wealth Initiative — theme.css
   Black / charcoal / illuminated gold. One continuous cinematic homepage.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Self-hosted Inter (variable, upright + italic). SIL OFL. No CDN.
   ------------------------------------------------------------------------- */
@font-face {
	font-family: "Inter";
	src: url("../fonts/InterVariable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* -------------------------------------------------------------------------
   1. Design tokens.
   ------------------------------------------------------------------------- */
:root {
	--wi-black: #0a0a0a;
	--wi-black-pure: #000;
	--wi-charcoal: #15120d;
	--wi-charcoal-2: #1c1813;
	--wi-gold: #d4af37;          /* overridable via Customizer */
	--wi-gold-light: #f6e6ab;
	--wi-gold-deep: #a9801f;
	--wi-text: #efe9dc;
	--wi-text-dim: #b9b0a0;

	--wi-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wi-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--wi-maxw: 1200px;
	--wi-pad: clamp(1.25rem, 5vw, 5rem);

	/* Vertical yellow-gold foil: top highlight -> gold -> sheen -> gold, so every
	   letter reads the same (no left-bright/right-dark split). */
	--wi-gold-gradient: linear-gradient(180deg, #fff4b0 0%, #ffdc50 34%, #f5c518 56%, #ffe98c 74%, #f6cc2c 100%);
	--wi-fallback-bg: radial-gradient(120% 90% at 50% 15%, #1a140a 0%, #0c0a07 55%, var(--wi-black-pure) 100%);
}

/* -------------------------------------------------------------------------
   2. Reset / base.
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--wi-black-pure);
	color: var(--wi-text);
	font-family: var(--wi-body);
	font-size: clamp(1rem, 1.05vw + 0.6rem, 1.2rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--wi-gold); text-decoration: none; }
a:hover, a:focus { color: var(--wi-gold-light); }

h1, h2, h3 {
	font-family: var(--wi-display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.015em;
	font-optical-sizing: auto;
	margin: 0;
}

/* Accessibility helpers. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.wi-skip-link:focus {
	position: fixed; top: 1rem; left: 1rem; z-index: 1000;
	width: auto; height: auto; clip: auto;
	padding: 0.75rem 1.25rem;
	background: var(--wi-gold); color: #000; border-radius: 4px;
}
:focus-visible { outline: 2px solid var(--wi-gold-light); outline-offset: 3px; }

/* -------------------------------------------------------------------------
   3. Gold typography utilities.
   ------------------------------------------------------------------------- */
.wi-gold-text {
	background: var(--wi-gold-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--wi-gold);
}
/* Over video/photo backgrounds, give gold text a dark halo so thin strokes and
   descenders (e.g. the tail of a "g") stay legible on any busy area. */
.wi-section--video .wi-gold-text,
.wi-section--final .wi-gold-text {
	text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 40px rgba(212, 175, 55, 0.18);
}
.wi-eyebrow {
	font-family: var(--wi-display);
	text-transform: uppercase;
	letter-spacing: 0.42em;
	font-size: clamp(0.7rem, 1.4vw, 0.95rem);
	color: var(--wi-gold-light);
	margin: 0 0 1.1rem;
	padding-left: 0.42em; /* balance trailing letter-spacing */
}

.wi-divider { display: inline-block; color: var(--wi-gold); line-height: 0; margin: 1.2rem 0; }
.wi-divider svg { max-width: min(220px, 60vw); height: auto; }

/* -------------------------------------------------------------------------
   4. Site header / brand / footer.
   ------------------------------------------------------------------------- */
.wi-site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	padding: clamp(0.8rem, 2vw, 1.5rem) var(--wi-pad);
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.wi-site-header__inner { max-width: var(--wi-maxw); margin: 0 auto; }
.wi-brand { pointer-events: auto; display: inline-flex; align-items: center; gap: 0.6rem; }
.wi-brand--text { font-family: var(--wi-display); }
.wi-brand__mark {
	display: inline-grid; place-items: center;
	width: 2.6rem; height: 2.6rem; border-radius: 50%;
	border: 1px solid var(--wi-gold);
	color: var(--wi-gold); font-size: 0.85rem; letter-spacing: 0.08em;
}
.wi-brand__name {
	text-transform: uppercase; letter-spacing: 0.22em;
	font-size: clamp(0.8rem, 1.6vw, 1rem); color: var(--wi-text);
}
.wi-brand--logo img { max-height: 54px; width: auto; }

.wi-site-footer {
	background: var(--wi-black-pure); color: var(--wi-text-dim);
	text-align: center; padding: 2.5rem var(--wi-pad);
	border-top: 1px solid rgba(212,175,55,0.18);
}
.wi-site-footer__copy { margin: 0; font-size: 0.9rem; letter-spacing: 0.04em; }

/* -------------------------------------------------------------------------
   5. Section shell + media layer (with safe-mode fallback).
   ------------------------------------------------------------------------- */
.wi-home { position: relative; }

.wi-section { position: relative; width: 100%; isolation: isolate; }

.wi-section--video,
.wi-section--final {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	overflow: hidden;
}

/* The media layer holds the background video and the poster/black-gold fallback. */
.wi-media {
	position: absolute; inset: 0; z-index: -2;
	background-color: var(--wi-black);
	background-image: var(--wi-poster, var(--wi-fallback-bg));
	background-size: cover;
	background-position: center;
	will-change: transform;
}
.wi-media__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.8s ease;
}
.wi-media__video.is-playing { opacity: 1; }

/* Readability scrim over every video section: top/bottom darkening + a soft
   vignette that pools shadow behind the centred text for a premium look. */
.wi-section--video::after,
.wi-section--final::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(130% 100% at 50% 42%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.58) 100%),
		linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 32%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.82) 100%);
	pointer-events: none;
}

/* Hero: a bright daytime sky needs a deeper, pooled overlay behind the headline
   so the gold wordmark and tagline stay legible and feel cinematic. */
.wi-section--hero::after {
	background:
		radial-gradient(95% 75% at 50% 46%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 52%, rgba(0,0,0,0) 78%),
		linear-gradient(to bottom, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.5) 56%, rgba(0,0,0,0.86) 100%);
}

/* Final section: pool shadow behind the top headline and darken the bottom for
   the invitation + CTA, so both read cleanly on a bright sky. */
.wi-section--final::after {
	background:
		radial-gradient(95% 70% at 50% 20%, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 80%),
		linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.42) 32%, rgba(0,0,0,0.5) 64%, rgba(0,0,0,0.9) 100%);
}

.wi-section__inner {
	position: relative; z-index: 2;
	width: 100%; max-width: var(--wi-maxw);
	margin: 0 auto;
	padding: clamp(6rem, 12vh, 9rem) var(--wi-pad) clamp(3rem, 8vh, 6rem);
	display: flex; flex-direction: column;
}
.wi-section__inner--center { align-items: center; text-align: center; justify-content: center; }
.wi-section__inner--top    { justify-content: center; align-items: center; text-align: center; }
.wi-section__inner--left   { justify-content: center; align-items: flex-start; text-align: left; }
.wi-section__inner--split  { justify-content: space-between; align-items: center; text-align: center; }

/* -------------------------------------------------------------------------
   6. Section 01 — Opening cinematic.
   ------------------------------------------------------------------------- */
.wi-hero__brand-line {
	font-family: var(--wi-display);
	text-transform: uppercase; letter-spacing: 0.28em;
	font-size: clamp(1.1rem, 3vw, 2rem);
	margin: 0 0 0.6rem;
	text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}
.wi-hero__tagline {
	font-style: italic; color: var(--wi-text);
	letter-spacing: 0.18em; font-size: clamp(0.85rem, 1.8vw, 1.15rem);
	margin: 0 0 clamp(2rem, 6vh, 4rem);
	text-shadow: 0 1px 18px rgba(0,0,0,0.7);
}
.wi-hero__headline {
	font-size: clamp(1.8rem, 5vw, 3.6rem);
	margin: 0 0 0.3rem;
	text-shadow: 0 2px 30px rgba(0,0,0,0.55);
}
.wi-hero__emphasis {
	display: block;
	font-style: italic;
	font-size: clamp(3rem, 11vw, 8rem);
	line-height: 1.12;            /* room for the descender on "g" */
	padding-bottom: 0.08em;       /* keep the tail inside the clip box */
}
/* Stronger, more specific halo + glow so the big emphasis word reads on any
   part of the skyline (descenders included). */
.wi-section--hero .wi-hero__emphasis {
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 48px rgba(212, 175, 55, 0.3);
}

/* -------------------------------------------------------------------------
   7. Section 02 — Translucent parallax overlay.
   ------------------------------------------------------------------------- */
.wi-section--overlay {
	min-height: 100vh; min-height: 100svh;
	display: flex; overflow: hidden;
}
.wi-section--overlay .wi-media { z-index: -2; }
.wi-overlay__scrim {
	position: absolute; inset: 0; z-index: -1;
	background: rgba(14,12,9,0.72);
	backdrop-filter: saturate(115%) brightness(0.8);
	-webkit-backdrop-filter: saturate(115%) brightness(0.8);
}
.wi-overlay__panel {
	position: relative; z-index: 2;
	max-width: 880px; margin: auto; text-align: center;
	padding: clamp(6rem, 12vh, 9rem) var(--wi-pad);
}
.wi-overlay__headline {
	font-size: clamp(1.9rem, 6vw, 4.2rem);
	margin: 0 0 1.6rem;
}
.wi-overlay__headline em { font-style: italic; }
.wi-overlay__body {
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	color: var(--wi-text); max-width: 46ch; margin: 0 auto 2rem;
}
.wi-overlay__subline {
	font-style: italic; letter-spacing: 0.26em; text-transform: uppercase;
	color: var(--wi-gold-light); font-size: clamp(0.8rem, 1.6vw, 1rem);
}

/* -------------------------------------------------------------------------
   8. Section 03 — Cinematic question (left aligned).
   ------------------------------------------------------------------------- */
.wi-question__headline {
	font-size: clamp(1.8rem, 5.2vw, 4rem);
	max-width: 18ch; margin: 0;
}
.wi-question__emphasis {
	display: block; font-style: italic;
	font-size: clamp(3rem, 10vw, 7.5rem); line-height: 1.12;
	padding-bottom: 0.08em;
}

/* -------------------------------------------------------------------------
   9. Bridge sections (pure black, centered gold). 04 / 08 / 12.
   ------------------------------------------------------------------------- */
.wi-section--bridge { background: var(--wi-black-pure); }
.wi-bridge__inner {
	max-width: 960px; margin: 0 auto; text-align: center;
	padding: clamp(5rem, 16vh, 9rem) var(--wi-pad);
}
.wi-bridge__title {
	font-size: clamp(1.75rem, 5vw, 3.5rem);
	letter-spacing: 0.02em; line-height: 1.14; margin: 0;
}
/* Space only between two stacked headline lines (not before the "THE 200" mega). */
.wi-bridge__title + .wi-bridge__title { margin-top: 0.18em; }
.wi-bridge__title--sm { font-size: clamp(1.4rem, 3.4vw, 2.2rem); }
.wi-bridge__mega {
	font-size: clamp(2.4rem, 7vw, 5.2rem);
	font-style: italic;
	letter-spacing: 0.03em; line-height: 1.02; margin: 0.1em 0 0;
}
.wi-bridge__stats { margin: 1.4rem 0; }
.wi-bridge__stat {
	font-family: var(--wi-display);
	font-size: clamp(1.3rem, 3.4vw, 2.1rem);
	letter-spacing: 0.08em; line-height: 1.25;
}
.wi-bridge__stat--accent { font-style: italic; }
.wi-bridge__text {
	max-width: 62ch; margin: 1.3rem auto; color: var(--wi-text-dim);
	font-size: clamp(1rem, 1.6vw, 1.2rem);
}
.wi-bridge__emphasis {
	font-family: var(--wi-display); font-style: italic;
	font-size: clamp(1.6rem, 4.5vw, 3rem);
	margin-top: 1.4rem;
}
.wi-bridge__emphasis-line {
	display: block; font-family: var(--wi-display);
	font-size: clamp(1.3rem, 3.4vw, 2.1rem); line-height: 1.2; margin: 0;
}
.wi-bridge__emphasis-line + .wi-bridge__emphasis-line { margin-top: 0.3em; }

/* Section 12 (Why Now): make only the 2nd line ("THE OPPORTUNITY HAS CHANGED.") smaller. */
#section-12 .wi-bridge__title + .wi-bridge__title { font-size: clamp(1.4rem, 4vw, 1.75rem); }

/* -------------------------------------------------------------------------
   10. Centered / top headings for video sections 05 / 07 / 09 / 11.
   ------------------------------------------------------------------------- */
.wi-screen__headline {
	font-size: clamp(1.9rem, 6vw, 4.4rem);
	letter-spacing: 0.02em; margin: 0; max-width: 20ch;
}
.wi-screen__headline .wi-screen__line { display: block; }

/* -------------------------------------------------------------------------
   11. Carousels (06 three-panel, 10 six-panel).
   ------------------------------------------------------------------------- */
.wi-section--carousel { background: var(--wi-black-pure); overflow: hidden; }
.wi-carousel-section__inner {
	max-width: 1500px; margin: 0 auto;
	padding: clamp(4rem, 12vh, 7rem) clamp(0.5rem, 3vw, 2rem);
}
.wi-carousel__intro {
	max-width: 70ch; margin: 0 auto clamp(2rem, 5vh, 3.5rem);
	text-align: center;
}
.wi-carousel__intro p { margin: 0.2rem 0; }
.wi-carousel__intro .wi-carousel__intro-accent { color: var(--wi-gold-light); }

.wi-carousel { position: relative; }
.wi-carousel__viewport { overflow: hidden; }
.wi-carousel__track {
	display: flex;
	align-items: center;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.wi-panel {
	position: relative;
	flex: 0 0 60%;
	margin: 0 1.2%;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	overflow: hidden;
	background: var(--wi-charcoal);
	box-shadow: 0 20px 60px rgba(0,0,0,0.6);
	transform: scale(0.84);
	opacity: 0.45;
	transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), opacity 0.6s ease;
}
.wi-panel.is-active { transform: scale(1); opacity: 1; z-index: 2; }
.wi-panel__media {
	position: absolute; inset: 0;
	background-color: var(--wi-charcoal);
	background-image: var(--wi-poster, var(--wi-fallback-bg));
	background-size: cover; background-position: center;
}
.wi-panel__video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: 0; transition: opacity 0.8s ease;
}
.wi-panel__video.is-playing { opacity: 1; }
.wi-panel::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.4) 100%);
}
.wi-panel__content {
	position: absolute; inset: auto 0 0 0; z-index: 2;
	padding: clamp(1.2rem, 3vw, 2.4rem);
	text-align: center;
}
.wi-panel__label {
	font-family: var(--wi-display);
	text-transform: uppercase; letter-spacing: 0.12em;
	font-size: clamp(1.4rem, 3.2vw, 2.6rem);
	margin: 0 0 0.4rem;
}
.wi-panel__heading {
	font-family: var(--wi-display); font-size: clamp(1rem, 1.8vw, 1.3rem);
	margin: 0 0 0.5rem; color: var(--wi-text);
}
.wi-panel__text {
	margin: 0 auto; max-width: 42ch; color: var(--wi-text-dim);
	font-size: clamp(0.9rem, 1.4vw, 1.05rem);
}

/* Carousel controls. */
.wi-carousel__controls {
	display: flex; align-items: center; justify-content: center;
	gap: 1.5rem; margin-top: clamp(1.5rem, 4vh, 2.5rem);
}
.wi-carousel__arrow {
	appearance: none; cursor: pointer;
	width: 3rem; height: 3rem; border-radius: 50%;
	background: transparent; border: 1px solid rgba(212,175,55,0.6);
	color: var(--wi-gold); font-size: 1.2rem; line-height: 1;
	display: grid; place-items: center;
	transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.wi-carousel__arrow:hover, .wi-carousel__arrow:focus-visible {
	background: var(--wi-gold); color: #000;
}
.wi-carousel__dots { display: flex; gap: 0.6rem; }
.wi-carousel__dot {
	appearance: none; cursor: pointer; padding: 0;
	width: 0.7rem; height: 0.7rem; border-radius: 50%;
	border: 1px solid rgba(212,175,55,0.6); background: transparent;
	transition: background 0.3s ease, transform 0.2s ease;
}
.wi-carousel__dot.is-active { background: var(--wi-gold); transform: scale(1.2); }

/* -------------------------------------------------------------------------
   12. Section 13 — Final cinematic + CTA.
   ------------------------------------------------------------------------- */
.wi-final__inner { justify-content: space-between; text-align: center; align-items: center; min-height: inherit; }
.wi-final__headline {
	font-size: clamp(1.8rem, 4.6vw, 3.4rem);
	letter-spacing: 0.02em; line-height: 1.14; margin: 0.6em 0 0;
	max-width: 24ch;
}
.wi-final__headline .wi-screen__line { display: block; }
.wi-final__invite { margin-top: auto; display: flex; flex-direction: column; align-items: center; }
.wi-final__invite .wi-divider { margin-bottom: 1.2rem; }
.wi-final__brand {
	font-family: var(--wi-display); text-transform: uppercase;
	letter-spacing: 0.3em; font-size: clamp(1rem, 2.4vw, 1.5rem);
	margin: 0 0 0.5rem;
}
.wi-final__sub { color: var(--wi-text); font-size: clamp(1rem, 1.8vw, 1.3rem); margin: 0 0 1.8rem; }

.wi-cta {
	display: inline-flex; align-items: center; gap: 0.6rem;
	font-family: var(--wi-display);
	text-transform: uppercase; letter-spacing: 0.18em;
	font-size: clamp(0.85rem, 1.6vw, 1.05rem);
	color: var(--wi-gold-light);
	padding: 1rem 2.2rem; border-radius: 4px;
	border: 1px solid var(--wi-gold);
	background: rgba(212,175,55,0.05);
	box-shadow: 0 0 24px rgba(212,175,55,0.25), inset 0 0 18px rgba(212,175,55,0.08);
	transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.wi-cta:hover, .wi-cta:focus-visible {
	background: var(--wi-gold); color: #000;
	box-shadow: 0 0 40px rgba(212,175,55,0.55);
	transform: translateY(-2px);
}
.wi-cta__arrow { font-size: 1.1em; }

/* -------------------------------------------------------------------------
   13. Parallax + scroll-reveal.
   Parallax JS sets --wi-shift continuously; reveal animates --wi-reveal from an
   offset to 0 when a section enters the viewport. Both feed the same transform
   via calc() so they compose instead of overwriting each other. The custom
   property is registered with @property so it can animate smoothly (browsers
   without @property simply snap — the opacity fade still plays everywhere).
   ------------------------------------------------------------------------- */
@property --wi-reveal {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}
@property --wi-rscale {
	syntax: "<number>";
	inherits: false;
	initial-value: 1;
}

/* Parallax translate and reveal (translate + scale) compose into one transform
   via calc(), so neither overwrites the other. */
[data-wi-parallax] {
	transform: translate3d(0, calc(var(--wi-shift, 0px) + var(--wi-reveal, 0px)), 0) scale(var(--wi-rscale, 1));
	will-change: transform;
}

/* Reveal start-state (Apple-style fade + lift + gentle scale) applies only when
   JS is active (.wi-js). Without JS, or before the deferred script runs, content
   is fully visible — protecting accessibility and the hero's LCP. */
.wi-js [data-wi-reveal] {
	opacity: 0;
	--wi-reveal: 60px;
	--wi-rscale: 0.98;
	transition:
		opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
		--wi-reveal 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
		--wi-rscale 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wi-js [data-wi-reveal].is-inview {
	opacity: 1;
	--wi-reveal: 0px;
	--wi-rscale: 1;
}
/* Reveal targets that are not parallax layers still need the transform. */
.wi-js [data-wi-reveal]:not([data-wi-parallax]) {
	transform: translate3d(0, var(--wi-reveal, 0px), 0) scale(var(--wi-rscale, 1));
	will-change: transform, opacity;
}

/* Slow cinematic Ken Burns zoom on the opening hero media (video or poster). */
@keyframes wi-kenburns {
	from { transform: scale(1.02); }
	to   { transform: scale(1.12); }
}
.wi-section--hero .wi-media {
	animation: wi-kenburns 30s ease-in-out infinite alternate;
}

/* -------------------------------------------------------------------------
   14. Fallback (non-home) templates.
   ------------------------------------------------------------------------- */
.wi-fallback { min-height: 70vh; padding: clamp(7rem, 14vh, 10rem) var(--wi-pad) 4rem; }
.wi-fallback__inner { max-width: 760px; margin: 0 auto; }
.wi-fallback__title { font-size: clamp(1.8rem, 5vw, 3rem); margin-bottom: 1.5rem; }
.wi-fallback__content a { text-decoration: underline; }

/* -------------------------------------------------------------------------
   15. Responsive.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.wi-panel { flex-basis: 72%; }
}
@media (max-width: 680px) {
	.wi-panel { flex-basis: 86%; margin: 0 2%; }
	.wi-media { background-image: var(--wi-poster-mobile, var(--wi-poster, var(--wi-fallback-bg))); }
	.wi-hero__emphasis { font-size: clamp(2.8rem, 18vw, 5rem); }
	.wi-section__inner--left { align-items: center; text-align: center; }
	.wi-question__headline { max-width: none; }
}

/* -------------------------------------------------------------------------
   16. Reduced motion: disable parallax + autoplay transforms, keep layout.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	[data-wi-parallax] { transform: none !important; }
	[data-wi-reveal] {
		opacity: 1 !important;
		--wi-reveal: 0px !important;
		--wi-rscale: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.wi-section--hero .wi-media { animation: none !important; transform: none !important; }
	.wi-carousel__track,
	.wi-panel,
	.wi-media__video,
	.wi-panel__video { transition: none !important; }
	.wi-media__video, .wi-panel__video { opacity: 1; }
}