/* Monmouth Films site styles. Tokens: tokens.css (enqueued first as mf-tokens). */

/* ---------- base (low specificity: also covers non-Elementor markup) ---------- */
body { font-family: var(--font-body); }
:where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-head); }
body.mf-site { background: var(--mf-bg); color: var(--mf-white); }
body.mf-site a { color: inherit; }

/* Kit-link trap: inline links in text widgets would not read as links on the dark
   sections. Inherit the text colour and underline. Per-widget link colours
   (higher specificity) still win. */
.mf-site .elementor-widget-text-editor a:not(.elementor-button) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- accessibility utilities ---------- */
.mf-sr-only,
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mf-skip-link {
	position: absolute; left: 12px; top: -100px; z-index: 1000;
	background: var(--mf-red-cta); color: var(--mf-white);
	font: 700 var(--mf-label-size) var(--font-head); text-transform: uppercase; letter-spacing: var(--mf-label-tracking);
	padding: 12px 18px; text-decoration: none;
}
.mf-skip-link:focus { top: 12px; }
.mf-site :focus-visible { outline: 2px solid var(--mf-red); outline-offset: 2px; }
#content:focus { outline: none; }

/* ---------- header ---------- */
/* Near-invisible until needed: transparent over the hero with a soft top scrim, then (site.js .mf-scrolled after the
   first 8px) a solid bar on a hairline. On Elementor pages the bar overlaps the first section (negative margin, no
   layout shift); that section pads its top by --mf-header-h (Shore Noir block below). */
html { scroll-padding-top: var(--mf-header-h); }
.mf-header {
	background: transparent; position: sticky; top: 0; z-index: 100; /* hairline as an inset shadow: the bar stays 72px */
	transition: background-color var(--mf-dur) var(--mf-ease), box-shadow var(--mf-dur) var(--mf-ease);
}
body.mf-site:has(.mf-main) .mf-header { margin-bottom: calc(-1 * var(--mf-header-h)); }
body.mf-site:not(:has(.mf-main)) .mf-header { background: var(--mf-bg); box-shadow: inset 0 -1px 0 var(--mf-border); }
.mf-header::before {
	content: ""; position: absolute; inset: 0 0 -48px; z-index: -1; pointer-events: none;
	background: linear-gradient(to bottom, rgba(2, 11, 18, .86), rgba(2, 11, 18, .5) 58%, rgba(2, 11, 18, 0));
	transition: opacity var(--mf-dur) var(--mf-ease);
}
.mf-header.mf-scrolled, .mf-header.mf-nav-open { background: var(--mf-surface-deep); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
.mf-header.mf-scrolled::before, .mf-header.mf-nav-open::before { opacity: 0; }
body.admin-bar .mf-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .mf-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .mf-header { top: 0; } }
.mf-header-inner { width: min(1200px, 100% - 2 * var(--mf-gutter)); margin: auto; height: var(--mf-header-h); display: flex; align-items: center; gap: 24px; }
.mf-logo { display: block; line-height: 0; font: 700 30px var(--font-head); color: var(--mf-white); text-decoration: none; }
/* The logo is a JPEG on a near-black box (#01080E-#030C13): lighten melts the box into the header. */
.mf-logo img { height: 34px; width: auto; mix-blend-mode: lighten; }
/* The sticky header is its own stacking context, so lighten has nothing to blend with over hero art and the JPEG's
   dark box shows. Instead the header paints the logo as a white fill through a luminance mask of the same file
   (--mf-logo, set inline by inc/site.php): white lettering = opaque, the near-black box (~4% luminance) = clear.
   The image is stacked twice and intersected, so the box's 4% becomes ~0.2%. The <img> stays for its size and
   alt text, just transparent. Without mask support the img shows as before. */
@supports ((mask-mode: luminance) or (-webkit-mask-source-type: luminance)) {
	.mf-header .mf-logo[style*="--mf-logo"] {
		background-color: var(--mf-white);
		-webkit-mask: var(--mf-logo) center / contain no-repeat, var(--mf-logo) center / contain no-repeat;
		-webkit-mask-source-type: luminance, luminance; -webkit-mask-composite: source-in;
		mask: var(--mf-logo) center / contain no-repeat luminance, var(--mf-logo) center / contain no-repeat luminance;
		mask-composite: intersect;
	}
	.mf-header .mf-logo[style*="--mf-logo"] img { opacity: 0; mix-blend-mode: normal; }
}
.mf-nav { margin-left: auto; display: flex; align-items: center; gap: 32px; }
.mf-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
/* The label voice: small, wide-tracked, white at 80% until hovered. */
.mf-menu a { font: 500 var(--mf-fs-label)/1 var(--font-body); text-transform: uppercase; letter-spacing: var(--mf-track-label); text-decoration: none; color: rgba(255, 255, 255, .8); }
.mf-nav-cta { font: 600 var(--mf-fs-label)/1 var(--font-head); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; color: var(--mf-white); }
.mf-menu a { transition: color var(--mf-dur) var(--mf-ease); }
.mf-menu a:hover, .mf-menu a[aria-current="page"] { color: var(--mf-white); }
/* Desktop: a white rule draws in from the left on hover; the current page holds a RED one (the active-nav mark),
   grown from the centre. */
@media (min-width: 1025px) {
	.mf-menu a { position: relative; display: inline-block; padding: 12px 0; }
	.mf-menu a::after {
		content: ""; position: absolute; left: 0; right: .16em; bottom: 4px; height: 1px; background: var(--mf-white);
		transform: scaleX(0); transform-origin: left; transition: transform var(--mf-dur) var(--mf-ease);
	}
	.mf-menu a:hover::after, .mf-menu a:focus-visible::after { transform: scaleX(1); }
	/* aria-current is set by site.js; WP's .current-menu-item is not used: on the front page it also marks the /#stream anchor. */
	.mf-menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: center; height: 2px; background: var(--mf-red); }
	.mf-menu a, .mf-nav-cta { white-space: nowrap; }
}
/* Small desktops: the row tightens (gaps, tracking) instead of wrapping. */
@media (min-width: 1025px) and (max-width: 1280px) {
	.mf-nav { gap: 20px; }
	.mf-menu { gap: 18px; }
	.mf-menu a { letter-spacing: .1em; }
	.mf-nav-cta { padding: 0 12px; }
}
/* The one primary action: still filled red, now compact (40px tall, the dense-desktop hit floor). */
.mf-nav-cta {
	display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
	background: var(--mf-red-cta); padding: 0 16px; border-radius: var(--mf-radius);
	transition: transform var(--mf-dur) var(--mf-ease), box-shadow var(--mf-dur) var(--mf-ease), background-color var(--mf-dur) var(--mf-ease);
}
.mf-nav-cta:hover { background: var(--mf-red-cta-hover); }
.mf-nav-cta:active { transform: translateY(1px); box-shadow: none; transition-duration: var(--mf-dur-fast); }
@media (hover: hover) and (pointer: fine) {
	.mf-nav-cta:hover { transform: translateY(var(--mf-lift)); box-shadow: var(--mf-shadow-cta); }
	.mf-nav-cta:active { transform: translateY(1px); box-shadow: none; }
}

.mf-nav-button {
	display: none; margin-left: auto; cursor: pointer;
	min-width: 48px; min-height: 48px; padding: 11px;
	flex-direction: column; justify-content: center; align-items: center; gap: 5px;
	background: none; border: 0; border-radius: var(--mf-radius); color: var(--mf-white);
}
.mf-nav-bar { display: block; width: 26px; height: 3px; background: currentColor; border-radius: 2px; transition: transform var(--mf-dur) var(--mf-ease), opacity var(--mf-dur-fast) var(--mf-ease); }
.mf-nav-open .mf-nav-bar:nth-child(2) { transform: translateY(8px) rotate(45deg); }
.mf-nav-open .mf-nav-bar:nth-child(3) { opacity: 0; }
.mf-nav-open .mf-nav-bar:nth-child(4) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1024px) {
	.mf-nav { flex-direction: column; align-items: stretch; gap: 0; }
	.mf-menu { flex-direction: column; gap: 0; }
	.mf-menu a { display: block; padding: 16px 0; border-bottom: 1px solid var(--mf-border); font-size: 14px; }
	.mf-nav-cta { margin-top: 14px; text-align: center; min-height: 48px; }

	/* JS ready: collapsible drop-down driven by the button */
	.mf-nav-ready .mf-nav-button { display: flex; }
	/* Closed = visibility:hidden (out of the tab order and the accessibility tree), so the panel can
	   fade and drop in instead of snapping; links follow 30ms apart. */
	.mf-nav-ready .mf-nav {
		display: flex; position: absolute; top: 100%; left: 0; right: 0;
		background: var(--mf-surface-deep); padding: 8px 0 18px; border-bottom: 1px solid var(--mf-steel);
		box-shadow: var(--mf-shadow-2);
		visibility: hidden; opacity: 0; transform: translateY(-8px);
		transition: opacity var(--mf-dur) var(--mf-ease), transform var(--mf-dur) var(--mf-ease), visibility 0s linear var(--mf-dur);
	}
	.mf-nav-ready.mf-nav-open .mf-nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.mf-nav-ready .mf-menu li, .mf-nav-ready .mf-nav-cta { opacity: 0; transform: translateY(-6px); transition: opacity var(--mf-dur) var(--mf-ease), transform var(--mf-dur) var(--mf-ease); }
	.mf-nav-ready.mf-nav-open .mf-menu li, .mf-nav-ready.mf-nav-open .mf-nav-cta { opacity: 1; transform: none; }
	.mf-nav-open .mf-menu li:nth-child(2) { transition-delay: 30ms; }
	.mf-nav-open .mf-menu li:nth-child(3) { transition-delay: 60ms; }
	.mf-nav-open .mf-menu li:nth-child(4) { transition-delay: 90ms; }
	.mf-nav-open .mf-menu li:nth-child(5) { transition-delay: 120ms; }
	.mf-nav-open .mf-menu li:nth-child(6) { transition-delay: 150ms; }
	.mf-nav-open .mf-nav-cta { transition-delay: 180ms; }
	.mf-nav-ready .mf-menu a { padding-inline: var(--mf-gutter); }          /* the page gutter on phones */
	.mf-nav-ready .mf-nav-cta { margin-inline: var(--mf-gutter); }
	.mf-menu a[aria-current="page"] { color: var(--mf-red-bright); } /* 15px text: the bright red reads AA */

	/* No JS: the menu stays open, stacked under the logo */
	.mf-header:not(.mf-nav-ready) .mf-header-inner { flex-wrap: wrap; height: auto; padding: 14px 0; }
	.mf-header:not(.mf-nav-ready) .mf-nav { width: 100%; margin-left: 0; }
	body.mf-site .mf-header:not(.mf-nav-ready) { margin-bottom: 0; background: var(--mf-bg); }
}
@media (max-width: 600px) {
	.mf-logo img { height: 26px; }
}

/* ---------- footer ---------- */
/* Copyright line (text-editor widget 87a01e3 in footer template #18): 11px #8799A5 -> 13px Muted.
   Better fixed in the widget itself; this override goes stale if the widget is replaced. */
.mf-footer .elementor-18 .elementor-element.elementor-element-87a01e3 { font-size: 13px; color: var(--mf-muted); }
/* Footer logo: same JPEG-on-near-black box as the header logo; lighten melts it into the footer. */
.mf-footer .elementor-widget-image img { mix-blend-mode: lighten; }
/* Footer links (icon-list widget, inline): Elementor draws the "|" as a border on every
   item but the last, so a wrapped row ends in a dangling bar. On phones the row wraps,
   so drop the bars and space the links with gap instead (24px tap height, WCAG 2.5.8). */
@media (max-width: 767px) {
	body.mf-site .mf-footer .elementor-widget-icon-list .elementor-icon-list-items.elementor-inline-items { margin-inline: 0; gap: 4px 22px; }
	body.mf-site .mf-footer .elementor-widget-icon-list .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item { margin-inline: 0; }
	body.mf-site .mf-footer .elementor-widget-icon-list .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item::after { display: none; }
	body.mf-site .mf-footer .elementor-widget-icon-list .elementor-icon-list-item > a { min-height: 24px; align-items: center; }
}

/* ---------- headings: no orphan words (e.g. About H1 "REAL STORIES." kept together) ---------- */
.mf-site .elementor-heading-title { text-wrap: balance; }

/* ---------- posters: boxless prints that lift ---------- */
/* No tile, no frame, no resting shadow: the art on the ground, a 1px white-at-.1 outline (::after) and a soft bottom
   shade that deepens on hover. The link clips the image zoom; inline-block keeps it the size of the poster where the
   widget column is wider. One shape for every poster (--mf-poster-ratio, the files' own 183x202: a 2:3 crop would cut
   the titles printed on the art). */
.mf-site .mf-poster a {
	position: relative; display: inline-block; vertical-align: top; overflow: hidden; line-height: 0;
	transition: transform var(--mf-dur) var(--mf-ease);
}
body.mf-site .mf-main .mf-poster.elementor-widget-image img {
	border: 0; aspect-ratio: var(--mf-poster-ratio); object-fit: cover; height: auto;
}
/* Full-res client posters (batch D, 2026-10-15) are true 2:3 one-sheets: show them whole, no crop. */
body.mf-site .mf-main .mf-poster.mf-poster--full.elementor-widget-image img { aspect-ratio: 2 / 3; }
.mf-site .mf-poster a::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	box-shadow: inset 0 0 0 1px var(--mf-img-outline);
	background: linear-gradient(to top, rgba(2, 11, 18, .45), rgba(2, 11, 18, 0) 38%);
	opacity: .55; transition: opacity var(--mf-dur) var(--mf-ease);
}
.mf-site .mf-poster img { display: block; transition: transform 420ms var(--mf-ease); }
.mf-site .mf-poster a:active { transform: scale(.98); transition-duration: var(--mf-dur-fast); }
.mf-site .mf-poster a:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
	.mf-site .mf-poster a:hover { transform: translateY(var(--mf-lift-card)); }
	.mf-site .mf-poster a:hover::after { opacity: 1; }
	.mf-site .mf-poster a:hover img { transform: scale(1.03); }
	.mf-site .mf-poster a:active { transform: translateY(-2px) scale(.98); }
	/* /films/: the caption under the poster answers the hover too */
	.mf-site .mf-film-card .elementor-heading-title { transition: color var(--mf-dur) var(--mf-ease); }
	.mf-site .mf-film-card:hover h3.elementor-heading-title { color: var(--mf-red-bright); }
}
/* Five-poster rows (film pages "More films", About "Our films") go 2 columns on phones:
   the 5th poster would sit alone, so drop it there. Only a grid of exactly five matches. */
@media (max-width: 767px) { .mf-site .e-grid > .mf-poster:nth-child(5):last-child { display: none; } }
/* Poster rows sit on the container edges. The image widget centred its 185px poster in a wider 1fr
   column, so every poster floated ~22px (66px on tablets) inside the grid's edges: off its heading,
   its "View all" button, and (/films/) its own left-aligned caption.
   /films/ cards: poster starts where its caption starts. */
.mf-site .mf-film-card .mf-poster.elementor-widget-image { text-align: start; }
/* Caption-less rows (home "Our films", film pages "More films", About): columns shrink to the poster
   and the spare width goes between them, so the first poster meets the heading's left edge and the
   last meets the button's right edge. Column counts mirror Elementor's (5 desktop, 3 tablet); phones
   (2 columns) already fill their cells. */
@media (min-width: 1025px) { .mf-site .mf-main .e-grid:has(> .mf-poster) { grid-template-columns: repeat(5, auto); justify-content: space-between; } }
@media (min-width: 768px) and (max-width: 1024px) { .mf-site .mf-main .e-grid:has(> .mf-poster) { grid-template-columns: repeat(3, auto); justify-content: space-between; } }

/* ---------- film hero poster: never let flex shrink the poster box below the scaled image ---------- */
/* !important kept: these beat Elementor's per-element inline flex/height rules on the container. */
.mf-site .mf-film-poster,
.mf-site .mf-film-poster .elementor-widget-image { flex-shrink: 0 !important; height: auto !important; min-height: 0; }
.mf-site .mf-film-poster { display: block !important; }
.mf-site .mf-film-poster img { height: auto; }
@media (max-width: 767px) { .mf-site .mf-film-poster { max-width: 260px; margin: 0 auto; } }

/* ---------- film pages: THE STORY ---------- */
/* Hook: the story block is the only <section> container on the site (one per film page,
   element ids differ per page). Desktop: heading left, story right, so the copy reads as a
   measured column (~68ch) instead of a 70%-wide line with an empty right half. */
.mf-site section.e-con.e-parent .elementor-widget-text-editor { width: 100%; max-width: 68ch; }
@media (min-width: 1025px) {
	.mf-site section.e-con.e-parent > .e-con-boxed { --flex-direction: row; --align-items: flex-start; --column-gap: 64px; --gap: 22px 64px; }
	.mf-site section.e-con.e-parent > .e-con-boxed > .e-con-inner > .e-con { --width: 300px; --flex-grow: 0; --flex-shrink: 0; padding-top: 4px; }
	.mf-site section.e-con.e-parent .elementor-widget-text-editor { flex: 1 1 0; font-size: 18px; line-height: 1.65; }
}

/* ---------- Fluent Forms: native to the dark theme ---------- */
/* FF declares its palette on :root; re-point it here so its own rules (borders,
   error states, required asterisk) pick up the brand without being fought. */
.mf-site .fluentform {
	--fluentform-primary: var(--mf-red);
	--fluentform-secondary: var(--mf-white);
	--fluentform-danger: var(--mf-red-bright);
	--fluentform-border-color: var(--mf-steel);
	--fluentform-border-radius: var(--mf-radius);
}
/* Scope prefix beats FF's .ff-default / .fluentform rules (max 0,3,1) without !important. */
.mf-site .fluentform form.frm-fluent-form .ff-el-group { margin-bottom: 12px; }

/* Labels: the form uses hide_label, but placeholder-only labelling fails WCAG 3.3.2 /
   1.3.1 once typing starts. FF still prints the <label>s, so show them. */
.mf-site .fluentform form.frm-fluent-form div.ff-el-form-hide_label > .ff-el-input--label { display: block; visibility: visible; }
.mf-site .fluentform form.frm-fluent-form .ff-el-input--label { margin-bottom: 6px; }
.mf-site .fluentform form.frm-fluent-form .ff-el-input--label label {
	color: var(--mf-muted); font: 700 12px/1.3 var(--font-head); text-transform: uppercase; letter-spacing: 1px; margin: 0;
}

.mf-site .fluentform form.frm-fluent-form .ff-el-form-control {
	min-height: 48px; padding: 12px 14px;
	font: 16px/1.4 var(--font-body);   /* 16px: no iOS focus-zoom */
	color: var(--mf-white); background: var(--mf-surface);
	border: 1px solid var(--mf-steel); border-radius: var(--mf-radius);
	box-shadow: none; outline: 2px solid transparent; /* keeps a ring in forced-colors mode */
}
.mf-site .fluentform form.frm-fluent-form textarea.ff-el-form-control { min-height: 140px; resize: vertical; }
.mf-site .fluentform form.frm-fluent-form .ff-el-form-control::placeholder { color: var(--mf-muted); opacity: 1; }
.mf-site .fluentform form.frm-fluent-form .ff-el-form-control:focus {
	color: var(--mf-white); background: var(--mf-surface);
	border-color: var(--mf-red); box-shadow: none; /* border + the focus-visible outline below; no halo */
}
/* Keyboard focus: a solid ring that reads on the dark field (the halo alone vanished in preview) */
.mf-site .fluentform form.frm-fluent-form .ff-el-form-control:focus-visible {
	outline: 2px solid var(--mf-red); outline-offset: 2px;
}
/* Browser autofill would paint a light box on the dark field */
.mf-site .fluentform form.frm-fluent-form .ff-el-form-control:-webkit-autofill {
	-webkit-text-fill-color: var(--mf-white);
	box-shadow: 0 0 0 1000px var(--mf-surface) inset;
	caret-color: var(--mf-white);
}

/* Invalid state */
.mf-site .fluentform form.frm-fluent-form .ff-el-is-error .ff-el-form-control,
.mf-site .fluentform form.frm-fluent-form .ff-el-form-control[aria-invalid="true"] { border-color: var(--mf-red-bright); box-shadow: 0 0 0 1px var(--mf-red-bright); }
.mf-site .fluentform form.frm-fluent-form .ff-el-is-error .text-danger {
	color: var(--mf-red-bright); font: 14px/1.4 var(--font-body); margin-top: 6px;
}

/* Consent / T&C */
.mf-site .fluentform form.frm-fluent-form .ff-el-tc label,
.mf-site .fluentform form.frm-fluent-form .ff_t_c { color: var(--mf-muted-light); font-size: 13px; line-height: 1.5; }
.mf-site .fluentform form.frm-fluent-form .ff-el-tc a { color: var(--mf-white); text-decoration: underline; text-underline-offset: 2px; }
.mf-site .fluentform form.frm-fluent-form .ff-el-is-error .ff-el-form-check-label { color: var(--mf-red-bright); }
.mf-site .fluentform form.frm-fluent-form .ff-el-form-check-input {
	width: 18px; height: 18px; margin: 0; accent-color: var(--mf-red); cursor: pointer;
}

/* Submit (also beats FF's per-form inline rule form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)) */
.mf-site .fluentform form.frm-fluent-form .ff-btn-submit {
	width: 100%; min-height: 48px; padding: 17px;
	background: var(--mf-red-cta); color: var(--mf-white);
	border: 0; border-radius: var(--mf-radius); opacity: 1;
	font: 700 19px var(--font-head); text-transform: uppercase; letter-spacing: .5px; cursor: pointer; /* 19px bold = WCAG large text: white on Brand Red is 4.34:1, needs 3:1 */
	position: relative; overflow: hidden;
	transition: background-color var(--mf-dur) var(--mf-ease), transform var(--mf-dur) var(--mf-ease), box-shadow var(--mf-dur) var(--mf-ease), opacity var(--mf-dur) var(--mf-ease);
}
.mf-site .fluentform form.frm-fluent-form .ff-btn-submit:hover { opacity: 1; background: var(--mf-red-cta-hover); }
.mf-site .fluentform form.frm-fluent-form .ff-btn-submit:active { transform: translateY(1px); box-shadow: none; transition-duration: var(--mf-dur-fast); }
@media (hover: hover) and (pointer: fine) {
	.mf-site .fluentform form.frm-fluent-form .ff-btn-submit:hover { transform: translateY(var(--mf-lift)); box-shadow: var(--mf-shadow-cta); }
	.mf-site .fluentform form.frm-fluent-form .ff-btn-submit:active { transform: translateY(1px); box-shadow: none; }
}
.mf-site .fluentform form.frm-fluent-form .ff-btn-submit:focus { opacity: 1; }
.mf-site .fluentform form.frm-fluent-form .ff-btn-submit:focus-visible { outline: 2px solid var(--mf-white); outline-offset: 3px; }
.mf-site .fluentform form.frm-fluent-form .ff-btn-submit:disabled,
.mf-site .fluentform form.frm-fluent-form .ff-btn-submit.disabled,
.mf-site .fluentform form.frm-fluent-form .ff-btn-submit.ff-working { opacity: .65; filter: none; transform: none; box-shadow: none; cursor: progress; }
/* Sending (FF adds .ff-working + form.ff_submitting): a slow diagonal stripe runs across the
   button, transform-only, so the wait reads as progress rather than a frozen control. */
.mf-site .fluentform form.frm-fluent-form .ff-btn-submit.ff-working { opacity: .85; } /* the stripe carries the state; keep the label legible */
.mf-site .fluentform form.frm-fluent-form .ff-btn-submit.ff-working::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: -100%; right: auto; width: 200%; height: auto; pointer-events: none; /* replaces FF's own 5px bar */
	background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 14px, rgba(255, 255, 255, .14) 14px 28px);
	animation: mf-working 900ms linear infinite;
}
@keyframes mf-working { to { transform: translateX(30.9px); } }

/* Success: a branded card */
.mf-site .ff-message-success {
	margin-top: 12px; padding: 20px 24px;
	background: var(--mf-surface); color: var(--mf-white);
	border: 1px solid var(--mf-steel); border-left: 4px solid var(--mf-white); border-radius: var(--mf-radius); box-shadow: none;
	font: 500 18px/1.4 var(--font-head); text-transform: uppercase; letter-spacing: .5px;
}
.mf-site .ff-message-success p { margin: 0; }

@media (min-width: 601px) {
	.mf-site .mf-form-2col fieldset { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
	.mf-site .mf-form-2col fieldset > * { grid-column: 1 / -1; }
	.mf-site .mf-form-2col fieldset > .mf-half { grid-column: auto; }
}

/* ---------- news + sitemap ---------- */
.mf-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mf-news-card {
	display: flex; flex-direction: column; gap: 8px; background: var(--mf-surface); border: 1px solid var(--mf-steel); padding: 24px; text-decoration: none;
	box-shadow: var(--mf-shadow-1);
	transition: transform var(--mf-dur) var(--mf-ease), box-shadow var(--mf-dur) var(--mf-ease), border-color var(--mf-dur) var(--mf-ease);
}
.mf-news-card:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
	.mf-news-card:hover { transform: translateY(-4px); box-shadow: var(--mf-shadow-2); border-color: var(--mf-steel-hi); }
	.mf-news-card:hover .mf-news-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}
.mf-news-title { transition: color var(--mf-dur) var(--mf-ease); }
.mf-news-card img { width: 100%; height: auto; margin: -24px -24px 6px; max-width: calc(100% + 48px); }
.mf-news-date { font: 500 var(--mf-fs-label)/1.4 var(--font-body); color: var(--mf-fog); text-transform: uppercase; letter-spacing: var(--mf-track-label); }
.mf-news-title { font: 700 22px var(--font-head); text-transform: uppercase; }
.mf-news-excerpt { font-size: 14px; color: var(--mf-muted); line-height: 1.5; }
.mf-news-empty { max-width: 640px; margin-inline: auto; box-sizing: border-box; padding: 48px 40px; background: var(--mf-surface); border: 1px solid var(--mf-steel, #17313F); border-left: 4px solid var(--mf-steel-hi); box-shadow: none; }
.mf-news-empty__title { margin: 0 0 12px; font: 700 32px/1.1 var(--font-head); text-transform: uppercase; color: var(--mf-white); }
.mf-news-empty__text { margin: 0 0 24px; color: var(--mf-muted); font-size: 16px; line-height: 1.5; }
.mf-news-empty__cta { margin: 0; }
.mf-site .mf-news-empty__button {
	display: inline-block; padding: 15px 26px; background: var(--mf-red-cta); color: var(--mf-white); font: 700 14px var(--font-head); text-transform: uppercase; letter-spacing: .6px; text-decoration: none;
	transition: background-color var(--mf-dur) var(--mf-ease), transform var(--mf-dur) var(--mf-ease), box-shadow var(--mf-dur) var(--mf-ease);
}
.mf-site .mf-news-empty__button:hover { background: var(--mf-red-cta-hover); }
.mf-site .mf-news-empty__button:active { transform: translateY(1px); box-shadow: none; transition-duration: var(--mf-dur-fast); }
@media (hover: hover) and (pointer: fine) {
	.mf-site .mf-news-empty__button:hover { transform: translateY(var(--mf-lift)); box-shadow: var(--mf-shadow-cta); }
	.mf-site .mf-news-empty__button:active { transform: translateY(1px); box-shadow: none; }
}
@media (max-width: 600px) { .mf-news-empty { padding: 32px 22px; } .mf-news-empty__title { font-size: 26px; } }
@media (max-width: 900px) { .mf-news-grid { grid-template-columns: 1fr; } }
.mf-sitemap { columns: 2; padding-left: 18px; line-height: 2; }
.mf-sitemap a { color: var(--mf-white); }
.mf-sitemap a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mf-sitemap-xml a { color: var(--mf-muted); }
@media (max-width: 600px) { .mf-sitemap { columns: 1; } }

/* ---------- theme-rendered pages (single posts, archives, 404) ---------- */
body.mf-site .site-main { width: min(900px, 92%); margin: 50px auto 70px; line-height: 1.7; }
body.mf-site .site-main .entry-title { font: 700 46px/1.05 var(--font-head); text-transform: uppercase; }
body.mf-site .site-main a { color: var(--mf-white); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- premium layer: depth, feedback, reveals ---------- */
/* One motion vocabulary: --mf-ease, 160/240ms feedback, 560ms reveals, 18px rise (tokens.css). */

::selection { background: var(--mf-red); color: var(--mf-white); }
html { scrollbar-color: var(--mf-steel) var(--mf-bg); }
.mf-site .elementor-widget-text-editor :where(p, li) { text-wrap: pretty; }

/* Section seams: dark bands meet on a faint hairline instead of a bare colour step. */
.mf-main .elementor > .e-con.e-parent + .e-con.e-parent { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); }

/* Imagery: a 1px white outline at .1 keeps photos from bleeding into the dark page.
   Full-bleed images (the form-section key art) sit at the viewport edge and are left bare. */
.mf-main .elementor-widget-image img { outline: 1px solid var(--mf-img-outline); outline-offset: -1px; }
.mf-main .e-con-full.e-parent > .e-con-full > .elementor-widget-image img,
.mf-main .mf-poster img { outline: 0; }
/* ---------- key art + form band (home, How it works) ---------- */
/* Hook: a full-width parent of three columns (key art | pitch | form) whose last column holds the form.
   Element ids differ per page; this structure is unique to the band (Contact's form sits elsewhere). */
@media (min-width: 1025px) {
	/* The form column ran to 28px from the viewport edge, past the 1200px container. End the form on the
	   container's right edge: pad by the container gutter (% resolves against the full-width band, so
	   50% - 600px) and widen the column by that extra beyond the 20px phone/tablet gutter, so the form keeps its width.
	   The form holds its width; art and pitch give the room (the pitch never below 380px, its heading's line). */
	.mf-main .e-con-full.e-parent:has(> .e-con-full:nth-child(3):last-child .fluentform) > .e-con-full:last-child {
		--width: calc(33% + max(0px, 50% - 620px));
		padding-right: max(20px, calc(50% - 600px));
	}
	.mf-main .e-con-full.e-parent:has(> .e-con-full:nth-child(3):last-child .fluentform) > .e-con-full:last-child { flex-shrink: 0; }
	.mf-main .e-con-full.e-parent:has(> .e-con-full:nth-child(3):last-child .fluentform) > .e-con-full:nth-child(2) { min-width: min(380px, 29%); }
	/* Key art: the BIEGENWALD title spans ~65% of the 3:2 image, but the column is portrait, so
	   background-size: cover cut it to "BIEGENWAL". Paint the art twice from the column's own background
	   (inherit keeps Elementor's lazy-load): ::before a blurred, dimmed cover fill; ::after the sharp
	   image at 140% of the column width (the full title plus margins), centred, its top and bottom
	   feathered into the fill. 93.33cqw = the sharp image's height (1024/1536 x 140%). */
	.mf-main .e-con-full.e-parent:has(> .e-con-full:nth-child(3):last-child .fluentform) > .e-con-full:first-child {
		container-type: inline-size; position: relative; overflow: hidden; background-color: var(--mf-bg);
	}
	.mf-main .e-con-full.e-parent:has(> .e-con-full:nth-child(3):last-child .fluentform) > .e-con-full:first-child::before,
	.mf-main .e-con-full.e-parent:has(> .e-con-full:nth-child(3):last-child .fluentform) > .e-con-full:first-child::after {
		content: ""; position: absolute; inset: 0; width: auto; height: auto; pointer-events: none;
		background-image: inherit; background-repeat: no-repeat; mix-blend-mode: normal; opacity: 1;
	}
	.mf-main .e-con-full.e-parent:has(> .e-con-full:nth-child(3):last-child .fluentform) > .e-con-full:first-child::before {
		inset: -40px; background-size: cover; background-position: 0 50%; filter: blur(24px) brightness(.45);
	}
	.mf-main .e-con-full.e-parent:has(> .e-con-full:nth-child(3):last-child .fluentform) > .e-con-full:first-child::after {
		--mf-art-h: 93.33cqw;
		background-size: 140% auto; background-position: 4% 50%;
		-webkit-mask-image: linear-gradient(to bottom, transparent calc(50% - var(--mf-art-h) / 2), #000 calc(50% - var(--mf-art-h) / 2 + 48px), #000 calc(50% + var(--mf-art-h) / 2 - 48px), transparent calc(50% + var(--mf-art-h) / 2));
		mask-image: linear-gradient(to bottom, transparent calc(50% - var(--mf-art-h) / 2), #000 calc(50% - var(--mf-art-h) / 2 + 48px), #000 calc(50% + var(--mf-art-h) / 2 - 48px), transparent calc(50% + var(--mf-art-h) / 2));
	}
}

/* Stacked (tablet, phone): pitch and form sit on the 20px page gutter like every other section, not 28px. */
@media (max-width: 1024px) {
	.mf-main .e-con-full.e-parent:has(> .e-con-full:nth-child(3):last-child .fluentform) > .e-con-full:not(:first-child) { padding-left: 20px; padding-right: 20px; }
}

/* Film-page hero poster: de-boxed, no frame, no shadow (the hero's blurred backdrop carries the depth). */
body.mf-site .mf-main .mf-film-poster .elementor-widget-image img { border: 0; box-shadow: none; }

/* Cards: step cards (and any card row in a grid) rest on shadow-1. The /films/ card is a
   transparent poster+caption column, so it carries no surface of its own. */
.mf-main .e-grid > .e-con:not(.mf-film-card) { box-shadow: var(--mf-shadow-1); }

/* Elementor buttons. Red buttons paint var(--e-global-color-primary) and hover to var(--e-global-color-accent)
   (the kit's #F20D18 / brighter #FF2A33). Re-pointing both variables ON the button moves every red CTA to the
   AA fill and a deeper hover without touching red text elsewhere; ghost buttons (hover to white) are unaffected.
   Square corners beat the widgets' own 3px (0,4,0). site.js tags red ones .mf-cta for the one CTA shadow. */
.mf-site .elementor-button { --e-global-color-primary: var(--mf-red-cta); --e-global-color-accent: var(--mf-red-cta-hover); }
body.mf-site .elementor .elementor-element .elementor-button { border-radius: var(--mf-radius); }
.mf-site .elementor-widget-button .elementor-button {
	transition: transform var(--mf-dur) var(--mf-ease), box-shadow var(--mf-dur) var(--mf-ease), background-color var(--mf-dur) var(--mf-ease), color var(--mf-dur) var(--mf-ease), border-color var(--mf-dur) var(--mf-ease);
}
.mf-site .elementor-widget-button .elementor-button:active { transform: translateY(1px); box-shadow: none; transition-duration: var(--mf-dur-fast); }
.mf-site .elementor-widget-button .elementor-button-icon { transition: transform var(--mf-dur) var(--mf-ease); }
@media (hover: hover) and (pointer: fine) {
	.mf-site .elementor-widget-button .elementor-button:hover { transform: translateY(var(--mf-lift)); box-shadow: var(--mf-shadow-2); }
	.mf-site .elementor-widget-button .elementor-button.mf-cta:hover { box-shadow: var(--mf-shadow-cta); }
	.mf-site .elementor-widget-button .elementor-button:hover .elementor-button-icon { transform: translateX(2px); }
	.mf-site .elementor-widget-button .elementor-button:active { transform: translateY(1px); box-shadow: none; }
}

/* Form fields: border warms on hover, turns red on focus (rule above); the label lights up with its field. */
.mf-site .fluentform form.frm-fluent-form .ff-el-form-control {
	transition: border-color var(--mf-dur) var(--mf-ease), box-shadow var(--mf-dur) var(--mf-ease), background-color var(--mf-dur) var(--mf-ease);
}
.mf-site .fluentform form.frm-fluent-form .ff-el-form-control:hover:not(:focus) { border-color: var(--mf-steel-hi); }
.mf-site .fluentform form.frm-fluent-form .ff-el-input--label label { transition: color var(--mf-dur) var(--mf-ease); }
.mf-site .fluentform form.frm-fluent-form .ff-el-group:focus-within .ff-el-input--label label { color: var(--mf-white); }

/* Footer links: the same drawn white rule as the header nav. */
.mf-footer .elementor-icon-list-item > a .elementor-icon-list-text { position: relative; }
.mf-footer .elementor-icon-list-item > a .elementor-icon-list-text::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--mf-white);
	transform: scaleX(0); transform-origin: left; transition: transform var(--mf-dur) var(--mf-ease);
}
.mf-footer .elementor-icon-list-item > a:hover .elementor-icon-list-text::after,
.mf-footer .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text::after { transform: scaleX(1); }

/* Small red text is retired (red is a signal): hero eyebrows and any sub-18px heading painted in Brand Red
   (site.js tags those .mf-red-small) take the label grey. The role classes below normally cover both. */
.mf-main .elementor > .e-parent:first-child .elementor-widget-heading:has(+ .elementor-widget-heading h1) .elementor-heading-title,
body.mf-site .elementor .elementor-element .elementor-heading-title.mf-red-small { color: var(--mf-fog); }

/* ---------- atmosphere: film grain + vignette ---------- */
/* One static grain layer (inline SVG noise, never animated) above the page, below the header (z 100) and its
   menu. Plain alpha, not a blend mode: overlay/soft-light at this strength are invisible on near-black (tested
   2026-10-07) and cost a full-viewport blend. At .035 white noise lifts a dark pixel by ~2% on average; white
   text is unchanged and its contrast stays far above AA (measured on the hero H1). */
body.mf-site::after {
	content: ""; position: fixed; inset: 0; z-index: 99; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 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") repeat 0 0 / 200px 200px;
	opacity: .035;
}
/* Vignette on the gradient bands (heroes, CTA bands): an inset shadow paints under the content, no layout effect. */
.mf-main .elementor > .e-parent[data-settings*="gradient"] { box-shadow: inset 0 0 clamp(60px, 12vw, 180px) rgba(0, 0, 0, .42); }
.mf-main .elementor > .e-con.e-parent + .e-con.e-parent[data-settings*="gradient"] {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), inset 0 0 clamp(60px, 12vw, 180px) rgba(0, 0, 0, .42);
}

/* ---------- poster spotlight ---------- */
/* In a poster grid, the hovered poster lifts (above) and its neighbours step back. */
.mf-main .e-grid > * { transition: opacity var(--mf-dur-spot) var(--mf-ease-inout); }
@media (hover: hover) and (pointer: fine) {
	/* After a card has revealed (.mf-done), the spotlight owns its opacity timing: a slow symmetric fade both ways,
	   so neighbours dim and return smoothly instead of flashing. Higher specificity than .mf-done on purpose;
	   cards still mid-reveal (.mf-in) keep their staggered reveal timing. */
	.mf-site .mf-main .e-grid:has(.mf-poster) > .mf-done {
		transition: opacity var(--mf-dur-spot) var(--mf-ease-inout), transform var(--mf-dur) var(--mf-ease);
	}
	/* Dimming waits 60ms so gliding from one poster to the next never flickers the row; un-dimming starts at once. */
	.mf-site .mf-main .e-grid:has(.mf-poster a:hover) > :not(:hover) { opacity: .55; transition-delay: 60ms; }
}

/* ==================== Shore Noir, Batch A (research/2026-10-07-refs/SYNTHESIS.md) ====================
   Red is a signal; two type voices; the art owns the frame; boxless posters; one section rhythm; a studio sign-off.
   Hooks: the type-role classes inc/type-roles.php prints on every heading (mf-t-*, mf-red, mf-dup), Elementor's
   structure (first section = hero, empty child containers = decorative rules, .mf-step / .mf-film-card / .mf-poster /
   .mf-film-poster CSS classes in the page data) and --mf-art (site.js: the hero image's URL). No element ids.
   "body.mf-site .elementor .elementor-widget.mf-t-*" (0,5,1) outranks Elementor's per-widget typography
   (.elementor-N .elementor-element.elementor-element-ID .elementor-heading-title, 0,4,0) at every breakpoint. */

/* ---------- red is a signal, not a paint ---------- */
/* Red stays on: CTA fills, focus rings, the active-nav mark, the hero's one red title word, the poster spotlight
   title. Every other heading painted red goes white (titles) or fog (labels, below). */
body.mf-site .elementor .elementor-widget.mf-red .elementor-heading-title { color: var(--mf-white); }
body.mf-site .mf-main .elementor > .e-parent:first-child .elementor-widget.mf-red.mf-t-display .elementor-heading-title { color: var(--mf-red); }
/* Decorative rules (the empty 50x5 child container right after a section title): a fog hairline. The hero keeps its
   one red rule (it draws in with the hero moment). Empty containers elsewhere (the form band's key art) are not rules. */
body.mf-site .mf-main .elementor > .e-parent:not(:first-child) .elementor-widget-heading + .e-con.e-child:not(:has(*)) {
	background: var(--mf-fog); --min-height: 1px; min-height: 1px; height: 1px; align-self: center;
}
/* Step numbers (a card's first child: a container holding only the number heading): an outlined ring, not a red disc. */
body.mf-site .mf-main .e-grid > .e-con > .e-con.e-child:first-child:has(> .elementor-widget-heading:only-child) { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
body.mf-site .mf-main .e-grid > .e-con > .e-con.e-child:first-child:has(> .elementor-widget-heading:only-child) .elementor-heading-title { font-size: var(--mf-fs-card); font-weight: 500; }

/* ---------- two type voices ---------- */
body.mf-site .elementor .elementor-widget.mf-t-display .elementor-heading-title {
	font-size: var(--mf-fs-display); line-height: var(--mf-lh-display); letter-spacing: var(--mf-track-display);
}
body.mf-site .elementor .elementor-widget.mf-t-title .elementor-heading-title { font-size: var(--mf-fs-title); line-height: 1; letter-spacing: -.005em; }
body.mf-site .elementor .elementor-widget.mf-t-card .elementor-heading-title { font-size: var(--mf-fs-card); line-height: 1.1; letter-spacing: .01em; }
body.mf-site .elementor .elementor-widget.mf-t-label .elementor-heading-title {
	font: 500 var(--mf-fs-label)/1.45 var(--font-body); letter-spacing: var(--mf-track-label); text-transform: uppercase; color: var(--mf-fog);
}
/* A label that repeats a title already on the page (the film name beside "Trailer"): decoration, gone. */
body.mf-site .elementor .elementor-widget.mf-dup { display: none; }
/* Hero sub-lines (home: "Ocean Township", "Based on true events.") take the card step, not a size of their own. */
body.mf-site .mf-main .elementor > .e-parent:first-child .elementor-widget-heading:not(.mf-t-display, .mf-t-label) .elementor-heading-title { font-size: var(--mf-fs-card); line-height: 1.15; }
/* /films/ genre lines: the label voice, tracked tighter for a phone's half-width column. */
body.mf-site .mf-main .mf-film-card > .elementor-widget.mf-t-label:last-child .elementor-heading-title { letter-spacing: .08em; }
/* /films/ card titles: small heading face under the poster; they answer the poster hover in the bright red (spotlight). */
body.mf-site .mf-main .mf-film-card .elementor-widget.mf-t-label h3.elementor-heading-title {
	font: 600 15px/1.25 var(--font-head); letter-spacing: .04em; color: var(--mf-white); transition: color var(--mf-dur) var(--mf-ease);
}

/* ---------- section rhythm: one scale, one edge ---------- */
body.mf-site .mf-main .elementor > .e-parent:not(:first-child):not(:has(> .e-con-full:nth-child(3):last-child .fluentform)) {
	padding-top: var(--mf-space-3); padding-bottom: var(--mf-space-3);
}
/* Every hero clears the transparent header, then breathes on the same scale; text heroes anchor their title low. */
body.mf-site .mf-main .elementor > .e-parent:first-child {
	padding-top: calc(var(--mf-header-h) + var(--mf-space-3)); padding-bottom: var(--mf-space-3);
}
body.mf-site .mf-main .elementor > .e-parent:first-child:not(:has(.elementor-widget-image)) {
	--min-height: clamp(420px, 58vh, 600px); min-height: clamp(420px, 58vh, 600px); justify-content: flex-end;
}

/* ---------- the art owns the frame ---------- */
/* Heroes with art: taller, the art behind everything as a blurred, dimmed fill (::before, from --mf-art; it fades in
   once site.js has the URL), a left + bottom scrim (::after) for the type, the type anchored bottom-left on the edge.
   Elementor's own .e-con::before overlay rule sets a size and blend: reset here. */
body.mf-site .mf-main .elementor > .e-parent:first-child:has(.elementor-widget-image) {
	position: relative; isolation: isolate; overflow: hidden; justify-content: flex-end;
	--min-height: clamp(600px, 86vh, 880px); min-height: clamp(600px, 86vh, 880px); padding-bottom: var(--mf-space-2);
}
body.mf-site .mf-main .elementor > .e-parent:first-child:has(.elementor-widget-image)::before,
body.mf-site .mf-main .elementor > .e-parent:first-child:has(.elementor-widget-image)::after {
	content: ""; position: absolute; width: auto; height: auto; pointer-events: none; mix-blend-mode: normal; border: 0;
}
body.mf-site .mf-main .elementor > .e-parent:first-child:has(.elementor-widget-image)::before {
	inset: -80px; z-index: -2; background: var(--mf-art, none) 50% 40% / cover no-repeat;
	filter: blur(44px) brightness(.5) saturate(1.15); opacity: 0; transition: opacity 900ms var(--mf-ease);
}
body.mf-site .mf-main .elementor > .e-parent.mf-art-ready:first-child:has(.elementor-widget-image)::before { opacity: .9; }
body.mf-site .mf-main .elementor > .e-parent:first-child:has(.elementor-widget-image)::after {
	inset: 0; z-index: -1; opacity: 1;
	background:
		linear-gradient(90deg, rgba(2, 11, 18, .96) 0%, rgba(2, 11, 18, .9) 32%, rgba(2, 11, 18, .5) 54%, rgba(2, 11, 18, 0) 78%),
		linear-gradient(0deg, var(--mf-bg) 0%, rgba(2, 11, 18, 0) 32%);
}

/* Home: the key art leaves its box and fills the right of the frame, feathered into the fill on its left. The text
   column widens to hold the title on two lines. */
body.mf-site .mf-main .elementor > .e-parent:first-child:has(.elementor-widget-image):not(:has(.mf-film-poster)) :is(.e-con-boxed, .e-con-inner) { position: static; }
body.mf-site .mf-main .elementor > .e-parent:first-child:has(.elementor-widget-image):not(:has(.mf-film-poster)) .e-con:has(> .elementor-widget-image) {
	position: absolute; inset: 0 0 0 auto; z-index: -1; --width: 66%; width: 66%; height: 100%; margin: 0; padding: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 34%); mask-image: linear-gradient(90deg, transparent, #000 34%);
}
body.mf-site .mf-main .elementor > .e-parent:first-child:has(.elementor-widget-image):not(:has(.mf-film-poster)) .elementor-widget-image,
body.mf-site .mf-main .elementor > .e-parent:first-child:has(.elementor-widget-image):not(:has(.mf-film-poster)) .elementor-widget-image > :is(.elementor-widget-container, a) { height: 100%; }
body.mf-site .mf-main .elementor > .e-parent:first-child:has(.elementor-widget-image):not(:has(.mf-film-poster)) .elementor-widget-image img {
	width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 85% 42%; outline: 0; border: 0;
}
body.mf-site .mf-main .elementor > .e-parent:first-child:has(.elementor-widget-image):not(:has(.mf-film-poster)) .e-con:has(> .elementor-widget-heading h1) {
	--width: min(100%, 700px); width: min(100%, 700px); margin-right: auto;
}
@media (max-width: 767px) {
	/* Phones: the art bleeds edge to edge across the top (under the header), fades into the fill, the type follows. */
	body.mf-site .mf-main .elementor > .e-parent:first-child:has(.elementor-widget-image):not(:has(.mf-film-poster)) {
		--min-height: 70vh; min-height: 70vh; padding-top: calc(var(--mf-header-h) + 48vw);
	}
	body.mf-site .mf-main .elementor > .e-parent:first-child:has(.elementor-widget-image):not(:has(.mf-film-poster)) .e-con:has(> .elementor-widget-image) {
		inset: 0 0 auto 0; --width: 100%; width: 100%; height: calc(var(--mf-header-h) + 62vw);
		-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent);
	}
	body.mf-site .mf-main .elementor > .e-parent:first-child:has(.elementor-widget-image)::after {
		background: linear-gradient(180deg, rgba(2, 11, 18, 0) 30%, rgba(2, 11, 18, .55) 100%);
	}
}

/* Film pages: the poster carries its own title, so it is never cropped or blown up past its file (183x202, already
   shown ~2x). It loses its frame and moves to the right; its own blur fills the frame behind the type. */
@media (min-width: 768px) {
	body.mf-site .mf-main .elementor > .e-parent:first-child:has(.mf-film-poster) .e-con:has(> .mf-film-poster) {
		align-items: flex-end; justify-content: space-between; --gap: 64px; gap: 64px;
	}
	body.mf-site .mf-main .elementor > .e-parent:first-child .mf-film-poster.e-con {
		order: 2; --width: clamp(240px, 25vw, 360px); width: clamp(240px, 25vw, 360px);
	}
	body.mf-site .mf-main .elementor > .e-parent:first-child:has(.mf-film-poster) .e-con:has(> .elementor-widget-heading h1) {
		order: 1; --width: auto; width: auto; flex: 1 1 0; max-width: 760px;
	}
}
/* Film heroes are poster + copy, not a full-bleed still: capped at ~64vh, no empty band above the copy, and a darker
   fill so the blur never reads as a grey smudge behind the text. */
body.mf-site .mf-main .elementor > .e-parent:first-child:has(.mf-film-poster) {
	--min-height: clamp(480px, 64vh, 640px); min-height: clamp(480px, 64vh, 640px);
	padding-top: calc(var(--mf-header-h) + var(--mf-space-2)); padding-bottom: var(--mf-space-2);
}
body.mf-site .mf-main .elementor > .e-parent:first-child:has(.mf-film-poster)::before { filter: blur(56px) brightness(.3) saturate(1.1); }
body.mf-site .mf-main .elementor > .e-parent.mf-art-ready:first-child:has(.mf-film-poster)::before { opacity: .75; }
@media (max-width: 767px) {
	body.mf-site .mf-main .elementor > .e-parent:first-child:has(.mf-film-poster) { --min-height: 0px; min-height: 0; }
	body.mf-site .mf-main .elementor > .e-parent:first-child:has(.mf-film-poster)::after { background: linear-gradient(0deg, var(--mf-bg) 0%, rgba(2, 11, 18, .35) 60%); }
}

/* ---------- /films/: the caption grammar ---------- */
/* Title, then the genre line (the poster also prints it, so no hover overlay repeats it). site.js wraps each
   genre segment with its bar ("Crime |") in a .mf-seg that never breaks, so a wrapped line never starts with "|". */
body.mf-site .mf-main .mf-film-card .mf-seg { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
	body.mf-site .mf-main .mf-film-card:has(.mf-poster a:is(:hover, :focus-visible)) .elementor-widget.mf-t-label h3.elementor-heading-title { color: var(--mf-red-bright); }
}

/* ---------- the streaming band: monochrome (home, How it works) ---------- */
/* Hook: the one section holding a row of exactly six headings (the service names). The film is the colour, not the
   chrome: the orange gradient goes to the ink ground, the names go mono white at 60%, the heading goes white. Their
   markup (and any link) is untouched; filter/opacity are paint only. */
body.mf-site .mf-main .elementor > .e-parent:has(.e-con > .elementor-widget-heading:nth-child(6):last-child) {
	background: var(--mf-surface-deep); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
body.mf-site .mf-main .elementor > .e-parent:has(.e-con > .elementor-widget-heading:nth-child(6):last-child) .e-con > .elementor-widget-heading:nth-child(-n+6) .elementor-heading-title {
	filter: grayscale(1) brightness(10); opacity: .6;
}
body.mf-site .mf-main .elementor > .e-parent:has(.e-con > .elementor-widget-heading:nth-child(6):last-child) .mf-t-title .elementor-heading-title { color: var(--mf-white); }

/* ---------- steps: type-led, no boxes ---------- */
/* Step cards (home, How it works, About: grid cells whose first child is the number ring) lose their surface,
   shadow and icon; ring, title and text remain, divided by a hairline. */
body.mf-site .mf-main .e-grid > .e-con:not(.mf-film-card):has(> .e-con.e-child:first-child > .elementor-widget-heading:only-child) {
	background: transparent; box-shadow: none; border: 0; border-radius: 0;
}
body.mf-site .mf-main .e-grid > .e-con:not(.mf-film-card):has(> .e-con.e-child:first-child > .elementor-widget-heading:only-child) + .e-con {
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, .1);
}
body.mf-site .mf-main .e-grid > .e-con:not(.mf-film-card):has(> .e-con.e-child:first-child > .elementor-widget-heading:only-child) > .elementor-widget-icon { display: none; }
@media (max-width: 767px) {
	body.mf-site .mf-main .e-grid > .e-con:not(.mf-film-card):has(> .e-con.e-child:first-child > .elementor-widget-heading:only-child) + .e-con {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
	}
}

/* ---------- home: eyebrow rationing (max 1 per 3 sections) ---------- */
/* The taglines set beside section titles ("Original stories…", "From your idea…") are decoration; the hero's line
   and the submission band's eyebrow stay (2 on the page). */
body.mf-site.home .mf-main .elementor > .e-parent:not(:first-child) .mf-t-title ~ .mf-t-label { display: none; }

/* ---------- home: Our Slate, matched to the client sample (2026-10-15) ---------- */
/* Hook: the slate section is #films. 1) its subline is the exception to the eyebrow rationing above: the sample sets
   "… Compelling True Stories" beside the title, sentence case, in grey. */
body.mf-site.home .mf-main .elementor > #films.e-parent .mf-t-title ~ .mf-t-label { display: block; align-self: center; }
body.mf-site.home #films .mf-t-title ~ .mf-t-label .elementor-heading-title {
	font: 400 20px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--mf-fog);
}
/* 2) "View all projects" is the sample's white pill: white fill, ink text, full round. */
body.mf-site.home #films .elementor-widget-button .elementor-button {
	background: var(--mf-white); color: var(--mf-bg); border-color: var(--mf-white); border-radius: 999px;
	padding: 12px 26px; font-weight: 700;
}
body.mf-site.home #films .elementor-widget-button .elementor-button:hover { background: var(--mf-muted-light); color: var(--mf-bg); }
/* 3) the sample's air: wider gutters, a row gap that clears the two caption lines. The id beats Elementor's
   per-element gap variables. */
body.mf-site.home #films .e-grid { --column-gap: 28px; --row-gap: 56px; }
/* 4) genre lines on one line in the narrower column: smaller, untracked. Desktop/tablet only: in a phone's
   half-width column the longest lines would run off the screen, so there they wrap. */
body.mf-site.home #films .mf-film-card > .elementor-widget.mf-t-label:last-child .elementor-heading-title { font-size: 12px; letter-spacing: 0; }
@media (min-width: 768px) {
	body.mf-site.home #films .mf-film-card > .elementor-widget.mf-t-label:last-child .elementor-heading-title { white-space: nowrap; }
}
/* 5) phones: 15 cards in 2 columns leave the last alone; centre it under the pair above. */
@media (max-width: 767px) {
	body.mf-site.home #films .e-grid > .mf-film-card:last-child:nth-child(odd) {
		grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--column-gap, 14px)) / 2);
	}
}

/* ---------- sign off like a studio ---------- */
/* inc/site.php prints .mf-signoff (aria-hidden) after the Elementor footer: the name across the page edge to edge,
   in Steel on the ground, its feet cut off by the bottom of the page. Height is in em of its own vw size, so it is
   fixed before the font loads (no shift). */
.mf-signoff {
	font-size: 12.6vw; height: .74em; max-width: 100%; overflow: clip; overflow-clip-margin: 0; margin-top: var(--mf-space-1);
	pointer-events: none; -webkit-user-select: none; user-select: none;
}
.mf-signoff span {
	display: block; font: 700 1em/1 var(--font-head); text-transform: uppercase; letter-spacing: -.01em;
	color: var(--mf-ink); white-space: nowrap; text-align: center;
}

/* ---------- reveals + the hero moment (assets/js/site.js) ---------- */
/* Hidden ONLY under html.mf-js (head script; it removes the flag if site.js never reports in) and only when
   motion is allowed: no-JS and reduced-motion visitors get the page at once. transform/opacity (+ one clip-path
   wipe) only, so nothing reflows. Specificity is kept low with :where() so hover states can still win.
   Sections reveal as one unit: their heading row (headings + buttons outside grids) rises once; body copy,
   forms and images never wait. Grid cells (posters, steps) are the one place items stagger. */
@media (prefers-reduced-motion: no-preference) {
	.mf-js :where(.mf-main .elementor > .e-parent:not(:first-child)) :where(.elementor-widget-heading, .elementor-widget-button):not(.e-grid *),
	.mf-js :where(.mf-main .elementor > .e-parent:not(:first-child)) .e-grid > * { opacity: 0; transform: translate3d(0, var(--mf-rise), 0); }
	.mf-js :where(.mf-main) .mf-in {
		opacity: 1; transform: none;
		transition: opacity var(--mf-dur-reveal) var(--mf-ease) var(--mf-d, 0ms), transform var(--mf-dur-reveal) var(--mf-ease) var(--mf-d, 0ms);
	}
	.mf-js :where(.mf-main) .mf-done { transition: opacity var(--mf-dur) var(--mf-ease), transform var(--mf-dur) var(--mf-ease); }

	/* The hero moment, ~900ms, one per page. Start states hold from first paint; the key art is VISIBLE from
	   frame 1 (it is the LCP image) and only settles 1.04 -> 1. Then: headline lines wipe in left to right,
	   the red rule draws, copy fades up, CTA last. site.js classifies the widgets and sets --mf-d. */
	.mf-js :where(.mf-main .elementor > .e-parent:first-child) .elementor-widget:not(.elementor-widget-image) { opacity: 0; }
	.mf-js :where(.mf-main .elementor > .e-parent:first-child) .elementor-widget-image { transform: scale(1.04); }
	.mf-js :where(.mf-main .elementor > .e-parent:first-child) .e-con.e-child:not(:has(*)) { transform: scaleX(0); transform-origin: left; }
	.mf-js :where(.mf-main) .elementor-widget.mf-h-line { opacity: 1; clip-path: inset(-30% 100% -30% -4%); }
	.mf-js :where(.mf-main) :is(.mf-h-copy, .mf-h-cta) { transform: translate3d(0, 12px, 0); }
	.mf-js .mf-hero-go .mf-h-line { clip-path: inset(-30% -4% -30% -4%); transition: clip-path 520ms var(--mf-ease) var(--mf-d, 0ms); }
	.mf-js .mf-hero-go :is(.mf-h-copy, .mf-h-cta) {
		opacity: 1; transform: none;
		transition: opacity 400ms var(--mf-ease) var(--mf-d, 0ms), transform 400ms var(--mf-ease) var(--mf-d, 0ms);
	}
	.mf-js .mf-hero-go .e-con.e-child:not(:has(*)) { transform: none; transition: transform 380ms var(--mf-ease) 360ms; }
	.mf-js .mf-hero-go .elementor-widget-image { transform: none; transition: transform 900ms var(--mf-ease); }
	.mf-js .mf-hero-go .mf-h-line.mf-done { clip-path: none; }
}

/* ---------- reduced motion ---------- */
/* Everything still changes colour; nothing moves. Reveals are already off (no-preference gate above). */
@media (prefers-reduced-motion: reduce) {
	.mf-header, .mf-nav-cta, .mf-nav-bar, .mf-menu a::after,
	.mf-nav-ready .mf-nav, .mf-nav-ready .mf-menu li, .mf-nav-ready .mf-nav-cta,
	.mf-site .mf-poster a, .mf-site .mf-poster a::after, .mf-site .mf-poster img,
	.mf-news-card, .mf-site .mf-news-empty__button,
	.mf-site .elementor-widget-button .elementor-button, .mf-site .elementor-widget-button .elementor-button-icon,
	.mf-footer .elementor-icon-list-text::after,
	.mf-site .fluentform form.frm-fluent-form .ff-btn-submit,
	.mf-header::before, body.mf-site .mf-main .elementor > .e-parent:first-child::before { transition: none; }
	.mf-nav-cta:hover, .mf-nav-cta:active,
	.mf-site .mf-poster a:hover, .mf-site .mf-poster a:active, .mf-site .mf-poster a:hover img,
	.mf-news-card:hover, .mf-news-card:active,
	.mf-site .mf-news-empty__button:hover, .mf-site .mf-news-empty__button:active,
	.mf-site .elementor-widget-button .elementor-button:hover, .mf-site .elementor-widget-button .elementor-button:active,
	.mf-site .elementor-widget-button .elementor-button:hover .elementor-button-icon,
	.mf-site .fluentform form.frm-fluent-form .ff-btn-submit:hover,
	.mf-site .fluentform form.frm-fluent-form .ff-btn-submit:active,
	.mf-nav-ready .mf-nav, .mf-nav-ready .mf-menu li, .mf-nav-ready .mf-nav-cta { transform: none; }
	.mf-site .fluentform form.frm-fluent-form .ff-btn-submit.ff-working::after { animation: none; }
}

/* ==================== Shore Noir, Batch B1: inner-page hero art ==================== */
/* The content pages' text heroes carry the film family behind the type: the Our Films hero a poster wall, About and
   How It Works the Biegenwald key art (the one landscape file large enough to fill a frame), Contact the same crops,
   darker. News takes the legal pages' hairline + grain (critic 2026-10-07: the face again over "No news yet" read as filler). Paint only: the art and its scrim are the hero's ::before/::after (absolute, z -1 under the
   content, inside isolation), so nothing moves when they load. URLs: inc/hero-art.php (--mf-img-*); a missing one
   falls back to none = the text hero of before. No file is shown above ~1.3x its pixel size; the scrim keeps the
   headline >= 7:1 against the brightest pixel behind it (measured 2026-10-07). Elementor's .e-con::before overlay
   rule sets content/opacity/blend from variables: reset here. */
body.mf-site:is(.page-id-20, .page-id-31, .page-id-32, .page-id-34) .mf-main .elementor > .e-parent:first-child {
	position: relative; isolation: isolate; overflow: hidden;
	--mf-ha-w: 62%; --mf-ha-filter: none;
	--mf-ha-mask: linear-gradient(90deg, transparent 0%, transparent 28%, #000 64%);
	--mf-ha-mask-top: linear-gradient(180deg, transparent 0%, #000 34%);
	--mf-ha-scrim:
		linear-gradient(90deg, rgba(2, 11, 18, .8) 0%, rgba(2, 11, 18, .78) 40%, rgba(2, 11, 18, .5) 64%, rgba(2, 11, 18, .12) 88%, rgba(2, 11, 18, 0) 100%),
		linear-gradient(0deg, var(--mf-bg) 0%, rgba(2, 11, 18, 0) 28%);
}
body.mf-site:is(.page-id-20, .page-id-31, .page-id-32, .page-id-34) .mf-main .elementor > .e-parent:first-child::before,
body.mf-site:is(.page-id-20, .page-id-31, .page-id-32, .page-id-34) .mf-main .elementor > .e-parent:first-child::after {
	content: ""; display: block; position: absolute; z-index: -1; pointer-events: none;
	border: 0; border-radius: 0; mix-blend-mode: normal; opacity: 1; transition: none;
}
body.mf-site:is(.page-id-20, .page-id-31, .page-id-32, .page-id-34) .mf-main .elementor > .e-parent:first-child::before {
	inset: 0 0 0 auto; width: var(--mf-ha-w); height: auto;
	background: var(--mf-ha-art, none); filter: var(--mf-ha-filter);
	/* The left edge clears (the type's side; it also hides the key art's own title), the top fades under the header. */
	-webkit-mask-image: var(--mf-ha-mask), var(--mf-ha-mask-top); -webkit-mask-composite: source-in;
	mask-image: var(--mf-ha-mask), var(--mf-ha-mask-top); mask-composite: intersect;
}
body.mf-site:is(.page-id-20, .page-id-31, .page-id-32, .page-id-34) .mf-main .elementor > .e-parent:first-child::after {
	inset: 0; width: auto; height: auto; background: var(--mf-ha-scrim);
}

/* About: the face and the case file. Sized by the frame's WIDTH (230%), so the crop is the same at every hero height:
   the right 668px of the 1536px file, its title inside the cleared left edge; the frame is capped so the file is never
   shown above 1.3x. */
body.mf-site.page-id-32 .mf-main .elementor > .e-parent:first-child {
	--mf-ha-w: min(58%, 860px);
	--mf-ha-art: var(--mf-img-biegenwald, none) 100% 18% / 230% auto no-repeat;
	--mf-ha-filter: brightness(.6) saturate(.8);
}
/* How It Works: the road, the farmhouse and the police lights. Sized by the frame's HEIGHT (215%) and anchored bottom-left:
   the lower 476px of the file at every size, so its title stays above the frame. */
body.mf-site.page-id-31 .mf-main .elementor > .e-parent:first-child {
	--mf-ha-w: min(62%, 900px);
	--mf-ha-art: var(--mf-img-biegenwald, none) 0% 100% / auto 215% no-repeat;
	--mf-ha-filter: brightness(.62) saturate(.85);
}
/* Contact and News: the same two frames, darker and softer (they are working pages, the type leads). */
body.mf-site.page-id-34 .mf-main .elementor > .e-parent:first-child {
	--mf-ha-w: min(62%, 900px);
	--mf-ha-art: var(--mf-img-biegenwald, none) 0% 100% / auto 215% no-repeat;
	--mf-ha-filter: blur(2px) brightness(.4) saturate(.7);
}
/* Our Films: a poster wall. Eight 2:3 posters (the slate's first 8, 140x210 from the 200x300 files), two staggered
   rows, tilted, dimmed. */
body.mf-site.page-id-20 .mf-main .elementor > .e-parent:first-child {
	--mf-ha-art:
		var(--mf-img-poster-1, none) 0 0 / 140px 210px no-repeat,
		var(--mf-img-poster-2, none) 156px 0 / 140px 210px no-repeat,
		var(--mf-img-poster-3, none) 312px 0 / 140px 210px no-repeat,
		var(--mf-img-poster-4, none) 468px 0 / 140px 210px no-repeat,
		var(--mf-img-poster-5, none) 78px 226px / 140px 210px no-repeat,
		var(--mf-img-poster-6, none) 234px 226px / 140px 210px no-repeat,
		var(--mf-img-poster-7, none) 390px 226px / 140px 210px no-repeat,
		var(--mf-img-poster-8, none) 546px 226px / 140px 210px no-repeat;
	--mf-ha-filter: blur(1px) brightness(.38) saturate(.9);
	--mf-ha-mask: linear-gradient(90deg, transparent 0%, #000 42%); --mf-ha-mask-top: linear-gradient(#000, #000);
}
body.mf-site.page-id-20 .mf-main .elementor > .e-parent:first-child::before {
	inset: 50% -40px auto auto; width: 700px; height: 440px; transform: translateY(-46%) rotate(-3deg);
}

@media (max-width: 1024px) {
	body.mf-site:is(.page-id-20, .page-id-31, .page-id-32, .page-id-34) .mf-main .elementor > .e-parent:first-child {
		--mf-ha-w: 70%;
		--mf-ha-scrim:
			linear-gradient(90deg, rgba(2, 11, 18, .82) 0%, rgba(2, 11, 18, .74) 45%, rgba(2, 11, 18, .4) 80%, rgba(2, 11, 18, .2) 100%),
			linear-gradient(0deg, var(--mf-bg) 0%, rgba(2, 11, 18, 0) 28%);
	}
}
/* Phones: the art sits behind the headline across the full width, under a heavier, even scrim. */
@media (max-width: 767px) {
	body.mf-site:is(.page-id-20, .page-id-31, .page-id-32, .page-id-34) .mf-main .elementor > .e-parent:first-child {
		--mf-ha-w: 100%; --mf-ha-mask: linear-gradient(180deg, #000 60%, transparent 96%);
		--mf-ha-scrim: linear-gradient(180deg, rgba(2, 11, 18, .42) 0%, rgba(2, 11, 18, .58) 60%, var(--mf-bg) 100%); /* lighter on phones: art read as invisible (live check 2026-10-07); headline kept >= 7:1 */
	}
	/* Phone crops in vw (the hero is the viewport's width): the face = the file's right 466px at 0.84x; the road = its
	   lower 440px at 0.58x, a band behind the eyebrow and headline. Neither shows the key art's title. */
	body.mf-site.page-id-32 .mf-main .elementor > .e-parent:first-child {
		--mf-ha-art: var(--mf-img-biegenwald, none) 100% 0 / 330vw auto no-repeat;
	}
	body.mf-site:is(.page-id-31, .page-id-34) .mf-main .elementor > .e-parent:first-child {
		--mf-ha-art: var(--mf-img-biegenwald, none) 0 -88vw / 230vw auto no-repeat;
		/* the crop ends at 153vw - 88vw = 65vw down: fade out before it, so no hard edge (mobile check 2026-10-07) */
		--mf-ha-mask: linear-gradient(180deg, #000 0, #000 38vw, transparent 62vw);
	}
	/* The wall turns to texture behind the title: blurred and darker, so no poster's own title competes with it. */
	body.mf-site.page-id-20 .mf-main .elementor > .e-parent:first-child { --mf-ha-filter: blur(2px) brightness(.58) saturate(.85); }
	/* phones: the darker desktop treatments read as near-invisible at 390 (mobile check 2026-10-07, headline headroom >= 9.8:1) */
	body.mf-site.page-id-34 .mf-main .elementor > .e-parent:first-child { --mf-ha-filter: blur(1px) brightness(.58) saturate(.8); }
	body.mf-site.page-id-31 .mf-main .elementor > .e-parent:first-child { --mf-ha-filter: brightness(.78) saturate(.9); }
	body.mf-site.page-id-20 .mf-main .elementor > .e-parent:first-child::before {
		inset: 24px -300px auto auto; width: 880px; height: 420px; transform: rotate(-3deg);
	}
}

/* Legal pages (Privacy, Terms, Sitemap) stay text: a steel hairline closes the hero and the grain sits a touch
   heavier inside it (same static noise as the page layer, paint only). */
body.mf-site:is(.page-id-3, .page-id-33, .page-id-35, .page-id-37) .mf-main .elementor > .e-parent:first-child { position: relative; isolation: isolate; }
body.mf-site:is(.page-id-3, .page-id-33, .page-id-35, .page-id-37) .mf-main .elementor > .e-parent:first-child::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 1px; z-index: 0; pointer-events: none; opacity: 1;
	background: linear-gradient(90deg, rgba(36, 72, 90, 0) 0%, var(--mf-steel-hi) 18%, var(--mf-steel-hi) 82%, rgba(36, 72, 90, 0) 100%);
}
body.mf-site:is(.page-id-3, .page-id-33, .page-id-35, .page-id-37) .mf-main .elementor > .e-parent:first-child::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: normal; border-radius: 0; opacity: .045;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 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") repeat 0 0 / 200px 200px;
}

/* Single news post (single.php): the two voices, one reading column, red only on the hover of a link. */
body.mf-site .mf-post { padding: calc(var(--mf-header-h) + var(--mf-space-3)) var(--mf-gutter) var(--mf-space-4); background: radial-gradient(120% 60% at 50% 0, var(--mf-wine) 0, var(--mf-bg) 70%) no-repeat, var(--mf-bg); }
body.mf-site .mf-post__article { max-width: 760px; margin-inline: auto; }
body.mf-site .mf-post__meta { margin: 0 0 18px; font: 500 var(--mf-fs-label)/1.4 var(--font-body); color: var(--mf-fog); text-transform: uppercase; letter-spacing: var(--mf-track-label); }
body.mf-site .mf-post__meta a { color: var(--mf-fog); text-decoration: none; transition: color var(--mf-dur) var(--mf-ease); }
body.mf-site .mf-post__title { margin: 0 0 var(--mf-space-1); font: 700 clamp(36px, 3.4vw + 14px, 72px)/var(--mf-lh-display) var(--font-head); letter-spacing: var(--mf-track-display); text-transform: uppercase; color: var(--mf-white); text-wrap: balance; }
body.mf-site .mf-post__art { margin: 0 0 var(--mf-space-1); }
body.mf-site .mf-post__art img { display: block; width: 100%; height: auto; box-shadow: var(--mf-shadow-1); outline: 1px solid var(--mf-img-outline); outline-offset: -1px; }
body.mf-site .mf-post__body { max-width: 68ch; font-size: 18px; line-height: 1.7; color: var(--mf-muted-light); }
body.mf-site .mf-post__body > * { margin: 0 0 1.1em; }
body.mf-site .mf-post__body a, body.mf-site .mf-post__source a, body.mf-site .mf-post__back a { color: var(--mf-white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--mf-dur) var(--mf-ease); }
body.mf-site .mf-post__source { margin: var(--mf-space-1) 0 0; padding-top: 18px; border-top: 1px solid var(--mf-border); font: 500 var(--mf-fs-label)/1.4 var(--font-body); color: var(--mf-fog); text-transform: uppercase; letter-spacing: var(--mf-track-label); }
body.mf-site .mf-post__back { margin: 24px 0 0; font: 500 var(--mf-fs-label)/1.4 var(--font-body); text-transform: uppercase; letter-spacing: var(--mf-track-label); }
body.mf-site .mf-post a:focus-visible { outline: none; box-shadow: var(--mf-focus-ring); }
@media (hover: hover) {
	body.mf-site .mf-post a:hover { color: var(--mf-red-bright); }
}

/* =====================================================================================================================
   CLIENT SAMPLE MATCH (2026-10-15) — the client's "Full site home sample": Montserrat (Gotham stand-in) nav with pipes,
   hero meta on one line + red italic tagline, How It Works on its own band, WHITE form fields ("white form not black").
   Element hooks are the home page's Elementor ids (page 19), stable across edits.
   ===================================================================================================================== */
/* Nav: bold heading face, white, pipe-separated; no underline marks (the sample has none). */
.mf-menu { gap: 0; }
.mf-menu li { display: flex; align-items: center; }
.mf-menu li + li::before { content: "|"; color: rgba(255, 255, 255, .45); margin: 0 14px; font: 400 13px/1 var(--font-body); }
.mf-menu a { font: 700 13px/1 var(--font-head); letter-spacing: .06em; color: var(--mf-white); }
.mf-menu a:hover { color: var(--mf-red-bright); }
@media (min-width: 1025px) { .mf-menu a::after { display: none; } }
@media (max-width: 1024px) { .mf-menu li + li::before { display: none; } }

/* Hero: "OCEAN TOWNSHIP • Based on true events." on one line, red caps then light white; copy bold; tagline red italic. */
body.mf-site .elementor-element-b7b5af9 { flex-flow: row wrap; align-items: baseline; }
body.mf-site .elementor-element-b7b5af9 > .elementor-element { width: 100%; }
body.mf-site .elementor-element-b7b5af9 > .elementor-element-92bf757,
body.mf-site .elementor-element-b7b5af9 > .elementor-element-66ba058 { width: auto; }
body.mf-site .elementor .elementor-element-92bf757 .elementor-heading-title {
	font: 600 14px/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--mf-red-bright);
}
body.mf-site .elementor .elementor-element-66ba058 .elementor-heading-title {
	font: 400 15px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--mf-white);
}
body.mf-site .elementor .elementor-element-66ba058 .elementor-heading-title::before { content: "•"; color: var(--mf-red-bright); margin: 0 10px; }
body.mf-site .elementor .elementor-element-c7fc027 { max-width: 470px; }
body.mf-site .elementor .elementor-element-c7fc027 p { font-weight: 600; }
body.mf-site .elementor .elementor-element-4797f0e .elementor-heading-title {
	font: italic 600 13px/1.4 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mf-red-bright);
}
body.mf-site .elementor .elementor-element-41eec27 .elementor-button,
body.mf-site .elementor .elementor-element-6ae8da4 .elementor-button { border-radius: 4px; }

/* How It Works: its own band, a step lighter than the page (the sample's #0B1A26). */
body.mf-site #how.e-parent { background-color: #0B1A26; }

/* The form band: WHITE fields, ink text, grey placeholders (#5F6B76: 5.4:1 on white), red focus. */
body.mf-site #submit .fluentform form.frm-fluent-form .ff-el-form-control,
body.mf-site #submit .fluentform form.frm-fluent-form .ff-el-form-control:focus {
	color: #0A0E14; background: #FFFFFF; border-color: #D5DCE1;
}
body.mf-site #submit .fluentform form.frm-fluent-form .ff-el-form-control:focus { border-color: var(--mf-red); }
body.mf-site #submit .fluentform form.frm-fluent-form .ff-el-form-control::placeholder { color: #5F6B76; }
body.mf-site #submit .fluentform form.frm-fluent-form .ff-el-form-control:-webkit-autofill {
	-webkit-text-fill-color: #0A0E14; box-shadow: 0 0 0 1000px #FFFFFF inset; caret-color: #0A0E14;
}
body.mf-site #submit .fluentform form.frm-fluent-form .ff-el-input--label label { color: var(--mf-white); }

/* Footer (client sample): bold link row, big outline social icons on the right, a grey letter-spaced legal row,
   the copyright line centred small. Hooks are classes set by batch G4 on template 18's widgets. */
body.mf-site .mf-footer .mf-footer-links .elementor-icon-list-text { font: 700 13px/1.2 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--mf-white); }
body.mf-site .mf-footer .mf-footer-links .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--mf-red-bright); }
body.mf-site .mf-footer .mf-footer-social .elementor-social-icon { background: transparent; }
body.mf-site .mf-footer .mf-footer-social .elementor-social-icon i { color: var(--mf-white); }
body.mf-site .mf-footer .mf-footer-social .elementor-social-icon:hover i { color: var(--mf-red-bright); }
body.mf-site .mf-footer .mf-footer-legal .elementor-icon-list-text { font: 600 13px/1.2 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--mf-fog); }
body.mf-site .mf-footer .mf-footer-legal .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--mf-white); }
body.mf-site .mf-footer .mf-footer-copy { text-align: center; }
body.mf-site .mf-footer .mf-footer-copy p { font: 600 11px/1.5 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--mf-fog); }

/* The client's "Our Slate" banner on Licensing & Distribution, About and News (batch I): full width, as delivered. */
body.mf-site .mf-page-banner img { display: block; width: 100%; height: auto; }
body.mf-site .mf-page-banner { margin-bottom: var(--mf-space-1); }

/* Client policy/licensing copy in one text widget (batch I): readable measure, the heading voice for its h2/h3. */
body.mf-site .mf-prose { max-width: 760px; }
body.mf-site .mf-prose h2 { font: 800 clamp(22px, 1.2vw + 14px, 30px)/1.15 var(--font-head); text-transform: uppercase; margin: 1.6em 0 .5em; color: var(--mf-white); }
body.mf-site .mf-prose h3 { font: 700 18px/1.25 var(--font-head); margin: 1.4em 0 .4em; color: var(--mf-white); }
body.mf-site .mf-prose p, body.mf-site .mf-prose li { color: var(--mf-muted); line-height: 1.65; }
body.mf-site .mf-prose a { color: var(--mf-red-bright); }
body.mf-site .mf-prose ul { padding-left: 1.2em; }
body.mf-site .mf-press-image img { width: 100%; height: auto; }

/* ---------- [mf_slate_banner]: the client's "Our Slate" banner, live (inc/slate-banner.php) ---------- */
/* Look: the banner's own — glowing wordmark, wide-tracked line over a red rule, posters on a mirrored floor, "IN
   DEVELOPMENT" under a short red rule. Motion (skills/motion rung 1): a staggered rise on first paint, a lift + glow
   on hover/focus with the other posters dimming; transform/opacity/filter only; reduced motion keeps only colour. */
.mf-slate-banner {
	position: relative; overflow: hidden; text-align: center; padding: 56px 20px 36px;
	background: radial-gradient(ellipse 70% 60% at 50% 0%, #1B222E 0%, #070A10 62%, #05070B 100%);
}
.mf-slate-banner .mf-sb-mark { display: block; width: min(460px, 72%); height: auto; margin: 0 auto; filter: drop-shadow(0 0 14px rgba(255, 255, 255, .45)) drop-shadow(0 0 2px rgba(255, 255, 255, .8)); }
.mf-slate-banner .mf-sb-line {
	display: inline-block; margin: 22px 0 0; padding: 0 4px 12px; border-bottom: 2px solid var(--mf-red);
	font: 600 clamp(11px, .4vw + 9px, 15px)/1.3 var(--font-head); letter-spacing: .32em; text-transform: uppercase; color: #E9EEF1;
}
.mf-slate-banner .mf-sb-line span { color: var(--mf-red-bright); margin: 0 .5em; }
.mf-slate-banner .mf-sb-row {
	list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px;
	max-width: 1400px; margin: 36px auto 0; padding: 0 0 clamp(48px, 5vw, 80px);
}
.mf-slate-banner .mf-sb-row li { animation: mf-sb-rise 640ms var(--mf-ease) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes mf-sb-rise { from { opacity: 0; transform: translateY(18px); } }
.mf-slate-banner .mf-sb-row a { display: block; outline-offset: 4px; }
.mf-slate-banner .mf-sb-poster {
	display: block; transition: transform var(--mf-dur) var(--mf-ease), filter var(--mf-dur) var(--mf-ease);
	-webkit-box-reflect: below 3px linear-gradient(transparent 64%, rgba(255, 255, 255, .26));
}
.mf-slate-banner .mf-sb-poster img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 10px 24px rgba(0, 0, 0, .55); }
.mf-slate-banner .mf-sb-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mf-slate-banner .mf-sb-row a:is(:hover, :focus-visible) .mf-sb-poster { transform: translateY(-10px) scale(1.06); filter: brightness(1.12) drop-shadow(0 0 16px rgba(255, 42, 51, .35)); }
.mf-slate-banner .mf-sb-row:has(a:is(:hover, :focus-visible)) a:not(:hover, :focus-visible) .mf-sb-poster { filter: brightness(.55) saturate(.8); }
.mf-slate-banner .mf-sb-foot { margin: 0; font: 600 13px/1 var(--font-head); letter-spacing: .42em; text-transform: uppercase; color: #C9D1D7; }
.mf-slate-banner .mf-sb-foot::before { content: ""; display: block; width: 90px; height: 2px; margin: 0 auto 14px; background: var(--mf-red); }
@media (max-width: 767px) {
	.mf-slate-banner .mf-sb-row { grid-auto-columns: 38%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 4px 56px; scrollbar-width: none; }
	.mf-slate-banner .mf-sb-row li { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
	.mf-slate-banner .mf-sb-row li { animation: none; }
	.mf-slate-banner .mf-sb-poster { transition: filter var(--mf-dur-fast) linear; }
	.mf-slate-banner .mf-sb-row a:is(:hover, :focus-visible) .mf-sb-poster { transform: none; }
}

/* Footer wordmark: the library PNG carries a navy box; show the client's transparent SVG (logo package) instead. */
body.mf-site .mf-footer .elementor-element-f7e8bef img { content: url("../img/monmouth-films-logo-white.svg"); width: 290px; max-width: 100%; height: auto; }
/* Social icons stay on one row on phones (they wrapped 3 + 1). */
@media (max-width: 767px) {
	body.mf-site .mf-footer .mf-footer-social .elementor-social-icons-wrapper { flex-wrap: nowrap; justify-content: flex-start; gap: 18px; }
	body.mf-site .mf-footer .mf-footer-social .elementor-grid-item { margin: 0; }
}

/* =====================================================================================================================
   HOME SHOWCASE (2026-10-15, client email 1:13 PM): [mf_hero_slider] + [mf_series_grid] (inc/home-showcase.php).
   Motion (skills/motion): crossfade + staggered copy rise + a slow drift on the art; transform/opacity only; reduced
   motion = no autoplay (JS) and no animation (here). The hero container (#home) is full width, unpadded (batch J).
   ===================================================================================================================== */
.mf-hero-slider { position: relative; min-height: clamp(560px, 50vw, 760px); overflow: hidden; background: var(--mf-bg); }
.mf-hs-slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; transition: opacity 900ms var(--mf-ease); }
.mf-hs-slide.is-active { opacity: 1; z-index: 1; }
.mf-hs-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.mf-hs-slide.is-active .mf-hs-bg { animation: mf-hs-drift 9s linear both; }
@keyframes mf-hs-drift { from { transform: scale(1.06); } to { transform: scale(1); } }
.mf-hs-slide::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, rgba(2, 11, 18, .94) 0%, rgba(2, 11, 18, .72) 36%, rgba(2, 11, 18, 0) 66%), linear-gradient(0deg, rgba(2, 11, 18, .75) 0%, rgba(2, 11, 18, 0) 32%);
}
.mf-hs-copy { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: calc(var(--mf-header-h) + 32px) 20px 96px; }
.mf-hs-copy > * { max-width: 600px; }
.mf-hs-copy .mf-hs-title { max-width: 640px; margin: 0; font: 800 var(--mf-fs-display)/var(--mf-lh-display) var(--font-head); letter-spacing: var(--mf-track-display); text-transform: uppercase; color: var(--mf-white); }
.mf-hs-title span { display: block; }
.mf-hs-title .mf-hs-red { color: var(--mf-red-bright); }
.mf-hs-meta { margin: 20px 0 0; font: 400 15px/1.45 var(--font-body); color: var(--mf-white); }
.mf-hs-place { font: 600 14px/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--mf-red-bright); }
.mf-hs-place + .mf-hs-line::before { content: "•"; margin: 0 10px; color: var(--mf-red-bright); }
.mf-hs-body { margin: 16px 0 0; font: 600 16px/1.55 var(--font-body); color: var(--mf-white); max-width: 520px; }
.mf-hs-tag { margin: 18px 0 0; font: italic 600 13px/1.4 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mf-red-bright); }
.mf-hs-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.mf-hs-btn {
	display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 4px;
	background: rgba(0, 0, 0, .45); color: var(--mf-white); text-decoration: none; font: 700 14px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase;
	transition: transform var(--mf-dur) var(--mf-ease), background var(--mf-dur) var(--mf-ease);
}
.mf-hs-btn--red { background: var(--mf-red-cta); border-color: var(--mf-red-cta); }
.mf-hs-btn:hover { transform: translateY(var(--mf-lift)); background: rgba(255, 255, 255, .12); }
.mf-hs-btn--red:hover { background: var(--mf-red-cta-hover); }
.mf-hs-btn:focus-visible { outline: 2px solid var(--mf-white); outline-offset: 3px; }
.mf-hs-slide.is-active .mf-hs-copy > * { animation: mf-hs-rise 700ms var(--mf-ease) both; }
.mf-hs-slide.is-active .mf-hs-copy > :nth-child(2) { animation-delay: 70ms; }
.mf-hs-slide.is-active .mf-hs-copy > :nth-child(3) { animation-delay: 140ms; }
.mf-hs-slide.is-active .mf-hs-copy > :nth-child(4) { animation-delay: 210ms; }
.mf-hs-slide.is-active .mf-hs-copy > :nth-child(5) { animation-delay: 280ms; }
@keyframes mf-hs-rise { from { opacity: 0; transform: translateY(16px); } }
.mf-hs-ui { position: absolute; z-index: 3; left: 0; right: 0; bottom: 28px; max-width: 1240px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 18px; }
.mf-hs-dots { display: flex; gap: 8px; }
.mf-hs-dot { width: 40px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.mf-hs-dot::before { content: ""; display: block; height: 3px; background: rgba(255, 255, 255, .4); transition: background var(--mf-dur) var(--mf-ease); }
.mf-hs-dot[aria-current="true"]::before { background: var(--mf-red-bright); }
.mf-hs-dot:hover::before { background: var(--mf-white); }
.mf-hs-pause { position: relative; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; background: rgba(0, 0, 0, .35); cursor: pointer; }
.mf-hs-pause::before, .mf-hs-pause::after { content: ""; position: absolute; top: 11px; width: 3px; height: 12px; background: var(--mf-white); }
.mf-hs-pause::before { left: 13px; } .mf-hs-pause::after { left: 19px; }
.mf-hs-pause[aria-pressed="true"]::after { display: none; }
.mf-hs-pause[aria-pressed="true"]::before { left: 14px; top: 11px; width: 0; height: 0; background: none; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--mf-white); }
.mf-hs-dot:focus-visible, .mf-hs-pause:focus-visible { outline: 2px solid var(--mf-white); outline-offset: 2px; }
body.mf-site #home.e-parent { padding: 0; min-height: 0; }
@media (max-width: 767px) {
	.mf-hero-slider { min-height: 640px; }
	.mf-hs-bg { object-position: 72% center; }
	.mf-hs-slide { align-items: flex-end; }
	.mf-hs-slide::after { background: linear-gradient(0deg, rgba(2, 11, 18, .96) 0%, rgba(2, 11, 18, .8) 45%, rgba(2, 11, 18, .1) 80%); }
	.mf-hs-copy { padding: 0 20px 84px; }
	.mf-hs-body { font-size: 15px; }
}

/* Limited series: the client's "2-column asymmetric hero grid" — flagship 4 of 6 columns x 2 rows, the rest 2 columns;
   when the last row holds two, they share it. Tiles open Licensing & Distribution. */
.mf-sg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin: 0 0 28px; }
.mf-sg-title { margin: 0; font: 800 var(--mf-fs-title)/1 var(--font-head); text-transform: uppercase; color: var(--mf-white); }
.mf-sg-rule { width: 50px; height: 1px; background: rgba(255, 255, 255, .45); }
.mf-sg-sub { margin: 0; font: 400 20px/1.3 var(--font-body); color: var(--mf-fog); }
.mf-series-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.mf-sg-tile { grid-column: span 2; }
.mf-sg-flagship { grid-column: span 4; grid-row: span 2; }
.mf-sg-tile:nth-child(4):nth-last-child(2), .mf-sg-tile:nth-child(5):last-child { grid-column: span 3; }
.mf-sg-tile a { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.mf-sg-tile img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 600ms var(--mf-ease), filter var(--mf-dur) var(--mf-ease); }
.mf-sg-flagship img { aspect-ratio: auto; object-position: 30% center; }
.mf-sg-cta {
	position: absolute; left: 16px; bottom: 16px; padding: 9px 16px; border-radius: 999px; background: var(--mf-white); color: var(--mf-bg);
	font: 700 12px/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translateY(6px);
	transition: opacity var(--mf-dur) var(--mf-ease), transform var(--mf-dur) var(--mf-ease);
}
.mf-sg-tile a:is(:hover, :focus-visible) img { transform: scale(1.04); filter: brightness(1.08); }
.mf-sg-tile a:is(:hover, :focus-visible) .mf-sg-cta { opacity: 1; transform: none; }
.mf-sg-tile a:focus-visible { outline: 2px solid var(--mf-white); outline-offset: 3px; }
@media (max-width: 1024px) {
	.mf-series-grid { grid-template-columns: 1fr 1fr; }
	.mf-sg-tile, .mf-sg-tile:nth-child(4):nth-last-child(2), .mf-sg-tile:nth-child(5):last-child { grid-column: span 1; }
	.mf-sg-flagship { grid-column: span 2; grid-row: auto; }
	.mf-sg-flagship img { aspect-ratio: 16 / 9; }
	.mf-sg-cta { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
	.mf-series-grid { grid-template-columns: 1fr; }
	.mf-sg-flagship { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.mf-hs-slide { transition: none; }
	.mf-hs-slide.is-active .mf-hs-bg, .mf-hs-slide.is-active .mf-hs-copy > * { animation: none; }
	.mf-sg-tile img { transition: filter var(--mf-dur-fast) linear; }
	.mf-sg-tile a:is(:hover, :focus-visible) img { transform: none; }
}

/* Showcase fixes (review 2026-10-15): the flagship's image must not size the grid rows (its natural height made
   the rows 742px and stretched the side tiles): it fills its cell absolutely, the 16:9 side tiles set the row height,
   so the flagship lands near 16:9 itself and shows its art uncropped. The section sits in the 1200px box like the
   slate; the slider gets a top scrim so the transparent nav stays readable over bright art. */
.mf-sg-flagship a { position: relative; }
.mf-sg-flagship img { position: absolute; inset: 0; height: 100%; object-position: center; }
.mf-sg-head, .mf-series-grid { max-width: 1200px; margin-left: auto; margin-right: auto; }
body.mf-site #series.e-parent { padding: var(--mf-space-3) 20px; }
.mf-hs-slide::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 160px; pointer-events: none; background: linear-gradient(180deg, rgba(2, 11, 18, .78), rgba(2, 11, 18, 0)); }
@media (max-width: 1024px) {
	.mf-sg-flagship img { position: static; height: auto; }
}
/* The flagship image computed 1500px tall (a broader img height rule won), so cover zoomed the art ~2.5x: pin it to
   its cell with a selector that outranks body.mf-site .mf-main img rules. */
@media (min-width: 1025px) {
	body.mf-site .mf-main .mf-series-grid .mf-sg-flagship img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; }
}