/* ---------- Hero story (photographic scroll sequence) ---------- */
.emx-story { --story-h: 1150vh; position: relative; background: #060607; color: #EDEFEC; isolation: isolate;
	--emx-text: #EDEFEC; --emx-text-muted: #A9B1AB; --emx-accent: #5AFF00; --emx-accent-ink: #5AFF00; --emx-on-accent: #0B0D0C; --emx-line: #262B27; }
.emx-story__stage { position: relative; }
.emx-story__photo { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.emx-story__photo > div, .emx-story__box > div { position: absolute; inset: 0; }
.emx-story__box { transform-origin: 0 0; }
.emx-story__layer, .emx-story__clip, .emx-story__fx { display: none; }
.emx-story__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; }
.emx-story__scrim { position: absolute; inset: 0 0 auto 0; height: 100svh; min-height: 560px; pointer-events: none; background: linear-gradient(90deg, rgba(6,8,7,.8) 0%, rgba(6,8,7,.45) 38%, rgba(6,8,7,0) 60%); }
.emx-story__intro { position: absolute; left: 0; right: 0; top: 0; height: 100svh; min-height: 560px; display: flex; flex-direction: column; justify-content: center; max-width: 1400px; margin: 0 auto; padding: calc(var(--emx-header-h, 72px) + 24px) var(--emx-gutter, 40px) 120px; box-sizing: border-box; }
.emx-story__intro > * { max-width: 36rem; }
.emx-story__intro h1 { margin: 0 0 20px; color: #EDEFEC; }
.emx-story__intro > p { font-size: 1.1875rem; line-height: 1.55; color: #D9DED9; margin: 0 0 28px; }
.emx-story__intro .emx-story__cta { margin: 0; }
/* Static (no 3D): the story is a readable list under the photo. */
.emx-story__beats { list-style: none; margin: 0 auto; padding: clamp(3rem, 2rem + 4vw, 6rem) var(--emx-gutter, 40px); max-width: 1320px; display: grid; gap: 40px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.emx-story__eyebrow { margin: 0 0 8px; font-family: var(--emx-font-mono, ui-monospace, monospace); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--emx-accent-ink); display: flex; gap: 10px; align-items: baseline; }
.emx-story__num { color: #8E968F; }
.emx-story__h { margin: 0 0 10px; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.12; color: #EDEFEC; text-wrap: balance; }
.emx-story__p { margin: 0; color: #C9CFCA; font-size: 1.0625rem; line-height: 1.6; max-width: 34rem; }
.emx-story__colours { max-width: 1320px; margin: 0 auto; padding: 0 var(--emx-gutter, 40px) 48px; }
.emx-story__readout { display: none; }
.emx-story__swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.emx-story__swatches li { width: 34px; height: 12px; border-radius: 99px; background: var(--c); opacity: calc(.35 + var(--b, 1) * .65); box-shadow: 0 0 calc(var(--b, 1) * 14px) var(--c); }
.emx-story__swatches li.is-ir { background: #1a1b1c; box-shadow: none; outline: 1px dashed #6a6e72; }
.emx-story__nv, .emx-story__note, .emx-story__mark { display: none; }

/* ---------- Live mode (motion allowed) ---------- */
.emx-story.is-3d { height: var(--story-h); }
.emx-story.is-3d .emx-story__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.emx-story.is-3d .emx-story__photo { position: absolute; inset: 0; height: auto; min-height: 0; overflow: hidden; }
.emx-story.is-3d .emx-story__box { will-change: transform; }
.emx-story.is-3d .emx-story__layer { display: block; opacity: 0; visibility: hidden; }
.emx-story.is-3d .emx-story__clip { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; opacity: 0; visibility: hidden; background: transparent; }
.emx-story.is-3d .emx-story__fx { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Night-vision lens: the white capsule through a simulated image intensifier (monochrome yellow-green,
   grain, vignette to a dark field stop). */
.emx-story__nvlens { -webkit-mask-image: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), #000 calc(var(--r, 200px) - 1.5px), transparent var(--r, 200px)); mask-image: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), #000 calc(var(--r, 200px) - 1.5px), transparent var(--r, 200px)); }
.emx-story__nvlens img { filter: grayscale(1) brightness(1.45) contrast(1.15) sepia(1) hue-rotate(38deg) saturate(2.2); }
.emx-story__nvlens::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), rgba(20,40,10,.18) 0, rgba(20,40,10,.18) calc(var(--r, 200px) * .55), rgba(0,0,0,.82) var(--r, 200px)); mix-blend-mode: multiply; }
.emx-story__nvlens::after { content: ""; position: absolute; inset: -50%; opacity: .28; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 .95 0 0 0 0 .45 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation: emx-nvgrain .25s steps(4) infinite; }
@keyframes emx-nvgrain { 0% { transform: translate(0, 0); } 25% { transform: translate(-17px, 9px); } 50% { transform: translate(11px, -13px); } 75% { transform: translate(-6px, -4px); } 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .emx-story__nvlens::after { animation: none; } }
.emx-story.is-3d .emx-story__scrim { height: auto; bottom: 0; min-height: 0; }
.emx-story.is-3d .emx-story__intro { height: auto; bottom: 0; min-height: 0; }
.emx-story.is-3d .emx-story__mark { display: block; position: absolute; left: 0; width: 1px; height: 1px; top: calc(var(--f) * (100% - 100svh)); }
.emx-story.is-3d .emx-story__beats { position: absolute; inset: 0; margin: 0; padding: 0; max-width: none; display: block; pointer-events: none; }
.emx-story.is-3d .emx-story__beat {
	position: absolute; left: max(var(--emx-gutter, 40px), calc((100vw - 1400px) / 2 + var(--emx-gutter, 40px))); top: 50%; width: min(32rem, 36vw);
	opacity: var(--emx-k, 0); transform: translateY(calc(-50% + (1 - var(--emx-k, 0)) * 34px - var(--emx-o, 0) * 26px)); visibility: hidden;
}
.emx-story.is-3d .emx-story__beat.is-on { visibility: visible; will-change: opacity, transform; }
/* 1.4.0: the 1.1.1 reveal again: the eyebrow tracks in and the heading is wiped in from the top. 1.1.1 animated
   letter-spacing and clip-path (re-layout and repaint of the text on every frame); here both are transforms only
   (hero-story.js buildReveal() wraps the heading and splits the eyebrow): letter i moves by i * (1 - k) * .5em, what
   the extra letter spacing gave it, and the heading's clipping window moves up while the heading inside moves down
   by the same amount, so the visible part grows from the top like inset(0 0 (1 - k) * 100% 0). Unlike 1.1.1, the
   window reaches a little past the line box (padding, cancelled by a negative margin), so at rest the descenders
   of g, p and j are no longer cut off. */
.emx-story.is-3d .emx-story__beat .emx-story__h { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3.25rem); line-height: 1.06; letter-spacing: -.01em; }
.emx-story__hw, .emx-story__hi { display: block; }
.emx-story.is-3d .emx-story__hw { overflow: hidden; margin: -.12em 0 -.22em; transform: translate3d(0, calc((var(--emx-k, 0) - 1) * 100%), 0); }
.emx-story.is-3d .emx-story__hi { padding: .12em 0 .22em; transform: translate3d(0, calc((1 - var(--emx-k, 0)) * 100%), 0); }
.emx-story.is-3d .emx-story__beat.is-on .emx-story__hw, .emx-story.is-3d .emx-story__beat.is-on .emx-story__hi { will-change: transform; }
.emx-story__lt { display: inline-block; white-space: pre; }
.emx-story__lw { display: inline-block; white-space: nowrap; } /* 1.4.7: one word of the split eyebrow */
.emx-story.is-3d .emx-story__lt { transform: translateX(calc(var(--i, 0) * (1 - var(--emx-k, 0)) * .5em)); }
.emx-story__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.emx-story.is-3d .emx-story__beat .emx-story__p { opacity: calc(var(--emx-k, 0) * var(--emx-k, 0)); transform: translateY(calc((1 - var(--emx-k, 0)) * 12px)); }
.emx-story.is-3d .emx-story__beat::before { content: ""; position: absolute; left: -24px; top: 6px; bottom: 6px; width: 2px; background: var(--emx-accent-ink); transform-origin: top; transform: scaleY(var(--emx-k, 0)); opacity: .9; }
.emx-story.is-3d .emx-story__colours { position: absolute; left: 0; right: 0; bottom: calc(118px + 4vh); padding: 0; margin: 0; max-width: none; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; transform: translateY(12px); transition: opacity 400ms ease, transform 400ms ease; pointer-events: none; }
.emx-story.is-3d.is-colours .emx-story__colours { opacity: 1; transform: none; }
.emx-story.is-3d .emx-story__readout { display: block; margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-family: var(--emx-font-display, system-ui); }
.emx-story.is-3d .emx-story__readout span { color: #A9B1AB; font-size: .6em; font-family: var(--emx-font-mono, monospace); margin-left: 10px; }
.emx-story.is-3d .emx-story__swatches li { transition: transform 300ms ease, opacity 300ms ease; opacity: .45; }
.emx-story.is-3d .emx-story__swatches li.is-on { transform: scaleX(1.6); opacity: 1; }
.emx-story.is-3d .emx-story__nv { display: flex; position: absolute; left: 0; top: 0; transform: translateX(-50%); align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 99px; background: rgba(6,8,7,.72); border: 1px solid rgba(120,255,140,.45); color: #9dffae; font-size: .875rem; font-family: var(--emx-font-mono, monospace); letter-spacing: .04em; opacity: 0; white-space: nowrap; }
.emx-story.is-3d .emx-story__note { display: block; position: absolute; right: var(--emx-gutter, 40px); bottom: calc(80px + 2vh); margin: 0; max-width: 22rem; text-align: right; font-size: .75rem; color: #A3AAA4; text-shadow: 0 1px 6px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6); opacity: 0; transition: opacity 300ms ease; }
.emx-story.is-3d.is-inside .emx-story__note { opacity: 1; }
.emx-story.is-3d .emx-story__photo, .emx-story.is-3d .emx-story__intro { will-change: opacity; }
@media (max-width: 767px) {
	.emx-story { --story-h: 1000vh; }
	.emx-story__photo img, .emx-story.is-3d .emx-story__clip { object-position: 50% 50%; }
	/* Phones: the photo fills the top part (the 4:5 crop shows the whole capsule), dark below. */
	.emx-story.is-3d .emx-story__photo { bottom: auto; height: min(125vw, 64svh); top: calc(var(--emx-header-h, 64px) * .6); }
	/* Static layout (reduced motion, motion off, no JS) on portrait phones: a 4:5 box, so the crop is shown whole. */
	@media (orientation: portrait) {
		.emx-story:not(.is-3d) .emx-story__photo { height: 125vw; max-height: 80svh; min-height: 0; }
		.emx-story:not(.is-3d) .emx-story__scrim { display: none; }
		.emx-story:not(.is-3d) .emx-story__intro { position: relative; height: auto; min-height: 0; justify-content: flex-start; padding-top: 24px; padding-bottom: 8px; }
	}
	.emx-story.is-3d .emx-story__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(0deg, #060807, rgba(6,8,7,0)); }
	.emx-story.is-3d .emx-story__photo > div { background: #060807; }
	.emx-story__swatches { gap: 6px; justify-content: center; }
	.emx-story__swatches li { width: 22px; height: 10px; }
	.emx-hint { left: auto; right: 18px; transform: none; bottom: 70px; }
	.emx-story__scrim { background: linear-gradient(0deg, rgba(6,8,7,.94) 0%, rgba(6,8,7,.6) 38%, rgba(6,8,7,0) 66%); }
	.emx-story__intro { justify-content: flex-end; padding-bottom: 110px; }
	.emx-story__intro > p { font-size: 1.0625rem; }
	.emx-story.is-3d .emx-story__beat { left: var(--emx-gutter, 16px); right: var(--emx-gutter, 16px); width: auto; top: auto; bottom: calc(84px + 2vh); transform: translateY(calc((1 - var(--emx-k, 0)) * 26px - var(--emx-o, 0) * 20px)); padding: 18px 18px 18px 22px; background: linear-gradient(0deg, rgba(6,8,7,.94), rgba(6,8,7,.84)); border-radius: 14px; }
	.emx-story.is-3d .emx-story__beat::before { left: 0; top: 18px; bottom: 18px; }
	.emx-story.is-3d .emx-story__beat .emx-story__h { font-size: 1.5rem; }
	.emx-story.is-3d .emx-story__beat .emx-story__p { font-size: .9375rem; }
	.emx-story.is-3d .emx-story__colours { bottom: auto; top: calc(var(--emx-header-h, 64px) + var(--emx-adminbar, 0px) + 20px); }
	.emx-story.is-3d .emx-story__note { left: var(--emx-gutter, 16px); right: auto; top: calc(var(--emx-header-h, 64px) + var(--emx-adminbar, 0px) + 12px); bottom: auto; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .emx-story.is-3d .emx-story__colours, .emx-story.is-3d .emx-story__swatches li { transition: none; } }

/* ---------- Timeline, scroll hint, auto-scroll ---------- */
.emx-tl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; pointer-events: none; padding: 0 var(--emx-gutter, 16px) max(10px, env(safe-area-inset-bottom)); }
.emx-tl__bar { pointer-events: auto; max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 8px; border-radius: 99px; background: rgba(10,13,11,.92); border: 1px solid rgba(255,255,255,.1); color: #EDEFEC; transform: translateY(0); transition: transform 350ms var(--emx-ease-out, ease), opacity 350ms ease; }
.emx-tl.is-hidden .emx-tl__bar { transform: translateY(140%); opacity: 0; }
.emx-tl__play { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; }
.emx-tl__play:hover, .emx-tl__play:focus-visible { border-color: var(--emx-accent-ink, #5AFF00); color: var(--emx-accent-ink, #5AFF00); }
.emx-tl__play .emx-tl__i-pause { display: none; }
.emx-tl.is-auto .emx-tl__play .emx-tl__i-play { display: none; }
.emx-tl.is-auto .emx-tl__play .emx-tl__i-pause { display: block; }
.emx-tl__track { position: relative; flex: 1; min-width: 0; }
.emx-tl__line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(255,255,255,.14); border-radius: 2px; }
.emx-tl__fill { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; width: 100%; background: var(--emx-accent-ink, #5AFF00); transform-origin: left; transform: scaleX(var(--tl, 0)); border-radius: 2px; box-shadow: 0 0 10px rgba(90,255,0,.5); }
.emx-tl__list { position: relative; list-style: none; margin: 0; padding: 0; height: 36px; }
.emx-tl__list li { position: absolute; top: 0; height: 100%; transform: translateX(-50%); left: calc(var(--x) * 100%); }
.emx-tl__list a { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 4px; padding: 0 4px; text-decoration: none; color: #9AA29C; font-size: .6875rem; letter-spacing: .04em; white-space: nowrap; font-family: var(--emx-font-mono, monospace); }
.emx-tl__list a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #0A0D0B; border: 2px solid rgba(255,255,255,.35); transition: border-color 200ms, background 200ms, transform 200ms; }
.emx-tl__list a span { position: absolute; bottom: calc(100% + 6px); padding: 3px 8px; border-radius: 6px; background: rgba(10,13,11,.85); opacity: 0; transform: translateY(4px); transition: opacity 200ms, transform 200ms; pointer-events: none; }
.emx-tl__list a:hover span, .emx-tl__list a:focus-visible span, .emx-tl__list li.is-current a span { opacity: 1; transform: none; }
.emx-tl__list li.is-past a::before { border-color: var(--emx-accent-ink, #5AFF00); background: var(--emx-accent-ink, #5AFF00); }
.emx-tl__list li.is-current a::before { border-color: var(--emx-accent-ink, #5AFF00); transform: scale(1.35); box-shadow: 0 0 10px rgba(90,255,0,.7); }
.emx-tl__list a:focus-visible { outline: 2px solid var(--emx-focus, #5AFF00); outline-offset: 2px; border-radius: 6px; }
.emx-tl__now { flex: none; min-width: 7.5em; font-size: .8125rem; color: #C9CFCA; display: none; }
/* 1.4.5: the scroll hint's text and line are bigger (15 px text, 28 px line). */
.emx-hint { position: fixed; left: 50%; bottom: 72px; z-index: 59; transform: translateX(-50%); display: flex; flex-direction: row; align-items: center; gap: 14px; color: #D9DED9; font-size: .9375rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--emx-font-mono, monospace); pointer-events: none; opacity: 0; transition: opacity 500ms ease; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.emx-hint.is-on { opacity: 1; }
.emx-hint__line { width: 3px; height: 28px; border-radius: 2px; background: linear-gradient(180deg, rgba(90,255,0,0), #5AFF00); animation: emx-hint 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes emx-hint { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(12px); opacity: 0; } }
@media (max-width: 767px) {
	.emx-tl__list a span { display: none; }
	.emx-tl__now { display: block; }
	.emx-tl__bar { gap: 10px; }
	.emx-hint { bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) { .emx-hint__line { animation: none; } }
html:not(.emx-tl-on) .emx-tl, html:not(.emx-tl-on) .emx-hint { display: none; }

/* Hand-off to the applications film: the stage floats above the film, blended with screen (the film's
   black shows the photo, its text stays readable) while the picture zooms into the glow and an iris
   closes on it; the film then opens on its first scene's glow. */
/* No isolation while handing off: the fixed stage must stack and blend over the film that follows. */
/* 1.3.0: no z-index on the section either. A z-index made the section a stacking context of its own, so the stage
   blended only with the section and simply covered the film: on a computer, the film's title card never showed. */
.emx-story.is-handoff { isolation: auto; z-index: auto; }
.emx-story.is-handoff .emx-story__stage { position: fixed; inset: 0; height: 100vh; height: 100svh; z-index: 45; mix-blend-mode: screen; pointer-events: none; }
/* 1.4.0: only the scrim (and the skip control, below) is hidden here: at the hand-off the intro, beats, colours, badge and
   note are already out (p 0.999 and later), and hiding them again restyled every element inside them in the hand-off's
   frame. */
.emx-story.is-handoff .emx-story__scrim { visibility: hidden; }
/* 1.4.0: near the end the stage is fixed in place at rest (hero-story.js, is-fixed), exactly where the sticky stage is
   stuck, so the switch from sticky to fixed (a layout rebuild of the whole stage) never falls into a tick or the
   hand-off's frame. */
.emx-story.is-3d.is-fixed .emx-story__stage { position: fixed; inset: 0; height: 100vh; height: 100svh; }

/* 1.0.7: the night-vision lens and the colour panel never overlap; reduced motion shows the glowing capsule, not the daylight photo. */
.emx-story.is-3d.is-nv .emx-story__colours { opacity: 0; }
html:not(.motion-ok) .emx-story:not(.is-3d) .emx-story__day { display: none; }
html:not(.motion-ok) .emx-hint { display: none; } /* the scroll hint belongs to the animated story */
/* 1.1.1: landscape phones rest on each text now, so it must fit between the header and the timeline. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) {
	.emx-story.is-3d .emx-story__beat { width: min(32rem, 46vw); }
	.emx-story.is-3d .emx-story__beat .emx-story__h { font-size: clamp(1.25rem, 0.9rem + 2.4vh, 1.75rem); }
	.emx-story.is-3d .emx-story__beat .emx-story__p { font-size: .9375rem; }
}

/* 1.2.0: skip the story (the client: "skip watching the entire hero"). Top right of the stage, under the header,
   in the live story and in the static layout; hidden while the stage floats over the film in the hand-off.
   1.3.0: the header sits below the WordPress admin bar when one is shown (--emx-adminbar, theme), so the control
   is placed below both, with a clear gap, inside the safe area; no backdrop blur (it re-blurred the video on every frame). */
.emx-story { --emx-skip-top: calc(var(--emx-adminbar, 0px) + var(--emx-header-h, 72px) + max(16px, env(safe-area-inset-top, 0px))); }
.emx-story__skip { position: absolute; z-index: 6; top: var(--emx-skip-top); right: max(var(--emx-gutter, 40px), calc((100vw - 1400px) / 2 + var(--emx-gutter, 40px)), calc(env(safe-area-inset-right, 0px) + 12px));
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 18px; border-radius: 999px; box-sizing: border-box;
	background: rgba(6,8,7,.82); border: 1px solid rgba(237,239,236,.34); color: #EDEFEC; font-size: .9375rem; font-weight: 500; line-height: 1; text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.emx-story__skip:hover { background: rgba(6,8,7,.82); border-color: #5AFF00; color: #FFFFFF; }
.emx-story__skip:focus-visible { outline: 2px solid #5AFF00; outline-offset: 3px; }
.emx-story__skip .emx-icon { transition: transform 150ms var(--emx-ease-out, ease); }
.emx-story__skip:hover .emx-icon { transform: translateY(2px); }
.emx-story.is-handoff .emx-story__skip { visibility: hidden; }
@media (max-width: 767px) {
	.emx-story { --emx-skip-top: calc(var(--emx-adminbar, 0px) + var(--emx-header-h, 64px) + max(12px, env(safe-area-inset-top, 0px))); }
	.emx-story__skip { min-height: 44px; padding: 0 12px 0 16px; font-size: .9375rem; }
	/* The colour panel and the illustration note sit under the skip control on phones. */
	.emx-story.is-3d .emx-story__colours { top: calc(var(--emx-skip-top) + 56px); }
	.emx-story.is-3d .emx-story__note { top: calc(var(--emx-skip-top) + 56px); }
}
@media (prefers-reduced-motion: reduce) { .emx-story__skip, .emx-story__skip .emx-icon { transition: none; } }
/* The film (the skip target) takes focus without drawing a ring round the whole section. */
[data-emx="apps-film"]:focus { outline: none; }
/* 1.4.0: the same for the section "Hoppa över" lands on (hero-story.js marks it). */
[data-emx-skip-target]:focus { outline: none; }
/* 1.2.0: landscape phones. The intro fits under the header, and the colour panel sits to the right of the text. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) {
	.emx-story.is-3d .emx-story__intro { justify-content: flex-end; padding-top: calc(var(--emx-header-h, 72px) + 12px); padding-bottom: 56px; }
	.emx-story__intro h1 { font-size: clamp(1.5rem, 0.9rem + 4.4vh, 2.25rem); margin-bottom: 10px; }
	.emx-story__intro > p { font-size: .9375rem; margin-bottom: 14px; }
	.emx-story.is-3d .emx-story__colours { left: auto; right: var(--emx-gutter, 24px); bottom: calc(64px + 2vh); align-items: flex-end; gap: 8px; }
	.emx-story.is-3d .emx-story__readout { font-size: 1.125rem; }
	.emx-story__swatches { gap: 6px; }
	.emx-story__swatches li { width: 22px; height: 10px; }
}

/* 1.3.0: night-vision lens as a round window moved by transforms (hero-story.js builds it): the filtered photo is
   rasterised once, the slide is done by the compositor, and the vignette and grain need no mask redrawn per frame. */
.emx-story__nvlens.is-win { -webkit-mask-image: none; mask-image: none; }
.emx-story__nvlens.is-win::before, .emx-story__nvlens.is-win::after { content: none; }
.emx-story__nvwin { position: absolute; border-radius: 50%; overflow: hidden; will-change: transform; isolation: isolate; }
.emx-story__nvimg { position: absolute; will-change: transform; }
.emx-story__nvvig { position: absolute; inset: 0; background: radial-gradient(circle closest-side, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 55%, rgba(0,0,0,.82) 100%); }
.emx-story__nvgrain { position: absolute; inset: -50%; opacity: .28; mix-blend-mode: screen; will-change: transform; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 .95 0 0 0 0 .45 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation: emx-nvgrain .25s steps(4) infinite; }
.emx-story:not(.is-nv) .emx-story__nvgrain { animation: none; }
@media (prefers-reduced-motion: reduce) { .emx-story__nvgrain { animation: none; } }
/* Hand-off iris: black outside the disc (the stage is screen-blended over the film, so black reads as transparent). */
.emx-story__iris { position: absolute; inset: 0; display: none; pointer-events: none; }
.emx-story.is-3d .emx-story__photo > .emx-story__iris { background: radial-gradient(circle at var(--ix, 50%) var(--iy, 50%), rgba(0,0,0,0) var(--ir0, 0px), #000 var(--ir1, 0px)); } /* beats the phone rule that paints the photo's layers dark */
/* 1.3.0: every picture that crossfades over the photo is its own compositor layer, so a fade changes only an
   opacity value and never repaints the photo box (hidden layers have visibility: hidden and hold no pixels). */
.emx-story.is-3d .emx-story__layer, .emx-story.is-3d .emx-story__day { will-change: opacity; }
/* 1.3.0: no animation ticks while nothing shows it. */
.emx-hint:not(.is-on) .emx-hint__line, .emx-story:not(.is-nv) .emx-story__nvlens::after { animation: none; }
/* 1.3.0: touch screens tap the whole track (story-ui.js picks the nearest chapter); the dots are too close for fingers. */
.emx-tl.is-coarse .emx-tl__track { cursor: pointer; }
.emx-tl.is-coarse .emx-tl__list { height: 44px; }
.emx-tl.is-coarse .emx-tl__list a { pointer-events: none; }
.emx-tl.is-coarse .emx-tl__play { width: 44px; height: 44px; }
/* 1.3.0: the scroll hint clears the current chapter's label above the timeline; the film's title card eyebrow is centred. */
@media (min-width: 768px) { .emx-hint { bottom: 112px; } }
/* 1.4.0: the phone placement of the scroll hint (right, clear of the intro's button) sat before the base rule above
   and lost to it, so on phones the hint was centred over the button (staging check, 2 Oct; fixed there by a hotfix
   in Extra CSS, which can stay). Repeated here, after the base rule. */
@media (max-width: 767px) { .emx-hint { left: auto; right: 18px; transform: none; bottom: 70px; } }
.is-film .emx-af__kicker { margin-inline: auto; max-width: none; }