/*!
 * FZ Playhead v0.4.6 - global stylesheet for the Farzana "Playhead" design system.
 * Ports the intent of the reference (farzana-portfolio, DESIGN-SYSTEM.md) into scoped fz- rules.
 * Ownership: Kit = colours/typography/breakpoints/buttons defaults; this file = semantic scene
 * tokens, shell (header, mobile menu, footer), motifs, button motion, focus, grain, reveal
 * primitives and the reduced-motion layer. Page-specific composition stays on the page.
 * Breakpoints: Elementor mobile <= 699, tablet <= 1099; header collapse <= 859 (component rule).
 */

/* ---------- 1. Tokens --------------------------------------------------- */
:root {
	--fz-red-violet: #59256A;
	--fz-cotinga: #501345;
	--fz-lemon: #F8ED43;
	--fz-apricot: #F68C50;
	--fz-lilac: #B984AF;
	--fz-paper: #F3EEE3;
	--fz-paper-2: #E9E1D1;
	--fz-paper-3: #FBF8F2;
	--fz-ink: #1C0A1A;
	--fz-ink-2: #2A1027;
	--fz-ink-3: #3A1836;
	--fz-plum-grey: #4B3647;
	--fz-plum-mute: #6F5C6B;
	--fz-mist: #CDBFC9;
	--fz-mist-mute: #A6939F;
	--fz-rule-light: #D8CEBF;
	--fz-rule-dark: #3E2639;

	--fz-font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
	--fz-font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
	--fz-font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fz-font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--fz-fs-mega: clamp(4.75rem, 17vw, 18.5rem);
	--fz-fs-d1: clamp(2.75rem, 7.4vw, 7.5rem);
	--fz-fs-d2: clamp(2.125rem, 4.6vw, 4.5rem);
	--fz-fs-h3: clamp(1.5rem, 2.3vw, 2.125rem);
	--fz-fs-h4: clamp(1.125rem, 1.4vw, 1.3125rem);
	--fz-fs-lead: clamp(1.125rem, 1.45vw, 1.375rem);
	--fz-fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
	--fz-fs-small: 0.875rem;
	--fz-fs-meta: 0.75rem;

	--fz-max: 1440px;
	--fz-margin: clamp(16px, 4vw, 64px);
	--fz-gutter: clamp(16px, 2vw, 32px);
	--fz-scene-pad: clamp(96px, 13vw, 200px);
	--fz-nav-h: 72px;
	--fz-r-tag: 2px;
	--fz-r-pill: 999px;

	--fz-beat: 500ms;
	--fz-t-8: 62ms;
	--fz-t-4: 125ms;
	--fz-t-2: 250ms;
	--fz-ease-settle: cubic-bezier(.16, 1, .3, 1);
	--fz-ease-cut: cubic-bezier(.65, 0, .35, 1);
	--fz-ease-exit: cubic-bezier(.55, 0, 1, .45);
}
@media (max-width: 859px) { :root { --fz-nav-h: 64px; } }

/* Semantic scene tokens.
   Static owner: the scene class (.fz-light / .fz-dark / .fz-violet; the footer component is always dark), so the
   Elementor editor canvas, which does not print Custom Attributes, resolves the same tokens as the frontend.
   data-fz-theme stays the runtime contract: the header probe reads it, and the header receives it as state. */
:root,
[data-fz-theme="light"],
.fz-light {
	--fz-bg: var(--fz-paper);
	--fz-bg-alt: var(--fz-paper-2);
	--fz-surface: var(--fz-paper-3);
	--fz-text: var(--fz-ink);
	--fz-text-2: var(--fz-plum-grey);
	--fz-text-3: var(--fz-plum-mute);
	--fz-brand: var(--fz-red-violet);
	--fz-accent: var(--fz-lemon);
	--fz-border: var(--fz-rule-light);
	--fz-link: var(--fz-red-violet);
	--fz-focus: var(--fz-red-violet);
	--fz-cta-bg: var(--fz-red-violet);
	--fz-cta-fg: var(--fz-paper);
	--fz-cta-hover-bg: var(--fz-lemon);
	--fz-cta-hover-fg: var(--fz-ink);
	--fz-cta-active-bg: var(--fz-cotinga);
	--fz-cta-active-fg: var(--fz-paper);
	--fz-cta2-fg: var(--fz-ink);
	--fz-cta2-hover-bg: var(--fz-ink);
	--fz-cta2-hover-fg: var(--fz-paper);
}
[data-fz-theme="dark"],
.fz-dark,
.e-con.fz-site-footer {
	--fz-bg: var(--fz-ink);
	--fz-bg-alt: var(--fz-ink-2);
	--fz-surface: var(--fz-ink-2);
	--fz-text: var(--fz-paper);
	--fz-text-2: var(--fz-mist);
	--fz-text-3: var(--fz-mist-mute);
	--fz-brand: var(--fz-lilac);
	--fz-border: var(--fz-rule-dark);
	--fz-link: var(--fz-lilac);
	--fz-focus: var(--fz-lemon);
	--fz-cta-bg: var(--fz-lemon);
	--fz-cta-fg: var(--fz-ink);
	--fz-cta-hover-bg: var(--fz-paper);
	--fz-cta-hover-fg: var(--fz-ink);
	--fz-cta-active-bg: var(--fz-lilac);
	--fz-cta-active-fg: var(--fz-ink);
	--fz-cta2-fg: var(--fz-paper);
	--fz-cta2-hover-bg: var(--fz-paper);
	--fz-cta2-hover-fg: var(--fz-ink);
}
[data-fz-theme="violet"],
.fz-violet {
	--fz-bg: var(--fz-red-violet);
	--fz-bg-alt: var(--fz-cotinga);
	--fz-surface: var(--fz-cotinga);
	--fz-text: var(--fz-paper);
	--fz-text-2: var(--fz-mist);
	--fz-text-3: var(--fz-mist);
	--fz-brand: var(--fz-lemon);
	--fz-border: rgba(243, 238, 227, .24);
	--fz-link: var(--fz-lemon);
	--fz-focus: var(--fz-lemon);
	--fz-cta-bg: var(--fz-lemon);
	--fz-cta-fg: var(--fz-ink);
	--fz-cta-hover-bg: var(--fz-paper);
	--fz-cta-hover-fg: var(--fz-ink);
	--fz-cta-active-bg: var(--fz-lilac);
	--fz-cta-active-fg: var(--fz-ink);
	--fz-cta2-fg: var(--fz-paper);
	--fz-cta2-hover-bg: var(--fz-paper);
	--fz-cta2-hover-fg: var(--fz-red-violet);
}

/* ---------- 2. Site-wide basics (no resets) ----------------------------- */
html { scroll-padding-top: calc(var(--fz-nav-h) + 8px); }
html:not([data-motion="reduced"]) { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; }
::selection { background: var(--fz-lemon); color: var(--fz-ink); }
:focus-visible { outline: 3px solid var(--fz-focus); outline-offset: 3px; }

/* Film grain (static, non-interactive) */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	opacity: .05;
	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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.04 0 0 0 0 0.1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Skip link (Astra outputs it): the reference's lemon pill, parked above the viewport; it slides in on focus and back out
   on blur (transform 250 ms ease-cut, no colour fade). This replaces Astra's .screen-reader-text clipping, its
   "top: 0 !important" and its "transition: all .2s". :is(.site, body) gives (0,3,0) over Astra's (0,2,0) ".site .skip-link". */
:is(.site, body) .skip-link.screen-reader-text {
	position: fixed !important;
	left: 16px; top: 12px !important; margin: 0;
	z-index: 100001;
	width: auto; height: auto; overflow: visible;
	clip: auto; clip-path: none;
	padding: 12px 18px; border: 0;
	border-radius: var(--fz-r-pill);
	background: var(--fz-lemon);
	color: var(--fz-ink);
	font: 600 1rem/1 var(--fz-font-body);
	text-decoration: none; white-space: nowrap;
	box-shadow: none;
	transform: translateY(-160%);
	transition: transform var(--fz-t-2) var(--fz-ease-cut);
}
:is(.site, body) .skip-link.screen-reader-text:focus { transform: none; outline: 3px solid var(--fz-red-violet); outline-offset: 3px; }

/* ---------- 3. Type utilities & motifs ---------------------------------- */
.fz-label .elementor-heading-title,
.fz-rec .elementor-heading-title { display: flex; align-items: center; gap: 10px; }
.fz-label .elementor-heading-title::before {
	content: ""; flex: none; width: 8px; height: 8px;
	background: var(--fz-brand); transform: rotate(45deg);
}
.fz-rec .elementor-heading-title::before {
	content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
	background: var(--fz-apricot); animation: fz-rec 1s steps(1, end) infinite;
}
@keyframes fz-rec { 50% { opacity: .2; } }
.fz-accent em {
	font-family: var(--fz-font-serif); font-style: italic; font-weight: 400;
	font-size: 1.08em; letter-spacing: -.01em; color: var(--fz-brand);
}
.fz-tabular { font-variant-numeric: tabular-nums; }

/* Exact variable weights (Elementor's weight select stops at hundreds). (0,3,0) beats the Kit's heading rule. */
.elementor .fz-w650 .elementor-heading-title, .elementor .fz-w650.elementor-widget-text-editor { font-weight: 650; }
.elementor .fz-w760 .elementor-heading-title, .elementor .fz-w760.elementor-widget-text-editor { font-weight: 760; }
.elementor .fz-opsz96 .elementor-heading-title { font-variation-settings: "opsz" 96; }

/* ---------- 4. Buttons -------------------------------------------------- */
/* Primary: fill wipes in from the left, label recolours, arrow nudges; active flash. Uses scene tokens. */
.elementor .fz-btn-primary .elementor-button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	height: 56px; /* full size (reference .btn--primary); .fz-btn-compact sets 44 */
	background: var(--fz-cta-bg);
	color: var(--fz-cta-fg);
	fill: currentColor;
	transition: transform var(--fz-t-2) var(--fz-ease-settle), color var(--fz-t-4) linear;
}
.elementor .fz-btn-primary .elementor-button::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: var(--fz-cta-hover-bg);
	transform: translateX(-101%);
	transition: transform var(--fz-t-2) var(--fz-ease-cut);
}
.elementor .fz-btn-primary .elementor-button:hover,
.elementor .fz-btn-primary .elementor-button:focus-visible { background: var(--fz-cta-bg); color: var(--fz-cta-hover-fg); }
.elementor .fz-btn-primary .elementor-button:hover::before { transform: none; }
.elementor .fz-btn-primary .elementor-button-icon { transition: transform var(--fz-t-2) var(--fz-ease-settle); }
.elementor .fz-btn-primary .elementor-button-icon svg { width: 18px; height: 18px; }
.elementor .fz-btn-primary .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }
.elementor .fz-btn-primary .elementor-button:active { background: var(--fz-cta-active-bg); color: var(--fz-cta-active-fg); transform: scale(.98); }
.elementor .fz-btn-primary .elementor-button:active::before { opacity: 0; transition: none; }
.elementor .fz-btn-primary .elementor-button:focus-visible { outline-offset: 4px; }
.elementor .fz-btn-primary .elementor-button-content-wrapper { align-items: center; }

/* Secondary ring CTA */
.elementor .fz-btn-ring .elementor-button { min-height: 44px; }
.elementor .fz-btn-ring .elementor-button-icon {
	display: grid; place-items: center; width: 44px; height: 44px;
	border: 1.5px solid currentColor; border-radius: 50%;
	transition: background-color var(--fz-t-2) var(--fz-ease-cut), color var(--fz-t-4) linear, border-color var(--fz-t-4) linear;
}
.elementor .fz-btn-ring .elementor-button-icon svg { width: 14px; height: 14px; transition: transform var(--fz-t-2) var(--fz-ease-settle); }
.elementor .fz-btn-ring .elementor-button-text {
	padding-block: 4px;
	background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1.5px no-repeat;
	transition: background-size var(--fz-t-2) var(--fz-ease-cut);
}
.elementor .fz-btn-ring .elementor-button:hover .elementor-button-icon { background: var(--fz-cta2-hover-bg); border-color: var(--fz-cta2-hover-bg); color: var(--fz-cta2-hover-fg); fill: var(--fz-cta2-hover-fg); }
.elementor .fz-btn-ring .elementor-button:hover .elementor-button-icon svg { transform: translateX(2px); }
.elementor .fz-btn-ring .elementor-button:hover .elementor-button-text { background-size: 100% 1.5px; background-position: 0 100%; }
.elementor .fz-btn-ring .elementor-button:active .elementor-button-icon { transform: scale(.94); }

/* Reference stroked icons for the button system. Applied only while the native icon is the matching
   Font Awesome glyph (arrow-right / play / envelope), so an icon chosen in the editor still wins. */
.elementor :is(.fz-btn-primary, .fz-btn-ring) .elementor-button-icon > svg:is(.e-fas-arrow-right, .e-fas-play, .e-far-envelope) { display: none; }
.elementor :is(.fz-btn-primary, .fz-btn-ring) .elementor-button-icon:has(> svg:is(.e-fas-arrow-right, .e-fas-play, .e-far-envelope))::before {
	content: ""; display: block; flex: none; width: 18px; height: 18px; background: currentColor;
	-webkit-mask: var(--fz-ico) center / contain no-repeat; mask: var(--fz-ico) center / contain no-repeat;
	transition: transform var(--fz-t-2) var(--fz-ease-settle);
}
.elementor .elementor-button-icon:has(> svg.e-fas-arrow-right) { --fz-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.elementor .elementor-button-icon:has(> svg.e-fas-play) { --fz-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 5.5v9l7-4.5z'/%3E%3C/svg%3E"); }
.elementor .elementor-button-icon:has(> svg.e-far-envelope) { --fz-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 6h13v8.5h-13zM3.5 6l6.5 5 6.5-5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.elementor .fz-btn-ring .elementor-button:hover .elementor-button-icon::before { transform: translateX(2px); }

/* Highlighter link (header links, footer social) */
.fz-hl a.elementor-item,
.fz-hl .elementor-item {
	background-image: linear-gradient(var(--fz-lemon), var(--fz-lemon));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 100%;
	transition: background-size var(--fz-t-2) var(--fz-ease-cut), color var(--fz-t-4) linear;
}
.fz-hl a.elementor-item:hover,
.fz-hl a.elementor-item:focus-visible { background-size: 100% 100%; color: var(--fz-ink); }

/* ---------- 5. Header (Theme Builder: Site Header - Playhead) ----------- */
.elementor .e-con.fz-site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	color: var(--fz-text);
	transition: color var(--fz-t-2) linear;
}
body.admin-bar .e-con.fz-site-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* <= 600 the admin bar scrolls away (absolute): the runtime sets --fz-ab-top = max(0, bar height - scrollY). */
@media (max-width: 600px) { body.admin-bar .e-con.fz-site-header { top: var(--fz-ab-top, var(--wp-admin--admin-bar--height, 46px)); } }
.elementor-editor-active .e-con.fz-site-header { position: relative; inset: auto; }

.elementor .e-con.fz-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 0;
	mix-blend-mode: normal;
	background: var(--fz-bg);
	opacity: 0;
	transition: opacity var(--fz-t-2) linear, background-color var(--fz-t-2) linear;
}
.elementor .e-con.fz-site-header.is-scrolled::before { opacity: .88; }
@supports (backdrop-filter: blur(1px)) {
	.elementor .e-con.fz-site-header.is-scrolled::before { opacity: .78; }
	.elementor .e-con.fz-site-header.is-scrolled { -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
/* An open mobile menu must not sit inside a filtered (containing-block) ancestor. */
.elementor .e-con.fz-site-header.is-menu-open,
.elementor .e-con.fz-site-header:has(.e-off-canvas[aria-hidden="false"]) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.elementor .e-con.fz-site-header.is-menu-open::before { opacity: 0; }

.fz-site-header .fz-nav-inner { position: relative; z-index: 2; min-height: var(--fz-nav-h); }
.fz-site-header a { color: inherit; }

/* Brand: diamond keyframe rotates on hover. Colour follows the header (beats the Kit's default heading colour, 0,2,0). */
.fz-site-header .fz-brand .elementor-heading-title { color: inherit; }
.fz-site-header .fz-brand .elementor-heading-title a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.fz-site-header .fz-brand .elementor-heading-title a::before {
	content: ""; flex: none; width: 8px; height: 8px;
	background: var(--fz-brand); transform: rotate(45deg);
	transition: transform var(--fz-beat) var(--fz-ease-settle), background-color var(--fz-t-2) linear;
}
.fz-site-header .fz-brand .elementor-heading-title a:hover::before { transform: rotate(225deg); }

/* Timecode chip: only on pages that expose >= 2 body chapters, only >= 1100 */
.fz-site-header .fz-chip { display: none; }
@media (min-width: 1100px) { html.fz-has-chapters .fz-site-header .fz-chip { display: block; } }
.fz-site-header .fz-chip .elementor-heading-title {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 7px 14px;
	border: 1px solid var(--fz-border);
	border-radius: var(--fz-r-pill);
	font: 400 11px/1.6 var(--fz-font-mono);
	letter-spacing: .08em; text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--fz-text-2);
	transition: border-color var(--fz-t-2) linear, color var(--fz-t-2) linear;
}
.fz-site-header .fz-chip .elementor-heading-title::before {
	content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
	background: var(--fz-apricot); animation: fz-rec 1s steps(1, end) infinite;
}
.fz-site-header .fz-chip .fz-tc-time { color: var(--fz-text); min-width: 11ch; }
.fz-site-header .fz-chip .fz-tc-sep { opacity: .5; }
.fz-site-header .fz-chip .fz-tc-scene { min-width: 20ch; }

/* Primary links */
.fz-site-header .fz-navlinks { margin-inline-start: auto; }
.fz-site-header .fz-navlinks .elementor-nav-menu--main .elementor-item,
.fz-site-header .fz-navlinks .elementor-nav-menu--main .elementor-item.elementor-item-active { color: inherit; padding: 2px 1px; }
.fz-site-header .fz-navlinks .elementor-item::before,
.fz-site-header .fz-navlinks .elementor-item::after { display: none; }

/* Compact CTA */
.fz-site-header .fz-btn-compact .elementor-button { height: 44px; padding: 0 18px 0 20px; font-size: .9375rem; }
/* The reference nav grid keeps the (hidden) menu-button column at >= 860, so a 28 px column gap follows the CTA. */
@media (min-width: 860px) { .fz-site-header .fz-nav-cta { margin-right: 28px; } }

/* Menu button (Off-Canvas trigger): Menu <-> Close, two lines morph to x */
.fz-site-header .fz-menu-btn { display: none; position: relative; z-index: 3; margin-inline-start: auto; }
.fz-site-header .fz-menu-btn .elementor-button {
	display: inline-flex; align-items: center; gap: 12px;
	height: 44px; padding: 0 4px 0 16px;
	background: transparent; color: inherit; border-radius: 0;
	font: 400 12px/1 var(--fz-font-mono); letter-spacing: .08em; text-transform: uppercase;
	position: relative;
}
.fz-site-header .fz-menu-btn .elementor-button-content-wrapper { align-items: center; }
.fz-site-header .fz-menu-btn .elementor-button-content-wrapper::after {
	content: ""; flex: none; width: 36px; height: 36px; margin-inline-start: 12px;
	border: 1.5px solid currentColor; border-radius: 50%; box-sizing: border-box;
}
.fz-site-header .fz-menu-btn .elementor-button::before,
.fz-site-header .fz-menu-btn .elementor-button::after {
	content: ""; position: absolute; right: 14px; width: 16px; height: 1.5px;
	background: currentColor; transition: transform var(--fz-t-2) var(--fz-ease-cut);
}
.fz-site-header .fz-menu-btn .elementor-button::before { top: calc(50% - 3.25px); }
.fz-site-header .fz-menu-btn .elementor-button::after { top: calc(50% + 1.75px); }
.fz-site-header .fz-menu-btn .elementor-button[aria-expanded="true"]::before { transform: translateY(2.5px) rotate(45deg); }
.fz-site-header .fz-menu-btn .elementor-button[aria-expanded="true"]::after { transform: translateY(-2.5px) rotate(-45deg); }

/* Progress line (decorative, < 1100) */
.fz-site-header .fz-progress { display: none; height: 2px; min-height: 2px; padding: 0; }
.fz-site-header .fz-progress::before {
	content: ""; display: block; height: 2px; width: 100%;
	background: var(--fz-brand); transform-origin: 0 50%; transform: scaleX(var(--fz-progress, 0));
}
@media (max-width: 1099px) { html.fz-js .fz-site-header .fz-progress { display: block; } }

/* Collapse at 859 (component rule, independent of Elementor devices).
   (0,4,0): Pro's nav-menu rule `.elementor-widget-nav-menu:not(:has(…)):not([class*="elementor-hidden-"])` is (0,3,0). */
@media (max-width: 859px) {
	.elementor .e-con.fz-site-header .fz-navlinks,
	.elementor .e-con.fz-site-header .fz-nav-cta { display: none; }
	.fz-site-header .fz-menu-btn { display: block; }
}
@media (min-width: 860px) { .fz-site-header .fz-offcanvas { display: none; } }

/* ---------- 6. Mobile menu (Pro Off-Canvas, scene "dark") --------------- */
.fz-site-header .fz-offcanvas .e-off-canvas { z-index: 1; }
.fz-site-header .fz-offcanvas .e-off-canvas__content {
	background: var(--fz-ink); color: var(--fz-paper); box-shadow: none;
	--fz-text: var(--fz-paper); --fz-text-3: var(--fz-mist-mute); --fz-brand: var(--fz-lilac); --fz-focus: var(--fz-lemon);
	--fz-cta-bg: var(--fz-lemon); --fz-cta-fg: var(--fz-ink); --fz-cta-hover-bg: var(--fz-paper); --fz-cta-hover-fg: var(--fz-ink);
	--fz-cta-active-bg: var(--fz-lilac); --fz-cta-active-fg: var(--fz-ink);
}
.fz-site-header .fz-offcanvas .e-off-canvas__main { clip-path: inset(0 0 100% 0); transition: clip-path var(--fz-beat) var(--fz-ease-cut); }
.fz-site-header .fz-offcanvas .e-off-canvas[aria-hidden="false"] .e-off-canvas__main { clip-path: inset(0); }
/* keep the panel painted while the exit wipe runs, then hide (520 ms, as the reference) */
.fz-site-header .fz-offcanvas .e-off-canvas[aria-hidden="true"] { opacity: 1; visibility: hidden; transition: visibility 0s linear 520ms; }
.fz-site-header .fz-offcanvas .e-off-canvas__main.animated.none.reversed,
.fz-site-header .fz-offcanvas .e-off-canvas.animated-reverse-wrapper { opacity: 1; visibility: inherit; animation: none; }

.fz-site-header .fz-offcanvas .fz-scene-menu .elementor-nav-menu { counter-reset: fz-scene 1; display: grid; gap: 6px; }
.fz-site-header .fz-offcanvas .fz-scene-menu .menu-item { counter-increment: fz-scene; }
.fz-site-header .fz-offcanvas .fz-scene-menu .elementor-item {
	display: flex; align-items: baseline; gap: 16px; padding: 6px 0; color: inherit;
	font-weight: 650; /* Elementor's weight select can't emit 650; beats the Kit default (0,3,0) */
}
.fz-site-header .fz-offcanvas .fz-scene-menu .elementor-item::before {
	content: counter(fz-scene, decimal-leading-zero);
	position: static; opacity: 1; background: none; width: auto; height: auto;
	font: 400 12px/1 var(--fz-font-mono); letter-spacing: .08em; color: var(--fz-mist-mute);
}
.fz-site-header .fz-offcanvas .fz-scene-menu .elementor-item::after { display: none; }
.fz-site-header .fz-offcanvas .fz-scene-menu .menu-item,
.fz-site-header .fz-offcanvas .fz-menu-cta {
	opacity: 0; transform: translateY(24px);
	transition: opacity var(--fz-beat) var(--fz-ease-settle), transform var(--fz-beat) var(--fz-ease-settle);
	transition-delay: calc(var(--fz-i, 0) * var(--fz-t-8) + 150ms);
}
.fz-site-header .fz-offcanvas .fz-scene-menu .menu-item:nth-child(2) { --fz-i: 1; }
.fz-site-header .fz-offcanvas .fz-scene-menu .menu-item:nth-child(3) { --fz-i: 2; }
.fz-site-header .fz-offcanvas .fz-scene-menu .menu-item:nth-child(4) { --fz-i: 3; }
.fz-site-header .fz-offcanvas .fz-scene-menu .menu-item:nth-child(5) { --fz-i: 4; }
.fz-site-header .fz-offcanvas .fz-menu-cta { --fz-i: 4; }
.fz-site-header .fz-offcanvas .e-off-canvas[aria-hidden="false"] .fz-scene-menu .menu-item,
.fz-site-header .fz-offcanvas .e-off-canvas[aria-hidden="false"] .fz-menu-cta { opacity: 1; transform: none; }

/* WordPress marks every same-URL hash item "current"; the reference has no active state. */
.fz-site-header .elementor-nav-menu .elementor-item.elementor-item-active,
.fz-site-footer .elementor-nav-menu .elementor-item.elementor-item-active { font-weight: inherit; }

/* ---------- 7. Footer (Theme Builder: Site Footer - End Credits) -------- */
.elementor .e-con.fz-site-footer { background: var(--fz-bg); color: var(--fz-text); }
/* Scrubber clearance (>= 1100, chapter pages). Boxed containers pad .e-con-inner, so target it (reference .credits padding-bottom 104). */
@media (min-width: 1100px) { html.fz-has-chapters .elementor .e-con.fz-site-footer > .e-con-inner { padding-bottom: 104px; } }
.fz-site-footer a { color: inherit; }
.fz-site-footer .fz-label .elementor-heading-title { justify-content: center; color: var(--fz-text-3); }

.fz-site-footer .fz-credits-list { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; padding: 0; }
.fz-site-footer .fz-credits-list > div { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: baseline; }
.fz-site-footer .fz-credits-list dt {
	margin: 0; text-align: right;
	font: 400 11px/1.6 var(--fz-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fz-text-3);
}
.fz-site-footer .fz-credits-list dd {
	margin: 0; text-align: left;
	font: 500 1.25rem/1.6 var(--fz-font-display); letter-spacing: -.01em; color: var(--fz-text);
}
.fz-site-footer .fz-credits-bottom { border-top: 1px solid var(--fz-border); }

/* Reference grid is `1fr auto auto`: the wordmark keeps its min-content width (Elementor sets .e-con .elementor-widget { min-width: 0 }). */
.fz-site-footer .fz-credits-bottom .fz-wordmark,
.fz-site-footer .fz-credits-bottom .fz-social,
.fz-site-footer .fz-credits-bottom > .e-con { min-width: min-content; }
.fz-site-footer .fz-wordmark .elementor-heading-title a { display: inline-flex; align-items: flex-start; gap: .08em; text-decoration: none; color: var(--fz-text); }
.fz-site-footer .fz-wordmark .elementor-heading-title a::after {
	content: ""; flex: none; width: .14em; height: .14em; margin-top: .12em;
	background: var(--fz-lemon); transform: rotate(45deg);
}

.fz-site-footer .fz-social .elementor-item,
.fz-site-footer .fz-social .elementor-item.elementor-item-active { color: var(--fz-lilac); padding: 2px 1px; font-weight: 500; }
.fz-site-footer .fz-social .elementor-item:hover,
.fz-site-footer .fz-social .elementor-item:focus-visible { color: var(--fz-ink); }
.fz-site-footer .fz-social .elementor-item::before,
.fz-site-footer .fz-social .elementor-item::after { display: none; }

/* Pill controls: Motion toggle + Rewind (atomic buttons). Without JS they cannot work, so the frontend hides them;
   the editor canvas (no runtime) keeps them visible so they stay selectable and editable. */
html:not(.fz-js) body:not(.elementor-editor-active) [data-fz-motion-toggle],
html:not(.fz-js) body:not(.elementor-editor-active) [data-fz-rewind] { display: none !important; }
.fz-site-footer .e-button-base[data-fz-motion-toggle],
.fz-site-footer .e-button-base[data-fz-rewind] {
	display: inline-flex; align-items: center; gap: 10px;
	height: 44px; margin: 0; padding: 0 18px;
	border: 1px solid var(--fz-border); border-radius: var(--fz-r-pill);
	background: transparent; color: var(--fz-text-2);
	font: 400 12px/1 var(--fz-font-mono); letter-spacing: .08em; text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--fz-t-4) linear, color var(--fz-t-4) linear, border-color var(--fz-t-4) linear;
}
.fz-site-footer .e-button-base[data-fz-motion-toggle]:hover,
.fz-site-footer .e-button-base[data-fz-rewind]:hover { background: var(--fz-paper); color: var(--fz-ink); border-color: var(--fz-paper); }
.fz-site-footer [data-fz-motion-toggle] .fz-pill-state { color: var(--fz-lemon); }
.fz-site-footer [data-fz-motion-toggle][aria-pressed="false"] .fz-pill-state { color: var(--fz-text-3); }
.fz-site-footer [data-fz-motion-toggle]:hover .fz-pill-state { color: var(--fz-red-violet); }
.fz-site-footer [data-fz-rewind]::before {
	content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9 5L3 10l6 5zM17 5l-6 5 6 5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M9 5L3 10l6 5zM17 5l-6 5 6 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fz-site-footer .fz-legal .elementor-heading-title { color: var(--fz-text-3); }

@media (max-width: 699px) {
	.fz-site-footer .fz-credits-list > div { grid-template-columns: 1fr; gap: 2px; text-align: center; }
	.fz-site-footer .fz-credits-list dt,
	.fz-site-footer .fz-credits-list dd { text-align: center; }
}

/* ---------- 8. Reveal engine (reference §6: [data-reveal]) ---------------
   Hidden states only for html.fz-js (pre-paint boot) and never under reduced motion, so the first paint is
   final for reduced users and the page is complete without JS. The runtime adds .is-in once (15 % in view).
   Stagger: data-fz-i="N" -> --fz-i (N x 125 ms). */
[data-fz-i="1"] { --fz-i: 1; } [data-fz-i="2"] { --fz-i: 2; } [data-fz-i="3"] { --fz-i: 3; } [data-fz-i="4"] { --fz-i: 4; }
/* fade-up */
html.fz-js:not([data-motion="reduced"]) [data-fz-reveal="up"]:not(.is-in) { opacity: 0; transform: translateY(24px); }
html.fz-js [data-fz-reveal="up"].is-in {
	opacity: 1; transform: none;
	transition: opacity var(--fz-beat) linear, transform 750ms var(--fz-ease-settle);
	transition-delay: calc(var(--fz-i, 0) * var(--fz-t-4));
}
/* line masks (runtime splits the heading on <br> into .fz-line > .fz-line__in) */
.fz-line { display: block; overflow: hidden; padding: .04em .14em .1em 0; margin: -.04em -.14em -.1em 0; }
.fz-line__in { display: inline-block; }
html.fz-js:not([data-motion="reduced"]) [data-fz-reveal="lines"]:not(.is-in) .fz-line__in { transform: translateY(110%); }
html.fz-js [data-fz-reveal="lines"].is-in .fz-line__in { transform: none; transition: transform 750ms var(--fz-ease-settle); }
html.fz-js [data-fz-reveal="lines"].is-in .fz-line:nth-child(2) .fz-line__in { transition-delay: var(--fz-t-4); }
html.fz-js [data-fz-reveal="lines"].is-in .fz-line:nth-child(3) .fz-line__in { transition-delay: var(--fz-t-2); }
/* media wipes: .fz-wipe is the clipped media (wipe / wipe-left from the left, wipe-right from the right);
   .fz-wipe-follow fades up 300 ms later (clip slate + meta, reel controls + info) */
html.fz-js:not([data-motion="reduced"]) :is([data-fz-reveal="wipe"], [data-fz-reveal="wipe-left"]):not(.is-in) :is(.fz-wipe),
html.fz-js:not([data-motion="reduced"]) :is([data-fz-reveal="wipe"], [data-fz-reveal="wipe-left"]).fz-wipe:not(.is-in) { clip-path: inset(0 100% 0 0); }
html.fz-js:not([data-motion="reduced"]) [data-fz-reveal="wipe-right"]:not(.is-in) .fz-wipe,
html.fz-js:not([data-motion="reduced"]) [data-fz-reveal="wipe-right"].fz-wipe:not(.is-in) { clip-path: inset(0 0 0 100%); }
html.fz-js [data-fz-reveal^="wipe"].is-in .fz-wipe,
html.fz-js [data-fz-reveal^="wipe"].is-in.fz-wipe { clip-path: inset(0); transition: clip-path 900ms var(--fz-ease-cut); }
html.fz-js:not([data-motion="reduced"]) [data-fz-reveal^="wipe"]:not(.is-in) .fz-wipe-follow { opacity: 0; transform: translateY(16px); }
html.fz-js [data-fz-reveal^="wipe"].is-in .fz-wipe-follow {
	opacity: 1; transform: none;
	transition: opacity var(--fz-beat) linear 300ms, transform 750ms var(--fz-ease-settle) 300ms;
}

/* ---------- 10. Safe-area corner marks (motif) ---------------------------
   One ::after draws the four corners. A per-corner scale (reference .safe transform) is reproduced by
   animating the registered --fz-sk: offset grows/shrinks by (k-1)·L/2 and arm length/thickness scale by k. */
@property --fz-sk { syntax: "<number>"; inherits: false; initial-value: 1; }
.fz-safe { position: relative; }
/* every safe frame except the hero's own: 10 px inset, 12 px arms (the hero sets nav-relative values that would otherwise inherit) */
.fz-safe:not(.fz-hero) { --fz-safe-top: 10px; --fz-safe-right: 10px; --fz-safe-bottom: 10px; --fz-safe-left: 10px; --fz-safe-size: 12px; }
.fz-safe::after {
	content: "";
	position: absolute;
	z-index: 3;
	pointer-events: none;
	--fz-sl: var(--fz-safe-size, 12px);
	--fz-l: calc(var(--fz-sl) * var(--fz-sk));
	--fz-t: calc(1.5px * var(--fz-sk));
	--fz-d: calc((var(--fz-sk) - 1) * var(--fz-sl) / 2);
	top: calc(var(--fz-safe-top, 10px) - var(--fz-d));
	right: calc(var(--fz-safe-right, 10px) - var(--fz-d));
	bottom: calc(var(--fz-safe-bottom, 10px) - var(--fz-d));
	left: calc(var(--fz-safe-left, 10px) - var(--fz-d));
	color: var(--fz-safe-c, var(--fz-paper));
	background:
		linear-gradient(currentColor, currentColor) 0 0 / var(--fz-l) var(--fz-t),
		linear-gradient(currentColor, currentColor) 0 0 / var(--fz-t) var(--fz-l),
		linear-gradient(currentColor, currentColor) 100% 0 / var(--fz-l) var(--fz-t),
		linear-gradient(currentColor, currentColor) 100% 0 / var(--fz-t) var(--fz-l),
		linear-gradient(currentColor, currentColor) 0 100% / var(--fz-l) var(--fz-t),
		linear-gradient(currentColor, currentColor) 0 100% / var(--fz-t) var(--fz-l),
		linear-gradient(currentColor, currentColor) 100% 100% / var(--fz-l) var(--fz-t),
		linear-gradient(currentColor, currentColor) 100% 100% / var(--fz-t) var(--fz-l);
	background-repeat: no-repeat;
}

/* clip media corners: snap in on hover / focus / playing (reference .clip__media .safe: opacity 125 ms, scale 1.6 -> 1 in 250 ms ease-settle) */
.fz-clip-media.fz-safe::after { opacity: 0; --fz-sk: 1.6; transition: opacity var(--fz-t-4) linear, --fz-sk var(--fz-t-2) var(--fz-ease-settle); }
.fz-clip-media.fz-safe:is(:hover, :focus-visible)::after,
.is-playing .fz-clip-media.fz-safe::after { opacity: 1; --fz-sk: 1; }

/* ---------- 11. Hero / cold open (.fz-hero static, data-fz-hero runtime) ---
   Static composition is keyed by the .fz-hero / .fz-name classes (editor canvas parity); the sequence states
   from the runtime stay on data-fz-hero: is-intro (t0, after fonts <= 900 ms) -> is-cut (+950) -> is-ready (+1500). */
.fz-hero.fz-safe {
	--fz-safe-c: var(--fz-text-3); --fz-safe-size: 18px;
	--fz-safe-top: calc(var(--fz-nav-h) + 4px); --fz-safe-bottom: 20px;
	--fz-safe-left: max(12px, calc(var(--fz-margin) / 2 - 6px)); --fz-safe-right: max(12px, calc(var(--fz-margin) / 2 - 6px));
}
@media (max-width: 699px) { .fz-hero.fz-safe::after { display: none; } }
.fz-hero .fz-ch { display: inline-block; }
.fz-hero .fz-name .elementor-heading-title { clip-path: inset(-30% -10% 0 -10%); padding-bottom: .02em; white-space: nowrap; }
/* portrait: the insert edit. The frame grows from 0 (width + margins, 750 ms ease-cut); the media stays --fz-pw wide and centred */
.fz-hero .fz-portrait { aspect-ratio: 4 / 5; align-self: center; }
.fz-hero .fz-portrait > .elementor-widget-image {
	position: absolute; top: 0; bottom: 0; left: 50%; width: var(--fz-pw, 100%); margin: 0;
	transform: translateX(-50%); overflow: hidden;
}
.fz-hero .fz-portrait > .elementor-widget-image img {
	display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
	transform: scale(1.1) translate(var(--fz-px, 0px), var(--fz-py, 0px));
}
html.fz-js:not([data-motion="reduced"]) [data-fz-hero]:not(.is-intro) .fz-ch { transform: translateY(112%); }
html.fz-js [data-fz-hero].is-intro .fz-ch { transform: none; transition: transform 700ms var(--fz-ease-settle); transition-delay: calc(var(--fz-i) * var(--fz-t-8) + 120ms); }
@media (min-width: 700px) {
	html.fz-js:not([data-motion="reduced"]) [data-fz-hero]:not(.is-cut) .fz-portrait { width: 0; margin-left: 0; margin-right: 0; }
	html.fz-js [data-fz-hero].is-cut .fz-portrait { width: var(--width); margin-left: var(--margin-left); margin-right: var(--margin-right); transition: width 750ms var(--fz-ease-cut), margin 750ms var(--fz-ease-cut); }
}
@media (max-width: 699px) {
	html.fz-js:not([data-motion="reduced"]) [data-fz-hero]:not(.is-cut) .fz-portrait { clip-path: inset(0 0 100% 0); }
	html.fz-js [data-fz-hero].is-cut .fz-portrait { clip-path: inset(0); transition: clip-path 900ms var(--fz-ease-cut); }
}
.fz-hero .fz-insert { opacity: 0; }
html.fz-js [data-fz-hero].is-cut .fz-insert { animation: fz-insert-flash 1100ms steps(1, end) 1 forwards; }
@keyframes fz-insert-flash { 0% { opacity: 0; } 8% { opacity: 1; } 30% { opacity: .2; } 38% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }
/* tagline: each line is its own heading widget, masked by its wrapper */
.fz-hero .fz-tagline > .elementor-widget-heading { overflow: hidden; padding: .04em .14em .1em 0; margin: -.04em -.14em -.1em 0; }
.fz-hero .fz-tagline .elementor-heading-title { display: inline-block; }
html.fz-js:not([data-motion="reduced"]) [data-fz-hero]:not(.is-ready) .fz-tagline .elementor-heading-title { transform: translateY(110%); }
html.fz-js [data-fz-hero].is-ready .fz-tagline .elementor-heading-title { transform: none; transition: transform 750ms var(--fz-ease-settle); }
html.fz-js [data-fz-hero].is-ready .fz-tagline > .elementor-widget-heading:nth-child(2) .elementor-heading-title { transition-delay: var(--fz-t-4); }
/* top row + safe corners (t0), copy (+250), meta (+500) */
html.fz-js:not([data-motion="reduced"]) [data-fz-hero]:not(.is-intro) .fz-hero-top { opacity: 0; transform: translateY(14px); }
html.fz-js:not([data-motion="reduced"]) [data-fz-hero]:not(.is-intro).fz-safe::after { opacity: 0; --fz-sk: .4; }
html.fz-js [data-fz-hero].is-intro .fz-hero-top { opacity: 1; transform: none; transition: opacity var(--fz-beat) linear, transform var(--fz-beat) var(--fz-ease-settle); }
html.fz-js [data-fz-hero].is-intro.fz-safe::after { opacity: 1; --fz-sk: 1; transition: opacity var(--fz-beat) linear, --fz-sk var(--fz-beat) var(--fz-ease-settle); }
html.fz-js:not([data-motion="reduced"]) [data-fz-hero]:not(.is-ready) :is(.fz-hero-copy, .fz-meta) { opacity: 0; transform: translateY(14px); }
html.fz-js [data-fz-hero].is-ready .fz-hero-copy { opacity: 1; transform: none; transition: opacity var(--fz-beat) linear 250ms, transform 750ms var(--fz-ease-settle) 250ms; }
html.fz-js [data-fz-hero].is-ready .fz-meta { opacity: 1; transform: none; transition: opacity var(--fz-beat) linear 500ms, transform 750ms var(--fz-ease-settle) 500ms; }

/* ---------- 12. Marquee (runtime-driven; CSS loop only without JS) ------- */
/* Elementor containers transition `transform` (~0.4 s, for motion effects); runtime-driven transforms must apply per frame, as in the reference. */
.elementor [data-fz-marquee] .fz-mq-track, .elementor [data-fz-parallax] { transition: none; }
[data-fz-marquee] .fz-mq-track { will-change: transform; }
html:not(.fz-js) [data-fz-marquee] .fz-mq-track { animation: fz-marquee 48s linear infinite; }
@keyframes fz-marquee { to { transform: translateX(-50%); } }

/* ---------- 13. Chapter scrubber (generated by the runtime) ------------- */
.fz-scrubber {
	position: fixed; left: 50%; bottom: 18px; z-index: 45;
	display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
	width: min(520px, calc(100% - 32px)); height: 44px; padding: 0 18px 0 20px;
	border-radius: var(--fz-r-pill);
	background: rgba(28, 10, 26, .9); color: var(--fz-paper);
	box-shadow: 0 0 0 1px rgba(243, 238, 227, .08);
	opacity: 0; transform: translate(-50%, 24px); pointer-events: none;
	transition: opacity var(--fz-beat) linear, transform var(--fz-beat) var(--fz-ease-settle);
}
@supports (backdrop-filter: blur(1px)) { .fz-scrubber { background: rgba(28, 10, 26, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } }
.fz-scrubber.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fz-scrubber[hidden] { display: none; }
@media (max-width: 1099px) { .fz-scrubber { display: none; } }
.fz-scrubber__track { position: relative; height: 44px; }
.fz-scrubber__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(243, 238, 227, .25); }
.fz-scrubber__fill { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--fz-lemon); transform-origin: 0 50%; transform: scaleX(var(--fz-sp, 0)); }
.fz-scrubber__head { position: absolute; top: 12px; bottom: 12px; left: calc(var(--fz-sp, 0) * 100%); width: 2px; margin-left: -1px; background: var(--fz-lemon); pointer-events: none; }
.fz-scrubber__mark {
	position: absolute; top: 50%; width: 28px; height: 44px; margin: -22px 0 0 -14px; padding: 0;
	display: grid; place-items: center; background: none; border: 0; border-radius: 0; cursor: pointer; color: inherit;
}
.fz-scrubber__mark::before {
	content: ""; width: 8px; height: 8px; background: var(--fz-ink); border: 1.5px solid var(--fz-mist); transform: rotate(45deg);
	transition: background-color var(--fz-t-4) linear, border-color var(--fz-t-4) linear, transform var(--fz-t-2) var(--fz-ease-settle);
}
.fz-scrubber__mark:hover, .fz-scrubber__mark:focus { background: none; }
.fz-scrubber__mark:hover::before { transform: rotate(45deg) scale(1.35); border-color: var(--fz-lemon); }
.fz-scrubber__mark.is-passed::before { background: var(--fz-lemon); border-color: var(--fz-lemon); }
.fz-scrubber__mark:focus-visible { outline: 3px solid var(--fz-lemon); outline-offset: -4px; }
.fz-scrubber__label { min-width: 15ch; text-align: right; color: var(--fz-mist); font: 400 11px/1.4 var(--fz-font-mono); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* ---------- 14. Cursor tag (fine pointers) ------------------------------ */
.fz-cursor-tag {
	position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
	padding: 5px 10px; border-radius: var(--fz-r-pill);
	background: var(--fz-lemon); color: var(--fz-ink);
	font: 400 10px/1.4 var(--fz-font-mono); letter-spacing: .1em; text-transform: uppercase;
	opacity: 0; transform: translate3d(var(--fz-cx, -100px), var(--fz-cy, -100px), 0);
	transition: opacity var(--fz-t-4) linear;
}
.fz-cursor-tag.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .fz-cursor-tag { display: none; } }

/* ---------- 16. Screening room (data-fz-screening) ----------------------
   "Lights down": the dark scene grows from a framed screen (14vh top, 8vw sides) to full bleed (runtime --fz-open). */
html.fz-js:not([data-motion="reduced"]) [data-fz-screening]:not(.is-open) {
	clip-path: inset(calc((1 - var(--fz-open, 1)) * 14vh) calc((1 - var(--fz-open, 1)) * 8vw) 0 calc((1 - var(--fz-open, 1)) * 8vw));
}
/* Frames / EDL toggle (atomic buttons + decorative thumb). Without JS it cannot work, so it is hidden and Frames shows. */
html:not(.fz-js) [data-fz-viewtoggle] { display: none !important; }
.elementor .fz-viewtoggle {
	position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 0; width: max-content; max-width: 100%;
	padding: 4px; border: 1px solid var(--fz-border); border-radius: var(--fz-r-pill);
}
.elementor .fz-viewtoggle .e-button-base[data-fz-view] {
	position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
	min-width: 92px; height: 36px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--fz-r-pill);
	background: transparent; color: var(--fz-text-2); cursor: pointer;
	font: 400 12px/1 var(--fz-font-mono); letter-spacing: .08em; text-transform: uppercase;
	transition: color var(--fz-t-4) linear;
}
.elementor .fz-viewtoggle .e-button-base[data-fz-view][aria-pressed="true"] { color: var(--fz-ink); }
.elementor .fz-viewtoggle .fz-vt-thumb {
	position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); min-height: 0; padding: 0;
	border-radius: var(--fz-r-pill); background: var(--fz-lemon); pointer-events: none;
	transition: transform var(--fz-t-2) var(--fz-ease-cut);
}
.elementor .fz-viewtoggle[data-fz-active="edl"] .fz-vt-thumb { transform: translateX(100%); }
/* views: EDL hidden until chosen (also without JS, as the reference); the editor shows both */
[data-fz-work-view="edl"]:not(.is-active), [data-fz-work-view].is-inactive { display: none !important; }
/* (the editor canvas never prints data-fz-work-view, so both views stay visible there) */

/* Showreel: screen (16:9, size container for the slate's cq units), slate idle shot, big play pill, controls bar */
.elementor .fz-reel-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; container-type: size; }
.fz-reel-screen > .elementor-widget-video,
.fz-clip-media > .elementor-widget-video { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
:is(.fz-reel-screen, .fz-clip-media) .elementor-widget-video .elementor-wrapper { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; padding: 0; }
:is(.fz-reel-screen, .fz-clip-media) video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.elementor .fz-reel-slate {
	position: absolute; inset: 0; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; gap: 4cqh;
	padding: 9cqh 11cqw; background: var(--fz-ink); color: var(--fz-paper);
}
[data-fz-reel-slate].is-hidden { visibility: hidden; }
.fz-reel-slate > .e-con, .fz-reel-slate > .elementor-widget { width: auto; min-width: 0; margin: 0; }
.elementor .fz-reel-slate .fz-slate-bar {
	height: 9cqh; min-height: 0; padding: 0;
	background: repeating-linear-gradient(-55deg, var(--fz-paper) 0 4cqw, var(--fz-ink) 4cqw 8cqw);
	border: 2px solid var(--fz-paper); transform-origin: 0 100%;
	animation: fz-slate-clap 4s var(--fz-ease-cut) infinite;
}
@keyframes fz-slate-clap { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-9deg); } 86% { transform: rotate(0); } }
.elementor .fz-reel-slate .fz-slate-grid {
	display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 1.6cqh 4cqw; padding: 3cqh 0;
	border-block: 1px solid rgba(243, 238, 227, .3);
}
.fz-reel-slate .fz-slate-k { align-self: center; }
.elementor .fz-reel-slate .fz-slate-k .elementor-heading-title { font: 400 1.5cqw/1.6 var(--fz-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fz-mist-mute); }
.elementor .fz-reel-slate .fz-slate-v .elementor-heading-title { font: 700 5cqw/1 var(--fz-font-display); letter-spacing: -.03em; color: var(--fz-paper); }
.elementor .fz-reel-slate .fz-slate-note .elementor-heading-title { font: 400 1.4cqw/1.6 var(--fz-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fz-lemon); }
.elementor .e-button-base[data-fz-reel-big] {
	position: absolute; right: 4%; bottom: 7%; z-index: 4; display: inline-flex; align-items: center; gap: 10px;
	height: clamp(52px, 4.6vw, 68px); margin: 0; padding: 0 26px 0 14px; border: 0; border-radius: var(--fz-r-pill);
	background: var(--fz-lemon); color: var(--fz-ink); cursor: pointer;
	font: 400 12px/1 var(--fz-font-mono); letter-spacing: .1em; text-transform: uppercase;
	transition: transform var(--fz-t-2) var(--fz-ease-settle), opacity var(--fz-t-2) linear;
}
html:not(.fz-js) body:not(.elementor-editor-active) [data-fz-reel-toggle] { display: none !important; }
:is([data-fz-reel-big], [data-fz-reel-btn])::before {
	content: ""; flex: none; aspect-ratio: 1; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M15 11v18l14-9z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M15 11v18l14-9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.is-playing :is([data-fz-reel-big], [data-fz-reel-btn])::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='13' y='11' width='5' height='18'/%3E%3Crect x='22' y='11' width='5' height='18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='13' y='11' width='5' height='18'/%3E%3Crect x='22' y='11' width='5' height='18'/%3E%3C/svg%3E");
}
[data-fz-reel-big]::before { width: clamp(28px, 2.6vw, 40px); }
.fz-reel-screen:hover [data-fz-reel-big] { transform: scale(1.05); }
[data-fz-reel].is-playing [data-fz-reel-big] { opacity: 0; transform: scale(.9); }
[data-fz-reel].is-playing .fz-reel-screen:hover [data-fz-reel-big] { opacity: 1; transform: none; }
[data-fz-reel-big]:focus-visible { opacity: 1 !important; outline-offset: 4px; }
.elementor .e-button-base[data-fz-reel-btn] {
	display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
	border: 1.5px solid var(--fz-border); border-radius: 50%; background: transparent; color: var(--fz-text);
	font-size: 0; line-height: 0; cursor: pointer;
	transition: background-color var(--fz-t-4) linear, color var(--fz-t-4) linear;
}
[data-fz-reel-btn]::before { width: 22px; }
.elementor .e-button-base[data-fz-reel-btn]:hover { background: var(--fz-paper); color: var(--fz-ink); border-color: var(--fz-paper); }
.fz-reel .fz-reel-tc .elementor-heading-title, .fz-reel .fz-reel-dur .elementor-heading-title { font-variant-numeric: tabular-nums; white-space: nowrap; }
.elementor .fz-reel-progress { position: relative; height: 28px; min-height: 0; padding: 0; cursor: pointer; touch-action: none; }
.fz-reel-progress::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: var(--fz-rule-dark); }
.fz-reel-progress::after {
	content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px;
	transform: translateY(-50%) scaleX(var(--fz-rp, 0)); transform-origin: 0 50%; background: var(--fz-lemon);
}
.elementor .fz-reel-progress .fz-reel-head {
	position: absolute; top: 3px; bottom: 3px; left: calc(var(--fz-rp, 0) * 100%); width: 2px; min-height: 0; padding: 0;
	background: var(--fz-lemon); overflow: visible;
}
.fz-reel-progress .fz-reel-head::before {
	content: ""; position: absolute; left: 50%; top: -4px; width: 10px; height: 10px;
	background: var(--fz-lemon); transform: translateX(-50%) rotate(45deg);
}

/* Work clips: media is a role=button container; video fills it; HUD + bar appear on hover / focus / playing */
.elementor .fz-clip-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.elementor .fz-clip-media:is(.fz-ratio-9x16, [data-fz-ratio="9x16"]) { aspect-ratio: 9 / 16; }
.elementor .fz-clip-media:is(.fz-ratio-4x5, [data-fz-ratio="4x5"]) { aspect-ratio: 4 / 5; }
.elementor .fz-clip-media:is(.fz-ratio-1x1, [data-fz-ratio="1x1"]) { aspect-ratio: 1 / 1; }
.fz-clip-media:focus-visible { outline-offset: 4px; }
.elementor .fz-clip-media .fz-clip-hud {
	position: absolute; left: 12px; bottom: 14px; z-index: 3; display: flex; flex-direction: row; gap: 10px;
	width: auto; min-height: 0; padding: 3px 7px; background: rgba(28, 10, 26, .72);
	opacity: 0; transform: translateY(6px);
	transition: opacity var(--fz-t-4) linear, transform var(--fz-t-2) var(--fz-ease-settle);
}
.fz-clip-media .fz-clip-hud .elementor-heading-title { white-space: nowrap; font-variant-numeric: tabular-nums; }
.elementor .fz-clip-media .fz-clip-bar {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; width: auto; height: 3px; min-height: 0; padding: 0;
	background: rgba(28, 10, 26, .5); opacity: 0; transition: opacity var(--fz-t-4) linear;
}
.fz-clip-media .fz-clip-bar::after { content: ""; position: absolute; inset: 0; background: var(--fz-lemon); transform-origin: 0 50%; transform: scaleX(var(--fz-p, .4)); }
.fz-clip-media:is(:hover, :focus-visible) :is(.fz-clip-hud, .fz-clip-bar),
.is-playing .fz-clip-media :is(.fz-clip-hud, .fz-clip-bar) { opacity: 1; transform: none; }
.fz-clip-media .fz-ph { z-index: 4; }

/* Tall-track parallax (>= 700, full motion) */
[data-fz-parallax] { transform: translate3d(0, var(--fz-parallax, 0px), 0); }
@media (max-width: 699px) { [data-fz-parallax] { transform: none; } }

/* EDL rows: dark wipe up from the bottom, indent 12 px, text to paper; floating preview follows the pointer */
.fz-edl-list { position: relative; z-index: 0; }
.elementor .fz-edl-row { position: relative; cursor: pointer; transition: color var(--fz-t-4) linear, padding var(--fz-t-2) var(--fz-ease-settle); }
.fz-edl-row::before {
	content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fz-ink-2);
	transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--fz-t-2) var(--fz-ease-cut);
}
.elementor .fz-edl-row:is(:hover, :focus-within) { --padding-left: 12px; }
.fz-edl-row:is(:hover, :focus-within)::before { transform: none; }
.elementor .fz-edl-row:is(:hover, :focus-within) .elementor-widget-heading:not(.fz-edl-n) .elementor-heading-title { color: var(--fz-paper); }
.fz-edl-row .elementor-heading-title { transition: color var(--fz-t-4) linear; }
.fz-edl-t .elementor-heading-title a { color: inherit; text-decoration: none; }
.elementor .fz-edl-preview {
	position: fixed; left: 0; top: 0; z-index: 30; width: 300px; aspect-ratio: 16 / 9; min-height: 0; padding: 0;
	overflow: hidden; pointer-events: none; opacity: 0;
	transform: translate(var(--fz-ex, 0), var(--fz-ey, 0)) scale(.9); transition: opacity var(--fz-t-4) linear;
}
.fz-edl-preview.is-on { opacity: 1; }
.fz-edl-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.elementor-editor-active .fz-edl-preview { display: none; }

/* ---------- 17. Tracks timeline, process line, booking status ------------ */
.fz-timeline { --fz-tl-id: 72px; position: relative; overflow-x: clip; }
@media (max-width: 699px) { .fz-timeline { --fz-tl-id: 0px; } }
.elementor .fz-tl-playhead {
	position: absolute; top: 0; bottom: 0; left: calc(var(--fz-tl-id) + var(--fz-ph, 0) * (100% - var(--fz-tl-id)));
	z-index: 0; width: 1.5px; min-height: 0; padding: 0; background: var(--fz-ink); pointer-events: none; overflow: visible;
}
.fz-tl-playhead::before {
	content: ""; position: absolute; top: -1px; left: 50%; width: 14px; height: 16px; background: var(--fz-red-violet);
	clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); transform: translateX(-50%);
}
/* clips drop onto the tracks: 48 px from the right, 500 ms linear opacity + 750 ms ease-settle, i x 125 ms */
html.fz-js:not([data-motion="reduced"]) [data-fz-timeline]:not(.is-in) .fz-track .e-n-accordion-item-title { opacity: 0; transform: translateX(48px); }
html.fz-js [data-fz-timeline].is-in .fz-track .e-n-accordion-item-title {
	opacity: 1; transform: none;
	transition: opacity var(--fz-beat) linear, transform 750ms var(--fz-ease-settle);
	transition-delay: calc(var(--fz-i, 0) * var(--fz-t-8) * 2);
}
html.fz-js [data-fz-timeline].is-in .fz-track .e-n-accordion-item-title:hover { transform: translateX(6px); transition-delay: 0s; }
/* process line (Divider widget): violet line draws over the rule (--fz-pl from the runtime) */
.fz-process-line .elementor-divider { position: relative; }
.fz-process-line .elementor-divider::after {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--fz-red-violet);
	transform-origin: 0 50%; transform: scaleX(var(--fz-pl, 0));
}
.elementor .fz-toast {
	min-height: 1.4em; padding: 0; color: var(--fz-lemon);
	font: 400 12px/1.6 var(--fz-font-mono); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
/* scrubber marks are real <button>s: neutralise the Kit's global button style (0,1,1) */
.fz-scrubber .fz-scrubber__mark,
.fz-scrubber .fz-scrubber__mark:hover,
.fz-scrubber .fz-scrubber__mark:focus { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; min-height: 0; color: inherit; }

/* ---------- 18. Hit areas (>= 44 px without changing the reference visuals) ---------- */
.fz-site-header .fz-brand .elementor-heading-title a { padding-block: 11px; margin-block: -11px; }
.fz-site-footer .fz-wordmark .elementor-heading-title a { padding-block: 4px; margin-block: -4px; }
.elementor .fz-viewtoggle .e-button-base[data-fz-view]::after { content: ""; position: absolute; inset: -4px 0; }
.elementor .fz-reel-progress { height: 44px; }
.elementor .fz-reel-progress .fz-reel-head { top: calc(50% - 11px); bottom: calc(50% - 11px); }

/* ---------- 19. Editor canvas parity: Elementor default globals ----------
   A widget control that has a *default* global (Kit colour) and no value is printed on the frontend as one generic
   rule, e.g. `.elementor-widget-button .elementor-button { background-color: var(--e-global-color-accent) }` (0,2,0),
   which the component rules here outrank. The editor canvas prints the same default element-scoped instead
   (`.elementor-<doc> .elementor-element.elementor-element-<id> .elementor-button`, (0,4,0)), so there the Kit accent
   (lemon) won and the primary CTA rendered lemon on lemon. Instead of raising specificity, components whose colour
   is owned by scene tokens remap the global they would receive: frontend and editor then resolve to the same token,
   and a colour set natively in the panel still wins on both. */
.elementor .fz-btn-primary { --e-global-color-accent: var(--fz-cta-bg); }
.elementor .fz-btn-primary .elementor-button:active { --e-global-color-accent: var(--fz-cta-active-bg); }
.fz-site-header .fz-brand { --e-global-color-primary: currentColor; }
/* Headings whose type and colour are owned here (Heading default globals: primary font-family, font-weight, colour). */
.fz-site-header .fz-chip { --e-global-color-primary: var(--fz-text-2); --e-global-typography-primary-font-family: var(--fz-font-mono); --e-global-typography-primary-font-weight: 400; }
.fz-site-footer .fz-legal { --e-global-color-primary: var(--fz-text-3); }
.fz-reel-slate :is(.fz-slate-k, .fz-slate-note) { --e-global-typography-primary-font-family: var(--fz-font-mono); --e-global-typography-primary-font-weight: 400; }
.fz-reel-slate .fz-slate-k { --e-global-color-primary: var(--fz-mist-mute); }
.fz-reel-slate .fz-slate-note { --e-global-color-primary: var(--fz-lemon); }
.fz-reel-slate .fz-slate-v { --e-global-color-primary: var(--fz-paper); --e-global-typography-primary-font-family: var(--fz-font-display); --e-global-typography-primary-font-weight: 700; }

/* ---------- 15. Magnetic primary CTAs ----------------------------------- */
.elementor [data-fz-magnetic] .elementor-button { transform: translate(var(--fz-mx, 0px), var(--fz-my, 0px)); }
.elementor [data-fz-magnetic].fz-btn-primary .elementor-button:active { transform: translate(var(--fz-mx, 0px), var(--fz-my, 0px)) scale(.98); }

/* ---------- 9. Reduced motion (stored preference or OS) ----------------- */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
	animation-duration: 1ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 1ms !important;
	transition-delay: 0s !important;
}
html[data-motion="reduced"] .fz-rec .elementor-heading-title::before,
html[data-motion="reduced"] .fz-chip .elementor-heading-title::before { animation: none !important; }
html[data-motion="reduced"] .fz-site-header .fz-offcanvas .e-off-canvas[aria-hidden="true"] { transition: none !important; }
html[data-motion="reduced"] [data-fz-hero] .fz-insert { display: none; }
html[data-motion="reduced"] [data-fz-marquee] .fz-mq-track { transform: none !important; }
html[data-motion="reduced"] [data-fz-parallax] { transform: none !important; }
html[data-motion="reduced"] .fz-slate-bar { animation: none !important; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) .fz-slate-bar { animation: none; } }
/* Motion Off must also stop smooth scrolling: Elementor core sets html { scroll-behavior: smooth } under prefers-reduced-motion: no-preference. */
html[data-motion="reduced"] { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
	html:not([data-motion="full"]) .fz-rec .elementor-heading-title::before,
	html:not([data-motion="full"]) .fz-chip .elementor-heading-title::before { animation: none; }
}

@media print {
	.fz-site-header, .fz-scrubber, .fz-cursor-tag, [data-fz-marquee], body::after { display: none !important; }
}