/* rfm-theme  -  main stylesheet (parent theme, v1.1.3, 2026-05-06)
   v1.1.3: blog post cards accept any image aspect ratio (portrait/landscape/square);
   v1.1.2: counter spans no longer all block (14/20 sits inline);
   v1.1.1 fix: header nav respects wrap horizontal padding; mobile wrap 22→24px;
               body overflow-x clip; founding callout mobile padding tightened.

   Mobile-first, legibility-first design system. Default brand identity is RFM;
   any child theme can override the entire color palette via its own theme.json
   without touching this file.

   How the color cascade works:
   - Each :root variable falls back through theme.json's auto-generated CSS
     custom properties (--wp--preset--color--*) to a hardcoded RFM hex.
   - Override theme.json's palette in a child theme → all :root variables
     instantly resolve to the child's values → entire site re-skins.
   - The hardcoded fallbacks here mean the parent theme renders correctly
     even if theme.json fails to load.

   What hasn't changed from v1.0.5:
   - All class names are identical. Existing imported pages render unchanged.
   - Mobile-first base, legibility bumps, sticky header, hamburger nav.
   - WCAG AA contrast on every body color.

   What's new in v1.1.0:
   - Color values are now overridable by child themes (theme.json palette swap).
   - Brand strings in template parts can be overridden via brand-config.php filter.
*/

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

:root {
	/* Surface */
	--bg:         var(--wp--preset--color--bg, #FAFAF7);
	--bg-soft:    var(--wp--preset--color--bg-soft, #F5F5F0);
	--card:       var(--wp--preset--color--card, #FFFFFF);
	--line:       var(--wp--preset--color--line, #E2E8F0);
	--line2:      var(--wp--preset--color--line-2, #CBD5E1);

	/* Ink (text) */
	--ink:        var(--wp--preset--color--ink, #0F172A);
	--ink2:       var(--wp--preset--color--ink-2, #334155);
	--ink3:       var(--wp--preset--color--ink-3, #64748B);
	--ink4:       var(--wp--preset--color--ink-4, #94A3B8);

	/* Brand (primary accent) */
	--green:      var(--wp--preset--color--green, #16A34A);
	--green-dark: var(--wp--preset--color--green-dark, #15803D);
	--green-soft: var(--wp--preset--color--green-soft, #F0FDF4);

	/* Scarcity accent */
	--amber:      var(--wp--preset--color--amber, #F59E0B);
	--amber-soft: var(--wp--preset--color--amber-soft, #FFFBEB);
	--amber-line: var(--wp--preset--color--amber-line, #FDE68A);
	--amber-ink:  var(--wp--preset--color--amber-ink, #92400E);
	--amber-ink2: var(--wp--preset--color--amber-ink-2, #78350F);

	/* Alert */
	--red:        var(--wp--preset--color--red, #DC2626);

	/* Geometry */
	--r:    10px;
	--r-lg: 16px;

	/* Elevation */
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
	--shadow-md: 0 6px 12px rgba(15, 23, 42, 0.05), 0 12px 28px rgba(15, 23, 42, 0.08);
	--shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, 0.18);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	overflow-x: clip;  /* prevent rogue horizontal scroll on mobile */
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: var(--bg);
	color: var(--ink);
	line-height: 1.65;
	font-size: 19px;                /* mobile default */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

@media (min-width: 760px) { body { font-size: 18px; line-height: 1.65; } }
@media (min-width: 1024px) { body { font-size: 18px; } }

a { color: inherit; }
a:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--green); color: #fff; }

.rfm-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}
@media (min-width: 760px) { .rfm-wrap { padding: 0 32px; } }
@media (min-width: 1024px) { .rfm-wrap { padding: 0 40px; } }

/* ─── Header  -  sticky, mobile hamburger via checkbox-hack (no JS) ──── */
.rfm-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250, 250, 247, 0.92);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--line);
}

.admin-bar .rfm-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .rfm-site-header { top: 46px; } }

.rfm-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 14px;
	padding-bottom: 14px;
	/* horizontal padding inherited from .rfm-wrap so header content lines up with body */
	flex-wrap: wrap;
}
@media (min-width: 1024px) { .rfm-nav { padding-top: 18px; padding-bottom: 18px; flex-wrap: nowrap; } }

.rfm-brand {
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-decoration: none;
	flex-shrink: 0;
}
.rfm-brand-mark { color: var(--green); margin-right: 4px; }

/* Hamburger toggle (mobile only) */
.rfm-nav-toggle-input { display: none; }
.rfm-nav-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-around;
	width: 44px;
	height: 44px;
	padding: 11px 9px;
	cursor: pointer;
	background: transparent;
	border: none;
	border-radius: var(--r);
	transition: background .2s ease;
}
.rfm-nav-toggle:hover { background: var(--bg-soft); }
.rfm-nav-toggle-bar {
	display: block;
	width: 24px;
	height: 2.5px;
	background: var(--ink);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
@media (min-width: 1024px) { .rfm-nav-toggle { display: none; } }

.rfm-nav-menu {
	display: none;
	flex-direction: column;
	width: 100%;
	gap: 12px;
	padding: 8px 0 16px;
}
.rfm-nav-toggle-input:checked ~ .rfm-nav-menu { display: flex; }

@media (min-width: 1024px) {
	.rfm-nav-menu {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 28px;
		width: auto;
		padding: 0;
	}
}

.rfm-nav-links {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 17px;
	color: var(--ink);
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (min-width: 1024px) {
	.rfm-nav-links {
		flex-direction: row;
		gap: 28px;
		font-size: 15px;
		color: var(--ink2);
	}
}
.rfm-nav-links a {
	text-decoration: none;
	font-weight: 500;
	padding: 12px 0;
	display: block;
	transition: color .15s ease;
}
.rfm-nav-links a:hover { color: var(--green-dark); }

.rfm-nav-cta {
	min-height: 48px;
	font-size: 15px;
	padding: 12px 22px;
	margin-top: 8px;
	width: 100%;
}
@media (min-width: 1024px) {
	.rfm-nav-cta {
		margin-top: 0;
		width: auto;
		padding: 12px 22px;
	}
}

.rfm-cohort-strip {
	background: var(--amber-soft);
	border-top: 1px solid var(--amber-line);
	padding: 10px 22px;
	text-align: center;
	font-size: 13px;
}

.rfm-cohort-pill {
	display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 8px;
	background: transparent; border: none; color: var(--amber-ink);
	font-size: 13px; font-weight: 600; border-radius: 24px;
}
.rfm-cohort-pill strong { color: var(--amber-ink); font-weight: 800; }
.rfm-cohort-pill .rfm-dot {
	width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
	animation: rfm-pulse 2.4s ease-in-out infinite;
}
@keyframes rfm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ─── Hero ─────────────────────────────────────────────────────────── */
.rfm-hero {
	padding: 40px 0 56px;
	border-bottom: 1px solid var(--line);
	background: var(--bg);
}
@media (min-width: 760px) { .rfm-hero { padding: 56px 0 72px; } }
@media (min-width: 1024px) { .rfm-hero { padding: 64px 0 88px; } }

.rfm-hero h1 {
	font-size: clamp(36px, 7vw, 60px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.08;
	margin: 0 0 22px;
	max-width: 960px;
	color: var(--ink);
}

.rfm-hero-sub {
	font-size: clamp(19px, 2.4vw, 23px);
	color: var(--ink2);
	max-width: 760px;
	margin: 0 0 36px;
	line-height: 1.55;
	font-weight: 400;
}

.rfm-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.rfm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 14px 26px;
	border-radius: var(--r);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
	letter-spacing: 0.005em;
	white-space: nowrap;
}
.rfm-btn:hover { transform: translateY(-1px); }

.rfm-btn-primary {
	background: var(--green);
	color: #fff;
	border-color: var(--green);
	box-shadow: var(--shadow-sm);
}
.rfm-btn-primary:hover {
	background: var(--green-dark);
	border-color: var(--green-dark);
	box-shadow: var(--shadow-md);
}
.rfm-btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--line2);
}
.rfm-btn-ghost:hover { border-color: var(--ink); background: var(--bg-soft); }

@media (max-width: 480px) {
	.rfm-cta-row { flex-direction: column; align-items: stretch; }
	.rfm-btn { width: 100%; }
}

/* ─── Section base ────────────────────────────────────────────────── */
.rfm-section {
	padding: 64px 0;
	border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) { .rfm-section { padding: 80px 0; } }
@media (min-width: 1024px) { .rfm-section { padding: 96px 0; } }

.rfm-section.rfm-no-line { border-bottom: none; }
.rfm-section.rfm-soft { background: var(--bg-soft); }

.rfm-eyebrow {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	color: var(--green);
	margin: 0 0 16px;
}

.rfm-section-title {
	font-size: clamp(28px, 4.5vw, 42px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.18;
	margin: 0 0 20px;
	max-width: 800px;
	color: var(--ink);
}

.rfm-section-sub {
	font-size: clamp(17px, 2vw, 19px);
	color: var(--ink2);
	max-width: 720px;
	margin: 0 0 36px;
	line-height: 1.6;
}

/* ─── Pain section / answer-first body type ───────────────────────── */
.rfm-pain-body {
	max-width: 740px;
	font-size: clamp(18px, 2vw, 20px);
	color: var(--ink2);
	line-height: 1.7;
}
.rfm-pain-body p { margin: 0 0 22px; }
.rfm-pain-body p:last-child { margin-bottom: 0; }
.rfm-pain-body strong.rfm-kicker {
	color: var(--ink);
	font-weight: 700;
}
.rfm-pain-body a {
	color: var(--green);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	font-weight: 500;
}
.rfm-pain-body a:hover { color: var(--green-dark); }

/* ─── Product / board mock ────────────────────────────────────────── */
.rfm-product-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
@media (min-width: 880px) { .rfm-product-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; } }

.rfm-product-body { max-width: 580px; }
.rfm-product-body p {
	font-size: clamp(17px, 1.8vw, 18px);
	color: var(--ink2);
	margin: 0 0 20px;
	line-height: 1.65;
}
.rfm-deep-link {
	display: inline-block;
	margin-top: 12px;
	padding: 12px 0;
	font-weight: 700;
	font-size: 16px;
	color: var(--green);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color .2s ease, color .2s ease;
}
.rfm-deep-link:hover { border-bottom-color: var(--green); color: var(--green-dark); }

.rfm-board-mock {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 22px;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-shadow: var(--shadow-md);
}
.rfm-board-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	background: var(--bg-soft);
	border-radius: 10px;
}
.rfm-board-thumb {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--green), var(--green-dark));
	flex-shrink: 0;
}
.rfm-board-text { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.rfm-board-line { height: 10px; background: var(--line2); border-radius: 5px; }
.rfm-board-line.short { width: 60%; }
.rfm-board-line.med { width: 85%; }
.rfm-board-pill {
	font-size: 11px;
	font-weight: 700;
	color: var(--green);
	background: var(--green-soft);
	padding: 4px 10px;
	border-radius: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.rfm-board-caption {
	font-size: 12px;
	color: var(--ink3);
	text-align: center;
	margin-top: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
}

/* ─── Editable image slots (replace placeholders with real assets) ── */
.rfm-board-image {
	width: 100%;
	max-width: 480px;
	height: auto;
	display: block;
	margin: 0 auto;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
	background: var(--card);
	border: 1px solid var(--line);
}
@media (min-width: 880px) {
	.rfm-board-image {
		max-width: 100%;
	}
}

.rfm-lifestyle-image {
	width: 100%;
	max-width: 1100px;
	height: auto;
	display: block;
	margin: 44px auto 0;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-md);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* WP-block-image instances inherit the same vibe by default */
.wp-block-image img {
	border-radius: var(--r);
	box-shadow: var(--shadow-sm);
}
.entry-content .wp-block-image {
	margin: 32px 0;
}

/* ─── Three columns / features ────────────────────────────────────── */
.rfm-three-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
@media (min-width: 680px) { .rfm-three-col { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } }

.rfm-feature {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 32px 28px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rfm-feature:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--line2);
}
.rfm-feature h3 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 12px;
	letter-spacing: -0.015em;
	color: var(--ink);
	line-height: 1.3;
}
.rfm-feature p {
	margin: 0;
	color: var(--ink2);
	font-size: 17px;
	line-height: 1.6;
}

/* ─── Blog post cards: featured image accepts any aspect ratio ───── */
/* Portrait, landscape, square, panoramic, all render naturally inside .rfm-feature.
   No forced aspect-ratio. Image fills width, height is auto. */
.rfm-feature img,
.rfm-feature .wp-block-post-featured-image img,
.rfm-feature .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--r);
	margin: -28px -26px 16px;  /* extends to card edges, then 16px gap before title */
	object-fit: cover;
	max-height: 360px;  /* prevents extremely tall portraits from dominating; gracefully crops */
}
.rfm-feature .wp-block-post-featured-image {
	margin: 0;
}
.rfm-feature .wp-block-post-title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
}
.rfm-feature .wp-block-post-title a {
	color: var(--ink);
	text-decoration: none;
}
.rfm-feature .wp-block-post-title a:hover {
	color: var(--green-dark);
}
.rfm-feature .wp-block-post-excerpt {
	margin: 0 0 12px;
	color: var(--ink2);
	font-size: 16px;
	line-height: 1.55;
}
.rfm-feature .wp-block-post-excerpt__more-link {
	color: var(--green);
	font-weight: 600;
	text-decoration: none;
}
.rfm-feature .wp-block-post-date {
	color: var(--ink3);
	font-size: 13px;
	font-weight: 500;
	margin: 0;
}
.rfm-feature .wp-block-post-date time {
	color: inherit;
}

/* Pagination on archive/blog index */
.wp-block-query-pagination {
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.wp-block-query-pagination a {
	color: var(--ink2);
	font-weight: 600;
	text-decoration: none;
}
.wp-block-query-pagination a:hover { color: var(--green-dark); }
.wp-block-query-pagination-numbers .page-numbers.current {
	color: var(--green-dark);
	font-weight: 800;
}

/* ─── How it works  -  steps ────────────────────────────────────────── */
.rfm-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	counter-reset: rfmstep;
	margin-top: 12px;
}
@media (min-width: 760px) { .rfm-steps { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } }

.rfm-step {
	padding: 36px 28px 28px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r);
	position: relative;
	transition: transform .2s ease, box-shadow .2s ease;
}
.rfm-step:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.rfm-step::before {
	counter-increment: rfmstep;
	content: counter(rfmstep);
	position: absolute;
	top: -18px;
	left: 24px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--green);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 16px;
	box-shadow: 0 4px 8px rgba(22, 163, 74, 0.25);
}
.rfm-step h3 {
	font-size: 19px;
	font-weight: 700;
	margin: 8px 0 12px;
	letter-spacing: -0.01em;
	color: var(--ink);
	line-height: 1.3;
}
.rfm-step p {
	margin: 0;
	color: var(--ink2);
	font-size: 17px;
	line-height: 1.65;
}

.rfm-step-after,
.rfm-fit-after {
	display: inline-block;
	text-align: center;
	margin-top: 36px;
	padding: 14px 16px;
	font-weight: 700;
	font-size: 16px;
	color: var(--green);
	text-decoration: none;
	border-radius: var(--r);
	transition: background .2s ease, color .2s ease;
}
.rfm-step-after { display: block; }
.rfm-fit-after { display: block; }
.rfm-step-after:hover,
.rfm-fit-after:hover {
	background: var(--green-soft);
	color: var(--green-dark);
}

/* ─── Fit filter ──────────────────────────────────────────────────── */
.rfm-fit-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 760px) { .rfm-fit-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }

.rfm-fit-col {
	padding: 32px 28px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--card);
	box-shadow: var(--shadow-sm);
}
.rfm-fit-col.rfm-yes { border-top: 4px solid var(--green); }
.rfm-fit-col.rfm-no { border-top: 4px solid var(--ink4); }
.rfm-fit-col h3 {
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.rfm-fit-col ul { margin: 0; padding: 0; list-style: none; }
.rfm-fit-col li {
	position: relative;
	padding: 0 0 16px 26px;
	color: var(--ink2);
	font-size: 17px;
	line-height: 1.6;
}
.rfm-fit-col li:last-child { padding-bottom: 0; }
.rfm-fit-col.rfm-yes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--green);
}
.rfm-fit-col.rfm-no li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ink4);
}

/* ─── Pricing teaser ──────────────────────────────────────────────── */
.rfm-pricing {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin-bottom: 28px;
}
@media (min-width: 760px) { .rfm-pricing { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } }

.rfm-tier {
	padding: 32px 28px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--card);
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}
.rfm-tier:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.rfm-tier.rfm-featured {
	border-color: var(--green);
	border-width: 2px;
	position: relative;
	box-shadow: var(--shadow-md);
}
@media (min-width: 760px) {
	.rfm-tier.rfm-featured { transform: translateY(-4px); }
	.rfm-tier.rfm-featured:hover { transform: translateY(-6px); }
}
.rfm-tier.rfm-featured::before {
	content: "Most popular";
	position: absolute;
	top: -14px;
	left: 24px;
	background: var(--green);
	color: #fff;
	padding: 5px 12px;
	border-radius: 14px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	box-shadow: 0 4px 8px rgba(22, 163, 74, 0.25);
}
.rfm-tier h3 {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--ink);
	letter-spacing: -0.01em;
}
.rfm-tier .rfm-price {
	font-size: 38px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
	color: var(--ink);
	line-height: 1.1;
}
.rfm-tier .rfm-price span {
	font-size: 16px;
	color: var(--ink3);
	font-weight: 500;
}
.rfm-tier .rfm-desc {
	font-size: 15px;
	color: var(--ink2);
	margin: 0 0 18px;
	line-height: 1.55;
}
.rfm-tier ul {
	margin: 0;
	padding-left: 22px;
	font-size: 16px;
	color: var(--ink2);
	flex: 1;
	line-height: 1.55;
}
.rfm-tier li { margin-bottom: 10px; }
.rfm-tier li::marker { color: var(--green); }

.rfm-pricing-foot {
	text-align: center;
	color: var(--ink3);
	font-size: 15px;
	margin: 28px 0 0;
	line-height: 1.6;
}
.rfm-pricing-foot a {
	color: var(--green);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color .2s ease;
}
.rfm-pricing-foot a:hover { border-bottom-color: var(--green); }

/* ─── Founding member callout ─────────────────────────────────────── */
.rfm-founding {
	background: linear-gradient(180deg, var(--amber-soft), #FEF3C7);
	border: 1px solid var(--amber-line);
	border-radius: var(--r-lg);
	padding: 28px 24px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
	box-shadow: 0 8px 24px -8px rgba(245, 158, 11, 0.18);
}
@media (min-width: 760px) {
	.rfm-founding {
		padding: 44px 40px;
		grid-template-columns: 1.4fr .6fr;
		gap: 40px;
	}
}

.rfm-founding h3 {
	margin: 0 0 12px;
	font-size: clamp(22px, 3vw, 26px);
	font-weight: 800;
	color: var(--amber-ink);
	letter-spacing: -0.015em;
	line-height: 1.25;
}
.rfm-founding p {
	margin: 0 0 20px;
	color: var(--amber-ink2);
	font-size: 16px;
	max-width: 580px;
	line-height: 1.65;
}
.rfm-counter {
	font-size: clamp(48px, 8vw, 64px);
	font-weight: 800;
	color: var(--amber-ink);
	letter-spacing: -0.025em;
	line-height: 1;
	text-align: center;
}
/* Number spans stay INLINE at parent's big font so "14 / 20" sits on one line */
.rfm-counter > span[data-cohort-remaining],
.rfm-counter > span[data-cohort-total] {
	display: inline;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: none;
	margin: 0;
}
/* The label span ("spots remaining") is BLOCK + small */
.rfm-counter > span:not([data-cohort-remaining]):not([data-cohort-total]) {
	font-size: 13px;
	font-weight: 700;
	color: #A16207;
	display: block;
	margin-top: 8px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.rfm-founding-trust {
	font-size: 15px;
	color: var(--ink3);
	max-width: 720px;
	margin: 22px auto 0;
	text-align: center;
	line-height: 1.65;
}

/* ─── FAQ ─────────────────────────────────────────────────────────── */
.rfm-faq {
	max-width: 800px;
	margin: 8px auto 0;
}
.rfm-faq details {
	border-bottom: 1px solid var(--line);
	padding: 22px 0;
}
.rfm-faq details:first-of-type { border-top: 1px solid var(--line); }
.rfm-faq summary {
	font-weight: 700;
	font-size: clamp(18px, 2vw, 19px);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	padding: 4px 0;
	color: var(--ink);
	line-height: 1.4;
}
.rfm-faq summary::-webkit-details-marker { display: none; }
.rfm-faq summary::after {
	content: "+";
	font-weight: 300;
	font-size: 28px;
	color: var(--ink3);
	transition: transform .25s ease, color .25s ease;
	flex-shrink: 0;
	width: 28px;
	text-align: center;
}
.rfm-faq details[open] summary::after { transform: rotate(45deg); color: var(--green); }
.rfm-faq details p {
	color: var(--ink2);
	font-size: 17px;
	margin: 16px 0 0;
	line-height: 1.7;
	padding-right: 40px;
}
.rfm-faq summary:hover { color: var(--green-dark); }

/* ─── Closing CTA ─────────────────────────────────────────────────── */
.rfm-closing {
	padding: 64px 0 80px;
	text-align: center;
	border-bottom: 1px solid var(--line);
	background: var(--bg-soft);
}
@media (min-width: 760px) { .rfm-closing { padding: 96px 0; } }

.rfm-closing h2 {
	font-size: clamp(28px, 3.5vw, 38px);
	font-weight: 800;
	margin: 0 0 18px;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--ink);
}
.rfm-closing p {
	color: var(--ink2);
	font-size: clamp(17px, 2vw, 19px);
	max-width: 600px;
	margin: 0 auto 32px;
	line-height: 1.6;
}
.rfm-closing .rfm-cta-row { justify-content: center; }

/* ─── Footer ──────────────────────────────────────────────────────── */
.rfm-site-footer,
.rfm-footer {
	padding: 56px 0 48px;
	font-size: 15px;
	color: var(--ink2);
	background: var(--bg);
	border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .rfm-site-footer { padding: 72px 0 56px; } }

.rfm-foot-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	margin-bottom: 32px;
}
@media (min-width: 760px) {
	.rfm-foot-grid {
		grid-template-columns: 2fr 1fr 1.4fr;
		gap: 48px;
	}
}

.rfm-foot-brand .rfm-brand { font-size: 19px; margin: 0 0 12px; }
.rfm-foot-brand p {
	margin: 8px 0 0;
	line-height: 1.6;
	max-width: 380px;
	color: var(--ink2);
	font-size: 15px;
}

.rfm-foot-heading {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ink3);
	margin: 0 0 14px;
}

.rfm-foot-col p {
	margin: 0 0 12px;
	line-height: 1.55;
	color: var(--ink2);
	font-size: 15px;
}
.rfm-foot-col p a { color: var(--green); text-decoration: none; font-weight: 600; }
.rfm-foot-col p a:hover { text-decoration: underline; }

.rfm-foot-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.rfm-foot-nav.rfm-foot-nav-small { margin-top: 16px; flex-direction: row; gap: 18px; }
.rfm-foot-nav a {
	text-decoration: none;
	color: var(--ink2);
	padding: 6px 0;
	font-weight: 500;
	font-size: 15px;
	display: inline-block;
	transition: color .15s ease;
}
.rfm-foot-nav.rfm-foot-nav-small a { font-size: 14px; }
.rfm-foot-nav a:hover { color: var(--green-dark); }

.rfm-foot-kicker {
	margin: 28px 0 0;
	font-style: italic;
	color: var(--ink2);
	font-size: 15px;
	text-align: center;
	border-top: 1px solid var(--line);
	padding-top: 28px;
	line-height: 1.6;
}

.rfm-foot-copy {
	margin: 14px 0 0;
	color: var(--ink3);
	font-size: 13px;
	text-align: center;
}

/* ─── Full-width sections on the front-end ────────────────────────── */
.rfm-hero,
.rfm-section,
.rfm-closing,
.rfm-footer {
	width: 100%;
	max-width: 100%;
}
.alignfull.rfm-hero,
.alignfull.rfm-section,
.alignfull.rfm-closing { margin-left: 0; margin-right: 0; }

/* ─── Default <h2>, <h3> in unrecognized blocks (smart-friend fallback) ── */
.entry-content h2:not([class*="rfm-"]):not(.wp-block-heading) {
	font-size: clamp(26px, 3.5vw, 36px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 56px 0 16px;
	color: var(--ink);
}
.entry-content h3:not([class*="rfm-"]):not(.wp-block-heading) {
	font-size: clamp(20px, 2.4vw, 24px);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	margin: 36px 0 12px;
	color: var(--ink);
}
.entry-content p:not([class*="rfm-"]) {
	font-size: 18px;
	line-height: 1.65;
	color: var(--ink2);
	margin: 0 0 18px;
}

/* ─── WP admin / editor adjustments ──────────────────────────────── */
.editor-styles-wrapper { background: var(--bg); }
.editor-styles-wrapper .rfm-section,
.editor-styles-wrapper .rfm-hero,
.editor-styles-wrapper .rfm-closing { width: 100%; max-width: 100%; }


/* ─── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ─── Print ───────────────────────────────────────────────────────── */
@media print {
	.rfm-cta-row, .rfm-btn, .rfm-cohort-pill, .rfm-cohort-strip { display: none; }
	body { background: #fff; color: #000; font-size: 12pt; }
	.rfm-section { padding: 24px 0; border-bottom: 1px solid #ccc; }
}

/* ============================================================
 * v1.2.0  -  Video-first patterns + perf
 * ============================================================ */

/* --- Eyebrow / shared accent --------------------------------- */
.rfm-eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green, #D7263D);
	margin-bottom: 0.5rem;
}

/* --- Video Hero (fullbleed) ---------------------------------- */
.rfm-video-hero--fullbleed {
	position: relative;
	overflow: hidden;
	min-height: 80vh;
	background: var(--wp--preset--color--ink, #0A0A0A);
}
.rfm-video-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.rfm-video-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.rfm-video-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0,0,0,0.55) 0%,
		rgba(0,0,0,0.35) 50%,
		rgba(0,0,0,0.65) 100%
	);
	pointer-events: none;
}
.rfm-video-hero__content {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: 0 auto;
}
.rfm-video-hero__headline {
	margin: 0;
	color: var(--wp--preset--color--bg, #FAFAF7);
}
.rfm-video-hero__subhead {
	max-width: 60ch;
	color: rgba(255,255,255,0.85);
}

/* --- Featured Reel ------------------------------------------- */
.rfm-featured-reel__player {
	margin: 0;
	border-radius: 2px;
	overflow: hidden;
	background: var(--wp--preset--color--ink, #0A0A0A);
	aspect-ratio: 16 / 9;
	width: 100%;
}
.rfm-featured-reel__player video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.rfm-featured-reel__caption {
	font-size: 14px;
	color: var(--wp--preset--color--ink-3, #5A5A5A);
	margin-top: 0.75rem;
}
.rfm-meta-label {
	margin-bottom: 0.25rem;
}

/* --- Testimonial Strip Video --------------------------------- */
.rfm-testimonial-strip__cards {
	gap: 2rem;
}
.rfm-testimonial-card__player {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 2px;
	background: var(--wp--preset--color--ink, #0A0A0A);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rfm-testimonial-card__player:hover {
	transform: scale(1.015);
	box-shadow: 0 14px 32px rgba(0,0,0,0.18);
}
.rfm-testimonial-card__player video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* --- NAP Block ---------------------------------------------- */
.rfm-nap-block .rfm-nap-block,
.rfm-nap.rfm-nap-block {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 16px;
	line-height: 1.5;
}
.rfm-nap-name {
	font-weight: 700;
	font-size: 18px;
}
.rfm-nap-phone {
	color: var(--wp--preset--color--green, #D7263D);
	text-decoration: none;
	font-weight: 600;
	margin-top: 0.25rem;
}
.rfm-nap-phone:hover { text-decoration: underline; }
.rfm-nap-inline {
	font-size: 14px;
	color: var(--wp--preset--color--ink-3, #5A5A5A);
}

/* --- FAQ Accordion (native <details>) ------------------------ */
.rfm-faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.rfm-faq-item {
	border-top: 1px solid var(--wp--preset--color--line, #E5E5E5);
	padding: 1.25rem 0;
}
.rfm-faq-item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line, #E5E5E5);
}
.rfm-faq-item summary {
	cursor: pointer;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	color: var(--wp--preset--color--ink, #0A0A0A);
}
.rfm-faq-item summary::-webkit-details-marker { display: none; }
.rfm-faq-item summary::after {
	content: '+';
	font-size: 24px;
	font-weight: 400;
	color: var(--wp--preset--color--green, #D7263D);
	line-height: 1;
	transition: transform 0.18s ease;
	flex: 0 0 auto;
}
.rfm-faq-item[open] summary::after {
	transform: rotate(45deg);
}
.rfm-faq-answer {
	padding-top: 0.75rem;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-2, #1F1F1F);
	max-width: 70ch;
}
.rfm-faq-answer p { margin: 0 0 0.5rem; }

/* --- Perf: font-display swap on any registered font ---------- */
@font-face {
	font-display: swap;
}

/* --- Reduce motion respect ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rfm-video-hero__video {
		display: none;
	}
	.rfm-video-hero--fullbleed {
		background-image: var(--rfm-hero-poster, none);
		background-size: cover;
		background-position: center;
	}
	.rfm-testimonial-card__player {
		transition: none;
	}
	.rfm-testimonial-card__player:hover {
		transform: none;
	}
}

/* --- Mobile tuning ------------------------------------------- */
@media (max-width: 768px) {
	.rfm-video-hero--fullbleed { min-height: 70vh; }
	.rfm-testimonial-strip__cards { gap: 1.5rem; }
	.rfm-faq-item summary { font-size: 16px; }
}

/* ============================================================
 * v1.2.1  -  Placeholder system + 4 additional patterns
 * ============================================================ */

/* --- Image checkerboard placeholder (parent-level) ----------- */
.rfm-img-placeholder {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #f5f5f5;
	background-image:
		linear-gradient(45deg, #d8d8d8 25%, transparent 25%),
		linear-gradient(-45deg, #d8d8d8 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #d8d8d8 75%),
		linear-gradient(-45deg, transparent 75%, #d8d8d8 75%);
	background-size: 28px 28px;
	background-position: 0 0, 0 14px, 14px -14px, -14px 0px;
	border: 2px dashed #b0b0b0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #5a5a5a;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	overflow: hidden;
}
.rfm-img-placeholder::before {
	content: 'IMAGE PLACEHOLDER';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255,255,255,0.95);
	padding: 0.5rem 1rem;
	border: 1px solid #b0b0b0;
}
.rfm-img-placeholder[data-spec]::after {
	content: 'REPLACE: ' attr(data-spec);
	position: absolute;
	bottom: 8px;
	left: 8px;
	right: 8px;
	background: rgba(0,0,0,0.7);
	color: #fff;
	padding: 0.4rem 0.6rem;
	font-size: 11px;
	letter-spacing: 0.02em;
	text-transform: none;
	border-radius: 2px;
	text-align: center;
}
.rfm-img-placeholder--square    { aspect-ratio: 1 / 1; }
.rfm-img-placeholder--portrait  { aspect-ratio: 4 / 5; }
.rfm-img-placeholder--ultrawide { aspect-ratio: 21 / 9; }

/* --- Video embed placeholder (parent-level) ----------------- */
.rfm-video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #0A0A0A;
	border-radius: 2px;
	overflow: hidden;
}
.rfm-video-embed iframe,
.rfm-video-embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.rfm-video-embed--placeholder {
	background-color: #1a1a1a;
	background-image:
		linear-gradient(45deg, #2a2a2a 25%, transparent 25%),
		linear-gradient(-45deg, #2a2a2a 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #2a2a2a 75%),
		linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
	background-size: 36px 36px;
	background-position: 0 0, 0 18px, 18px -18px, -18px 0px;
	border: 2px dashed #5a5a5a;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rfm-video-embed--placeholder::before {
	content: '\25B6';
	font-size: 64px;
	color: var(--wp--preset--color--green, #D7263D);
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: rgba(0,0,0,0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid var(--wp--preset--color--green, #D7263D);
}
.rfm-video-embed--placeholder[data-spec]::after {
	content: 'VIDEO PLACEHOLDER  -  ' attr(data-spec);
	position: absolute;
	bottom: 12px;
	left: 12px;
	right: 12px;
	background: rgba(215,38,61,0.95);
	color: #fff;
	padding: 0.5rem 0.75rem;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	border-radius: 2px;
}

/* --- Reel Grid ---------------------------------------------- */
.rfm-reel-grid__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
}
.rfm-reel-grid__card {
	display: flex;
	flex-direction: column;
}
.rfm-reel-grid__caption {
	font-size: 14px;
	color: var(--wp--preset--color--ink-3, #5A5A5A);
	margin-top: 0.5rem;
}

/* --- Industry Showcase -------------------------------------- */
.rfm-industry-showcase__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
}
.rfm-industry-showcase__card {
	background: var(--wp--preset--color--card, #FFFFFF);
	border: 1px solid var(--wp--preset--color--line, #E5E5E5);
	padding: 1.75rem 1.25rem;
	text-align: center;
	border-radius: 2px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rfm-industry-showcase__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(0,0,0,0.18);
}
.rfm-industry-showcase__industry {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green, #D7263D);
	margin: 1rem 0 0.4rem;
}
.rfm-industry-showcase__client {
	font-size: 17px;
	font-weight: 700;
	margin: 0;
}

/* --- Sticky CTA Bar (mobile only) --------------------------- */
.rfm-sticky-cta { display: contents; }
.rfm-sticky-cta__bar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--wp--preset--color--ink, #0A0A0A);
	padding: 0.75rem;
	gap: 0.5rem;
	z-index: 998;
	box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
}
.rfm-sticky-cta__btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 0.5rem;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 2px;
	border: 2px solid var(--wp--preset--color--bg, #FAFAF7);
	color: var(--wp--preset--color--bg, #FAFAF7);
	background: transparent;
}
.rfm-sticky-cta__btn--primary {
	background: var(--wp--preset--color--green, #D7263D);
	border-color: var(--wp--preset--color--green, #D7263D);
}
@media (max-width: 768px) {
	.rfm-sticky-cta__bar { display: flex; }
	body { padding-bottom: 4.5rem; } /* reserve space for sticky bar */
}


/* ============================================================
 * v1.0.0 (rfm-theme-creative) - Migrated design system
 *
 * The block below was fused upstream from the MrEddieFlores child
 * theme custom.css (v2.0.0 through v2.1.3). It carries the
 * creative-agency lane's section system, dark variants, equal
 * card heights, FAQ accordion polish, scroll-to-top, YouTube
 * facade, mobile overflow guards, copy-first hero, and the
 * Oswald + Inter Tight typography hierarchy.
 *
 * Children override single CSS variables instead of duplicating
 * selectors. The token contract is the :root block immediately
 * below.
 * ============================================================ */

:root {
	/* Section system tokens */
	--rfm-section-padding-y: clamp(1.75rem, 3vw, 3rem);
	--rfm-section-padding-y-lg: clamp(4rem, 8vw, 8rem);
	--rfm-section-gap: clamp(2rem, 4vw, 4rem);

	/* Content rails */
	--rfm-content-rail: 1160px;
	--rfm-card-rail: 1100px;
	--rfm-narrow-rail: 720px;

	/* Typography */
	--rfm-display-font: 'Oswald', 'Roboto Condensed', 'Arial Narrow', sans-serif;
	--rfm-body-font: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--rfm-system-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Brand accents (children override these) */
	--rfm-eyebrow-color: #D7263D;
	--rfm-eyebrow-letter-spacing: 0.18em;
	--rfm-accent: var(--green, #16A34A);

	/* Section backgrounds (light, soft, gradient, dark) */
	--rfm-section-bg-light: #FAFAF7;
	--rfm-section-bg-soft: #F5F5F0;
	--rfm-section-bg-gradient: linear-gradient(180deg, #FAFAF7 0%, #F7F7F4 100%);
	--rfm-section-bg-dark: #0A0A0A;
	--rfm-section-fg-dark: rgba(255, 255, 255, 0.92);

	/* Card system */
	--rfm-card-bg: #FFFFFF;
	--rfm-card-border: rgba(0, 0, 0, 0.08);
	--rfm-card-radius: 2px;

	/* Hover micro-interaction */
	--rfm-hover-lift: -2px;
	--rfm-hover-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}


/* ============================================================
 * 0. Critical: prevent horizontal page scroll on mobile
 * ============================================================ */
html, body {
	overflow-x: clip;
	max-width: 100vw;
}
*, *::before, *::after { min-width: 0; }


/* ============================================================
 * 1. Universal section system
 * Every section block (.wp-block-group with section role,
 * .rfm-section-*, and named patterns) gets the same outer
 * vertical rhythm + content rail centering.
 * ============================================================ */
.rfm-section,
.rfm-featured-reel,
.rfm-testimonial-strip,
.rfm-faq-accordion,
.rfm-industry-showcase,
.rfm-nap-block,
.mef-industry-grid,
.mef-process-strip,
.mef-mara-story,
.mef-pricing-faq,
.rfm-section-light,
.rfm-section-soft,
.rfm-section-gradient,
.rfm-section-dark {
	padding-top: var(--rfm-section-padding-y);
	padding-bottom: var(--rfm-section-padding-y);
	padding-left: clamp(1rem, 3vw, 2rem);
	padding-right: clamp(1rem, 3vw, 2rem);
}

.rfm-section--lg,
.rfm-featured-reel.is-lg,
.rfm-testimonial-strip.is-lg {
	padding-top: var(--rfm-section-padding-y-lg);
	padding-bottom: var(--rfm-section-padding-y-lg);
}

/* Inner content rail. Section is full-bleed; content centers. */
.rfm-section > .wp-block-group__inner-container,
.rfm-section-light > .wp-block-group__inner-container,
.rfm-section-soft > .wp-block-group__inner-container,
.rfm-section-gradient > .wp-block-group__inner-container,
.rfm-section-dark > .wp-block-group__inner-container,
.rfm-section__inner,
.rfm-featured-reel__inner,
.rfm-testimonial-strip__inner,
.rfm-faq-accordion__inner,
.mef-industry-grid__inner,
.mef-process-strip__inner,
.mef-mara-story__inner,
.mef-pricing-faq__inner {
	max-width: var(--rfm-content-rail);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}


/* ============================================================
 * 2. Section variants (light / soft / gradient / dark)
 * ============================================================ */
.rfm-section-light  { background: var(--rfm-section-bg-light); }
.rfm-section-soft   { background: var(--rfm-section-bg-soft); }
.rfm-section-gradient {
	background: var(--rfm-section-bg-gradient);
}
.rfm-section-dark {
	background: var(--rfm-section-bg-dark);
	color: var(--rfm-section-fg-dark);
}
.rfm-section-dark h1,
.rfm-section-dark h2,
.rfm-section-dark h3,
.rfm-section-dark h4,
.rfm-section-dark h5,
.rfm-section-dark h6 {
	color: #FFFFFF;
}
.rfm-section-dark p,
.rfm-section-dark li,
.rfm-section-dark blockquote {
	color: var(--rfm-section-fg-dark);
}
.rfm-section-dark a:not(.wp-block-button__link) {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
.rfm-section-dark .rfm-eyebrow {
	color: var(--rfm-eyebrow-color);
}


/* ============================================================
 * 3. Typography rhythm (Oswald display + Inter Tight body)
 * ============================================================ */
.rfm-eyebrow {
	display: inline-block;
	font-family: var(--rfm-system-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--rfm-eyebrow-letter-spacing);
	text-transform: uppercase;
	color: var(--rfm-eyebrow-color);
	margin-bottom: 1.25rem;
}

.rfm-display-headline {
	font-family: var(--rfm-display-font);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 0.95;
	text-transform: uppercase;
}

/* Section H2 polish (display font, slight tracking pull-in) */
.rfm-section h2,
.rfm-section-light h2,
.rfm-section-soft h2,
.rfm-section-gradient h2,
.rfm-section-dark h2,
.rfm-featured-reel h2,
.rfm-testimonial-strip h2,
.rfm-faq-accordion h2,
.mef-industry-grid h2,
.mef-process-strip h2 {
	font-family: var(--rfm-display-font);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

/* Body paragraph breathing */
.rfm-section p,
.rfm-section-light p,
.rfm-section-soft p,
.rfm-section-gradient p,
.rfm-section-dark p {
	max-width: var(--rfm-narrow-rail);
	margin-left: auto;
	margin-right: auto;
	line-height: 1.65;
}

/* Section heading divider hairline */
.rfm-section h2 + p,
.rfm-section-light h2 + p,
.rfm-section-soft h2 + p,
.rfm-section-gradient h2 + p,
.rfm-section-dark h2 + p {
	margin-top: 0.75rem;
}


/* ============================================================
 * 4. Copy-first hero (default for service-business clients)
 *
 * Eyebrow + H1 + subhead + 2 CTAs. No background video.
 * Lives in the rfm/hero-copy-first pattern.
 * ============================================================ */
.rfm-hero-copy {
	padding-top: clamp(3rem, 6vw, 6rem);
	padding-bottom: clamp(3rem, 6vw, 6rem);
	padding-left: clamp(1rem, 3vw, 2rem);
	padding-right: clamp(1rem, 3vw, 2rem);
	text-align: center;
	background: var(--rfm-section-bg-gradient);
}
.rfm-hero-copy > * {
	max-width: var(--rfm-card-rail);
	margin-left: auto;
	margin-right: auto;
}
.rfm-hero-copy h1 {
	font-family: var(--rfm-display-font);
	font-weight: 700;
	font-size: clamp(40px, 6vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin: 0 auto 1.25rem;
}
.rfm-hero-copy > p {
	max-width: var(--rfm-narrow-rail);
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.55;
	color: var(--ink2, #334155);
	margin: 0 auto 2rem;
}
.rfm-hero-copy .wp-block-buttons {
	justify-content: center;
}

@media (max-width: 600px) {
	.rfm-hero-copy h1 { max-width: 100%; font-size: clamp(34px, 9vw, 44px); }
	.rfm-hero-copy > p { max-width: 100%; font-size: 16px; }
}


/* ============================================================
 * 5. Card grids (equal heights)
 * ============================================================ */
.rfm-card-grid,
.mef-industry-grid__cards,
.mef-process-strip__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	grid-auto-rows: 1fr;
	gap: 1.5rem;
	max-width: var(--rfm-card-rail);
	margin-left: auto;
	margin-right: auto;
}

.rfm-card,
.mef-industry-card,
.mef-process-step {
	background: var(--rfm-card-bg);
	border: 1px solid var(--rfm-card-border);
	padding: 2rem 1.5rem;
	border-radius: var(--rfm-card-radius);
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rfm-card:hover,
.mef-industry-card:hover,
.mef-process-step:hover {
	transform: translateY(var(--rfm-hover-lift));
	box-shadow: var(--rfm-hover-shadow);
}

.rfm-card .rfm-card-tag,
.mef-industry-card__industry {
	font-family: var(--rfm-system-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rfm-eyebrow-color);
	margin-bottom: 0.5rem;
}
.rfm-card h3,
.mef-industry-card__client {
	font-size: 18px;
	font-weight: 700;
	color: var(--ink, #0A0A0A);
	margin: 0 0 0.5rem;
	font-family: var(--rfm-body-font);
}

/* Process strip - numbered steps */
.mef-process-strip__steps { counter-reset: process-step; }
.mef-process-step {
	position: relative;
	counter-increment: process-step;
}
.mef-process-step::before {
	content: counter(process-step, decimal-leading-zero);
	font-family: var(--rfm-display-font);
	font-size: 56px;
	font-weight: 400;
	color: var(--rfm-eyebrow-color);
	line-height: 1;
	display: block;
	margin-bottom: 1rem;
}


/* ============================================================
 * 6. Buttons (sharp-edge, high-contrast, full-bleed safe)
 * ============================================================ */
.wp-block-button__link {
	padding: 1.1rem 2rem;
	font-family: var(--rfm-body-font);
	font-weight: 700;
	letter-spacing: 0.02em;
	border: 2px solid var(--green, #16A34A);
	border-radius: 2px;
	max-width: 100%;
	white-space: normal;
}
.wp-block-button__link:hover {
	background: var(--green-dark, #15803D) !important;
	border-color: var(--green-dark, #15803D);
}

.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--ink, #0F172A) !important;
	border: 2px solid var(--ink, #0F172A);
}
.is-style-outline .wp-block-button__link:hover {
	background: var(--ink, #0F172A) !important;
	color: var(--bg, #FAFAF7) !important;
}

.rfm-section-dark .is-style-outline .wp-block-button__link {
	color: #FFFFFF !important;
	border-color: #FFFFFF;
}
.rfm-section-dark .is-style-outline .wp-block-button__link:hover {
	background: #FFFFFF !important;
	color: var(--ink, #0A0A0A) !important;
}

.rfm-section-dark .wp-block-buttons {
	justify-content: center;
}


/* ============================================================
 * 7. FAQ accordion polish
 * Built on top of <details>/<summary> (wp-block-details).
 * Red SVG chevron, slide animation, hover wash.
 * ============================================================ */
.wp-block-details {
	border-top: 1px solid var(--line, #E2E8F0);
	padding: 0;
	background: transparent;
}
.wp-block-details:last-of-type {
	border-bottom: 1px solid var(--line, #E2E8F0);
}

.wp-block-details summary {
	padding: 1.25rem 2.5rem 1.25rem 0;
	font-family: var(--rfm-body-font);
	font-size: clamp(17px, 2vw, 19px);
	font-weight: 700;
	color: var(--ink, #0F172A);
	cursor: pointer;
	list-style: none;
	position: relative;
	transition: color 0.15s ease, background-color 0.15s ease;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::marker { display: none; content: ''; }

.wp-block-details summary::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D7263D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.25s ease;
}
.wp-block-details[open] summary::after {
	transform: rotate(180deg);
}

.wp-block-details summary:hover {
	background-color: rgba(215, 38, 61, 0.04);
}

.wp-block-details > *:not(summary) {
	padding-bottom: 1.25rem;
	color: var(--ink2, #334155);
	max-width: 100%;
	margin-top: 0;
}

@keyframes rfm-faq-slide {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.wp-block-details[open] > *:not(summary) {
	animation: rfm-faq-slide 0.25s ease both;
}


/* ============================================================
 * 8. Scroll-to-top button (injected by rfm-creative-ui.js)
 * ============================================================ */
.rfm-scroll-top,
.mef-scroll-top {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ink, #0A0A0A);
	color: #FFFFFF;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background-color 0.15s ease;
	z-index: 90;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	max-width: calc(100vw - 2rem);
}
.rfm-scroll-top.is-visible,
.mef-scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.rfm-scroll-top:hover,
.mef-scroll-top:hover {
	background: var(--rfm-eyebrow-color);
}
.rfm-scroll-top svg,
.mef-scroll-top svg {
	width: 22px;
	height: 22px;
	display: block;
}


/* ============================================================
 * 9. YouTube facade pattern (rfm-creative-ui.js loader)
 * ============================================================ */
.rfm-video-facade {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000000;
	overflow: hidden;
	cursor: pointer;
	border-radius: 2px;
	max-width: 100%;
}
.rfm-video-facade__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.rfm-video-facade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: transform 0.18s ease, filter 0.18s ease;
}
.rfm-video-facade__play svg {
	display: block;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}
.rfm-video-facade:hover .rfm-video-facade__play {
	transform: translate(-50%, -50%) scale(1.05);
}
.rfm-video-facade:hover .rfm-video-facade__play-bg {
	fill: var(--rfm-eyebrow-color);
}
.rfm-video-facade.is-loaded {
	cursor: default;
}
.rfm-video-facade.is-loaded iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}


/* ============================================================
 * 10. mef-mara-story (case-study split layout, generic enough
 * to live upstream as a side-by-side narrative section)
 * ============================================================ */
.mef-mara-story {
	background: var(--rfm-section-bg-soft);
}
.mef-mara-story__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
	max-width: var(--rfm-content-rail);
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 900px) {
	.mef-mara-story__inner { grid-template-columns: 1fr; gap: 1.5rem; }
}


/* ============================================================
 * 11. Mobile tightening
 * ============================================================ */
@media (max-width: 768px) {
	.rfm-card-grid,
	.mef-industry-grid__cards { grid-template-columns: 1fr 1fr; gap: 1rem; }
	.rfm-card,
	.mef-industry-card { padding: 1.25rem 1rem; }
	.mef-industry-card__client { font-size: 16px; }
	.mef-process-strip__steps { grid-template-columns: 1fr 1fr; gap: 1rem; }
	.mef-process-step { padding: 1.25rem 1rem; }
	.mef-process-step::before { font-size: 40px; }
	.wp-block-button__link { font-size: 15px; padding: 0.95rem 1.5rem; }
}

@media (max-width: 480px) {
	.rfm-card-grid,
	.mef-industry-grid__cards,
	.mef-process-strip__steps { grid-template-columns: 1fr; }
}


/* ============================================================
 * 12. Reduced motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.rfm-card,
	.mef-industry-card,
	.mef-process-step,
	.rfm-video-facade__play,
	.rfm-scroll-top,
	.mef-scroll-top,
	.wp-block-details summary,
	.wp-block-details summary::after { transition: none; }
	.wp-block-details[open] > *:not(summary) { animation: none; }
}
/* ============================================================
 * MrEddieFlores child theme — custom.css (v2.0.0)
 *
 * Loaded after parent main.css.
 * Sections:
 *   1. Editor placeholder system (image checkerboard, video swap, text)
 *   2. Brutal-modern type rhythm
 *   3. Dark-hero treatment
 *   4. Sharp-edge / high-contrast tweaks
 *   5. Hover micro-interactions
 *   6. Mobile tuning
 * ============================================================ */


/* === 1. Editor placeholder system =========================== */

/* Image checkerboard — drop in any <img> swap target.
   Use as: <div class="rfm-img-placeholder" data-spec="hero photo, 1920x1080, AVIF"></div>
   Eddie sees the checkerboard in the editor and swaps it for a real <img>. */
.rfm-img-placeholder {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #f5f5f5;
	background-image:
		linear-gradient(45deg, #d8d8d8 25%, transparent 25%),
		linear-gradient(-45deg, #d8d8d8 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #d8d8d8 75%),
		linear-gradient(-45deg, transparent 75%, #d8d8d8 75%);
	background-size: 28px 28px;
	background-position: 0 0, 0 14px, 14px -14px, -14px 0px;
	border: 2px dashed #b0b0b0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #5a5a5a;
	font-family: var(--wp--preset--font-family--system, sans-serif);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	overflow: hidden;
}
.rfm-img-placeholder::before {
	content: 'IMAGE PLACEHOLDER';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255,255,255,0.95);
	padding: 0.5rem 1rem;
	border: 1px solid #b0b0b0;
}
.rfm-img-placeholder[data-spec]::after {
	content: 'REPLACE: ' attr(data-spec);
	position: absolute;
	bottom: 8px;
	left: 8px;
	right: 8px;
	background: rgba(0,0,0,0.7);
	color: #fff;
	padding: 0.4rem 0.6rem;
	font-size: 11px;
	letter-spacing: 0.02em;
	text-transform: none;
	border-radius: 2px;
	text-align: center;
}
/* Square / portrait variants */
.rfm-img-placeholder--square     { aspect-ratio: 1 / 1; }
.rfm-img-placeholder--portrait   { aspect-ratio: 4 / 5; }
.rfm-img-placeholder--ultrawide  { aspect-ratio: 21 / 9; }


/* Video placeholder — supports YouTube embed swap OR HTML5 video.
   YouTube use:
     <div class="rfm-video-embed">
       <iframe src="https://www.youtube.com/embed/[REPLACE: VIDEO_ID]" ...></iframe>
     </div>
   HTML5 native use: just drop a <video> with poster pointing to the checkerboard SVG. */
.rfm-video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #0A0A0A;
	border-radius: 2px;
	overflow: hidden;
}
.rfm-video-embed iframe,
.rfm-video-embed video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* When iframe is missing src, render a placeholder. */
.rfm-video-embed--placeholder {
	background-color: #1a1a1a;
	background-image:
		linear-gradient(45deg, #2a2a2a 25%, transparent 25%),
		linear-gradient(-45deg, #2a2a2a 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #2a2a2a 75%),
		linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
	background-size: 36px 36px;
	background-position: 0 0, 0 18px, 18px -18px, -18px 0px;
	border: 2px dashed #5a5a5a;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rfm-video-embed--placeholder::before {
	content: '▶';
	font-size: 64px;
	color: #D7263D;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: rgba(0,0,0,0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid #D7263D;
}
.rfm-video-embed--placeholder::after {
	content: 'VIDEO PLACEHOLDER — ' attr(data-spec);
	position: absolute;
	bottom: 12px;
	left: 12px;
	right: 12px;
	background: rgba(215,38,61,0.95);
	color: #fff;
	padding: 0.5rem 0.75rem;
	font-family: var(--wp--preset--font-family--system, sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	border-radius: 2px;
}

/* Text placeholder marker — `[REPLACE: ...]` strings glow softly in the editor
   so Eddie sees what he still needs to fill in. Frontend renders normally. */
.rfm-text-placeholder {
	background: rgba(255, 215, 0, 0.18);
	border-bottom: 1px dashed rgba(255, 165, 0, 0.6);
	padding: 0 2px;
}


/* === 2. Brutal-modern type rhythm =========================== */

.rfm-eyebrow {
	font-family: var(--wp--preset--font-family--system);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
}

/* Display headline — Oswald, full uppercase aesthetic */
.rfm-display-headline {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 0.95;
	text-transform: uppercase;
}

/* Hero headline override — already uppercase via Oswald */
.rfm-video-hero__headline {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	line-height: 0.95;
}


/* === 3. Dark-hero treatment ================================= */

/* Hero already dark via parent. Boost contrast + tighten scrim. */
.rfm-video-hero--fullbleed {
	background: #0A0A0A;
	min-height: 88vh;
}
.rfm-video-hero__scrim {
	background: linear-gradient(
		180deg,
		rgba(10,10,10,0.55) 0%,
		rgba(10,10,10,0.40) 35%,
		rgba(10,10,10,0.65) 70%,
		rgba(10,10,10,0.85) 100%
	);
}
.rfm-video-hero__subhead {
	color: rgba(255,255,255,0.88);
	font-family: var(--wp--preset--font-family--system);
	font-weight: 400;
}

/* Section headings using display font */
.rfm-featured-reel h2,
.rfm-testimonial-strip h2,
.rfm-faq-accordion h2,
.mef-industry-grid h2,
.mef-process-strip h2 {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: -0.005em;
	line-height: 1.0;
}


/* === 4. Sharp-edge / high-contrast tweaks =================== */

/* Site-wide: 0-2px radius max */
.wp-block-button__link,
.wp-block-image img,
.rfm-video-embed,
.rfm-img-placeholder,
.rfm-featured-reel__player,
.rfm-testimonial-card__player {
	border-radius: 2px !important;
}

/* Generous section padding */
.rfm-featured-reel,
.rfm-testimonial-strip,
.rfm-faq-accordion,
.mef-industry-grid,
.mef-process-strip,
.mef-mara-story {
	padding-top: clamp(4rem, 8vw, 8rem);
	padding-bottom: clamp(4rem, 8vw, 8rem);
}

/* CTA button — louder, fuller, sharp */
.wp-block-button__link {
	padding: 1.1rem 2rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	border: 2px solid var(--wp--preset--color--green);
}
.wp-block-button__link:hover {
	background: var(--wp--preset--color--green-dark) !important;
	border-color: var(--wp--preset--color--green-dark);
}

/* Outline-style button variant */
.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	border: 2px solid var(--wp--preset--color--ink);
}
.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--bg) !important;
}


/* === 5. Hover micro-interactions ============================ */

.rfm-testimonial-card__player,
.mef-industry-card,
.mef-process-step {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rfm-testimonial-card__player:hover,
.mef-industry-card:hover,
.mef-process-step:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(0,0,0,0.18);
}


/* === MrEddieFlores-specific patterns ======================== */

/* mef-industry-grid — 5 industry cards, hover-elevated */
.mef-industry-grid__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}
.mef-industry-card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	padding: 2rem 1.5rem;
	text-align: center;
	border-radius: 2px;
}
.mef-industry-card__industry {
	font-family: var(--wp--preset--font-family--system);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
	margin-bottom: 0.5rem;
}
.mef-industry-card__client {
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.5rem;
}

/* mef-process-strip — 4 steps in a row */
.mef-process-strip__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2rem;
	counter-reset: process-step;
}
.mef-process-step {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	padding: 2rem 1.5rem;
	border-radius: 2px;
	position: relative;
	counter-increment: process-step;
}
.mef-process-step::before {
	content: counter(process-step, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--display);
	font-size: 56px;
	font-weight: 400;
	color: var(--wp--preset--color--green);
	line-height: 1;
	display: block;
	margin-bottom: 1rem;
}

/* mef-mara-story — full-width case study with side-mounted text + video */
.mef-mara-story {
	background: var(--wp--preset--color--bg-soft);
}
.mef-mara-story__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}
@media (max-width: 900px) {
	.mef-mara-story__inner { grid-template-columns: 1fr; }
}


/* === 6. Mobile tuning ====================================== */

@media (max-width: 768px) {
	.rfm-video-hero--fullbleed { min-height: 76vh; }
	.rfm-video-hero__headline { font-size: clamp(40px, 12vw, 64px) !important; }
	.mef-industry-grid__cards { grid-template-columns: 1fr 1fr; gap: 1rem; }
	.mef-industry-card { padding: 1.25rem 1rem; }
	.mef-industry-card__client { font-size: 16px; }
	.mef-process-strip__steps { grid-template-columns: 1fr 1fr; gap: 1rem; }
	.mef-process-step { padding: 1.25rem 1rem; }
	.mef-process-step::before { font-size: 40px; }
}

/* Reduced motion — lift hover transitions */
@media (prefers-reduced-motion: reduce) {
	.rfm-testimonial-card__player,
	.mef-industry-card,
	.mef-process-step {
		transition: none;
	}
}

/* ============================================================
 * v2.0.2 — MEF Header / Footer + Oswald breathing room
 * ============================================================ */

/* --- Site header (overrides parent's RFM header) ------------ */
.mef-site-header {
	background: var(--wp--preset--color--bg, #FAFAF7);
	border-bottom: 1px solid var(--wp--preset--color--line, #E5E5E5);
	position: relative;
	z-index: 100;
}
.mef-wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 3vw, 2rem);
}
.mef-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 0;
	gap: 1.5rem;
}
.mef-brand {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink, #0A0A0A);
	text-decoration: none;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.mef-brand-mark {
	color: var(--wp--preset--color--green, #D7263D);
	font-size: 0.85em;
}
.mef-nav-menu {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.mef-nav-links {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.5rem;
}
.mef-nav-links a {
	color: var(--wp--preset--color--ink-2, #1F1F1F);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 0.01em;
}
.mef-nav-links a:hover {
	color: var(--wp--preset--color--green, #D7263D);
}
.mef-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.7rem 1.1rem;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 2px;
	letter-spacing: 0.02em;
	border: 2px solid transparent;
}
.mef-btn-phone {
	border-color: var(--wp--preset--color--ink, #0A0A0A);
	color: var(--wp--preset--color--ink, #0A0A0A);
	background: transparent;
}
.mef-btn-phone:hover {
	background: var(--wp--preset--color--ink, #0A0A0A);
	color: var(--wp--preset--color--bg, #FAFAF7);
}
.mef-btn-primary {
	background: var(--wp--preset--color--green, #D7263D);
	color: var(--wp--preset--color--bg, #FAFAF7);
	border-color: var(--wp--preset--color--green, #D7263D);
}
.mef-btn-primary:hover {
	background: var(--wp--preset--color--green-dark, #A81C2E);
	border-color: var(--wp--preset--color--green-dark, #A81C2E);
}
/* mobile nav toggle */
.mef-nav-toggle-input { display: none; }
.mef-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 28px;
	height: 22px;
	cursor: pointer;
}
.mef-nav-toggle-bar {
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--ink, #0A0A0A);
	border-radius: 2px;
	transition: transform 0.18s ease;
}
@media (max-width: 860px) {
	.mef-nav-toggle { display: flex; order: 2; }
	.mef-nav-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--wp--preset--color--bg, #FAFAF7);
		border-bottom: 1px solid var(--wp--preset--color--line, #E5E5E5);
		flex-direction: column;
		align-items: stretch;
		padding: 1rem;
		gap: 1rem;
	}
	.mef-nav-toggle-input:checked ~ .mef-nav-menu {
		display: flex;
	}
	.mef-nav-links {
		flex-direction: column;
		gap: 0.5rem;
	}
	.mef-nav-links a {
		display: block;
		padding: 0.6rem 0;
		font-size: 17px;
	}
	.mef-btn { justify-content: center; }
}

/* --- Site footer -------------------------------------------- */
.mef-site-footer {
	background: var(--wp--preset--color--ink, #0A0A0A);
	color: var(--wp--preset--color--bg, #FAFAF7);
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
	margin-top: clamp(4rem, 8vw, 6rem);
}
.mef-site-footer .mef-wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 3vw, 2rem);
}
.mef-foot-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.mef-foot-brand .mef-brand {
	color: var(--wp--preset--color--bg, #FAFAF7);
	margin: 0 0 1rem;
}
.mef-foot-brand p:last-of-type {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255,255,255,0.7);
	max-width: 38ch;
}
.mef-foot-heading {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--green, #D7263D);
	margin: 0 0 1rem;
}
.mef-foot-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.mef-foot-nav a {
	color: rgba(255,255,255,0.85);
	text-decoration: none;
	font-size: 14px;
}
.mef-foot-nav a:hover {
	color: var(--wp--preset--color--green, #D7263D);
}
.mef-foot-col .rfm-nap-block {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255,255,255,0.85);
}
.mef-foot-col .rfm-nap-name {
	color: var(--wp--preset--color--bg, #FAFAF7);
	font-size: 16px;
}
.mef-foot-col .rfm-nap-phone {
	color: var(--wp--preset--color--green, #D7263D);
}
.mef-foot-kicker {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(20px, 2.5vw, 28px);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	margin: clamp(2rem, 4vw, 3rem) 0 0.5rem;
	border-top: 1px solid rgba(255,255,255,0.15);
	padding-top: clamp(2rem, 4vw, 3rem);
}
.mef-foot-copy {
	font-size: 13px;
	color: rgba(255,255,255,0.5);
	margin: 0;
}
@media (max-width: 768px) {
	.mef-foot-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* --- Oswald breathing room (was Anton, too tight) ---- */
/* Oswald is wide and heavy by default, but we still tune line-height
   and letter-spacing so headings don't feel cramped at section sizes. */
h1, h2, .rfm-display-headline, .rfm-video-hero__headline {
	line-height: 1.1;
	letter-spacing: -0.01em;
	word-spacing: 0.02em;
}
h1 { line-height: 1.05; }
.rfm-video-hero__headline { line-height: 1.05; }

/* Ensure section H2s have enough gap above + below for breathing */
.rfm-featured-reel h2,
.rfm-testimonial-strip h2,
.rfm-faq-accordion h2,
.mef-industry-grid h2,
.mef-process-strip h2 {
	margin-bottom: clamp(2rem, 4vw, 3rem);
	line-height: 1.1;
}


/* ============================================================
 * v2.0.3 — Premium tuning
 *  - Oswald 700 instead of Archivo Black (less chunky, more editorial)
 *  - Tighter image placeholders (less aggressive checkerboard, max-width)
 *  - More breathing room in section padding
 *  - Refined details: small-caps eyebrows, hairline dividers
 *  - Calmer red usage
 * ============================================================ */

/* --- Refined image placeholder (less aggressive) ------------ */
.rfm-img-placeholder {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	background-color: #f8f8f5;
	background-image:
		linear-gradient(45deg, #ececea 25%, transparent 25%),
		linear-gradient(-45deg, #ececea 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #ececea 75%),
		linear-gradient(-45deg, transparent 75%, #ececea 75%);
	background-size: 18px 18px;
	background-position: 0 0, 0 9px, 9px -9px, -9px 0px;
	border: 1px dashed #c8c8c4;
}
.rfm-img-placeholder::before {
	content: 'Image';
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	background: rgba(255,255,255,0.92);
	padding: 0.35rem 0.9rem;
	border: 1px solid #c8c8c4;
}
.rfm-img-placeholder[data-spec]::after {
	font-size: 10px;
	background: rgba(0,0,0,0.55);
	padding: 0.3rem 0.5rem;
}

/* Industry grid placeholder — much smaller (logo-sized) */
.mef-industry-card .rfm-img-placeholder {
	max-width: 120px;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	margin: 0 auto 1rem;
}
.mef-industry-card .rfm-img-placeholder::before {
	content: 'Logo';
	font-size: 9px;
	padding: 0.2rem 0.5rem;
}

/* --- Oswald display tuning (different from Archivo Black) ---- */
/* Oswald is semi-condensed and reads more editorial. Open up tracking
   slightly so it doesn't squeeze the way Archivo Black did. */
h1, h2,
.rfm-display-headline,
.rfm-video-hero__headline {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.06;
	text-transform: uppercase;
}
h1 { letter-spacing: -0.005em; line-height: 1.04; }
.rfm-video-hero__headline { letter-spacing: -0.005em; line-height: 1.04; }

/* --- More breathing room (premium spacing scale) ------------ */
.rfm-featured-reel,
.rfm-testimonial-strip,
.rfm-faq-accordion,
.mef-industry-grid,
.mef-process-strip,
.mef-mara-story {
	padding-top: clamp(5rem, 10vw, 10rem);
	padding-bottom: clamp(5rem, 10vw, 10rem);
}

/* Hairline divider above section H2s (editorial register) */
.rfm-featured-reel h2::before,
.rfm-testimonial-strip h2::before,
.mef-industry-grid h2::before,
.mef-process-strip h2::before,
.mef-mara-story h2::before {
	content: '';
	display: block;
	width: 56px;
	height: 1px;
	background: var(--wp--preset--color--green, #D7263D);
	margin: 0 auto 2rem;
}

/* Center-align the hairline-leading section H2s */
.rfm-featured-reel h2,
.rfm-testimonial-strip h2,
.mef-industry-grid h2,
.mef-process-strip h2 {
	text-align: center;
}

/* --- Refined eyebrow (small caps) --------------------------- */
.rfm-eyebrow {
	font-family: var(--wp--preset--font-family--system);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green, #D7263D);
	margin-bottom: 0.75rem;
}

/* --- Calmer red usage ---------------------------------------- */
/* Buttons stay red (CTAs need it). But H2 hairline dividers + eyebrows
   are the only OTHER red touchpoints. Strip red from card industry tags. */
.mef-industry-card__industry,
.rfm-industry-showcase__industry,
.rfm-testimonial-card__industry {
	color: var(--wp--preset--color--ink-3, #5A5A5A);
	font-size: 11px;
	letter-spacing: 0.22em;
}

/* --- Section heading sizing (Oswald wider lines) ------------- */
.rfm-featured-reel h2,
.rfm-testimonial-strip h2,
.rfm-faq-accordion h2,
.mef-industry-grid h2,
.mef-process-strip h2 {
	font-size: clamp(28px, 4vw, 44px);
}


/* ============================================================
 * v2.0.4 — Copy-first hero, mobile-first tuning
 *  - .mef-hero-copy (replaces fullbleed video hero on most pages)
 *  - Stacked CTA buttons on mobile
 *  - Bigger touch targets
 *  - Headline scale tuned for narrow viewports
 *  - Tap-to-unmute hint visual
 * ============================================================ */

/* --- Copy-first hero (replaces fullbleed video hero) -------- */
.mef-hero-copy {
	border-bottom: 1px solid var(--wp--preset--color--line, #E5E5E5);
}
.mef-hero-copy .rfm-eyebrow {
	margin-bottom: 1.25rem;
}
.mef-hero-copy h1 {
	margin: 0;
}

/* Buttons in hero: side-by-side on desktop, stacked on mobile */
.mef-hero-copy .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.mef-hero-copy .wp-block-button__link {
	padding: 1.05rem 1.7rem;
	font-size: 16px;
	letter-spacing: 0.01em;
}
.mef-hero-copy .is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--ink, #0A0A0A) !important;
	border: 2px solid var(--wp--preset--color--ink, #0A0A0A);
}
.mef-hero-copy .is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink, #0A0A0A) !important;
	color: var(--wp--preset--color--bg, #FAFAF7) !important;
}

@media (max-width: 600px) {
	.mef-hero-copy .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
	}
	.mef-hero-copy .wp-block-button {
		width: 100%;
	}
	.mef-hero-copy .wp-block-button__link {
		display: block;
		text-align: center;
		padding: 1.15rem 1rem;
		font-size: 15px;
	}
}

/* --- Mobile general tightening ----------------------------- */
@media (max-width: 600px) {
	/* Headline ceiling for very narrow screens */
	.mef-hero-copy h1 {
		font-size: clamp(36px, 11vw, 56px) !important;
		line-height: 1.04 !important;
		letter-spacing: -0.01em !important;
	}
	.rfm-video-hero__headline {
		font-size: clamp(36px, 11vw, 56px) !important;
	}

	/* Subhead readability */
	.mef-hero-copy p[style*="max-width:720px"] {
		font-size: 17px !important;
		line-height: 1.55 !important;
	}

	/* Section H2s */
	.rfm-featured-reel h2,
	.rfm-testimonial-strip h2,
	.rfm-faq-accordion h2,
	.mef-industry-grid h2,
	.mef-process-strip h2 {
		font-size: clamp(26px, 7vw, 36px) !important;
		line-height: 1.1 !important;
	}

	/* Header padding tightening */
	.mef-nav { padding: 0.85rem 0 !important; }
	.mef-brand { font-size: 18px !important; }

	/* Body line height for legibility */
	body, p {
		line-height: 1.6 !important;
	}

	/* Bigger touch targets in nav */
	.mef-nav-links a {
		padding: 0.8rem 0 !important;
		font-size: 17px !important;
	}

	/* Hero padding tighter on mobile */
	.mef-hero-copy {
		padding-top: clamp(4rem, 14vw, 6rem) !important;
		padding-bottom: clamp(3rem, 8vw, 5rem) !important;
	}
}

/* --- Tap-to-unmute affordance (subtle UI hint) ------------- */
.rfm-video-embed::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.rfm-video-embed:hover::after {
	opacity: 0.6;
}

/* --- Tighten Selected Work caption ------------------------ */
.rfm-video-embed + p {
	font-style: italic;
}


/* ============================================================
 * v2.0.5 — Padding, video container, grid stacking, FAQ, scroll-to-top
 *  Fixes from live audit 2026-05-08:
 *  - Hero text was butting up to viewport edge (16px padding too tight)
 *  - "See the Work" iframe was 2000+px wide x 1100+px tall (no constraint)
 *  - Testimonial cards rendering as display:block instead of grid
 *  - H1 rendering at 36px on desktop (too small for hero)
 * ============================================================ */

/* --- Hero padding override (var spacing was 16px, way too tight) --- */
.mef-hero-copy {
	padding-left: clamp(1.5rem, 5vw, 5rem) !important;
	padding-right: clamp(1.5rem, 5vw, 5rem) !important;
	padding-top: clamp(5rem, 10vw, 9rem) !important;
	padding-bottom: clamp(3.5rem, 7vw, 6rem) !important;
}

/* Constrain hero content max-width on ultrawide screens */
.mef-hero-copy > .rfm-eyebrow,
.mef-hero-copy > h1,
.mef-hero-copy > p,
.mef-hero-copy > .wp-block-buttons {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}
.mef-hero-copy > p {
	max-width: 720px;
	margin-left: 0;
}

/* H1 ceiling fix — Oswald rendered too small */
.mef-hero-copy h1 {
	font-size: clamp(40px, 7vw, 88px) !important;
	line-height: 1.04 !important;
}

/* --- Video embed container constraint (was unconstrained, full viewport) --- */
.rfm-video-embed {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
/* Featured-reel inside wide groups */
.wp-block-group .rfm-video-embed {
	max-width: 100%;
}
/* But the homepage Selected Work block wraps with align:wide which goes to 1320px */
.alignwide .rfm-video-embed {
	max-width: 1100px;
}

/* --- Testimonial cards grid stacking (was display:block) --- */
.rfm-testimonial-strip__cards,
.wp-block-columns.rfm-testimonial-strip__cards {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
@media (max-width: 900px) {
	.rfm-testimonial-strip__cards,
	.wp-block-columns.rfm-testimonial-strip__cards {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}
.rfm-testimonial-strip__cards .wp-block-column,
.rfm-testimonial-strip__cards .rfm-testimonial-card {
	width: 100%;
	max-width: 100%;
}

/* --- Industry grid stacking enforced --- */
.mef-industry-grid__cards,
.rfm-industry-showcase__cards {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.25rem;
}
@media (max-width: 600px) {
	.mef-industry-grid__cards,
	.rfm-industry-showcase__cards {
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
	}
}

/* --- Process strip grid enforced --- */
.mef-process-strip__steps {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
@media (max-width: 900px) {
	.mef-process-strip__steps {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 500px) {
	.mef-process-strip__steps {
		grid-template-columns: 1fr;
	}
}

/* --- Inner section padding for premium breathing room on wide screens --- */
.rfm-featured-reel,
.rfm-testimonial-strip,
.rfm-faq-accordion,
.mef-industry-grid,
.mef-process-strip,
.mef-mara-story {
	padding-left: clamp(1.5rem, 5vw, 5rem);
	padding-right: clamp(1.5rem, 5vw, 5rem);
}

/* Constrain content inside aligned-wide sections */
.alignwide,
.alignfull > .wp-block-group:not(.alignfull):not(.alignwide) {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
}

/* --- FAQ Accordion premium styling --- */
.rfm-faq-list {
	max-width: 820px;
	margin: 0 auto;
}
.rfm-faq-item {
	border-top: 1px solid var(--wp--preset--color--line, #E5E5E5);
	padding: 1.5rem 0.5rem;
	transition: background 0.2s ease;
}
.rfm-faq-item:hover {
	background: rgba(215, 38, 61, 0.02);
}
.rfm-faq-item summary {
	cursor: pointer;
	font-size: clamp(17px, 2vw, 20px);
	font-weight: 700;
	font-family: var(--wp--preset--font-family--system);
	line-height: 1.4;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	color: var(--wp--preset--color--ink, #0A0A0A);
	padding: 0.25rem 0;
}
.rfm-faq-item summary::-webkit-details-marker { display: none; }
.rfm-faq-item summary::after {
	content: '';
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D7263D' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.25s ease;
}
.rfm-faq-item[open] summary::after {
	transform: rotate(180deg);
}
.rfm-faq-item[open] summary {
	color: var(--wp--preset--color--green, #D7263D);
}
.rfm-faq-answer {
	padding: 0.75rem 0 0.25rem;
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.65;
	color: var(--wp--preset--color--ink-2, #1F1F1F);
	max-width: 70ch;
	animation: rfm-faq-slide 0.25s ease-out;
}
@keyframes rfm-faq-slide {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.rfm-faq-answer p { margin: 0 0 0.6rem; }
.rfm-faq-answer p:last-child { margin-bottom: 0; }

/* --- Scroll-to-top button --- */
.mef-scroll-top {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1.5rem, 4vw, 2rem);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink, #0A0A0A);
	color: var(--wp--preset--color--bg, #FAFAF7);
	border: 2px solid var(--wp--preset--color--green, #D7263D);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
	z-index: 999;
	box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.mef-scroll-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.mef-scroll-top:hover {
	background: var(--wp--preset--color--green, #D7263D);
}
.mef-scroll-top svg {
	width: 20px;
	height: 20px;
}
@media (max-width: 600px) {
	.mef-scroll-top { width: 44px; height: 44px; }
	/* Don't overlap sticky CTA bar if present */
	body.has-sticky-cta .mef-scroll-top { bottom: 5rem; }
}

/* ============================================================
 * v2.0.6 — YouTube facade pattern (perf-friendly video embed)
 *  Replaces autoplay iframes with poster + play overlay.
 *  Iframe loads on click (testimonials/Mara) or on viewport
 *  intersection (Selected Work hero).
 *  Cuts initial page weight from ~3MB to ~80KB per video.
 * ============================================================ */

.rfm-video-facade {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	background: #0A0A0A;
	border-radius: 2px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rfm-video-facade:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(0,0,0,0.18);
}
.rfm-video-facade__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: filter 0.2s ease, transform 0.3s ease;
}
.rfm-video-facade:hover .rfm-video-facade__poster {
	filter: brightness(0.85);
	transform: scale(1.02);
}
.rfm-video-facade__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	width: 96px;
	height: 68px;
	z-index: 2;
	transition: transform 0.18s ease, opacity 0.18s ease;
}
.rfm-video-facade:hover .rfm-video-facade__play {
	transform: translate(-50%, -50%) scale(1.08);
}
.rfm-video-facade__play svg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 2px 12px rgba(0,0,0,0.4));
}
.rfm-video-facade__play-bg {
	transition: fill 0.18s ease, opacity 0.18s ease;
}
.rfm-video-facade:hover .rfm-video-facade__play-bg {
	fill: #A81C2E;
}
/* Loaded state — iframe takes over */
.rfm-video-facade.is-loaded {
	cursor: default;
}
.rfm-video-facade.is-loaded:hover {
	transform: none;
	box-shadow: none;
}
.rfm-video-facade iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Smaller play button on testimonial cards */
.rfm-testimonial-strip__cards .rfm-video-facade__play {
	width: 64px;
	height: 46px;
}
/* Tiny play button on phones */
@media (max-width: 600px) {
	.rfm-video-facade__play {
		width: 72px;
		height: 51px;
	}
	.rfm-testimonial-strip__cards .rfm-video-facade__play {
		width: 54px;
		height: 38px;
	}
}

/* Optional: caption hint below facade */
.rfm-video-facade-caption {
	font-size: 13px;
	color: var(--wp--preset--color--ink-3, #5A5A5A);
	margin-top: 0.5rem;
	font-style: italic;
	text-align: center;
}

/* ============================================================
 * v2.0.7 — Hero alignment fix (padding-trick) + FAQ
 *  Diagnosis from live audit: hero children were on different
 *  max-widths with auto margins, so eyebrow at x=377, subhead
 *  at x=80, buttons at x=357 — three different alignments.
 *  Fix: parent padding does the constraining, all children
 *  naturally fill the inner content area and align identically.
 * ============================================================ */

/* --- Override v2.0.5 per-child max-width hack ----------------- */
.mef-hero-copy {
	/* Padding grows to absorb extra space on wide screens.
	   max() picks whichever is larger: minimum side-padding OR
	   the calc that constrains content to 1280px. */
	padding-left: max(clamp(1.5rem, 5vw, 5rem), calc((100% - 1280px) / 2)) !important;
	padding-right: max(clamp(1.5rem, 5vw, 5rem), calc((100% - 1280px) / 2)) !important;
}
.mef-hero-copy > .rfm-eyebrow,
.mef-hero-copy > h1,
.mef-hero-copy > p,
.mef-hero-copy > .wp-block-buttons {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Subhead keeps its readability cap, but flush-left aligned with H1 */
.mef-hero-copy > p {
	max-width: 720px !important;
}
/* Hero buttons: ensure buttons block doesn't take wp-block-buttons inherited width */
.mef-hero-copy .wp-block-buttons {
	width: 100%;
}

/* --- FAQ CSS: extend to wp:details core block ----------------- */
/* The agent used WP's native wp:details block on contact + service pages,
   which renders as <details class="wp-block-details"> instead of our
   custom .rfm-faq-item class. Style both. */
.rfm-faq-accordion .wp-block-details,
details.rfm-faq-item,
details.wp-block-details {
	border-top: 1px solid var(--wp--preset--color--line, #E5E5E5);
	padding: 1.5rem 0.5rem;
	transition: background 0.2s ease;
	margin: 0;
	max-width: 820px;
}
.rfm-faq-accordion .wp-block-details:hover,
details.rfm-faq-item:hover,
details.wp-block-details:hover {
	background: rgba(215, 38, 61, 0.02);
}
/* Last item gets a closing border too */
.rfm-faq-accordion .wp-block-details:last-of-type,
details.rfm-faq-item:last-of-type,
details.wp-block-details:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--line, #E5E5E5);
}
.rfm-faq-accordion .wp-block-details > summary,
details.rfm-faq-item > summary,
details.wp-block-details > summary {
	cursor: pointer;
	font-size: clamp(17px, 2vw, 20px);
	font-weight: 700;
	font-family: var(--wp--preset--font-family--system);
	line-height: 1.4;
	list-style: none !important;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	color: var(--wp--preset--color--ink, #0A0A0A);
	padding: 0.25rem 0;
}
.rfm-faq-accordion .wp-block-details > summary::-webkit-details-marker,
details.rfm-faq-item > summary::-webkit-details-marker,
details.wp-block-details > summary::-webkit-details-marker { display: none !important; }
.rfm-faq-accordion .wp-block-details > summary::marker,
details.rfm-faq-item > summary::marker,
details.wp-block-details > summary::marker { content: ''; display: none; }
.rfm-faq-accordion .wp-block-details > summary::after,
details.rfm-faq-item > summary::after,
details.wp-block-details > summary::after {
	content: '';
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D7263D' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.25s ease;
}
.rfm-faq-accordion .wp-block-details[open] > summary::after,
details.rfm-faq-item[open] > summary::after,
details.wp-block-details[open] > summary::after {
	transform: rotate(180deg);
}
.rfm-faq-accordion .wp-block-details[open] > summary,
details.rfm-faq-item[open] > summary,
details.wp-block-details[open] > summary {
	color: var(--wp--preset--color--green, #D7263D);
}
.rfm-faq-accordion .wp-block-details > *:not(summary),
details.rfm-faq-item > *:not(summary),
details.wp-block-details > *:not(summary) {
	padding: 0.75rem 0 0.25rem;
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.65;
	color: var(--wp--preset--color--ink-2, #1F1F1F);
	max-width: 70ch;
	margin: 0;
}
.rfm-faq-accordion .wp-block-details[open] > *:not(summary),
details.rfm-faq-item[open] > *:not(summary),
details.wp-block-details[open] > *:not(summary) {
	animation: rfm-faq-slide 0.25s ease-out;
}

/* ============================================================
 * v2.0.8 — UNIFIED SECTION SYSTEM + MOBILE OVERFLOW FIXES
 *
 *   Diagnosis: hero content was at x=377 (alignfull, padding-trick
 *   to 1280px inner), every other alignwide section at x=437
 *   (max-width 1320px with 80px padding = 1160px content area).
 *   Result: 60px misalignment between hero and below sections.
 *
 *   Plus mobile: "Let's talk. Tell me what you're trying to do."
 *   button overflowing viewport, FAQ heading flush-left with no
 *   padding, scroll-to-top button off-screen because of overflow.
 *
 *   Fix: every section (alignfull AND alignwide) shares the SAME
 *   inner content area of 1160px via padding-trick. Card grids
 *   constrained and centered. Buttons clamp to 100% width on mobile.
 *   Body overflow-x:hidden as safety net.
 * ============================================================ */

/* === 0. Critical: prevent horizontal page scroll on mobile === */
html, body {
	overflow-x: hidden !important;
	max-width: 100vw;
}

/* === 1. UNIVERSAL SECTION ALIGNMENT (one rule, all sections) === */
/* Hero alignfull: padding-trick gives 1160px inner content area */
.mef-hero-copy,
.wp-block-group.alignfull.has-bg-color,
.wp-block-group.alignfull.has-ink-background-color,
.wp-block-group.alignfull.has-bg-soft-background-color {
	padding-left: max(clamp(1.25rem, 5vw, 5rem), calc((100% - 1160px) / 2)) !important;
	padding-right: max(clamp(1.25rem, 5vw, 5rem), calc((100% - 1160px) / 2)) !important;
	box-sizing: border-box;
}
/* All children inside a hero/alignfull span flush to inner edge, no extra constraint */
.mef-hero-copy > .rfm-eyebrow,
.mef-hero-copy > h1,
.mef-hero-copy > p,
.mef-hero-copy > .wp-block-buttons {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100%;
}
.mef-hero-copy > p {
	max-width: 720px !important;
}

/* Alignwide sections: ensure inner content area aligns to 1160px content edge */
.wp-block-group.alignwide {
	max-width: 1160px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: calc(100% - clamp(2.5rem, 10vw, 10rem)) !important;
}

/* Inner section blocks (process-strip, industry-grid, etc.) — even when
   not alignwide, they should still flow within the 1160px content rail */
.mef-process-strip,
.mef-industry-grid,
.mef-mara-story,
.rfm-featured-reel,
.rfm-testimonial-strip,
.rfm-faq-accordion {
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
	width: calc(100% - clamp(2.5rem, 10vw, 10rem));
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

/* === 2. SECTION VERTICAL RHYTHM (tighter than v2.0.7) === */
.mef-process-strip,
.mef-industry-grid,
.mef-mara-story,
.rfm-featured-reel,
.rfm-testimonial-strip,
.rfm-faq-accordion {
	padding-top: clamp(3.5rem, 7vw, 7rem) !important;
	padding-bottom: clamp(3.5rem, 7vw, 7rem) !important;
}

/* === 3. CARD GRIDS — constrain + center === */
.mef-process-strip__steps,
.mef-industry-grid__cards,
.rfm-testimonial-strip__cards,
.rfm-industry-showcase__cards {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

/* Process strip — 4 columns desktop, 2 tablet, 1 phone */
.mef-process-strip__steps {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: stretch !important;
}
@media (max-width: 900px) {
	.mef-process-strip__steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
	.mef-process-strip__steps { grid-template-columns: 1fr; gap: 0.75rem; }
}
.mef-process-step {
	display: flex;
	flex-direction: column;
	height: 100%;  /* equal heights — fixes step 01 wrapping issue */
}

/* Industry grid — 5 columns desktop, 1 column phone (Eddie's request:
   stack vertically on mobile, not 2-col which was tight) */
.mef-industry-grid__cards {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(0.75rem, 1.5vw, 1.5rem);
	align-items: stretch;
}
@media (max-width: 1100px) {
	.mef-industry-grid__cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
	.mef-industry-grid__cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.mef-industry-grid__cards { grid-template-columns: 1fr; }
}
.mef-industry-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Testimonial cards — 3 cols desktop, 1 col below 900px */
.rfm-testimonial-strip__cards {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 2rem);
	align-items: stretch;
}
@media (max-width: 900px) {
	.rfm-testimonial-strip__cards { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* === 4. BUTTONS — never overflow viewport === */
.wp-block-button,
.wp-block-button .wp-block-button__link {
	max-width: 100% !important;
	box-sizing: border-box;
}
.wp-block-button .wp-block-button__link {
	white-space: normal !important;
	word-wrap: break-word;
	hyphens: auto;
}
@media (max-width: 600px) {
	.wp-block-buttons {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.6rem !important;
		width: 100%;
	}
	.wp-block-button {
		width: 100% !important;
	}
	.wp-block-button .wp-block-button__link {
		display: block;
		text-align: center;
		font-size: 14px !important;
		padding: 0.95rem 0.75rem !important;
		line-height: 1.3;
	}
}

/* === 5. DARK CTA — center button always === */
.has-ink-background-color .wp-block-buttons,
.wp-block-group.alignfull.has-ink-background-color .wp-block-buttons {
	display: flex !important;
	justify-content: center ;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* === 6. SUBTLE GRADIENT BACKGROUND (FAFAF7 -> F7F7F4) === */
/* Apply to alternating sections for visual rhythm. Body bg stays #FAFAF7. */
.mef-process-strip,
.mef-mara-story,
.rfm-faq-accordion {
	background: linear-gradient(180deg, #FAFAF7 0%, #F5F5F0 100%);
	border-radius: 4px;
}

/* === 7. SECTION HEADING ALIGNMENT (consistent: centered eyebrows + H2s) === */
.mef-process-strip > .rfm-eyebrow,
.mef-industry-grid > .rfm-eyebrow,
.rfm-featured-reel > .rfm-eyebrow,
.rfm-testimonial-strip > .rfm-eyebrow {
	text-align: center ;
}
.mef-process-strip > h2,
.mef-industry-grid > h2,
.rfm-featured-reel > h2,
.rfm-testimonial-strip > h2,
.rfm-faq-accordion > h2 {
	text-align: center ;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* === 8. FAQ heading flush-left fix on contact + service pages === */
/* The contact-page FAQ heading rendered at viewport edge because the
   wrapping group lacked alignwide. Constrain ALL h1/h2 in body content. */
.entry-content > h1,
.entry-content > h2,
.entry-content > .wp-block-heading {
	max-width: 1160px;
	margin-left: auto !important;
	margin-right: auto !important;
	width: calc(100% - clamp(2.5rem, 10vw, 10rem));
	padding-left: 0;
	padding-right: 0;
}
/* Catch the orphan FREQUENTLY ASKED QUESTIONS heading on contact page */
body .wp-site-blocks > .wp-block-heading,
.wp-site-blocks > h1,
.wp-site-blocks > h2 {
	max-width: 1160px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1.25rem, 5vw, 5rem);
	padding-right: clamp(1.25rem, 5vw, 5rem);
	width: 100%;
	box-sizing: border-box;
}

/* === 9. FAQ ACCORDION — final polish === */
.rfm-faq-accordion {
	padding-top: clamp(3rem, 6vw, 5rem) !important;
	padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}
.rfm-faq-list {
	max-width: 820px;
	margin: 0 auto;
}
.rfm-faq-item,
details.wp-block-details {
	transition: background 0.2s ease, padding 0.2s ease;
}
.rfm-faq-item:hover,
details.wp-block-details:hover {
	background: rgba(215, 38, 61, 0.025);
}
.rfm-faq-item[open],
details.wp-block-details[open] {
	background: rgba(215, 38, 61, 0.035);
}

/* === 10. MOBILE: tighten everything === */
@media (max-width: 600px) {
	/* Reduce hero padding on phones */
	.mef-hero-copy {
		padding-top: clamp(3rem, 12vw, 5rem) !important;
		padding-bottom: clamp(2.5rem, 8vw, 4rem) !important;
	}
	.mef-hero-copy h1 {
		font-size: clamp(34px, 11vw, 52px) !important;
		line-height: 1.05 !important;
	}
	.mef-hero-copy p {
		font-size: 16px !important;
	}

	/* Section padding */
	.mef-process-strip,
	.mef-industry-grid,
	.mef-mara-story,
	.rfm-featured-reel,
	.rfm-testimonial-strip,
	.rfm-faq-accordion {
		padding-top: clamp(2.5rem, 8vw, 4rem) !important;
		padding-bottom: clamp(2.5rem, 8vw, 4rem) !important;
		width: calc(100% - 2.5rem) !important;
	}

	/* Section H2s smaller on mobile */
	.mef-process-strip h2,
	.mef-industry-grid h2,
	.rfm-featured-reel h2,
	.rfm-testimonial-strip h2,
	.rfm-faq-accordion h2,
	.mef-mara-story h2 {
		font-size: clamp(24px, 7.5vw, 34px) !important;
		line-height: 1.1 !important;
	}

	/* Mara story stack */
	.mef-mara-story__inner {
		grid-template-columns: 1fr !important;
		gap: 1.5rem;
	}

	/* Testimonial card text smaller */
	.rfm-testimonial-card p {
		font-size: 14px !important;
		line-height: 1.55 !important;
	}

	/* FAQ tighter */
	.rfm-faq-item,
	details.wp-block-details {
		padding: 1.1rem 0.25rem !important;
	}
	.rfm-faq-item summary,
	details.wp-block-details > summary {
		font-size: 16px !important;
	}

	/* Industry card padding tighter */
	.mef-industry-card {
		padding: 1.1rem 0.85rem !important;
	}
	.mef-industry-card__industry { font-size: 11px !important; }
	.mef-industry-card__client { font-size: 15px !important; }
	.mef-industry-card p { font-size: 13px !important; }
}

/* === 11. Scroll-to-top safety: stay inside viewport === */
.mef-scroll-top {
	right: max(1rem, env(safe-area-inset-right, 1rem)) !important;
	bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem)) !important;
}

/* ============================================================
 * v2.0.9 — Header alignment + Typography + Universal alignment
 * ============================================================ */

/* === 1. Header rail aligned to body content (1160px) ======== */
.mef-site-header .mef-wrap,
.mef-site-header > .mef-nav,
.mef-site-footer .mef-wrap {
	max-width: 1160px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: clamp(1.25rem, 5vw, 5rem) !important;
	padding-right: clamp(1.25rem, 5vw, 5rem) !important;
	box-sizing: border-box;
	width: 100%;
}

/* === 2. Inter Tight as body font (more modern + crisp) ====== */
body,
p, li, td, th, blockquote, figcaption,
.wp-block-paragraph,
.rfm-faq-answer p,
.rfm-faq-item p {
	font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-feature-settings: 'ss01', 'cv01', 'cv11';  /* refined letterforms */
}
.mef-nav-links a,
.mef-foot-nav a,
.wp-block-button__link,
.rfm-eyebrow,
.mef-foot-heading {
	font-family: 'Inter Tight', 'Inter', sans-serif !important;
}

/* === 3. Bigger H2 punch + tighter tracking ================== */
.mef-process-strip h2,
.mef-industry-grid h2,
.rfm-featured-reel h2,
.rfm-testimonial-strip h2,
.rfm-faq-accordion h2,
.mef-mara-story h2 {
	font-size: clamp(34px, 5vw, 56px) !important;
	letter-spacing: -0.015em !important;
	line-height: 1.04 !important;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}
.mef-hero-copy h1 {
	letter-spacing: -0.02em !important;
}

/* === 4. Body paragraph breathing ============================ */
.mef-process-strip p,
.mef-industry-grid p,
.rfm-featured-reel p,
.rfm-testimonial-strip p,
.rfm-faq-accordion p,
.mef-mara-story p,
.entry-content p,
.wp-site-blocks p {
	line-height: 1.7;
	margin-bottom: 1.25rem;
}
/* Larger body text for premium feel */
.entry-content p:not(.rfm-eyebrow):not([class*="footnote"]),
.wp-site-blocks > .wp-block-group p:not(.rfm-eyebrow) {
	font-size: clamp(16px, 1.4vw, 18px);
}

/* === 5. UNIVERSAL ALIGNMENT — single source of truth ======== */
/* Default: ALL eyebrows centered. */
.rfm-eyebrow {
	text-align: center ;
	display: block;
	width: 100%;
	max-width: none;
}

/* Default: ALL section H2s centered. */
.wp-block-group > h2:first-of-type,
.wp-block-group > .wp-block-heading[class*="heading"]:first-of-type,
.mef-process-strip h2,
.mef-industry-grid h2,
.rfm-featured-reel h2,
.rfm-testimonial-strip h2,
.rfm-faq-accordion h2 {
	text-align: center ;
}

/* EXCEPTION: Mara story uses asymmetric layout (video left, copy right).
   The eyebrow + H2 stay left-aligned within their own column. */
.mef-mara-story .rfm-eyebrow,
.mef-mara-story h2,
.mef-mara-story__copy .rfm-eyebrow,
.mef-mara-story__copy h2 {
	text-align: left ;
}
@media (max-width: 900px) {
	/* When stacked on mobile, Mara eyebrow + H2 can also center */
	.mef-mara-story .rfm-eyebrow,
	.mef-mara-story h2 {
		text-align: left ;
	}
}

/* EXCEPTION: Hero is also asymmetric — copy is left-aligned within
   the constrained content area, NOT centered. */
.mef-hero-copy .rfm-eyebrow,
.mef-hero-copy h1,
.mef-hero-copy > p {
	text-align: left ;
}

/* === 6. Video caption — small, centered, gray ============== */
.rfm-video-embed + p,
.rfm-video-facade + p,
.rfm-video-embed-caption,
[class*="video"] + p:not(.rfm-eyebrow):not(.has-text-color) {
	font-size: 12px !important;
	text-align: center ;
	color: #8A8A8A !important;
	font-style: italic;
	margin-top: 0.6rem !important;
	margin-bottom: 0 !important;
	letter-spacing: 0.01em;
	font-family: 'Inter Tight', sans-serif !important;
}

/* === 7. Smushed-text fix on intro sections ================== */
/* The "WHY MOST BUSINESS-OWNER VIDEO DOESN'T LAND" intro section had
   long paragraphs running too tight. More breathing room. */
.wp-site-blocks > .wp-block-group:not(.alignfull):not(.mef-hero-copy) p {
	line-height: 1.75;
	margin-bottom: 1.4rem;
	max-width: 760px;
}

/* === 8. Centered intro section content (matches the H2 above) === */
.wp-site-blocks > .wp-block-group.alignwide > p {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* === 9. Section divider hairline below H2s (already there, polish) === */
.mef-process-strip h2::before,
.mef-industry-grid h2::before,
.rfm-featured-reel h2::before,
.rfm-testimonial-strip h2::before,
.rfm-faq-accordion h2::before {
	content: '';
	display: block;
	width: 64px;
	height: 1px;
	background: var(--wp--preset--color--green, #D7263D);
	margin: 0 auto 1.5rem;
}

/* === 10. Header tightening on tablet/desktop ================ */
@media (min-width: 901px) {
	.mef-nav { padding: 1rem 0; }
	.mef-brand { font-size: 22px; }
}

/* ============================================================
 * v2.1.0 — DESIGN SYSTEM RESET (Willy's pass)
 *
 *  Philosophy:
 *   1. Editor controls the truth. CSS provides defaults, not overrides.
 *      Eddie can change alignment / colors in Gutenberg without me.
 *   2. Hero + section openers: CENTERED (matches OOPS Method, RFM rhythm).
 *   3. Body prose: LEFT-aligned (readability).
 *   4. Sections alternate light + dark for visual rhythm.
 *      To make a section dark in Gutenberg: select the Group block,
 *      set Background color = Ink. Text colors auto-flip via CSS below.
 *   5. Hairline red dividers + small caps eyebrows + Inter Tight body
 *      + Oswald display = the typographic identity.
 * ============================================================ */

/* === 1. CENTERED HERO (was left, now centered to match OOPS/RFM) === */
.mef-hero-copy {
	text-align: center;
}
.mef-hero-copy > .rfm-eyebrow,
.mef-hero-copy > h1,
.mef-hero-copy > p {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.mef-hero-copy > p {
	max-width: 720px;
}
.mef-hero-copy h1 {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
.mef-hero-copy .wp-block-buttons {
	justify-content: center;
	flex-wrap: nowrap;  /* keep buttons on one row at desktop */
}
@media (max-width: 600px) {
	.mef-hero-copy .wp-block-buttons {
		flex-wrap: wrap;  /* allow stack on phones */
	}
}

/* === 2. BIGGER H1/H2 PUNCH ============================== */
.mef-hero-copy h1 {
	font-size: clamp(48px, 9vw, 120px);
	line-height: 1.0;
	letter-spacing: -0.025em;
}
@media (max-width: 600px) {
	.mef-hero-copy h1 {
		font-size: clamp(36px, 12vw, 56px);
	}
}
.mef-process-strip h2,
.mef-industry-grid h2,
.rfm-featured-reel h2,
.rfm-testimonial-strip h2,
.rfm-faq-accordion h2,
.mef-mara-story h2,
.wp-site-blocks > .wp-block-group > h2 {
	font-size: clamp(38px, 5.5vw, 64px);
	letter-spacing: -0.02em;
	line-height: 1.02;
}

/* === 3. DARK SECTION VARIANT ============================ */
/* When Eddie sets a section's Background color to Ink in Gutenberg,
   text colors auto-flip via these rules. */
.wp-block-group.has-ink-background-color,
.mef-process-strip.has-ink-background-color,
.rfm-testimonial-strip.has-ink-background-color {
	background: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%) !important;
}
.has-ink-background-color h1,
.has-ink-background-color h2,
.has-ink-background-color h3,
.has-ink-background-color p:not(.rfm-eyebrow),
.has-ink-background-color li,
.has-ink-background-color summary {
	color: #FAFAF7 !important;
}
.has-ink-background-color .rfm-eyebrow {
	color: #D7263D !important;  /* eyebrow stays red on dark */
}
.has-ink-background-color h2::before {
	background: #D7263D !important;
}
/* Process step cards on dark bg */
.has-ink-background-color .mef-process-step,
.has-ink-background-color .mef-industry-card,
.has-ink-background-color .rfm-industry-showcase__card {
	background: rgba(255,255,255,0.04) !important;
	border: 1px solid rgba(255,255,255,0.1) !important;
}
.has-ink-background-color .mef-process-step::before {
	color: #D7263D !important;
}
.has-ink-background-color .mef-process-step h3,
.has-ink-background-color .mef-industry-card__client {
	color: #FAFAF7 !important;
}
.has-ink-background-color .mef-process-step p,
.has-ink-background-color .mef-industry-card p {
	color: rgba(255,255,255,0.75) !important;
}
.has-ink-background-color .mef-industry-card__industry {
	color: #D7263D !important;
}
/* Buttons on dark bg */
.has-ink-background-color .wp-block-button__link {
	background: #D7263D !important;
	color: #FAFAF7 !important;
	border-color: #D7263D !important;
}
.has-ink-background-color .is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: #FAFAF7 !important;
	border-color: #FAFAF7 !important;
}
.has-ink-background-color .is-style-outline .wp-block-button__link:hover {
	background: #FAFAF7 !important;
	color: #0A0A0A !important;
}
/* FAQ on dark */
.has-ink-background-color details,
.has-ink-background-color .rfm-faq-item,
.has-ink-background-color .wp-block-details {
	border-color: rgba(255,255,255,0.15) !important;
}
.has-ink-background-color details:hover,
.has-ink-background-color .rfm-faq-item:hover,
.has-ink-background-color .wp-block-details:hover {
	background: rgba(215, 38, 61, 0.08) !important;
}

/* === 4. FEATURED REEL — project meta as a card ========== */
.rfm-featured-reel__meta,
.wp-block-columns.rfm-featured-reel__meta {
	background: linear-gradient(180deg, #FFFFFF 0%, #FAFAF7 100%);
	border: 1px solid #E5E5E5;
	border-radius: 4px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: 1.5rem !important;
	box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 4px 16px rgba(0,0,0,0.04);
	position: relative;
	overflow: hidden;
}
.rfm-featured-reel__meta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: var(--wp--preset--color--green, #D7263D);
}
.rfm-featured-reel__meta .wp-block-column {
	padding: 0 0.5rem;
}
.rfm-featured-reel__meta .rfm-meta-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green, #D7263D);
	margin-bottom: 0.4rem !important;
}
.rfm-featured-reel__meta p:not(.rfm-meta-label) {
	font-size: 17px;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #0A0A0A);
	margin: 0;
	line-height: 1.4;
}
@media (max-width: 700px) {
	.rfm-featured-reel__meta {
		padding: 1.5rem;
	}
	.rfm-featured-reel__meta .wp-block-column {
		padding: 0.5rem 0;
		border-bottom: 1px solid #EEE;
	}
	.rfm-featured-reel__meta .wp-block-column:last-child {
		border-bottom: 0;
	}
}

/* === 5. TIGHTER SECTION SPACING ========================= */
/* Was clamp(3.5rem, 7vw, 7rem). Now ~30% tighter on desktop, same on mobile. */
.mef-process-strip,
.mef-industry-grid,
.mef-mara-story,
.rfm-featured-reel,
.rfm-testimonial-strip,
.rfm-faq-accordion,
.wp-site-blocks > .wp-block-group:not(.mef-hero-copy):not(.alignfull) {
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
}

/* === 6. UNIVERSAL ALIGNMENT (no !important — editor wins) === */
/* Default: section eyebrows + H2s centered. */
.rfm-eyebrow {
	text-align: center;
}
.mef-process-strip h2,
.mef-industry-grid h2,
.rfm-featured-reel h2,
.rfm-testimonial-strip h2,
.rfm-faq-accordion h2 {
	text-align: center;
}

/* Mara story uses asymmetric layout — keeps its left-align */
.mef-mara-story .rfm-eyebrow,
.mef-mara-story h2,
.mef-mara-story__copy .rfm-eyebrow,
.mef-mara-story__copy h2 {
	text-align: left;
}

/* IMPORTANT: Eddie can now toggle text-align in Gutenberg per-element.
   The CSS above is the DEFAULT, not an override. Editor controls win. */

/* === 7. SECTION COLOR ALTERNATION (suggested defaults) === */
/* These can be overridden by Eddie via Gutenberg's bg color picker.
   The system below auto-applies a subtle vertical rhythm. */
.wp-site-blocks > .wp-block-group:nth-of-type(odd):not(.mef-hero-copy):not(.has-background) {
	background: linear-gradient(180deg, #FAFAF7 0%, #F5F5F0 100%);
}
.wp-site-blocks > .wp-block-group:nth-of-type(even):not(.mef-hero-copy):not(.has-background) {
	background: #FAFAF7;
}


/* ============================================================
 * v2.1.1 — Logo image + tighter spacing + dark intro
 * ============================================================ */

/* === 1. Logo image styling ============================== */
.mef-brand--logo {
	display: inline-flex;
	align-items: center;
	height: 48px;
	max-height: 48px;
	text-decoration: none;
}
.mef-brand-logo-img {
	height: 48px;
	width: auto;
	max-width: 240px;
	display: block;
	object-fit: contain;
	object-position: left center;
}
@media (max-width: 600px) {
	.mef-brand--logo { height: 40px; }
	.mef-brand-logo-img { height: 40px; max-width: 180px; }
}

/* === 2. Tighten ALL section spacing dramatically ======== */
/* Reduced from clamp(3rem, 5vw, 5rem) to clamp(2rem, 3.5vw, 3.5rem) */
.mef-process-strip,
.mef-industry-grid,
.mef-mara-story,
.rfm-featured-reel,
.rfm-testimonial-strip,
.rfm-faq-accordion,
.wp-site-blocks > .wp-block-group:not(.mef-hero-copy):not(.alignfull) {
	padding-top: clamp(2rem, 3.5vw, 3.5rem);
	padding-bottom: clamp(2rem, 3.5vw, 3.5rem);
}

/* Hero padding tightened */
.mef-hero-copy {
	padding-top: clamp(4rem, 8vw, 7rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Featured reel meta card tighter top spacing */
.rfm-featured-reel__meta {
	margin-top: 1rem !important;
}

/* === 3. Hero buttons — force center ===================== */
.mef-hero-copy .wp-block-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: nowrap;
	margin-left: auto;
	margin-right: auto;
}
.mef-hero-copy .wp-block-button {
	margin: 0;
}
@media (max-width: 600px) {
	.mef-hero-copy .wp-block-buttons {
		flex-wrap: wrap;
		justify-content: stretch;
	}
	.mef-hero-copy .wp-block-button {
		flex: 1 1 100%;
	}
}

/* === 4. Mara story alignment fix ======================== */
/* Both eyebrow + H2 LEFT-aligned to match column layout. */
.mef-mara-story .rfm-eyebrow {
	text-align: left;
	margin-left: 0;
	margin-right: auto;
}
.mef-mara-story h2,
.mef-mara-story__copy h2 {
	text-align: left;
}

/* === 5. Dark section variant — wider footprint =========== */
/* Make ANY group with bg=ink span full width visually */
.wp-block-group.has-ink-background-color {
	margin-left: 0;
	margin-right: 0;
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	padding-left: max(clamp(1.25rem, 5vw, 5rem), calc((100% - 1100px) / 2));
	padding-right: max(clamp(1.25rem, 5vw, 5rem), calc((100% - 1100px) / 2));
}
.wp-block-group.has-ink-background-color > * {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
.wp-block-group.has-ink-background-color > p {
	max-width: 720px;
}

/* === 6. Section heading divider hairline tighter ======== */
.mef-process-strip h2::before,
.mef-industry-grid h2::before,
.rfm-featured-reel h2::before,
.rfm-testimonial-strip h2::before,
.rfm-faq-accordion h2::before {
	margin-bottom: 1rem;
}

/* === 7. Tighten card grid gap =========================== */
.mef-industry-grid__cards,
.rfm-testimonial-strip__cards,
.rfm-industry-showcase__cards {
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.mef-process-strip__steps {
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}


/* ============================================================
 * v2.1.2 — STYLING SYSTEM (replaces stripped inline styles)
 *
 * Now that Eddie can finally control alignment in Gutenberg,
 * we need CSS that handles all the visual styling that was
 * previously inline. Theme.json + these rules = consistent.
 * ============================================================ */

/* === 1. EYEBROW STYLING (was inline, now CSS-driven) ====== */
.rfm-eyebrow,
p.rfm-eyebrow,
.has-text-color.rfm-eyebrow {
	font-family: 'Inter Tight', 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #D7263D;
	margin-bottom: 1rem;
}
.has-ink-background-color .rfm-eyebrow {
	color: #D7263D !important;
}

/* === 2. SECTION H2 (was inline, now CSS) ================== */
.wp-site-blocks .wp-block-heading,
.wp-site-blocks h2 {
	font-family: 'Oswald', 'Roboto Condensed', sans-serif;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.04;
	text-transform: uppercase;
}

/* H1 in hero */
.mef-hero-copy h1,
.mef-hero-copy .wp-block-heading {
	font-family: 'Oswald', 'Roboto Condensed', sans-serif;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.0;
	text-transform: uppercase;
}

/* Section H2s */
.mef-process-strip h2,
.mef-industry-grid h2,
.rfm-featured-reel h2,
.rfm-testimonial-strip h2,
.rfm-faq-accordion h2,
.mef-mara-story h2,
.wp-site-blocks > .wp-block-group > h2 {
	font-family: 'Oswald', 'Roboto Condensed', sans-serif;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.04;
	text-transform: uppercase;
}

/* === 3. H3 in cards (was inline) ========================= */
.mef-process-step h3,
.mef-industry-card h3,
.rfm-testimonial-card h3,
.wp-site-blocks h3 {
	font-family: 'Inter Tight', 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 0.5rem;
	line-height: 1.3;
}

/* === 4. CARD BODY TEXT (was inline gray) ================= */
.mef-process-step p,
.mef-industry-card p {
	font-size: 15px;
	line-height: 1.55;
	color: #5A5A5A;
}
.has-ink-background-color .mef-process-step p,
.has-ink-background-color .mef-industry-card p {
	color: rgba(255,255,255,0.75) !important;
}

/* === 5. INDUSTRY CARD TYPOGRAPHY ========================= */
.mef-industry-card__industry,
.rfm-testimonial-card__industry,
.rfm-industry-showcase__industry {
	font-family: 'Inter Tight', 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #5A5A5A;
	margin: 1rem 0 0.4rem;
}
.mef-industry-card__client,
.rfm-testimonial-card__client {
	font-family: 'Inter Tight', 'Inter', sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: #0A0A0A;
	margin: 0 0 0.75rem;
	line-height: 1.3;
}
.has-ink-background-color .mef-industry-card__client {
	color: #FAFAF7 !important;
}
.has-ink-background-color .mef-industry-card__industry,
.has-ink-background-color .rfm-testimonial-card__industry {
	color: #D7263D !important;
}

/* === 6. EQUAL CARD HEIGHTS (Construction card fix) ====== */
.mef-industry-grid__cards {
	grid-auto-rows: 1fr;
}
.mef-industry-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 240px;
}
.mef-industry-card .rfm-img-placeholder {
	flex: 0 0 auto;
}
.mef-industry-card__industry {
	flex: 0 0 auto;
}
.mef-industry-card__client {
	flex: 0 0 auto;
}
.mef-industry-card p:not(.mef-industry-card__industry):not(.mef-industry-card__client) {
	flex: 1 0 auto;  /* outcome quote pushes to fill remaining space */
	margin-bottom: 0;
}

/* Process step equal heights */
.mef-process-strip__steps {
	grid-auto-rows: 1fr;
}
.mef-process-step {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* === 7. MARA STORY HEADLINE STYLE (was inline) ========== */
.mef-mara-story h2,
.mef-mara-story__copy h2 {
	font-family: 'Oswald', 'Roboto Condensed', sans-serif;
	font-size: clamp(32px, 4.5vw, 48px);
	font-weight: 700;
	line-height: 1.06;
	text-transform: uppercase;
}

.mef-mara-story p,
.mef-mara-story__copy p {
	font-size: 17px;
	line-height: 1.6;
	margin-bottom: 1rem;
}

/* === 8. MARA CTA BUTTON =================================== */
.mef-mara-story__copy .wp-block-button__link,
.mef-mara-story a.wp-block-button__link {
	background-color: #D7263D;
	color: #FAFAF7;
	border-radius: 2px;
	padding: 1rem 1.75rem;
	font-weight: 700;
	display: inline-block;
	text-decoration: none;
}
.mef-mara-story__copy .wp-block-button__link:hover {
	background-color: #A81C2E;
	color: #FAFAF7;
}

/* === 9. CAPTION TEXT (small/gray under videos) =========== */
.rfm-video-embed + p:not(.rfm-eyebrow),
.rfm-video-facade + p:not(.rfm-eyebrow) {
	font-size: 13px;
	font-style: italic;
	color: #8A8A8A;
	text-align: center;
	margin-top: 0.6rem;
	margin-bottom: 0;
}

/* === 10. EVEN TIGHTER SECTION SPACING =================== */
/* v2.1.2 reduces another step from v2.1.1 */
.mef-process-strip,
.mef-industry-grid,
.mef-mara-story,
.rfm-featured-reel,
.rfm-testimonial-strip,
.rfm-faq-accordion,
.wp-site-blocks > .wp-block-group:not(.mef-hero-copy):not(.alignfull):not(.has-ink-background-color) {
	padding-top: clamp(1.75rem, 3vw, 3rem);
	padding-bottom: clamp(1.75rem, 3vw, 3rem);
}

.mef-hero-copy {
	padding-top: clamp(3rem, 6vw, 5.5rem);
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* Dark intro section keeps a bit more padding for visual presence */
.mef-intro-section,
.wp-site-blocks > .wp-block-group.has-ink-background-color {
	padding-top: clamp(3rem, 5vw, 4.5rem);
	padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

/* === 11. PARAGRAPH RHYTHM ON DARK SECTIONS ============== */
.has-ink-background-color p:not(.rfm-eyebrow) {
	font-size: 18px;
	line-height: 1.7;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 600px) {
	.has-ink-background-color p:not(.rfm-eyebrow) {
		font-size: 16px;
	}
}

/* === 12. HERO BUTTONS (final centered) =================== */
.mef-hero-copy .wp-block-buttons {
	display: flex !important;
	justify-content: center !important;
	flex-wrap: nowrap;
	gap: 0.6rem;
}
@media (max-width: 600px) {
	.mef-hero-copy .wp-block-buttons {
		flex-wrap: wrap;
		justify-content: stretch !important;
	}
}


/* ============================================================
 * v2.1.3 — Logo via Customizer + Hero rhythm fix
 * ============================================================ */

/* === Logo: text fallback styling ========================= */
.mef-brand-fallback {
	font-family: 'Oswald', 'Roboto Condensed', sans-serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #0A0A0A;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.mef-brand-fallback .mef-brand-mark {
	color: #D7263D;
	font-size: 0.85em;
}

/* If Eddie uploads custom_logo via WP Customizer (Appearance → Customize → Site Identity),
   WP auto-injects a <a class="custom-logo-link"><img class="custom-logo"></a> 
   right at the top of the page. We hide it visually but use it via JS or hand-place. */
/* For now, the text fallback IS the logo. Once Eddie has a working logo URL,
   we replace the .mef-brand-fallback span with an <img>. */

/* === Hero rhythm: H1 constrained, subhead breathes ====== */
.mef-hero-copy h1 {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
.mef-hero-copy > p {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.55;
}
.mef-hero-copy .rfm-eyebrow {
	margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
	.mef-hero-copy h1 {
		max-width: 100%;
	}
	.mef-hero-copy > p {
		max-width: 100%;
		font-size: 16px;
	}
}