/* =====================================================================
 * Mr Eddie Flores, "Roll the tape" design system (v4)
 *
 * Loaded ONLY on pages that use the "Roll the tape (v4)" page template
 * (templates/page-v4.html). On those pages functions.php dequeues the
 * legacy parent main.css + child custom.css, so this file is the whole
 * look and nothing from the v3 site leaks in. Pages on the old template
 * never load this file, so nothing here can change the live v3 site.
 *
 * Concept: the site stops describing the work and plays it.
 * Signature: the Slate card with a tally light that lights ONLY while
 * that card's film is playing (rfm-video v0.3.0 sets data-playing on the
 * player wrapper while it is actually playing). It never blinks or
 * pulses on its own.
 *
 * Type: Oswald (display, kept by Eddie 2026-10-22), the phone's own UI
 * face for body copy, the system monospace for slate take lines.
 * ===================================================================== */

/* v3.4.2: Oswald, self-hosted (latin subset, SIL OFL). Preloaded in functions.php. */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/oswald-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/oswald-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/oswald-latin-700-normal.woff2') format('woff2'); }

/* ---------- KNOBS: brand tokens (change values here, nowhere else) ---------- */
body.mef-v4 {
	--ink: #0B0B0C;          /* Midnight Ink: ground, type on paper */
	--ink-2: #1A1A1C;        /* raised ink surface */
	--paper: #F3EEE5;        /* Bay Paper: page */
	--paper-2: #E9E2D6;      /* alternating paper band */
	--signal: #FF0638;       /* Signal Red: one action per screen + tally light */
	--signal-deep: #CC0030;  /* red text on paper (5.0:1) */
	--wine: #6E1423;         /* depth band */
	--on-paper-muted: #4A4642; /* muted text on paper (7.9:1) */
	--on-ink-muted: #B9B2A6;   /* muted text on ink (9.6:1) */
	--line-paper: rgba(11, 11, 12, 0.16);
	--line-ink: rgba(243, 238, 229, 0.18);
	--todo: #FFE45C;         /* placeholder highlight, must be gone before launch */

	--f-display: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
	--f-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--f-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

	--gutter: clamp(16px, 5vw, 48px);
	--measure: 1160px;
	--measure-wide: 1320px;  /* header bar + reel frame width; the hero film may reach it */
	--sec-y: clamp(56px, 9vw, 112px);
	--radius: 2px;

	/* rfm-video reads these semantic tokens (brand-neutral plugin) */
	--accent: var(--signal);
	--accent-deep: #E5002F;
	--on-accent: var(--ink);   /* white on Signal Red fails AA, ink passes */
	--gold: var(--paper);      /* sound-on pill */

	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--f-body);
	font-size: 18px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

body.mef-v4 *, body.mef-v4 *::before, body.mef-v4 *::after { box-sizing: border-box; }
body.mef-v4 img { max-width: 100%; height: auto; display: block; }
body.mef-v4 a { color: inherit; }
body.mef-v4 a:focus-visible,
body.mef-v4 button:focus-visible,
body.mef-v4 summary:focus-visible,
body.mef-v4 label:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
body.mef-v4 ::selection { background: var(--ink); color: var(--paper); }

/* Kill core flow gaps; sections own their own rhythm. */
body.mef-v4 .wp-site-blocks { padding: 0; }
body.mef-v4 .wp-site-blocks > *,
body.mef-v4 .wp-block-post-content > * { margin-block-start: 0; margin-block-end: 0; }
body.mef-v4 :where(.mef-sec) > * + * { margin-block-start: 0; }

/* ---------- type ---------- */
body.mef-v4 h1, body.mef-v4 h2, body.mef-v4 h3 {
	font-family: var(--f-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
	line-height: 1.02;
	margin: 0 0 0.5em;
	text-wrap: balance;
}
body.mef-v4 h1 { font-size: clamp(44px, 9vw, 104px); line-height: 0.95; }
body.mef-v4 h2 { font-size: clamp(32px, 5.6vw, 64px); }
body.mef-v4 h3 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; line-height: 1.1; }
body.mef-v4 p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
body.mef-v4 p:last-child { margin-bottom: 0; }

/* Slate label: replaces the tracked-eyebrow cliche with a slate take line */
body.mef-v4 .mef-label {
	font-family: var(--f-mono);
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--on-paper-muted);
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
body.mef-v4 .mef-label::before {
	content: "";
	width: 0; height: 0;
	border-left: 9px solid currentColor;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	flex: 0 0 auto;
}
body.mef-v4 .mef-ink .mef-label,
body.mef-v4 .mef-wine .mef-label { color: var(--on-ink-muted); }

body.mef-v4 .mef-lede { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.5; }
body.mef-v4 .mef-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Placeholders for Eddie and the team. Bright on purpose. Must be zero before launch. */
body.mef-v4 mark.mef-todo,
body.mef-v4 .mef-todo {
	background: var(--todo);
	color: var(--ink);
	padding: 0.05em 0.3em;
	outline: 2px dashed var(--ink);
	outline-offset: 1px;
	font-family: var(--f-mono);
	font-size: 0.85em;
	font-style: normal;
	text-transform: none;
	letter-spacing: 0;
}

/* ---------- sections ---------- */
body.mef-v4 .mef-sec {
	padding: var(--sec-y) max(var(--gutter), calc((100% - var(--measure)) / 2));
	position: relative;
}
body.mef-v4 .mef-sec.mef-tight { padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(32px, 5vw, 56px); }
body.mef-v4 .mef-alt { background: var(--paper-2); }
body.mef-v4 .mef-ink { background: var(--ink); color: var(--paper); }
body.mef-v4 .mef-wine { background: var(--wine); color: var(--paper); }
body.mef-v4 .mef-ink p, body.mef-v4 .mef-wine p { color: var(--paper); }
body.mef-v4 .mef-head { max-width: 900px; margin-bottom: clamp(28px, 4vw, 48px); }

/* ---------- buttons ---------- */
body.mef-v4 .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
body.mef-v4 .wp-block-button { margin: 0; }
body.mef-v4 .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px;
	padding: 14px 26px;
	border-radius: var(--radius);
	font-family: var(--f-display);
	font-size: 18px; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.02em;
	text-decoration: none;
	border: 2px solid var(--ink);
	background: var(--ink); color: var(--paper);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.mef-v4 .mef-btn-primary .wp-block-button__link { background: var(--signal); border-color: var(--signal); color: var(--ink); }
body.mef-v4 .mef-btn-primary .wp-block-button__link:hover { background: var(--paper); border-color: var(--paper); }
body.mef-v4 .mef-btn-ghost .wp-block-button__link { background: transparent; color: var(--ink); border-color: var(--ink); }
body.mef-v4 .mef-btn-ghost .wp-block-button__link:hover { background: var(--ink); color: var(--paper); }
body.mef-v4 .mef-ink .mef-btn-ghost .wp-block-button__link,
body.mef-v4 .mef-wine .mef-btn-ghost .wp-block-button__link { color: var(--paper); border-color: var(--paper); }
body.mef-v4 .mef-ink .mef-btn-ghost .wp-block-button__link:hover,
body.mef-v4 .mef-wine .mef-btn-ghost .wp-block-button__link:hover { background: var(--paper); color: var(--ink); }
body.mef-v4 .mef-sec:not(.mef-ink):not(.mef-wine) .mef-btn-primary .wp-block-button__link:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (max-width: 600px) {
	body.mef-v4 .wp-block-buttons { flex-direction: column; align-items: stretch; }
	body.mef-v4 .wp-block-button__link { width: 100%; }
}
body.mef-v4 .mef-textlink a { font-family: var(--f-mono); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; text-underline-offset: 4px; }

/* ---------- the film frame + empty-slot placeholder ---------- */
/* .mef-frame holds one rfm/video-player block and one .mef-slot paragraph.
   The player renders NOTHING until an MP4 is set, so the slot shows a
   labelled frame. The moment a video is dropped in, .rfm-vp exists and the
   slot hides itself. Real data present = placeholder gone, automatically. */
body.mef-v4 .mef-frame { position: relative; width: 100%; }
body.mef-v4 .mef-frame .rfm-vp { max-width: 100% !important; margin: 0; }
body.mef-v4 .mef-frame .rfm-vp__stage { border: 0; box-shadow: none; border-radius: var(--radius); }
body.mef-v4 .mef-frame > .mef-slot {
	aspect-ratio: 16 / 9;
	width: 100%;
	max-width: none;
	margin: 0;
	display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 8px;
	padding: 16px;
	background:
		repeating-linear-gradient(135deg, rgba(243,238,229,.05) 0 14px, transparent 14px 28px),
		var(--ink-2);
	color: var(--paper);
	border: 1px dashed rgba(243, 238, 229, .35);
	font-family: var(--f-mono);
	font-size: 13px; line-height: 1.45;
	text-transform: uppercase; letter-spacing: .04em;
}
body.mef-v4 .mef-frame > .mef-slot mark { background: var(--todo); color: var(--ink); padding: 2px 6px; }
body.mef-v4 .mef-frame:has(.rfm-vp) > .mef-slot { display: none; }
body.mef-v4 .mef-frame.mef-vertical > .mef-slot { aspect-ratio: 9 / 16; }

/* ---------- SIGNATURE: the Slate card ---------- */
body.mef-v4 .mef-slate-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 32px);
	margin: 0;
}
@media (min-width: 768px) { body.mef-v4 .mef-slate-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { body.mef-v4 .mef-slate-grid.mef-three { grid-template-columns: repeat(3, 1fr); } }

body.mef-v4 .mef-slate {
	position: relative;
	background: var(--ink-2);
	color: var(--paper);
	border-radius: var(--radius);
	padding: 22px 0 0;
	display: flex; flex-direction: column;
	scroll-margin-top: 96px;
}
/* clapper stripe across the top of every slate */
body.mef-v4 .mef-slate::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0;
	height: 22px;
	background: repeating-linear-gradient(-55deg, var(--paper) 0 16px, var(--ink) 16px 32px);
	border-radius: var(--radius) var(--radius) 0 0;
}
/* the tally light: dark until THIS card's film is rolling */
body.mef-v4 .mef-slate::after {
	content: "";
	position: absolute; right: 14px; top: 34px; z-index: 6;
	width: 12px; height: 12px; border-radius: 50%;
	background: #3A1820;
	box-shadow: 0 0 0 2px var(--ink);
	transition: background .2s ease, box-shadow .2s ease;
	pointer-events: none;
}
body.mef-v4 .mef-slate:has(.rfm-vp[data-playing])::after {
	background: var(--signal);
	box-shadow: 0 0 0 2px var(--ink), 0 0 14px 3px rgba(255, 6, 56, .55);
}
body.mef-v4 .mef-slate > .mef-frame { order: 0; }
body.mef-v4 .mef-slate > *:not(.mef-frame) { padding-left: 20px; padding-right: 20px; }
body.mef-v4 .mef-slate .mef-take {
	font-family: var(--f-mono);
	font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
	color: var(--on-ink-muted);
	margin: 18px 0 6px;
	border-top: 1px solid var(--line-ink);
	padding-top: 14px;
}
body.mef-v4 .mef-slate h2,
body.mef-v4 .mef-slate h3 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 6px; color: var(--paper); }
body.mef-v4 .mef-slate .mef-what { font-size: 15px; color: var(--on-ink-muted); margin-bottom: 10px; }
body.mef-v4 .mef-slate .mef-story { font-size: 17px; color: var(--paper); margin-bottom: 0; padding-bottom: 22px; }
body.mef-v4 .mef-slate p:last-child { padding-bottom: 22px; }
body.mef-v4 .mef-ink .mef-slate { background: #17171A; outline: 1px solid var(--line-ink); }

/* ---------- home hero ---------- */
body.mef-v4 .mef-hero { padding-top: clamp(28px, 5vw, 72px); padding-bottom: clamp(40px, 6vw, 88px); }
body.mef-v4 .mef-hero .wp-block-columns { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 0; }
@media (min-width: 960px) {
	body.mef-v4 .mef-hero .wp-block-columns { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
}
body.mef-v4 .mef-hero .wp-block-column { margin: 0; }
body.mef-v4 .mef-hero h1 { margin-bottom: 20px; }
body.mef-v4 .mef-hero .mef-frame { box-shadow: 0 0 0 1px var(--line-ink); }
/* v3.4.9: desktop balance. The copy column and the film read as one unit:
 * - centred on each other with align-SELF, because WordPress core ships
 *   `.wp-block-columns { align-items: normal !important }`, which silently
 *   beat the old `align-items: center` here (the film sat top-right with dead
 *   space under it);
 * - the H1 sized to break on two balanced lines ("DON'T GIVE UP / ON YOUR
 *   STORY.") instead of four lines at 104px, so the copy is about as tall as
 *   the film;
 * - the film reaches right to the header's edge (--measure-wide), never past
 *   it, so it gets bigger on wide screens and lines up with the Let's talk
 *   button above it. The 8px keeps it inside on Windows scrollbars.
 * Phones and tablets (under 960px) are unchanged. The hub hero keeps its own H1. */
@media (min-width: 960px) {
	body.mef-v4 .mef-hero {
		--hero-bleed: clamp(0px, calc((100vw - var(--measure)) / 2 - var(--gutter) - 8px), calc((var(--measure-wide) - var(--measure)) / 2));
	}
	body.mef-v4 .mef-hero .wp-block-columns > .wp-block-column { align-self: center; }
	body.mef-v4 .mef-hero .mef-hero-film { margin-right: calc(-1 * var(--hero-bleed)); }
	body.mef-v4 .mef-hero .mef-hero-copy > * { margin-top: 0; margin-bottom: 0; }
	body.mef-v4 .mef-hero .mef-hero-copy > * + * { margin-top: 24px; }
	body.mef-v4 .mef-hero .mef-hero-copy > .wp-block-buttons { margin-top: 32px; }
	body.mef-v4 .mef-hero:not(.mef-hub-video) h1 { font-size: clamp(48px, 4.6vw, 66px); line-height: 0.98; }
	body.mef-v4 .mef-hero .mef-lede { max-width: 40ch; }
}
@media (min-width: 1440px) {
	body.mef-v4 .mef-hero .wp-block-columns { gap: 64px; }
}
/* Phone order: label, H1, loop, then buttons (spec 4.1) */
@media (max-width: 959px) {
	body.mef-v4 .mef-hero .mef-hero-copy { display: contents; }
	body.mef-v4 .mef-hero .wp-block-columns { display: flex; flex-direction: column; }
	body.mef-v4 .mef-hero .wp-block-columns > *, body.mef-v4 .mef-hero .mef-hero-copy > * { flex: 0 0 auto; width: 100%; margin: 0; }
	body.mef-v4 .mef-hero .mef-hero-copy > .mef-label { order: 1; }
	body.mef-v4 .mef-hero .mef-hero-copy > h1 { order: 2; }
	body.mef-v4 .mef-hero .mef-hero-film { order: 3; }
	body.mef-v4 .mef-hero .mef-hero-copy > p:not(.mef-label) { order: 4; }
	body.mef-v4 .mef-hero .mef-hero-copy > .wp-block-buttons { order: 5; margin-top: 4px; }
}

/* Page hero (inner pages) */
body.mef-v4 .mef-pagehero h1 { max-width: 14ch; }
body.mef-v4 .mef-pagehero .mef-lede { max-width: 60ch; }
body.mef-v4 .mef-pagehero .wp-block-columns { display: grid; grid-template-columns: 1fr; gap: 28px; margin: 0; }
@media (min-width: 900px) { body.mef-v4 .mef-pagehero .wp-block-columns { grid-template-columns: 7fr 5fr; gap: 56px; align-items: end; } }
body.mef-v4 .mef-pagehero .wp-block-image img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border-radius: var(--radius); }

/* The reel band */
body.mef-v4 .mef-reel { padding-top: 0; }
body.mef-v4 .mef-reel.mef-ink { padding-top: 0; }
body.mef-v4 .mef-reel .mef-frame { max-width: 1320px; margin: 0 auto; }
body.mef-v4 .mef-reel .mef-under {
	font-family: var(--f-mono); font-size: 14px; text-transform: uppercase; letter-spacing: .05em;
	color: var(--on-ink-muted); margin: 16px auto 0; max-width: 1320px; text-align: left;
}

/* ---------- Why it works: two columns with a still ---------- */
body.mef-v4 .mef-split { display: grid; grid-template-columns: 1fr; gap: 32px; margin: 0; }
@media (min-width: 900px) { body.mef-v4 .mef-split { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; } }
body.mef-v4 .mef-split .wp-block-column { margin: 0; }
body.mef-v4 .mef-split .wp-block-image { margin: 0; }
body.mef-v4 .mef-split .wp-block-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
body.mef-v4 .mef-pull {
	font-family: var(--f-display); text-transform: uppercase; font-weight: 700;
	font-size: clamp(30px, 4.4vw, 52px); line-height: 1; margin-top: 28px;
	border-left: 6px solid var(--signal); padding-left: 18px;
}

/* ---------- Is this you? mirror list ---------- */
body.mef-v4 ul.mef-mirror { list-style: none; margin: 0; padding: 0; counter-reset: take; border-top: 1px solid var(--line-paper); }
body.mef-v4 ul.mef-mirror li {
	counter-increment: take;
	display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: baseline;
	padding: 18px 0; border-bottom: 1px solid var(--line-paper);
	font-size: clamp(20px, 2.6vw, 30px); line-height: 1.3; font-weight: 600;
}
body.mef-v4 ul.mef-mirror li::before {
	content: counter(take, decimal-leading-zero);
	font-family: var(--f-mono); font-size: 14px; font-weight: 400; color: var(--on-paper-muted);
}
body.mef-v4 .mef-closer { font-family: var(--f-display); text-transform: uppercase; font-weight: 700; font-size: clamp(24px, 3vw, 36px); color: var(--signal-deep); margin-top: 28px; }

/* ---------- How it works: four steps / timelines ---------- */
body.mef-v4 .mef-steps { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; counter-reset: step; border-top: 1px solid currentColor; }
@media (min-width: 900px) { body.mef-v4 .mef-steps { grid-template-columns: repeat(4, 1fr); } body.mef-v4 .mef-steps.mef-three { grid-template-columns: repeat(3, 1fr); } }
body.mef-v4 .mef-steps > .wp-block-column {
	counter-increment: step; margin: 0;
	padding: 24px 24px 28px 0;
	border-bottom: 1px solid var(--line-paper);
}
@media (min-width: 900px) {
	body.mef-v4 .mef-steps > .wp-block-column { border-bottom: 0; border-right: 1px solid var(--line-paper); padding: 28px 24px 8px; }
	body.mef-v4 .mef-steps > .wp-block-column:first-child { padding-left: 0; }
	body.mef-v4 .mef-steps > .wp-block-column:last-child { border-right: 0; }
}
body.mef-v4 .mef-steps > .wp-block-column::before {
	content: counter(step, decimal-leading-zero);
	display: block; font-family: var(--f-mono); font-size: 44px; line-height: 1; margin-bottom: 18px; color: var(--signal-deep);
}
body.mef-v4 .mef-steps .mef-when { font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--on-paper-muted); margin-bottom: 6px; }
body.mef-v4 .mef-steps.mef-labeled > .wp-block-column::before { display: none; }
body.mef-v4 .mef-ink .mef-steps > .wp-block-column { border-color: var(--line-ink); }
body.mef-v4 .mef-ink .mef-steps > .wp-block-column::before { color: var(--signal); }
body.mef-v4 .mef-steps p { font-size: 17px; }

/* ---------- quotes ---------- */
body.mef-v4 .mef-quotes { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
@media (min-width: 768px) { body.mef-v4 .mef-quotes.mef-two { grid-template-columns: repeat(2, 1fr); column-gap: 48px; } }
body.mef-v4 .mef-quotes .wp-block-quote {
	margin: 0; padding: 28px 0; border: 0; border-top: 1px solid var(--line-paper);
}
body.mef-v4 .mef-quotes .wp-block-quote p {
	font-style: italic; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.4; max-width: 46ch;
}
body.mef-v4 .mef-quotes .wp-block-quote cite {
	display: block; margin-top: 14px; font-style: normal; font-family: var(--f-mono); font-size: 13px;
	text-transform: uppercase; letter-spacing: .05em; color: var(--on-paper-muted);
}

/* ---------- next step band ---------- */
body.mef-v4 .mef-next h2 { max-width: 16ch; }
body.mef-v4 .mef-next p { font-size: 20px; max-width: 52ch; }

/* ---------- FAQ ---------- */
body.mef-v4 .mef-faq .wp-block-details {
	border: 0; border-top: 1px solid var(--line-paper); margin: 0; padding: 0; max-width: 900px; background: none;
}
body.mef-v4 .mef-faq .wp-block-details:last-child { border-bottom: 1px solid var(--line-paper); }
body.mef-v4 .mef-faq summary {
	list-style: none; cursor: pointer; position: relative;
	padding: 22px 48px 22px 0; min-height: 44px;
	font-family: var(--f-body); font-weight: 700; font-size: clamp(18px, 2vw, 21px); line-height: 1.35;
}
body.mef-v4 .mef-faq summary::-webkit-details-marker { display: none; }
body.mef-v4 .mef-faq summary::after {
	content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	font-family: var(--f-mono); font-size: 28px; font-weight: 400; line-height: 1;
}
body.mef-v4 .mef-faq details[open] > summary::after { content: "\2212"; }
body.mef-v4 .mef-faq .wp-block-details > p { padding: 0 0 24px; color: var(--on-paper-muted); font-size: 18px; }

/* ---------- services chooser ---------- */
body.mef-v4 .mef-chooser { border-top: 2px solid var(--ink); }
body.mef-v4 .mef-chooser > .wp-block-columns {
	display: grid; grid-template-columns: 1fr; gap: 12px 48px; margin: 0;
	padding: 28px 0; border-bottom: 1px solid var(--line-paper);
}
@media (min-width: 900px) { body.mef-v4 .mef-chooser > .wp-block-columns { grid-template-columns: 6fr 5fr; align-items: center; } }
body.mef-v4 .mef-chooser .wp-block-column { margin: 0; }
body.mef-v4 .mef-chooser .mef-situation { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; font-style: italic; }
body.mef-v4 .mef-chooser h3 { margin-bottom: 6px; }
body.mef-v4 .mef-chooser .wp-block-buttons { margin-top: 14px; }
body.mef-v4 .mef-after { margin-top: 32px; font-size: 20px; }

/* ---------- filter row (anchor jumps) ---------- */
body.mef-v4 .mef-filter.wp-block-buttons { gap: 8px; margin: 0 0 40px; }
body.mef-v4 .mef-filter .wp-block-button__link {
	min-height: 44px; padding: 8px 14px; font-family: var(--f-mono); font-size: 13px; font-weight: 400;
	letter-spacing: .04em; background: transparent; color: var(--paper); border: 1px solid var(--line-ink);
}
body.mef-v4 .mef-filter .wp-block-button__link:hover { border-color: var(--paper); }
@media (max-width: 600px) { body.mef-v4 .mef-filter.wp-block-buttons { flex-direction: row; } body.mef-v4 .mef-filter .wp-block-button__link { width: auto; } }

/* ---------- lists: what's included ---------- */
body.mef-v4 ul.mef-incl { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-paper); max-width: 860px; }
body.mef-v4 ul.mef-incl li { padding: 14px 0 14px 32px; border-bottom: 1px solid var(--line-paper); position: relative; font-size: 19px; }
body.mef-v4 ul.mef-incl li::before {
	content: ""; position: absolute; left: 4px; top: 22px; width: 12px; height: 2px; background: var(--ink);
}
body.mef-v4 ul.mef-plain { padding-left: 1.2em; margin: 0 0 1em; }
body.mef-v4 ul.mef-plain li { margin-bottom: 6px; }

/* ---------- credits roll (About proof, instead of a stat row) ---------- */
body.mef-v4 .mef-credits { text-align: center; }
body.mef-v4 .mef-credits p { margin-left: auto; margin-right: auto; }
body.mef-v4 .mef-credits .mef-role { font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--on-ink-muted); margin-bottom: 4px; }
body.mef-v4 .mef-credits .mef-name { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.1; margin-bottom: 28px; }
body.mef-v4 .mef-credits .wp-block-buttons { justify-content: center; }

/* ---------- contact ways ---------- */
body.mef-v4 .mef-ways { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; border-top: 1px solid var(--line-paper); }
@media (min-width: 900px) { body.mef-v4 .mef-ways { grid-template-columns: repeat(3, 1fr); gap: 40px; border-top: 0; } }
body.mef-v4 .mef-ways > .wp-block-column { margin: 0; padding: 22px 0; border-bottom: 1px solid var(--line-paper); }
@media (min-width: 900px) { body.mef-v4 .mef-ways > .wp-block-column { border-bottom: 0; border-top: 2px solid var(--ink); } }
body.mef-v4 .mef-ways a { font-weight: 700; text-underline-offset: 4px; }

/* form slot (until the rfm-forms forms exist) */
body.mef-v4 .mef-formslot {
	border: 2px dashed var(--ink); padding: 24px; font-family: var(--f-mono); font-size: 14px; max-width: 760px; background: #fff8;
}

/* field notes query */
body.mef-v4 .mef-notes .wp-block-post-template { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line-paper); }
body.mef-v4 .mef-notes .wp-block-post-template > li { padding: 20px 0; border-bottom: 1px solid var(--line-paper); }
body.mef-v4 .mef-notes .wp-block-post-title { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 6px; }
body.mef-v4 .mef-notes .wp-block-post-title a { text-decoration: none; }
body.mef-v4 .mef-notes .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 5px; }
body.mef-v4 .mef-notes .wp-block-post-excerpt__excerpt { color: var(--on-paper-muted); margin: 0; }

/* =====================================================================
 * Header v4 (parts/header-v4.html)
 * ===================================================================== */
body.mef-v4 .mef4-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--ink); color: var(--paper);
	border-bottom: 1px solid var(--line-ink);
}
body.mef-v4.admin-bar .mef4-header { top: 32px; }
@media (max-width: 782px) { body.mef-v4.admin-bar .mef4-header { top: 46px; } }
body.mef-v4 .mef4-bar {
	display: flex; align-items: center; gap: 16px;
	min-height: 64px;
	padding: 8px max(var(--gutter), calc((100% - 1320px) / 2));
}
body.mef-v4 .mef4-logo { display: inline-flex; align-items: center; margin-right: auto; }
body.mef-v4 .mef4-logo img { height: 40px; width: auto; }
body.mef-v4 .mef4-nav { display: flex; align-items: center; gap: 4px; }
body.mef-v4 .mef4-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
body.mef-v4 .mef4-nav a {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
	font-family: var(--f-display); text-transform: uppercase; font-size: 17px; font-weight: 500; letter-spacing: .02em;
	text-decoration: none; color: var(--paper); white-space: nowrap;
}
body.mef-v4 .mef4-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
body.mef-v4 .mef4-phone { font-family: var(--f-mono) !important; font-size: 15px !important; text-transform: none !important; }
body.mef-v4 .mef4-cta {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
	background: var(--signal); color: var(--ink); text-decoration: none; border-radius: var(--radius);
	font-family: var(--f-display); text-transform: uppercase; font-weight: 600; font-size: 17px; white-space: nowrap;
}
body.mef-v4 .mef4-cta:hover { background: var(--paper); }
body.mef-v4 .mef4-toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
body.mef-v4 .mef4-toggle {
	display: none; align-items: center; min-height: 44px; padding: 0 12px; cursor: pointer;
	font-family: var(--f-mono); font-size: 14px; text-transform: uppercase; letter-spacing: .05em;
	border: 1px solid var(--line-ink); border-radius: var(--radius); user-select: none;
}
body.mef-v4 .mef4-toggle .mef4-close { display: none; }
body.mef-v4 .mef4-toggle-input:focus-visible + .mef4-toggle { outline: 3px solid var(--signal); outline-offset: 2px; }
@media (min-width: 1024px) { body.mef-v4 .mef4-cta--bar { display: none; } }
@media (max-width: 1023px) {
	body.mef-v4 .mef4-toggle { display: inline-flex; }
	body.mef-v4 .mef4-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--ink); border-bottom: 1px solid var(--line-ink);
		padding: 8px var(--gutter) 20px;
	}
	body.mef-v4 .mef4-nav ul { flex-direction: column; gap: 0; }
	body.mef-v4 .mef4-nav a { font-size: 26px; min-height: 56px; padding: 0; border-bottom: 1px solid var(--line-ink); }
	body.mef-v4 .mef4-nav .mef4-cta { display: none; }
	body.mef-v4 .mef4-toggle-input:checked ~ .mef4-nav { display: flex; }
	body.mef-v4 .mef4-toggle-input:checked + .mef4-toggle .mef4-open { display: none; }
	body.mef-v4 .mef4-toggle-input:checked + .mef4-toggle .mef4-close { display: inline; }
	body.mef-v4 .mef4-bar { position: relative; }
}
@media (max-width: 380px) { body.mef-v4 .mef4-logo img { height: 32px; } body.mef-v4 .mef4-cta--bar { padding: 0 12px; font-size: 15px; } }

/* =====================================================================
 * Footer v4 (parts/footer-v4.html) + sticky phone bar
 * ===================================================================== */
body.mef-v4 .mef4-footer { background: var(--ink); color: var(--paper); padding: clamp(56px, 8vw, 96px) max(var(--gutter), calc((100% - var(--measure)) / 2)) 32px; }
body.mef-v4 .mef4-tag { font-family: var(--f-display); text-transform: uppercase; font-weight: 700; font-size: clamp(36px, 7vw, 80px); line-height: .95; margin: 0 0 16px; max-width: 12ch; }
body.mef-v4 .mef4-line { color: var(--on-ink-muted); margin: 0 0 6px; }
body.mef-v4 .mef4-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; margin: 48px 0 40px; padding-top: 32px; border-top: 1px solid var(--line-ink); }
@media (min-width: 900px) { body.mef-v4 .mef4-cols { grid-template-columns: repeat(3, 1fr) 1.4fr; } }
body.mef-v4 .mef4-colhead { font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--on-ink-muted); margin: 0 0 12px; }
body.mef-v4 .mef4-cols ul { list-style: none; margin: 0; padding: 0; }
body.mef-v4 .mef4-cols li a { display: inline-flex; min-height: 36px; align-items: center; text-decoration: none; color: var(--paper); }
body.mef-v4 .mef4-cols li a:hover { text-decoration: underline; text-underline-offset: 4px; }
body.mef-v4 .mef4-reach address { font-style: normal; display: flex; flex-direction: column; gap: 4px; color: var(--paper); }
body.mef-v4 .mef4-reach a { color: var(--paper); }
body.mef-v4 .mef4-small { font-family: var(--f-mono); font-size: 13px; color: var(--on-ink-muted); border-top: 1px solid var(--line-ink); padding-top: 20px; margin: 0; }

body.mef-v4 .mef4-sticky { display: none; }
@media (max-width: 767px) {
	body.mef-v4 .mef4-sticky {
		display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		height: calc(56px + 16px + env(safe-area-inset-bottom, 0px));
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
		background: var(--ink); border-top: 1px solid var(--line-ink);
	}
	body.mef-v4 .mef4-sticky a {
		display: flex; align-items: center; justify-content: center; min-height: 56px; border-radius: var(--radius);
		font-family: var(--f-display); text-transform: uppercase; font-weight: 600; font-size: 18px; text-decoration: none;
	}
	body.mef-v4 .mef4-sticky .mef4-text { background: var(--signal); color: var(--ink); }
	body.mef-v4 .mef4-sticky .mef4-talk { border: 2px solid var(--paper); color: var(--paper); }
	body.mef-v4 { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
	/* hidden on the contact and thank-you pages */
	body.mef-v4:has(.mef-no-sticky) .mef4-sticky { display: none; }
	body.mef-v4:has(.mef-no-sticky) { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	body.mef-v4 *, body.mef-v4 *::before, body.mef-v4 *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
 * v3.4.1: RFM Forms on v4 pages (mef-contact, mef-quick)
 * The plugin reads --rfm-form-* tokens; set them once here, per ground.
 * ===================================================================== */
body.mef-v4 {
	--rfm-form-accent: var(--ink);
	--rfm-form-on-accent: var(--paper);
	--rfm-form-accent-faint: rgba(11, 11, 12, .12);
	--rfm-form-border: rgba(11, 11, 12, .35);
	--rfm-form-bg: #FFFFFF;
	--rfm-form-text: var(--ink);
	--rfm-form-label: var(--ink);
	--rfm-form-error: var(--signal-deep);
	--rfm-form-radius: 2px;
	--rfm-form-button-radius: 2px;
}
body.mef-v4 .mef-ink, body.mef-v4 .mef-wine {
	--rfm-form-label: var(--paper);
	--rfm-form-border: rgba(243, 238, 229, .45);
	--rfm-form-accent-faint: rgba(255, 6, 56, .25);
	--rfm-form-error: #FF8FA6;
}
body.mef-v4 .rfm-form { margin: 28px 0 0; max-width: 680px; text-align: left; }
body.mef-v4 .rfm-form-label { font-family: var(--f-mono); font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; }
body.mef-v4 .rfm-form-field input,
body.mef-v4 .rfm-form-field textarea,
body.mef-v4 .rfm-form-field select {
	width: 100%; min-height: 52px; padding: 14px 16px; font: inherit; font-size: 17px;
	border: 1.5px solid var(--rfm-form-border); border-radius: var(--rfm-form-radius);
	background: var(--rfm-form-bg); color: var(--rfm-form-text);
}
body.mef-v4 .rfm-form-field select {
	appearance: none; -webkit-appearance: none; padding-right: 44px;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
	background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
	background-size: 6px 6px; background-repeat: no-repeat;
}
body.mef-v4 .rfm-form-field input:focus,
body.mef-v4 .rfm-form-field textarea:focus,
body.mef-v4 .rfm-form-field select:focus { outline: 3px solid var(--signal); outline-offset: 1px; border-color: var(--ink); box-shadow: none; }
body.mef-v4 .rfm-form-submit {
	min-height: 56px; padding: 14px 32px; border-radius: var(--radius);
	background: var(--signal); color: var(--ink);
	font-family: var(--f-display); font-size: 19px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
}
body.mef-v4 .rfm-form-submit:hover { background: var(--ink); color: var(--paper); opacity: 1; }
body.mef-v4 .mef-ink .rfm-form-submit:hover { background: var(--paper); color: var(--ink); }
body.mef-v4 .rfm-form-status { border-radius: var(--radius); }
body.mef-v4 .mef-formnote { font-family: var(--f-mono); font-size: 14px; margin-top: 14px; }
body.mef-v4 .mef-ink .mef-formnote { color: var(--on-ink-muted); }

/* =====================================================================
 * v3.4.2: slate cards line up in every row (house rule: equal-height card grid)
 * The stagger came from WordPress's block gap: every grid item after the first
 * gets margin-block-start, so the FIRST card sat higher than its row-mates.
 * Rule (una-design-tokens grid.equal.* + native-block-editing-standard): grid
 * stretch + equal rows + card height 100% + margin reset on the items. On top of
 * that each card is a subgrid, so the film, take line, name, deliverable and story
 * of every card in a row sit on the same lines even when one of them wraps.
 * ===================================================================== */
body.mef-v4 .mef-slate-grid { align-items: stretch; }
body.mef-v4 .mef-slate-grid > * { margin: 0 !important; height: 100%; }
body.mef-v4 .mef-slate > * { margin-block-start: 0; }
@supports (grid-template-rows: subgrid) {
	body.mef-v4 .mef-slate-grid > .mef-slate {
		display: grid;
		grid-row: span 5;
		grid-template-rows: subgrid;
		row-gap: 0;
		align-content: start;
	}
	body.mef-v4 .mef-slate-grid > .mef-slate > .mef-what { align-self: start; }
}
/* The take line is the slate: one line, always. It sizes down before it ever wraps. */
body.mef-v4 .mef-slate .mef-take {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: clamp(11px, 0.55rem + 0.35vw, 13px);
	letter-spacing: 0.02em;
}
@media (min-width: 1200px) {
	body.mef-v4 .mef-slate-grid.mef-three .mef-take { font-size: 12px; letter-spacing: 0.01em; }
}

/* =====================================================================
 * v3.4.2: "Play with sound" button + the reel pop-over (assets/js/mef-reel.js)
 * ===================================================================== */
body.mef-v4 .mef-play-reel .wp-block-button__link::before {
	content: ""; width: 0; height: 0; margin-right: 10px;
	border-left: 11px solid var(--signal); border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
body.mef-v4 .mef-play-reel .wp-block-button__link:hover::before { border-left-color: currentColor; }
html.mef4-reel-lock { overflow: hidden; }
body.mef-v4 .mef4-reel {
	position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0; background: #000; color: var(--paper); overflow: hidden;
	opacity: 0; transition: opacity 120ms linear;
}
body.mef-v4 .mef4-reel[open] { display: flex; align-items: center; justify-content: center; }
body.mef-v4 .mef4-reel.is-open { opacity: 1; }
body.mef-v4 .mef4-reel::backdrop { background: rgba(0, 0, 0, .92); }
body.mef-v4 .mef4-reel__stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
body.mef-v4 .mef4-reel video { width: 100%; height: 100%; max-height: 100dvh; object-fit: contain; background: #000; }
/* the curtains: two clapper-stripe panels that split open */
body.mef-v4 .mef4-reel__curtain {
	position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 3; pointer-events: none;
	background:
		linear-gradient(90deg, transparent calc(100% - 6px), var(--signal) calc(100% - 6px)),
		repeating-linear-gradient(-55deg, var(--ink) 0 26px, #1b1b1d 26px 52px);
	transition: transform 320ms cubic-bezier(.7, 0, .2, 1);
}
body.mef-v4 .mef4-reel__curtain--l { left: 0; }
body.mef-v4 .mef4-reel__curtain--r { right: 0; transform: scaleX(-1); }
body.mef-v4 .mef4-reel.is-open .mef4-reel__curtain--l { transform: translateX(-102%); }
body.mef-v4 .mef4-reel.is-open .mef4-reel__curtain--r { transform: scaleX(-1) translateX(-102%); }
body.mef-v4 .mef4-reel__close {
	position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 4;
	width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
	background: var(--signal); color: var(--ink); border: 0; border-radius: var(--radius);
}
body.mef-v4 .mef4-reel__close:hover { background: var(--paper); }
body.mef-v4 .mef4-reel__close:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
/* the tally light: lit while the reel rolls, never blinking on its own */
body.mef-v4 .mef4-reel::after {
	content: ""; position: absolute; z-index: 4; left: max(18px, env(safe-area-inset-left)); top: max(26px, env(safe-area-inset-top));
	width: 12px; height: 12px; border-radius: 50%; background: #3A1820; transition: background .2s ease, box-shadow .2s ease;
}
body.mef-v4 .mef4-reel[data-playing]::after { background: var(--signal); box-shadow: 0 0 14px 3px rgba(255, 6, 56, .55); }
@media (prefers-reduced-motion: reduce) {
	body.mef-v4 .mef4-reel__curtain { display: none; }
	body.mef-v4 .mef4-reel { transition: opacity 150ms linear; }
}

/* =====================================================================
 * v3.4.5: hub page pieces
 * ===================================================================== */
/* AI disclosure: caption size, directly under the hero film, never hidden */
body.mef-v4 .mef-disclose { font-family: var(--f-mono); font-size: 12px; line-height: 1.5; color: var(--on-ink-muted); margin: 10px 0 0; max-width: 60ch; }
body.mef-v4 .mef-disclose a { color: var(--paper); text-underline-offset: 3px; }

/* The numbers strip: a slate-style ledger, not stat cards. Each figure is a link. */
body.mef-v4 .mef-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border-top: 2px solid var(--paper); }
@media (min-width: 900px) { body.mef-v4 .mef-numbers { grid-template-columns: repeat(4, 1fr); } }
body.mef-v4 .mef-numbers > * { margin: 0 !important; }
body.mef-v4 .mef-numbers .mef-num { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line-ink); max-width: none; }
@media (min-width: 900px) {
	body.mef-v4 .mef-numbers .mef-num { border-bottom: 0; border-right: 1px solid var(--line-ink); padding: 18px 20px; }
	body.mef-v4 .mef-numbers .mef-num:first-child { padding-left: 0; }
	body.mef-v4 .mef-numbers .mef-num:last-child { border-right: 0; }
}
body.mef-v4 .mef-num a { display: block; text-decoration: none; color: var(--paper); }
body.mef-v4 .mef-num strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(36px, 5vw, 56px); line-height: 1; text-transform: uppercase; }
body.mef-v4 .mef-num a:hover strong { color: var(--signal); }
body.mef-v4 .mef-num span { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--on-ink-muted); }
body.mef-v4 .mef-asof { font-family: var(--f-mono); font-size: 12px; color: var(--on-ink-muted); margin-top: 14px; }
body.mef-v4 .mef-narrow p { max-width: 62ch; }
/* v3.4.6: the hub hero carries a full-sentence H1; size it so the buttons stay in the first screen */
body.mef-v4 .mef-hub-video h1 { font-size: clamp(38px, 5.2vw, 72px); line-height: 0.98; }
body.mef-v4 .mef-hub-video .mef-lede { font-size: clamp(17px, 1.6vw, 20px); }