/* ==========================================================================
   Balu Portfolio
   Typography, spacing scale, nav, hero and reveal system ported from the
   Papa Bear Salon theme. Accent stays Balu's saffron.
   ========================================================================== */

:root {
	color-scheme: dark;

	/* ── Palette ── */
	--bg:       #000000;
	--bg-alt:   #0a0a0a;
	--surface:  #101010;
	--fg:       #f4f2ee;
	--fg-soft:  #b0aba2;
	--fg-faint: #7a766d;
	--line:     #262521;
	--accent:   #e9a23b;
	--ink:      #0a0a0a;

	/* ── Type ── */
	--font-display: 'DM Sans', sans-serif;
	--font-body:    'DM Sans', sans-serif;
	--transition: 0.38s cubic-bezier(0.4, 0, 0.2, 1);

	/* ── Fluid scale: one rule that scales continuously across every
	   viewport instead of snapping at fixed breakpoints. ── */
	--space-section-y: clamp(64px, 11vw, 120px);
	--space-section-x: clamp(20px, 5vw, 40px);
	--space-lg: clamp(32px, 6vw, 80px);
	--space-md: clamp(20px, 4vw, 48px);
	--nav-h: clamp(64px, 8vw, 72px);

	--radius: 10px;
	--radius-sm: 6px;
	--shell: 1800px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------- Reset */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* JS owns the glide once Lenis starts — retire CSS smooth scrolling so the
   two can never fight. It stays on for no-JS visitors. */
html.pb-anim { scroll-behavior: auto; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* `clip` clips exactly like `hidden` but does NOT create a scroll
	   container, which is what makes `hidden` fight smooth-scroll libraries
	   and produce jitter. `hidden` stays as the fallback. */
	overflow-x: hidden;
	overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p, dl, dd, dt, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #3d3b36; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px; top: 0;
	z-index: 2000;
	padding: 12px 20px;
	background: var(--accent);
	color: var(--ink);
	font-weight: 600;
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* --------------------------------------------------------------- Layout */

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--space-section-x);
}

.section { padding-block: var(--space-section-y); }
.section--work  { background: var(--bg); }
.section--stats { background: var(--bg-alt); border-top: 1px solid var(--line); }

.section__head { text-align: center; margin-bottom: var(--space-md); }

.eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px;
}

.section__title {
	font-family: var(--font-display);
	font-size: clamp(38px, 5.6vw, 68px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--fg);
}

/* ═══════════════ NAVBAR ═══════════════ */

.nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	padding: 0 var(--space-section-x);
	height: var(--nav-h);
	transition: background var(--transition), box-shadow var(--transition);
}

.nav.scrolled {
	/* solid glass — backdrop blur repainted on every scroll frame is a
	   measurable jank source */
	background: rgba(0, 0, 0, 0.96);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}

.nav.hero-nav { color: var(--fg); }
.nav.hero-nav .nav__links a { color: rgba(255, 255, 255, 0.9); }

/* Over the hero the CTA is liquid glass: frosted capsule, hairline border,
   specular top edge. Scrolled state stays the solid mark. */
.nav.hero-nav .nav__cta {
	background: rgba(255, 255, 255, 0.12);
	color: var(--fg);
	border-color: rgba(255, 255, 255, 0.26);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 30px rgba(0, 0, 0, 0.28);
}
.nav.hero-nav .nav__cta:hover { background: rgba(255, 255, 255, 0.22); color: var(--fg); }

.nav__logo { display: flex; align-items: center; flex-shrink: 0; }

.nav__logo-mark {
	font-family: var(--font-display);
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
	text-transform: lowercase;
	color: var(--fg);
}

.nav__logo .custom-logo { height: clamp(40px, 5vw, 52px); width: auto; }

.nav__links {
	display: flex;
	gap: clamp(20px, 3vw, 40px);
	margin-left: clamp(24px, 5vw, 60px);
	flex: 1;
}

.nav__links a {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	opacity: 0.8;
	transition: opacity 0.2s;
}
.nav__links a:hover { opacity: 1; }

.nav__cta {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-left: clamp(12px, 1.4vw, 18px);
	padding: 10px 22px;
	border: 1.5px solid var(--fg);
	border-radius: 999px;
	background: var(--fg);
	color: var(--ink);
	transition: var(--transition);
	white-space: nowrap;
}
.nav__cta:hover { background: transparent; color: var(--fg); }

/* ═══════════════ HERO — full-bleed classic ═══════════════ */

.hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }

.hero__video {
	width: 100%; height: 100%;
	object-fit: cover;

	/* NO scale animation here. Papa Bear runs an 8s zoom on a still
	   photograph, where one rasterisation is reused for every frame. Doing the
	   same to a <video> makes the browser resample a freshly decoded frame at a
	   slightly different scale 60 times a second, and because this clip is
	   1280px wide being drawn across a ~1900px hero it is already upscaled —
	   the compounded resampling is what reads as shaking.

	   A fixed slight overscale keeps the edges clean without any per-frame
	   rescaling, and promoting the element to its own compositor layer keeps
	   the video off the main thread while the page scrolls. */
	transform: translateZ(0) scale(1.02);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* The hero layer itself is promoted too, so the fixed nav compositing over it
   never forces a repaint of the video beneath. */
.hero__bg { transform: translateZ(0); }

/* Bottom tinted to --bg so the footage melts into the dark page */
.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.35) 0%,
		rgba(0, 0, 0, 0.0) 40%,
		rgba(0, 0, 0, 0.78) 100%
	);
}

.hero__nav-spacer { height: var(--nav-h); }

.hero__content {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding: 0 clamp(20px, 5vw, 50px) clamp(14px, 2vw, 20px);
	animation: fadeUp 1s 0.4s both;
}

.hero__tagline {
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(14px, 1.7vw, 18px);
	font-weight: 500;
	letter-spacing: 0.3px;
	max-width: 30ch;
	text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
}

.hero__title {
	position: relative;
	z-index: 2;
	padding: 0 clamp(16px, 4vw, 28px) clamp(20px, 4vw, 28px);
}

/* No-JS fallback only: without the html.js flag GSAP is not driving the words,
   so the title fades up on its own. With JS the words rise out of their masks
   instead, and running both at once would double-animate the same box. */
html:not(.js) .hero__title { animation: fadeUp 1s 0.2s both; }

.hero__title-text {
	font-family: var(--font-display);
	font-size: clamp(36px, 10.4vw, 126px);
	font-weight: 900;
	color: var(--fg);
	line-height: 0.9;
	letter-spacing: clamp(-4px, -0.03em, -2px);
	text-transform: uppercase;
	display: block;
	white-space: nowrap;
}

.hero-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero-word__inner { display: inline-block; will-change: transform; }

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------- Filters */

.filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: var(--space-md);
}

.filter {
	padding: 10px 20px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--fg-soft);
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 999px;
	transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.filter:hover { color: var(--fg); border-color: var(--fg-faint); }
.filter.is-active { color: var(--ink); background: var(--fg); border-color: var(--fg); }

/* --------------------------------------------------------------- Grid */

.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);   /* phones: two side by side */
	gap: 12px;
}

@media (min-width: 700px)  { .grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (min-width: 1500px) { .grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } }
@media (min-width: 1900px) { .grid { grid-template-columns: repeat(6, 1fr); } }

.card { display: block; }

.card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--surface);
	aspect-ratio: 9 / 16;
	isolation: isolate;
	transition: transform 0.5s var(--ease);
}

.card:hover .card__media,
.card:focus-visible .card__media { transform: translateY(-6px); }

.card__video, .card__img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}

.card__tag {
	position: absolute;
	z-index: 3;
	top: 9px; left: 9px;
	padding: 5px 10px;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--fg);
	background: rgba(0, 0, 0, 0.66);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: var(--radius-sm);
}

.card__title {
	position: absolute;
	z-index: 3;
	left: 0; right: 0; bottom: 0;
	padding: 34px 12px 12px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--fg);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.card:hover .card__title,
.card:focus-visible .card__title { opacity: 1; transform: translateY(0); }

.card__play {
	position: absolute;
	z-index: 3;
	top: 50%; left: 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: rgba(244, 242, 238, 0.94);
	color: var(--ink);
	opacity: 0;
	scale: 0.8;
	transition: opacity 0.3s var(--ease), scale 0.3s var(--ease);
}
.card__play svg { width: 20px; height: 20px; }

.card:hover .card__play,
.card:focus-visible .card__play { opacity: 1; scale: 1; }

/* Hidden by filter, or beyond the visible row budget */
.card.is-hidden,
.card.is-clipped { display: none; }

.grid__empty { text-align: center; color: var(--fg-soft); padding-block: 40px; }

.grid__more { text-align: center; margin-top: var(--space-md); }

/* The underline button, matching Papa Bear's View More */
.view-more-btn {
	display: inline-block;
	background: none;
	border: none;
	border-bottom: 1.5px solid var(--fg);
	padding: 0 0 3px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--fg);
	cursor: pointer;
	transition: opacity 0.2s;
}
.view-more-btn:hover { opacity: 0.7; }

/* --------------------------------------------------------------- Stats */

.stats {
	display: grid;
	/* Stacked on phones — four numbers side by side were too small to read */
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

@media (min-width: 620px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat {
	position: relative;
	background: var(--bg-alt);
	padding: 30px 18px 28px;
	text-align: center;
}

@media (min-width: 768px) { .stat { padding: 42px 24px 38px; } }

.stat__label {
	order: 2;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--fg-soft);
	margin-top: 12px;
}

.stat__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(34px, 6.5vw, 58px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--fg);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

/* Reserve the final width so digits fill a fixed box as they count up,
   rather than pushing the unit sideways. */
.stat__num {
	display: inline-block;
	min-width: calc(var(--digits, 1) * 1ch);
	text-align: right;
}

.stat__unit {
	font-size: 0.52em;
	font-weight: 600;
	color: var(--accent);
	margin-left: 0.06em;
}

.stat__suffix {
	font-size: 0.5em;
	font-weight: 600;
	color: var(--accent);
	margin-left: 0.1em;
}

/* A saffron rule that fills in step with the count */
.stat__rule {
	position: absolute;
	left: 18px; right: 18px; bottom: 0;
	height: 2px;
	background: var(--line);
	overflow: hidden;
	border-radius: 2px;
}

.stat__rule i {
	display: block;
	height: 100%; width: 100%;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.6s var(--ease);
}

.stat.is-counted .stat__rule i { transform: scaleX(1); }

.stats__foot { text-align: center; margin-top: var(--space-md); }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	background: var(--fg);
	color: var(--ink);
	border: 1.5px solid var(--fg);
	border-radius: 999px;
	transition: var(--transition);
}
.btn:hover { background: transparent; color: var(--fg); }

/* --------------------------------------------------------------- Footer */

.site-footer {
	background: var(--bg);
	border-top: 1px solid var(--line);
	padding: var(--space-md) 0;
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.site-footer__name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: -0.01em;
}

.site-footer__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--fg-soft);
}
.site-footer__meta a { transition: color 0.2s; }
.site-footer__meta a:hover { color: var(--accent); }

.entry__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(28px, 5vw, 48px);
	line-height: 1.1;
	margin-bottom: 18px;
}
.entry__content p { margin-bottom: 1em; }

/* ═══════════════ MOBILE MENU — Möbius-style curtain ═══════════════
   The desktop nav is untouched. At <=768px the inline links + CTA hide and a
   "Menu" text button opens a pure-black overlay that DROPS DOWN from the top;
   the links then stagger in top to bottom. Closing lets the curtain keep
   falling downward and off, so both motions travel the same way.

   Mechanism — a clip-path curtain with NO transition in its idle state, so
   returning to idle after a close is instant with no reverse morph. Only the
   .menu-open / .menu-closing states carry a transition. */

.nav__toggle { display: none; }
.mobmenu     { display: none; }

.nav__toggle {
	align-items: center;
	gap: 9px;
	margin-left: auto;
	padding: 10px 2px 10px 14px;
	background: none;
	border: 0;
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	z-index: 1002;
}
.nav__toggle-txt { transition: opacity 0.15s; }

.mobmenu {
	position: fixed;
	inset: 0;
	z-index: 1001;
	background: #000;
	color: var(--fg);
	padding: 0 var(--space-section-x);
	/* idle: clipped to a zero-height sliver at the top, and non-transitioning
	   so the post-close reset is instantaneous */
	clip-path: inset(0 0 100% 0);
	visibility: hidden;
	flex-direction: column;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
}

body.menu-open .mobmenu,
body.menu-closing .mobmenu {
	visibility: visible;
	transition: clip-path 0.56s cubic-bezier(0.76, 0, 0.24, 1);
}
body.menu-open    .mobmenu { clip-path: inset(0 0 0 0); }
body.menu-closing .mobmenu { clip-path: inset(100% 0 0 0); }

.mobmenu__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--nav-h);
	flex: 0 0 auto;
}

.mobmenu__logo { display: flex; align-items: center; }

.mobmenu__close {
	background: none;
	border: 0;
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	line-height: 1;
	padding: 10px 2px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mobmenu__nav {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(6px, 1.4vh, 14px);
	padding: clamp(20px, 5vh, 48px) 0;
	margin: 0;
}

.mobmenu__link {
	display: inline-block;
	width: max-content;
	font-family: var(--font-display);
	font-size: clamp(34px, 11vw, 58px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.04;
	color: var(--fg);
	transition: color var(--transition);
}
.mobmenu__link:active { color: var(--accent); }

.mobmenu__foot {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: clamp(20px, 4vh, 40px) 0 calc(env(safe-area-inset-bottom, 0px) + clamp(24px, 5vh, 48px));
	border-top: 1px solid var(--line);
}

.mobmenu__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 26px;
	border-radius: 999px;
	background: var(--fg);
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.3px;
	transition: var(--transition);
}

/* Staggered entrance for the overlay contents, top to bottom */
.mobmenu__link,
.mobmenu__foot > * {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
body.menu-open .mobmenu__link,
body.menu-open .mobmenu__foot > * { opacity: 1; transform: none; }

body.menu-open .mobmenu__nav li:nth-child(1) .mobmenu__link { transition-delay: 0.20s; }
body.menu-open .mobmenu__nav li:nth-child(2) .mobmenu__link { transition-delay: 0.26s; }
body.menu-open .mobmenu__nav li:nth-child(3) .mobmenu__link { transition-delay: 0.32s; }
body.menu-open .mobmenu__nav li:nth-child(4) .mobmenu__link { transition-delay: 0.38s; }
body.menu-open .mobmenu__nav li:nth-child(5) .mobmenu__link { transition-delay: 0.44s; }
body.menu-open .mobmenu__foot > *:nth-child(1) { transition-delay: 0.50s; }

body.menu-open { overflow: hidden; }

@media (max-width: 768px) {
	.nav__links { display: none; }
	.nav > .nav__cta { display: none; }
	.nav__toggle { display: inline-flex; }
	.mobmenu { display: flex; }
}

/* ═══════════════ SCROLL ANIMATIONS ═══════════════

   The hidden start state is conditional on JavaScript. `html.js` is set by a
   one-line inline script at the top of header.php which runs synchronously
   before first paint. So: JS alive, identical animated behaviour with no
   flash. JS dead, stripped, blocked or errored, the content simply renders
   unanimated. Text can never go missing because an animation did not fire. */

.reveal { transition: opacity 0.8s, transform 0.8s; }

html.js .reveal {
	opacity: 0;
	transform: translateY(30px);
}

.reveal.visible,
html.js .reveal.visible { opacity: 1; transform: none; }

/* Cards travel further and land with a settle, so the entrance is plainly
   visible rather than a subtle nudge. Row and column indices are stamped on
   by JS, so a grid ripples in row by row instead of arriving as one block. */
html.js .card.reveal {
	opacity: 0;
	transform: translateY(64px) scale(0.94);
	transition:
		opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.86s cubic-bezier(0.16, 1.02, 0.3, 1);
	transition-delay: calc(var(--row, 0) * 170ms + var(--col, 0) * 65ms);
}

html.js .card.reveal.visible { opacity: 1; transform: none; }

/* Leaving the viewport resets instantly — animating out reads as a glitch
   while scrolling fast. */
html.js .card.reveal:not(.visible) { transition-duration: 0.01ms; transition-delay: 0ms; }
html.js .grid.is-replaying .card.reveal:not(.visible) { transition-duration: 0.01ms; }

/* ═══════════════ REDUCED MOTION ═══════════════ */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	html.js .reveal,
	html.js .card.reveal { opacity: 1; transform: none; }
	.stat__rule i { transform: scaleX(1); }
	.card__play { opacity: 1; scale: 1; }
	.hero__video { animation: none; transform: none; }

	body.menu-open .mobmenu,
	body.menu-closing .mobmenu { transition-duration: 0.001s; }
	.mobmenu__link, .mobmenu__foot > * { transition-duration: 0.001s; }
	body.menu-open .mobmenu__nav li .mobmenu__link,
	body.menu-open .mobmenu__foot > * { transition-delay: 0s; }
}